feat: 허용서비스세트 추천 사이트 조회 mock api 연결 (#242)

src/pages/AllowedServicePage/AllowedServicePage.tsx

@@ -4,6 +4,8 @@ import ModalWrapper, { ModalWrapperRef } from '@/shared/components/ModalWrapper/
 
 import useClickOutside from '@/shared/hooks/useClickOutside';
 
+import { CATEGORY_MODALTABS } from '@/shared/constants/tabSelections';
+
 import BellIcon from '@/shared/assets/svgs/bell.svg?react';
 import FriendSettingIcon from '@/shared/assets/svgs/friend_setting.svg?react';
 
@@ -27,6 +29,11 @@ const AllowedServicePage = () => {
 		},
 	]);
 	const [activeAllowedServiceId, setActiveAllowedServiceId] = useState<number>(allowedServices[0].id);
+	const [selectedTabId, setSelectedTabId] = useState(CATEGORY_MODALTABS[0].id);
+
+	const handleTabChange = (tab: number) => {
+		setSelectedTabId(tab);
+	};
 
 	const handleAddAllowedService = () => {
 		const newSet: AllowedService = {
@@ -115,11 +122,13 @@ const AllowedServicePage = () => {
 						<BoxMakeAllowedService
 							allowedService={activeAllowedService}
 							updateAllowedService={(key, value) => handleUpdateAllowedService(activeAllowedServiceId, key, value)}
+							handleTabChange={handleTabChange}
+							selectedTabId={selectedTabId}
 						/>
 					)}
 
 					<div className="mt-[4.2rem]">
-						<BoxRecommendService addUrlToAllowedService={handleAddUrlToAllowedService} />
+						<BoxRecommendService addUrlToAllowedService={handleAddUrlToAllowedService} selectedTabId={selectedTabId} />
 					</div>
 				</div>
 			</div>

src/pages/AllowedServicePage/BoxMakeAllowedService/BoxMakeAllowedService.tsx

@@ -17,12 +17,18 @@ import TableAllowedService from './TableAllowedService/TableAllowedService';
 interface BoxMakeAllowedServiceProps {
 	allowedService: AllowedService;
 	updateAllowedService: <T extends keyof AllowedService>(key: T, value: AllowedService[T]) => void;
+	handleTabChange: (number: number) => void;
+	selectedTabId: number;
 }
 
-const BoxMakeAllowedService = ({ allowedService, updateAllowedService }: BoxMakeAllowedServiceProps) => {
+const BoxMakeAllowedService = ({
+	allowedService,
+	updateAllowedService,
+	handleTabChange,
+	selectedTabId,
+}: BoxMakeAllowedServiceProps) => {
 	const { allowedServiceName, selectedColor, urlList } = allowedService;
 	const [isPaletteOpen, setIsPaletteOpen] = useState(false);
-	const [selectedTabId, setSelectedTabId] = useState(CATEGORY_MODALTABS[0].id);
 
 	const handleColorPalleteOpen = () => {
 		setIsPaletteOpen((prev) => !prev);
@@ -37,9 +43,6 @@ const BoxMakeAllowedService = ({ allowedService, updateAllowedService }: BoxMake
 		updateAllowedService('allowedServiceName', e.target.value);
 	};
 
-	const handleTabChange = (tab: number) => {
-		setSelectedTabId(tab);
-	};
 	const handleDeleteUrlInfo = (urlToDelete: string) => {
 		const updatedUrlList = urlList.filter((urlInfo) => urlInfo.url !== urlToDelete);
 		updateAllowedService('urlList', updatedUrlList);

src/pages/AllowedServicePage/BoxRecommendService/BoxRecommendService.tsx

@@ -4,25 +4,37 @@ import ArrowSVGBtn from '@/shared/components/ButtonArrowSVG/ButtonArrowSVG';
 
 import { Direction } from '@/shared/types/global';
 
-import { recommendServices } from '@/shared/constants/recommendSites';
+import { useGetRecommendService } from '@/shared/apisV2/allowedService/queries';
 
 import { UrlInfo } from '../types';
 
 interface BoxRecommendServiceProps {
 	addUrlToAllowedService: (url: UrlInfo) => void;
+	selectedTabId: number;
 }
 
-const BoxRecommendService = ({ addUrlToAllowedService }: BoxRecommendServiceProps) => {
-	const [availableServices, setAvailableServices] = useState(recommendServices);
+const BoxRecommendService = ({ addUrlToAllowedService, selectedTabId }: BoxRecommendServiceProps) => {
+	const serviceType = selectedTabId === 1 ? 'site' : 'app';
 
-	const handleServiceClick = (service: { serviceName: string; url: string }) => {
+	const { data: recommendServices, isError, error } = useGetRecommendService(serviceType);
+	const recommend = recommendServices?.data?.recommendServices || [];
+
+	const [availableServices, setAvailableServices] = useState(recommend);
+
+	if (recommendServices && recommendServices.data?.recommendServices.length > 0 && availableServices.length === 0) {
+		setAvailableServices(recommendServices.data.recommendServices);
+	}
+
+	const handleServiceClick = (service: { serviceName: string; serviceUrl: string }) => {
 		addUrlToAllowedService({
 			siteName: service.serviceName.replace(/^www\./, '').replace(/\.[a-z]{2,}$/, ''),
 			page: service.serviceName,
-			url: service.url,
-			faviconUrl: `https://www.google.com/s2/favicons?domain=${service.url}`,
+			url: service.serviceUrl,
+			faviconUrl: `https://www.google.com/s2/favicons?domain=${service.serviceUrl}`,
 		});
-		setAvailableServices((prevServices) => prevServices.filter((item) => item.url !== service.url));
+		setAvailableServices((prevServices: { serviceName: string; serviceUrl: string }[]) =>
+			prevServices.filter((item) => item.serviceUrl !== service.serviceUrl),
+		);
 	};
 
 	const carouselContainerRef = useRef<HTMLDivElement | null>(null);
@@ -38,6 +50,10 @@ const BoxRecommendService = ({ addUrlToAllowedService }: BoxRecommendServiceProp
 		}
 	};
 
+	if (isError) {
+		console.error(error);
+	}
+
 	return (
 		<div className="relative h-[18.8rem] w-[132rem] flex-shrink-0 rounded-[16px] bg-gray-bg-03">
 			<div className="mx-[2.8rem] flex w-[126.4rem] items-end justify-between self-stretch pt-[2.2rem]">
@@ -60,14 +76,14 @@ const BoxRecommendService = ({ addUrlToAllowedService }: BoxRecommendServiceProp
 				ref={carouselContainerRef}
 				className="mx-[2.8rem] my-[2.4rem] flex items-center gap-[1.4rem] overflow-x-hidden"
 			>
-				{availableServices.map((service, index) => (
+				{availableServices.map((service: { serviceName: string; serviceUrl: string }, index: number) => (
 					<div
 						key={index}
 						className="flex w-[23.9rem] flex-shrink-0 items-center gap-[1.5rem] rounded-[8px] bg-gray-bg-01 p-[2rem]"
 						onClick={() => handleServiceClick(service)}
 					>
 						<img
-							src={`https://www.google.com/s2/favicons?domain=${service.url}`}
+							src={`https://www.google.com/s2/favicons?domain=${service.serviceUrl}`}
 							alt="favicon"
 							className="h-[4.2rem] w-[4.2rem] rounded-full"
 						/>

src/shared/apisV2/allowedService/axios/index.ts

@@ -0,0 +1,10 @@
+import axios from 'axios';
+
+import { ALLOWEDSERVICE_MOCK_URL } from '@/mocks/allowedService/resolvers/allowedServiceResolvers';
+
+export const getRecommendServices = async (category: string) => {
+	const { data } = await axios.get(ALLOWEDSERVICE_MOCK_URL.GET_RECOMMEND_SERVICES, {
+		params: { category },
+	});
+	return data;
+};

src/shared/apisV2/allowedService/queries/index.ts

@@ -0,0 +1,10 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { getRecommendServices } from './../axios/index';
+
+export const useGetRecommendService = (category: string) => {
+	return useQuery({
+		queryKey: ['recommendServices', category],
+		queryFn: () => getRecommendServices(category),
+	});
+};