From b638a605ad2ec82cb4fc811793faf685905c7076 Mon Sep 17 00:00:00 2001
From: Hojin <wkdghwls0623@gmail.com>
Date: Tue, 23 Jan 2024 17:28:36 +0900
Subject: [PATCH 01/11] =?UTF-8?q?Fix:=20=EC=8A=AC=EB=9D=BC=EC=9D=B4?=
 =?UTF-8?q?=EB=8D=94=20=ED=81=AC=EA=B8=B0=EA=B3=A0=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/@types/service.ts                         | 14 +++++++++++++
 src/@types/socket.types.ts                    | 20 ++++++++++++++++++
 src/api/socket.ts                             | 21 +++++++++++++++++++
 .../DetailSectionTop/DetailAddSchedule.tsx    |  2 +-
 src/components/Plan/PlanSectionTop.tsx        | 19 +++++++++++++++++
 src/hooks/useSocket.ts                        | 12 +++++++++++
 6 files changed, 87 insertions(+), 1 deletion(-)

diff --git a/src/@types/service.ts b/src/@types/service.ts
index bae375b2..b0fe82ae 100644
--- 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
index a8167cc8..227a7467 100644
--- 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
index c5c437b4..93bc09d3 100644
--- 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
index 22f35eb5..fbbc8361 100644
--- 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
index fada423c..6c03a1f7 100644
--- 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
index d0eeef0f..3de7e43f 100644
--- a/src/hooks/useSocket.ts
+++ b/src/hooks/useSocket.ts
@@ -5,6 +5,7 @@ import {
   subPath,
   subMember,
   subBudget,
+  subCursor,
 } from '@api/socket';
 import {
   subInfoRes,
@@ -12,6 +13,7 @@ import {
   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,
   };

From c5b93a4864b36f0df19471d9b89b998788bd4e08 Mon Sep 17 00:00:00 2001
From: Hojin <wkdghwls0623@gmail.com>
Date: Wed, 24 Jan 2024 16:49:09 +0900
Subject: [PATCH 02/11] =?UTF-8?q?feat:=20=EC=BB=A4=EC=84=9C=EA=B3=B5?=
 =?UTF-8?q?=EC=9C=A0=20=ED=85=8C=EC=8A=A4=ED=8A=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                            |  1 +
 pnpm-lock.yaml                          | 11 +++
 src/api/socket.ts                       |  3 +-
 src/components/Plan/PlanCursor.tsx      | 94 +++++++++++++++++++++++++
 src/components/Plan/PlanItem.tsx        |  6 +-
 src/components/Plan/PlanOtherCursor.tsx | 63 +++++++++++++++++
 src/components/Plan/PlanSectionTop.tsx  | 19 -----
 src/hooks/useSocket.ts                  | 27 ++++---
 8 files changed, 195 insertions(+), 29 deletions(-)
 create mode 100644 src/components/Plan/PlanCursor.tsx
 create mode 100644 src/components/Plan/PlanOtherCursor.tsx

diff --git a/package.json b/package.json
index 10b3be84..611f6d99 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "react-beautiful-dnd": "^13.1.1",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.49.2",
+    "react-icons": "^5.0.1",
     "react-infinite-scroller": "^1.2.6",
     "react-kakao-maps-sdk": "^1.1.24",
     "react-modal": "^3.16.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0720f243..71bfd5fe 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -77,6 +77,9 @@ dependencies:
   react-hook-form:
     specifier: ^7.49.2
     version: 7.49.3(react@18.2.0)
+  react-icons:
+    specifier: ^5.0.1
+    version: 5.0.1(react@18.2.0)
   react-infinite-scroller:
     specifier: ^1.2.6
     version: 1.2.6(react@18.2.0)
@@ -5145,6 +5148,14 @@ packages:
       react: 18.2.0
     dev: false
 
+  /react-icons@5.0.1(react@18.2.0):
+    resolution: {integrity: sha512-WqLZJ4bLzlhmsvme6iFdgO8gfZP17rfjYEJ2m9RsZjZ+cc4k1hTzknEz63YS1MeT50kVzoa1Nz36f4BEx+Wigw==}
+    peerDependencies:
+      react: '*'
+    dependencies:
+      react: 18.2.0
+    dev: false
+
   /react-infinite-scroller@1.2.6(react@18.2.0):
     resolution: {integrity: sha512-mGdMyOD00YArJ1S1F3TVU9y4fGSfVVl6p5gh/Vt4u99CJOptfVu/q5V/Wlle72TMgYlBwIhbxK5wF0C/R33PXQ==}
     peerDependencies:
diff --git a/src/api/socket.ts b/src/api/socket.ts
index 93bc09d3..ff4101db 100644
--- a/src/api/socket.ts
+++ b/src/api/socket.ts
@@ -154,6 +154,7 @@ export const pubConnectMember = (pubMember: pubMember, tripId: string) => {
     destination: `/pub/trips/${tripId}/connectMember`,
     body: JSON.stringify(pubMember),
   });
+  console.log('입장발생');
 };
 
 // 멤버 여정 페이지 퇴장 이벤트 발생시
@@ -162,6 +163,7 @@ export const pubDisconnectMember = (pubMember: pubMember, tripId: string) => {
     destination: `/pub/trips/${tripId}/disconnectMember`,
     body: JSON.stringify(pubMember),
   });
+  console.log('퇴장발생');
 };
 
 // 여정 편집 페이지 입장 이벤트 발생시(모든 sub 다받음)
@@ -206,5 +208,4 @@ export const pubCursor = (pubCursor: pubCursor, tripId: string) => {
     destination: `/pub/trips/${tripId}/cursor`,
     body: JSON.stringify(pubCursor),
   });
-  console.log(pubCursor);
 };
diff --git a/src/components/Plan/PlanCursor.tsx b/src/components/Plan/PlanCursor.tsx
new file mode 100644
index 00000000..48d10a01
--- /dev/null
+++ b/src/components/Plan/PlanCursor.tsx
@@ -0,0 +1,94 @@
+import { useEffect, useState, useContext } from 'react';
+import { BsFillCursorFill } from 'react-icons/bs';
+import { pubCursor } from '@api/socket';
+import { socketContext } from '@hooks/useSocket';
+import { useGetTripsAuthority } from '@hooks/useGetTripsAuthority';
+
+type TripCursorData = {
+  memberId: number;
+  x: number;
+  y: number;
+  name: string;
+};
+
+type PlanCursorProps = {
+  date: string;
+};
+
+const PlanCursor = ({ date }: PlanCursorProps) => {
+  const token = localStorage.getItem('accessToken');
+  const { memberId } = useGetTripsAuthority();
+  const { callBackPub, tripId, tripMember } = useContext(socketContext);
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+
+  const myName = tripMember?.data?.tripMembers.find(
+    (member) => member.memberId === memberId,
+  );
+
+  useEffect(() => {
+    const handleMouseMove = (e: MouseEvent) => {
+      setPosition({ x: e.clientX, y: e.clientY });
+    };
+    const cursorStyle = (style: string): void => {
+      document.querySelectorAll('*').forEach((el) => {
+        const element = el as HTMLElement;
+        element.style.cursor = style;
+      });
+    };
+    cursorStyle('none');
+    document.addEventListener('mousemove', handleMouseMove);
+    return () => {
+      cursorStyle('auto');
+      document.removeEventListener('mousemove', handleMouseMove);
+    };
+  }, []);
+
+  // useEffect(() => {
+  //   if (token && position && myName && date && tripId) {
+  //     const timeoutId = setTimeout(() => {
+  //       callBackPub(() =>
+  //         pubCursor(
+  //           {
+  //             token: token,
+  //             visitDate: date,
+  //             x: position.x,
+  //             y: position.y,
+  //           },
+  //           tripId,
+  //         ),
+  //       );
+  //     }, 1000);
+
+  //     return () => clearTimeout(timeoutId);
+  //   }
+  // }, [position]);
+
+  useEffect(() => {
+    if (token && position && myName && date && tripId) {
+      callBackPub(() =>
+        pubCursor(
+          {
+            token: token,
+            visitDate: date,
+            x: position.x,
+            y: position.y,
+          },
+          tripId,
+        ),
+      );
+    }
+  }, [position]);
+
+  return (
+    <div
+      className="pointer-events-none fixed z-50 w-full -translate-x-2 -translate-y-2 transform"
+      style={{ left: `${position.x}px`, top: `${position.y}px` }}>
+      <BsFillCursorFill size={15} color="blue" className="scale-x-[-1]" />
+      <div className="text-bold text-blue absolute left-1 top-2 p-1 text-center text-xs">
+        {myName?.name}
+      </div>
+    </div>
+  );
+};
+
+export default PlanCursor;
diff --git a/src/components/Plan/PlanItem.tsx b/src/components/Plan/PlanItem.tsx
index 56def8f7..51ab0c63 100644
--- a/src/components/Plan/PlanItem.tsx
+++ b/src/components/Plan/PlanItem.tsx
@@ -11,6 +11,8 @@ import { visitDateState, isEditState } from '@recoil/socket';
 import { pubGetPathAndItems, pubUpdateTransportation } from '@api/socket';
 import { tapState } from '@recoil/plan';
 import { useGetTripsAuthority } from '@hooks/useGetTripsAuthority';
+import PlanCursor from './PlanCursor';
+import PlanOtherCursor from './PlanOtherCursor';
 
 type PlanItemProps = {
   date: string;
@@ -62,8 +64,10 @@ const PlanItem: React.FC<PlanItemProps> = ({ date, day }) => {
 
   return (
     <>
-      {tripPath && <TripMap paths={tripPath.data?.paths || []} />}
+      <PlanCursor date={date} />
+      <PlanOtherCursor />
 
+      {tripPath && <TripMap paths={tripPath.data?.paths || []} />}
       <div className="mb-[31px] mt-[31px] flex items-center justify-between">
         {tripAuthority !== 'WRITE' || isEdit ? (
           <div />
diff --git a/src/components/Plan/PlanOtherCursor.tsx b/src/components/Plan/PlanOtherCursor.tsx
new file mode 100644
index 00000000..d8fa5090
--- /dev/null
+++ b/src/components/Plan/PlanOtherCursor.tsx
@@ -0,0 +1,63 @@
+import { useEffect, useState, useContext } from 'react';
+import { BsFillCursorFill } from 'react-icons/bs';
+import { pubCursor } from '@api/socket';
+import { socketContext } from '@hooks/useSocket';
+import { useGetTripsAuthority } from '@hooks/useGetTripsAuthority';
+
+type TripCursorData = {
+  memberId: number;
+  x: number;
+  y: number;
+  name: string;
+};
+
+type PlanCursorProps = {
+  date: string;
+};
+
+const PlanOtherCursor = () => {
+  const { memberId } = useGetTripsAuthority();
+  const { tripCursor } = useContext(socketContext);
+  const [otherCursors, setOtherCursors] = useState<TripCursorData[]>([]);
+
+  console.log(otherCursors);
+  useEffect(() => {
+    if (
+      tripCursor &&
+      tripCursor.data &&
+      tripCursor.data.memberId !== memberId
+    ) {
+      setOtherCursors((prevCursors) => {
+        const existingCursorIndex = prevCursors.findIndex(
+          (cursor) => cursor.memberId === tripCursor.data!.memberId,
+        );
+
+        if (existingCursorIndex !== -1) {
+          const updatedCursors = [...prevCursors];
+          updatedCursors[existingCursorIndex] = tripCursor.data!;
+          return updatedCursors;
+        } else {
+          return [...prevCursors, tripCursor.data!];
+        }
+      });
+    }
+  }, [tripCursor, memberId]);
+
+  return (
+    <>
+      {otherCursors.map((cursor, index) => (
+        <div
+          key={index}
+          className="pointer-events-none fixed z-50 w-full -translate-x-2 -translate-y-2 transform"
+          style={{ left: `${cursor.x}px`, top: `${cursor.y}px` }}>
+          <BsFillCursorFill size={15} color="red" className="scale-x-[-1]" />
+          <div className="text-bold absolute left-1 top-2 p-1 text-center text-xs text-red">
+            {cursor.name}
+          </div>
+        </div>
+      ))}
+    </>
+  );
+};
+
+export default PlanOtherCursor;
diff --git a/src/components/Plan/PlanSectionTop.tsx b/src/components/Plan/PlanSectionTop.tsx
index 6c03a1f7..fada423c 100644
--- a/src/components/Plan/PlanSectionTop.tsx
+++ b/src/components/Plan/PlanSectionTop.tsx
@@ -10,7 +10,6 @@ import {
   pubEnterMember,
   pubConnectMember,
   pubDisconnectMember,
-  pubCursor,
 } from '@api/socket';
 import { useEffect } from 'react';
 import { useRecoilState } from 'recoil';
@@ -34,7 +33,6 @@ const PlanSectionTop = () => {
     tripPath,
     tripMember,
     tripBudget,
-    tripCursor,
   } = useContext(socketContext);
   const [, setVisitDate] = useRecoilState(visitDateState);
   const { startDate, endDate } = useGetTrips();
@@ -47,8 +45,6 @@ const PlanSectionTop = () => {
     ({ DayArr, DateArr } = calculateDayAndDate(startDate, endDate));
   }
 
-  console.log(tripCursor);
-
   useEffect(() => {
     if (startDate) {
       setVisitDate({ visitDate: startDate });
@@ -84,21 +80,6 @@ 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
index 3de7e43f..e39c8b10 100644
--- a/src/hooks/useSocket.ts
+++ b/src/hooks/useSocket.ts
@@ -17,7 +17,7 @@ import {
   SocketContextType,
 } from '@/@types/service';
 import { createContext } from 'react';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { useParams } from 'react-router-dom';
 import { useRecoilValue } from 'recoil';
 import { visitDateState } from '@recoil/socket';
@@ -45,14 +45,15 @@ export const useSocket = () => {
   const [tripBudget, setTripBudget] = useState<subBudgetRes | null>(null);
   const [tripCursor, setTripCursor] = useState<subCursorRes | null>(null);
 
-  const [socketCallback, setSocketCallback] = useState<(() => void) | null>(
-    null,
-  );
+  const socketCallbackRef = useRef<(() => void) | null>(null);
 
   const callBackPub = (callback: () => void): void => {
-    setSocketCallback(() => callback);
+    // socketCallbackRef에 새로운 콜백을 할당
+    socketCallbackRef.current = callback;
   };
 
+  console.log(socketCallbackRef.current);
+
   const socketConnect = (tripId: string, visitDate: string) => {
     socketClient.onConnect = () => {
       subInfo(tripId, (res) => {
@@ -91,8 +92,8 @@ export const useSocket = () => {
         }
       });
 
-      if (socketCallback) {
-        socketCallback();
+      if (socketCallbackRef.current) {
+        socketCallbackRef.current();
       }
     };
 
@@ -103,11 +104,13 @@ export const useSocket = () => {
     if (tripId && visitDate) {
       socketConnect(tripId, visitDate.visitDate);
     }
+    console.log('소켓연결');
 
     return () => {
       socketClient.deactivate();
+      console.log('소켓해제');
     };
-  }, [tripId, visitDate, socketCallback]);
+  }, [tripId, visitDate]);
 
   return {
     tripInfo,
@@ -120,3 +123,11 @@ export const useSocket = () => {
     callBackPub,
   };
 };
+
+// const [socketCallback, setSocketCallback] = useState<(() => void) | null>(
+//   null,
+// );
+
+// const callBackPub = (callback: () => void): void => {
+//   setSocketCallback(() => callback);
+// };

From ccaaff37eca874c55c7f6ee3d69bfa5ee106d067 Mon Sep 17 00:00:00 2001
From: Hojin <wkdghwls0623@gmail.com>
Date: Wed, 24 Jan 2024 23:38:31 +0900
Subject: [PATCH 03/11] =?UTF-8?q?Chore:=20pull=EC=A0=84=20=EC=BB=A4?=
 =?UTF-8?q?=EB=B0=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Plan/PlanItem.tsx        |  7 +++---
 src/components/Plan/PlanOtherCursor.tsx |  3 +--
 src/components/Plan/PlanSectionTop.tsx  |  1 +
 src/hooks/useSocket.ts                  | 31 ++++++++++++-------------
 4 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/src/components/Plan/PlanItem.tsx b/src/components/Plan/PlanItem.tsx
index 51ab0c63..33c6e23b 100644
--- a/src/components/Plan/PlanItem.tsx
+++ b/src/components/Plan/PlanItem.tsx
@@ -26,7 +26,8 @@ const PlanItem: React.FC<PlanItemProps> = ({ date, day }) => {
 
   const tap = useRecoilValue(tapState);
   const [, setVisitDate] = useRecoilState(visitDateState);
-  const { tripItem, tripPath, callBackPub, tripId } = useContext(socketContext);
+  const { tripItem, tripPath, callBackPub, tripId, tripCursor } =
+    useContext(socketContext);
 
   useEffect(() => {
     if (tap) {
@@ -64,8 +65,8 @@ const PlanItem: React.FC<PlanItemProps> = ({ date, day }) => {
 
   return (
     <>
-      <PlanCursor date={date} />
-      <PlanOtherCursor />
+      {/* <PlanCursor date={date} />
+      <PlanOtherCursor /> */}
 
       {tripPath && <TripMap paths={tripPath.data?.paths || []} />}
       <div className="mb-[31px] mt-[31px] flex items-center justify-between">
diff --git a/src/components/Plan/PlanOtherCursor.tsx b/src/components/Plan/PlanOtherCursor.tsx
index d8fa5090..fe98bb05 100644
--- a/src/components/Plan/PlanOtherCursor.tsx
+++ b/src/components/Plan/PlanOtherCursor.tsx
@@ -17,10 +17,9 @@ type PlanCursorProps = {
 
 const PlanOtherCursor = () => {
   const { memberId } = useGetTripsAuthority();
-  const { tripCursor } = useContext(socketContext);
+  const { tripCursor, tripMember } = useContext(socketContext);
   const [otherCursors, setOtherCursors] = useState<TripCursorData[]>([]);
 
-  console.log(otherCursors);
   useEffect(() => {
     if (
       tripCursor &&
diff --git a/src/components/Plan/PlanSectionTop.tsx b/src/components/Plan/PlanSectionTop.tsx
index fada423c..95e0e44d 100644
--- a/src/components/Plan/PlanSectionTop.tsx
+++ b/src/components/Plan/PlanSectionTop.tsx
@@ -65,6 +65,7 @@ const PlanSectionTop = () => {
 
   useEffect(() => {
     if (isEnter) {
+      console.log('실행');
       const accessToken = getItem('accessToken');
       if (accessToken) {
         callBackPub(() => {
diff --git a/src/hooks/useSocket.ts b/src/hooks/useSocket.ts
index e39c8b10..2c252273 100644
--- a/src/hooks/useSocket.ts
+++ b/src/hooks/useSocket.ts
@@ -45,15 +45,21 @@ export const useSocket = () => {
   const [tripBudget, setTripBudget] = useState<subBudgetRes | null>(null);
   const [tripCursor, setTripCursor] = useState<subCursorRes | null>(null);
 
-  const socketCallbackRef = useRef<(() => void) | null>(null);
+  // const socketCallbackRef = useRef<(() => void) | null>(null);
+
+  // const callBackPub = (callback: () => void): void => {
+  //   // socketCallbackRef에 새로운 콜백을 할당
+  //   socketCallbackRef.current = callback;
+  // };
+
+  const [socketCallback, setSocketCallback] = useState<(() => void) | null>(
+    null,
+  );
 
   const callBackPub = (callback: () => void): void => {
-    // socketCallbackRef에 새로운 콜백을 할당
-    socketCallbackRef.current = callback;
+    setSocketCallback(() => callback);
   };
 
-  console.log(socketCallbackRef.current);
-
   const socketConnect = (tripId: string, visitDate: string) => {
     socketClient.onConnect = () => {
       subInfo(tripId, (res) => {
@@ -92,9 +98,10 @@ export const useSocket = () => {
         }
       });
 
-      if (socketCallbackRef.current) {
-        socketCallbackRef.current();
+      if (socketCallback) {
+        socketCallback();
       }
+
     };
 
     socketClient.activate();
@@ -110,7 +117,7 @@ export const useSocket = () => {
       socketClient.deactivate();
       console.log('소켓해제');
     };
-  }, [tripId, visitDate]);
+  }, [tripId, visitDate, callBackPub]);
 
   return {
     tripInfo,
@@ -123,11 +130,3 @@ export const useSocket = () => {
     callBackPub,
   };
 };
-
-// const [socketCallback, setSocketCallback] = useState<(() => void) | null>(
-//   null,
-// );
-
-// const callBackPub = (callback: () => void): void => {
-//   setSocketCallback(() => callback);
-// };

From 742aa7dbf56babb119ef5f7c6056a762729da22d Mon Sep 17 00:00:00 2001
From: Hojin <wkdghwls0623@gmail.com>
Date: Thu, 25 Jan 2024 12:33:48 +0900
Subject: [PATCH 04/11] =?UTF-8?q?Fix:=20=EC=86=8C=EC=BC=93=20=EC=83=88?=
 =?UTF-8?q?=EB=A1=9C=EA=B3=A0=EC=B9=A8=20=EB=AC=B8=EC=A0=9C=ED=95=B4?=
 =?UTF-8?q?=EA=B2=B0(=EC=95=84=EC=9D=B4=ED=85=9C=20=EC=B6=94=EA=B0=80=20?=
 =?UTF-8?q?=EC=A0=9C=EC=99=B8)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Plan/PlanCursor.tsx     | 37 ++++++--------------------
 src/components/Plan/PlanItem.tsx       | 23 ++++++++++------
 src/components/Plan/PlanSectionTop.tsx | 16 ++++++-----
 src/hooks/useSocket.ts                 | 12 ++-------
 4 files changed, 35 insertions(+), 53 deletions(-)

diff --git a/src/components/Plan/PlanCursor.tsx b/src/components/Plan/PlanCursor.tsx
index 48d10a01..54e325db 100644
--- a/src/components/Plan/PlanCursor.tsx
+++ b/src/components/Plan/PlanCursor.tsx
@@ -43,38 +43,17 @@ const PlanCursor = ({ date }: PlanCursorProps) => {
     };
   }, []);
 
-  // useEffect(() => {
-  //   if (token && position && myName && date && tripId) {
-  //     const timeoutId = setTimeout(() => {
-  //       callBackPub(() =>
-  //         pubCursor(
-  //           {
-  //             token: token,
-  //             visitDate: date,
-  //             x: position.x,
-  //             y: position.y,
-  //           },
-  //           tripId,
-  //         ),
-  //       );
-  //     }, 1000);
-
-  //     return () => clearTimeout(timeoutId);
-  //   }
-  // }, [position]);
 
   useEffect(() => {
     if (token && position && myName && date && tripId) {
-      callBackPub(() =>
-        pubCursor(
-          {
-            token: token,
-            visitDate: date,
-            x: position.x,
-            y: position.y,
-          },
-          tripId,
-        ),
+      pubCursor(
+        {
+          token: token,
+          visitDate: date,
+          x: position.x,
+          y: position.y,
+        },
+        tripId,
       );
     }
   }, [position]);
diff --git a/src/components/Plan/PlanItem.tsx b/src/components/Plan/PlanItem.tsx
index 33c6e23b..5c4e81bd 100644
--- a/src/components/Plan/PlanItem.tsx
+++ b/src/components/Plan/PlanItem.tsx
@@ -49,14 +49,21 @@ const PlanItem: React.FC<PlanItemProps> = ({ date, day }) => {
     tripId: string,
   ) => {
     if (transportation !== transpo) {
-      callBackPub(() =>
-        pubUpdateTransportation(
-          {
-            visitDate: date,
-            transportation: transportation,
-          },
-          tripId,
-        ),
+      // callBackPub(() =>
+      //   pubUpdateTransportation(
+      //     {
+      //       visitDate: date,
+      //       transportation: transportation,
+      //     },
+      //     tripId,
+      //   ),
+      // );
+      pubUpdateTransportation(
+        {
+          visitDate: date,
+          transportation: transportation,
+        },
+        tripId,
       );
     }
   };
diff --git a/src/components/Plan/PlanSectionTop.tsx b/src/components/Plan/PlanSectionTop.tsx
index 95e0e44d..2c5d4d45 100644
--- a/src/components/Plan/PlanSectionTop.tsx
+++ b/src/components/Plan/PlanSectionTop.tsx
@@ -68,14 +68,18 @@ const PlanSectionTop = () => {
       console.log('실행');
       const accessToken = getItem('accessToken');
       if (accessToken) {
-        callBackPub(() => {
-          pubConnectMember({ token: accessToken || '' }, tripId);
-        });
+        // callBackPub(() => {
+        //   pubConnectMember({ token: accessToken || '' }, tripId);
+        // });
+
+        pubConnectMember({ token: accessToken || '' }, tripId);
 
         return () => {
-          callBackPub(() =>
-            pubDisconnectMember({ token: accessToken || '' }, tripId),
-          );
+          // callBackPub(() =>
+          //   pubDisconnectMember({ token: accessToken || '' }, tripId),
+          // );
+
+          pubDisconnectMember({ token: accessToken || '' }, tripId);
         };
       }
     }
diff --git a/src/hooks/useSocket.ts b/src/hooks/useSocket.ts
index 2c252273..dc5a8c1e 100644
--- a/src/hooks/useSocket.ts
+++ b/src/hooks/useSocket.ts
@@ -17,7 +17,7 @@ import {
   SocketContextType,
 } from '@/@types/service';
 import { createContext } from 'react';
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 import { useRecoilValue } from 'recoil';
 import { visitDateState } from '@recoil/socket';
@@ -45,13 +45,6 @@ export const useSocket = () => {
   const [tripBudget, setTripBudget] = useState<subBudgetRes | null>(null);
   const [tripCursor, setTripCursor] = useState<subCursorRes | null>(null);
 
-  // const socketCallbackRef = useRef<(() => void) | null>(null);
-
-  // const callBackPub = (callback: () => void): void => {
-  //   // socketCallbackRef에 새로운 콜백을 할당
-  //   socketCallbackRef.current = callback;
-  // };
-
   const [socketCallback, setSocketCallback] = useState<(() => void) | null>(
     null,
   );
@@ -101,7 +94,6 @@ export const useSocket = () => {
       if (socketCallback) {
         socketCallback();
       }
-
     };
 
     socketClient.activate();
@@ -117,7 +109,7 @@ export const useSocket = () => {
       socketClient.deactivate();
       console.log('소켓해제');
     };
-  }, [tripId, visitDate, callBackPub]);
+  }, [tripId, visitDate, socketCallback]);
 
   return {
     tripInfo,

From 8ae6076ae127246210dd9298b3da5932397ed32a Mon Sep 17 00:00:00 2001
From: Hojin <wkdghwls0623@gmail.com>
Date: Fri, 26 Jan 2024 02:46:24 +0900
Subject: [PATCH 05/11] =?UTF-8?q?Feat:=20=EC=BB=A4=EC=84=9C=20=EA=B3=B5?=
 =?UTF-8?q?=EC=9C=A0=20=EA=B5=AC=ED=98=84=EC=99=84=EB=A3=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/@types/service.ts                   |   1 +
 src/@types/socket.types.ts              |   1 +
 src/api/socket.ts                       |   2 -
 src/components/Plan/PlanCursor.tsx      | 102 ++++++++++++++++--------
 src/components/Plan/PlanItem.tsx        |  17 +---
 src/components/Plan/PlanOtherCursor.tsx |  66 ++++++++++-----
 src/components/Plan/PlanSectionTop.tsx  |  20 ++---
 src/hooks/useSocket.ts                  |   2 -
 8 files changed, 127 insertions(+), 84 deletions(-)

diff --git a/src/@types/service.ts b/src/@types/service.ts
index b0fe82ae..5f9ff5d2 100644
--- a/src/@types/service.ts
+++ b/src/@types/service.ts
@@ -101,6 +101,7 @@ export type subCursorRes = {
   status: number;
   message: string;
   data: {
+    color: string;
     tripId: string;
     visitDate: string;
     memberId: number;
diff --git a/src/@types/socket.types.ts b/src/@types/socket.types.ts
index 227a7467..09e5e725 100644
--- a/src/@types/socket.types.ts
+++ b/src/@types/socket.types.ts
@@ -86,6 +86,7 @@ type subCursorMessage = (response: {
   status: number;
   message: string;
   data: {
+    color: string;
     tripId: string;
     visitDate: string;
     memberId: number;
diff --git a/src/api/socket.ts b/src/api/socket.ts
index ff4101db..505f2fda 100644
--- a/src/api/socket.ts
+++ b/src/api/socket.ts
@@ -154,7 +154,6 @@ export const pubConnectMember = (pubMember: pubMember, tripId: string) => {
     destination: `/pub/trips/${tripId}/connectMember`,
     body: JSON.stringify(pubMember),
   });
-  console.log('입장발생');
 };
 
 // 멤버 여정 페이지 퇴장 이벤트 발생시
@@ -163,7 +162,6 @@ export const pubDisconnectMember = (pubMember: pubMember, tripId: string) => {
     destination: `/pub/trips/${tripId}/disconnectMember`,
     body: JSON.stringify(pubMember),
   });
-  console.log('퇴장발생');
 };
 
 // 여정 편집 페이지 입장 이벤트 발생시(모든 sub 다받음)
diff --git a/src/components/Plan/PlanCursor.tsx b/src/components/Plan/PlanCursor.tsx
index 54e325db..bbca242d 100644
--- a/src/components/Plan/PlanCursor.tsx
+++ b/src/components/Plan/PlanCursor.tsx
@@ -1,25 +1,21 @@
-import { useEffect, useState, useContext } from 'react';
+import { useEffect, useState, useContext, RefObject } from 'react';
 import { BsFillCursorFill } from 'react-icons/bs';
 import { pubCursor } from '@api/socket';
 import { socketContext } from '@hooks/useSocket';
 import { useGetTripsAuthority } from '@hooks/useGetTripsAuthority';
-
-type TripCursorData = {
-  memberId: number;
-  x: number;
-  y: number;
-  name: string;
-};
+import { useRecoilValue } from 'recoil';
+import { visitDateState } from '@recoil/socket';
 
 type PlanCursorProps = {
-  date: string;
+  props: RefObject<HTMLDivElement>;
 };
 
-const PlanCursor = ({ date }: PlanCursorProps) => {
+const PlanCursor = ({ props }: PlanCursorProps) => {
+  const visitDate = useRecoilValue(visitDateState);
   const token = localStorage.getItem('accessToken');
   const { memberId } = useGetTripsAuthority();
-  const { callBackPub, tripId, tripMember } = useContext(socketContext);
-  const [position, setPosition] = useState({ x: 0, y: 0 });
+  const { tripId, tripMember } = useContext(socketContext);
+  const [position, setPosition] = useState({ myX: 0, myY: 0 });
 
   const myName = tripMember?.data?.tripMembers.find(
     (member) => member.memberId === memberId,
@@ -27,43 +23,81 @@ const PlanCursor = ({ date }: PlanCursorProps) => {
 
   useEffect(() => {
     const handleMouseMove = (e: MouseEvent) => {
-      setPosition({ x: e.clientX, y: e.clientY });
+      const myX = e.clientX;
+      const myY = e.clientY;
+      setPosition({ myX, myY });
+
+      const x = (e.clientX + window.scrollX) / window.innerWidth;
+      const y = (e.clientY + window.scrollY) / window.innerHeight;
+
+      if (token && myName && visitDate && tripId) {
+        pubCursor(
+          {
+            token: token,
+            visitDate: visitDate.visitDate,
+            x,
+            y,
+          },
+          tripId,
+        );
+      }
+    };
+
+    const handleMouseEnter = () => {
+      cursorStyle('none');
+    };
+
+    const handleMouseLeave = () => {
+      cursorStyle('auto');
     };
+
+    const cursorArea = props.current;
+
     const cursorStyle = (style: string): void => {
       document.querySelectorAll('*').forEach((el) => {
         const element = el as HTMLElement;
         element.style.cursor = style;
       });
     };
-    cursorStyle('none');
-    document.addEventListener('mousemove', handleMouseMove);
+
+    if (cursorArea) {
+      cursorArea.addEventListener('mousemove', handleMouseMove);
+      cursorArea.addEventListener('mouseenter', handleMouseEnter);
+      cursorArea.addEventListener('mouseleave', handleMouseLeave);
+    }
+
     return () => {
-      cursorStyle('auto');
-      document.removeEventListener('mousemove', handleMouseMove);
+      if (cursorArea) {
+        cursorStyle('auto');
+        cursorArea.removeEventListener('mousemove', handleMouseMove);
+        cursorArea.removeEventListener('mouseenter', handleMouseEnter);
+        cursorArea.removeEventListener('mouseleave', handleMouseLeave);
+      }
     };
-  }, []);
-
+  }, [token, myName, visitDate, tripId]);
 
-  useEffect(() => {
-    if (token && position && myName && date && tripId) {
-      pubCursor(
-        {
-          token: token,
-          visitDate: date,
-          x: position.x,
-          y: position.y,
-        },
-        tripId,
-      );
+  const getColorByMemberId = (memberId: number | null) => {
+    if (memberId == null) {
+      return 'black';
     }
-  }, [position]);
+
+    const colors = ['#FF2167', '#7932FF', '#29DDF6', '#FFAC16', '#16E7A9'];
+    const remainder = memberId % 5;
+    return colors[remainder];
+  };
 
   return (
     <div
       className="pointer-events-none fixed z-50 w-full -translate-x-2 -translate-y-2 transform"
-      style={{ left: `${position.x}px`, top: `${position.y}px` }}>
-      <BsFillCursorFill size={15} color="blue" className="scale-x-[-1]" />
-      <div className="text-bold text-blue absolute left-1 top-2 p-1 text-center text-xs">
+      style={{ left: `${position.myX}px`, top: `${position.myY}px` }}>
+      <BsFillCursorFill
+        size={15}
+        color={getColorByMemberId(memberId)}
+        className="scale-x-[-1]"
+      />
+      <div
+        className="text-bold absolute left-1 top-2 p-1 text-center text-xs"
+        style={{ color: getColorByMemberId(memberId) }}>
         {myName?.name}
       </div>
     </div>
diff --git a/src/components/Plan/PlanItem.tsx b/src/components/Plan/PlanItem.tsx
index 5c4e81bd..5ce5b3bb 100644
--- a/src/components/Plan/PlanItem.tsx
+++ b/src/components/Plan/PlanItem.tsx
@@ -11,8 +11,6 @@ import { visitDateState, isEditState } from '@recoil/socket';
 import { pubGetPathAndItems, pubUpdateTransportation } from '@api/socket';
 import { tapState } from '@recoil/plan';
 import { useGetTripsAuthority } from '@hooks/useGetTripsAuthority';
-import PlanCursor from './PlanCursor';
-import PlanOtherCursor from './PlanOtherCursor';
 
 type PlanItemProps = {
   date: string;
@@ -26,8 +24,7 @@ const PlanItem: React.FC<PlanItemProps> = ({ date, day }) => {
 
   const tap = useRecoilValue(tapState);
   const [, setVisitDate] = useRecoilState(visitDateState);
-  const { tripItem, tripPath, callBackPub, tripId, tripCursor } =
-    useContext(socketContext);
+  const { tripItem, tripPath, callBackPub, tripId } = useContext(socketContext);
 
   useEffect(() => {
     if (tap) {
@@ -49,15 +46,6 @@ const PlanItem: React.FC<PlanItemProps> = ({ date, day }) => {
     tripId: string,
   ) => {
     if (transportation !== transpo) {
-      // callBackPub(() =>
-      //   pubUpdateTransportation(
-      //     {
-      //       visitDate: date,
-      //       transportation: transportation,
-      //     },
-      //     tripId,
-      //   ),
-      // );
       pubUpdateTransportation(
         {
           visitDate: date,
@@ -72,9 +60,6 @@ const PlanItem: React.FC<PlanItemProps> = ({ date, day }) => {
 
   return (
     <>
-      {/* <PlanCursor date={date} />
-      <PlanOtherCursor /> */}
-
       {tripPath && <TripMap paths={tripPath.data?.paths || []} />}
       <div className="mb-[31px] mt-[31px] flex items-center justify-between">
         {tripAuthority !== 'WRITE' || isEdit ? (
diff --git a/src/components/Plan/PlanOtherCursor.tsx b/src/components/Plan/PlanOtherCursor.tsx
index fe98bb05..4fd5a687 100644
--- a/src/components/Plan/PlanOtherCursor.tsx
+++ b/src/components/Plan/PlanOtherCursor.tsx
@@ -1,56 +1,86 @@
 import { useEffect, useState, useContext } from 'react';
 import { BsFillCursorFill } from 'react-icons/bs';
-import { pubCursor } from '@api/socket';
 import { socketContext } from '@hooks/useSocket';
 import { useGetTripsAuthority } from '@hooks/useGetTripsAuthority';
+import { useRecoilValue } from 'recoil';
+import { visitDateState } from '@recoil/socket';
 
 type TripCursorData = {
+  color: string;
   memberId: number;
+  tripId: string;
+  visitDate: string;
   x: number;
   y: number;
   name: string;
 };
 
-type PlanCursorProps = {
-  date: string;
-};
-
 const PlanOtherCursor = () => {
+  const visitDate = useRecoilValue(visitDateState);
   const { memberId } = useGetTripsAuthority();
-  const { tripCursor, tripMember } = useContext(socketContext);
+  const { tripCursor } = useContext(socketContext);
   const [otherCursors, setOtherCursors] = useState<TripCursorData[]>([]);
 
   useEffect(() => {
-    if (
-      tripCursor &&
-      tripCursor.data &&
-      tripCursor.data.memberId !== memberId
-    ) {
+    if (tripCursor?.data && tripCursor.data.memberId !== memberId) {
       setOtherCursors((prevCursors) => {
+        if (!tripCursor.data) {
+          return prevCursors;
+        }
+
         const existingCursorIndex = prevCursors.findIndex(
-          (cursor) => cursor.memberId === tripCursor.data!.memberId,
+          (cursor) => cursor.memberId === tripCursor?.data?.memberId,
         );
 
+        const newCursor: TripCursorData = {
+          ...tripCursor.data,
+          x: tripCursor.data.x * window.innerWidth,
+          y: tripCursor.data.y * window.innerHeight,
+        };
+
         if (existingCursorIndex !== -1) {
           const updatedCursors = [...prevCursors];
-          updatedCursors[existingCursorIndex] = tripCursor.data!;
+          updatedCursors[existingCursorIndex] = newCursor;
           return updatedCursors;
         } else {
-          return [...prevCursors, tripCursor.data!];
+          return [...prevCursors, newCursor];
         }
       });
     }
   }, [tripCursor, memberId]);
 
+  useEffect(() => {
+    setOtherCursors([]);
+  }, [visitDate]);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setOtherCursors([]);
+    }, 30000);
+
+    return () => clearInterval(interval);
+  }, []);
+
   return (
     <>
       {otherCursors.map((cursor, index) => (
         <div
           key={index}
-          className="pointer-events-none fixed z-50 w-full -translate-x-2 -translate-y-2 transform"
-          style={{ left: `${cursor.x}px`, top: `${cursor.y}px` }}>
-          <BsFillCursorFill size={15} color="red" className="scale-x-[-1]" />
-          <div className="text-bold absolute left-1 top-2 p-1 text-center text-xs text-red">
+          className="pointer-events-none absolute z-50 -translate-x-2 -translate-y-2 transform"
+          style={{
+            left: `${cursor.x}px`,
+            top: `${cursor.y}px`,
+          }}>
+          <BsFillCursorFill
+            size={15}
+            color={cursor.color}
+            className="scale-x-[-1]"
+          />
+          <div
+            className={
+              'text-bold absolute left-1 top-2 p-1 text-center text-xs'
+            }
+            style={{ whiteSpace: 'nowrap', color: cursor.color }}>
             {cursor.name}
           </div>
         </div>
diff --git a/src/components/Plan/PlanSectionTop.tsx b/src/components/Plan/PlanSectionTop.tsx
index 2c5d4d45..60cae7e6 100644
--- a/src/components/Plan/PlanSectionTop.tsx
+++ b/src/components/Plan/PlanSectionTop.tsx
@@ -5,7 +5,7 @@ import TripBudget from './TripBudget';
 import Tab from '@components/common/tab/Tab';
 import PlanItem from './PlanItem';
 import { socketContext } from '@hooks/useSocket';
-import { useContext } from 'react';
+import { useContext, useRef } from 'react';
 import {
   pubEnterMember,
   pubConnectMember,
@@ -20,6 +20,8 @@ import { visitDateState } from '@recoil/socket';
 import { useState } from 'react';
 import { getItem } from '@utils/localStorageFun';
 import PlanSchedule from './PlanSchedule';
+import PlanCursor from './PlanCursor';
+import PlanOtherCursor from './PlanOtherCursor';
 
 const PlanSectionTop = () => {
   const navigate = useNavigate();
@@ -38,6 +40,8 @@ const PlanSectionTop = () => {
   const { startDate, endDate } = useGetTrips();
   const [isEnter, setIsEnter] = useState(false);
 
+  const cursorAreaRef = useRef<HTMLDivElement>(null);
+
   let DayArr: string[] = [];
   let DateArr: string[] = [];
 
@@ -65,28 +69,20 @@ const PlanSectionTop = () => {
 
   useEffect(() => {
     if (isEnter) {
-      console.log('실행');
       const accessToken = getItem('accessToken');
       if (accessToken) {
-        // callBackPub(() => {
-        //   pubConnectMember({ token: accessToken || '' }, tripId);
-        // });
-
         pubConnectMember({ token: accessToken || '' }, tripId);
 
         return () => {
-          // callBackPub(() =>
-          //   pubDisconnectMember({ token: accessToken || '' }, tripId),
-          // );
-
           pubDisconnectMember({ token: accessToken || '' }, tripId);
         };
       }
     }
   }, [isEnter]);
-
   return (
-    <div className="min-h-screen">
+    <div className="cursor-area min-h-screen" ref={cursorAreaRef}>
+      <PlanCursor props={cursorAreaRef} />
+      <PlanOtherCursor />
       <BackBox
         showBack={true}
         backHandler={() => {
diff --git a/src/hooks/useSocket.ts b/src/hooks/useSocket.ts
index dc5a8c1e..3de7e43f 100644
--- a/src/hooks/useSocket.ts
+++ b/src/hooks/useSocket.ts
@@ -103,11 +103,9 @@ export const useSocket = () => {
     if (tripId && visitDate) {
       socketConnect(tripId, visitDate.visitDate);
     }
-    console.log('소켓연결');
 
     return () => {
       socketClient.deactivate();
-      console.log('소켓해제');
     };
   }, [tripId, visitDate, socketCallback]);
 

From aba4c38e2476d5f8ad77ab7a88cb2ccb4ae9c947 Mon Sep 17 00:00:00 2001
From: Hojin <wkdghwls0623@gmail.com>
Date: Fri, 26 Jan 2024 03:14:10 +0900
Subject: [PATCH 06/11] =?UTF-8?q?Feat:=20=EC=BB=A4=EC=84=9C=20=EA=B3=B5?=
 =?UTF-8?q?=EC=9C=A0=20=EC=93=B0=EB=A1=9C=ED=8B=80=EB=A7=81=20=EC=A0=81?=
 =?UTF-8?q?=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                       |  2 ++
 pnpm-lock.yaml                     | 10 ++++++++++
 src/api/socket.ts                  |  1 +
 src/components/Plan/PlanCursor.tsx | 25 ++++++++++++++++---------
 4 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index 611f6d99..c962cb80 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "@types/react-beautiful-dnd": "^13.1.8",
     "axios": "^1.6.2",
     "date-fns": "^3.1.0",
+    "lodash": "^4.17.21",
     "msw": "0.36.3",
     "path": "^0.12.7",
     "react": "^18.2.0",
@@ -53,6 +54,7 @@
     "websocket": "^1.0.34"
   },
   "devDependencies": {
+    "@types/lodash": "^4.14.202",
     "@types/react": "^18.2.43",
     "@types/react-date-range": "^1.4.9",
     "@types/react-dom": "^18.2.17",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 71bfd5fe..abcef86b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -59,6 +59,9 @@ dependencies:
   date-fns:
     specifier: ^3.1.0
     version: 3.1.0
+  lodash:
+    specifier: ^4.17.21
+    version: 4.17.21
   msw:
     specifier: 0.36.3
     version: 0.36.3
@@ -130,6 +133,9 @@ dependencies:
     version: 1.0.34
 
 devDependencies:
+  '@types/lodash':
+    specifier: ^4.14.202
+    version: 4.14.202
   '@types/react':
     specifier: ^18.2.43
     version: 18.2.45
@@ -3025,6 +3031,10 @@ packages:
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
     dev: true
 
+  /@types/lodash@4.14.202:
+    resolution: {integrity: sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ==}
+    dev: true
+
   /@types/node@20.10.5:
     resolution: {integrity: sha512-nNPsNE65wjMxEKI93yOP+NPGGBJz/PoN3kZsVLee0XMiJolxSekEVD8wRwBUBqkwc7UWop0edW50yrCQW4CyRw==}
     dependencies:
diff --git a/src/api/socket.ts b/src/api/socket.ts
index 505f2fda..84b67a6d 100644
--- a/src/api/socket.ts
+++ b/src/api/socket.ts
@@ -206,4 +206,5 @@ export const pubCursor = (pubCursor: pubCursor, tripId: string) => {
     destination: `/pub/trips/${tripId}/cursor`,
     body: JSON.stringify(pubCursor),
   });
+  console.log('섭실행')
 };
diff --git a/src/components/Plan/PlanCursor.tsx b/src/components/Plan/PlanCursor.tsx
index bbca242d..af496183 100644
--- a/src/components/Plan/PlanCursor.tsx
+++ b/src/components/Plan/PlanCursor.tsx
@@ -5,6 +5,7 @@ import { socketContext } from '@hooks/useSocket';
 import { useGetTripsAuthority } from '@hooks/useGetTripsAuthority';
 import { useRecoilValue } from 'recoil';
 import { visitDateState } from '@recoil/socket';
+import { throttle } from 'lodash';
 
 type PlanCursorProps = {
   props: RefObject<HTMLDivElement>;
@@ -21,6 +22,20 @@ const PlanCursor = ({ props }: PlanCursorProps) => {
     (member) => member.memberId === memberId,
   );
 
+  const throttledPubCursor = throttle((x, y) => {
+    if (token && visitDate) {
+      pubCursor(
+        {
+          token: token,
+          visitDate: visitDate.visitDate,
+          x,
+          y,
+        },
+        tripId,
+      );
+    }
+  }, 50);
+
   useEffect(() => {
     const handleMouseMove = (e: MouseEvent) => {
       const myX = e.clientX;
@@ -31,15 +46,7 @@ const PlanCursor = ({ props }: PlanCursorProps) => {
       const y = (e.clientY + window.scrollY) / window.innerHeight;
 
       if (token && myName && visitDate && tripId) {
-        pubCursor(
-          {
-            token: token,
-            visitDate: visitDate.visitDate,
-            x,
-            y,
-          },
-          tripId,
-        );
+        throttledPubCursor(x, y);
       }
     };
 

From 40e4c5058d3e1a3bc60d81a2db570f16d247a7b8 Mon Sep 17 00:00:00 2001
From: Hojin <wkdghwls0623@gmail.com>
Date: Fri, 26 Jan 2024 03:25:35 +0900
Subject: [PATCH 07/11] =?UTF-8?q?Fix:=20=EC=86=8C=EC=BC=93=20=EC=83=88?=
 =?UTF-8?q?=EB=A1=9C=EA=B3=A0=EC=B9=A8=20=EC=B5=9C=EC=A0=81=ED=99=94(?=
 =?UTF-8?q?=EC=98=88=EC=82=B0,=20=EC=82=AD=EC=A0=9C,=20=EC=9D=B4=EB=8F=99,?=
 =?UTF-8?q?=20=EB=B3=80=EA=B2=BD)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Plan/PlanEditItemBox.tsx |  7 ++-----
 src/components/Plan/PlanMoveItem.tsx    | 17 +++++++----------
 src/components/Plan/TripBudget.tsx      | 14 ++++++--------
 3 files changed, 15 insertions(+), 23 deletions(-)

diff --git a/src/components/Plan/PlanEditItemBox.tsx b/src/components/Plan/PlanEditItemBox.tsx
index 1e1a6fec..40283d57 100644
--- a/src/components/Plan/PlanEditItemBox.tsx
+++ b/src/components/Plan/PlanEditItemBox.tsx
@@ -34,7 +34,6 @@ const PlanEditItemBox = ({
     return <div>Missing data</div>;
   }
 
-  const { callBackPub } = useContext(socketContext);
   const [, setIsEdit] = useRecoilState(isEditState);
   const [items, setItems] = useState(item);
   const [newData, setNewData] = useState<pubUpdateTripItemReq | null>(null);
@@ -65,15 +64,13 @@ const PlanEditItemBox = ({
 
   useEffect(() => {
     if (newData && tripId) {
-      callBackPub(() => pubUpdateTripItem(newData, tripId));
+      pubUpdateTripItem(newData, tripId);
     }
   }, [newData]);
 
   const handleConfirm = () => {
     if (tripId && visitDate && selectedItemId) {
-      callBackPub(() =>
-        pubDeleteItem({ tripId: tripId, visitDate: visitDate }, selectedItemId),
-      );
+      pubDeleteItem({ tripId: tripId, visitDate: visitDate }, selectedItemId);
     }
     setToastPopUp(() => ({
       isPopUp: true,
diff --git a/src/components/Plan/PlanMoveItem.tsx b/src/components/Plan/PlanMoveItem.tsx
index fdfa5d84..40f1357d 100644
--- a/src/components/Plan/PlanMoveItem.tsx
+++ b/src/components/Plan/PlanMoveItem.tsx
@@ -22,7 +22,6 @@ const PlanMoveItem: React.FC<PlanMoveItemProps> = ({
   visitDate,
 }) => {
   const [, setIsEdit] = useRecoilState(isEditState);
-  const { callBackPub } = useContext(socketContext);
   const day = useRecoilValue(dayState);
   const date = useRecoilValue(dateState);
 
@@ -37,15 +36,13 @@ const PlanMoveItem: React.FC<PlanMoveItemProps> = ({
       return;
     }
     if (tripId && isCheck && visitDate) {
-      callBackPub(() =>
-        pubUpdateVisitDate(
-          {
-            tripId: tripId,
-            oldVisitDate: visitDate,
-            newVisitDate: newVisitDate,
-          },
-          isCheck,
-        ),
+      pubUpdateVisitDate(
+        {
+          tripId: tripId,
+          oldVisitDate: visitDate,
+          newVisitDate: newVisitDate,
+        },
+        isCheck,
       );
     }
     setToastPopUp(() => ({
diff --git a/src/components/Plan/TripBudget.tsx b/src/components/Plan/TripBudget.tsx
index 181ceab4..e8ea6d82 100644
--- a/src/components/Plan/TripBudget.tsx
+++ b/src/components/Plan/TripBudget.tsx
@@ -8,7 +8,7 @@ import { useContext, useState } from 'react';
 
 const TripBudget = () => {
   const { tripAuthority } = useGetTripsAuthority();
-  const { callBackPub, tripBudget, tripId } = useContext(socketContext);
+  const { tripBudget, tripId } = useContext(socketContext);
 
   const budget = tripBudget?.data;
 
@@ -28,13 +28,11 @@ const TripBudget = () => {
   const handleSetTargetBudget = (inputBudget: string) => {
     const newTargetBudget = parseInt(inputBudget, 10); // 문자열 숫자로 변환
     if (!isNaN(newTargetBudget) && newTargetBudget !== budget?.budget) {
-      callBackPub(() =>
-        pubUpdateBudget(
-          {
-            budget: newTargetBudget,
-          },
-          tripId || '',
-        ),
+      pubUpdateBudget(
+        {
+          budget: newTargetBudget,
+        },
+        tripId || '',
       );
       setInputBudget('');
     }

From 6ec71439084d0ff140e90d663918c68674b1ee34 Mon Sep 17 00:00:00 2001
From: Hojin <wkdghwls0623@gmail.com>
Date: Fri, 26 Jan 2024 03:33:57 +0900
Subject: [PATCH 08/11] =?UTF-8?q?Fix:=20=EC=83=81=ED=92=88=20=EC=88=9C?=
 =?UTF-8?q?=EC=84=9C=EB=B3=80=EA=B2=BD=20=EB=94=94=EB=B0=94=EC=9A=B4?=
 =?UTF-8?q?=EC=8B=B1=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/socket.ts                       | 2 +-
 src/components/Plan/PlanEditItemBox.tsx | 9 ++++++---
 src/components/Plan/PlanMoveItem.tsx    | 2 --
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/api/socket.ts b/src/api/socket.ts
index 84b67a6d..2f22446e 100644
--- a/src/api/socket.ts
+++ b/src/api/socket.ts
@@ -113,6 +113,7 @@ export const pubUpdateTripItem = (
     destination: `/pub/trips/${tripId}/updateTripItemOrder`,
     body: JSON.stringify(pubUpdateTripItem),
   });
+  console.log('실행');
 };
 
 // 여행 날짜별 교통 수단 변경 이벤트 발생시 (01/16 업데이트)
@@ -206,5 +207,4 @@ export const pubCursor = (pubCursor: pubCursor, tripId: string) => {
     destination: `/pub/trips/${tripId}/cursor`,
     body: JSON.stringify(pubCursor),
   });
-  console.log('섭실행')
 };
diff --git a/src/components/Plan/PlanEditItemBox.tsx b/src/components/Plan/PlanEditItemBox.tsx
index 40283d57..d996316b 100644
--- a/src/components/Plan/PlanEditItemBox.tsx
+++ b/src/components/Plan/PlanEditItemBox.tsx
@@ -8,14 +8,13 @@ import {
 } from 'react-beautiful-dnd';
 import { useState, useEffect } from 'react';
 import { pubUpdateTripItem, pubDeleteItem } from '@api/socket';
-import { useContext } from 'react';
-import { socketContext } from '@hooks/useSocket';
 import { pubUpdateTripItemReq } from '@/@types/service';
 import Alert from '@components/common/alert/Alert';
 import ToastPopUp from '@components/common/toastpopup/ToastPopUp';
 import PlanMoveItem from './PlanMoveItem';
 import { useRecoilState } from 'recoil';
 import { isEditState } from '@recoil/socket';
+import { debounce } from 'lodash';
 
 type PlanItemBoxProps = {
   item: TripItem[];
@@ -62,9 +61,13 @@ const PlanEditItemBox = ({
     });
   };
 
+  const debouncedPubUpdateTripItem = debounce((newData, tripId) => {
+    pubUpdateTripItem(newData, tripId);
+  }, 1000);
+
   useEffect(() => {
     if (newData && tripId) {
-      pubUpdateTripItem(newData, tripId);
+      debouncedPubUpdateTripItem(newData, tripId);
     }
   }, [newData]);
 
diff --git a/src/components/Plan/PlanMoveItem.tsx b/src/components/Plan/PlanMoveItem.tsx
index 40f1357d..51d36b81 100644
--- a/src/components/Plan/PlanMoveItem.tsx
+++ b/src/components/Plan/PlanMoveItem.tsx
@@ -3,8 +3,6 @@ import { PaperIcon } from '@components/common/icons/Icons';
 import { useRecoilValue } from 'recoil';
 import { dayState, dateState } from '@recoil/plan';
 import { pubUpdateVisitDate } from '@api/socket';
-import { useContext } from 'react';
-import { socketContext } from '@hooks/useSocket';
 import { useState, useEffect } from 'react';
 import ToastPopUp from '@components/common/toastpopup/ToastPopUp';
 import { useRecoilState } from 'recoil';

From 1ac73b40545e2bd52f28ea7b73108dc0791bd56b Mon Sep 17 00:00:00 2001
From: Hojin <wkdghwls0623@gmail.com>
Date: Fri, 26 Jan 2024 09:43:33 +0900
Subject: [PATCH 09/11] =?UTF-8?q?Fix:=20=EB=B9=8C=EB=93=9C=EC=97=90?=
 =?UTF-8?q?=EB=9F=AC=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Plan/PlanSectionTop.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Plan/PlanSectionTop.tsx b/src/components/Plan/PlanSectionTop.tsx
index 245d2389..00d23134 100644
--- a/src/components/Plan/PlanSectionTop.tsx
+++ b/src/components/Plan/PlanSectionTop.tsx
@@ -22,7 +22,7 @@ import { getItem } from '@utils/localStorageFun';
 import PlanSchedule from './PlanSchedule';
 import PlanCursor from './PlanCursor';
 import PlanOtherCursor from './PlanOtherCursor';
-
+import ScrollTopButton from '@components/common/scrollTopButton/ScrollTopButton';
 
 const PlanSectionTop = () => {
   const navigate = useNavigate();

From 743cfbc7bf34d4f719a9b6661d0eb35ccc431511 Mon Sep 17 00:00:00 2001
From: NohWookJin <jinn98@kakao.com>
Date: Fri, 26 Jan 2024 10:00:08 +0900
Subject: [PATCH 10/11] =?UTF-8?q?style:=20=EC=97=AC=EB=B0=B1=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Trip/LikedToursLists/LikedToursListItem.tsx    | 10 +++++-----
 src/components/Wish/WishItem.tsx                   | 14 +++++++-------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/components/Trip/LikedToursLists/LikedToursListItem.tsx b/src/components/Trip/LikedToursLists/LikedToursListItem.tsx
index c9e73827..f72641fa 100644
--- a/src/components/Trip/LikedToursLists/LikedToursListItem.tsx
+++ b/src/components/Trip/LikedToursLists/LikedToursListItem.tsx
@@ -72,7 +72,7 @@ const LikedToursListItem: React.FC<LikedToursListItemProps> = ({
 
   return (
     <div
-      className={`relative mb-[4px] cursor-pointer`}
+      className={`relative mb-[6px] flex max-h-[72px] cursor-pointer`}
       onClick={() => navigate(`/detail/${tourItemId}`)}>
       <div className="flex">
         <div>
@@ -83,13 +83,13 @@ const LikedToursListItem: React.FC<LikedToursListItemProps> = ({
           />
         </div>
 
-        <div className="ml-[8px] flex flex-col items-start justify-between gap-[1px]">
-          <div className="max-w-[270px]">
-            <p className="truncate whitespace-nowrap  px-[2px] text-[16px] font-bold leading-normal text-black">
+        <div className="ml-[8px] flex max-h-[72px] flex-col items-start">
+          <div className="mt-[-5px] flex max-w-[230px] flex-col">
+            <p className="truncate whitespace-nowrap text-[16px] font-bold leading-normal text-black ">
               {title}
             </p>
 
-            <div className="flex items-center">
+            <div className="mb-[8.5px] mt-[-4px] flex  items-center">
               <div className="mr-[5px] flex items-center">
                 <div>
                   <StarIcon size={12.5} color="#FFEC3E" fill="#FFEC3E" />
diff --git a/src/components/Wish/WishItem.tsx b/src/components/Wish/WishItem.tsx
index e1fb9a2c..75928caa 100644
--- a/src/components/Wish/WishItem.tsx
+++ b/src/components/Wish/WishItem.tsx
@@ -32,9 +32,9 @@ const WishItem: React.FC<WishItemProps> = ({ wishList }) => {
 
   return (
     <div
-      className={`relative mb-[2px] cursor-pointer `}
+      className={`relative mb-[6px] flex max-h-[72px] cursor-pointer items-center`}
       onClick={() => navigate(`/detail/${id}`)}>
-      <div className="flex">
+      <div className="flex items-center">
         <div>
           <img
             className="rounded-1 h-[72px] max-h-[72px] w-[72px] rounded-[8px] object-cover"
@@ -51,7 +51,7 @@ const WishItem: React.FC<WishItemProps> = ({ wishList }) => {
             <p className=" truncate whitespace-nowrap px-[2px] text-[16px] font-bold leading-normal text-black">
               {title}
             </p>
-            <div className="ml-[3px] mt-[5px] max-w-[260px]">
+            <div className="ml-[3px] max-w-[260px]">
               <p className="truncate text-[14px] text-gray6">
                 {isMetroIncluded && tourAddress
                   ? (tourAddress.match(/(.*?[시군구])/)?.[0] || '') +
@@ -63,9 +63,9 @@ const WishItem: React.FC<WishItemProps> = ({ wishList }) => {
             </div>
           </div>
 
-          <div className="caption1 mb-[2px] ml-[3px] flex justify-center leading-normal text-gray4">
+          <div className="caption1 mb-[4px] ml-[3px] flex justify-center leading-normal text-gray4">
             <div className="mr-[5px] flex items-center">
-              <div className="mb-[2px]">
+              <div className="">
                 <StarIcon size={12.5} color="#FFEC3E" fill="#FFEC3E" />
               </div>
               <div className="flex items-center pt-[1.5px]">
@@ -78,10 +78,10 @@ const WishItem: React.FC<WishItemProps> = ({ wishList }) => {
               </div>
             </div>
             <div className="flex items-center justify-center ">
-              <div className="mb-[0.5px]">
+              <div className="">
                 <HeartIcon size={14} color="#FF2167" fill="#FF2167" />
               </div>
-              <span className="ml-1 mt-[2.8px] text-xs">
+              <span className="ml-1 mt-[0px] text-xs">
                 {likedCount ? likedCount.toLocaleString() : likedCount}
               </span>
             </div>

From 80f7e8b5652f7e1fb62fdce84e2a4fb7a38cfe48 Mon Sep 17 00:00:00 2001
From: Hojin <wkdghwls0623@gmail.com>
Date: Fri, 26 Jan 2024 11:58:54 +0900
Subject: [PATCH 11/11] =?UTF-8?q?Fix:=20planItem=20=EA=B0=84=EA=B2=A9=20?=
 =?UTF-8?q?=EC=9E=AC=EC=A1=B0=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Plan/PlanEditItemBox.tsx | 12 +++++++-----
 src/components/Plan/PlanItemBox.tsx     | 14 ++++++++------
 2 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/components/Plan/PlanEditItemBox.tsx b/src/components/Plan/PlanEditItemBox.tsx
index ff85fb4c..48230566 100644
--- a/src/components/Plan/PlanEditItemBox.tsx
+++ b/src/components/Plan/PlanEditItemBox.tsx
@@ -132,22 +132,24 @@ const PlanEditItemBox = ({
                           checked={selectedItemId === item.tripItemId}></input>
                       </div>
                       <div className="flex w-full flex-col">
-                        <div className="mb-[8px] flex  h-[87.5px] rounded-lg border border-solid border-[#ededed] bg-white">
+                        <div className="mb-[8px] flex h-[88.5px] rounded-lg border border-solid border-[#ededed] bg-white">
                           <img
                             className="h-[87px] w-[93px] rounded-bl-lg rounded-tl-lg "
                             src={item.thumbnailUrl}
                             alt="img"
                           />
-                          <div className="flex w-full flex-col p-[10px]">
+                          <div className="flex h-[88px] w-full flex-col px-[10px] py-[8px]">
                             <div className="flex text-left text-[14px] font-medium text-black">
                               {item.name.length > 17
                                 ? item.name.slice(0, 17) + '...'
                                 : item.name}
                             </div>
-                            <div className="mt-[3px] flex h-fit w-fit items-center justify-center gap-2 rounded-[3px] bg-[#ededed] p-[4px] text-center text-[11px] text-black">
-                              {item.category}
+                            <div className="mb-[11px] mt-[4px] flex h-[16px] w-fit items-center justify-center rounded-[3px] bg-[#ededed] px-[4px] py-[8px] text-center text-[11px] text-black">
+                              <div className="flex h-[13px] items-center justify-center text-center">
+                                {item.category}
+                              </div>
                             </div>
-                            <div className="mt-[15px] text-sm font-bold text-black">
+                            <div className="flex justify-between text-sm font-bold text-black">
                               {item.price} 원
                             </div>
                           </div>
diff --git a/src/components/Plan/PlanItemBox.tsx b/src/components/Plan/PlanItemBox.tsx
index 31a926b7..a09fb8cd 100644
--- a/src/components/Plan/PlanItemBox.tsx
+++ b/src/components/Plan/PlanItemBox.tsx
@@ -64,7 +64,7 @@ const PlanItemBox = ({
   return (
     <>
       <div>
-        <div className="text-left text-sm font-semibold ">{day}</div>
+        <div className="text-left text-sm font-semibold">{day}</div>
         {item.map((item, index) => (
           <div key={item.tripItemId} className="flex">
             <div className="relative ml-[5px] mr-[17px] flex h-[87.5px] items-center">
@@ -76,22 +76,24 @@ const PlanItemBox = ({
               <SequenceIcon className="z-10" number={item.seqNum} />
             </div>
             <div className="flex w-full flex-col">
-              <div className="flex h-[87.5px] rounded-lg border border-solid border-[#ededed] bg-white">
+              <div className="flex h-[88.5px] rounded-lg border border-solid border-[#ededed] bg-white">
                 <img
                   className="h-[87px] w-[93px] rounded-bl-lg rounded-tl-lg"
                   src={item.thumbnailUrl}
                   alt="img"
                 />
-                <div className="flex w-full flex-col p-[10px]">
+                <div className="flex h-[88px] w-full flex-col px-[10px] py-[8px]">
                   <div className="text-left text-[14px] font-medium text-black">
                     {item.name.length > 19
                       ? item.name.slice(0, 19) + '...'
                       : item.name}
                   </div>
-                  <div className="mt-[3px] flex h-fit w-fit items-center justify-center gap-2 rounded-[3px] bg-[#ededed] p-[4px] text-center text-[11px] text-black">
-                    {item.category}
+                  <div className="mb-[11px] mt-[4px] flex h-[16px] w-fit items-center justify-center rounded-[3px] bg-[#ededed] px-[4px] py-[8px] text-center text-[11px] text-black">
+                    <div className="flex h-[13px] items-center justify-center text-center">
+                      {item.category}
+                    </div>
                   </div>
-                  <div className="mt-[15px] flex justify-between text-sm font-bold text-black">
+                  <div className="flex justify-between text-sm font-bold text-black">
                     {item.price.toLocaleString()} 원
                     {tripAuthority == 'WRITE' && (
                       <Alert