From 0c60c2666d001c257b157f9b2b51dce1c8dee68b Mon Sep 17 00:00:00 2001 From: eunjju2 Date: Sat, 7 Dec 2024 22:24:50 +0900 Subject: [PATCH 1/5] =?UTF-8?q?=E2=9C=A8=20Feat=20:=20=EB=A7=9E=EC=B6=A4?= =?UTF-8?q?=ED=98=95=20=EC=B6=94=EC=B2=9C=20api=20=EC=97=B0=EA=B2=B0=20#12?= =?UTF-8?q?0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/workplace.ts | 8 +++++ src/pages/MainPage/components/MainList.tsx | 34 +++++++++++++++---- .../MainPage/components/StudyRoomCard.tsx | 4 ++- .../MainPage/hooks/useGetWorkplaceData.tsx | 18 ++++++++-- src/pages/MainPage/index.tsx | 22 ++++++++---- src/typings/types.ts | 2 +- 6 files changed, 71 insertions(+), 17 deletions(-) diff --git a/src/apis/workplace.ts b/src/apis/workplace.ts index 604cd1e..d770d25 100644 --- a/src/apis/workplace.ts +++ b/src/apis/workplace.ts @@ -144,6 +144,14 @@ export const postPositionWorkPlace = async ({ return response.data; }; +// 하이브리드 필터링 사업장 조회 +export const getRecommendWorkPlace = async (): Promise< + GetPositionWorkPlaceData[] +> => { + const response = await authInstance.post('/api/v1/recommend'); + return response.data; +}; + // 사업자 사업장 조회 export const getBusinessWorkPlace = async (): Promise => { diff --git a/src/pages/MainPage/components/MainList.tsx b/src/pages/MainPage/components/MainList.tsx index 24dda37..0a4c8bd 100644 --- a/src/pages/MainPage/components/MainList.tsx +++ b/src/pages/MainPage/components/MainList.tsx @@ -13,10 +13,20 @@ interface MainListProps { data: GetPositionWorkPlaceData[] | undefined; isLoading: boolean; isError: boolean; + recommendData: GetPositionWorkPlaceData[]; + isRecommendLoading: boolean; + isRecommendError: boolean; } const MainList = (props: MainListProps) => { - const { data, isLoading, isError } = props; + const { + data, + isLoading, + isError, + recommendData, + isRecommendLoading, + isRecommendError, + } = props; const [activeTab, setActiveTab] = useState('주변 스터디룸'); const tabList: TabList = { '주변 스터디룸': { @@ -58,6 +68,16 @@ const MainList = (props: MainListProps) => { studyroom={item} /> ))} + {activeTab === '맞춤형 추천' && + !isRecommendLoading && + recommendData && + recommendData.length > 0 && + recommendData.map((item) => ( + + ))} {(!isLoading || isError) && activeTab === '주변 스터디룸' && (!data || data.length === 0) && ( @@ -65,11 +85,13 @@ const MainList = (props: MainListProps) => { 주변 스터디룸이 없습니다. )} - {activeTab === '맞춤형 추천' && ( -
- 추천 스터디룸이 없습니다. -
- )} + {(!isRecommendLoading || isRecommendError) && + (!recommendData || recommendData.length === 0) && + activeTab === '맞춤형 추천' && ( +
+ 추천 스터디룸이 없습니다. +
+ )} ); diff --git a/src/pages/MainPage/components/StudyRoomCard.tsx b/src/pages/MainPage/components/StudyRoomCard.tsx index 130c1da..444cd86 100644 --- a/src/pages/MainPage/components/StudyRoomCard.tsx +++ b/src/pages/MainPage/components/StudyRoomCard.tsx @@ -35,7 +35,9 @@ const StudyRoomCard = ({ studyroom }: StudyRoomCardProps) => {

{workplaceName}

- {distance.toFixed(2)}km + + {distance && `${distance.toFixed(2)}km`} + {formattedAddress}
diff --git a/src/pages/MainPage/hooks/useGetWorkplaceData.tsx b/src/pages/MainPage/hooks/useGetWorkplaceData.tsx index c6e30c7..18a3b50 100644 --- a/src/pages/MainPage/hooks/useGetWorkplaceData.tsx +++ b/src/pages/MainPage/hooks/useGetWorkplaceData.tsx @@ -1,4 +1,4 @@ -import { postPositionWorkPlace } from '@apis/workplace'; +import { getRecommendWorkPlace, postPositionWorkPlace } from '@apis/workplace'; import { useQuery } from '@tanstack/react-query'; import { GetPositionWorkPlaceData, @@ -6,7 +6,7 @@ import { NowPosition, } from '@typings/types'; -const useGetWorkplaceData = ( +export const useGetWorkplaceData = ( nowPosition: NowPosition, mapPosition: MapPosition, ) => { @@ -23,4 +23,16 @@ const useGetWorkplaceData = ( return { data, isLoading, isError, refetch }; }; -export default useGetWorkplaceData; +export const useGetRecommendData = (isLogin: boolean) => { + const { data, isLoading, isError } = useQuery({ + queryKey: ['recommendWorkPlace'], + queryFn: () => getRecommendWorkPlace(), + enabled: isLogin, + }); + + return { + data: (data ?? []) as GetPositionWorkPlaceData[], + isLoading, + isError, + }; +}; diff --git a/src/pages/MainPage/index.tsx b/src/pages/MainPage/index.tsx index 5c7ba7f..506d6d2 100644 --- a/src/pages/MainPage/index.tsx +++ b/src/pages/MainPage/index.tsx @@ -1,11 +1,14 @@ import MainLayout from '@layouts/MainLayout'; import HeaderNoTitle from '@layouts/HeaderNoTitle'; import BottomNavigation from '@layouts/BottomNavigation'; -import { useEffect } from 'react'; import usePositionStore from '@store/positionStore'; +import useAuthStore from '@store/authStore'; import MainList from './components/MainList'; import KakaoMap from './components/KakaoMap'; -import useGetWorkplaceData from './hooks/useGetWorkplaceData'; +import { + useGetWorkplaceData, + useGetRecommendData, +} from './hooks/useGetWorkplaceData'; const MainPage = () => { const { mapPosition, nowPosition } = usePositionStore(); @@ -20,10 +23,14 @@ const MainPage = () => { mapPosition, ); - // 스크롤 상단으로 이동 - useEffect(() => { - window.scrollTo(0, 0); - }, []); + const { isLogin } = useAuthStore(); + + const { + data: recommendData, + isLoading: isRecommendLoading, + isError: isRecommendError, + } = useGetRecommendData(isLogin); + console.log(recommendData); return ( <> @@ -34,6 +41,9 @@ const MainPage = () => { data={data} isLoading={isLoading} isError={isError} + recommendData={recommendData} + isRecommendLoading={isRecommendLoading} + isRecommendError={isRecommendError} /> diff --git a/src/typings/types.ts b/src/typings/types.ts index 6100131..afc1b53 100644 --- a/src/typings/types.ts +++ b/src/typings/types.ts @@ -290,7 +290,7 @@ export interface GetPositionWorkPlaceData { reviewCount: number; positionLat: number; // positionLon: number; - distance: number; + distance?: number; } // 특정 사업자의 사업장 From aed4ea492a180e8a23d3084f0923c9ff7d5d5f40 Mon Sep 17 00:00:00 2001 From: eunjju2 Date: Sat, 7 Dec 2024 22:38:17 +0900 Subject: [PATCH 2/5] =?UTF-8?q?=E2=9C=A8=20Feat=20:=20=EB=B9=84=EB=A1=9C?= =?UTF-8?q?=EA=B7=B8=EC=9D=B8=20=EC=83=81=ED=83=9C=20=EC=8B=9C=20=ED=99=94?= =?UTF-8?q?=EB=A9=B4=20=EA=B5=AC=ED=98=84=20#120?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/MainPage/components/MainList.tsx | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/src/pages/MainPage/components/MainList.tsx b/src/pages/MainPage/components/MainList.tsx index 0a4c8bd..914042f 100644 --- a/src/pages/MainPage/components/MainList.tsx +++ b/src/pages/MainPage/components/MainList.tsx @@ -1,5 +1,7 @@ import { useState } from 'react'; import { GetPositionWorkPlaceData } from '@typings/types'; +import useAuthStore from '@store/authStore'; +import { useNavigate } from 'react-router-dom'; import StudyRoomCard from './StudyRoomCard'; type TabList = { @@ -39,6 +41,9 @@ const MainList = (props: MainListProps) => { }, }; + const { isLogin } = useAuthStore(); + const navigate = useNavigate(); + return (