Merge pull request #211 from FinalDoubleTen/FE-94--feat/Trips/DragAnd…

…Drop Feat: 여정페이지 리펙토링
WePlanPlans · Jan 21, 2024 · ed07fb2 · ed07fb2
2 parents c31182e + bdf7548
commit ed07fb2
Show file tree

Hide file tree

Showing 19 changed files with 327 additions and 129 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;
 };
@@ -79,17 +79,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;
 };
@@ -100,6 +100,12 @@ export const getTripsAuthority = async (tripId: string) => {
   return res;
 };
 
+// 나의 여정목록 조회
+export const getMyTrips = async () => {
+  const res = await authClient.get(`trips`);
+  return res;
+};
+
 // 여정 참여 코드 조회
 export const getTripsjoin = async (tripId: string) => {
   const res = await authClient.get(`trips/${tripId}/join`);

diff --git a/src/components/DetailSectionBottom/DetailReviewStats.tsx b/src/components/DetailSectionBottom/DetailReviewStats.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { useGetToursReviews } from '@hooks/useReviewStats';
 import { v4 as uuidv4 } from 'uuid';
-import { DownIcon } from '@components/common/icons/Icons';
+import { DropdownIcon } from '@components/common/icons/Icons';
 import useReviewStatsCalculator from '@hooks/useReviewStatsCalculator';
 import { getEmoji } from '@utils/utils';
 
@@ -45,11 +45,11 @@ const DetailReviewStats = () => {
         <div className="flex items-center justify-center">
           <div
             onClick={() => setShowAll(!showAll)}
-            className="cursor-pointer transition-transform duration-300"
+            className="mt-[9px] cursor-pointer transition-transform duration-300"
             style={{
               transform: showAll ? 'rotate(180deg)' : 'rotate(0deg)',
             }}>
-            <DownIcon />
+            <DropdownIcon />
           </div>
         </div>
       )}

diff --git a/src/components/DetailSectionTop/DetailAddSchedule.tsx b/src/components/DetailSectionTop/DetailAddSchedule.tsx
@@ -2,14 +2,35 @@ import * as Dialog from '@radix-ui/react-dialog';
 import { CalendarIcon } from '@components/common/icons/Icons';
 import Alert from '@components/common/alert/Alert';
 import { useNavigate } from 'react-router-dom';
+import { PlusIcon } from '@components/common/icons/Icons';
+import { useGetMyTrips } from '@hooks/useGetMyTrips';
+import { calculateTripDuration } from '@utils/calculateTripDuration';
+import { calculateDayAndDate } from '@utils/utils';
 
 const DetailAddSchedule = () => {
+  const { myTrips } = useGetMyTrips();
+  const tripDuration = calculateTripDuration(
+    myTrips[0]?.startDate,
+    myTrips[0]?.endDate,
+  );
+
+  const { SmallDayArr } = calculateDayAndDate(
+    myTrips[0]?.startDate,
+    myTrips[0]?.endDate,
+  );
+
+  console.log(SmallDayArr);
+
   const navigate = useNavigate();
 
   const handleConfirm = () => {
     navigate('/login');
   };
 
+  const handleCreate = () => {
+    navigate('/create');
+  };
+
   return (
     <Dialog.Root>
       <Dialog.Trigger asChild>
@@ -24,30 +45,51 @@ const DetailAddSchedule = () => {
 
         <Dialog.Content className="data-[state=open]:animate-contentShow fixed left-[50%] top-[97%] z-10 max-h-[85vh] w-[412px] translate-x-[-50%] translate-y-[-90%] rounded-tl-[16px] rounded-tr-[16px] bg-white p-[20px] pb-[50px]  shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none">
           <Dialog.Close className="text-mauve12 m-0 flex w-full justify-end text-[17px] font-medium">
-            <button className="btn-base h-[40px] w-[116px] rounded-full bg-main2 p-0 text-[14px] font-bold text-white disabled:cursor-not-allowed disabled:bg-gray3">
-              + 여행 생성하기
+            <button
+              onClick={handleCreate}
+              className="btn-base h-[40px] w-[145px] rounded-full bg-main2 p-0 text-[14px] font-bold text-white disabled:cursor-not-allowed disabled:bg-gray3">
+              <div className="flex items-center justify-center gap-[6px] text-center">
+                <PlusIcon size={8} color="white" className="mb-[2px]" />
+                새로운 여행 만들기
+              </div>
             </button>
           </Dialog.Close>
 
           <Dialog.Description className="text-mauve11 mb-5 mt-[10px] text-[15px] leading-normal">
-            <div className="flex flex-col items-start justify-start gap-4">
-              <div className="flex flex-shrink-0 flex-grow-0 flex-col items-start justify-start gap-2">
-                <div className="relative mb-[8px] flex h-14 w-[375px] flex-shrink-0 flex-grow-0 items-center justify-start gap-[9px]">
-                  <img
-                    src="https://source.unsplash.com/random"
-                    className="h-[52px] w-[52px] flex-shrink-0 flex-grow-0 rounded-lg object-cover"
-                  />
-                  <div className="relative flex flex-shrink-0 flex-grow-0 flex-col items-start justify-start gap-2">
-                    <div className="w-[270.04px] flex-shrink-0 flex-grow-0 text-left text-base font-bold text-[#1e1e1e]">
-                      강릉 속초 여행
-                    </div>
-                    <div className="h-[17px] w-[270.04px] flex-shrink-0 flex-grow-0 text-left text-sm font-medium text-[#888]">
-                      2023.12.20 - 12.22 (3박 4일)
+            {myTrips.map((trip, index) => {
+              // 각 여행에 대한 기간을 계산합니다.
+              const tripDuration = calculateTripDuration(
+                trip.startDate,
+                trip.endDate,
+              );
+
+              return (
+                <div
+                  key={index}
+                  className="flex flex-col items-start justify-start gap-4">
+                  <div className="flex flex-shrink-0 flex-grow-0 flex-col items-start justify-start gap-2">
+                    <div className="relative mb-[8px] flex h-14 w-[375px] flex-shrink-0 flex-grow-0 items-center justify-start gap-[9px]">
+                      <img
+                        src={trip.tripThumbnailUrl}
+                        alt={`Thumbnail for ${trip.tripName}`}
+                        className="h-[52px] w-[52px] flex-shrink-0 flex-grow-0 rounded-lg object-cover"
+                      />
+                      <div className="relative flex flex-shrink-0 flex-grow-0 flex-col items-start justify-start">
+                        <div className="w-[270px] flex-shrink-0 flex-grow-0 text-left text-base font-bold text-[#1e1e1e]">
+                          {trip.tripName}
+                        </div>
+                        <div className="h-[17px] w-[270px] flex-shrink-0 flex-grow-0 text-left text-sm font-medium text-[#888]">
+                          {trip.startDate?.replace(/-/g, '.')} -{' '}
+                          {trip.endDate?.substring(5).replace(/-/g, '.')} (
+                          {tripDuration})
+                        </div>
+                      </div>
                     </div>
                   </div>
                 </div>
-              </div>
-            </div>
+              );
+            })}
+
             <div className="flex items-start justify-start gap-1">
               <div className="relative flex h-10 flex-shrink-0 flex-grow-0 items-center justify-center gap-1 rounded-[168px] border-[1.25px] border-solid border-[#29ddf6] px-8 py-2">
                 <div className="flex-shrink-0 flex-grow-0 text-left text-sm font-medium text-[#29ddf6]">
@@ -67,7 +109,7 @@ const DetailAddSchedule = () => {
             }
             onConfirm={handleConfirm}>
             <div className="mt-[25px] flex justify-end">
-              <button className="btn-base bg-main2 text-lg font-bold text-white disabled:cursor-not-allowed disabled:bg-gray3">
+              <button className="btn-base h-14 bg-main2 text-base font-bold text-white disabled:cursor-not-allowed disabled:bg-gray3">
                 일정 추가하기
               </button>
             </div>

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,82 @@ 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';
 import PlanSchedule from './PlanSchedule';
 
+
 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">