From f8726af836b14de0a7e26df4f5c479cbede3baec Mon Sep 17 00:00:00 2001 From: Hojin Date: Fri, 19 Jan 2024 17:16:01 +0900 Subject: [PATCH] =?UTF-8?q?Feat:=20=EC=86=8C=EC=BC=93=ED=86=B5=EC=8B=A0=20?= =?UTF-8?q?=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/@types/socket.types.ts | 2 +- src/api/socket.ts | 6 +-- src/components/Plan/PlanEditItemBox.tsx | 2 - src/components/Plan/PlanItem.tsx | 51 ++++++++++---------- src/components/Plan/PlanMoveItem.tsx | 3 +- src/components/Plan/PlanSectionTop.tsx | 18 +++++-- src/components/common/tab/Tab.tsx | 62 ++++++++++++++++--------- src/hooks/useSocket.ts | 1 + src/recoil/plan.ts | 5 ++ src/recoil/socket.ts | 4 +- src/router/socketRouter.tsx | 8 ++-- 11 files changed, 98 insertions(+), 64 deletions(-) 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/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/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/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/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 = () => { }> } /> } /> - } /> + } /> );