Feat: 여정페이지 리펙토링

WePlanPlans · Jan 20, 2024 · c70cded · c70cded
1 parent 8205a08
commit c70cded
Show file tree

Hide file tree

Showing 15 changed files with 190 additions and 113 deletions.
diff --git a/src/@types/service.ts b/src/@types/service.ts
@@ -103,6 +103,7 @@ export type SocketContextType = {
   tripPath: subPathRes | null;
   tripMember: subMemberRes | null;
   tripBudget: subBudgetRes | null;
+  tripId: string;
   callBackPub: (callback: () => void) => void;
 };
 

diff --git a/src/api/trips.ts b/src/api/trips.ts
@@ -4,7 +4,7 @@ import authClient from './authClient';
 // 여정 관련 API
 
 // 여정 상세조회
-export const getTrips = async (tripId: number) => {
+export const getTrips = async (tripId: string) => {
   const res = await client.get(`trips/${tripId}`);
   return res;
 };
@@ -71,17 +71,17 @@ export const postTripsLikeHate = async (
 };
 
 // 우리의 여행취향 조회
-export const getTripsSurvey = async (tripId: number) => {
+export const getTripsSurvey = async (tripId: string) => {
   const res = await client.get(`trips/${tripId}/survey`);
   return res;
 };
 // 우리의 여행취향 참여/미참여 회원 조회
-export const getTripsSurveyMembers = async (tripId: number) => {
+export const getTripsSurveyMembers = async (tripId: string) => {
   const res = await client.get(`trips/${tripId}/survey/members`);
   return res;
 };
 // 여정을 공유하고 있는 회원 조회
-export const getTripsMembers = async (tripId: number) => {
+export const getTripsMembers = async (tripId: string) => {
   const res = await client.get(`trips/${tripId}/members`);
   return res;
 };

diff --git a/src/components/Plan/PlanItem.tsx b/src/components/Plan/PlanItem.tsx
@@ -9,7 +9,6 @@ import { socketContext } from '@hooks/useSocket';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { visitDateState } from '@recoil/socket';
 import { pubGetPathAndItems, pubUpdateTransportation } from '@api/socket';
-import { tripIdState } from '@recoil/socket';
 import { tapState } from '@recoil/plan';
 import { useGetTripsAuthority } from '@hooks/useGetTripsAuthority';
 
@@ -22,11 +21,9 @@ const PlanItem: React.FC<PlanItemProps> = ({ date, day }) => {
   const navigate = useNavigate();
   const { tripAuthority } = useGetTripsAuthority();
   const [isEdit, SetIsEdit] = useState(false);
-  const tripId = useRecoilValue(tripIdState);
   const tap = useRecoilValue(tapState);
-  const [visitDate, setVisitDate] = useRecoilState(visitDateState);
-  const { tripItem, tripPath, callBackPub } = useContext(socketContext);
-  console.log(visitDate);
+  const [, setVisitDate] = useRecoilState(visitDateState);
+  const { tripItem, tripPath, callBackPub, tripId } = useContext(socketContext);
 
   useEffect(() => {
     if (tap) {

diff --git a/src/components/Plan/PlanSectionTop.tsx b/src/components/Plan/PlanSectionTop.tsx
@@ -6,47 +6,80 @@ import Tab from '@components/common/tab/Tab';
 import PlanItem from './PlanItem';
 import { socketContext } from '@hooks/useSocket';
 import { useContext } from 'react';
-import { pubEnterMember } from '@api/socket';
+import {
+  pubEnterMember,
+  pubConnectMember,
+  pubDisconnectMember,
+} from '@api/socket';
 import { useEffect } from 'react';
-import { useRecoilValue, useRecoilState } from 'recoil';
+import { useRecoilState } from 'recoil';
 import { dayState, dateState } from '@recoil/plan';
-import { tripIdState, memberIdState } from '@recoil/socket';
 import { calculateDayAndDate } from '@utils/utils';
 import { TripSchedule } from '@components/Trip/TripSchedule';
+import { useGetTrips } from '@hooks/useGetTrips';
+import { visitDateState } from '@recoil/socket';
+import { useState } from 'react';
+import { getItem } from '@utils/localStorageFun';
 
 const PlanSectionTop = () => {
   const navigate = useNavigate();
-  const tripId = useRecoilValue(tripIdState);
-
-  const pubMember = useRecoilValue(memberIdState);
   const [, setDay] = useRecoilState(dayState);
   const [, setDate] = useRecoilState(dateState);
-
-  if (!pubMember || !tripId) {
-    return <div>에러</div>;
-  }
-
-  const { callBackPub, tripInfo } = useContext(socketContext);
-
-  useEffect(() => {
-    callBackPub(() => pubEnterMember(tripId));
-  }, []);
+  const {
+    callBackPub,
+    tripId,
+    tripInfo,
+    tripItem,
+    tripPath,
+    tripMember,
+    tripBudget,
+  } = useContext(socketContext);
+  const [, setVisitDate] = useRecoilState(visitDateState);
+  const { startDate, endDate } = useGetTrips();
+  const [isEnter, setIsEnter] = useState(false);
 
   let DayArr: string[] = [];
   let DateArr: string[] = [];
 
-  const startDate = tripInfo?.data?.startDate;
-  const endDate = tripInfo?.data?.endDate;
-
   if (startDate && endDate) {
     ({ DayArr, DateArr } = calculateDayAndDate(startDate, endDate));
   }
 
   useEffect(() => {
+    if (startDate) {
+      setVisitDate({ visitDate: startDate });
+    }
     setDay(DayArr);
     setDate(DateArr);
   }, [startDate, endDate]);
 
+  useEffect(() => {
+    callBackPub(() => pubEnterMember(tripId));
+  }, []);
+
+  useEffect(() => {
+    if (tripInfo && tripItem && tripPath && tripMember && tripBudget) {
+      setIsEnter(true);
+    }
+  }, [tripInfo, tripItem, tripPath, tripMember, tripBudget]);
+
+  useEffect(() => {
+    if (isEnter) {
+      const accessToken = getItem('accessToken');
+      if (accessToken) {
+        callBackPub(() => {
+          pubConnectMember({ token: accessToken || '' }, tripId);
+        });
+
+        return () => {
+          callBackPub(() =>
+            pubDisconnectMember({ token: accessToken || '' }, tripId),
+          );
+        };
+      }
+    }
+  }, [isEnter]);
+
   return (
     <div className="min-h-screen">
       <BackBox

diff --git a/src/components/Trip/TripInfo.tsx b/src/components/Trip/TripInfo.tsx
@@ -5,20 +5,25 @@ import TripSurveyMember from '@components/common/modal/children/TripSurveyMember
 import { Modal } from '@components/common/modal';
 import { useQuery } from '@tanstack/react-query';
 import { getTripsMembers } from '@api/trips';
-import { tripIdState } from '@recoil/socket';
 // import { ReactComponent as NullUser } from '@assets/images/NullUser.svg';
 import { DownIcon } from '@components/common/icons/Icons';
 import { useState } from 'react';
 import { UserIcon } from '@components/common/icons/Icons';
+import { useGetTripsAuthority } from '@hooks/useGetTripsAuthority';
 
 const ShareList = () => {
-  const tripId = Number(useRecoilValue(tripIdState));
+  const { tripId } = useGetTripsAuthority();
+
   const { data: tripsMembers } = useQuery({
     queryKey: ['tripsMembers', tripId],
-    queryFn: () => getTripsMembers(tripId),
+    queryFn: () =>
+      tripId != null
+        ? getTripsMembers(tripId)
+        : Promise.reject('tripId is null'),
+    enabled: !!tripId,
   });
   const members = tripsMembers?.data?.data?.tripMemberSimpleInfos;
-
+  console.log(tripsMembers);
   return (
     <>
       <hr className="my-3 border-solid border-gray2" />
@@ -54,15 +59,20 @@ const ShareList = () => {
 };
 
 const TripInfo = () => {
+  const { tripId } = useGetTripsAuthority();
   const modalChildren = useRecoilValue(modalChildrenState);
   const [isModalOpen, setIsModalOpen] = useRecoilState(isModalOpenState);
-  const tripId = Number(useRecoilValue(tripIdState));
   const [isAccordion, setIsAccordion] = useState(false);
 
   const { data: tripsMembers } = useQuery({
     queryKey: ['tripsMembers', tripId],
-    queryFn: () => getTripsMembers(tripId),
+    queryFn: () =>
+      tripId != null
+        ? getTripsMembers(tripId)
+        : Promise.reject('tripId is null'),
+    enabled: !!tripId,
   });
+
   const members = tripsMembers?.data?.data?.tripMemberSimpleInfos;
 
   const closeModal = () => {
@@ -73,6 +83,10 @@ const TripInfo = () => {
     setIsAccordion((prev) => !prev);
   };
 
+  if (!tripId) {
+    return <div>error</div>;
+  }
+
   return (
     <>
       <div className="my-5">

diff --git a/src/components/Trip/TripPreference.tsx b/src/components/Trip/TripPreference.tsx
@@ -8,9 +8,10 @@ import {
 } from '@utils/calculatePercentage';
 import { modalChildrenState, isModalOpenState } from '@recoil/modal';
 import { getTripsSurveyMembers } from '@api/trips';
-import { tripIdState } from '@recoil/socket';
-import { useRecoilValue, useSetRecoilState, useRecoilState } from 'recoil';
+import { useSetRecoilState, useRecoilState } from 'recoil';
 import { participantsState } from '@recoil/trip';
+import { useGetTripsAuthority } from '@hooks/useGetTripsAuthority';
+
 interface RatioBarParams {
   value: number;
   total: number;
@@ -96,19 +97,23 @@ const Percentage = ({ value, total, color }: PercentageParams) => (
 );
 
 const TripPreference: React.FC = () => {
+  const { tripId } = useGetTripsAuthority();
   const [A, setA] = useState<[number, number]>([0, 0]);
   const [B, setB] = useState<[number, number]>([0, 0]);
   const [C, setC] = useState<[number, number]>([0, 0]);
   const [D, setD] = useState<[number, number]>([0, 0]);
   const [E, setE] = useState<[number, number]>([0, 0]);
   const setModalChildren = useSetRecoilState(modalChildrenState);
   const setIsModalOpen = useSetRecoilState(isModalOpenState);
-  const tripId = Number(useRecoilValue(tripIdState));
   const [participants, setParticipants] = useRecoilState(participantsState);
 
   const { data: tripsSurveyMembers } = useQuery({
     queryKey: ['tripsSurveyMembers', tripId],
-    queryFn: () => getTripsSurveyMembers(tripId),
+    queryFn: () =>
+      tripId != null
+        ? getTripsSurveyMembers(tripId)
+        : Promise.reject('tripId is null'),
+    enabled: !!tripId,
   });
 
   useEffect(() => {
@@ -118,7 +123,11 @@ const TripPreference: React.FC = () => {
 
   const { data: tripPreference, isLoading } = useQuery({
     queryKey: ['tripPreference', tripId],
-    queryFn: () => getTripsSurvey(tripId),
+    queryFn: () =>
+      tripId != null
+        ? getTripsSurvey(tripId)
+        : Promise.reject('tripId is null'),
+    enabled: !!tripId,
   });
 
   useEffect(() => {

diff --git a/src/components/Trip/TripRealtimeEditor.tsx b/src/components/Trip/TripRealtimeEditor.tsx
@@ -1,46 +1,15 @@
-import { useRecoilValue } from 'recoil';
-import { tripIdState } from '@recoil/socket';
 import { useEffect, useState } from 'react';
 import { socketContext } from '@hooks/useSocket';
 import { useContext } from 'react';
-import { pubConnectMember, pubDisconnectMember } from '@api/socket';
 import { UserIcon } from '@components/common/icons/Icons';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import { Navigation } from 'swiper/modules';
-import { getItem } from '@utils/localStorageFun';
 
 const TripRealtimeEditor = () => {
-  const tripId = useRecoilValue(tripIdState);
-  const { callBackPub, tripMember } = useContext(socketContext);
-  const [token, setToken] = useState('');
-  const [pubMember, setPubMember] = useState({ token: '' });
-
-  useEffect(() => {
-    const accessToken = getItem('accessToken');
-    if (accessToken) {
-      setToken(accessToken);
-    }
-  }, []);
-
-  useEffect(() => {
-    setPubMember({ token: token || '' });
-  }, [token]);
-
-  // useEffect(() => {
-  //   if (pubMember && tripId) {
-  //     callBackPub(() => {
-  //       pubConnectMember(pubMember, tripId);
-  //     });
-  //     return () => {
-  //       callBackPub(() => pubDisconnectMember(pubMember, tripId));
-  //     };
-  //   }
-  // }, [pubMember]);
+  const { tripMember } = useContext(socketContext);
 
   const tripMemberData = tripMember?.data;
-  useEffect(() => {
-    console.log('tripMemberData', tripMemberData);
-  }, [tripMemberData]);
+
   return (
     <div className="my-5">
       <Swiper
@@ -56,8 +25,8 @@ const TripRealtimeEditor = () => {
           const imageUrl = isImageUrlValid ? thumbnailUrl : null;
 
           return (
-            <SwiperSlide>
-              <div key={member?.memberId}>
+            <SwiperSlide key={member?.memberId}>
+              <div>
                 {imageUrl ? (
                   <img
                     src={imageUrl}

diff --git a/src/components/Trip/TripSchedule.tsx b/src/components/Trip/TripSchedule.tsx
@@ -1,19 +1,30 @@
 import { UserIcon } from '@components/common/icons/Icons';
+import { useGetTrips } from '@hooks/useGetTrips';
 
 export const TripSchedule = () => {
+  const { tripName, startDate, endDate, numberOfPeople } = useGetTrips();
+
   return (
     <>
       <hr className="my-3 border-solid border-gray2" />
       <div className="flex items-center justify-between">
-        <div className="flex items-center">
-          <div className="title1 mb-[10px] mr-1">강릉 여행 일정</div>
+        <div className="flex">
+          <div className="title1 mb-[10px] mr-1">{tripName}</div>
           <div className="flex items-center pb-[10px]">
             <UserIcon size={20} fill="#888" color="#888" />
-            <span className="body4 pt-[1px] text-gray4">5</span>
+            <span className="body4 pt-[1px] text-gray4">{numberOfPeople}</span>
           </div>
         </div>
+        <div className="flex">
+          <button className="body3 rounded-lg border-2 border-solid border-gray2 p-2 text-gray4">
+            편집
+          </button>
+        </div>
       </div>
-      <span className="body1 text-gray4">23.12.23 - 23.12.25</span>
+      <span className="body1 text-gray4">
+        {startDate?.substring(2).replace(/-/g, '.') || ''} -{' '}
+        {endDate?.substring(5).replace(/-/g, '.') || ''}
+      </span>
     </>
   );
 };
diff --git a/src/components/Trip/TripSectionTop.tsx b/src/components/Trip/TripSectionTop.tsx
@@ -5,13 +5,9 @@ import { BackBox } from '@components/common';
 import { useNavigate } from 'react-router-dom';
 import PlanTripButton from './PlanTripButton';
 import { LikedToursList } from './LikedToursList';
-import { useGetTripsAuthority } from '@hooks/useGetTripsAuthority';
 
 const TripSectionTop = () => {
   const navigate = useNavigate();
-  const { tripAuthority } = useGetTripsAuthority();
-
-  console.log(tripAuthority);
 
   return (
     <div className="min-h-screen">