diff --git a/src/@types/socket.types.ts b/src/@types/socket.types.ts index 9434e981..757e3b28 100644 --- 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/@types/trips.types.ts b/src/@types/trips.types.ts index fb708de8..9aa18b2d 100644 --- a/src/@types/trips.types.ts +++ b/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; + }; +} diff --git a/src/api/socket.ts b/src/api/socket.ts index 2be1d259..000830cf 100644 --- 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/api/trips.ts b/src/api/trips.ts index be019a7f..f327e7a3 100644 --- a/src/api/trips.ts +++ b/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; +}; diff --git a/src/components/Plan/PlanEditItemBox.tsx b/src/components/Plan/PlanEditItemBox.tsx index ae5f4873..a3987601 100644 --- 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 index c27cf354..49c410f4 100644 --- a/src/components/Plan/PlanItem.tsx +++ b/src/components/Plan/PlanItem.tsx @@ -4,36 +4,45 @@ 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 = ({ date, day }) => { +const PlanItem: React.FC = ({ 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); @@ -41,14 +50,14 @@ const PlanItem: React.FC = ({ date, day }) => { 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 = ({ date, day }) => { const transpo = tripItem?.data?.transportation || ''; + // console.log(tripItem?.data?.tripItems.sort((a, b) => a.seqNum - b.seqNum)); return ( <> {tripPath && } @@ -67,11 +77,9 @@ const PlanItem: React.FC = ({ date, day }) => { {isEdit ? (
) : ( -
+
- 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"> = ({ date, day }) => {
- 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"> = ({ date, day }) => {
)} -
diff --git a/src/components/Trip/TripSectionTop.tsx b/src/components/Trip/TripSectionTop.tsx index 82e03c8e..4f1062eb 100644 --- a/src/components/Trip/TripSectionTop.tsx +++ b/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 (
diff --git a/src/components/common/tab/Tab.tsx b/src/components/common/tab/Tab.tsx index 3ae8f972..de746353 100644 --- 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) => ( - - - {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 ( + + + {lists.map((list, index) => { + return ( + + {list} + + ); + })} + + {contents.map((content, index) => { return ( - - {list} - + {content} + ); })} - - {contents.map((content, index) => { - return ( - - {content} - - ); - })} - -); + + ); +}; export default Tab; diff --git a/src/hooks/useGetTripsAuthority.ts b/src/hooks/useGetTripsAuthority.ts new file mode 100644 index 00000000..efef5695 --- /dev/null +++ b/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 }; +}; diff --git a/src/hooks/useSocket.ts b/src/hooks/useSocket.ts index 50c9e2d6..78928526 100644 --- 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 index c938efaa..42e69971 100644 --- a/src/recoil/plan.ts +++ b/src/recoil/plan.ts @@ -9,3 +9,8 @@ export const dateState = atom({ key: 'dateState', default: [''], }); + +export const tapState = atom({ + key: 'tapState', + default: '', +}); diff --git a/src/recoil/socket.ts b/src/recoil/socket.ts index d722c733..ab7bb76b 100644 --- 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 index a48c16dc..e679617b 100644 --- a/src/router/socketRouter.tsx +++ b/src/router/socketRouter.tsx @@ -19,9 +19,9 @@ const SocketRoutes = () => { return ( - } /> - } /> - } /> + } /> + } /> + } /> ); @@ -33,7 +33,7 @@ const SocketRouter = () => { }> } /> } /> - } /> + } /> );