From 78eef6f4b542abc14c36d01991de0bfef173a660 Mon Sep 17 00:00:00 2001 From: Parkchaeyeon Date: Tue, 21 Jan 2025 05:35:37 +0900 Subject: [PATCH 1/7] =?UTF-8?q?feat:=20useFetchDesignList=20=EB=A7=8C?= =?UTF-8?q?=EB=93=A4=EA=B8=B0!?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/designList/useFetchDesignList.ts | 29 +++++++++++++++++++ src/apis/home/useFetchStoreRank.ts | 1 + src/apis/instance.ts | 2 ++ src/constants/apis/api.ts | 2 ++ src/constants/apis/queryKey.ts | 1 + .../page/DesignListPage/DesignListPage.tsx | 17 ++++++++++- src/types/apis/designList/index.ts | 8 +++++ 7 files changed, 59 insertions(+), 1 deletion(-) create mode 100644 src/apis/designList/useFetchDesignList.ts diff --git a/src/apis/designList/useFetchDesignList.ts b/src/apis/designList/useFetchDesignList.ts new file mode 100644 index 00000000..9080f362 --- /dev/null +++ b/src/apis/designList/useFetchDesignList.ts @@ -0,0 +1,29 @@ +import { useSuspenseQuery } from '@tanstack/react-query'; + +import { instance } from '@apis/instance'; + +import { END_POINT, queryKey } from '@constants'; + +import { ApiResponseType, DesignListResponse } from '@types'; + +const fetchDesignList = async ( + daycategory: string, + theme: string +): Promise => { + try { + const response = await instance.get>( + END_POINT.FETCH_DESIGN_LIST(daycategory, theme) + ); + return response.data.data; + } catch (error) { + console.log(error); + throw error; + } +}; + +export const useFetchDesignList = (daycategory: string, theme: string) => { + return useSuspenseQuery({ + queryKey: [queryKey.DESIGN_LIST], + queryFn: () => fetchDesignList(daycategory, theme), + }); +}; diff --git a/src/apis/home/useFetchStoreRank.ts b/src/apis/home/useFetchStoreRank.ts index 01d2925d..83721e74 100644 --- a/src/apis/home/useFetchStoreRank.ts +++ b/src/apis/home/useFetchStoreRank.ts @@ -13,6 +13,7 @@ const fetchStoreRank = async (): Promise => { ); return response.data.data; } catch (error) { + console.log(error); throw error; } }; diff --git a/src/apis/instance.ts b/src/apis/instance.ts index 8168c7e6..bce27501 100644 --- a/src/apis/instance.ts +++ b/src/apis/instance.ts @@ -12,6 +12,8 @@ export const instance = axios.create({ // }, 서버에서 set-cookie로 줘서 만약 필요 없으면 지울 예정 }); + + export function get(...args: Parameters) { return instance.get(...args); } diff --git a/src/constants/apis/api.ts b/src/constants/apis/api.ts index 86cb1021..c24e8c4e 100644 --- a/src/constants/apis/api.ts +++ b/src/constants/apis/api.ts @@ -2,4 +2,6 @@ export const BASE_URL = import.meta.env.VITE_APP_BASE_URL; export const END_POINT = { FETCH_STORE_RANK: '/api/v1/store/rank', + FETCH_DESIGN_LIST: (daycategory: string, theme: string) => + `/api/v1/cake/latest?$daycategory=${daycategory}&themeName=${theme}?`, } as const; diff --git a/src/constants/apis/queryKey.ts b/src/constants/apis/queryKey.ts index 9d57edc4..07c444a3 100644 --- a/src/constants/apis/queryKey.ts +++ b/src/constants/apis/queryKey.ts @@ -1,3 +1,4 @@ export const queryKey = { STORE_RANK: 'storeRank', + DESIGN_LIST:'designList' } as const; diff --git a/src/pages/designList/page/DesignListPage/DesignListPage.tsx b/src/pages/designList/page/DesignListPage/DesignListPage.tsx index 08f5ffa9..31f492db 100644 --- a/src/pages/designList/page/DesignListPage/DesignListPage.tsx +++ b/src/pages/designList/page/DesignListPage/DesignListPage.tsx @@ -1,8 +1,10 @@ import { useEffect, useRef, useState } from 'react'; import { useLocation } from 'react-router-dom'; +import { useFetchDesignList } from '@apis/designList/useFetchDesignList'; + import { CardList } from '@components'; -import { CATEGORY, SUB_CATEGORY } from '@constants'; +import { CATEGORY, END_POINT, SUB_CATEGORY } from '@constants'; import { useFilteredCardList } from '@hooks'; import CategoryBar from '@pages/designList/components/CategoryBar/CategoryBar'; import SubCategoryBar from '@pages/designList/components/SubCategoryBar/SubCategoryBar'; @@ -39,6 +41,19 @@ const DesignListPage = () => { } }, [selectedCategories.category]); + const { data: designListData } = useFetchDesignList( + selectedCategories.category, + selectedCategories.subCategory + ); + console.log(designListData); + console.log(selectedCategories.category, selectedCategories.subCategory); + // console.log( + // END_POINT.FETCH_DESIGN_LIST( + // selectedCategories.category, + // selectedCategories.subCategory + // ) + // ); + const handleCategoryChange = (category: CategoryType) => { setSelectedCategories({ category: category, diff --git a/src/types/apis/designList/index.ts b/src/types/apis/designList/index.ts index e69de29b..d63928b2 100644 --- a/src/types/apis/designList/index.ts +++ b/src/types/apis/designList/index.ts @@ -0,0 +1,8 @@ +import { DesignCardListType } from "src/types/types"; + +export interface DesignListResponse { + nextCakeIdCursor: number, + isLastData: number, + cakeCount: number, + cakes: DesignCardListType +} \ No newline at end of file From 47a63c926a51962014b3fa8609fac386fefedb7a Mon Sep 17 00:00:00 2001 From: Parkchaeyeon Date: Tue, 21 Jan 2025 07:12:44 +0900 Subject: [PATCH 2/7] =?UTF-8?q?feat:=20DesignList,=20DesignDetail=20API=20?= =?UTF-8?q?=EC=97=B0=EA=B2=B0=ED=95=98=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/designList/useFetchDesignDetail.ts | 47 +++++++++++++++++++ src/constants/apis/api.ts | 3 +- src/constants/apis/queryKey.ts | 3 +- .../page/DesignListPage/DesignListPage.tsx | 12 ++++- src/pages/home/page/HomePage/HomePage.tsx | 5 ++ 5 files changed, 66 insertions(+), 4 deletions(-) create mode 100644 src/apis/designList/useFetchDesignDetail.ts diff --git a/src/apis/designList/useFetchDesignDetail.ts b/src/apis/designList/useFetchDesignDetail.ts new file mode 100644 index 00000000..ba908f96 --- /dev/null +++ b/src/apis/designList/useFetchDesignDetail.ts @@ -0,0 +1,47 @@ +import { useSuspenseQuery } from '@tanstack/react-query'; + +import { instance } from '@apis/instance'; + +import { queryKey } from '@constants'; + +import { ApiResponseType } from '@types'; + +interface cakeType { + cakeId: string; + isLiked: boolean; + imageUrl: string; +} + +interface DesignDetailResponse { + storeId: number; + storeName: string; + station: string; + cakes: cakeType[]; +} + +const fetchDesignDetail = async ( + cakeId: number, + daycategory: string, + themeName: string +): Promise => { + try { + const response = await instance.get>( + `/api/v1/cake/${cakeId}/select?dayCategory=${daycategory}&theme=ALL` + ); + return response.data.data; + } catch (error) { + console.log(error); + throw error; + } +}; + +export const useFetchDesignDetail = ( + cakeId: number, + daycategory: string, + themeName: string +) => { + return useSuspenseQuery({ + queryKey: [queryKey.DESIGN_DETAIL], + queryFn: () => fetchDesignDetail(cakeId, daycategory, themeName), + }); +}; diff --git a/src/constants/apis/api.ts b/src/constants/apis/api.ts index c24e8c4e..95d5c95c 100644 --- a/src/constants/apis/api.ts +++ b/src/constants/apis/api.ts @@ -3,5 +3,6 @@ export const BASE_URL = import.meta.env.VITE_APP_BASE_URL; export const END_POINT = { FETCH_STORE_RANK: '/api/v1/store/rank', FETCH_DESIGN_LIST: (daycategory: string, theme: string) => - `/api/v1/cake/latest?$daycategory=${daycategory}&themeName=${theme}?`, + `/api/v1/cake/latest?dayCategory=${daycategory}&themeName=ALL`, + FETCH_DESIGN_DETAIL: (cakeId: number) => `/api/v1/cake/${cakeId}/select` } as const; diff --git a/src/constants/apis/queryKey.ts b/src/constants/apis/queryKey.ts index 07c444a3..5064d522 100644 --- a/src/constants/apis/queryKey.ts +++ b/src/constants/apis/queryKey.ts @@ -1,4 +1,5 @@ export const queryKey = { STORE_RANK: 'storeRank', - DESIGN_LIST:'designList' + DESIGN_LIST: 'designList', + DESIGN_DETAIL: 'designDetail', } as const; diff --git a/src/pages/designList/page/DesignListPage/DesignListPage.tsx b/src/pages/designList/page/DesignListPage/DesignListPage.tsx index 31f492db..8740ecba 100644 --- a/src/pages/designList/page/DesignListPage/DesignListPage.tsx +++ b/src/pages/designList/page/DesignListPage/DesignListPage.tsx @@ -1,10 +1,10 @@ import { useEffect, useRef, useState } from 'react'; import { useLocation } from 'react-router-dom'; -import { useFetchDesignList } from '@apis/designList/useFetchDesignList'; +import { useFetchDesignDetail } from '@apis/designList/useFetchDesignDetail'; import { CardList } from '@components'; -import { CATEGORY, END_POINT, SUB_CATEGORY } from '@constants'; +import { CATEGORY, SUB_CATEGORY } from '@constants'; import { useFilteredCardList } from '@hooks'; import CategoryBar from '@pages/designList/components/CategoryBar/CategoryBar'; import SubCategoryBar from '@pages/designList/components/SubCategoryBar/SubCategoryBar'; @@ -18,6 +18,7 @@ import { } from './DesignListPage.css'; import { CategoryType, SubCategoryType } from '@types'; +import { useFetchDesignList } from '@apis/designList/useFetchDesignList'; const DesignListPage = () => { const location = useLocation(); @@ -41,6 +42,13 @@ const DesignListPage = () => { } }, [selectedCategories.category]); + // const { data: datadata } = useFetchDesignDetail( + // 1, + // selectedCategories.category, + // selectedCategories.subCategory + // ); + // console.log(datadata); + const { data: designListData } = useFetchDesignList( selectedCategories.category, selectedCategories.subCategory diff --git a/src/pages/home/page/HomePage/HomePage.tsx b/src/pages/home/page/HomePage/HomePage.tsx index e2a1c778..83579fbf 100644 --- a/src/pages/home/page/HomePage/HomePage.tsx +++ b/src/pages/home/page/HomePage/HomePage.tsx @@ -1,5 +1,7 @@ import { useState } from 'react'; +import { useFetchStoreRank } from '@apis/home/useFetchStoreRank'; + import { DesignCard } from '@components'; import { CATEGORY, MainKeyVisual } from '@constants'; import { useEasyNavigate } from '@hooks'; @@ -96,6 +98,9 @@ const HomePage = () => { const [isLogin] = useState(true); const { goViewPage } = useEasyNavigate(); + const { data: storeRankData } = useFetchStoreRank(); + console.log(storeRankData); + return (
Date: Tue, 21 Jan 2025 22:06:37 +0900 Subject: [PATCH 3/7] =?UTF-8?q?feat:=20DesignListPage=EC=97=90=EC=84=9C=20?= =?UTF-8?q?=EC=93=B0=EC=9D=B4=EB=8A=94=20CardList=20api=20=EC=97=B0?= =?UTF-8?q?=EA=B2=B0=ED=95=98=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/designList/useFetchDesignDetail.ts | 10 +- src/apis/designList/useFetchDesignList.ts | 19 +- src/apis/instance.ts | 2 +- src/components/common/CardList/CardList.tsx | 4 +- src/constants/apis/api.ts | 11 +- src/hooks/useFilteredCardList.ts | 167 +++--------------- .../page/DesignListPage/DesignListPage.tsx | 63 ++++--- src/pages/home/page/HomePage/HomePage.tsx | 38 +--- src/types/apis/designList/index.ts | 12 +- src/types/apis/home/index.ts | 2 +- src/types/apis/store/index.ts | 9 + src/types/types.ts | 10 ++ 12 files changed, 117 insertions(+), 230 deletions(-) diff --git a/src/apis/designList/useFetchDesignDetail.ts b/src/apis/designList/useFetchDesignDetail.ts index ba908f96..011198bb 100644 --- a/src/apis/designList/useFetchDesignDetail.ts +++ b/src/apis/designList/useFetchDesignDetail.ts @@ -2,7 +2,7 @@ import { useSuspenseQuery } from '@tanstack/react-query'; import { instance } from '@apis/instance'; -import { queryKey } from '@constants'; +import { END_POINT, queryKey } from '@constants'; import { ApiResponseType } from '@types'; @@ -21,12 +21,12 @@ interface DesignDetailResponse { const fetchDesignDetail = async ( cakeId: number, - daycategory: string, + dayCategory: string, themeName: string ): Promise => { try { const response = await instance.get>( - `/api/v1/cake/${cakeId}/select?dayCategory=${daycategory}&theme=ALL` + END_POINT.FETCH_DESIGN_DETAIL(cakeId, dayCategory, themeName) ); return response.data.data; } catch (error) { @@ -37,11 +37,11 @@ const fetchDesignDetail = async ( export const useFetchDesignDetail = ( cakeId: number, - daycategory: string, + dayCategory: string, themeName: string ) => { return useSuspenseQuery({ queryKey: [queryKey.DESIGN_DETAIL], - queryFn: () => fetchDesignDetail(cakeId, daycategory, themeName), + queryFn: () => fetchDesignDetail(cakeId, dayCategory, themeName), }); }; diff --git a/src/apis/designList/useFetchDesignList.ts b/src/apis/designList/useFetchDesignList.ts index 9080f362..df2de997 100644 --- a/src/apis/designList/useFetchDesignList.ts +++ b/src/apis/designList/useFetchDesignList.ts @@ -7,12 +7,13 @@ import { END_POINT, queryKey } from '@constants'; import { ApiResponseType, DesignListResponse } from '@types'; const fetchDesignList = async ( - daycategory: string, - theme: string + option: string, + dayCategory: string, + themeName: string ): Promise => { try { const response = await instance.get>( - END_POINT.FETCH_DESIGN_LIST(daycategory, theme) + END_POINT.FETCH_DESIGN_LIST(option, dayCategory, themeName) ); return response.data.data; } catch (error) { @@ -21,9 +22,15 @@ const fetchDesignList = async ( } }; -export const useFetchDesignList = (daycategory: string, theme: string) => { +export const useFetchDesignList = ( + option: string, + dayCategory: string, + themeName: string, + options?: { enabled?: boolean } +) => { return useSuspenseQuery({ - queryKey: [queryKey.DESIGN_LIST], - queryFn: () => fetchDesignList(daycategory, theme), + queryKey: [queryKey.DESIGN_LIST, option, dayCategory, themeName], + queryFn: () => fetchDesignList(option, dayCategory, themeName), + ...options, }); }; diff --git a/src/apis/instance.ts b/src/apis/instance.ts index f8e159bd..e2bc9962 100644 --- a/src/apis/instance.ts +++ b/src/apis/instance.ts @@ -5,7 +5,7 @@ import { BASE_URL } from '@constants'; export const instance = axios.create({ baseURL: BASE_URL, - withCredentials: false, + withCredentials: true, }); diff --git a/src/components/common/CardList/CardList.tsx b/src/components/common/CardList/CardList.tsx index 602ef73a..4a00b6fb 100644 --- a/src/components/common/CardList/CardList.tsx +++ b/src/components/common/CardList/CardList.tsx @@ -20,6 +20,8 @@ import { StoreType, } from '@types'; + + interface CardListProps { item: ItemType; itemData: StoreCardListType | DesignCardListType; @@ -69,7 +71,7 @@ const CardList = ({ return (
- {cardListData.length > 0 ? ( + {cardListData?.length > 0 ? ( <>
diff --git a/src/constants/apis/api.ts b/src/constants/apis/api.ts index f15ab514..597061c7 100644 --- a/src/constants/apis/api.ts +++ b/src/constants/apis/api.ts @@ -2,8 +2,13 @@ export const BASE_URL = import.meta.env.VITE_APP_BASE_URL; export const END_POINT = { FETCH_STORE_RANK: '/api/v1/store/rank', - FETCH_DESIGN_LIST: (daycategory: string, theme: string) => - `/api/v1/cake/latest?dayCategory=${daycategory}&themeName=ALL`, - FETCH_DESIGN_DETAIL: (cakeId: number) => `/api/v1/cake/${cakeId}/select`, + FETCH_DESIGN_LIST: (option: string, dayCategory: string, themeName: string) => + `/api/v1/cake/${option}?dayCategory=${dayCategory}&themeName=${themeName}`, + FETCH_DESIGN_DETAIL: ( + cakeId: number, + dayCategory: string, + themeName: string + ) => + `/api/v1/cake/${cakeId}/select?dayCategory=${dayCategory}&themeName=${themeName}`, KAKAO_LOGIN: '/api/v1/user/login', } as const; diff --git a/src/hooks/useFilteredCardList.ts b/src/hooks/useFilteredCardList.ts index 5d3b1605..008d8f50 100644 --- a/src/hooks/useFilteredCardList.ts +++ b/src/hooks/useFilteredCardList.ts @@ -1,13 +1,8 @@ -import { useEffect, useState } from 'react'; +import { startTransition, useState } from 'react'; -import { - CategoryType, - DesignCardListType, - ItemType, - OptionType, - StoreCardListType, - SubCategoryType, -} from '@types'; +import { useFetchDesignList } from '@apis/designList/useFetchDesignList'; + +import { CategoryType, ItemType, OptionType, SubCategoryType } from '@types'; interface CategoriesType { category: CategoryType; @@ -16,151 +11,39 @@ interface CategoriesType { interface useFilteredCardListProps { item: ItemType; - parameterType?: string | CategoriesType; + categories?: CategoriesType; + station?: string; } const useFilteredCardList = ({ item, - parameterType, + categories, + station, }: useFilteredCardListProps) => { const [option, setOption] = useState('latest'); - const [data, setData] = useState({ - cakeCount: 0, - cakes: [], - }); const handleOptionSelect = (newOption: OptionType) => { - setOption(newOption); + startTransition(() => { + setOption(newOption); + }); }; - // api 호출할 땐, item, option, parameterType을 이용 - console.log(option); - console.log(parameterType); + // api 호출할 땐, item, option, categories, station 이용 + + // 지하철역 가지고 api 부를 때 사용 + console.log(station); - // api 데이터 불러오는 코드가 들어와야 함 - // 지금은 일단 mockData로 대체 - useEffect(() => { - if (item === 'store' || item === 'likedStore') { - const storeCardListData = { - storeCount: 122, - stores: [ - { - storeId: 1, - storeName: '버터뭉1', - station: '종로5가역', - address: '서울 중구 동호로 385-2', - storeLikesCount: 30, - isLiked: false, - images: [ - { - imageId: 1, - imageUrl: '../public/example-img.png', - }, - { - imageId: 2, - imageUrl: '../public/example-img.png', - }, - { - imageId: 3, - imageUrl: '../public/example-img.png', - }, - { - imageId: 4, - imageUrl: '../public/example-img.png', - }, - ], - }, - { - storeId: 2, - storeName: '버터뭉2', - station: '홍대입구역', - address: '서울 마포구 동호로 385-2', - storeLikesCount: 28, - isLiked: true, - images: [ - { - imageId: 5, - imageUrl: '../public/example-img.png', - }, - { - imageId: 6, - imageUrl: '../public/example-img.png', - }, - { - imageId: 7, - imageUrl: '../public/example-img.png', - }, - { - imageId: 8, - imageUrl: '../public/example-img.png', - }, - ], - }, - { - storeId: 3, - storeName: '버터뭉3', - station: '홍대입구역', - address: '서울 마포구 구호로 385-2', - storeLikesCount: 26, - isLiked: false, - images: [ - { - imageId: 9, - imageUrl: '../public/example-img.png', - }, - { - imageId: 10, - imageUrl: '../public/example-img.png', - }, - { - imageId: 11, - imageUrl: '../public/example-img.png', - }, - { - imageId: 12, - imageUrl: '../public/example-img.png', - }, - ], - }, - ], - }; - setData(storeCardListData); - } else if (item === 'design' || item === 'likedDesign') { - const designCardListData = { - cakeCount: 100, - cakes: [ - { - cakeId: 1, - storeId: 1, - storeName: '버터뭉', - station: '홍대입구역', - isLiked: false, - cakeLikesCount: 200, - imageUrl: '../public/example-img.png', - }, - { - cakeId: 2, - storeId: 2, - storeName: '버터뭉2', - station: '서강대입구역', - isLiked: true, - cakeLikesCount: 30, - imageUrl: '../public/example-img.png', - }, - { - cakeId: 3, - storeId: 1, - storeName: '버터뭉', - station: '홍대입구역', - isLiked: false, - cakeLikesCount: 200, - imageUrl: '../public/example-img.png', - }, - ], - }; - setData(designCardListData); + // 디자인 둘러보기 조회 api (둘러보기 페이지) + const { data } = useFetchDesignList( + option, + categories?.category ?? 'BIRTH', + categories?.subCategory ?? 'ALL', + { + enabled: + item === 'design' && + (!!categories?.category || !!categories?.subCategory), } - }, [item, parameterType]); + ); return { item, diff --git a/src/pages/designList/page/DesignListPage/DesignListPage.tsx b/src/pages/designList/page/DesignListPage/DesignListPage.tsx index 8740ecba..2482096b 100644 --- a/src/pages/designList/page/DesignListPage/DesignListPage.tsx +++ b/src/pages/designList/page/DesignListPage/DesignListPage.tsx @@ -1,8 +1,6 @@ -import { useEffect, useRef, useState } from 'react'; +import { startTransition, useEffect, useRef, useState } from 'react'; import { useLocation } from 'react-router-dom'; -import { useFetchDesignDetail } from '@apis/designList/useFetchDesignDetail'; - import { CardList } from '@components'; import { CATEGORY, SUB_CATEGORY } from '@constants'; import { useFilteredCardList } from '@hooks'; @@ -18,7 +16,6 @@ import { } from './DesignListPage.css'; import { CategoryType, SubCategoryType } from '@types'; -import { useFetchDesignList } from '@apis/designList/useFetchDesignList'; const DesignListPage = () => { const location = useLocation(); @@ -42,45 +39,47 @@ const DesignListPage = () => { } }, [selectedCategories.category]); - // const { data: datadata } = useFetchDesignDetail( - // 1, - // selectedCategories.category, - // selectedCategories.subCategory - // ); - // console.log(datadata); - - const { data: designListData } = useFetchDesignList( - selectedCategories.category, - selectedCategories.subCategory - ); - console.log(designListData); - console.log(selectedCategories.category, selectedCategories.subCategory); - // console.log( - // END_POINT.FETCH_DESIGN_LIST( - // selectedCategories.category, - // selectedCategories.subCategory - // ) - // ); - const handleCategoryChange = (category: CategoryType) => { - setSelectedCategories({ - category: category, - subCategory: 'ALL', + startTransition(() => { + setSelectedCategories({ + category: category, + subCategory: 'ALL', + }); }); }; const handleSubCategoryChange = (category: SubCategoryType) => { - setSelectedCategories((prevState) => ({ - ...prevState, - subCategory: category, - })); + startTransition(() => { + setSelectedCategories((prevState) => ({ + ...prevState, + subCategory: category, + })); + }); }; + // console.log(selectedCategories); + const { item, handleOptionSelect, data } = useFilteredCardList({ item: 'design', - parameterType: selectedCategories, + categories: selectedCategories, }); + // const { item, handleOptionSelect } = useFilteredCardList({ + // item: 'design', + // categories: selectedCategories, + // }); + + // const { data: designData } = useFetchDesignList( + // 'latest', + // selectedCategories.category, + // selectedCategories.subCategory, + // { + // enabled: + // item === 'design' && + // (!!selectedCategories.category || !!selectedCategories.subCategory), + // } + // ); + return (
diff --git a/src/pages/home/page/HomePage/HomePage.tsx b/src/pages/home/page/HomePage/HomePage.tsx index 83579fbf..d913a0b3 100644 --- a/src/pages/home/page/HomePage/HomePage.tsx +++ b/src/pages/home/page/HomePage/HomePage.tsx @@ -29,39 +29,6 @@ import { likedStoreWrapper, } from './HomePage.css'; -const storeRankingData = [ - { - storeId: 1, - storeName: '케이꾸야', - storeLikesCount: 130, - station: '홍대입구역', - }, - { - storeId: 2, - storeName: '서연이네 스윗 마카롱', - storeLikesCount: 12, - station: '종로3가역', - }, - { - storeId: 3, - storeName: '채연이랑 달콤달콤', - storeLikesCount: 43, - station: '동대문역사문화공원역', - }, - { - storeId: 4, - storeName: '화랑이는 감딸기', - storeLikesCount: 546, - station: '화랑대역', - }, - { - storeId: 5, - storeName: '지유네 케이크집', - storeLikesCount: 65, - station: '태릉입구역', - }, -]; - const cakeRankingData = [ { cakeId: 1, @@ -98,8 +65,7 @@ const HomePage = () => { const [isLogin] = useState(true); const { goViewPage } = useEasyNavigate(); - const { data: storeRankData } = useFetchStoreRank(); - console.log(storeRankData); + const { data } = useFetchStoreRank(); return (
@@ -140,7 +106,7 @@ const HomePage = () => {

인기 스토어

- {storeRankingData.map((store, index) => { + {data.storeList.map((store, index) => { return index < 4 ? ( ) : ( diff --git a/src/types/apis/designList/index.ts b/src/types/apis/designList/index.ts index d63928b2..c453b5ff 100644 --- a/src/types/apis/designList/index.ts +++ b/src/types/apis/designList/index.ts @@ -1,8 +1,14 @@ -import { DesignCardListType } from "src/types/types"; +import { DesignItemType } from "src/types/types"; -export interface DesignListResponse { +export interface DesignListLatestResponse { nextCakeIdCursor: number, isLastData: number, cakeCount: number, - cakes: DesignCardListType + cakes: DesignItemType[] +} + +export interface DesignListPopularityResponse { + isLastData: number, + cakeCount: number, + cakes: DesignItemType[] } \ No newline at end of file diff --git a/src/types/apis/home/index.ts b/src/types/apis/home/index.ts index cd0f6eec..c61a2109 100644 --- a/src/types/apis/home/index.ts +++ b/src/types/apis/home/index.ts @@ -1,5 +1,5 @@ export interface StoreRankResponse { - stores: Array<{ + storeList: Array<{ storeId: number; storeName: string; storeLikesCount: number; diff --git a/src/types/apis/store/index.ts b/src/types/apis/store/index.ts index e69de29b..aaea7a9c 100644 --- a/src/types/apis/store/index.ts +++ b/src/types/apis/store/index.ts @@ -0,0 +1,9 @@ +import { DesignItemType } from "src/types/types"; + +export interface DesignListResponse { + nextCakeIdCursor?: number, + nextCakeLikesCursor?: number, + isLastData: boolean, + cakeCount: number, + cakes: DesignItemType[] +} \ No newline at end of file diff --git a/src/types/types.ts b/src/types/types.ts index 671a8deb..b6f7e2ca 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -32,11 +32,21 @@ export interface DesignDetailType { export interface StoreCardListType { storeCount: number; stores: StoreType[]; + nextStoreIdCursor?: number; + isLastData?: boolean; + nextLikesCursor?: number; + lastStoreIdCursor?: number; } export interface DesignCardListType { cakeCount: number; cakes: DesignItemType[]; + cakeIdCursor?: number + cakeLikesCursor?: number; + nextCakeIdCursor?: number; + nextCakeLikesCursor?: number; + isLastData?: boolean; + nextLikeCursor?: number; } export type CategoryType = 'BIRTH' | 'CHEER' | 'ANNIV' | 'SEASON'; From 774467fa1f97f256ad307d39d8177d9350076ccd Mon Sep 17 00:00:00 2001 From: Parkchaeyeon Date: Wed, 22 Jan 2025 01:04:56 +0900 Subject: [PATCH 4/7] =?UTF-8?q?feat:=20=EC=B9=B4=EB=93=9C=EB=A6=AC?= =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=ED=83=80=EC=9E=85=20=EC=A0=95=EB=A6=AC,?= =?UTF-8?q?=20=EC=B0=9C=ED=95=9C=20=EC=8A=A4=ED=86=A0=EC=96=B4=20api=20?= =?UTF-8?q?=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/myPage/useFetchLikedStoreList.ts | 36 +++++++++++++ src/components/common/CardList/CardList.tsx | 6 ++- src/constants/apis/api.ts | 6 +++ src/constants/apis/queryKey.ts | 1 + src/hooks/useFilteredCardList.ts | 26 +++++++++- .../page/DesignListPage/DesignListPage.tsx | 18 ------- src/types/apis/home/index.ts | 14 ++--- src/types/apis/myPage/index.ts | 8 +++ src/types/apis/store/index.ts | 2 +- src/types/types.ts | 52 ++++++++++++++++++- 10 files changed, 138 insertions(+), 31 deletions(-) create mode 100644 src/apis/myPage/useFetchLikedStoreList.ts diff --git a/src/apis/myPage/useFetchLikedStoreList.ts b/src/apis/myPage/useFetchLikedStoreList.ts new file mode 100644 index 00000000..d507fd9d --- /dev/null +++ b/src/apis/myPage/useFetchLikedStoreList.ts @@ -0,0 +1,36 @@ +import { useSuspenseQuery } from '@tanstack/react-query'; + +import { instance } from '@apis/instance'; + +import { END_POINT, queryKey } from '@constants'; + +import { ApiResponseType, LikedStoreListResponse } from '@types'; + +const fetchLikedStoreList = async ( + option: string, + storeIdCursor: number = 0, + size: number = 10 +): Promise => { + try { + const response = await instance.get< + ApiResponseType + >(END_POINT.FETCH_LIKED_STORE_LIST(option, storeIdCursor, size)); + return response.data.data; + } catch (error) { + console.log(error); + throw error; + } +}; + +export const useFetchLikedStoreList = ( + option: string, + storeIdCursor: number = 0, + size: number = 10, + options?: { enabled?: boolean } +) => { + return useSuspenseQuery({ + queryKey: [queryKey.LIKED_STORE_LIST, option], + queryFn: () => fetchLikedStoreList(option, storeIdCursor, size), + ...options, + }); +}; diff --git a/src/components/common/CardList/CardList.tsx b/src/components/common/CardList/CardList.tsx index 4a00b6fb..781e62e8 100644 --- a/src/components/common/CardList/CardList.tsx +++ b/src/components/common/CardList/CardList.tsx @@ -59,7 +59,8 @@ const CardList = ({ store: ` 개의 스토어`, design: ` 개의 디자인`, likedStore: `찜한 스토어 `, - likedDesign: `찜한 스토어의 디자인 `, + likedDesign: `찜한 디자인 `, + likedStoreDesign: `찜한 스토어의 디자인` }; const cardListNullText = { @@ -67,6 +68,7 @@ const CardList = ({ design: `등록된 케이크가 아직 없어요`, likedStore: `찜한 스토어가 아직 없어요`, likedDesign: `찜한 디자인이 아직 없어요`, + likedStoreDesign: `찜한 스토어의 디자인이 아직 없어요` }; return ( @@ -81,7 +83,7 @@ const CardList = ({ {cardListCountText[item]} - {(item === 'likedStore' || item === 'likedDesign') && ( + {(item === 'likedStore' || item === 'likedDesign' || item === 'likedStoreDesign') && ( {cardListCount} )}
diff --git a/src/constants/apis/api.ts b/src/constants/apis/api.ts index 597061c7..bcf0ca92 100644 --- a/src/constants/apis/api.ts +++ b/src/constants/apis/api.ts @@ -11,4 +11,10 @@ export const END_POINT = { ) => `/api/v1/cake/${cakeId}/select?dayCategory=${dayCategory}&themeName=${themeName}`, KAKAO_LOGIN: '/api/v1/user/login', + FETCH_LIKED_STORE_LIST: ( + option: string, + storeIdCursor: number, + size: number + ) => + `/api/v1/store/likes/${option}?storeIdCursor=${storeIdCursor}&size=${size}`, } as const; diff --git a/src/constants/apis/queryKey.ts b/src/constants/apis/queryKey.ts index f966d765..b6a1d28c 100644 --- a/src/constants/apis/queryKey.ts +++ b/src/constants/apis/queryKey.ts @@ -3,4 +3,5 @@ export const queryKey = { DESIGN_LIST: 'designList', DESIGN_DETAIL: 'designDetail', KAKAO_LOGIN: 'kakaoLogin', + LIKED_STORE_LIST: 'likedStoreList' } as const; diff --git a/src/hooks/useFilteredCardList.ts b/src/hooks/useFilteredCardList.ts index 008d8f50..a2f3f3e1 100644 --- a/src/hooks/useFilteredCardList.ts +++ b/src/hooks/useFilteredCardList.ts @@ -1,8 +1,16 @@ import { startTransition, useState } from 'react'; import { useFetchDesignList } from '@apis/designList/useFetchDesignList'; +import { useFetchLikedStoreList } from '@apis/myPage/useFetchLikedStoreList'; -import { CategoryType, ItemType, OptionType, SubCategoryType } from '@types'; +import { + CategoryType, + DesignCardListType, + ItemType, + OptionType, + StoreCardListType, + SubCategoryType, +} from '@types'; interface CategoriesType { category: CategoryType; @@ -21,6 +29,7 @@ const useFilteredCardList = ({ station, }: useFilteredCardListProps) => { const [option, setOption] = useState('latest'); + const [data, setData] = useState(); const handleOptionSelect = (newOption: OptionType) => { startTransition(() => { @@ -34,7 +43,7 @@ const useFilteredCardList = ({ console.log(station); // 디자인 둘러보기 조회 api (둘러보기 페이지) - const { data } = useFetchDesignList( + const { data: DesignListData } = useFetchDesignList( option, categories?.category ?? 'BIRTH', categories?.subCategory ?? 'ALL', @@ -45,6 +54,19 @@ const useFilteredCardList = ({ } ); + // 찜한 스토어 조회 api (마이리스트 페이지, 지도 페이지) + const { data: LikedStoreListData } = useFetchLikedStoreList(option, 0, 10, { + enabled: item === 'likedStore', + }); + + if (item === 'design') { + setData(DesignListData); + } + + if (item === 'likedStore') { + setData(LikedStoreListData); + } + return { item, option, diff --git a/src/pages/designList/page/DesignListPage/DesignListPage.tsx b/src/pages/designList/page/DesignListPage/DesignListPage.tsx index 2482096b..b1bc9e38 100644 --- a/src/pages/designList/page/DesignListPage/DesignListPage.tsx +++ b/src/pages/designList/page/DesignListPage/DesignListPage.tsx @@ -57,29 +57,11 @@ const DesignListPage = () => { }); }; - // console.log(selectedCategories); - const { item, handleOptionSelect, data } = useFilteredCardList({ item: 'design', categories: selectedCategories, }); - // const { item, handleOptionSelect } = useFilteredCardList({ - // item: 'design', - // categories: selectedCategories, - // }); - - // const { data: designData } = useFetchDesignList( - // 'latest', - // selectedCategories.category, - // selectedCategories.subCategory, - // { - // enabled: - // item === 'design' && - // (!!selectedCategories.category || !!selectedCategories.subCategory), - // } - // ); - return (
diff --git a/src/types/apis/home/index.ts b/src/types/apis/home/index.ts index c61a2109..6d19bf37 100644 --- a/src/types/apis/home/index.ts +++ b/src/types/apis/home/index.ts @@ -1,8 +1,10 @@ +interface StoreRankType { + storeId: number; + storeName: string; + storeLikesCount: number; + station: string; +} + export interface StoreRankResponse { - storeList: Array<{ - storeId: number; - storeName: string; - storeLikesCount: number; - station: string; - }>; + storeList: StoreRankType[]; } diff --git a/src/types/apis/myPage/index.ts b/src/types/apis/myPage/index.ts index e69de29b..a85ca5c4 100644 --- a/src/types/apis/myPage/index.ts +++ b/src/types/apis/myPage/index.ts @@ -0,0 +1,8 @@ +import { StoreType } from "src/types/types"; + +export interface LikedStoreListResponse { + nextStoreIdCursor: number, + nextLikesCursor?: number, + storeCount: number, + stores: StoreType[], +} \ No newline at end of file diff --git a/src/types/apis/store/index.ts b/src/types/apis/store/index.ts index aaea7a9c..a32efe1c 100644 --- a/src/types/apis/store/index.ts +++ b/src/types/apis/store/index.ts @@ -1,7 +1,7 @@ import { DesignItemType } from "src/types/types"; export interface DesignListResponse { - nextCakeIdCursor?: number, + nextCakeIdCursor: number, nextCakeLikesCursor?: number, isLastData: boolean, cakeCount: number, diff --git a/src/types/types.ts b/src/types/types.ts index b6f7e2ca..4d102a66 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -29,6 +29,49 @@ export interface DesignDetailType { isLiked: boolean; } +// 타입 뭉치지말고 나눠서 쓰되, 겹치는거 상속받아서 처리하기 + +// storeCardList 기본 type +export interface StoreCardListType { + storeCount: number; + stores: StoreType[]; +} + +// designCardList 기본 Type +export interface DesignCardListType { + cakeCount: number; + cakes: DesignItemType[]; +} + +// 스토어 정보 리스트 (최신순) +interface StoreInfoatestType extends StoreCardListType { + nextStoreIdCursor: number; + isLastData: boolean; +} +// 스토어 정보 리스트 (인기순) +interface StoreInfoPopularityType extends StoreCardListType { + nextLikesCursor: number; + lastStoreIdCursor: number; +} +// 해당 역 디자인 조회 (최신순) +interface StationDesignLatestType extends DesignCardListType { + cakeIdCursor: number; +} +// 해당 역 디자인 조회 (인기순) +interface StationDesignPopularity extends DesignCardListType { + cakeLikesCursor: number; + cakeIdCursor: number; +} +// 찜한 스토어 조회 (최신순) +interface LikedStoreInfo +// 찜한 스토어 조회 (인기순) +// 찜한 스토어의 디자인 조회 (최신순) +// 찜한 스토어 디자인 조회 (인기순) +// 디자인 둘러보기 조회 (최신순) +// 디자인 둘러보기 조회 (인기순) +// 찜한 디자인 조회 (최신순) +// 찜한 디자인 조회 (인기순) + export interface StoreCardListType { storeCount: number; stores: StoreType[]; @@ -41,7 +84,7 @@ export interface StoreCardListType { export interface DesignCardListType { cakeCount: number; cakes: DesignItemType[]; - cakeIdCursor?: number + cakeIdCursor?: number; cakeLikesCursor?: number; nextCakeIdCursor?: number; nextCakeLikesCursor?: number; @@ -61,7 +104,12 @@ export type SubCategoryType = | 'FANTASY' | 'ELSE'; -export type ItemType = 'store' | 'design' | 'likedStore' | 'likedDesign'; +export type ItemType = + | 'store' + | 'design' + | 'likedStore' + | 'likedDesign' + | 'likedStoreDesign'; export type OptionType = 'latest' | 'popularity'; export interface StationType { From a0f8236461a0cfbd52faa73e364571a2c2cb8f3f Mon Sep 17 00:00:00 2001 From: Parkchaeyeon Date: Wed, 22 Jan 2025 07:31:55 +0900 Subject: [PATCH 5/7] =?UTF-8?q?feat:=20likedStore=20api=20=EC=97=B0?= =?UTF-8?q?=EA=B2=B0,=20detail=20api=20=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/designList/useFetchDesignDetail.ts | 12 +-- src/apis/designList/useFetchDesignList.ts | 4 +- src/apis/home/useFetchStoreRank.ts | 6 +- src/apis/myPage/useFetchLikedStoreList.ts | 39 ++++++---- src/components/common/CardList/CardList.tsx | 45 +++++++---- .../common/DesignCard/DesignCard.tsx | 47 ++++++++++-- src/constants/apis/api.ts | 12 ++- src/hooks/useFilteredCardList.ts | 62 +--------------- .../components/Carousel/Carousel.tsx | 5 +- .../DesignSearchModal/DesignSearchModal.tsx | 74 +++++++++++-------- .../page/DesignListPage/DesignListPage.tsx | 65 +++++++++------- src/pages/home/page/HomePage/HomePage.tsx | 6 +- .../myPage/page/MyList/LikeListPage.css.ts | 2 +- src/pages/myPage/page/MyList/LikeListPage.tsx | 33 +++------ src/types/apis/commonType.ts | 9 +++ src/types/apis/home/index.ts | 4 +- src/types/types.ts | 43 ----------- 17 files changed, 227 insertions(+), 241 deletions(-) diff --git a/src/apis/designList/useFetchDesignDetail.ts b/src/apis/designList/useFetchDesignDetail.ts index 011198bb..aea06041 100644 --- a/src/apis/designList/useFetchDesignDetail.ts +++ b/src/apis/designList/useFetchDesignDetail.ts @@ -1,4 +1,4 @@ -import { useSuspenseQuery } from '@tanstack/react-query'; +import { useQuery } from '@tanstack/react-query'; import { instance } from '@apis/instance'; @@ -7,7 +7,7 @@ import { END_POINT, queryKey } from '@constants'; import { ApiResponseType } from '@types'; interface cakeType { - cakeId: string; + cakeId: number; isLiked: boolean; imageUrl: string; } @@ -16,7 +16,7 @@ interface DesignDetailResponse { storeId: number; storeName: string; station: string; - cakes: cakeType[]; + cake: cakeType[]; } const fetchDesignDetail = async ( @@ -38,10 +38,12 @@ const fetchDesignDetail = async ( export const useFetchDesignDetail = ( cakeId: number, dayCategory: string, - themeName: string + themeName: string, + options: { enabled: boolean } ) => { - return useSuspenseQuery({ + return useQuery({ queryKey: [queryKey.DESIGN_DETAIL], queryFn: () => fetchDesignDetail(cakeId, dayCategory, themeName), + ...options, }); }; diff --git a/src/apis/designList/useFetchDesignList.ts b/src/apis/designList/useFetchDesignList.ts index df2de997..2599a2a0 100644 --- a/src/apis/designList/useFetchDesignList.ts +++ b/src/apis/designList/useFetchDesignList.ts @@ -1,4 +1,4 @@ -import { useSuspenseQuery } from '@tanstack/react-query'; +import { useQuery } from '@tanstack/react-query'; import { instance } from '@apis/instance'; @@ -28,7 +28,7 @@ export const useFetchDesignList = ( themeName: string, options?: { enabled?: boolean } ) => { - return useSuspenseQuery({ + return useQuery({ queryKey: [queryKey.DESIGN_LIST, option, dayCategory, themeName], queryFn: () => fetchDesignList(option, dayCategory, themeName), ...options, diff --git a/src/apis/home/useFetchStoreRank.ts b/src/apis/home/useFetchStoreRank.ts index 83721e74..c8af5384 100644 --- a/src/apis/home/useFetchStoreRank.ts +++ b/src/apis/home/useFetchStoreRank.ts @@ -4,14 +4,14 @@ import { instance } from '@apis/instance'; import { END_POINT, queryKey } from '@constants'; -import { ApiResponseType, StoreRankResponse } from '@types'; +import { ApiResponseType, StoreRank, StoreRankResponse } from '@types'; -const fetchStoreRank = async (): Promise => { +const fetchStoreRank = async (): Promise => { try { const response = await instance.get>( END_POINT.FETCH_STORE_RANK ); - return response.data.data; + return response.data.data.storeList; } catch (error) { console.log(error); throw error; diff --git a/src/apis/myPage/useFetchLikedStoreList.ts b/src/apis/myPage/useFetchLikedStoreList.ts index d507fd9d..38cec026 100644 --- a/src/apis/myPage/useFetchLikedStoreList.ts +++ b/src/apis/myPage/useFetchLikedStoreList.ts @@ -1,36 +1,45 @@ -import { useSuspenseQuery } from '@tanstack/react-query'; +import { useQuery } from '@tanstack/react-query'; import { instance } from '@apis/instance'; import { END_POINT, queryKey } from '@constants'; -import { ApiResponseType, LikedStoreListResponse } from '@types'; +import { ApiResponseType, ErrorResponse, LikedStoreListResponse } from '@types'; const fetchLikedStoreList = async ( option: string, - storeIdCursor: number = 0, - size: number = 10 + pageParam?: string ): Promise => { try { - const response = await instance.get< - ApiResponseType - >(END_POINT.FETCH_LIKED_STORE_LIST(option, storeIdCursor, size)); + const endpoint = pageParam + ? END_POINT.FETCH_LIKED_STORE_LIST(option, pageParam) + : END_POINT.FETCH_LIKED_STORE_LIST(option); + + const response = + await instance.get>(endpoint); return response.data.data; } catch (error) { - console.log(error); + const errorResponse = error as ErrorResponse; + console.log(errorResponse.response.data.code); + if (errorResponse.response.data.code === 40420) { + return { + nextStoreIdCursor: -1, + nextLikesCursor: undefined, + storeCount: 0, + stores: [], // 빈 배열 반환 + }; + } throw error; } }; export const useFetchLikedStoreList = ( option: string, - storeIdCursor: number = 0, - size: number = 10, - options?: { enabled?: boolean } + + pageParam?: string ) => { - return useSuspenseQuery({ - queryKey: [queryKey.LIKED_STORE_LIST, option], - queryFn: () => fetchLikedStoreList(option, storeIdCursor, size), - ...options, + return useQuery({ + queryKey: [queryKey.LIKED_STORE_LIST, option, pageParam], + queryFn: () => fetchLikedStoreList(option, pageParam || ''), }); }; diff --git a/src/components/common/CardList/CardList.tsx b/src/components/common/CardList/CardList.tsx index 781e62e8..277c6a6b 100644 --- a/src/components/common/CardList/CardList.tsx +++ b/src/components/common/CardList/CardList.tsx @@ -12,46 +12,62 @@ import FilteringButton from '../FilteringButton/FilteringButton'; import StoreCard from '../StoreCard/StoreCard'; import { + CategoryType, DesignCardListType, DesignItemType, ItemType, OptionType, StoreCardListType, StoreType, + SubCategoryType, } from '@types'; - - interface CardListProps { item: ItemType; - itemData: StoreCardListType | DesignCardListType; - hasModal?: boolean; + itemData?: StoreCardListType | DesignCardListType; handleOptionSelect: (option: OptionType) => void; + hasModal?: boolean; + selectedCategories?: { + category: CategoryType; + subCategory: SubCategoryType; + }; } const CardList = ({ item, itemData, - hasModal = false, handleOptionSelect, + hasModal, + selectedCategories, }: CardListProps) => { - // 데이터를 조건에 따라 바로 분기 처리 const isStoreCardListType = ( data: DesignCardListType | StoreCardListType ): data is StoreCardListType => { - return data !== null && 'stores' in data; + return 'stores' in data && 'storeCount' in data; + }; + + const isDesignCardListType = ( + data: DesignCardListType | StoreCardListType + ): data is DesignCardListType => { + return 'cakes' in data && 'cakeCount' in data; }; + // itemData가 StoreCardListType인 경우 stores에 접근 가능 const cardListData = itemData ? isStoreCardListType(itemData) ? itemData.stores // Store 데이터 - : itemData.cakes // Design 데이터 + : isDesignCardListType(itemData) + ? itemData.cakes // Design 데이터 + : [] : []; // itemData가 null일 경우 빈 배열 + // itemData가 StoreCardListType인 경우 storeCount에 접근 가능 const cardListCount = itemData ? isStoreCardListType(itemData) ? itemData.storeCount // Store 데이터 개수 - : itemData.cakeCount // Design 데이터 개수 + : isDesignCardListType(itemData) + ? itemData.cakeCount // Design 데이터 개수 + : 0 : 0; // 카드리스트 텍스트 상황에 따라 다르게 @@ -60,7 +76,7 @@ const CardList = ({ design: ` 개의 디자인`, likedStore: `찜한 스토어 `, likedDesign: `찜한 디자인 `, - likedStoreDesign: `찜한 스토어의 디자인` + likedStoreDesign: `찜한 스토어의 디자인`, }; const cardListNullText = { @@ -68,12 +84,12 @@ const CardList = ({ design: `등록된 케이크가 아직 없어요`, likedStore: `찜한 스토어가 아직 없어요`, likedDesign: `찜한 디자인이 아직 없어요`, - likedStoreDesign: `찜한 스토어의 디자인이 아직 없어요` + likedStoreDesign: `찜한 스토어의 디자인이 아직 없어요`, }; return (
- {cardListData?.length > 0 ? ( + {cardListData.length > 0 ? ( <>
@@ -83,7 +99,9 @@ const CardList = ({ {cardListCountText[item]} - {(item === 'likedStore' || item === 'likedDesign' || item === 'likedStoreDesign') && ( + {(item === 'likedStore' || + item === 'likedDesign' || + item === 'likedStoreDesign') && ( {cardListCount} )}
@@ -104,6 +122,7 @@ const CardList = ({ designItem={cake} designId={cake.cakeId} hasModal={hasModal} + selectedCategories={selectedCategories} /> ))}
diff --git a/src/components/common/DesignCard/DesignCard.tsx b/src/components/common/DesignCard/DesignCard.tsx index 5ff678b4..da09148f 100644 --- a/src/components/common/DesignCard/DesignCard.tsx +++ b/src/components/common/DesignCard/DesignCard.tsx @@ -1,5 +1,7 @@ import { HTMLAttributes } from 'react'; +import { useFetchDesignDetail } from '@apis/designList/useFetchDesignDetail'; + import { IconButton, Image, Label, Modal } from '@components'; import { useEasyNavigate, useModal } from '@hooks'; import DesignSearchModal from '@pages/designList/components/DesignSearchModal/DesignSearchModal'; @@ -11,12 +13,17 @@ import { infoTitleStyle, } from './DesignCard.css'; -import { DesignItemType } from '@types'; +import { CategoryType, DesignItemType, SubCategoryType } from '@types'; interface DesignCardProps extends HTMLAttributes { designItem: DesignItemType; designId: number; numberLabel?: string; hasModal?: boolean; + handleCardClick?: () => void; + selectedCategories?: { + category: CategoryType; + subCategory: SubCategoryType; + }; } const DesignCard = ({ @@ -24,13 +31,22 @@ const DesignCard = ({ designId, numberLabel, hasModal = false, + selectedCategories, }: DesignCardProps) => { - const { storeId, imageUrl, storeName, station, cakeLikesCount, isLiked } = - designItem; + const { + cakeId, + storeId, + imageUrl, + storeName, + station, + cakeLikesCount, + isLiked, + } = designItem; - const { isModalOpen, openModal, closeModal } = useModal(); const { goStorePage } = useEasyNavigate(); + const { openModal, isModalOpen, closeModal } = useModal(); + const handleCardClick = () => { if (hasModal) { openModal(); // 둘러보기 페이지에서는 모달 띄우기 @@ -39,6 +55,25 @@ const DesignCard = ({ } }; + const { data, isLoading } = useFetchDesignDetail( + cakeId, + selectedCategories?.category ?? 'BIRTH', + selectedCategories?.subCategory ?? 'ALL', + { + enabled: !!hasModal, + } + ); + + if (isLoading) { +
로딩중...
; + } + + if (!data) { +
데이터 없음...
; + } + + console.log(data); + return ( <>
@@ -57,9 +92,9 @@ const DesignCard = ({
- {isModalOpen && ( + {isModalOpen && data && ( - + )} diff --git a/src/constants/apis/api.ts b/src/constants/apis/api.ts index 8fa13ddc..86ea756a 100644 --- a/src/constants/apis/api.ts +++ b/src/constants/apis/api.ts @@ -9,14 +9,12 @@ export const END_POINT = { dayCategory: string, themeName: string ) => - `/api/v1/cake/${cakeId}/select?dayCategory=${dayCategory}&themeName=${themeName}`, + `/api/v1/cake/select/${cakeId}?dayCategory=${dayCategory}&themeName=${themeName}`, KAKAO_LOGIN: '/api/v1/user/login', - FETCH_LIKED_STORE_LIST: ( - option: string, - storeIdCursor: number, - size: number - ) => - `/api/v1/store/likes/${option}?storeIdCursor=${storeIdCursor}&size=${size}`, + FETCH_LIKED_STORE_LIST: (option: string, pageParam?: string) => + pageParam + ? `/api/v1/store/likes/${option}?storeIdCursor=${pageParam}` + : `/api/v1/store/likes/${option}`, FETCH_STORE_COORDINATE_LIST: (station: string) => `/api/v1/store/coordinate-list?station=${station}`, FETCH_STORE_STATIONS: '/api/v1/store/station', diff --git a/src/hooks/useFilteredCardList.ts b/src/hooks/useFilteredCardList.ts index a2f3f3e1..11fcfd0c 100644 --- a/src/hooks/useFilteredCardList.ts +++ b/src/hooks/useFilteredCardList.ts @@ -1,35 +1,9 @@ import { startTransition, useState } from 'react'; -import { useFetchDesignList } from '@apis/designList/useFetchDesignList'; -import { useFetchLikedStoreList } from '@apis/myPage/useFetchLikedStoreList'; +import { OptionType } from '@types'; -import { - CategoryType, - DesignCardListType, - ItemType, - OptionType, - StoreCardListType, - SubCategoryType, -} from '@types'; - -interface CategoriesType { - category: CategoryType; - subCategory: SubCategoryType; -} - -interface useFilteredCardListProps { - item: ItemType; - categories?: CategoriesType; - station?: string; -} - -const useFilteredCardList = ({ - item, - categories, - station, -}: useFilteredCardListProps) => { +const useFilteredCardList = () => { const [option, setOption] = useState('latest'); - const [data, setData] = useState(); const handleOptionSelect = (newOption: OptionType) => { startTransition(() => { @@ -37,41 +11,9 @@ const useFilteredCardList = ({ }); }; - // api 호출할 땐, item, option, categories, station 이용 - - // 지하철역 가지고 api 부를 때 사용 - console.log(station); - - // 디자인 둘러보기 조회 api (둘러보기 페이지) - const { data: DesignListData } = useFetchDesignList( - option, - categories?.category ?? 'BIRTH', - categories?.subCategory ?? 'ALL', - { - enabled: - item === 'design' && - (!!categories?.category || !!categories?.subCategory), - } - ); - - // 찜한 스토어 조회 api (마이리스트 페이지, 지도 페이지) - const { data: LikedStoreListData } = useFetchLikedStoreList(option, 0, 10, { - enabled: item === 'likedStore', - }); - - if (item === 'design') { - setData(DesignListData); - } - - if (item === 'likedStore') { - setData(LikedStoreListData); - } - return { - item, option, handleOptionSelect, - data, }; }; diff --git a/src/pages/designList/components/Carousel/Carousel.tsx b/src/pages/designList/components/Carousel/Carousel.tsx index 499fa83e..5b6fd528 100644 --- a/src/pages/designList/components/Carousel/Carousel.tsx +++ b/src/pages/designList/components/Carousel/Carousel.tsx @@ -1,4 +1,5 @@ import { Image } from '@components'; +import { useEasyNavigate } from '@hooks'; import { IcCircleArrowRight42 } from '@svgs'; @@ -17,8 +18,10 @@ interface CarouselProps { } const Carousel = ({ designs, storeId }: CarouselProps) => { + const { goStorePage } = useEasyNavigate(); + const handleButtonClick = () => { - console.log(storeId); + goStorePage(storeId); }; return ( diff --git a/src/pages/designList/components/DesignSearchModal/DesignSearchModal.tsx b/src/pages/designList/components/DesignSearchModal/DesignSearchModal.tsx index 5eba563e..27024e11 100644 --- a/src/pages/designList/components/DesignSearchModal/DesignSearchModal.tsx +++ b/src/pages/designList/components/DesignSearchModal/DesignSearchModal.tsx @@ -11,47 +11,61 @@ import { } from './DesignSearchModal.css'; import Carousel from '../Carousel/Carousel'; +interface DesignSearchModalCakesType { + cakeId: number; + isLiked: boolean; + imageUrl: string; +} + +interface DesignSearchModalType { + storeId: number; + storeName: string; + station: string; + cake: DesignSearchModalCakesType[]; +} + interface DesignSearchModalProps { storeId: number; + data: DesignSearchModalType; } -const designDetailItem = { - storeId: 1, - storeName: '케이크케이크케이크케이크', - station: '종로5가역', - cakes: [ - { - cakeId: 1, - isLiked: true, - imageUrl: '../public/example-img.png', - }, - { - cakeId: 5, - isLiked: false, - imageUrl: '../public/example-img.png', - }, - { - cakeId: 3, - isLiked: true, - imageUrl: '../public/example-img.png', - }, - { - cakeId: 2, - isLiked: true, - imageUrl: '../public/example-img.png', - }, - ], -}; +// const designDetailItem = { +// storeId: 1, +// storeName: '케이크케이크케이크케이크', +// station: '종로5가역', +// cakes: [ +// { +// cakeId: 1, +// isLiked: true, +// imageUrl: '../public/example-img.png', +// }, +// { +// cakeId: 5, +// isLiked: false, +// imageUrl: '../public/example-img.png', +// }, +// { +// cakeId: 3, +// isLiked: true, +// imageUrl: '../public/example-img.png', +// }, +// { +// cakeId: 2, +// isLiked: true, +// imageUrl: '../public/example-img.png', +// }, +// ], +// }; -const DesignSearchModal = ({ storeId }: DesignSearchModalProps) => { - const { storeName, station, cakes } = designDetailItem; // 추후 서버에서 받아올 데이터 +const DesignSearchModal = ({ storeId, data }: DesignSearchModalProps) => { + const { storeName, station, cake } = data; // 추후 서버에서 받아올 데이터 const { goStorePage } = useEasyNavigate(); return (
- +
diff --git a/src/pages/designList/page/DesignListPage/DesignListPage.tsx b/src/pages/designList/page/DesignListPage/DesignListPage.tsx index b1bc9e38..60cb2b7a 100644 --- a/src/pages/designList/page/DesignListPage/DesignListPage.tsx +++ b/src/pages/designList/page/DesignListPage/DesignListPage.tsx @@ -1,6 +1,8 @@ import { startTransition, useEffect, useRef, useState } from 'react'; import { useLocation } from 'react-router-dom'; +import { useFetchDesignList } from '@apis/designList/useFetchDesignList'; + import { CardList } from '@components'; import { CATEGORY, SUB_CATEGORY } from '@constants'; import { useFilteredCardList } from '@hooks'; @@ -57,40 +59,47 @@ const DesignListPage = () => { }); }; - const { item, handleOptionSelect, data } = useFilteredCardList({ - item: 'design', - categories: selectedCategories, - }); + const { option, handleOptionSelect } = useFilteredCardList(); + + // 디자인 둘러보기 조회 api + const { data: DesignListData } = useFetchDesignList( + option, + selectedCategories.category ?? 'BIRTH', + selectedCategories.subCategory ?? 'ALL' + ); return ( -
-
-
- + <> +
+
+
+ +
+
+ +
-
- +
- -
- -
-
+ ); }; diff --git a/src/pages/home/page/HomePage/HomePage.tsx b/src/pages/home/page/HomePage/HomePage.tsx index 89d7ac1f..7b8da7d8 100644 --- a/src/pages/home/page/HomePage/HomePage.tsx +++ b/src/pages/home/page/HomePage/HomePage.tsx @@ -32,14 +32,12 @@ import { const HomePage = () => { const isLogin = isLoggedIn(); const { goViewPage } = useEasyNavigate(); - // const { data: storeRankData } = useFetchStoreRank(); + const { data: storeRankData } = useFetchStoreRank(); const { data: cakeRankData } = useFetchCakeRank(); const user = isLogin ? JSON.parse(localStorage.getItem('user') || '{}') : null; - const { data } = useFetchStoreRank(); - return (
{

인기 스토어

- {data.storeList.map((store, index) => { + {storeRankData.map((store, index) => { return index < 4 ? ( ) : ( diff --git a/src/pages/myPage/page/MyList/LikeListPage.css.ts b/src/pages/myPage/page/MyList/LikeListPage.css.ts index 8950866d..63ac64eb 100644 --- a/src/pages/myPage/page/MyList/LikeListPage.css.ts +++ b/src/pages/myPage/page/MyList/LikeListPage.css.ts @@ -17,7 +17,7 @@ export const myListTitle = style([ { color: vars.colors.gray900 }, ]); -export const cardListStyle = style({ padding: '1.2rem 2rem 0' }); +export const cardListStyle = style({ padding: '1.2rem 2rem 0', width: '100%' }); export const tabSticky = style({ width: '100%', diff --git a/src/pages/myPage/page/MyList/LikeListPage.tsx b/src/pages/myPage/page/MyList/LikeListPage.tsx index 54354587..de55c35c 100644 --- a/src/pages/myPage/page/MyList/LikeListPage.tsx +++ b/src/pages/myPage/page/MyList/LikeListPage.tsx @@ -1,5 +1,7 @@ import { useState } from 'react'; +import { useFetchLikedStoreList } from '@apis/myPage/useFetchLikedStoreList'; + import { CardList, Tab } from '@components'; import useFilteredCardList from 'src/hooks/useFilteredCardList'; @@ -18,21 +20,10 @@ const LikeListPage = () => { setActiveTab(index); }; - const { - data: likedStoreData, - handleOptionSelect: likedStoreOptionChange, - item: likedStoreItem, - } = useFilteredCardList({ - item: 'likedStore', - }); + const { option, handleOptionSelect } = useFilteredCardList(); - const { - data: likedDesignData, - handleOptionSelect: likedDesignOptionChange, - item: likedDesignItem, - } = useFilteredCardList({ - item: 'likedDesign', - }); + // 찜한 스토어 조회 api (마이리스트 페이지, 지도 페이지) + const { data: LikedStoreListData } = useFetchLikedStoreList(option); return (
@@ -49,15 +40,15 @@ const LikeListPage = () => {
{activeTab === 0 ? ( - ) : ( + ) : ( // 여기 일단 store로 둠 ... 나중에 design 연결하는 사람이 바꿔라 ㅋㅋ )}
diff --git a/src/types/apis/commonType.ts b/src/types/apis/commonType.ts index caa54a5a..6c0db30d 100644 --- a/src/types/apis/commonType.ts +++ b/src/types/apis/commonType.ts @@ -5,3 +5,12 @@ export interface ApiResponseType { message: string; data: T; } + +export interface ErrorResponse { + response: { + data: { + code: number; + message: string; + }; + }; +} diff --git a/src/types/apis/home/index.ts b/src/types/apis/home/index.ts index 05c4cd7c..4b3541bc 100644 --- a/src/types/apis/home/index.ts +++ b/src/types/apis/home/index.ts @@ -1,4 +1,4 @@ -interface StoreRankType { +export interface StoreRank { storeId: number; storeName: string; storeLikesCount: number; @@ -6,7 +6,7 @@ interface StoreRankType { } export interface StoreRankResponse { - storeList: StoreRankType[]; + storeList: StoreRank[]; } export interface CakeRank { diff --git a/src/types/types.ts b/src/types/types.ts index 72969cdf..d673e8fa 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -29,49 +29,6 @@ export interface DesignDetailType { isLiked: boolean; } -// 타입 뭉치지말고 나눠서 쓰되, 겹치는거 상속받아서 처리하기 - -// storeCardList 기본 type -export interface StoreCardListType { - storeCount: number; - stores: StoreType[]; -} - -// designCardList 기본 Type -export interface DesignCardListType { - cakeCount: number; - cakes: DesignItemType[]; -} - -// 스토어 정보 리스트 (최신순) -interface StoreInfoatestType extends StoreCardListType { - nextStoreIdCursor: number; - isLastData: boolean; -} -// 스토어 정보 리스트 (인기순) -interface StoreInfoPopularityType extends StoreCardListType { - nextLikesCursor: number; - lastStoreIdCursor: number; -} -// 해당 역 디자인 조회 (최신순) -interface StationDesignLatestType extends DesignCardListType { - cakeIdCursor: number; -} -// 해당 역 디자인 조회 (인기순) -interface StationDesignPopularity extends DesignCardListType { - cakeLikesCursor: number; - cakeIdCursor: number; -} -// 찜한 스토어 조회 (최신순) -interface LikedStoreInfo -// 찜한 스토어 조회 (인기순) -// 찜한 스토어의 디자인 조회 (최신순) -// 찜한 스토어 디자인 조회 (인기순) -// 디자인 둘러보기 조회 (최신순) -// 디자인 둘러보기 조회 (인기순) -// 찜한 디자인 조회 (최신순) -// 찜한 디자인 조회 (인기순) - export interface StoreCardListType { storeCount: number; stores: StoreType[]; From d61d83ece518aa89bcc89b808fa2756216bc20c1 Mon Sep 17 00:00:00 2001 From: Parkchaeyeon Date: Wed, 22 Jan 2025 07:37:21 +0900 Subject: [PATCH 6/7] =?UTF-8?q?chore:=20type=20=EC=9C=84=EC=B9=98=20?= =?UTF-8?q?=EC=9E=98=EB=AA=BB=EB=90=9C=20=EB=B6=80=EB=B6=84=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/types/apis/designList/index.ts | 19 +++++++------------ src/types/apis/store/index.ts | 9 --------- 2 files changed, 7 insertions(+), 21 deletions(-) diff --git a/src/types/apis/designList/index.ts b/src/types/apis/designList/index.ts index c453b5ff..d72b64ab 100644 --- a/src/types/apis/designList/index.ts +++ b/src/types/apis/designList/index.ts @@ -1,14 +1,9 @@ -import { DesignItemType } from "src/types/types"; +import { DesignItemType } from 'src/types/types'; -export interface DesignListLatestResponse { - nextCakeIdCursor: number, - isLastData: number, - cakeCount: number, - cakes: DesignItemType[] +export interface DesignListResponse { + nextCakeIdCursor: number; + nextCakeLikesCursor?: number; + isLastData: boolean; + cakeCount: number; + cakes: DesignItemType[]; } - -export interface DesignListPopularityResponse { - isLastData: number, - cakeCount: number, - cakes: DesignItemType[] -} \ No newline at end of file diff --git a/src/types/apis/store/index.ts b/src/types/apis/store/index.ts index a32efe1c..e69de29b 100644 --- a/src/types/apis/store/index.ts +++ b/src/types/apis/store/index.ts @@ -1,9 +0,0 @@ -import { DesignItemType } from "src/types/types"; - -export interface DesignListResponse { - nextCakeIdCursor: number, - nextCakeLikesCursor?: number, - isLastData: boolean, - cakeCount: number, - cakes: DesignItemType[] -} \ No newline at end of file From 0d0a9914863be3014ff93bb609007b8f99e1a850 Mon Sep 17 00:00:00 2001 From: Parkchaeyeon Date: Wed, 22 Jan 2025 19:44:49 +0900 Subject: [PATCH 7/7] =?UTF-8?q?chore:=20=EC=9E=90=EC=9E=98=ED=95=9C=20?= =?UTF-8?q?=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/designList/useFetchDesignDetail.ts | 4 +- src/apis/designList/useFetchDesignList.ts | 19 +++-- src/components/common/CardList/CardList.tsx | 4 +- .../common/DesignCard/DesignCard.tsx | 29 +------- .../DesignSearchModal/DesignSearchModal.tsx | 73 ++++++++----------- src/pages/home/page/HomePage/HomePage.tsx | 19 ++--- 6 files changed, 60 insertions(+), 88 deletions(-) diff --git a/src/apis/designList/useFetchDesignDetail.ts b/src/apis/designList/useFetchDesignDetail.ts index aea06041..95e9822f 100644 --- a/src/apis/designList/useFetchDesignDetail.ts +++ b/src/apis/designList/useFetchDesignDetail.ts @@ -38,12 +38,10 @@ const fetchDesignDetail = async ( export const useFetchDesignDetail = ( cakeId: number, dayCategory: string, - themeName: string, - options: { enabled: boolean } + themeName: string ) => { return useQuery({ queryKey: [queryKey.DESIGN_DETAIL], queryFn: () => fetchDesignDetail(cakeId, dayCategory, themeName), - ...options, }); }; diff --git a/src/apis/designList/useFetchDesignList.ts b/src/apis/designList/useFetchDesignList.ts index 2599a2a0..4d494ffa 100644 --- a/src/apis/designList/useFetchDesignList.ts +++ b/src/apis/designList/useFetchDesignList.ts @@ -4,7 +4,7 @@ import { instance } from '@apis/instance'; import { END_POINT, queryKey } from '@constants'; -import { ApiResponseType, DesignListResponse } from '@types'; +import { ApiResponseType, DesignListResponse, ErrorResponse } from '@types'; const fetchDesignList = async ( option: string, @@ -17,7 +17,17 @@ const fetchDesignList = async ( ); return response.data.data; } catch (error) { - console.log(error); + const errorResponse = error as ErrorResponse; + console.log(errorResponse.response.data.code); + if (errorResponse.response.data.code === 40420) { + return { + nextCakeIdCursor: 0, + nextCakeLikesCursor: 0, + isLastData: false, + cakeCount: 0, + cakes: [], + }; + } throw error; } }; @@ -25,12 +35,11 @@ const fetchDesignList = async ( export const useFetchDesignList = ( option: string, dayCategory: string, - themeName: string, - options?: { enabled?: boolean } + themeName: string ) => { return useQuery({ queryKey: [queryKey.DESIGN_LIST, option, dayCategory, themeName], queryFn: () => fetchDesignList(option, dayCategory, themeName), - ...options, + staleTime: 0, }); }; diff --git a/src/components/common/CardList/CardList.tsx b/src/components/common/CardList/CardList.tsx index 277c6a6b..08b13d67 100644 --- a/src/components/common/CardList/CardList.tsx +++ b/src/components/common/CardList/CardList.tsx @@ -112,15 +112,15 @@ const CardList = ({ {item === 'store' || item === 'likedStore' ? (
{(cardListData as StoreType[]).map((store) => ( - + ))}
) : (
{(cardListData as DesignItemType[]).map((cake) => ( diff --git a/src/components/common/DesignCard/DesignCard.tsx b/src/components/common/DesignCard/DesignCard.tsx index da09148f..fbcdaefb 100644 --- a/src/components/common/DesignCard/DesignCard.tsx +++ b/src/components/common/DesignCard/DesignCard.tsx @@ -1,7 +1,5 @@ import { HTMLAttributes } from 'react'; -import { useFetchDesignDetail } from '@apis/designList/useFetchDesignDetail'; - import { IconButton, Image, Label, Modal } from '@components'; import { useEasyNavigate, useModal } from '@hooks'; import DesignSearchModal from '@pages/designList/components/DesignSearchModal/DesignSearchModal'; @@ -16,7 +14,6 @@ import { import { CategoryType, DesignItemType, SubCategoryType } from '@types'; interface DesignCardProps extends HTMLAttributes { designItem: DesignItemType; - designId: number; numberLabel?: string; hasModal?: boolean; handleCardClick?: () => void; @@ -28,7 +25,6 @@ interface DesignCardProps extends HTMLAttributes { const DesignCard = ({ designItem, - designId, numberLabel, hasModal = false, selectedCategories, @@ -55,25 +51,6 @@ const DesignCard = ({ } }; - const { data, isLoading } = useFetchDesignDetail( - cakeId, - selectedCategories?.category ?? 'BIRTH', - selectedCategories?.subCategory ?? 'ALL', - { - enabled: !!hasModal, - } - ); - - if (isLoading) { -
로딩중...
; - } - - if (!data) { -
데이터 없음...
; - } - - console.log(data); - return ( <>
@@ -87,14 +64,14 @@ const DesignCard = ({ buttonType="like20" count={cakeLikesCount} isActive={isLiked} - itemId={designId} + itemId={cakeId} />
- {isModalOpen && data && ( + {isModalOpen && ( - + )} diff --git a/src/pages/designList/components/DesignSearchModal/DesignSearchModal.tsx b/src/pages/designList/components/DesignSearchModal/DesignSearchModal.tsx index 27024e11..f5d75d4c 100644 --- a/src/pages/designList/components/DesignSearchModal/DesignSearchModal.tsx +++ b/src/pages/designList/components/DesignSearchModal/DesignSearchModal.tsx @@ -1,3 +1,5 @@ +import { useFetchDesignDetail } from '@apis/designList/useFetchDesignDetail'; + import { Label, TextButton } from '@components'; import { useEasyNavigate } from '@hooks'; @@ -11,57 +13,42 @@ import { } from './DesignSearchModal.css'; import Carousel from '../Carousel/Carousel'; -interface DesignSearchModalCakesType { - cakeId: number; - isLiked: boolean; - imageUrl: string; -} - -interface DesignSearchModalType { - storeId: number; - storeName: string; - station: string; - cake: DesignSearchModalCakesType[]; -} +import { CategoryType, SubCategoryType } from '@types'; interface DesignSearchModalProps { storeId: number; - data: DesignSearchModalType; + cakeId: number; + selectedCategories?: { + category: CategoryType; + subCategory: SubCategoryType; + }; } -// const designDetailItem = { -// storeId: 1, -// storeName: '케이크케이크케이크케이크', -// station: '종로5가역', -// cakes: [ -// { -// cakeId: 1, -// isLiked: true, -// imageUrl: '../public/example-img.png', -// }, -// { -// cakeId: 5, -// isLiked: false, -// imageUrl: '../public/example-img.png', -// }, -// { -// cakeId: 3, -// isLiked: true, -// imageUrl: '../public/example-img.png', -// }, -// { -// cakeId: 2, -// isLiked: true, -// imageUrl: '../public/example-img.png', -// }, -// ], -// }; - -const DesignSearchModal = ({ storeId, data }: DesignSearchModalProps) => { - const { storeName, station, cake } = data; // 추후 서버에서 받아올 데이터 +const DesignSearchModal = ({ + storeId, + cakeId, + selectedCategories, +}: DesignSearchModalProps) => { + const { data, isLoading } = useFetchDesignDetail( + cakeId, + selectedCategories?.category ?? 'BIRTH', + selectedCategories?.subCategory ?? 'ALL' + ); const { goStorePage } = useEasyNavigate(); + if (isLoading) { + return
로딩중...
; + } + + if (!data) { + return
데이터 없음...
; + } + + console.log(cakeId); + + const { storeName, station, cake } = data; + return (
diff --git a/src/pages/home/page/HomePage/HomePage.tsx b/src/pages/home/page/HomePage/HomePage.tsx index 7b8da7d8..33d0299f 100644 --- a/src/pages/home/page/HomePage/HomePage.tsx +++ b/src/pages/home/page/HomePage/HomePage.tsx @@ -68,8 +68,8 @@ const HomePage = () => {

어떤 날을 위한 케이크인가요?

- {CATEGORY.map((category) => ( - + {CATEGORY.map((category, index) => ( + ))}
@@ -79,9 +79,14 @@ const HomePage = () => {
{storeRankData.map((store, index) => { return index < 4 ? ( - + ) : ( {

인기 케이크

{cakeRankData.map((cake, index) => ( -
- +
+
))}