diff --git a/package.json b/package.json
index 2a63f1a5..10b3be84 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "@radix-ui/react-radio-group": "^1.1.3",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-tabs": "^1.0.4",
+    "@radix-ui/react-toast": "^1.1.5",
     "@radix-ui/react-toggle-group": "^1.0.4",
     "@stomp/stompjs": "^7.0.0",
     "@svgr/rollup": "^8.1.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 753ad932..0720f243 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -32,6 +32,9 @@ dependencies:
   '@radix-ui/react-tabs':
     specifier: ^1.0.4
     version: 1.0.4(@types/react-dom@18.2.18)(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)
+  '@radix-ui/react-toast':
+    specifier: ^1.1.5
+    version: 1.1.5(@types/react-dom@18.2.18)(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)
   '@radix-ui/react-toggle-group':
     specifier: ^1.0.4
     version: 1.0.4(@types/react-dom@18.2.18)(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)
@@ -2430,6 +2433,38 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
+  /@radix-ui/react-toast@1.1.5(@types/react-dom@18.2.18)(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-fRLn227WHIBRSzuRzGJ8W+5YALxofH23y0MlPLddaIpLpCDqdE0NZlS2NRQDRiptfxDeeCjgFIpexB1/zkxDlw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.23.6
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-collection': 1.0.3(@types/react-dom@18.2.18)(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.45)(react@18.2.0)
+      '@radix-ui/react-context': 1.0.1(@types/react@18.2.45)(react@18.2.0)
+      '@radix-ui/react-dismissable-layer': 1.0.5(@types/react-dom@18.2.18)(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-portal': 1.0.4(@types/react-dom@18.2.18)(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.18)(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.18)(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.45)(react@18.2.0)
+      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.45)(react@18.2.0)
+      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.45)(react@18.2.0)
+      '@radix-ui/react-visually-hidden': 1.0.3(@types/react-dom@18.2.18)(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)
+      '@types/react': 18.2.45
+      '@types/react-dom': 18.2.18
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
   /@radix-ui/react-toggle-group@1.0.4(@types/react-dom@18.2.18)(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-Uaj/M/cMyiyT9Bx6fOZO0SAG4Cls0GptBWiBmBxofmDbNVnYYoyRWj/2M/6VCi/7qcXFWnHhRUfdfZFvvkuu8A==}
     peerDependencies:
diff --git a/src/@types/service.ts b/src/@types/service.ts
index 4ea36ae0..bae375b2 100644
--- a/src/@types/service.ts
+++ b/src/@types/service.ts
@@ -2,7 +2,7 @@ export type subInfoRes = {
   status: number;
   message: string;
   data: {
-    tripId: number;
+    tripId: string;
     startDate: string;
     endDate: string;
     numberOfPeople: number;
@@ -16,7 +16,7 @@ export type subItemRes = {
   status: number;
   message: string;
   data: {
-    tripId: number;
+    tripId: string;
     visitDate: string;
     transportation: 'CAR' | 'PUBLIC_TRANSPORTATION';
     tripItems: {
@@ -52,7 +52,7 @@ export type subPathRes = {
   status: number;
   message: string;
   data: {
-    tripId: number;
+    tripId: string;
     visitDate: string;
     transportation: 'CAR' | 'PUBLIC_TRANSPORTATION';
     paths: {
@@ -77,7 +77,7 @@ export type subMemberRes = {
   status: number;
   message: string;
   data: {
-    tripId: number;
+    tripId: string;
     tripMembers: {
       memberId: number;
       name: string;
@@ -91,7 +91,7 @@ export type subBudgetRes = {
   status: number;
   message: string;
   data: {
-    tripId: number;
+    tripId: string;
     budget: number;
     calculatedPrice: number;
   } | null;
@@ -103,6 +103,7 @@ export type SocketContextType = {
   tripPath: subPathRes | null;
   tripMember: subMemberRes | null;
   tripBudget: subBudgetRes | null;
+  tripId: string;
   callBackPub: (callback: () => void) => void;
 };
 
diff --git a/src/@types/socket.types.ts b/src/@types/socket.types.ts
index 2a70ed7b..49244096 100644
--- a/src/@types/socket.types.ts
+++ b/src/@types/socket.types.ts
@@ -2,7 +2,7 @@ type subInfoMessage = (message: {
   status: number;
   message: string;
   data: {
-    tripId: number;
+    tripId: string;
     startDate: string;
     endDate: string;
     numberOfPeople: number;
@@ -16,7 +16,7 @@ type subItemMessage = (response: {
   status: number;
   message: string;
   data: {
-    tripId: number;
+    tripId: string;
     visitDate: string;
     transportation: 'CAR' | 'PUBLIC_TRANSPORTATION';
     tripItems: {
@@ -36,7 +36,7 @@ type subPathMessage = (response: {
   status: number;
   message: string;
   data: {
-    tripId: number;
+    tripId: string;
     visitDate: string;
     transportation: 'CAR' | 'PUBLIC_TRANSPORTATION';
     paths: {
@@ -61,7 +61,7 @@ type subMemberMessage = (response: {
   status: number;
   message: string;
   data: {
-    tripId: number;
+    tripId: string;
     tripMembers: {
       memberId: number;
       name: string;
@@ -76,7 +76,7 @@ type subBudgetMessage = (response: {
   status: number;
   message: string;
   data: {
-    tripId: number;
+    tripId: string;
     budget: number;
     calculatedPrice: number;
   };
@@ -98,7 +98,7 @@ interface pubAddTripItem {
 }
 
 interface pubUpdatePrice {
-  tripId: number;
+  tripId: string;
   visitDate: string;
   price: number;
 }
diff --git a/src/@types/tours.types.ts b/src/@types/tours.types.ts
index 2b722c6d..ccd95671 100644
--- a/src/@types/tours.types.ts
+++ b/src/@types/tours.types.ts
@@ -37,3 +37,18 @@ export interface TourType {
   longitude?: string;
   latitude?: string;
 }
+
+export interface LikedListType {
+  tripLikedItemId: number;
+  tourItemId: number;
+  contentTypeId: number;
+  title: string;
+  ratingAverage: number;
+  reviewCount: number;
+  smallThumbnailUrl: string;
+  tourAddress: string;
+  prefer: boolean;
+  notPrefer: boolean;
+  preferTotalCount: number;
+  notPreferTotalCount: number;
+}
diff --git a/src/@types/trips.types.ts b/src/@types/trips.types.ts
index 3197ccfe..6b6bceec 100644
--- a/src/@types/trips.types.ts
+++ b/src/@types/trips.types.ts
@@ -3,12 +3,12 @@ interface TripRequest {
   numberOfPeople: number;
   startDate: string | null;
   endDate: string | null;
-  area: string | null;
-  subarea: string | null;
+  area?: string | null;
+  subarea?: string | null;
 }
 
 interface MyTripType {
-  tripId: number;
+  tripId: string;
   tripName: string;
   startDate: string;
   endDate: string;
@@ -35,18 +35,18 @@ interface ourTripType {
 }
 
 interface ThumbsProps {
-  tripId: number;
+  tripId: string;
   tourId: number;
   prefer: boolean;
   notPrefer: boolean;
 }
-  
+
 interface AuthorityType {
   status: number;
   message: string;
   data: {
     memberId: number;
     tripAuthority: string;
-    TripId: number;
+    tripId: string;
   };
 }
diff --git a/src/api/socket.ts b/src/api/socket.ts
index 000830cf..0ade3027 100644
--- a/src/api/socket.ts
+++ b/src/api/socket.ts
@@ -101,8 +101,6 @@ export const pubUpdateTripItem = (
     destination: `/pub/trips/${tripId}/updateTripItemOrder`,
     body: JSON.stringify(pubUpdateTripItem),
   });
-
-  console.log('데이터', pubUpdateTripItem);
 };
 
 // 여행 날짜별 교통 수단 변경 이벤트 발생시 (01/16 업데이트)
@@ -136,7 +134,6 @@ export const pubDeleteItem = (
     destination: `/pub/tripItems/${tripItemId}/deleteItem`,
     body: JSON.stringify(pubDeleteItem),
   });
-  console.log(pubDeleteItem);
 };
 
 // 멤버 여정 페이지로 입장 이벤트 발생시
diff --git a/src/api/trips.ts b/src/api/trips.ts
index d50faa39..0a89bb54 100644
--- a/src/api/trips.ts
+++ b/src/api/trips.ts
@@ -4,19 +4,36 @@ import authClient from './authClient';
 // 여정 관련 API
 
 // 여정 상세조회
-export const getTrips = async (tripId: number) => {
+export const getTrips = async (tripId: string) => {
   const res = await client.get(`trips/${tripId}`);
   return res;
 };
 
 // 여정 기본정보 수정
-export const putTrips = async (tripId: number, tripsData: TripRequest) => {
-  const res = await client.put(`trips/${tripId}`, tripsData);
+export const putTrips = async (
+  tripId: string,
+  tripRequestData: TripRequest,
+) => {
+  const res = await authClient.put(`trips/${tripId}`, tripRequestData);
+  return res;
+};
+
+// 여행 상세페이지에서 여정에 여행지 등록
+export const postTripsItem = async (
+  tripId: string,
+  tourItemId: number,
+  visitDate: string,
+) => {
+  const requestBody = {
+    tourItemId: tourItemId,
+    visitDate: visitDate,
+  };
+  const res = await authClient.post(`trips/${tripId}`, requestBody);
   return res;
 };
 
 // 여정 탈퇴
-export const deleteTrips = async (tripId: number) => {
+export const deleteTrips = async (tripId: string) => {
   try {
     const res = await authClient.delete(`trips/${tripId}`);
 
@@ -34,7 +51,7 @@ export const postTrips = async (tripsData: TripRequest) => {
 
 // 우리의 관심목록 조회
 export const getTripsLike = async (
-  tripId: number,
+  tripId: string,
   page: number,
   size: number,
 ) => {
@@ -46,7 +63,7 @@ export const getTripsLike = async (
 };
 
 // 우리의 관심 목록 등록
-export const postTripsLike = async (tripId: number, tourItemIds: number[]) => {
+export const postTripsLike = async (tripId: string, tourItemIds: number[]) => {
   const requestBody = {
     tourItemIds: tourItemIds,
   };
@@ -59,7 +76,7 @@ export const postTripsLike = async (tripId: number, tourItemIds: number[]) => {
 
 // 우리의 관심 목록 좋아요/싫어요
 export const postTripsLikeHate = async (
-  tripId: number,
+  tripId: string,
   tourId: number,
   prefer: boolean,
   notPrefer: boolean,
@@ -71,17 +88,17 @@ export const postTripsLikeHate = async (
 };
 
 // 우리의 여행취향 조회
-export const getTripsSurvey = async (tripId: number) => {
+export const getTripsSurvey = async (tripId: string) => {
   const res = await client.get(`trips/${tripId}/survey`);
   return res;
 };
 // 우리의 여행취향 참여/미참여 회원 조회
-export const getTripsSurveyMembers = async (tripId: number) => {
+export const getTripsSurveyMembers = async (tripId: string) => {
   const res = await client.get(`trips/${tripId}/survey/members`);
   return res;
 };
 // 여정을 공유하고 있는 회원 조회
-export const getTripsMembers = async (tripId: number) => {
+export const getTripsMembers = async (tripId: string) => {
   const res = await client.get(`trips/${tripId}/members`);
   return res;
 };
@@ -91,3 +108,21 @@ export const getTripsAuthority = async (tripId: string) => {
   const res = await authClient.get(`trips/${tripId}/authority`);
   return res;
 };
+
+// 나의 여정목록 조회
+export const getMyTrips = async () => {
+  const res = await authClient.get(`trips`);
+  return res;
+};
+
+// 여정 참여 코드 조회
+export const getTripsjoin = async (tripId: string) => {
+  const res = await authClient.get(`trips/${tripId}/join`);
+  return res;
+};
+
+// 여정 참여
+export const postTripsjoin = async (tripId: string, joinCode: string) => {
+  const res = await authClient.post(`trips/${tripId}/join`, { joinCode });
+  return res;
+};
diff --git a/src/components/Auth/Login/LoginForm.tsx b/src/components/Auth/Login/LoginForm.tsx
index db12f7bc..0491d686 100644
--- a/src/components/Auth/Login/LoginForm.tsx
+++ b/src/components/Auth/Login/LoginForm.tsx
@@ -1,7 +1,7 @@
 import type { AuthRequest } from '@/@types/auth.types';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { postEmailLogin } from '@api/auth';
-import { useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { AxiosError } from 'axios';
 import { useState } from 'react';
 import SubmitBtn from '@components/common/button/SubmitBtn';
@@ -26,6 +26,8 @@ const LoginForm = () => {
   });
 
   const navigate = useNavigate();
+  const { state } = useLocation();
+
   // const [userInfo, setUserInfo] = useRecoilState(UserInfoState);
 
   const onLoginSubmit: SubmitHandler<AuthRequest> = async (data) => {
@@ -38,7 +40,11 @@ const LoginForm = () => {
       if (res.data.status === 200) {
         setItem('accessToken', res.data.data.tokenInfo.accessToken);
         // setUserInfo(res.data.data.memberDto);
-        navigate('/');
+        if (state) {
+          navigate(state.prevPath);
+        } else {
+          navigate('/');
+        }
       }
     } catch (err) {
       if (err instanceof AxiosError) {
diff --git a/src/components/DetailSectionBottom/DetailReviewStats.tsx b/src/components/DetailSectionBottom/DetailReviewStats.tsx
index c428443c..f87f181b 100644
--- a/src/components/DetailSectionBottom/DetailReviewStats.tsx
+++ b/src/components/DetailSectionBottom/DetailReviewStats.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { useGetToursReviews } from '@hooks/useReviewStats';
 import { v4 as uuidv4 } from 'uuid';
-import { DownIcon } from '@components/common/icons/Icons';
+import { DropdownIcon } from '@components/common/icons/Icons';
 import useReviewStatsCalculator from '@hooks/useReviewStatsCalculator';
 import { getEmoji } from '@utils/utils';
 
@@ -45,11 +45,11 @@ const DetailReviewStats = () => {
         <div className="flex items-center justify-center">
           <div
             onClick={() => setShowAll(!showAll)}
-            className="cursor-pointer transition-transform duration-300"
+            className="mt-[9px] cursor-pointer transition-transform duration-300"
             style={{
               transform: showAll ? 'rotate(180deg)' : 'rotate(0deg)',
             }}>
-            <DownIcon />
+            <DropdownIcon />
           </div>
         </div>
       )}
diff --git a/src/components/DetailSectionTop/DetailAddSchedule.tsx b/src/components/DetailSectionTop/DetailAddSchedule.tsx
index d6fac6dd..57880903 100644
--- a/src/components/DetailSectionTop/DetailAddSchedule.tsx
+++ b/src/components/DetailSectionTop/DetailAddSchedule.tsx
@@ -2,14 +2,31 @@ import * as Dialog from '@radix-ui/react-dialog';
 import { CalendarIcon } from '@components/common/icons/Icons';
 import Alert from '@components/common/alert/Alert';
 import { useNavigate } from 'react-router-dom';
+import { PlusIcon } from '@components/common/icons/Icons';
+import { useGetMyTrips } from '@hooks/useGetMyTrips';
+import { calculateTripDuration } from '@utils/calculateTripDuration';
+import { calculateDayAndDate } from '@utils/utils';
 
 const DetailAddSchedule = () => {
+  const { myTrips } = useGetMyTrips();
+
+  const { SmallDayArr } = calculateDayAndDate(
+    myTrips[0]?.startDate,
+    myTrips[0]?.endDate,
+  );
+
+  console.log(SmallDayArr);
+
   const navigate = useNavigate();
 
   const handleConfirm = () => {
     navigate('/login');
   };
 
+  const handleCreate = () => {
+    navigate('/create');
+  };
+
   return (
     <Dialog.Root>
       <Dialog.Trigger asChild>
@@ -24,30 +41,51 @@ const DetailAddSchedule = () => {
 
         <Dialog.Content className="data-[state=open]:animate-contentShow fixed left-[50%] top-[97%] z-10 max-h-[85vh] w-[412px] translate-x-[-50%] translate-y-[-90%] rounded-tl-[16px] rounded-tr-[16px] bg-white p-[20px] pb-[50px]  shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none">
           <Dialog.Close className="text-mauve12 m-0 flex w-full justify-end text-[17px] font-medium">
-            <button className="btn-base h-[40px] w-[116px] rounded-full bg-main2 p-0 text-[14px] font-bold text-white disabled:cursor-not-allowed disabled:bg-gray3">
-              + 여행 생성하기
+            <button
+              onClick={handleCreate}
+              className="btn-base h-[40px] w-[145px] rounded-full bg-main2 p-0 text-[14px] font-bold text-white disabled:cursor-not-allowed disabled:bg-gray3">
+              <div className="flex items-center justify-center gap-[6px] text-center">
+                <PlusIcon size={8} color="white" className="mb-[2px]" />
+                새로운 여행 만들기
+              </div>
             </button>
           </Dialog.Close>
 
           <Dialog.Description className="text-mauve11 mb-5 mt-[10px] text-[15px] leading-normal">
-            <div className="flex flex-col items-start justify-start gap-4">
-              <div className="flex flex-shrink-0 flex-grow-0 flex-col items-start justify-start gap-2">
-                <div className="relative mb-[8px] flex h-14 w-[375px] flex-shrink-0 flex-grow-0 items-center justify-start gap-[9px]">
-                  <img
-                    src="https://source.unsplash.com/random​"
-                    className="h-[52px] w-[52px] flex-shrink-0 flex-grow-0 rounded-lg object-cover"
-                  />
-                  <div className="relative flex flex-shrink-0 flex-grow-0 flex-col items-start justify-start gap-2">
-                    <div className="w-[270.04px] flex-shrink-0 flex-grow-0 text-left text-base font-bold text-[#1e1e1e]">
-                      강릉 속초 여행
-                    </div>
-                    <div className="h-[17px] w-[270.04px] flex-shrink-0 flex-grow-0 text-left text-sm font-medium text-[#888]">
-                      2023.12.20 - 12.22 (3박 4일)
+            {myTrips.map((trip, index) => {
+              // 각 여행에 대한 기간을 계산합니다.
+              const tripDuration = calculateTripDuration(
+                trip.startDate,
+                trip.endDate,
+              );
+
+              return (
+                <div
+                  key={index}
+                  className="flex flex-col items-start justify-start gap-4">
+                  <div className="flex flex-shrink-0 flex-grow-0 flex-col items-start justify-start gap-2">
+                    <div className="relative mb-[8px] flex h-14 w-[375px] flex-shrink-0 flex-grow-0 items-center justify-start gap-[9px]">
+                      <img
+                        src={trip.tripThumbnailUrl}
+                        alt={`Thumbnail for ${trip.tripName}`}
+                        className="h-[52px] w-[52px] flex-shrink-0 flex-grow-0 rounded-lg object-cover"
+                      />
+                      <div className="relative flex flex-shrink-0 flex-grow-0 flex-col items-start justify-start">
+                        <div className="w-[270px] flex-shrink-0 flex-grow-0 text-left text-base font-bold text-[#1e1e1e]">
+                          {trip.tripName}
+                        </div>
+                        <div className="h-[17px] w-[270px] flex-shrink-0 flex-grow-0 text-left text-sm font-medium text-[#888]">
+                          {trip.startDate?.replace(/-/g, '.')} -{' '}
+                          {trip.endDate?.substring(5).replace(/-/g, '.')} (
+                          {tripDuration})
+                        </div>
+                      </div>
                     </div>
                   </div>
                 </div>
-              </div>
-            </div>
+              );
+            })}
+
             <div className="flex items-start justify-start gap-1">
               <div className="relative flex h-10 flex-shrink-0 flex-grow-0 items-center justify-center gap-1 rounded-[168px] border-[1.25px] border-solid border-[#29ddf6] px-8 py-2">
                 <div className="flex-shrink-0 flex-grow-0 text-left text-sm font-medium text-[#29ddf6]">
@@ -67,7 +105,7 @@ const DetailAddSchedule = () => {
             }
             onConfirm={handleConfirm}>
             <div className="mt-[25px] flex justify-end">
-              <button className="btn-base bg-main2 text-lg font-bold text-white disabled:cursor-not-allowed disabled:bg-gray3">
+              <button className="btn-base h-14 bg-main2 text-base font-bold text-white disabled:cursor-not-allowed disabled:bg-gray3">
                 일정 추가하기
               </button>
             </div>
diff --git a/src/components/MyTrip/MyTripItem.tsx b/src/components/MyTrip/MyTripItem.tsx
index 2762a3d1..f327aa9c 100644
--- a/src/components/MyTrip/MyTripItem.tsx
+++ b/src/components/MyTrip/MyTripItem.tsx
@@ -31,7 +31,7 @@ const MyTripItem: React.FC<MyTripItemProps> = ({ myTripList }) => {
   const tripDuration = calculateTripDuration(startDate, endDate);
 
   const { mutate: deleteMyTripMutate } = useMutation({
-    mutationFn: (tripId: number) => deleteTrips(tripId),
+    mutationFn: (tripId: string) => deleteTrips(tripId),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['myTrips'] });
     },
diff --git a/src/components/Plan/PlanEditItemBox.tsx b/src/components/Plan/PlanEditItemBox.tsx
index e5b0f944..4c5ce80d 100644
--- a/src/components/Plan/PlanEditItemBox.tsx
+++ b/src/components/Plan/PlanEditItemBox.tsx
@@ -14,6 +14,8 @@ 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';
 
 type PlanItemBoxProps = {
   item: TripItem[];
@@ -33,7 +35,7 @@ const PlanEditItemBox = ({
   }
 
   const { callBackPub } = useContext(socketContext);
-
+  const [, setIsEdit] = useRecoilState(isEditState);
   const [items, setItems] = useState(item);
   const [newData, setNewData] = useState<pubUpdateTripItemReq | null>(null);
   const [selectedItemId, setSelectedItemId] = useState<number | null>(null);
@@ -78,6 +80,7 @@ const PlanEditItemBox = ({
       noun: '여행지',
       verb: '삭제',
     }));
+    setIsEdit(false);
   };
 
   const handleRadioChange = (id: number | null) => {
@@ -105,7 +108,10 @@ const PlanEditItemBox = ({
       <DragDropContext onDragEnd={onDragEnd}>
         <Droppable droppableId="droppableId">
           {(provided) => (
-            <div {...provided.droppableProps} ref={provided.innerRef}>
+            <div
+              {...provided.droppableProps}
+              ref={provided.innerRef}
+              className="mb-[68px]">
               <div className="text-left text-sm font-semibold">{day}</div>
               {items.map((item, index) => (
                 <Draggable
diff --git a/src/components/Plan/PlanItem.tsx b/src/components/Plan/PlanItem.tsx
index a4342a68..b9e2328d 100644
--- a/src/components/Plan/PlanItem.tsx
+++ b/src/components/Plan/PlanItem.tsx
@@ -4,12 +4,11 @@ import { useNavigate } from 'react-router-dom';
 import TripMap from './TripMap';
 import PlanItemBox from './PlanItemBox';
 import PlanEditItemBox from './PlanEditItemBox';
-import { useContext, useEffect, useState } from 'react';
+import { useContext, useEffect } from 'react';
 import { socketContext } from '@hooks/useSocket';
 import { useRecoilState, useRecoilValue } from 'recoil';
-import { visitDateState } from '@recoil/socket';
+import { visitDateState, isEditState } from '@recoil/socket';
 import { pubGetPathAndItems, pubUpdateTransportation } from '@api/socket';
-import { tripIdState } from '@recoil/socket';
 import { tapState } from '@recoil/plan';
 import { useGetTripsAuthority } from '@hooks/useGetTripsAuthority';
 
@@ -21,12 +20,11 @@ type PlanItemProps = {
 const PlanItem: React.FC<PlanItemProps> = ({ date, day }) => {
   const navigate = useNavigate();
   const { tripAuthority } = useGetTripsAuthority();
-  const [isEdit, SetIsEdit] = useState(false);
-  const tripId = useRecoilValue(tripIdState);
+  const [isEdit, setIsEdit] = useRecoilState(isEditState);
+
   const tap = useRecoilValue(tapState);
-  const [visitDate, setVisitDate] = useRecoilState(visitDateState);
-  const { tripItem, tripPath, callBackPub } = useContext(socketContext);
-  console.log(visitDate);
+  const [, setVisitDate] = useRecoilState(visitDateState);
+  const { tripItem, tripPath, callBackPub, tripId } = useContext(socketContext);
 
   useEffect(() => {
     if (tap) {
@@ -34,11 +32,12 @@ const PlanItem: React.FC<PlanItemProps> = ({ date, day }) => {
       if (date && tripId) {
         callBackPub(() => pubGetPathAndItems({ visitDate: date }, tripId));
       }
+      setIsEdit(false);
     }
   }, [tap]);
 
   const handleEdit = () => {
-    SetIsEdit((prev) => !prev);
+    setIsEdit((prev) => !prev);
   };
 
   const handleTranspo = (
diff --git a/src/components/Plan/PlanMoveItem.tsx b/src/components/Plan/PlanMoveItem.tsx
index b06df513..0daa5b5f 100644
--- a/src/components/Plan/PlanMoveItem.tsx
+++ b/src/components/Plan/PlanMoveItem.tsx
@@ -7,6 +7,8 @@ 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';
+import { isEditState } from '@recoil/socket';
 
 interface PlanMoveItemProps {
   isCheck: number | null;
@@ -19,6 +21,7 @@ const PlanMoveItem: React.FC<PlanMoveItemProps> = ({
   tripId,
   visitDate,
 }) => {
+  const [, setIsEdit] = useRecoilState(isEditState);
   const { callBackPub } = useContext(socketContext);
   const day = useRecoilValue(dayState);
   const date = useRecoilValue(dateState);
@@ -50,6 +53,7 @@ const PlanMoveItem: React.FC<PlanMoveItemProps> = ({
       noun: '날짜 이동',
       verb: '완료',
     }));
+    setIsEdit(false);
   };
 
   useEffect(() => {
@@ -81,31 +85,29 @@ const PlanMoveItem: React.FC<PlanMoveItemProps> = ({
 
         <Dialog.Portal>
           <Dialog.Overlay className="data-[state=open]:animate-overlayShow fixed inset-0 z-10 bg-black opacity-70" />
-          <Dialog.Content className="data-[state=open]:animate-contentShow fixed left-[50%] top-[97%] z-10 max-h-[85vh] w-[412px] translate-x-[-50%] translate-y-[-90%] rounded-tl-[16px] rounded-tr-[16px] bg-white p-[20px] pb-[50px]  shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none">
-            <Dialog.Description className="text-mauve11 mb-5 mt-[10px] text-[15px] leading-normal">
+          <Dialog.Content className="data-[state=open]:animate-contentShow fixed left-[50%] top-[97%] z-10 h-[238px] max-h-[85vh] w-[412px] translate-x-[-50%] translate-y-[-90%] rounded-tl-[16px] rounded-tr-[16px] bg-white pb-[34px] shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none">
+            <Dialog.Description className="text-mauve11 mt-[10px] text-[15px] leading-normal">
               <div className="relative flex flex-col items-start justify-start">
-                <div className="h-[150px]">
-                  <div className="absolute left-0 top-0 flex flex-col items-start justify-start">
-                    <div className="relative flex h-12 w-[375px] flex-shrink-0 flex-grow-0 items-center justify-start gap-2 rounded-tl-2xl rounded-tr-2xl bg-white px-5 pb-1 pt-2">
-                      <p className="flex-shrink-0 flex-grow-0 text-left text-[15px] font-bold text-[#1e1e1e]">
-                        날짜 이동
-                      </p>
-                    </div>
-                    <div className="flex flex-shrink-0 flex-grow-0 flex-col items-start justify-start">
-                      <div className="flex h-[52px] w-[375px] flex-shrink-0 flex-grow-0 flex-col justify-start gap-4 bg-white px-5 py-3">
-                        {day.map((day, index) => (
-                          <Dialog.Close asChild key={day}>
-                            <button
-                              onClick={() => handleMoveItem(date[index])}
-                              className="relative flex flex-shrink-0 flex-grow-0 justify-start gap-2">
-                              <PaperIcon />
-                              <p className="flex-shrink-0 flex-grow-0 text-left text-[15px] font-medium text-[#1e1e1e]">
-                                {day}
-                              </p>
-                            </button>
-                          </Dialog.Close>
-                        ))}
-                      </div>
+                <div className="absolute left-0 top-0 flex flex-col items-start justify-start">
+                  <div className="relative flex h-12 w-[375px] flex-shrink-0 flex-grow-0 items-center justify-start gap-2 rounded-tl-2xl rounded-tr-2xl bg-white px-5 pb-1 pt-2">
+                    <p className="flex-shrink-0 flex-grow-0 text-left text-[15px] font-bold text-[#1e1e1e]">
+                      날짜 이동
+                    </p>
+                  </div>
+                  <div className="flex flex-shrink-0 flex-grow-0 flex-col items-start justify-start">
+                    <div className="flex h-[52px] w-[375px] flex-shrink-0 flex-grow-0 flex-col justify-start gap-4 bg-white px-5 py-3">
+                      {day.map((day, index) => (
+                        <Dialog.Close asChild key={day}>
+                          <button
+                            onClick={() => handleMoveItem(date[index])}
+                            className="relative mb-[12px] flex flex-shrink-0 flex-grow-0 justify-start gap-2">
+                            <PaperIcon />
+                            <p className="flex-shrink-0 flex-grow-0 text-left text-[15px] font-medium text-[#1e1e1e]">
+                              {day}
+                            </p>
+                          </button>
+                        </Dialog.Close>
+                      ))}
                     </div>
                   </div>
                 </div>
diff --git a/src/components/Plan/PlanSectionTop.tsx b/src/components/Plan/PlanSectionTop.tsx
index d8b60ad9..480ec571 100644
--- a/src/components/Plan/PlanSectionTop.tsx
+++ b/src/components/Plan/PlanSectionTop.tsx
@@ -6,55 +6,91 @@ import Tab from '@components/common/tab/Tab';
 import PlanItem from './PlanItem';
 import { socketContext } from '@hooks/useSocket';
 import { useContext } from 'react';
-import { pubEnterMember } from '@api/socket';
+import {
+  pubEnterMember,
+  pubConnectMember,
+  pubDisconnectMember,
+} from '@api/socket';
 import { useEffect } from 'react';
-import { useRecoilValue, useRecoilState } from 'recoil';
+import { useRecoilState } from 'recoil';
 import { dayState, dateState } from '@recoil/plan';
-import { tripIdState, memberIdState } from '@recoil/socket';
 import { calculateDayAndDate } from '@utils/utils';
+import { useGetTrips } from '@hooks/useGetTrips';
+import { visitDateState } from '@recoil/socket';
+import { useState } from 'react';
+import { getItem } from '@utils/localStorageFun';
 import PlanSchedule from './PlanSchedule';
 
 const PlanSectionTop = () => {
   const navigate = useNavigate();
-  const tripId = useRecoilValue(tripIdState);
-
-  const pubMember = useRecoilValue(memberIdState);
   const [, setDay] = useRecoilState(dayState);
   const [, setDate] = useRecoilState(dateState);
-
-  if (!pubMember || !tripId) {
-    return <div>에러</div>;
-  }
-
-  const { callBackPub, tripInfo } = useContext(socketContext);
-
-  useEffect(() => {
-    callBackPub(() => pubEnterMember(tripId));
-  }, []);
+  const {
+    callBackPub,
+    tripId,
+    tripInfo,
+    tripItem,
+    tripPath,
+    tripMember,
+    tripBudget,
+  } = useContext(socketContext);
+  const [, setVisitDate] = useRecoilState(visitDateState);
+  const { startDate, endDate } = useGetTrips();
+  const [isEnter, setIsEnter] = useState(false);
 
   let DayArr: string[] = [];
   let DateArr: string[] = [];
 
-  const startDate = tripInfo?.data?.startDate;
-  const endDate = tripInfo?.data?.endDate;
-
   if (startDate && endDate) {
     ({ DayArr, DateArr } = calculateDayAndDate(startDate, endDate));
   }
 
   useEffect(() => {
+    if (startDate) {
+      setVisitDate({ visitDate: startDate });
+    }
     setDay(DayArr);
     setDate(DateArr);
   }, [startDate, endDate]);
 
+  useEffect(() => {
+    callBackPub(() => pubEnterMember(tripId));
+  }, []);
+
+  useEffect(() => {
+    if (tripInfo && tripItem && tripPath && tripMember && tripBudget) {
+      setIsEnter(true);
+    }
+  }, [tripInfo, tripItem, tripPath, tripMember, tripBudget]);
+
+  useEffect(() => {
+    if (isEnter) {
+      const accessToken = getItem('accessToken');
+      if (accessToken) {
+        callBackPub(() => {
+          pubConnectMember({ token: accessToken || '' }, tripId);
+        });
+
+        return () => {
+          callBackPub(() =>
+            pubDisconnectMember({ token: accessToken || '' }, tripId),
+          );
+        };
+      }
+    }
+  }, [isEnter]);
+
   return (
     <div className="min-h-screen">
       <BackBox
         showBack={true}
-        showShare={true}
         backHandler={() => {
           navigate(-1);
         }}
+        showShare={true}
+        shareHandler={() => {
+          navigate(`/trip/${tripId}/share`);
+        }}
       />
       <TripRealtimeEditor />
       <PlanSchedule />
diff --git a/src/components/Plan/TripBudget.tsx b/src/components/Plan/TripBudget.tsx
index ee1e5388..0cd9d2a6 100644
--- a/src/components/Plan/TripBudget.tsx
+++ b/src/components/Plan/TripBudget.tsx
@@ -4,14 +4,11 @@ import { CloseIcon, SettingIcons } from '@components/common/icons/Icons';
 import { useGetTripsAuthority } from '@hooks/useGetTripsAuthority';
 import { socketContext } from '@hooks/useSocket';
 import * as Progress from '@radix-ui/react-progress';
-import { tripIdState } from '@recoil/socket';
 import { useContext, useState } from 'react';
-import { useRecoilValue } from 'recoil';
 
 const TripBudget = () => {
   const { tripAuthority } = useGetTripsAuthority();
-  const { tripBudget } = useContext(socketContext);
-  const tripId = useRecoilValue(tripIdState);
+  const { tripBudget, tripId } = useContext(socketContext);
 
   const budget = tripBudget?.data;
 
@@ -43,11 +40,11 @@ const TripBudget = () => {
 
   return (
     <>
-      <div className={`${!budget?.budget ? 'pb-[55px]' : 'pb-[25px]'} my-4}`}>
+      <div className={`${!budget?.budget ? 'pb-[55px]' : 'pb-[25px]'}`}>
         <div className="caption1 mb-[2px]">사용 경비</div>
         <div className="flex items-center">
           <span className="title2 mr-[2px]">
-            {budget?.calculatedPrice.toLocaleString() ?? '-'}
+            {budget?.calculatedPrice.toLocaleString() ?? 0}
           </span>
           <span className="body1">원</span>
         </div>
@@ -70,44 +67,47 @@ const TripBudget = () => {
           />
         </Progress.Root>
 
-        <div className="caption2 flex items-center justify-between pt-1">
-          <div className="flex items-center">
-            <span className="body5 mr-[4px] text-gray5">목표 경비</span>
+        <div className="caption2 flex items-start justify-between pt-1">
+          <div className="flex items-start">
+            <span className="body5 mr-[4px] pt-[2px] text-gray5">
+              목표 경비
+            </span>
             {tripAuthority == 'WRITE' && (
               <Alert
                 title={'비용을 입력해주세요'}
                 message={''}
                 onConfirm={() => handleSetTargetBudget(inputBudget)}
+                onCancel={() => setInputBudget('')}
                 closeOnConfirm={true}
                 children={
                   <button className="text-gray3">
-                    <SettingIcons color="#D9D9D9" />
-                    {!budget?.budget && (
-                      <div className="h-[31.2px] w-[141px]">
-                        <div className="h-[27.16px] w-[141px]">
-                          <div className="relative left-[-80px] top-8 flex h-[27.16px] w-[141px] items-center justify-center gap-[0.8043220639228821px] rounded-lg bg-[#062139] px-3 py-[7px]">
+                    <div className="flex flex-col items-start">
+                      <SettingIcons color="#D9D9D9" />
+                      {!budget?.budget && (
+                        <div className="h-[31.2px] w-[141px]">
+                          <div className="relative left-[-58px] top-3 flex h-[27.16px] w-[141px] items-center justify-center gap-[0.8px] rounded-lg bg-[#062139] px-3 py-[7px]">
                             <div className="h-3.5 w-[129.36px]">
-                              <span className="caption1 w-[129.36px] text-center text-white">
+                              <span className="caption1 w-full whitespace-nowrap text-center text-white">
                                 목표 경비를 입력해보세요!
                               </span>
                             </div>
                           </div>
+                          <svg
+                            width={12}
+                            height={7}
+                            viewBox="0 0 12 7"
+                            fill="none"
+                            xmlns="http://www.w3.org/2000/svg"
+                            className="relative left-[3px] top-[-21px]"
+                            preserveAspectRatio="xMidYMid meet">
+                            <path
+                              d="M5.94048 0.136719L11.4521 6.20375L0.428827 6.20375L5.94048 0.136719Z"
+                              fill="#062139"
+                            />
+                          </svg>
                         </div>
-                        <svg
-                          width={12}
-                          height={7}
-                          viewBox="0 0 12 7"
-                          fill="none"
-                          xmlns="http://www.w3.org/2000/svg"
-                          className="relative left-[-15.8px] top-0"
-                          preserveAspectRatio="xMidYMid meet">
-                          <path
-                            d="M5.94048 0.136719L11.4521 6.20375L0.428827 6.20375L5.94048 0.136719Z"
-                            fill="#062139"
-                          />
-                        </svg>
-                      </div>
-                    )}
+                      )}
+                    </div>
                   </button>
                 }
                 content={
@@ -115,13 +115,13 @@ const TripBudget = () => {
                     <div className="flex w-full items-center justify-between">
                       <input
                         type="number"
-                        className="title3 text-gray6 placeholder:text-gray4 focus:outline-none"
+                        className="title3 pl-[2px] text-gray6 placeholder:text-gray4 focus:outline-none"
                         placeholder="금액"
                         value={inputBudget}
                         onChange={(e) => setInputBudget(e.target.value)}
                       />
                       <div
-                        className="cursor-pointer"
+                        className="ml-[-16px] cursor-pointer"
                         onClick={() => setInputBudget('')}>
                         {showCloseIcon && (
                           <CloseIcon size={16} fill="#D7D7D7" />
@@ -129,13 +129,15 @@ const TripBudget = () => {
                       </div>
                     </div>
 
-                    <span className="title3 pl-[4.5px] text-gray4">원</span>
+                    <span className="title3 pl-[4px] pr-[5px] text-gray4">
+                      원
+                    </span>
                   </div>
                 }
               />
             )}
           </div>
-          <div>
+          <div className="flex items-start">
             <span>{budget?.budget.toLocaleString() ?? '- '}</span>
             <span>원</span>
           </div>
diff --git a/src/components/Share/CodeInput.tsx b/src/components/Share/CodeInput.tsx
new file mode 100644
index 00000000..3fca6375
--- /dev/null
+++ b/src/components/Share/CodeInput.tsx
@@ -0,0 +1,39 @@
+interface Props {
+  inputCode: string;
+  setInputCode: React.Dispatch<React.SetStateAction<string>>;
+  showError: boolean;
+}
+
+const CodeInput = ({ inputCode, setInputCode, showError }: Props) => {
+  const onCodeChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const changeValue = e.target.value;
+    if (changeValue.length <= 5) {
+      setInputCode(e.target.value);
+    }
+  };
+  return (
+    <div className="relative flex w-full flex-col items-start px-2 ">
+      <div
+        className={`mb-10 mt-6 w-full border-b-[1.5px] border-solid ${
+          showError ? 'border-red' : 'border-gray3 focus-within:border-main2'
+        }`}>
+        <input
+          type="number"
+          autoFocus
+          maxLength={5}
+          placeholder="편집 초대 코드를 입력해주세요."
+          className="title3 mb-2 h-5 w-full bg-transparent text-gray4 outline-none placeholder:text-gray2"
+          onChange={onCodeChange}
+          value={inputCode}
+        />
+      </div>
+      {showError && (
+        <div className="body5 absolute top-[62px] text-red">
+          편집 참여 코드를 다시 한번 확인해주세요.
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default CodeInput;
diff --git a/src/components/Share/CopyBox.tsx b/src/components/Share/CopyBox.tsx
new file mode 100644
index 00000000..7dc6a289
--- /dev/null
+++ b/src/components/Share/CopyBox.tsx
@@ -0,0 +1,38 @@
+import CopyToast from './CopyToast';
+
+interface Props {
+  title: string;
+  subTitle: string;
+  copyValue: string;
+}
+
+const CopyBox = ({ title, subTitle, copyValue }: Props) => {
+  const onCopyClick = () => {
+    navigator.clipboard.writeText(copyValue);
+  };
+
+  return (
+    <div>
+      <div className="mb-4 flex flex-col gap-1">
+        <span className="title3 text-gray7">{`${title} 복사`}</span>
+        <span className="body6 text-gray4">{subTitle}</span>
+      </div>
+      <div className="flex h-12 w-full items-center justify-between rounded-lg border border-solid border-gray2 px-4 py-2">
+        <input
+          className="body5 mr-4 w-full text-gray6 outline-none"
+          readOnly
+          value={copyValue}
+        />
+        <CopyToast title={title}>
+          <div
+            onClick={onCopyClick}
+            className="bg-main3 body3 w-12 rounded-lg p-2 text-main1">
+            복사
+          </div>
+        </CopyToast>
+      </div>
+    </div>
+  );
+};
+
+export default CopyBox;
diff --git a/src/components/Share/CopyToast.tsx b/src/components/Share/CopyToast.tsx
new file mode 100644
index 00000000..4f7492a3
--- /dev/null
+++ b/src/components/Share/CopyToast.tsx
@@ -0,0 +1,36 @@
+import * as Toast from '@radix-ui/react-toast';
+import { ReactNode, useState } from 'react';
+import { ReactComponent as CircleCheckIcon } from '@assets/images/CircleCheck.svg';
+
+interface Props {
+  title: string;
+  children: ReactNode;
+}
+
+const CopyToast = ({ title, children }: Props) => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Toast.Provider duration={2000}>
+      <button
+        onClick={() => {
+          setOpen(true);
+        }}>
+        {children}
+      </button>
+
+      <Toast.Root
+        className="bg-main4  flex h-16 w-[370px] items-center rounded-lg border border-solid border-main2 px-4 py-2 shadow-md"
+        open={open}
+        onOpenChange={setOpen}>
+        <CircleCheckIcon fill="#29DDF6" className="mr-2" />
+        <Toast.Title className="body4 text-main1 [grid-area:_title]">
+          {`${title}가 복사되었습니다.`}
+        </Toast.Title>
+      </Toast.Root>
+      <Toast.Viewport className="fixed left-[50%] top-12 translate-x-[-50%]" />
+    </Toast.Provider>
+  );
+};
+
+export default CopyToast;
diff --git a/src/components/Share/IsEditableModal.tsx b/src/components/Share/IsEditableModal.tsx
new file mode 100644
index 00000000..1465ff79
--- /dev/null
+++ b/src/components/Share/IsEditableModal.tsx
@@ -0,0 +1,68 @@
+import * as Dialog from '@radix-ui/react-dialog';
+import { EditStarIcon } from '@components/common/icons/Icons';
+import Alert from '@components/common/alert/Alert';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { getItem } from '@utils/localStorageFun';
+
+interface Props {
+  isEditable: boolean;
+  setIsEditable: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+const IsEditableModal = ({ isEditable, setIsEditable }: Props) => {
+  const navigate = useNavigate();
+  const { pathname } = useLocation();
+
+  const isLogin = getItem('accessToken');
+
+  const handleConfirm = () => {
+    navigate('/login', { state: { prevPath: `${pathname}/code` } });
+  };
+
+  return (
+    <Dialog.Root open={isEditable} onOpenChange={setIsEditable} modal>
+      <Dialog.Portal>
+        <Dialog.Overlay className="data-[state=open]:animate-overlayShow fixed inset-0 z-10 bg-black opacity-70" />
+        <Dialog.Content className="data-[state=open]:animate-contentShow fixed bottom-0 left-[50%] z-10 flex w-[412px] translate-x-[-50%] flex-col items-center rounded-t-2xl bg-white px-5 pb-8 pt-9">
+          <Dialog.Title className="title3 pb-2.5 text-center text-gray7">
+            편집 참여 코드를 입력하시면
+            <br />
+            여행 계획을 함께 편집할 수 있어요!
+          </Dialog.Title>
+          <Dialog.Description className="pb-8">
+            <EditStarIcon />
+          </Dialog.Description>
+          {isLogin ? (
+            <button
+              onClick={() => {
+                navigate('code');
+              }}
+              className="headline1 mb-4 h-14 w-full rounded-lg bg-main2 text-white outline-none">
+              초대코드 입력하기
+            </button>
+          ) : (
+            <Alert
+              title={'로그인'}
+              message={
+                <>
+                  편집 참여 코드 입력을 위해 로그인이 필요해요.
+                  <br />
+                  로그인하시겠어요?
+                </>
+              }
+              onConfirm={handleConfirm}>
+              <button className="headline1 mb-4 h-14 w-full rounded-lg bg-main2 text-white outline-none">
+                초대코드 입력하기
+              </button>
+            </Alert>
+          )}
+          <Dialog.Close>
+            <button className="body1 text-gray5">보기만 할게요</button>
+          </Dialog.Close>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+};
+
+export default IsEditableModal;
diff --git a/src/components/Trip/EditCodeModal.tsx b/src/components/Trip/EditCodeModal.tsx
new file mode 100644
index 00000000..7d3ca648
--- /dev/null
+++ b/src/components/Trip/EditCodeModal.tsx
@@ -0,0 +1,121 @@
+import { deleteTrips, postTripsjoin } from '@api/trips';
+import CodeInput from '@components/Share/CodeInput';
+import Alert from '@components/common/alert/Alert';
+import { useGetTripsAuthority } from '@hooks/useGetTripsAuthority';
+import { useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import * as Dialog from '@radix-ui/react-dialog';
+import { DeleteIcon, PenIcon } from '@components/common/icons/Icons';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import ToastPopUp from '@components/common/toastpopup/ToastPopUp';
+
+const EditCodeModal = () => {
+  const navigate = useNavigate();
+  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
+  const [inputCode, setInputCode] = useState<string>('');
+  const [showError, setShowError] = useState<boolean>(false);
+  const [isEditModal, setIsEditModal] = useState<boolean>(false);
+  const [isToastVisible, setIsToastVisible] = useState(false);
+
+  const { id: tripId } = useParams();
+  const { tripAuthority } = useGetTripsAuthority();
+
+  const queryClient = useQueryClient();
+
+  const { mutate: deleteMutate } = useMutation({
+    mutationFn: (tripId: string) => deleteTrips(tripId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['myTrips'] });
+    },
+    onError: () => console.log('error'),
+  });
+
+  const handleDelete = () => {
+    if (tripId) {
+      deleteMutate(tripId);
+    }
+    setIsEditModal(false);
+    setIsToastVisible(true);
+    setTimeout(() => navigate('/mytrip'), 2000);
+  };
+
+  const handleConfirm = async () => {
+    if (tripId) {
+      try {
+        const { data } = await postTripsjoin(tripId, inputCode);
+        if (data.status === 200) {
+          setIsModalOpen(false);
+        }
+      } catch (err) {
+        setShowError(true);
+        setInputCode('');
+        console.error('참여 코드 요청 중 에러 발생', err);
+      }
+    }
+  };
+
+  return (
+    <>
+      {isToastVisible && <ToastPopUp noun="여행 일정" verb="삭제" />}
+      {tripAuthority === 'WRITE' ? (
+        <Dialog.Root modal>
+          <Dialog.Trigger>
+            <button
+              onClick={() => setIsEditModal(true)}
+              className="body3 rounded-lg border-[1px] border-solid border-gray2 px-[10px] py-[8px] text-gray4">
+              편집
+            </button>
+          </Dialog.Trigger>
+          {isEditModal && (
+            <Dialog.Portal>
+              <Dialog.Overlay className="data-[state=open]:animate-overlayShow fixed inset-0 z-10 bg-black opacity-70" />
+              <Dialog.Content className="data-[state=open]:animate-contentShow fixed bottom-0 left-[50%] z-10 flex w-[412px] translate-x-[-50%] flex-col items-center rounded-t-2xl bg-white px-5 pb-8 pt-9">
+                <Dialog.Title className="headline2 mr-auto pb-2.5 text-gray7">
+                  나의 여정
+                </Dialog.Title>
+
+                <>
+                  <button
+                    onClick={() => navigate('edit')}
+                    className="body1 minh-6 mb-2 mr-auto flex w-full items-center rounded-lg py-2 font-medium text-gray7 outline-none">
+                    <PenIcon size={24} color="#888888" />
+                    <span className="pl-[8px]">수정하기</span>
+                  </button>
+                  <Alert
+                    title="여행 일정 삭제"
+                    message="선택한 일정을 삭제하시겠습니까?"
+                    onConfirm={handleDelete}
+                    closeOnConfirm={true}>
+                    <button className="body1 mb-2 mr-auto flex min-h-6 w-full items-center rounded-lg py-2 font-medium text-gray7 outline-none">
+                      <DeleteIcon size={24} color="#888888" />
+                      <span className="pl-[8px]">삭제하기</span>
+                    </button>
+                  </Alert>
+                </>
+              </Dialog.Content>
+            </Dialog.Portal>
+          )}
+        </Dialog.Root>
+      ) : (
+        <Alert
+          title="편집 참여 코드 입력"
+          content={
+            <CodeInput
+              inputCode={inputCode}
+              setInputCode={setInputCode}
+              showError={showError}
+            />
+          }
+          isOpen={isModalOpen}
+          setIsOpen={setIsModalOpen}
+          onConfirm={handleConfirm}>
+          <button className="body3 rounded-lg border-2 border-solid border-gray2 p-2 text-gray4">
+            편집
+          </button>
+        </Alert>
+      )}
+    </>
+  );
+};
+
+export default EditCodeModal;
diff --git a/src/components/Trip/LikedToursList.tsx b/src/components/Trip/LikedToursList.tsx
index eab8eeea..5587077e 100644
--- a/src/components/Trip/LikedToursList.tsx
+++ b/src/components/Trip/LikedToursList.tsx
@@ -15,15 +15,16 @@ export const LikedToursList = () => {
   >(null);
 
   const navigate = useNavigate();
-  const params = useParams();
+  const { id: tripId } = useParams();
 
-  const [selectedTripId, _] = useState(Number(params.id));
+  if (!tripId) {
+    return;
+  }
 
   const { fetchNextPage, hasNextPage, data, isLoading, error } =
     useInfiniteQuery({
       queryKey: ['ourTrips'],
-      queryFn: ({ pageParam = 0 }) =>
-        getTripsLike(selectedTripId, pageParam, 10),
+      queryFn: ({ pageParam = 0 }) => getTripsLike(tripId, pageParam, 10),
       initialPageParam: 0,
       getNextPageParam: (lastPage) => {
         if (
@@ -62,7 +63,7 @@ export const LikedToursList = () => {
             fetchNextPage={fetchNextPage}
             hasNextPage={hasNextPage}
             isLoading={isLoading}
-            selectedTripId={selectedTripId}
+            selectedTripId={tripId}
             selectedContentTypeId={selectedContentTypeId}
           />
         </div>
diff --git a/src/components/Trip/LikedToursLists/LikedToursListBox.tsx b/src/components/Trip/LikedToursLists/LikedToursListBox.tsx
index 56c2db3d..39ef3aae 100644
--- a/src/components/Trip/LikedToursLists/LikedToursListBox.tsx
+++ b/src/components/Trip/LikedToursLists/LikedToursListBox.tsx
@@ -12,7 +12,7 @@ interface LikedToursListProps {
   hasNextPage: boolean;
   isLoading: boolean;
   selectedContentTypeId: number | null;
-  selectedTripId: number;
+  selectedTripId: string;
 }
 
 const LikedToursListBox: React.FC<LikedToursListProps> = ({
diff --git a/src/components/Trip/LikedToursLists/LikedToursListItem.tsx b/src/components/Trip/LikedToursLists/LikedToursListItem.tsx
index 8fb54656..7260e8fa 100644
--- a/src/components/Trip/LikedToursLists/LikedToursListItem.tsx
+++ b/src/components/Trip/LikedToursLists/LikedToursListItem.tsx
@@ -12,7 +12,7 @@ import { useState } from 'react';
 
 interface LikedToursListItemProps {
   ourTripList: ourTripType;
-  selectedTripId: number;
+  selectedTripId: string;
 }
 
 const LikedToursListItem: React.FC<LikedToursListItemProps> = ({
diff --git a/src/components/Trip/TripInfo.tsx b/src/components/Trip/TripInfo.tsx
index 8dd648a5..973a38b1 100644
--- a/src/components/Trip/TripInfo.tsx
+++ b/src/components/Trip/TripInfo.tsx
@@ -5,20 +5,25 @@ import TripSurveyMember from '@components/common/modal/children/TripSurveyMember
 import { Modal } from '@components/common/modal';
 import { useQuery } from '@tanstack/react-query';
 import { getTripsMembers } from '@api/trips';
-import { tripIdState } from '@recoil/socket';
 // import { ReactComponent as NullUser } from '@assets/images/NullUser.svg';
 import { DownIcon } from '@components/common/icons/Icons';
 import { useState } from 'react';
 import { UserIcon } from '@components/common/icons/Icons';
+import { useGetTripsAuthority } from '@hooks/useGetTripsAuthority';
 
 const ShareList = () => {
-  const tripId = Number(useRecoilValue(tripIdState));
+  const { tripId } = useGetTripsAuthority();
+
   const { data: tripsMembers } = useQuery({
     queryKey: ['tripsMembers', tripId],
-    queryFn: () => getTripsMembers(tripId),
+    queryFn: () =>
+      tripId != null
+        ? getTripsMembers(tripId)
+        : Promise.reject('tripId is null'),
+    enabled: !!tripId,
   });
   const members = tripsMembers?.data?.data?.tripMemberSimpleInfos;
-
+  console.log(tripsMembers);
   return (
     <>
       <hr className="my-3 border-solid border-gray2" />
@@ -54,15 +59,20 @@ const ShareList = () => {
 };
 
 const TripInfo = () => {
+  const { tripId } = useGetTripsAuthority();
   const modalChildren = useRecoilValue(modalChildrenState);
   const [isModalOpen, setIsModalOpen] = useRecoilState(isModalOpenState);
-  const tripId = Number(useRecoilValue(tripIdState));
   const [isAccordion, setIsAccordion] = useState(false);
 
   const { data: tripsMembers } = useQuery({
     queryKey: ['tripsMembers', tripId],
-    queryFn: () => getTripsMembers(tripId),
+    queryFn: () =>
+      tripId != null
+        ? getTripsMembers(tripId)
+        : Promise.reject('tripId is null'),
+    enabled: !!tripId,
   });
+
   const members = tripsMembers?.data?.data?.tripMemberSimpleInfos;
 
   const closeModal = () => {
@@ -73,6 +83,10 @@ const TripInfo = () => {
     setIsAccordion((prev) => !prev);
   };
 
+  if (!tripId) {
+    return <div>error</div>;
+  }
+
   return (
     <>
       <div className="my-5">
diff --git a/src/components/Trip/TripPreference.tsx b/src/components/Trip/TripPreference.tsx
index ca11afda..432c72f2 100644
--- a/src/components/Trip/TripPreference.tsx
+++ b/src/components/Trip/TripPreference.tsx
@@ -8,9 +8,10 @@ import {
 } from '@utils/calculatePercentage';
 import { modalChildrenState, isModalOpenState } from '@recoil/modal';
 import { getTripsSurveyMembers } from '@api/trips';
-import { tripIdState } from '@recoil/socket';
-import { useRecoilValue, useSetRecoilState, useRecoilState } from 'recoil';
+import { useSetRecoilState, useRecoilState } from 'recoil';
 import { participantsState } from '@recoil/trip';
+import { useGetTripsAuthority } from '@hooks/useGetTripsAuthority';
+
 interface RatioBarParams {
   value: number;
   total: number;
@@ -96,6 +97,7 @@ const Percentage = ({ value, total, color }: PercentageParams) => (
 );
 
 const TripPreference: React.FC = () => {
+  const { tripId } = useGetTripsAuthority();
   const [A, setA] = useState<[number, number]>([0, 0]);
   const [B, setB] = useState<[number, number]>([0, 0]);
   const [C, setC] = useState<[number, number]>([0, 0]);
@@ -103,12 +105,15 @@ const TripPreference: React.FC = () => {
   const [E, setE] = useState<[number, number]>([0, 0]);
   const setModalChildren = useSetRecoilState(modalChildrenState);
   const setIsModalOpen = useSetRecoilState(isModalOpenState);
-  const tripId = Number(useRecoilValue(tripIdState));
   const [participants, setParticipants] = useRecoilState(participantsState);
 
   const { data: tripsSurveyMembers } = useQuery({
     queryKey: ['tripsSurveyMembers', tripId],
-    queryFn: () => getTripsSurveyMembers(tripId),
+    queryFn: () =>
+      tripId != null
+        ? getTripsSurveyMembers(tripId)
+        : Promise.reject('tripId is null'),
+    enabled: !!tripId,
   });
 
   useEffect(() => {
@@ -118,7 +123,11 @@ const TripPreference: React.FC = () => {
 
   const { data: tripPreference, isLoading } = useQuery({
     queryKey: ['tripPreference', tripId],
-    queryFn: () => getTripsSurvey(tripId),
+    queryFn: () =>
+      tripId != null
+        ? getTripsSurvey(tripId)
+        : Promise.reject('tripId is null'),
+    enabled: !!tripId,
   });
 
   useEffect(() => {
diff --git a/src/components/Trip/TripRealtimeEditor.tsx b/src/components/Trip/TripRealtimeEditor.tsx
index 895b51e4..3e47bee2 100644
--- a/src/components/Trip/TripRealtimeEditor.tsx
+++ b/src/components/Trip/TripRealtimeEditor.tsx
@@ -1,46 +1,14 @@
-import { useRecoilValue } from 'recoil';
-import { tripIdState } from '@recoil/socket';
-import { useEffect, useState } from 'react';
 import { socketContext } from '@hooks/useSocket';
 import { useContext } from 'react';
-import { pubConnectMember, pubDisconnectMember } from '@api/socket';
 import { UserIcon } from '@components/common/icons/Icons';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import { Navigation } from 'swiper/modules';
-import { getItem } from '@utils/localStorageFun';
 
 const TripRealtimeEditor = () => {
-  const tripId = useRecoilValue(tripIdState);
-  const { callBackPub, tripMember } = useContext(socketContext);
-  const [token, setToken] = useState('');
-  const [pubMember, setPubMember] = useState({ token: '' });
-
-  useEffect(() => {
-    const accessToken = getItem('accessToken');
-    if (accessToken) {
-      setToken(accessToken);
-    }
-  }, []);
-
-  useEffect(() => {
-    setPubMember({ token: token || '' });
-  }, [token]);
-
-  useEffect(() => {
-    if (pubMember && tripId) {
-      callBackPub(() => {
-        pubConnectMember(pubMember, tripId);
-      });
-      return () => {
-        callBackPub(() => pubDisconnectMember(pubMember, tripId));
-      };
-    }
-  }, [pubMember]);
+  const { tripMember } = useContext(socketContext);
 
   const tripMemberData = tripMember?.data;
-  useEffect(() => {
-    console.log('tripMemberData', tripMemberData);
-  }, [tripMemberData]);
+
   return (
     <div className="my-5">
       <Swiper
diff --git a/src/components/Trip/TripSchedule.tsx b/src/components/Trip/TripSchedule.tsx
index c68a60e3..79a8c178 100644
--- a/src/components/Trip/TripSchedule.tsx
+++ b/src/components/Trip/TripSchedule.tsx
@@ -1,19 +1,28 @@
 import { UserIcon } from '@components/common/icons/Icons';
+import { useGetTrips } from '@hooks/useGetTrips';
+import EditCodeModal from './EditCodeModal';
 
 export const TripSchedule = () => {
+  const { tripName, startDate, endDate, numberOfPeople } = useGetTrips();
+
   return (
     <>
       <hr className="my-3 border-solid border-gray2" />
       <div className="flex items-center justify-between">
-        <div className="flex items-center">
-          <div className="title1 mb-[10px] mr-1">강릉 여행 일정</div>
+        <div className="flex">
+          <div className="title1 mb-[10px] mr-1">{tripName}</div>
           <div className="flex items-center pb-[10px]">
             <UserIcon size={20} fill="#888" color="#888" />
-            <span className="body4 pt-[1px] text-gray4">5</span>
+            <span className="body4 pt-[1px] text-gray4">{numberOfPeople}</span>
           </div>
         </div>
+
+        <EditCodeModal />
       </div>
-      <span className="body1 text-gray4">23.12.23 - 23.12.25</span>
+      <span className="body1 text-gray4">
+        {startDate?.substring(2).replace(/-/g, '.') || ''} -{' '}
+        {endDate?.substring(5).replace(/-/g, '.') || ''}
+      </span>
     </>
   );
 };
diff --git a/src/components/Trip/TripSectionTop.tsx b/src/components/Trip/TripSectionTop.tsx
index 59ef58eb..d1388108 100644
--- a/src/components/Trip/TripSectionTop.tsx
+++ b/src/components/Trip/TripSectionTop.tsx
@@ -6,21 +6,34 @@ import { useNavigate } from 'react-router-dom';
 import PlanTripButton from './PlanTripButton';
 import { LikedToursList } from './LikedToursList';
 import { useGetTripsAuthority } from '@hooks/useGetTripsAuthority';
+import { useEffect, useState } from 'react';
+import IsEditableModal from '@components/Share/IsEditableModal';
 
 const TripSectionTop = () => {
   const navigate = useNavigate();
   const { tripAuthority } = useGetTripsAuthority();
+  const [isEditable, setIsEditable] = useState<boolean>(false);
 
-  console.log(tripAuthority);
+  useEffect(() => {
+    if (tripAuthority !== null) {
+      if (tripAuthority !== 'WRITE') {
+        setIsEditable(true);
+      }
+    }
+  }, [tripAuthority]);
 
   return (
     <div className="min-h-screen">
+      <IsEditableModal isEditable={isEditable} setIsEditable={setIsEditable} />
       <BackBox
         showBack={true}
-        showShare={true}
         backHandler={() => {
           navigate(-1);
         }}
+        showShare={true}
+        shareHandler={() => {
+          navigate('share');
+        }}
       />
       <TripInfo />
       <PlanTripButton />
diff --git a/src/components/common/BackBox/BackBox.tsx b/src/components/common/BackBox/BackBox.tsx
index 4af0db0f..0d29c96f 100644
--- a/src/components/common/BackBox/BackBox.tsx
+++ b/src/components/common/BackBox/BackBox.tsx
@@ -10,6 +10,7 @@ interface Props {
   showSave?: boolean;
   saveHandler?: VoidFunction;
   showShare?: boolean;
+  shareHandler?: VoidFunction;
 }
 
 const BackBox = ({
@@ -21,6 +22,7 @@ const BackBox = ({
   showSave,
   saveHandler,
   showShare,
+  shareHandler,
 }: Props) => {
   const onBackClick = () => {
     backHandler && backHandler();
@@ -55,7 +57,9 @@ const BackBox = ({
         </button>
       )}
       {showShare && (
-        <button className="headline2 absolute right-0 text-main2">
+        <button
+          className="headline2 absolute right-0 text-main2"
+          onClick={shareHandler}>
           <ShareIcon />
         </button>
       )}
diff --git a/src/components/common/alert/Alert.tsx b/src/components/common/alert/Alert.tsx
index df7f1dd1..dbb26a3f 100644
--- a/src/components/common/alert/Alert.tsx
+++ b/src/components/common/alert/Alert.tsx
@@ -3,13 +3,15 @@ import * as Dialog from '@radix-ui/react-dialog';
 
 interface AlertProps {
   title: string;
-  message: ReactNode;
+  message?: ReactNode;
   onConfirm: (() => void) | ((e: React.MouseEvent<HTMLElement>) => void);
   onCancel?: (() => void) | ((e: React.MouseEvent<HTMLElement>) => void);
   children: ReactNode;
   content?: ReactNode;
   closeOnConfirm?: boolean;
   isCheck?: number | null;
+  isOpen?: boolean;
+  setIsOpen?: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 const Alert: FC<AlertProps> = ({
@@ -21,8 +23,10 @@ const Alert: FC<AlertProps> = ({
   content,
   closeOnConfirm = false,
   isCheck = true,
+  isOpen,
+  setIsOpen,
 }) => (
-  <Dialog.Root>
+  <Dialog.Root open={isOpen} onOpenChange={setIsOpen}>
     <Dialog.Trigger asChild disabled={!isCheck}>
       {children}
     </Dialog.Trigger>
@@ -31,10 +35,10 @@ const Alert: FC<AlertProps> = ({
       <Dialog.Content
         className={`${
           content && 'pb-[16px] pt-10'
-        } fixed left-[50%] top-[50%] z-[130] flex min-h-[192px] w-[346px] translate-x-[-50%] translate-y-[-50%] flex-col items-center justify-center rounded-[16px] bg-white shadow-lg focus:outline-none`}>
+        } fixed left-[50%] top-[50%] z-[130] flex min-h-[192px] w-[309px] translate-x-[-50%] translate-y-[-50%] flex-col items-center justify-center rounded-2xl bg-white px-[14px] shadow-lg focus:outline-none`}>
         <Dialog.Description
           className={`${
-            content ? 'w-[80%] text-left' : 'text-center text-[15px]'
+            content ? 'w-full pl-2 text-left' : 'text-center text-[15px]'
           } mt-[10px] font-bold leading-normal`}>
           <p
             className={` ${
@@ -49,7 +53,7 @@ const Alert: FC<AlertProps> = ({
           <Dialog.Close asChild>
             <button
               onClick={onCancel}
-              className="btn-base h-[48px] w-[134px] border border-solid border-gray3 bg-white p-[8px] text-[15px] font-bold text-[#888]">
+              className="btn-base h-[48px] w-[134px] border border-solid border-gray3 bg-white p-[8px] text-[15px] font-bold text-[#888] focus:outline-none">
               취소
             </button>
           </Dialog.Close>
diff --git a/src/components/common/button/ListSelectBtn.tsx b/src/components/common/button/ListSelectBtn.tsx
index 4328e6d2..e4f439df 100644
--- a/src/components/common/button/ListSelectBtn.tsx
+++ b/src/components/common/button/ListSelectBtn.tsx
@@ -9,8 +9,9 @@ interface ListSelectBtnProps {
 export const ListSelectBtn = ({ children, onClick }: ListSelectBtnProps) => {
   const [isActive, setIsActive] = useState(false);
 
-  const handleClick = () => {
+  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
     setIsActive(!isActive);
+    e.stopPropagation();
     if (onClick) {
       onClick();
     }
@@ -36,15 +37,16 @@ interface ListCheckBtnProps {
 export const ListCheckBtn = ({ onClick }: ListCheckBtnProps) => {
   const [isActive, setIsActive] = useState(false);
 
-  const handleClick = () => {
+  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
     setIsActive(!isActive);
+    e.stopPropagation();
     if (onClick) {
       onClick();
     }
   };
 
   return (
-    <div className="flex items-center justify-center">
+    <div className="m-2 flex items-center justify-center">
       <button
         onClick={handleClick}
         className={`focus:shadow-outline-blue body3 flex size-[20px] shrink-0 items-center justify-center rounded-[32px] text-white transition-colors duration-100 focus:outline-none ${
diff --git a/src/components/common/icons/Icons.tsx b/src/components/common/icons/Icons.tsx
index 6d6767ff..6704db50 100644
--- a/src/components/common/icons/Icons.tsx
+++ b/src/components/common/icons/Icons.tsx
@@ -480,6 +480,7 @@ export const PlusIcon: React.FC<IconProps> = ({
   size = 20,
   color = 'black',
   fill = 'none',
+  className,
 }) => {
   return (
     <svg
@@ -487,7 +488,8 @@ export const PlusIcon: React.FC<IconProps> = ({
       width={size}
       height={size}
       viewBox="0 0 14 14"
-      fill={fill}>
+      fill={fill}
+      className={className}>
       <path
         fillRule="evenodd"
         clipRule="evenodd"
@@ -1562,6 +1564,56 @@ export const OrangeIcon: React.FC<IconProps> = ({ size = 20, className }) => {
   );
 };
 
+export const EditStarIcon = () => {
+  return (
+    <svg
+      width="77"
+      height="75"
+      viewBox="0 0 77 75"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <g id="Group 36910">
+        <g id="Group 36909">
+          <path
+            id="primary"
+            d="M48.7505 22.0781H16.5005C13.532 22.0781 11.1255 24.451 11.1255 27.3781V69.7781C11.1255 72.7052 13.532 75.0781 16.5005 75.0781H48.7505C51.719 75.0781 54.1255 72.7052 54.1255 69.7781V27.3781C54.1255 24.451 51.719 22.0781 48.7505 22.0781Z"
+            fill="#D4E1E4"
+          />
+          <path
+            id="Vector 868"
+            d="M22.1255 40.0781H42.1255"
+            stroke="#8DA3B8"
+            stroke-width="3"
+            stroke-linecap="round"
+          />
+          <path
+            id="Vector 869"
+            d="M22.1255 50.0781H42.1255"
+            stroke="#8DA3B8"
+            stroke-width="3"
+            stroke-linecap="round"
+          />
+          <path
+            id="secondary"
+            d="M43.1255 22.0781H21.6199V27.3281C21.6199 28.7205 22.1864 30.0559 23.1946 31.0404C24.2029 32.025 25.5704 32.5781 26.9963 32.5781H37.7491C39.175 32.5781 40.5425 32.025 41.5508 31.0404C42.559 30.0559 43.1255 28.7205 43.1255 27.3281V22.0781ZM8.42088 38.5894L26.2167 55.9406C26.708 56.4436 26.9864 57.1093 26.9963 57.8043V61.4531C26.9963 62.1493 26.7131 62.817 26.209 63.3092C25.7048 63.8015 25.0211 64.0781 24.3081 64.0781H20.5715C20.2177 64.0801 19.867 64.0139 19.5395 63.8832C19.212 63.7526 18.9141 63.5601 18.6629 63.3168L0.893928 45.9394C0.401379 45.4487 0.125488 44.789 0.125488 44.1019C0.125488 43.4148 0.401379 42.755 0.893928 42.2644L4.6574 38.5894C5.1599 38.1084 5.8355 37.839 6.53914 37.839C7.24278 37.839 7.91838 38.1084 8.42088 38.5894Z"
+            fill="#5996CE"
+          />
+        </g>
+        <path
+          id="Star 12"
+          d="M61.6876 2.61263C62.0098 1.74201 63.2412 1.74201 63.5633 2.61263L65.572 8.04084C65.6732 8.31456 65.8891 8.53037 66.1628 8.63165L71.591 10.6403C72.4616 10.9624 72.4616 12.1938 71.591 12.516L66.1628 14.5246C65.8891 14.6259 65.6732 14.8417 65.572 15.1154L63.5633 20.5436C63.2412 21.4142 62.0098 21.4142 61.6876 20.5436L59.679 15.1154C59.5777 14.8417 59.3619 14.6259 59.0882 14.5246L53.66 12.516C52.7894 12.1938 52.7894 10.9624 53.66 10.6403L59.0882 8.63165C59.3619 8.53037 59.5777 8.31456 59.679 8.04084L61.6876 2.61263Z"
+          fill="#FFF175"
+        />
+        <path
+          id="Star 13"
+          d="M69.1876 21.6126C69.5098 20.742 70.7412 20.742 71.0633 21.6126L71.8566 23.7562C71.9578 24.03 72.1736 24.2458 72.4474 24.3471L74.591 25.1403C75.4616 25.4624 75.4616 26.6938 74.591 27.016L72.4474 27.8092C72.1736 27.9105 71.9578 28.1263 71.8566 28.4L71.0633 30.5436C70.7412 31.4142 69.5098 31.4142 69.1876 30.5436L68.3944 28.4C68.2931 28.1263 68.0773 27.9105 67.8036 27.8092L65.66 27.016C64.7894 26.6938 64.7894 25.4624 65.66 25.1403L67.8036 24.3471C68.0773 24.2458 68.2931 24.03 68.3944 23.7562L69.1876 21.6126Z"
+          fill="#FFF175"
+        />
+      </g>
+    </svg>
+  );
+};
+
 export const GreenIcon: React.FC<IconProps> = ({ size = 20, className }) => {
   return (
     <svg
@@ -1677,3 +1729,24 @@ export const PaperIcon: React.FC<IconProps> = ({}) => {
     </svg>
   );
 };
+
+export const DropdownIcon: React.FC<IconProps> = ({}) => {
+  return (
+    <svg
+      width={23}
+      height={9}
+      viewBox="0 0 23 9"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      preserveAspectRatio="xMidYMid meet">
+      <path
+        d="M1.03125 1.22656L11.0311 7.60992L21.0313 1.22656"
+        stroke="#D7D7D7"
+        strokeWidth={2}
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+};
+
+
diff --git a/src/components/common/tab/Tab.tsx b/src/components/common/tab/Tab.tsx
index f3a799c9..c75d14f2 100644
--- a/src/components/common/tab/Tab.tsx
+++ b/src/components/common/tab/Tab.tsx
@@ -37,7 +37,7 @@ const Tab = ({ lists, contents }: TabProps) => {
               key={index}
               className={`${
                 isDayTab ? 'caption1' : 'headline1 flex-1'
-              } flex min-w-[57px] cursor-pointer select-none items-center justify-center overflow-x-scroll border-b-2 border-solid border-gray2 py-[8px] leading-none text-gray4 outline-none data-[state=active]:border-b-2 data-[state=active]:border-solid data-[state=active]:border-black data-[state=active]:text-black`}
+              } flex min-w-[57px] cursor-pointer select-none items-center justify-center border-b-2 border-solid border-gray2 py-[8px] leading-none text-gray4 outline-none data-[state=active]:border-b-2 data-[state=active]:border-solid data-[state=active]:border-black data-[state=active]:text-black`}
               value={`tab${index}`}>
               {list}
             </Tabs.Trigger>
diff --git a/src/components/common/toastpopup/ToastPopUp.tsx b/src/components/common/toastpopup/ToastPopUp.tsx
index 1abfa1d9..4dbf53ca 100644
--- a/src/components/common/toastpopup/ToastPopUp.tsx
+++ b/src/components/common/toastpopup/ToastPopUp.tsx
@@ -22,7 +22,7 @@ const ToastPopUp: React.FC<ToastPopUpProps> = ({ noun, verb }) => {
   }, []);
 
   useEffect(() => {
-    if (noun === '일정' || noun === '날짜 이동') {
+    if (noun === '일정' || noun === '날짜 이동' || noun === '여행 일정') {
       setParticle('이');
     }
   }, [noun]);
diff --git a/src/hooks/useCounter.ts b/src/hooks/useCounter.ts
index 4ff26ba9..f5465463 100644
--- a/src/hooks/useCounter.ts
+++ b/src/hooks/useCounter.ts
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 const useCounter = (
   initialValue: number = 0,
@@ -7,6 +7,10 @@ const useCounter = (
 ): [number, () => void, () => void] => {
   const [value, setValue] = useState<number>(initialValue);
 
+  useEffect(() => {
+    setValue(initialValue);
+  }, [initialValue]);
+
   const increase = () => {
     setValue((prevValue) => Math.min(prevValue + 1, max));
   };
diff --git a/src/hooks/useGetMyTrips.ts b/src/hooks/useGetMyTrips.ts
new file mode 100644
index 00000000..754188ed
--- /dev/null
+++ b/src/hooks/useGetMyTrips.ts
@@ -0,0 +1,28 @@
+import { useQuery } from '@tanstack/react-query';
+import { getMyTrips } from '@api/trips';
+
+interface Trip {
+  tripId: number;
+  tripName: string;
+  startDate: string;
+  endDate: string;
+  numberOfPeople: number;
+  tripStatus: string;
+  tripThumbnailUrl: string;
+}
+
+export const useGetMyTrips = (): { myTrips: Trip[] } => {
+  const { data, isLoading, isError } = useQuery({
+    queryKey: ['getMyTrips'],
+    queryFn: () => getMyTrips(),
+    staleTime: 60000,
+  });
+
+  const myTrips = data?.data.data;
+
+  if (isLoading || isError) {
+    return { myTrips: [] };
+  }
+
+  return { myTrips };
+};
diff --git a/src/hooks/useGetTrips.ts b/src/hooks/useGetTrips.ts
new file mode 100644
index 00000000..7e1c0445
--- /dev/null
+++ b/src/hooks/useGetTrips.ts
@@ -0,0 +1,43 @@
+import { useQuery } from '@tanstack/react-query';
+import { getTrips } from '@api/trips';
+import { useParams } from 'react-router-dom';
+
+type useGetTripsReturn = {
+  tripName: string | null;
+  startDate: string | null;
+  endDate: string | null;
+  numberOfPeople: number | null;
+};
+
+export const useGetTrips = (): useGetTripsReturn => {
+  const { id } = useParams();
+
+  const defaultReturn = {
+    tripName: null,
+    startDate: null,
+    endDate: null,
+    numberOfPeople: null,
+  };
+
+  if (!id) {
+    return defaultReturn;
+  }
+
+  const { data, isLoading, isError } = useQuery({
+    queryKey: ['getTrips', id],
+    queryFn: () => getTrips(id),
+    enabled: !!id,
+    staleTime: 60000,
+  });
+
+  const tripName = data?.data.data.tripName;
+  const startDate = data?.data.data.startDate;
+  const endDate = data?.data.data.endDate;
+  const numberOfPeople = data?.data.data.numberOfPeople;
+
+  if (isLoading || isError) {
+    return defaultReturn;
+  }
+
+  return { tripName, startDate, endDate, numberOfPeople };
+};
diff --git a/src/hooks/useGetTripsAuthority.ts b/src/hooks/useGetTripsAuthority.ts
index efef5695..2db402cc 100644
--- a/src/hooks/useGetTripsAuthority.ts
+++ b/src/hooks/useGetTripsAuthority.ts
@@ -6,16 +6,15 @@ import { useParams } from 'react-router-dom';
 type useGetTripsAuthorityReturn = {
   tripAuthority: string | null;
   memberId: number | null;
-  TripId: number | null;
+  tripId: string | null;
 };
 
 export const useGetTripsAuthority = (): useGetTripsAuthorityReturn => {
   const { id } = useParams();
-
   const defaultReturn = {
     tripAuthority: null,
     memberId: null,
-    TripId: null,
+    tripId: null,
   };
 
   if (!id) {
@@ -25,15 +24,16 @@ export const useGetTripsAuthority = (): useGetTripsAuthorityReturn => {
     queryKey: ['getTripsAuthority', id],
     queryFn: () => getTripsAuthority(id),
     enabled: !!id,
+    staleTime: 60000,
   });
 
   const tripAuthority = data?.data.data.tripAuthority;
   const memberId = data?.data.data.memberId;
-  const TripId = data?.data.data.TripId;
+  const tripId = data?.data.data.TripId;
 
   if (isLoading || isError) {
     return defaultReturn;
   }
 
-  return { tripAuthority, memberId, TripId };
+  return { tripAuthority, memberId, tripId };
 };
diff --git a/src/hooks/useSocket.ts b/src/hooks/useSocket.ts
index 6f07b0ca..d0eeef0f 100644
--- a/src/hooks/useSocket.ts
+++ b/src/hooks/useSocket.ts
@@ -16,6 +16,9 @@ import {
 } from '@/@types/service';
 import { createContext } from 'react';
 import { useState, useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+import { useRecoilValue } from 'recoil';
+import { visitDateState } from '@recoil/socket';
 
 export const socketContext = createContext<SocketContextType>({
   tripInfo: null,
@@ -23,16 +26,20 @@ export const socketContext = createContext<SocketContextType>({
   tripPath: null,
   tripMember: null,
   tripBudget: null,
+  tripId: '',
   callBackPub: () => {},
 });
 
-export const useSocket = (tripId: string, visitDate: string) => {
+export const useSocket = () => {
+  const { id } = useParams();
+  const tripId = id ?? '';
+  const visitDate = useRecoilValue(visitDateState);
+
   const [tripInfo, setTripInfo] = useState<subInfoRes | null>(null);
   const [tripItem, setTripItem] = useState<subItemRes | null>(null);
   const [tripPath, setTripPath] = useState<subPathRes | null>(null);
   const [tripMember, setTripMember] = useState<subMemberRes | null>(null);
   const [tripBudget, setTripBudget] = useState<subBudgetRes | null>(null);
-
   const [socketCallback, setSocketCallback] = useState<(() => void) | null>(
     null,
   );
@@ -41,7 +48,7 @@ export const useSocket = (tripId: string, visitDate: string) => {
     setSocketCallback(() => callback);
   };
 
-  const socketConnect = () => {
+  const socketConnect = (tripId: string, visitDate: string) => {
     socketClient.onConnect = () => {
       subInfo(tripId, (res) => {
         if (res) {
@@ -63,7 +70,6 @@ export const useSocket = (tripId: string, visitDate: string) => {
 
       subMember(tripId, (res) => {
         if (res) {
-          // console.log('subMemberRes', res);
           setTripMember(res);
         }
       });
@@ -83,13 +89,22 @@ export const useSocket = (tripId: string, visitDate: string) => {
   };
 
   useEffect(() => {
-    socketConnect();
-    console.log('소켓연결');
+    if (tripId && visitDate) {
+      socketConnect(tripId, visitDate.visitDate);
+    }
 
     return () => {
       socketClient.deactivate();
     };
   }, [tripId, visitDate, socketCallback]);
 
-  return { tripInfo, tripItem, tripPath, tripMember, tripBudget, callBackPub };
+  return {
+    tripInfo,
+    tripItem,
+    tripPath,
+    tripMember,
+    tripBudget,
+    tripId,
+    callBackPub,
+  };
 };
diff --git a/src/pages/plan/AddToTripPlan/OurLiked.tsx b/src/pages/plan/AddToTripPlan/OurLiked.tsx
new file mode 100644
index 00000000..f80e6ef2
--- /dev/null
+++ b/src/pages/plan/AddToTripPlan/OurLiked.tsx
@@ -0,0 +1,75 @@
+import { useInfiniteQuery } from '@tanstack/react-query';
+import { useState } from 'react';
+import { Spinner } from '@components/common/spinner/Spinner';
+import { getTripsLike } from '@api/trips';
+import WishCategory from '@components/Wish/WishCategory';
+import AddToListButton from '../addToOurPlace/AddtoListBtn';
+import { OurLikedList } from './OurLikedList';
+import { useParams } from 'react-router-dom';
+
+export const OurLiked = () => {
+  const { id: tripId } = useParams();
+  const [selectedContentTypeId, setSelectedContentTypeId] = useState<
+    null | number
+  >(null);
+
+  const handleCategoryClick = (contentTypeId: number | null) => {
+    setSelectedContentTypeId(contentTypeId);
+  };
+
+  const { fetchNextPage, hasNextPage, data, isLoading, error } =
+    useInfiniteQuery({
+      queryKey: ['ourTrips'],
+      queryFn: ({ pageParam = 0 }) => getTripsLike(tripId || '', pageParam, 10),
+      initialPageParam: 0,
+      getNextPageParam: (lastPage) => {
+        if (
+          lastPage &&
+          lastPage.data &&
+          lastPage.data &&
+          lastPage.data.pageable
+        ) {
+          const currentPage = lastPage.data.pageable.pageNumber;
+          const totalPages = lastPage.data.totalPages;
+
+          if (currentPage < totalPages - 1) {
+            return currentPage + 1;
+          }
+        }
+        return undefined;
+      },
+    });
+
+  if (isLoading) {
+    return <Spinner />;
+  }
+  if (error) {
+    return <div>데이터를 불러오는 중 오류가 발생했습니다.</div>;
+  }
+
+  const results = data?.pages.flatMap((page) => page.data.content) || [];
+  const noResults = results && results.length === 0;
+
+  return (
+    <div className="flex min-h-[90vh] flex-col">
+      <div className="title3 pt-3">우리의 관심 목록 </div>
+      <WishCategory onCategoryClick={handleCategoryClick} />
+      {noResults ? (
+        <div className="my-10 text-center text-gray3">
+          우리의 관심목록이 없습니다.
+        </div>
+      ) : (
+        <OurLikedList
+          toursData={data || { pages: [] }}
+          fetchNextPage={fetchNextPage}
+          hasNextPage={hasNextPage}
+          isLoading={isLoading}
+          selectedContentTypeId={selectedContentTypeId}
+        />
+      )}
+      <div className="sticky bottom-0 mt-auto bg-white py-[20px] ">
+        <AddToListButton apiType="postTripsItem" />
+      </div>
+    </div>
+  );
+};
diff --git a/src/pages/plan/AddToTripPlan/OurLikedList.tsx b/src/pages/plan/AddToTripPlan/OurLikedList.tsx
new file mode 100644
index 00000000..76d48865
--- /dev/null
+++ b/src/pages/plan/AddToTripPlan/OurLikedList.tsx
@@ -0,0 +1,62 @@
+import React from 'react';
+import InfiniteScroll from 'react-infinite-scroller';
+import { v4 as uuidv4 } from 'uuid';
+import { OurLikedListItem } from './OurLikedListItem';
+import { LikedListType } from '@/@types/tours.types';
+import { Spinner } from '@components/common/spinner/Spinner';
+
+interface WishListProps {
+  toursData: { pages: Array<{ data: { content: LikedListType[] } }> };
+  fetchNextPage: () => void;
+  hasNextPage: boolean;
+  isLoading: boolean;
+  selectedContentTypeId: number | null;
+}
+
+export const OurLikedList: React.FC<WishListProps> = ({
+  toursData,
+  fetchNextPage,
+  hasNextPage,
+  isLoading,
+  selectedContentTypeId,
+}) => {
+  if (!toursData || toursData.pages.length === 0) {
+    return <div>데이터를 불러오는 중 오류가 발생했습니다.</div>;
+  }
+
+  const filteredData =
+    selectedContentTypeId !== null
+      ? toursData.pages.map((group) => ({
+          data: {
+            content: group.data.content.filter(
+              (item) => item.contentTypeId === selectedContentTypeId,
+            ),
+          },
+        }))
+      : toursData.pages;
+
+  return (
+    <div className="">
+      <InfiniteScroll
+        pageStart={0}
+        loadMore={() => fetchNextPage()}
+        hasMore={hasNextPage}
+        loader={
+          <div key={uuidv4()} className="flex justify-center">
+            <Spinner />
+          </div>
+        }>
+        <div className="no-scrollbar grid grid-cols-1 gap-[16px] overflow-y-scroll">
+          {!isLoading &&
+            filteredData.map((group) => (
+              <React.Fragment key={uuidv4()}>
+                {group?.data.content.map((wishList: LikedListType) => (
+                  <OurLikedListItem key={uuidv4()} wishList={wishList} />
+                ))}
+              </React.Fragment>
+            ))}
+        </div>
+      </InfiniteScroll>
+    </div>
+  );
+};
diff --git a/src/pages/plan/AddToTripPlan/OurLikedListItem.tsx b/src/pages/plan/AddToTripPlan/OurLikedListItem.tsx
new file mode 100644
index 00000000..19a20840
--- /dev/null
+++ b/src/pages/plan/AddToTripPlan/OurLikedListItem.tsx
@@ -0,0 +1,66 @@
+import { LikedListType } from '@/@types/tours.types';
+import { ListCheckBtn } from '@components/common/button/ListSelectBtn';
+import { StarIcon } from '@components/common/icons/Icons';
+import { selectedItemsState } from '@recoil/listItem';
+import { useRecoilState } from 'recoil';
+import { useNavigate } from 'react-router-dom';
+import { useEffect } from 'react';
+
+interface WishItemProps {
+  wishList: LikedListType;
+}
+
+export const OurLikedListItem: React.FC<WishItemProps> = ({ wishList }) => {
+  const {
+    tourItemId,
+    title,
+    ratingAverage,
+    reviewCount,
+    smallThumbnailUrl,
+    tourAddress,
+  } = wishList;
+
+  const [selectedItems, setSelectedItems] = useRecoilState(selectedItemsState);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    setSelectedItems([]);
+  }, []);
+
+  const handleSelect = () => {
+    if (selectedItems.includes(tourItemId)) {
+      setSelectedItems(selectedItems.filter((item) => item !== tourItemId));
+    } else {
+      setSelectedItems([...selectedItems, tourItemId]);
+    }
+  };
+
+  return (
+    <div
+      className="flex h-[48px] w-full cursor-pointer items-center justify-center"
+      onClick={() => navigate(`/detail/${tourItemId}`)}>
+      <div className="imgWrap mr-[16px] flex-shrink-0 overflow-hidden rounded-lg">
+        <img
+          className="size-[44px] object-cover"
+          src={smallThumbnailUrl}
+          alt={title}
+        />
+      </div>
+      <div className="textWrap flex flex-grow flex-col justify-between overflow-hidden py-1.5">
+        <div className="name body3 truncate">{title}</div>
+        <div className="flex">
+          <div className="flex items-center justify-center">
+            <StarIcon size={12.5} color="#FFEC3E" fill="#FFEC3E" />
+          </div>
+          <span className="body4 mx-[4px] shrink-0 text-gray4">
+            {ratingAverage.toFixed(1)}({reviewCount})
+          </span>
+          <span className="address body4 mr-[6px] truncate text-gray4">
+            {tourAddress ? tourAddress : '제공되는 주소가 없습니다.'}
+          </span>
+        </div>
+      </div>
+      <ListCheckBtn onClick={handleSelect} />
+    </div>
+  );
+};
diff --git a/src/pages/plan/OurLikedList.tsx b/src/pages/plan/OurLikedList.tsx
deleted file mode 100644
index bb192296..00000000
--- a/src/pages/plan/OurLikedList.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-import { useInfiniteQuery } from '@tanstack/react-query';
-import ToursCategoryItem from '@components/Tours/ToursCategoryItem';
-import { useEffect, useState } from 'react';
-import { Spinner } from '@components/common/spinner/Spinner';
-import { getMemberTours } from '@api/member';
-
-export const OurLikedList = () => {
-  const categories = ['전체', '숙소', '식당', '관광지'];
-
-  // const [selectedContentTypeId, setSelectedContentTypeId] = useState<
-  //   null | number
-  // >(null);
-
-  const [selectedCategory, setSelectedCategory] = useState<string>('전체');
-  useEffect(() => {
-    console.log(selectedCategory);
-  }, [selectedCategory]);
-
-  const handleSelectCategory = (category: string) => {
-    setSelectedCategory(category);
-  };
-
-  // useEffect(() => {
-  //   console.log('searchWord: ' + searchWord);
-  // }, [searchWord]);
-  // console.log();
-
-  const {
-    // fetchNextPage, hasNextPage,
-    data,
-    isLoading,
-    isError,
-  } = useInfiniteQuery({
-    queryKey: ['wishList'],
-    queryFn: ({ pageParam = 0 }) => getMemberTours(pageParam, 10),
-    initialPageParam: 0,
-    getNextPageParam: (lastPage) => {
-      if (
-        lastPage &&
-        lastPage.data &&
-        lastPage.data &&
-        lastPage.data.pageable
-      ) {
-        const currentPage = lastPage.data.pageable.pageNumber;
-        const totalPages = lastPage.data.totalPages;
-
-        if (currentPage < totalPages - 1) {
-          return currentPage + 1;
-        }
-      }
-      return undefined;
-    },
-  });
-
-  // const handleCategoryClick = (contentTypeId: number | null) => {
-  //   setSelectedContentTypeId(contentTypeId);
-  // };
-
-  if (isLoading) {
-    return <Spinner />;
-  }
-  if (isError) {
-    console.log('error fetching search result ');
-  }
-
-  // console.log(data?.pages[0].data.content);
-  const searchResults = data?.pages.flatMap((page) => page.data.content) || [];
-  console.log('searchResults', searchResults);
-  const noResults = searchResults && searchResults.length === 0;
-
-  return (
-    <>
-      <div className="title3 pt-3">우리의 관심 목록 </div>
-      <div className="mt-3 flex">
-        {categories.map((category) => (
-          <ToursCategoryItem
-            key={category}
-            name={category}
-            isSelected={category === selectedCategory}
-            onSelect={handleSelectCategory}
-          />
-        ))}
-      </div>
-      {noResults ? (
-        <div className="my-10 text-center text-gray3">
-          나의 관심목록이 없습니다.
-        </div>
-      ) : (
-        <div></div>
-        // <WishList
-        //   toursData={data || { pages: [] }}
-        //   fetchNextPage={fetchNextPage}
-        //   hasNextPage={hasNextPage}
-        //   isLoading={isLoading}
-        //   selectedContentTypeId={selectedContentTypeId}
-        // />
-      )}
-    </>
-  );
-};
diff --git a/src/pages/plan/addPlace/AddtoListBtn.tsx b/src/pages/plan/addPlace/AddtoListBtn.tsx
deleted file mode 100644
index 9e54f742..00000000
--- a/src/pages/plan/addPlace/AddtoListBtn.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { useRecoilValue } from 'recoil';
-import { selectedItemsState } from '@recoil/listItem';
-import { ButtonPrimary } from '@components/common/button/Button';
-import { postTripsLike } from '@api/trips';
-// import { useNavigate } from 'react-router-dom';
-
-const AddToListButton = () => {
-  const selectedTourItemIds = useRecoilValue(selectedItemsState);
-  // const navigate = useNavigate();
-
-  const getTripIdFromUrl = () => {
-    const pathSegments = window.location.pathname.split('/');
-    const tripIdIndex =
-      pathSegments.findIndex((segment) => segment === 'trip') + 1;
-    return pathSegments[tripIdIndex]
-      ? parseInt(pathSegments[tripIdIndex], 10)
-      : null;
-  };
-
-  const handleAddClick = async () => {
-    const tripId = getTripIdFromUrl();
-    if (tripId) {
-      try {
-        const response = await postTripsLike(tripId, selectedTourItemIds);
-        console.log('API response:', response);
-        // navigate(`/trip/${tripId}`);
-      } catch (error) {
-        console.error('API error:', error);
-      }
-    }
-  };
-
-  return <ButtonPrimary onClick={handleAddClick}>추가하기</ButtonPrimary>;
-};
-
-export default AddToListButton;
diff --git a/src/pages/plan/addToOurPlace/AddtoListBtn.tsx b/src/pages/plan/addToOurPlace/AddtoListBtn.tsx
new file mode 100644
index 00000000..ea7589f6
--- /dev/null
+++ b/src/pages/plan/addToOurPlace/AddtoListBtn.tsx
@@ -0,0 +1,55 @@
+import { useRecoilValue, useRecoilState } from 'recoil';
+import { selectedItemsState } from '@recoil/listItem';
+import { ButtonPrimary } from '@components/common/button/Button';
+import { postTripsLike } from '@api/trips';
+import { useNavigate, useParams } from 'react-router-dom';
+import { pubAddTripItem } from '@api/socket';
+import { useContext } from 'react';
+import { socketContext } from '@hooks/useSocket';
+import { visitDateState } from '@recoil/socket';
+
+const AddToListButton = ({
+  apiType,
+}: {
+  apiType: 'postTripsLike' | 'postTripsItem';
+}) => {
+  const { id: tripId } = useParams();
+  const [selectedTourItemIds, setSelectedTourItemIds] =
+    useRecoilState(selectedItemsState);
+  const visitDate = useRecoilValue(visitDateState);
+  console.log(selectedTourItemIds);
+  const { callBackPub } = useContext(socketContext);
+  const navigate = useNavigate();
+
+  const handleAddClick = async () => {
+    if (tripId) {
+      try {
+        if (apiType === 'postTripsLike') {
+          await postTripsLike(tripId, selectedTourItemIds);
+          navigate(`/trip/${tripId}`);
+        } else if (apiType === 'postTripsItem' && visitDate) {
+          const newTripItems = selectedTourItemIds.map((tourItemId) => ({
+            tourItemId: tourItemId,
+          }));
+
+          const pubAddTripItemData = {
+            visitDate: visitDate.visitDate,
+            newTripItems,
+          };
+
+          callBackPub(() => pubAddTripItem(pubAddTripItemData, tripId));
+          setTimeout(() => {
+            setSelectedTourItemIds([]);
+            navigate(`/trip/${tripId}/plan`);
+          }, 500);
+        }
+      } catch (error) {
+        console.error('API error:', error);
+      }
+    }
+  };
+
+  return <ButtonPrimary onClick={handleAddClick}>추가하기</ButtonPrimary>;
+};
+
+export default AddToListButton;
diff --git a/src/pages/plan/addPlace/MyLiked.tsx b/src/pages/plan/addToOurPlace/MyLiked.tsx
similarity index 92%
rename from src/pages/plan/addPlace/MyLiked.tsx
rename to src/pages/plan/addToOurPlace/MyLiked.tsx
index 5e65a8d3..c31aa717 100644
--- a/src/pages/plan/addPlace/MyLiked.tsx
+++ b/src/pages/plan/addToOurPlace/MyLiked.tsx
@@ -49,7 +49,7 @@ export const MyLiked = () => {
   const noResults = searchResults && searchResults.length === 0;
 
   return (
-    <>
+    <div className="flex min-h-[90vh] flex-col">
       <div className="title3 pt-3">나의 관심 목록 </div>
       <WishCategory onCategoryClick={handleCategoryClick} />
       {noResults ? (
@@ -65,9 +65,9 @@ export const MyLiked = () => {
           selectedContentTypeId={selectedContentTypeId}
         />
       )}
-      <div className="sticky bottom-0 bg-white py-[20px]">
-        <AddToListButton />
+      <div className="sticky bottom-0 mt-auto bg-white py-[20px]">
+        <AddToListButton apiType="postTripsLike" />
       </div>
-    </>
+    </div>
   );
 };
diff --git a/src/pages/plan/addPlace/MyLikedList.tsx b/src/pages/plan/addToOurPlace/MyLikedList.tsx
similarity index 98%
rename from src/pages/plan/addPlace/MyLikedList.tsx
rename to src/pages/plan/addToOurPlace/MyLikedList.tsx
index 295328c6..6979f41a 100644
--- a/src/pages/plan/addPlace/MyLikedList.tsx
+++ b/src/pages/plan/addToOurPlace/MyLikedList.tsx
@@ -36,7 +36,7 @@ export const MyLikedList: React.FC<WishListProps> = ({
       : toursData.pages;
 
   return (
-    <div className="min-h-[70vh]">
+    <div className="">
       <InfiniteScroll
         pageStart={0}
         loadMore={() => fetchNextPage()}
diff --git a/src/pages/plan/addPlace/MyLikedListItem.tsx b/src/pages/plan/addToOurPlace/MyLikedListItem.tsx
similarity index 84%
rename from src/pages/plan/addPlace/MyLikedListItem.tsx
rename to src/pages/plan/addToOurPlace/MyLikedListItem.tsx
index c1cdcfa7..67628128 100644
--- a/src/pages/plan/addPlace/MyLikedListItem.tsx
+++ b/src/pages/plan/addToOurPlace/MyLikedListItem.tsx
@@ -3,6 +3,8 @@ import { ListCheckBtn } from '@components/common/button/ListSelectBtn';
 import { StarIcon } from '@components/common/icons/Icons';
 import { selectedItemsState } from '@recoil/listItem';
 import { useRecoilState } from 'recoil';
+import { useNavigate } from 'react-router-dom';
+import { useEffect } from 'react';
 
 interface WishItemProps {
   wishList: TourType;
@@ -19,6 +21,11 @@ export const MyLikedListItem: React.FC<WishItemProps> = ({ wishList }) => {
   } = wishList;
 
   const [selectedItems, setSelectedItems] = useRecoilState(selectedItemsState);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    setSelectedItems([]);
+  }, []);
 
   const handleSelect = () => {
     if (selectedItems.includes(id)) {
@@ -29,7 +36,9 @@ export const MyLikedListItem: React.FC<WishItemProps> = ({ wishList }) => {
   };
 
   return (
-    <div className="flex h-[48px] w-full items-center justify-center">
+    <div
+      className="flex h-[48px] w-full cursor-pointer items-center justify-center"
+      onClick={() => navigate(`/detail/${id}`)}>
       <div className="imgWrap mr-[16px] flex-shrink-0 overflow-hidden rounded-lg">
         <img
           className="size-[44px] object-cover"
diff --git a/src/pages/plan/addPlace/PlanAddPlace.page.tsx b/src/pages/plan/addToOurPlace/PlanAddPlace.page.tsx
similarity index 77%
rename from src/pages/plan/addPlace/PlanAddPlace.page.tsx
rename to src/pages/plan/addToOurPlace/PlanAddPlace.page.tsx
index 98002a06..faac0821 100644
--- a/src/pages/plan/addPlace/PlanAddPlace.page.tsx
+++ b/src/pages/plan/addToOurPlace/PlanAddPlace.page.tsx
@@ -2,7 +2,7 @@ import SearchInput from '@components/search/SearchInput';
 import { useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { SearchResultForPlan } from './SearchResult';
-import { OurLikedList } from '../OurLikedList';
+import { OurLiked } from '../AddToTripPlan/OurLiked';
 
 export const PlanAddPlace = () => {
   const location = useLocation();
@@ -20,13 +20,13 @@ export const PlanAddPlace = () => {
     }
   }, [location, searchWordFromQuery]);
   return (
-    <>
+    <div className="min-h-screen">
       <SearchInput />
       {searchWord ? (
-        <SearchResultForPlan searchWord={searchWord} />
+        <SearchResultForPlan searchWord={searchWord} apiType="postTripsItem" />
       ) : (
-        <OurLikedList />
+        <OurLiked />
       )}
-    </>
+    </div>
   );
 };
diff --git a/src/pages/plan/addPlace/ResultCategoryPlan.tsx b/src/pages/plan/addToOurPlace/ResultCategoryPlan.tsx
similarity index 87%
rename from src/pages/plan/addPlace/ResultCategoryPlan.tsx
rename to src/pages/plan/addToOurPlace/ResultCategoryPlan.tsx
index 7e3f8706..b8988d18 100644
--- a/src/pages/plan/addPlace/ResultCategoryPlan.tsx
+++ b/src/pages/plan/addToOurPlace/ResultCategoryPlan.tsx
@@ -10,6 +10,7 @@ interface ResultCategoryProps {
   fetchNextPage: (() => Promise<InfiniteQueryObserverResult<any, any>>) | null;
   hasNextPage: boolean;
   isFetchingNextPage: boolean;
+  apiType: 'postTripsLike' | 'postTripsItem';
 }
 
 export const ResultCategoryPlan = ({
@@ -17,10 +18,10 @@ export const ResultCategoryPlan = ({
   fetchNextPage,
   hasNextPage,
   isFetchingNextPage,
+  apiType,
 }: ResultCategoryProps) => {
   return (
     <>
-      <h2 className="headline2 my-2.5">ResultCategoryPlan</h2>
       {data.map((item) => (
         <ResultItemPlan key={item.id} result={item} />
       ))}
@@ -38,9 +39,7 @@ export const ResultCategoryPlan = ({
         <div className="mt-3 text-center text-gray3"></div>
       )}
       <div className="sticky bottom-0 bg-white py-[20px]">
-        <div className="sticky bottom-0 bg-white py-[20px]">
-          <AddToListButton />
-        </div>
+        <AddToListButton apiType={apiType} />
       </div>
     </>
   );
diff --git a/src/pages/plan/addPlace/ResultItem.tsx b/src/pages/plan/addToOurPlace/ResultItem.tsx
similarity index 88%
rename from src/pages/plan/addPlace/ResultItem.tsx
rename to src/pages/plan/addToOurPlace/ResultItem.tsx
index 9ad70dde..7d027aaa 100644
--- a/src/pages/plan/addPlace/ResultItem.tsx
+++ b/src/pages/plan/addToOurPlace/ResultItem.tsx
@@ -2,10 +2,12 @@ import { TourType } from '@/@types/tours.types';
 import { ListSelectBtn } from '@components/common/button/ListSelectBtn';
 import { StarIcon } from '@components/common/icons/Icons';
 import { selectedItemsState } from '@recoil/listItem';
+import { useNavigate } from 'react-router-dom';
 import { useRecoilState } from 'recoil';
 
 export const ResultItemPlan = ({ result }: { result: TourType }) => {
   const [selectedItems, setSelectedItems] = useRecoilState(selectedItemsState);
+  const navigate = useNavigate();
   const id = result.id;
   const handleSelect = () => {
     if (selectedItems.includes(id)) {
@@ -15,7 +17,9 @@ export const ResultItemPlan = ({ result }: { result: TourType }) => {
     }
   };
   return (
-    <div className="mt-[14px] flex h-[52px] w-full py-1.5">
+    <div
+      className="mt-[14px] flex h-[52px] w-full cursor-pointer py-1.5"
+      onClick={() => navigate(`/detail/${id}`)}>
       <div className="imgWrap mr-[16px] flex-shrink-0 overflow-hidden rounded-lg">
         <img
           className="size-[44px] object-cover"
diff --git a/src/pages/plan/addPlace/SearchResult.tsx b/src/pages/plan/addToOurPlace/SearchResult.tsx
similarity index 88%
rename from src/pages/plan/addPlace/SearchResult.tsx
rename to src/pages/plan/addToOurPlace/SearchResult.tsx
index 485f37e8..47573b93 100644
--- a/src/pages/plan/addPlace/SearchResult.tsx
+++ b/src/pages/plan/addToOurPlace/SearchResult.tsx
@@ -1,30 +1,26 @@
 import { getToursSearch } from '@api/tours';
 import { useInfiniteQuery } from '@tanstack/react-query';
 import ToursCategoryItem from '@components/Tours/ToursCategoryItem';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { Spinner } from '@components/common/spinner/Spinner';
 import { ResultCategoryPlan } from './ResultCategoryPlan';
 
 interface SearchResultProps {
   searchWord: string;
+  apiType: 'postTripsLike' | 'postTripsItem';
 }
 
-export const SearchResultForPlan = ({ searchWord }: SearchResultProps) => {
+export const SearchResultForPlan = ({
+  searchWord,
+  apiType,
+}: SearchResultProps) => {
   const categories = ['전체', '숙소', '식당', '관광지'];
   const [selectedCategory, setSelectedCategory] = useState<string>('전체');
-  useEffect(() => {
-    console.log(selectedCategory);
-  }, [selectedCategory]);
 
   const handleSelectCategory = (category: string) => {
     setSelectedCategory(category);
   };
 
-  useEffect(() => {
-    console.log('searchWord: ' + searchWord);
-  }, [searchWord]);
-  console.log();
-
   const {
     data,
     fetchNextPage,
@@ -87,6 +83,7 @@ export const SearchResultForPlan = ({ searchWord }: SearchResultProps) => {
           fetchNextPage={hasNextPage ? fetchNextPage : null}
           hasNextPage={hasNextPage}
           isFetchingNextPage={isFetchingNextPage}
+          apiType={apiType}
         />
       )}
     </>
diff --git a/src/pages/search/search.page.tsx b/src/pages/search/search.page.tsx
index 100cea28..cd4acecf 100644
--- a/src/pages/search/search.page.tsx
+++ b/src/pages/search/search.page.tsx
@@ -29,13 +29,13 @@ export const Search = () => {
   }, [location, regionFromQuery, searchWordFromQuery]);
 
   return (
-    <>
+    <div className="min-h-screen">
       <SearchInput />
       {searchWord ? (
         <SearchResult selectedRegion={selectedRegion} searchWord={searchWord} />
       ) : (
         <RegionSelect />
       )}
-    </>
+    </div>
   );
 };
diff --git a/src/pages/share/share.page.tsx b/src/pages/share/share.page.tsx
new file mode 100644
index 00000000..7d6d5887
--- /dev/null
+++ b/src/pages/share/share.page.tsx
@@ -0,0 +1,58 @@
+import { getTripsjoin } from '@api/trips';
+import CopyBox from '@components/Share/CopyBox';
+import { BackBox } from '@components/common';
+import { useEffect, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+
+const Share = () => {
+  const navigate = useNavigate();
+  const [joinCode, setJoinCode] = useState<string | null>(null);
+  const { id: tripId } = useParams();
+
+  useEffect(() => {
+    const getTripCode = async () => {
+      if (tripId) {
+        try {
+          const { data } = await getTripsjoin(tripId);
+          if (data.status === 200) {
+            setJoinCode(data.data);
+          }
+        } catch (err) {
+          console.error('편집 참여 코드 요청 중 에러 발생', err);
+        }
+      }
+    };
+    getTripCode();
+  }, []);
+
+  const url = window.location.href;
+  const shareUrl = url.replace('/share', '');
+
+  return (
+    <div className="min-h-[90vh]">
+      <BackBox
+        showBack
+        backHandler={() => {
+          navigate(-1);
+        }}>
+        공유하기
+      </BackBox>
+      <div className="mt-6 flex flex-col gap-10">
+        <CopyBox
+          title="링크"
+          subTitle="링크를 복사해서 여행 계획을 공유해보세요."
+          copyValue={shareUrl}
+        />
+        {joinCode && (
+          <CopyBox
+            title="편집 참여 코드"
+            subTitle="편집 참여 코드를 입력하면 여행 계획을 편집할 수 있어요."
+            copyValue={joinCode}
+          />
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Share;
diff --git a/src/pages/share/shareCode.page.tsx b/src/pages/share/shareCode.page.tsx
new file mode 100644
index 00000000..817c7801
--- /dev/null
+++ b/src/pages/share/shareCode.page.tsx
@@ -0,0 +1,94 @@
+import { postTripsjoin } from '@api/trips';
+import { BackBox } from '@components/common';
+import { useGetTripsAuthority } from '@hooks/useGetTripsAuthority';
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+const shareCode = () => {
+  const navigate = useNavigate();
+  const { tripAuthority, tripId } = useGetTripsAuthority();
+
+  useEffect(() => {
+    if (tripAuthority === 'WRITE' && tripId) {
+      alert('이미 편집 가능한 여정입니다.');
+      navigate(`/trip/${tripId}`, { replace: true });
+    }
+  }, [tripAuthority, tripId]);
+
+  const [inputCode, setInputCode] = useState<string>('');
+  const [showError, setShowError] = useState<boolean>(false);
+
+  const onCodeChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const changeValue = e.target.value;
+    if (changeValue.length <= 5) {
+      setInputCode(e.target.value);
+    }
+    if (changeValue.length === 5 && tripId) {
+      try {
+        const { data } = await postTripsjoin(tripId, changeValue);
+        if (data.status === 200) {
+          navigate(`/trip/${tripId}`, { replace: true });
+        }
+      } catch (err) {
+        setShowError(true);
+        setInputCode('');
+        console.error('참여 코드 요청 중 에러 발생', err);
+      }
+    }
+  };
+
+  return (
+    <div className="min-h-[90vh]">
+      <BackBox
+        showBack
+        backHandler={() => {
+          navigate(-1);
+        }}
+      />
+      <div className="flex flex-col items-center">
+        <div className="mb-14 mt-16 flex flex-col items-center gap-3">
+          <span className="title1 text-gray7">편집 참여 코드 입력</span>
+          <span className="body4 text- text-center text-gray7">
+            편집 참여 코드를 입력하면 여행 계획을 편집할 수 있어요.
+          </span>
+        </div>
+
+        <div className="mb-6 flex h-9 justify-center gap-4">
+          <input
+            type="number"
+            autoFocus
+            maxLength={5}
+            className="absolute h-9 w-48 bg-transparent text-transparent caret-transparent outline-none selection:bg-transparent"
+            onChange={onCodeChange}
+            value={inputCode}
+          />
+          {inputCode.split('').map((code, index) => {
+            return (
+              <div
+                key={index}
+                className="title1 flex w-6 justify-center border-b-2 border-solid border-main2">
+                {code}
+              </div>
+            );
+          })}
+          {Array(5 - inputCode.length)
+            .fill(null)
+            .map((_, index) => {
+              return (
+                <div
+                  key={index}
+                  className="title1 flex w-6 justify-center border-b-2 border-solid border-gray3"></div>
+              );
+            })}
+        </div>
+        {showError && (
+          <div className="body5 text-red">
+            편집 참여 코드를 다시 한번 확인해주세요.
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default shareCode;
diff --git a/src/pages/trip/AddOurList.tsx b/src/pages/trip/AddOurList.page.tsx
similarity index 76%
rename from src/pages/trip/AddOurList.tsx
rename to src/pages/trip/AddOurList.page.tsx
index 80bce838..14eaf416 100644
--- a/src/pages/trip/AddOurList.tsx
+++ b/src/pages/trip/AddOurList.page.tsx
@@ -1,12 +1,11 @@
 import SearchInput from '@components/search/SearchInput';
-import { MyLiked } from '@pages/plan/addPlace/MyLiked';
-import { SearchResultForPlan } from '@pages/plan/addPlace/SearchResult';
+import { MyLiked } from '@pages/plan/addToOurPlace/MyLiked';
+import { SearchResultForPlan } from '@pages/plan/addToOurPlace/SearchResult';
 import { useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 
 export const AddOurList = () => {
   const location = useLocation();
-
   const queryParams = new URLSearchParams(location.search);
   const searchWordFromQuery = queryParams.get('searchWord');
 
@@ -23,7 +22,7 @@ export const AddOurList = () => {
     <div>
       <SearchInput />
       {searchWord ? (
-        <SearchResultForPlan searchWord={searchWord} />
+        <SearchResultForPlan searchWord={searchWord} apiType="postTripsLike" />
       ) : (
         <MyLiked />
       )}
diff --git a/src/pages/trip/tripEdit.page.tsx b/src/pages/trip/tripEdit.page.tsx
new file mode 100644
index 00000000..cd9cb371
--- /dev/null
+++ b/src/pages/trip/tripEdit.page.tsx
@@ -0,0 +1,172 @@
+import { putTrips } from '@api/trips';
+import { BackBox } from '@components/common';
+import { ButtonPrimary } from '@components/common/button/Button';
+import {
+  CalendarIcon,
+  CloseIcon,
+  CounterIcon,
+  PlanIcon,
+  UserIcon,
+} from '@components/common/icons/Icons';
+import { InputField } from '@components/createTrip/InputField';
+import useCounter from '@hooks/useCounter';
+import { useGetTrips } from '@hooks/useGetTrips';
+import { useGetTripsAuthority } from '@hooks/useGetTripsAuthority';
+import { tripDateState } from '@recoil/tripDate';
+import { formatDate } from '@utils/formatDate';
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useRecoilState } from 'recoil';
+import { SelectDate } from '../../components/createTrip/SelectDate';
+
+const TripEdit = () => {
+  const navigate = useNavigate();
+  const tripId = useGetTripsAuthority().tripId;
+  const { tripName, numberOfPeople, startDate, endDate } = useGetTrips();
+
+  const [title, setTitle] = useState('');
+  const [numOfMembers, increaseNumOfMembers, decreaseNumOfMembers] = useCounter(
+    numberOfPeople ?? 1,
+    1,
+  );
+  const [showSelectDate, setShowSelectDate] = useState(false);
+  const [tripDate, setTripDate] = useRecoilState(tripDateState);
+
+  let start: Date, end: Date;
+  if (startDate && endDate) {
+    start = new Date(startDate);
+    end = new Date(endDate);
+  }
+
+  useEffect(() => {
+    if (startDate && endDate) {
+      setTripDate({ startDate: start, endDate: end });
+    }
+    if (tripName) {
+      setTitle(tripName);
+    }
+  }, [tripName, startDate, endDate]);
+
+  const handleSubmit = async () => {
+    try {
+      let adjustedStartDate, adjustedEndDate;
+
+      if (tripDate.startDate) {
+        adjustedStartDate = new Date(tripDate.startDate);
+        adjustedStartDate.setDate(adjustedStartDate.getDate() + 1);
+      }
+      if (tripDate.endDate) {
+        adjustedEndDate = new Date(tripDate.endDate);
+        adjustedEndDate.setDate(adjustedEndDate.getDate() + 1);
+      }
+
+      const tripRequestData = {
+        tripName: title,
+        numberOfPeople: numOfMembers,
+        startDate: adjustedStartDate
+          ? adjustedStartDate.toISOString().split('T')[0]
+          : null,
+        endDate: adjustedEndDate
+          ? adjustedEndDate.toISOString().split('T')[0]
+          : null,
+      };
+
+      if (tripId) {
+        const response = await putTrips(tripId, tripRequestData);
+        console.log('전송 완료: ', response);
+        navigate('/trip/' + tripId);
+        window.location.reload();
+      }
+    } catch (error) {
+      console.error('전송 실패: ', error);
+    }
+  };
+
+  const formattedTripDate =
+    tripDate.startDate && tripDate.endDate
+      ? tripDate.startDate === tripDate.endDate
+        ? formatDate(tripDate.startDate, 'yyyy. MM. dd')
+        : `${formatDate(tripDate.startDate, 'yyyy. MM. dd')} - ${formatDate(
+            tripDate.endDate,
+            'MM. dd',
+          )}`
+      : '여행 날짜 (선택)';
+
+  if (showSelectDate) {
+    return (
+      <SelectDate
+        onClose={() => {
+          setShowSelectDate(false);
+        }}
+      />
+    );
+  }
+  return (
+    <div className="flex h-[95vh] flex-col">
+      <BackBox
+        showBack={true}
+        backHandler={() => {
+          navigate(-1);
+        }}
+        children="여정 수정하기"
+      />
+      <div className="pb-[18px]" />
+
+      <InputField icon={PlanIcon}>
+        <input
+          type="text"
+          className="body1 flex-1 p-2 focus:outline-none"
+          placeholder={title || ''}
+          value={title || ''}
+          onChange={(e) => {
+            setTitle(e.target.value);
+          }}
+          autoFocus
+        />
+        {title && (
+          <div
+            className="ml-auto cursor-pointer rounded-full bg-gray3"
+            onClick={() => {
+              setTitle('');
+            }}>
+            <CloseIcon />
+          </div>
+        )}
+      </InputField>
+
+      <InputField icon={UserIcon}>
+        <div className="body1 flex-1 p-2">인원</div>
+        <div className="ml-auto flex items-center justify-center">
+          {numOfMembers !== 1 && (
+            <button
+              className="flex size-[24px] items-center justify-center rounded-full text-gray3"
+              onClick={decreaseNumOfMembers}>
+              <CounterIcon minus />
+            </button>
+          )}
+          <div className="body1 flex-1 px-4">{numOfMembers}</div>
+          <button
+            className="flex size-[24px] items-center justify-center rounded-full text-white"
+            onClick={increaseNumOfMembers}>
+            <CounterIcon plus />
+          </button>
+        </div>
+      </InputField>
+
+      <InputField
+        icon={CalendarIcon}
+        onClick={() => {
+          setShowSelectDate(true);
+        }}
+        isClickable>
+        <div className="body1 p-2">{formattedTripDate}</div>
+      </InputField>
+
+      <div className="mt-auto">
+        <ButtonPrimary onClick={handleSubmit}>완료</ButtonPrimary>
+      </div>
+    </div>
+  );
+};
+
+export default TripEdit;
diff --git a/src/recoil/socket.ts b/src/recoil/socket.ts
index ab7bb76b..f8a995c9 100644
--- a/src/recoil/socket.ts
+++ b/src/recoil/socket.ts
@@ -1,16 +1,11 @@
 import { atom } from 'recoil';
 
-export const tripIdState = atom<string | null>({
-  key: 'tripIdState',
-  default: '1',
-});
-
 export const visitDateState = atom<{ visitDate: string } | null>({
   key: 'visitDateState',
-  default: { visitDate: '2024-01-03' },
+  default: { visitDate: '' },
 });
 
-export const memberIdState = atom<{ token: number | null }>({
-  key: 'memberIdState',
-  default: { token: null },
+export const isEditState = atom<boolean>({
+  key: 'isEditState',
+  default: false,
 });
diff --git a/src/router/routerLayout.tsx b/src/router/routerLayout.tsx
index 84f02529..75d0006f 100644
--- a/src/router/routerLayout.tsx
+++ b/src/router/routerLayout.tsx
@@ -24,9 +24,9 @@ const MainLayout = () => {
   );
 
   return (
-    <div className="mx-auto min-h-screen max-w-[412px] bg-white">
+    <div className="mx-auto  max-w-[412px] bg-white">
       <Header />
-      <div className="px-5">
+      <div className="min-h-screen px-5">
         <Outlet />
       </div>
       {showNav && <Nav />}
diff --git a/src/router/socketRouter.tsx b/src/router/socketRouter.tsx
index e679617b..1f02a88f 100644
--- a/src/router/socketRouter.tsx
+++ b/src/router/socketRouter.tsx
@@ -1,23 +1,18 @@
 import { Route, Routes } from 'react-router-dom';
 import { useSocket, socketContext } from '@hooks/useSocket';
 import PlanTrip from '@pages/plan/planTrip.page';
-import { PlanAddPlace } from '@pages/plan/addPlace/PlanAddPlace.page';
+import { PlanAddPlace } from '@pages/plan/addToOurPlace/PlanAddPlace.page';
 import PlanPlaceSearch from '@pages/plan/planPlaceSearch.page';
 import Trip from '@pages/trip/trip.page';
 import MainLayout from './routerLayout';
-import { useRecoilValue } from 'recoil';
-import { tripIdState, visitDateState } from '@recoil/socket';
-import { AddOurList } from '@pages/trip/AddOurList';
+import Share from '@pages/share/share.page';
+import ShareCode from '@pages/share/shareCode.page';
+import { AddOurList } from '@pages/trip/AddOurList.page';
+import TripEdit from '@pages/trip/tripEdit.page';
 
 const SocketRoutes = () => {
-  const tripId = useRecoilValue(tripIdState);
-  const visitDate = useRecoilValue(visitDateState);
-  if (!tripId || !visitDate) {
-    return <div>에러</div>;
-  }
-
   return (
-    <socketContext.Provider value={useSocket(tripId, visitDate?.visitDate)}>
+    <socketContext.Provider value={useSocket()}>
       <Routes>
         <Route path="/" element={<PlanTrip />} />
         <Route path="/place" element={<PlanAddPlace />} />
@@ -32,7 +27,10 @@ const SocketRouter = () => {
     <Routes>
       <Route path="/trip" element={<MainLayout />}>
         <Route path=":id" element={<Trip />} />
+        <Route path=":id/share" element={<Share />} />
+        <Route path=":id/code" element={<ShareCode />} />
         <Route path=":id/add" element={<AddOurList />} />
+        <Route path=":id/edit" element={<TripEdit />} />
         <Route path=":id/plan/*" element={<SocketRoutes />} />
       </Route>
     </Routes>
diff --git a/src/utils/getTripIdFromUrl.ts b/src/utils/getTripIdFromUrl.ts
new file mode 100644
index 00000000..1f3d93a4
--- /dev/null
+++ b/src/utils/getTripIdFromUrl.ts
@@ -0,0 +1,7 @@
+export const getTripIdFromUrl = () => {
+  const pathSegments = window.location.pathname.split('/');
+  const tripIdIndex =
+    pathSegments.findIndex((segment) => segment === 'trip') + 1;
+  const tripId = pathSegments[tripIdIndex];
+  return tripId ? parseInt(tripId, 10) : 0;
+};
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index b371a609..6176f3e0 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -30,13 +30,19 @@ export const getEmoji = (content: string) => {
 export function calculateDayAndDate(startDate: string, endDate: string) {
   let start = new Date(startDate);
   const end = new Date(endDate);
-  const differenceInDays: number =
-    (end.getTime() - start.getTime()) / (1000 * 60 * 60 * 24);
-
-  const DayArr = Array.from(
-    { length: Math.ceil(differenceInDays) + 1 },
-    (_, i) => `DAY ${i + 1}`,
+  const differenceInDays: number = Math.round(
+    (end.getTime() - start.getTime()) / (1000 * 3600 * 24),
   );
+
+  const createDayArray = (prefix: string) =>
+    Array.from(
+      { length: differenceInDays + 1 },
+      (_, i) => `${prefix} ${i + 1}`,
+    );
+
+  const DayArr = createDayArray('DAY');
+  const SmallDayArr = createDayArray('Day');
+
   const DateArr = [];
 
   while (start <= end) {
@@ -47,5 +53,6 @@ export function calculateDayAndDate(startDate: string, endDate: string) {
   return {
     DayArr,
     DateArr,
+    SmallDayArr,
   };
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index 1853d03c..8b7d6fb1 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -6,6 +6,8 @@ export default {
       colors: {
         main1: '#062139',
         main2: '#29DDF6',
+        main3: '#DAF9FF',
+        main4: '#F2FDFF',
         sub1: '#FFEC3E',
         sub2: '#FF2167',
         gray1: '#f8f8f8',