Fix: 슬라이더 크기고정

WePlanPlans · Jan 23, 2024 · b638a60 · b638a60
1 parent 5f1130d
commit b638a60
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 1 deletion.
diff --git a/src/@types/service.ts b/src/@types/service.ts
@@ -97,12 +97,26 @@ export type subBudgetRes = {
   } | null;
 };
 
+export type subCursorRes = {
+  status: number;
+  message: string;
+  data: {
+    tripId: string;
+    visitDate: string;
+    memberId: number;
+    name: string;
+    x: number;
+    y: number;
+  } | null;
+};
+
 export type SocketContextType = {
   tripInfo: subInfoRes | null;
   tripItem: subItemRes | null;
   tripPath: subPathRes | null;
   tripMember: subMemberRes | null;
   tripBudget: subBudgetRes | null;
+  tripCursor: subCursorRes | null;
   tripId: string;
   callBackPub: (callback: () => void) => void;
 };

diff --git a/src/@types/socket.types.ts b/src/@types/socket.types.ts
@@ -82,6 +82,19 @@ type subBudgetMessage = (response: {
   };
 }) => void;
 
+type subCursorMessage = (response: {
+  status: number;
+  message: string;
+  data: {
+    tripId: string;
+    visitDate: string;
+    memberId: number;
+    name: string;
+    x: number;
+    y: number;
+  };
+}) => void;
+
 interface pubInfo {
   startDate: string;
   endDate: string;
@@ -138,3 +151,10 @@ interface pubGetPathAndItems {
 interface pubUpdateBudget {
   budget: number;
 }
+
+interface pubCursor {
+  token: string;
+  visitDate: string;
+  x: number;
+  y: number;
+}
diff --git a/src/api/socket.ts b/src/api/socket.ts
@@ -61,6 +61,18 @@ export const subBudget = (
   });
 };
 
+// 커서 공유
+export const subCursor = (
+  tripId: string,
+  visitDate: string,
+  subCursorMessage: subCursorMessage,
+) => {
+  socketClient.subscribe(`/sub/${tripId}/cursor/${visitDate}`, (message) => {
+    const res = JSON.parse(message.body);
+    subCursorMessage(res);
+  });
+};
+
 // 소켓 전송
 // 여정 기본 정보 변경 이벤트 발생시
 export const pubInfo = (pubInfo: pubInfo, tripId: string) => {
@@ -187,3 +199,12 @@ export const pubUpdateBudget = (
     body: JSON.stringify(pubUpdateBudget),
   });
 };
+
+// 커서공유
+export const pubCursor = (pubCursor: pubCursor, tripId: string) => {
+  socketClient.publish({
+    destination: `/pub/trips/${tripId}/cursor`,
+    body: JSON.stringify(pubCursor),
+  });
+  console.log(pubCursor);
+};
diff --git a/src/components/DetailSectionTop/DetailAddSchedule.tsx b/src/components/DetailSectionTop/DetailAddSchedule.tsx
@@ -165,7 +165,7 @@ const DetailAddSchedule = () => {
                                       key={index}
                                       className="flex w-[99px] items-start">
                                       <button
-                                        className={`relative flex h-10 flex-shrink-0 flex-grow-0 items-center justify-center gap-1 rounded-[168px] border-[1.25px] border-solid ${
+                                        className={`relative flex h-10 w-[99px] flex-shrink-0 flex-grow-0 items-center justify-center gap-1 rounded-[168px] border-[1.25px] border-solid ${
                                           index === selectedButton
                                             ? 'border-main2'
                                             : 'border-gray3'

diff --git a/src/components/Plan/PlanSectionTop.tsx b/src/components/Plan/PlanSectionTop.tsx
@@ -10,6 +10,7 @@ import {
   pubEnterMember,
   pubConnectMember,
   pubDisconnectMember,
+  pubCursor,
 } from '@api/socket';
 import { useEffect } from 'react';
 import { useRecoilState } from 'recoil';
@@ -33,6 +34,7 @@ const PlanSectionTop = () => {
     tripPath,
     tripMember,
     tripBudget,
+    tripCursor,
   } = useContext(socketContext);
   const [, setVisitDate] = useRecoilState(visitDateState);
   const { startDate, endDate } = useGetTrips();
@@ -45,6 +47,8 @@ const PlanSectionTop = () => {
     ({ DayArr, DateArr } = calculateDayAndDate(startDate, endDate));
   }
 
+  console.log(tripCursor);
+
   useEffect(() => {
     if (startDate) {
       setVisitDate({ visitDate: startDate });
@@ -80,6 +84,21 @@ const PlanSectionTop = () => {
     }
   }, [isEnter]);
 
+  // useEffect(() => {
+  //   callBackPub(() =>
+  //     pubCursor(
+  //       {
+  //         token:
+  //           'eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiI4MCIsImF1dGgiOiJST0xFX1VTRVIiLCJleHAiOjE3MDU5OTQ4NDJ9.nu7XavOKvKaFYJB77bmPkkYV3rLvfra2zGxa9d9kArwS235CiKi_5UTzm4HqanUIFonhXmS0yxFBrjchlpPFQg',
+  //         visitDate: '2024-02-07',
+  //         x: 123.213,
+  //         y: 92.531,
+  //       },
+  //       tripId,
+  //     ),
+  //   );
+  // }, []);
+
   return (
     <div className="min-h-screen">
       <BackBox

diff --git a/src/hooks/useSocket.ts b/src/hooks/useSocket.ts
@@ -5,13 +5,15 @@ import {
   subPath,
   subMember,
   subBudget,
+  subCursor,
 } from '@api/socket';
 import {
   subInfoRes,
   subItemRes,
   subPathRes,
   subMemberRes,
   subBudgetRes,
+  subCursorRes,
   SocketContextType,
 } from '@/@types/service';
 import { createContext } from 'react';
@@ -26,6 +28,7 @@ export const socketContext = createContext<SocketContextType>({
   tripPath: null,
   tripMember: null,
   tripBudget: null,
+  tripCursor: null,
   tripId: '',
   callBackPub: () => {},
 });
@@ -40,6 +43,8 @@ export const useSocket = () => {
   const [tripPath, setTripPath] = useState<subPathRes | null>(null);
   const [tripMember, setTripMember] = useState<subMemberRes | null>(null);
   const [tripBudget, setTripBudget] = useState<subBudgetRes | null>(null);
+  const [tripCursor, setTripCursor] = useState<subCursorRes | null>(null);
+
   const [socketCallback, setSocketCallback] = useState<(() => void) | null>(
     null,
   );
@@ -80,6 +85,12 @@ export const useSocket = () => {
         }
       });
 
+      subCursor(tripId, visitDate, (res) => {
+        if (res) {
+          setTripCursor(res);
+        }
+      });
+
       if (socketCallback) {
         socketCallback();
       }
@@ -104,6 +115,7 @@ export const useSocket = () => {
     tripPath,
     tripMember,
     tripBudget,
+    tripCursor,
     tripId,
     callBackPub,
   };