[ Feat ] 허용 서비스 뷰 v2 api를 연동합니다. (#257)

* feat: 디버깅을 위해 리액트쿼리 DevTool 설치

* feat: MSW 실행 코드 임시 주석

* feat: 컴포넌트 폴더의 depth 감소를 위해 기존 코드 삭제

* refactor: 컴파운드 컴포넌트 패턴으로 기존 컴포넌트 재구성

* refactor: 추천 서비스 컴포넌트 네이밍 수정 및 컴파운드 컴포넌트 패턴으로 리팩토링

* feat: allowedServicePage에 컴포넌트 변경 사항 적용

* chore: 스타일 및 코드 일부 자잘한 수정사항 반영

* feat: AllowedService API 함수 및 타입 작성

* refactor: 컬레팔레트 컴포넌트 구조 변경 및 shared로 이동

- 온보딩 뷰에서도 쓰이기 때문에 폴더 위치를 변경했습니다.

* chore: 필요없는 상수 삭제, Modal Wrapper 일부 스타일 수정 / url 관련 유틸함수 추가

package.json

@@ -26,6 +26,7 @@
   },
   "devDependencies": {
     "@tanstack/eslint-plugin-query": "^5.49.1",
+    "@tanstack/react-query-devtools": "^5.66.0",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@types/react": "^18.3.3",
     "@types/react-datepicker": "^6.2.0",

src/App.tsx

@@ -3,6 +3,7 @@ import { Provider } from 'jotai';
 import { RouterProvider } from 'react-router-dom';
 
 import { QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 
 import { queryClient } from '@/shared/apis/queryClient';
 
@@ -12,6 +13,9 @@ import GlobalErrorBoundary from './shared/components/ErrorBoundary/GlobalErrorBo
 const App = () => {
 	return (
 		<QueryClientProvider client={queryClient}>
+			<div style={{ fontSize: '16px' }}>
+				<ReactQueryDevtools initialIsOpen={false} />
+			</div>
 			<Provider>
 				<GlobalErrorBoundary>
 					<RouterProvider router={router} />

src/main.tsx

@@ -4,11 +4,12 @@ import ReactDOM from 'react-dom/client';
 import App from './App.tsx';
 import './index.css';
 
+// NOTE: 서버 개발 완료로 잠시 주석처리
 async function enableMocking() {
-	if (import.meta.env.DEV) {
-		const { worker } = await import('./mocks/browser');
-		return worker.start();
-	}
+	// if (import.meta.env.DEV) {
+	// 	const { worker } = await import('./mocks/browser');
+	// 	return worker.start();
+	// }
 }
 
 enableMocking().then(() => {

src/pages/AllowedServicePage/AllowedServiceGroupDetail/AllowedServiceGroupDetail.tsx

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+
+import Spacer from '@/shared/components/Spacer/Spacer';
+
+import AllowedServiceGroupDetailContent from './Content/AllowedServiceGroupDetailContent';
+import AllowedServiceGroupDetailHeader from './Header/AllowedServiceGroupDetailHeader';
+import AllowedServiceGroupDetailTabs from './Tabs/AllowedServiceGroupDetailTabs';
+
+interface AllowedServiceGroupDetailRootProps {
+	children: ReactNode;
+}
+
+const AllowedServiceGroupDetailRoot = ({ children }: AllowedServiceGroupDetailRootProps) => {
+	return <Spacer className="relative flex flex-col items-start gap-[2rem]">{children}</Spacer>;
+};
+
+const AllowedServiceGroupDetail = Object.assign(AllowedServiceGroupDetailRoot, {
+	Header: AllowedServiceGroupDetailHeader,
+	Input: AllowedServiceGroupDetailHeader.Input,
+	ColorButton: AllowedServiceGroupDetailHeader.ColorButton,
+	Tabs: AllowedServiceGroupDetailTabs,
+	TabButton: AllowedServiceGroupDetailTabs.Button,
+	Content: AllowedServiceGroupDetailContent,
+	Table: AllowedServiceGroupDetailContent.Table,
+	TableRow: AllowedServiceGroupDetailContent.TableRow,
+});
+
+export default AllowedServiceGroupDetail;

src/pages/AllowedServicePage/AllowedServiceGroupDetail/Content/AllowedServiceGroupDetailContent.tsx

@@ -0,0 +1,93 @@
+import { ReactNode } from 'react';
+
+import Spacer from '@/shared/components/Spacer/Spacer';
+
+import { getMainDomain } from '@/shared/utils/url';
+
+import { AllowedServiceGroupDetailSiteType } from '@/shared/types/allowedService';
+
+import MinusBtn from '@/shared/assets/svgs/minus_btn.svg?react';
+
+import { getServiceFavicon } from '@/pages/OnboardingPage/utils/serviceUrl';
+
+export interface AllowedServiceGroupDetailContentProps {
+	children: ReactNode;
+}
+
+export const AllowedServiceGroupDetailContentRoot = ({ children }: AllowedServiceGroupDetailContentProps) => {
+	return <Spacer className="flex flex-col gap-[5rem]">{children}</Spacer>;
+};
+
+export interface AllowedServiceGroupDetailContentTableProps {
+	totalLength: number;
+	children: ReactNode;
+}
+
+export const AllowedServiceGroupDetailContentTable = ({
+	totalLength,
+	children,
+}: AllowedServiceGroupDetailContentTableProps) => {
+	const tableNum = 9;
+
+	const renderEmptyRows = (count: number) => {
+		return Array.from({ length: count }).map((_, index) => (
+			<div key={`empty-row-${index}`} className="h-[5rem] w-full border-b-[0.1rem] border-gray-bg-04" />
+		));
+	};
+	const emptyRowCount = Math.max(tableNum - totalLength, 0);
+
+	return (
+		<Spacer className="mt-[1rem] rounded-[8px]">
+			<Spacer className="flex flex-col">
+				<div className="flex h-[4.6rem] items-center border-b-[0.1rem] border-gray-bg-04 px-[1rem] text-gray-04 detail-semibold-14">
+					<div className="w-[24rem] flex-shrink-0">사이트 이름</div>
+					<div className="w-[31rem] flex-shrink-0 text-left">페이지</div>
+					<div className="w-full text-left">주소</div>
+				</div>
+
+				<Spacer className="overflow-y-auto">
+					{children}
+					{renderEmptyRows(emptyRowCount)}
+				</Spacer>
+			</Spacer>
+		</Spacer>
+	);
+};
+
+export interface AllowedServiceGroupDetailContentRootTableRowProps extends AllowedServiceGroupDetailSiteType {
+	onDeleteAllowedSite: () => void;
+}
+
+export const AllowedServiceGroupDetailContentTableRow = ({
+	onDeleteAllowedSite,
+	...allowedSiteData
+}: AllowedServiceGroupDetailContentRootTableRowProps) => {
+	return (
+		<div className="flex h-[5rem] items-center border-b-[0.1rem] border-gray-bg-04 px-[1rem]">
+			<div className="flex w-[24rem] flex-shrink-0 items-center gap-x-[0.5rem] truncate pr-[1rem] text-left text-white body-med-16">
+				<img src={getServiceFavicon(allowedSiteData.siteUrl)} alt="favicon" className="mr-[0.6rem] h-[2rem] w-[2rem]" />
+				<p className="truncate">{getMainDomain(allowedSiteData.siteUrl)}</p>
+			</div>
+			<div className="w-[31rem] flex-shrink-0 truncate pr-[1rem] text-left text-gray-04 body-reg-16">
+				<p className="truncate">{allowedSiteData.siteName}</p>
+			</div>
+			<div className="w-full truncate pr-[1rem] text-left text-gray-04 body-reg-16">
+				<p className="truncate">{allowedSiteData.siteUrl}</p>
+			</div>
+			<div>
+				<div className="pr-[2.05rem]">
+					<button type="button" onClick={onDeleteAllowedSite}>
+						<MinusBtn className="fill-gray-bg-07 hover:fill-error-01 active:fill-error-03" />
+					</button>
+				</div>
+			</div>
+		</div>
+	);
+};
+
+const AllowedServiceGroupDetailContent = Object.assign(AllowedServiceGroupDetailContentRoot, {
+	Table: AllowedServiceGroupDetailContentTable,
+	TableRow: AllowedServiceGroupDetailContentTableRow,
+});
+
+export default AllowedServiceGroupDetailContent;