Feat: 권한확인 커스텀훅 구현

src/@types/socket.types.ts

@@ -132,7 +132,7 @@ interface pubDeleteItem {
 }
 
 interface pubMember {
-  memberId: number;
+  token: string;
 }
 
 interface pubGetPathAndItems {

src/@types/trips.types.ts

@@ -18,3 +18,13 @@ interface MyTripType {
   area: string;
   subArea: string;
 }
+
+interface AuthorityType {
+  status: number;
+  message: string;
+  data: {
+    memberId: number;
+    tripAuthority: string;
+    TripId: number;
+  };
+}

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),
   });
 };
 

src/api/trips.ts

@@ -84,3 +84,9 @@ export const getTripsMembers = async (tripId: number) => {
   const res = await client.get(`trips/${tripId}/members`);
   return res;
 };
+
+// 편집권한 조회
+export const getTripsAuthority = async (tripId: string) => {
+  const res = await authClient.get(`trips/${tripId}/authority`);
+  return res;
+};

src/components/Plan/PlanEditItemBox.tsx

@@ -59,8 +59,6 @@ const PlanEditItemBox = ({
       visitDate: visitDate,
       tripItemOrder,
     });
-
-    console.log(newData);
   };
 
   useEffect(() => {

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 || ''}
           />
         ) : (

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 />

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>

src/components/Trip/TripSectionTop.tsx

@@ -5,9 +5,11 @@ 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();
 
   return (
     <div className="min-h-screen">

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;

src/hooks/useGetTripsAuthority.ts

@@ -0,0 +1,39 @@
+import { useQuery } from '@tanstack/react-query';
+import { getTripsAuthority } from '@api/trips';
+
+import { useParams } from 'react-router-dom';
+
+type useGetTripsAuthorityReturn = {
+  tripAuthority: string | null;
+  memberId: number | null;
+  TripId: number | null;
+};
+
+export const useGetTripsAuthority = (): useGetTripsAuthorityReturn => {
+  const { id } = useParams();
+
+  const defaultReturn = {
+    tripAuthority: null,
+    memberId: null,
+    TripId: null,
+  };
+
+  if (!id) {
+    return defaultReturn;
+  }
+  const { data, isLoading, isError } = useQuery({
+    queryKey: ['getTripsAuthority', id],
+    queryFn: () => getTripsAuthority(id),
+    enabled: !!id,
+  });
+
+  const tripAuthority = data?.data.data.tripAuthority;
+  const memberId = data?.data.data.memberId;
+  const TripId = data?.data.data.TripId;
+
+  if (isLoading || isError) {
+    return defaultReturn;
+  }
+
+  return { tripAuthority, memberId, TripId };
+};

src/hooks/useSocket.ts

@@ -83,6 +83,7 @@ export const useSocket = (tripId: string, visitDate: string) => {
 
   useEffect(() => {
     socketConnect();
+    console.log('소켓연결');
 
     return () => {
       socketClient.deactivate();