Feat: 소켓통신 리팩토링

WePlanPlans · Jan 19, 2024 · f8726af · f8726af
1 parent f3fe547
commit f8726af
Show file tree

Hide file tree

Showing 11 changed files with 98 additions and 64 deletions.
diff --git a/src/@types/socket.types.ts b/src/@types/socket.types.ts
@@ -132,7 +132,7 @@ interface pubDeleteItem {
 }
 
 interface pubMember {
-  memberId: number;
+  token: string;
 }
 
 interface pubGetPathAndItems {

diff --git a/src/api/socket.ts b/src/api/socket.ts
@@ -102,8 +102,7 @@ export const pubUpdateTripItem = (
     body: JSON.stringify(pubUpdateTripItem),
   });
 
-  console.log(pubUpdateTripItem);
-  console.log('펍실행');
+  console.log('데이터', pubUpdateTripItem);
 };
 
 // 여행 날짜별 교통 수단 변경 이벤트 발생시 (01/16 업데이트)
@@ -157,10 +156,9 @@ export const pubDisconnectMember = (pubMember: pubMember, tripId: string) => {
 };
 
 // 여정 편집 페이지 입장 이벤트 발생시(모든 sub 다받음)
-export const pubEnterMember = (pubMember: pubMember, tripId: string) => {
+export const pubEnterMember = (tripId: string) => {
   socketClient.publish({
     destination: `/pub/trips/${tripId}/enterMember`,
-    body: JSON.stringify(pubMember),
   });
 };
 

diff --git a/src/components/Plan/PlanEditItemBox.tsx b/src/components/Plan/PlanEditItemBox.tsx
@@ -59,8 +59,6 @@ const PlanEditItemBox = ({
       visitDate: visitDate,
       tripItemOrder,
     });
-
-    console.log(newData);
   };
 
   useEffect(() => {

diff --git a/src/components/Plan/PlanItem.tsx b/src/components/Plan/PlanItem.tsx
@@ -4,51 +4,60 @@ import { useNavigate } from 'react-router-dom';
 import TripMap from './TripMap';
 import PlanItemBox from './PlanItemBox';
 import PlanEditItemBox from './PlanEditItemBox';
-import { useContext, useEffect, useState } from 'react';
+import { useContext, useEffect, useState, useRef } from 'react';
 import { socketContext } from '@hooks/useSocket';
-import { useRecoilState } from 'recoil';
+import { useRecoilState, useRecoilValue } from 'recoil';
 import { visitDateState } from '@recoil/socket';
 import { pubGetPathAndItems, pubUpdateTransportation } from '@api/socket';
 import { tripIdState } from '@recoil/socket';
-import { useRecoilValue } from 'recoil';
+import { tapState } from '@recoil/plan';
 
 type PlanItemProps = {
   date: string;
   day: string;
+  isMount: boolean;
 };
 
-const PlanItem: React.FC<PlanItemProps> = ({ date, day }) => {
+const PlanItem: React.FC<PlanItemProps> = ({ date, day, isMount }) => {
   const navigate = useNavigate();
   const [isEdit, SetIsEdit] = useState(false);
 
   const tripId = useRecoilValue(tripIdState);
+  const tap = useRecoilValue(tapState);
+
   const [visitDate, setVisitDate] = useRecoilState(visitDateState);
   const { tripItem, tripPath, callBackPub } = useContext(socketContext);
 
   useEffect(() => {
-    setVisitDate({ visitDate: date });
-  }, [date]);
-
-  useEffect(() => {
-    if (visitDate && tripId) {
-      callBackPub(() => pubGetPathAndItems(visitDate, tripId));
+    if (isMount) {
+      setVisitDate({ visitDate: date });
+      if (date && tripId) {
+        callBackPub(() => pubGetPathAndItems({ visitDate: date }, tripId));
+        console.log('pubGetPathAndItems', tap);
+      }
     }
-  }, [visitDate]);
+  }, [tap]);
+
+  // useEffect(() => {
+  //   if (date && tripId) {
+  //     callBackPub(() => pubGetPathAndItems({ visitDate: date }, tripId));
+  //   }
+  // }, [tap]);
 
   const handleEdit = () => {
     SetIsEdit((prev) => !prev);
   };
 
   const handleTranspo = (
     transportation: 'CAR' | 'PUBLIC_TRANSPORTATION',
-    visitDate: string,
+    date: string,
     tripId: string,
   ) => {
     if (transportation !== transpo) {
       callBackPub(() =>
         pubUpdateTransportation(
           {
-            visitDate: visitDate,
+            visitDate: date,
             transportation: transportation,
           },
           tripId,
@@ -59,6 +68,7 @@ const PlanItem: React.FC<PlanItemProps> = ({ date, day }) => {
 
   const transpo = tripItem?.data?.transportation || '';
 
+  // console.log(tripItem?.data?.tripItems.sort((a, b) => a.seqNum - b.seqNum));
   return (
     <>
       {tripPath && <TripMap paths={tripPath.data?.paths || []} />}
@@ -67,11 +77,9 @@ const PlanItem: React.FC<PlanItemProps> = ({ date, day }) => {
         {isEdit ? (
           <div />
         ) : (
-          <div className="flex  items-center justify-center">
+          <div className="flex items-center justify-center">
             <div
-              onClick={() =>
-                handleTranspo('CAR', visitDate?.visitDate || '', tripId || '')
-              }
+              onClick={() => handleTranspo('CAR', date || '', tripId || '')}
               className="flex h-[32px] w-[32px] cursor-pointer items-center justify-center rounded-l-md border border-solid border-gray3">
               <CarIcon
                 size={19}
@@ -80,11 +88,7 @@ const PlanItem: React.FC<PlanItemProps> = ({ date, day }) => {
             </div>
             <div
               onClick={() =>
-                handleTranspo(
-                  'PUBLIC_TRANSPORTATION',
-                  visitDate?.visitDate || '',
-                  tripId || '',
-                )
+                handleTranspo('PUBLIC_TRANSPORTATION', date || '', tripId || '')
               }
               className="pointer-cursor -ml-[1px] flex h-[32px] w-[32px] cursor-pointer items-center justify-center rounded-r-md border border-solid border-gray3">
               <BusIcon
@@ -96,7 +100,6 @@ const PlanItem: React.FC<PlanItemProps> = ({ date, day }) => {
             </div>
           </div>
         )}
-
         <button
           type="button"
           onClick={handleEdit}
@@ -110,7 +113,7 @@ const PlanItem: React.FC<PlanItemProps> = ({ date, day }) => {
           <PlanEditItemBox
             item={tripItem?.data?.tripItems || []}
             day={day}
-            visitDate={visitDate?.visitDate || ''}
+            visitDate={date || ''}
             tripId={tripId || ''}
           />
         ) : (

diff --git a/src/components/Plan/PlanMoveItem.tsx b/src/components/Plan/PlanMoveItem.tsx
@@ -7,6 +7,7 @@ import { useContext } from 'react';
 import { socketContext } from '@hooks/useSocket';
 import { useState, useEffect } from 'react';
 import ToastPopUp from '@components/common/toastpopup/ToastPopUp';
+import { v4 as uuidv4 } from 'uuid';
 
 interface PlanMoveItemProps {
   isCheck: number | null;
@@ -96,7 +97,7 @@ const PlanMoveItem: React.FC<PlanMoveItemProps> = ({
                         {day.map((day, index) => (
                           <Dialog.Close asChild>
                             <button
-                              key={index}
+                              key={uuidv4()}
                               onClick={() => handleMoveItem(date[index])}
                               className="relative flex flex-shrink-0 flex-grow-0 justify-start gap-2">
                               <PaperIcon />

diff --git a/src/components/Plan/PlanSectionTop.tsx b/src/components/Plan/PlanSectionTop.tsx
@@ -7,27 +7,34 @@ import PlanItem from './PlanItem';
 import { socketContext } from '@hooks/useSocket';
 import { useContext } from 'react';
 import { pubEnterMember } from '@api/socket';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useRecoilValue, useRecoilState } from 'recoil';
 import { dayState, dateState } from '@recoil/plan';
 import { tripIdState, memberIdState } from '@recoil/socket';
 import { calculateDayAndDate } from '@utils/utils';
 
 const PlanSectionTop = () => {
   const navigate = useNavigate();
+  const [isMount, setIsMount] = useState(false);
   const tripId = useRecoilValue(tripIdState);
   const pubMember = useRecoilValue(memberIdState);
   const [, setDay] = useRecoilState(dayState);
   const [, setDate] = useRecoilState(dateState);
 
+  console.log(isMount);
+
   if (!pubMember || !tripId) {
     return <div>에러</div>;
   }
 
+  useEffect(() => {
+    setIsMount(true);
+  }, []);
+
   const { callBackPub, tripInfo } = useContext(socketContext);
 
   useEffect(() => {
-    callBackPub(() => pubEnterMember(pubMember, tripId));
+    callBackPub(() => pubEnterMember(tripId));
   }, []);
 
   let DayArr: string[] = [];
@@ -59,7 +66,12 @@ const PlanSectionTop = () => {
       <Tab
         lists={DayArr}
         contents={DateArr.map((date, index) => (
-          <PlanItem key={date} date={date} day={DayArr[index]} />
+          <PlanItem
+            key={date}
+            date={date}
+            day={DayArr[index]}
+            isMount={isMount}
+          />
         ))}
       />
     </div>

diff --git a/src/components/common/tab/Tab.tsx b/src/components/common/tab/Tab.tsx
@@ -1,37 +1,53 @@
 import * as Tabs from '@radix-ui/react-tabs';
+import { useRecoilState } from 'recoil';
+import { tapState } from '@recoil/plan';
 
 interface TabProps {
   lists: string[];
   contents: React.ReactNode[];
 }
 
-const Tab = ({ lists, contents }: TabProps) => (
-  <Tabs.Root className="flex w-full flex-col" defaultValue="tab0">
-    <Tabs.List
-      className="border-b-1 no-scrollbar flex shrink-0 overflow-x-scroll"
-      aria-label="Manage your account">
-      {lists.map((list, index) => {
+const Tab = ({ lists, contents }: TabProps) => {
+  const [, setTapState] = useRecoilState(tapState);
+
+  const handleTabChange = (value: string) => {
+    const tabIndex = value.replace('tab', '');
+    if (tabIndex !== '') {
+      setTapState(tabIndex);
+    }
+  };
+
+  return (
+    <Tabs.Root
+      className="flex w-full flex-col"
+      defaultValue="tab0"
+      onValueChange={handleTabChange}>
+      <Tabs.List
+        className="border-b-1 no-scrollbar flex shrink-0 overflow-x-scroll"
+        aria-label="Manage your account">
+        {lists.map((list, index) => {
+          return (
+            <Tabs.Trigger
+              key={index}
+              className="headline1 flex flex-1 cursor-pointer select-none items-center justify-center border-b-2 border-solid border-gray2 py-[8px] leading-none text-gray4 outline-none data-[state=active]:border-b-2 data-[state=active]:border-solid data-[state=active]:border-black data-[state=active]:text-black"
+              value={`tab${index}`}>
+              {list}
+            </Tabs.Trigger>
+          );
+        })}
+      </Tabs.List>
+      {contents.map((content, index) => {
         return (
-          <Tabs.Trigger
+          <Tabs.Content
             key={index}
-            className="headline1 flex flex-1 cursor-pointer select-none items-center justify-center border-b-2 border-solid border-gray2 py-[8px] leading-none text-gray4 outline-none data-[state=active]:border-b-2 data-[state=active]:border-solid data-[state=active]:border-black data-[state=active]:text-black"
+            className="grow py-5 outline-none"
             value={`tab${index}`}>
-            {list}
-          </Tabs.Trigger>
+            {content}
+          </Tabs.Content>
         );
       })}
-    </Tabs.List>
-    {contents.map((content, index) => {
-      return (
-        <Tabs.Content
-          key={index}
-          className="grow py-5 outline-none"
-          value={`tab${index}`}>
-          {content}
-        </Tabs.Content>
-      );
-    })}
-  </Tabs.Root>
-);
+    </Tabs.Root>
+  );
+};
 
 export default Tab;
diff --git a/src/hooks/useSocket.ts b/src/hooks/useSocket.ts
@@ -83,6 +83,7 @@ export const useSocket = (tripId: string, visitDate: string) => {
 
   useEffect(() => {
     socketConnect();
+    console.log('소켓연결');
 
     return () => {
       socketClient.deactivate();

diff --git a/src/recoil/plan.ts b/src/recoil/plan.ts
@@ -9,3 +9,8 @@ export const dateState = atom<string[]>({
   key: 'dateState',
   default: [''],
 });
+
+export const tapState = atom<string>({
+  key: 'tapState',
+  default: '',
+});
diff --git a/src/recoil/socket.ts b/src/recoil/socket.ts
@@ -10,7 +10,7 @@ export const visitDateState = atom<{ visitDate: string } | null>({
   default: { visitDate: '2024-01-03' },
 });
 
-export const memberIdState = atom<{ memberId: number } | null>({
+export const memberIdState = atom<{ token: number | null }>({
   key: 'memberIdState',
-  default: { memberId: 1 },
+  default: { token: null },
 });
diff --git a/src/router/socketRouter.tsx b/src/router/socketRouter.tsx
@@ -19,9 +19,9 @@ const SocketRoutes = () => {
   return (
     <socketContext.Provider value={useSocket(tripId, visitDate?.visitDate)}>
       <Routes>
-        <Route path="/plan" element={<PlanTrip />} />
-        <Route path="/plan/place" element={<PlanAddPlace />} />
-        <Route path="/plan/place/search" element={<PlanPlaceSearch />} />
+        <Route path="/" element={<PlanTrip />} />
+        <Route path="/place" element={<PlanAddPlace />} />
+        <Route path="/place/search" element={<PlanPlaceSearch />} />
       </Routes>
     </socketContext.Provider>
   );
@@ -33,7 +33,7 @@ const SocketRouter = () => {
       <Route path="/trip" element={<MainLayout />}>
         <Route path=":id" element={<Trip />} />
         <Route path=":id/add" element={<AddOurList />} />
-        <Route path=":id/*" element={<SocketRoutes />} />
+        <Route path=":id/plan/*" element={<SocketRoutes />} />
       </Route>
     </Routes>
   );