[ 최종 QA ]: 온보딩 페이지 최종 QA를 진행합니다.

src/pages/OnboardingPage/StepService/AllowedServices/AllowedServices.tsx

@@ -2,6 +2,7 @@ import { ButtonHTMLAttributes, InputHTMLAttributes, KeyboardEvent, ReactNode, us
 
 import HomeLargeBtn from '@/shared/components/ButtonHomeLarge/ButtonHomeLarge';
 import ColorPalette from '@/shared/components/ColorPallete/ColorPallete';
+import FaviconImage from '@/shared/components/FaviconImage/FaviconImage';
 import Spacer from '@/shared/components/Spacer/Spacer';
 
 import useClickOutside from '@/shared/hooks/useClickOutside';
@@ -155,7 +156,7 @@ const AllowedServiceItem = ({ onClick, ...props }: AllowedServiceItemProps) => {
 	return (
 		<li className="flex h-[5.3rem] w-full min-w-0 items-center border-b border-b-gray-bg-04 py-[1.2rem]">
 			<span className="flex w-[12rem] gap-[1.2rem]">
-				<img src={props.favicon} alt={`${props.siteName} 아이콘`} className="h-[2rem] w-[2rem] flex-shrink-0" />
+				<FaviconImage src={props.favicon} alt={`${props.siteName} 아이콘`} className="flex-shrink-0" />
 				<h3 className="w-[6rem] flex-shrink-0 truncate p-0 text-white body-med-16">{props.siteName}</h3>
 			</span>
 			<div className="ml-[1rem] h-[3.1rem] w-[20.4rem] flex-shrink-0 truncate rounded-[20px] bg-gray-bg-04 px-[1rem] py-[0.6rem] text-gray-04 body-reg-16">

src/pages/OnboardingPage/StepService/StepService.tsx

@@ -11,13 +11,13 @@ import { ColorPaletteType } from '@/shared/types/allowedService';
 import { AllowedSiteType, AllowedSitesType } from '@/shared/types/allowedSites';
 import type { FieldType } from '@/shared/types/fileds';
 
-import { FIELDS } from '@/shared/constants/fields';
-import { SUGGESTED_STIES } from '@/shared/constants/suggestedSites';
+import { FIELDS, FIELDS_MAP } from '@/shared/constants/fields';
 
 import BackIcon from '@/shared/assets/svgs/ic_back_btn.svg?react';
 
 import { useGetUrlInfo } from '@/shared/apisV2/common/common.mutations';
 import { usePostInterestArea } from '@/shared/apisV2/onboarding/onboarding.mutations';
+import { useGetSuggestedSites } from '@/shared/apisV2/onboarding/onboarding.queries';
 
 import AllowedService from './AllowedServices/AllowedServices';
 import ButtonService from './ButtonService/ButtonService';
@@ -40,6 +40,7 @@ const StepService = ({ setStep, selectedField }: StepServiceProps) => {
 
 	const { mutateAsync: getUrlInfo, reset: resetGetUrlInfo, isError, isPending } = useGetUrlInfo();
 	const { mutate: postInterestArea } = usePostInterestArea();
+	const { data: suggestedSites } = useGetSuggestedSites();
 
 	const getDomainFromUrl = (url: string) => {
 		return url.replace(/^(https?:\/\/)?(www\.)?/, '').toLowerCase();
@@ -116,7 +117,7 @@ const StepService = ({ setStep, selectedField }: StepServiceProps) => {
 			postInterestArea(
 				{
 					allowedSites: selectedServices,
-					interestArea: selectedField,
+					interestArea: FIELDS_MAP[selectedField],
 					name: categoryNameInput,
 					colorCode: selectedColor,
 				},
@@ -158,8 +159,8 @@ const StepService = ({ setStep, selectedField }: StepServiceProps) => {
 				<Spacer.Height as="main" className="flex flex-col pb-[3rem]">
 					<h1 className="mb-[2rem] text-white title-bold-36">작업 시 사용할 서비스들을 입력해주세요</h1>
 					<p className="mb-[2.3rem] text-gray-04 subhead-reg-22">
-						필요한 서비스에만 들어가고, 나의 온전한 집중 시간을 기록할 수 있어요. 만든 모립세트는 언제든 편집할 수
-						있어요.
+						필요한 서비스에만 들어가고, 나의 온전한 집중 시간을 기록할 수 있어요. 만든 허용서비스 리스트는 언제든 편집할
+						수 있어요.
 					</p>
 
 					<Tabs activeTab={activeTab} onChangeActiveTab={handleChangeActiveTab}>
@@ -170,7 +171,7 @@ const StepService = ({ setStep, selectedField }: StepServiceProps) => {
 						</Tabs.TriggerList>
 
 						<Tabs.ContentList>
-							{SUGGESTED_STIES[activeTab].map((site) => (
+							{suggestedSites?.data?.[FIELDS_MAP[activeTab]].map((site: AllowedSiteType) => (
 								<ButtonService
 									key={site.siteUrl}
 									favicon={site.favicon}

src/shared/apisV2/onboarding/onboarding.api.ts

@@ -1,9 +1,10 @@
-import { PostInterestAreaReq, PostInterestAreaRes } from '@/shared/types/api/onboarding';
+import { GetSuugestedSitesRes, PostInterestAreaReq, PostInterestAreaRes } from '@/shared/types/api/onboarding';
 
 import { authClient } from '../client';
 
 export const ONBOARDING_URL = {
 	POST_INTEREST_AREA: 'api/v2/onboard',
+	GET_SUGGESTED_SITES: 'api/v2/onboard',
 };
 
 export const postInterestArea = async ({
@@ -21,3 +22,8 @@ export const postInterestArea = async ({
 	);
 	return data;
 };
+
+export const getSuggestedSites = async (): Promise<GetSuugestedSitesRes> => {
+	const { data } = await authClient.get(ONBOARDING_URL.GET_SUGGESTED_SITES);
+	return data;
+};

src/shared/apisV2/onboarding/onboarding.keys.ts

@@ -0,0 +1,3 @@
+export const onboardingKeys = {
+	suggestedSites: ['suggestedSites'] as const,
+};

src/shared/apisV2/onboarding/onboarding.queries.ts

@@ -0,0 +1,11 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { getSuggestedSites } from './onboarding.api';
+import { onboardingKeys } from './onboarding.keys';
+
+export const useGetSuggestedSites = () => {
+	return useQuery({
+		queryKey: onboardingKeys.suggestedSites,
+		queryFn: getSuggestedSites,
+	});
+};

src/shared/layout/Sidebar/Sidebar.tsx

@@ -34,7 +34,9 @@ const Sidebar = () => {
 
 	return (
 		<>
-			<aside className="sticky top-0 flex min-h-screen w-[7.4rem] flex-shrink-0 flex-col items-center justify-between bg-gray-bg-02 pb-[2.1rem] pt-[5.4rem]">
+			<aside
+				className={`sticky top-0 flex min-h-screen w-[7.4rem] flex-shrink-0 flex-col items-center justify-between bg-gray-bg-02 pb-[2.1rem] pt-[5.4rem] ${pathName === ROUTES_CONFIG.onboarding.path ? 'pointer-events-none' : ''}`}
+			>
 				<button type="button" onClick={navigateHome} className="relative flex w-full items-center gap-[0.8rem]">
 					<hr
 						className={`h-[54px] w-[2px] rounded-r-[8px] ${pathName === ROUTES_CONFIG.home.path ? 'bg-white' : 'border-transparent bg-transparent'}`}

src/shared/types/api/onboarding.ts

@@ -1,14 +1,22 @@
+import { AllowedSiteType } from '@/shared/types/allowedSites';
+
 import { ColorPaletteType } from '../allowedService';
-import { FieldType } from '../fileds';
+import { FieldTypeMapped } from '../fileds';
 
 export interface PostInterestAreaReq {
 	name: string;
 	colorCode: ColorPaletteType;
-	interestArea: FieldType;
+	interestArea: FieldTypeMapped;
 	allowedSites: { favicon: string; siteName: string; pageName: string; siteUrl: string }[];
 }
 
 export interface PostInterestAreaRes {
 	status: number;
 	message: string;
 }
+
+export interface GetSuugestedSitesRes {
+	status: number;
+	message: string;
+	data: Record<FieldTypeMapped, AllowedSiteType[]>;
+}

src/shared/types/fileds.ts

@@ -1,3 +1,5 @@
-import { FIELDS } from '@/shared/constants/fields';
+import { FIELDS, FIELDS_MAP } from '@/shared/constants/fields';
 
 export type FieldType = (typeof FIELDS)[number];
+
+export type FieldTypeMapped = (typeof FIELDS_MAP)[FieldType];