diff --git a/package.json b/package.json
index 10b3be84..c962cb80 100644
--- a/package.json
+++ b/package.json
@@ -28,12 +28,14 @@
     "@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",
     "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",
@@ -52,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 0720f243..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
@@ -77,6 +80,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)
@@ -127,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
@@ -3022,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:
@@ -5145,6 +5158,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/@types/service.ts b/src/@types/service.ts
index bae375b2..5f9ff5d2 100644
--- a/src/@types/service.ts
+++ b/src/@types/service.ts
@@ -97,12 +97,27 @@ export type subBudgetRes = {
   } | null;
 };
 
+export type subCursorRes = {
+  status: number;
+  message: string;
+  data: {
+    color: string;
+    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..09e5e725 100644
--- a/src/@types/socket.types.ts
+++ b/src/@types/socket.types.ts
@@ -82,6 +82,20 @@ type subBudgetMessage = (response: {
   };
 }) => void;
 
+type subCursorMessage = (response: {
+  status: number;
+  message: string;
+  data: {
+    color: string;
+    tripId: string;
+    visitDate: string;
+    memberId: number;
+    name: string;
+    x: number;
+    y: number;
+  };
+}) => void;
+
 interface pubInfo {
   startDate: string;
   endDate: string;
@@ -138,3 +152,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..2f22446e 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) => {
@@ -101,6 +113,7 @@ export const pubUpdateTripItem = (
     destination: `/pub/trips/${tripId}/updateTripItemOrder`,
     body: JSON.stringify(pubUpdateTripItem),
   });
+  console.log('실행');
 };
 
 // 여행 날짜별 교통 수단 변경 이벤트 발생시 (01/16 업데이트)
@@ -187,3 +200,11 @@ 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),
+  });
+};
diff --git a/src/components/DetailSectionTop/DetailAddSchedule.tsx b/src/components/DetailSectionTop/DetailAddSchedule.tsx
index 656d82a7..0b39bba6 100644
--- a/src/components/DetailSectionTop/DetailAddSchedule.tsx
+++ b/src/components/DetailSectionTop/DetailAddSchedule.tsx
@@ -193,7 +193,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/PlanCursor.tsx b/src/components/Plan/PlanCursor.tsx
new file mode 100644
index 00000000..af496183
--- /dev/null
+++ b/src/components/Plan/PlanCursor.tsx
@@ -0,0 +1,114 @@
+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';
+import { useRecoilValue } from 'recoil';
+import { visitDateState } from '@recoil/socket';
+import { throttle } from 'lodash';
+
+type PlanCursorProps = {
+  props: RefObject<HTMLDivElement>;
+};
+
+const PlanCursor = ({ props }: PlanCursorProps) => {
+  const visitDate = useRecoilValue(visitDateState);
+  const token = localStorage.getItem('accessToken');
+  const { memberId } = useGetTripsAuthority();
+  const { tripId, tripMember } = useContext(socketContext);
+  const [position, setPosition] = useState({ myX: 0, myY: 0 });
+
+  const myName = tripMember?.data?.tripMembers.find(
+    (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;
+      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) {
+        throttledPubCursor(x, y);
+      }
+    };
+
+    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;
+      });
+    };
+
+    if (cursorArea) {
+      cursorArea.addEventListener('mousemove', handleMouseMove);
+      cursorArea.addEventListener('mouseenter', handleMouseEnter);
+      cursorArea.addEventListener('mouseleave', handleMouseLeave);
+    }
+
+    return () => {
+      if (cursorArea) {
+        cursorStyle('auto');
+        cursorArea.removeEventListener('mousemove', handleMouseMove);
+        cursorArea.removeEventListener('mouseenter', handleMouseEnter);
+        cursorArea.removeEventListener('mouseleave', handleMouseLeave);
+      }
+    };
+  }, [token, myName, visitDate, tripId]);
+
+  const getColorByMemberId = (memberId: number | null) => {
+    if (memberId == null) {
+      return 'black';
+    }
+
+    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.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>
+  );
+};
+
+export default PlanCursor;
diff --git a/src/components/Plan/PlanEditItemBox.tsx b/src/components/Plan/PlanEditItemBox.tsx
index 3a69e149..48230566 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[];
@@ -34,7 +33,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);
@@ -63,17 +61,19 @@ const PlanEditItemBox = ({
     });
   };
 
+  const debouncedPubUpdateTripItem = debounce((newData, tripId) => {
+    pubUpdateTripItem(newData, tripId);
+  }, 1000);
+
   useEffect(() => {
     if (newData && tripId) {
-      callBackPub(() => pubUpdateTripItem(newData, tripId));
+      debouncedPubUpdateTripItem(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,
@@ -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/PlanItem.tsx b/src/components/Plan/PlanItem.tsx
index 56def8f7..5ce5b3bb 100644
--- a/src/components/Plan/PlanItem.tsx
+++ b/src/components/Plan/PlanItem.tsx
@@ -46,14 +46,12 @@ const PlanItem: React.FC<PlanItemProps> = ({ date, day }) => {
     tripId: string,
   ) => {
     if (transportation !== transpo) {
-      callBackPub(() =>
-        pubUpdateTransportation(
-          {
-            visitDate: date,
-            transportation: transportation,
-          },
-          tripId,
-        ),
+      pubUpdateTransportation(
+        {
+          visitDate: date,
+          transportation: transportation,
+        },
+        tripId,
       );
     }
   };
@@ -63,7 +61,6 @@ const PlanItem: React.FC<PlanItemProps> = ({ date, day }) => {
   return (
     <>
       {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/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
diff --git a/src/components/Plan/PlanMoveItem.tsx b/src/components/Plan/PlanMoveItem.tsx
index fdfa5d84..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';
@@ -22,7 +20,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 +34,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/PlanOtherCursor.tsx b/src/components/Plan/PlanOtherCursor.tsx
new file mode 100644
index 00000000..4fd5a687
--- /dev/null
+++ b/src/components/Plan/PlanOtherCursor.tsx
@@ -0,0 +1,92 @@
+import { useEffect, useState, useContext } from 'react';
+import { BsFillCursorFill } from 'react-icons/bs';
+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;
+};
+
+const PlanOtherCursor = () => {
+  const visitDate = useRecoilValue(visitDateState);
+  const { memberId } = useGetTripsAuthority();
+  const { tripCursor } = useContext(socketContext);
+  const [otherCursors, setOtherCursors] = useState<TripCursorData[]>([]);
+
+  useEffect(() => {
+    if (tripCursor?.data && tripCursor.data.memberId !== memberId) {
+      setOtherCursors((prevCursors) => {
+        if (!tripCursor.data) {
+          return prevCursors;
+        }
+
+        const existingCursorIndex = prevCursors.findIndex(
+          (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] = newCursor;
+          return updatedCursors;
+        } else {
+          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 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>
+      ))}
+    </>
+  );
+};
+
+export default PlanOtherCursor;
diff --git a/src/components/Plan/PlanSectionTop.tsx b/src/components/Plan/PlanSectionTop.tsx
index eff1f233..00d23134 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,7 +20,9 @@ import { visitDateState } from '@recoil/socket';
 import { useState } from 'react';
 import { getItem } from '@utils/localStorageFun';
 import PlanSchedule from './PlanSchedule';
-import ScrollTopButton from '../common/scrollTopButton/ScrollTopButton';
+import PlanCursor from './PlanCursor';
+import PlanOtherCursor from './PlanOtherCursor';
+import ScrollTopButton from '@components/common/scrollTopButton/ScrollTopButton';
 
 const PlanSectionTop = () => {
   const navigate = useNavigate();
@@ -39,6 +41,8 @@ const PlanSectionTop = () => {
   const { startDate, endDate } = useGetTrips();
   const [isEnter, setIsEnter] = useState(false);
 
+  const cursorAreaRef = useRef<HTMLDivElement>(null);
+
   let DayArr: string[] = [];
   let DateArr: string[] = [];
 
@@ -68,21 +72,18 @@ const PlanSectionTop = () => {
     if (isEnter) {
       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/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('');
     }
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>
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,
   };