Refactor: 지역 슬라이드 이동 시 추천 장소 변경

moidot · Mar 15, 2024 · 12b52d8 · 12b52d8
1 parent 5720cef
commit 12b52d8
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 10 deletions.
diff --git a/src/components/main/Recommendation.tsx b/src/components/main/Recommendation.tsx
@@ -28,6 +28,7 @@ const Recommendation = (props: GetGroupBestRegionListRes) => {
               latitude={item.latitude}
               longitude={item.longitude}
               moveUserInfo={item.moveUserInfo}
+              index={data.indexOf(item)}
             />
           </div>
         ))}

diff --git a/src/components/main/RecommendationItem.tsx b/src/components/main/RecommendationItem.tsx
@@ -1,12 +1,19 @@
+import { useSetRecoilState } from 'recoil';
 import AdminBox from '../common/main/AdminBox';
 import OthersBox from '../common/main/OthersBox';
 import { GetGroupBestRegionProps, GetUserInfoProps } from '@/types/SpaceType';
+import { recommendIndexAtom } from '@/states/recommendIndexAtom';
+import { useEffect } from 'react';
 
-const RecommendationItem = ({ name, moveUserInfo }: GetGroupBestRegionProps) => {
+const RecommendationItem = ({ name, moveUserInfo, index }: GetGroupBestRegionProps) => {
   console.log(moveUserInfo);
+  const setRecommendIndex = useSetRecoilState(recommendIndexAtom);
   const adminUser: GetUserInfoProps[] = moveUserInfo.filter((item) => item.isAdmin);
   // console.log(adminUser);
   const defaultUser: GetUserInfoProps[] = moveUserInfo.filter((item) => !item.isAdmin);
+  useEffect(() => {
+    setRecommendIndex(index);
+  }, [index, setRecommendIndex]);
   return (
     <div className="flex flex-col justify-center items-center">
       <div className="rounded-tl-lg rounded-tr-lg pt-6 pl-10 bg-main_orange w-[1200px] h-[84px] ">

diff --git a/src/components/main/index.tsx b/src/components/main/index.tsx
@@ -1,6 +1,6 @@
 import { userNavAtom } from '@/states/userNavAtom';
 import React, { useEffect, useState } from 'react';
-import { useSetRecoilState } from 'recoil';
+import { useRecoilValue, useSetRecoilState } from 'recoil';
 import { NAV_LIST } from '../common/navbar/Navigation';
 import ShareButton from '../common/button/share';
 import Recommendation from './Recommendation';
@@ -11,6 +11,7 @@ import { useGetGroup } from '@/hooks/useGetGroup';
 import KakaoMap from './KakaoMap';
 import { groupIdAtom } from '@/states/groupIdAtom';
 import LoadingPage from '@/pages/loading';
+import { recommendIndexAtom } from '@/states/recommendIndexAtom';
 
 interface MainProps {
   id: string;
@@ -39,6 +40,7 @@ const Main = ({ id }: MainProps) => {
 
   const setUserAtom = useSetRecoilState(userNavAtom);
   setUserAtom({ activeNavType: NAV_LIST.MAIN });
+  const recommendIndex = useRecoilValue(recommendIndexAtom);
   const [groupData, setGroupData] = useState<any>();
   const [groupNameData, setGroupNameData] = useState<any>();
 
@@ -49,14 +51,17 @@ const Main = ({ id }: MainProps) => {
   useEffect(() => {
     console.log(gData, 'gData');
     groupData !== gData && setGroupData(gData);
+  }, [gData, groupData]);
+
+  useEffect(() => {
     if (groupData) {
-      setLat(groupData?.data[0].latitude);
-      setLng(groupData?.data[0].longitude);
-      setLocal(groupData?.data[0].name);
-      setUserPath(groupData?.data[0].moveUserInfo.filter((item: any) => item.userId === userId));
-      setOtherUserPath(groupData?.data[0].moveUserInfo.filter((item: any) => item.userId !== userId));
+      setLat(groupData?.data[recommendIndex].latitude);
+      setLng(groupData?.data[recommendIndex].longitude);
+      setLocal(groupData?.data[recommendIndex].name);
+      setUserPath(groupData?.data[recommendIndex].moveUserInfo.filter((item: any) => item.userId === userId));
+      setOtherUserPath(groupData?.data[recommendIndex].moveUserInfo.filter((item: any) => item.userId !== userId));
     }
-  }, [gData, groupData]);
+  }, [groupData, recommendIndex, userId]);
 
   useEffect(() => {
     console.log(gNameData, 'gNameData');
@@ -86,8 +91,8 @@ const Main = ({ id }: MainProps) => {
 
           {userPath && otherUserPath && (
             <KakaoMap
-              lat={parseFloat(groupData?.data[0].latitude.toString() as string)}
-              lng={parseFloat(groupData?.data[0].longitude.toString() as string)}
+              lat={parseFloat(groupData?.data[recommendIndex].latitude.toString() as string)}
+              lng={parseFloat(groupData?.data[recommendIndex].longitude.toString() as string)}
               user={userPath}
               otherUser={otherUserPath}
             />

diff --git a/src/states/recommendIndexAtom.ts b/src/states/recommendIndexAtom.ts
@@ -0,0 +1,6 @@
+import { atom } from 'recoil';
+
+export const recommendIndexAtom = atom<number>({
+  key: 'recommendIndexAtom',
+  default: 0,
+});
diff --git a/src/types/SpaceType.ts b/src/types/SpaceType.ts
@@ -37,6 +37,7 @@ export interface GetGroupBestRegionProps {
   latitude: number;
   longitude: number;
   moveUserInfo: GetUserInfoProps[];
+  index: number;
 }
 
 export interface GetUserInfoProps {