diff --git a/src/@types/service.ts b/src/@types/service.ts
index cf8f405b..4ea36ae0 100644
--- a/src/@types/service.ts
+++ b/src/@types/service.ts
@@ -78,15 +78,11 @@ export type subMemberRes = {
   message: string;
   data: {
     tripId: number;
-    connectedMembers: {
-      memberId: number;
-      name: string;
-      thumbnailUrl: string;
-    }[];
     tripMembers: {
       memberId: number;
       name: string;
       thumbnailUrl: string;
+      connected: boolean;
     }[];
     numberOfPeople: number;
   } | null;
diff --git a/src/@types/socket.types.ts b/src/@types/socket.types.ts
index 9434e981..2a70ed7b 100644
--- a/src/@types/socket.types.ts
+++ b/src/@types/socket.types.ts
@@ -62,15 +62,11 @@ type subMemberMessage = (response: {
   message: string;
   data: {
     tripId: number;
-    connectedMembers: {
-      memberId: number;
-      name: string;
-      thumbnailUrl: string;
-    }[];
     tripMembers: {
       memberId: number;
       name: string;
       thumbnailUrl: string;
+      connected: boolean;
     }[];
     numberOfPeople: number;
   };
@@ -132,7 +128,7 @@ interface pubDeleteItem {
 }
 
 interface pubMember {
-  memberId: number;
+  token: string;
 }
 
 interface pubGetPathAndItems {
diff --git a/src/@types/trips.types.ts b/src/@types/trips.types.ts
index fb708de8..3197ccfe 100644
--- a/src/@types/trips.types.ts
+++ b/src/@types/trips.types.ts
@@ -18,3 +18,35 @@ interface MyTripType {
   area: string;
   subArea: string;
 }
+
+interface ourTripType {
+  tripLikedItemId: number;
+  tourItemId: number;
+  contentTypeId: number;
+  ratingAverage: number;
+  reviewCount: number;
+  smallThumbnailUrl: string;
+  tourAddress: string;
+  prefer: boolean;
+  notPrefer: boolean;
+  preferTotalCount: number;
+  notPreferTotalCount: number;
+  title: string;
+}
+
+interface ThumbsProps {
+  tripId: number;
+  tourId: number;
+  prefer: boolean;
+  notPrefer: boolean;
+}
+  
+interface AuthorityType {
+  status: number;
+  message: string;
+  data: {
+    memberId: number;
+    tripAuthority: string;
+    TripId: number;
+  };
+}
diff --git a/src/api/socket.ts b/src/api/socket.ts
index 2be1d259..000830cf 100644
--- a/src/api/socket.ts
+++ b/src/api/socket.ts
@@ -102,8 +102,7 @@ export const pubUpdateTripItem = (
     body: JSON.stringify(pubUpdateTripItem),
   });
 
-  console.log(pubUpdateTripItem);
-  console.log('펍실행');
+  console.log('데이터', pubUpdateTripItem);
 };
 
 // 여행 날짜별 교통 수단 변경 이벤트 발생시 (01/16 업데이트)
@@ -157,10 +156,9 @@ export const pubDisconnectMember = (pubMember: pubMember, tripId: string) => {
 };
 
 // 여정 편집 페이지 입장 이벤트 발생시(모든 sub 다받음)
-export const pubEnterMember = (pubMember: pubMember, tripId: string) => {
+export const pubEnterMember = (tripId: string) => {
   socketClient.publish({
     destination: `/pub/trips/${tripId}/enterMember`,
-    body: JSON.stringify(pubMember),
   });
 };
 
diff --git a/src/api/trips.ts b/src/api/trips.ts
index b9aac400..dc41f9e3 100644
--- a/src/api/trips.ts
+++ b/src/api/trips.ts
@@ -41,25 +41,15 @@ export const postTrips = async (tripsData: TripRequest) => {
 };
 
 // 우리의 관심목록 조회
-export const getTripsLike = async (options: {
-  tripId: number;
-  category?: string;
-  page?: number;
-  size?: number;
-}) => {
-  const { tripId, category, page = 0, size } = options;
-
-  let query = `trips/${tripId}/tripLikedTours?`;
-
-  if (category) {
-    query += `&category=${category}`;
-  }
-  query += `&page=${page}`;
+export const getTripsLike = async (
+  tripId: number,
+  page: number,
+  size: number,
+) => {
+  const res = await authClient.get(
+    `trips/${tripId}/tripLikedTours?page=${page}&size=${size}`,
+  );
 
-  if (size) {
-    query += `&size=${size}`;
-  }
-  const res = await authClient.get(query);
   return res.data;
 };
 
@@ -80,9 +70,10 @@ export const postTripsLikeHate = async (
   tripId: number,
   tourId: number,
   prefer: boolean,
+  notPrefer: boolean,
 ) => {
-  const res = await client.post(
-    `trips/${tripId}/tripLikedTours/${tourId}?prefer=${prefer}`,
+  const res = await authClient.post(
+    `trips/${tripId}/tripLikedTours/${tourId}?prefer=${prefer}&notPrefer=${notPrefer}`,
   );
   return res;
 };
@@ -102,3 +93,9 @@ export const getTripsMembers = async (tripId: number) => {
   const res = await client.get(`trips/${tripId}/members`);
   return res;
 };
+
+// 편집권한 조회
+export const getTripsAuthority = async (tripId: string) => {
+  const res = await authClient.get(`trips/${tripId}/authority`);
+  return res;
+};
diff --git a/src/components/DetailSectionTop/DetailTopButton.tsx b/src/components/DetailSectionTop/DetailTopButton.tsx
index 225c4fc6..2e5cd923 100644
--- a/src/components/DetailSectionTop/DetailTopButton.tsx
+++ b/src/components/DetailSectionTop/DetailTopButton.tsx
@@ -1,51 +1,37 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useState } from 'react';
+import { useRecoilValue } from 'recoil';
+import { reviewCountState } from '@recoil/review';
 import { TopIcon } from '@components/common/icons/Icons';
 
-export default function DetailTopButton({ parentRef }: any) {
-  const [isVisible, setIsVisible] = useState<boolean>(false);
-  const [scrollPosition, setScrollPosition] = useState<number>(0);
-  const [viewportHeight, setViewportHeight] = useState<number>(0);
-
-  const scrollButtonRef = useRef<HTMLDivElement>(null);
+export default function DetailTopButton() {
+  const [visible, setVisible] = useState<boolean>(false);
+  const getReviewCount = useRecoilValue(reviewCountState);
 
   useEffect(() => {
-    const handleScroll = () => {
-      if (scrollButtonRef.current && parentRef.current) {
-        setViewportHeight(screen.height);
-
-        // 부모 요소의 높이보다 적을 때까지 스크롤 허용
-        if (window.scrollY < parentRef.current.clientHeight - 50) {
-          // 기기 높이의 절반 이상 스크롤 했을 때
-          if (window.scrollY >= viewportHeight / 2) {
-            setIsVisible(true);
-            setScrollPosition(window.scrollY);
-          } else {
-            setIsVisible(false);
-          }
-        }
-      }
-    };
-
-    window.addEventListener('scroll', handleScroll);
-
-    return () => {
-      window.removeEventListener('scroll', handleScroll);
-    };
-  }, [parentRef, scrollPosition, setScrollPosition]);
-
-  const scrollToTop = () => {
+    if (getReviewCount > 2) {
+      setVisible(true);
+    } else {
+      setVisible(false);
+    }
+  }, [getReviewCount]);
+  
+  const scrollToTop = (e: React.MouseEvent<HTMLElement>) => {
+    e.stopPropagation();
     window.scrollTo({ top: 0, behavior: 'smooth' });
   };
 
+  if (!visible) {
+    return null;
+  }
+
   return (
     <div
-      ref={scrollButtonRef}
-      className={`absolute right-2 flex h-12 w-12 cursor-pointer items-center justify-center rounded-full bg-white shadow-md transition-opacity duration-500 ${
-        isVisible ? 'opacity-100' : 'opacity-0'
-      }`}
-      onClick={scrollToTop}
-      style={{ top: `${scrollPosition}px` }}>
-      <TopIcon />
+      className="sticky bottom-5
+      mt-[-50px] flex h-12 w-12 cursor-pointer items-center justify-center rounded-full bg-white shadow-md"
+      style={{ left: 'calc(100%)' }}>
+      <button onClick={scrollToTop}>
+        <TopIcon />
+      </button>
     </div>
   );
 }
diff --git a/src/components/DetailSectionTop/DetailToursRating.tsx b/src/components/DetailSectionTop/DetailToursRating.tsx
index 0178f248..2be49e9c 100644
--- a/src/components/DetailSectionTop/DetailToursRating.tsx
+++ b/src/components/DetailSectionTop/DetailToursRating.tsx
@@ -1,5 +1,8 @@
 import { useEffect, useState } from 'react';
 import { Link } from 'react-scroll';
+import { useSetRecoilState } from 'recoil';
+import { reviewCountState } from '@recoil/review';
+
 interface ReviewData {
   ratingAverage: number;
   reviewTotalCount: number;
@@ -13,6 +16,7 @@ export default function DetailToursRating({
   reviewData,
 }: DetailToursRatingProps) {
   const { reviewTotalCount, ratingAverage } = reviewData;
+  const setReviewCount = useSetRecoilState(reviewCountState);
 
   const STAR_IDX_ARR = ['1', '2', '3', '4', '5'];
   const [ratedStarArr, setRatedStarArr] = useState([0, 0, 0, 0, 0]);
@@ -32,6 +36,7 @@ export default function DetailToursRating({
 
   useEffect(() => {
     setRatedStarArr(calculateRates(ratingAverage));
+    setReviewCount(reviewTotalCount);
   }, []);
 
   return (
diff --git a/src/components/MyTrip/MyTripItem.tsx b/src/components/MyTrip/MyTripItem.tsx
index a91a0a2f..2762a3d1 100644
--- a/src/components/MyTrip/MyTripItem.tsx
+++ b/src/components/MyTrip/MyTripItem.tsx
@@ -59,7 +59,7 @@ const MyTripItem: React.FC<MyTripItemProps> = ({ myTripList }) => {
           <div className="flex min-h-[72px]">
             <div>
               <img
-                className="rounded-1 h-[72px] min-h-[72px] w-[72px] rounded-[16px] object-cover"
+                className="rounded-1 h-[72px] min-h-[72px] min-w-[72px] rounded-[16px] object-cover"
                 src={tripThumbnailUrl}
                 alt="여행지 이미지"
               />
diff --git a/src/components/Plan/PlanEditItemBox.tsx b/src/components/Plan/PlanEditItemBox.tsx
index ae5f4873..e5b0f944 100644
--- a/src/components/Plan/PlanEditItemBox.tsx
+++ b/src/components/Plan/PlanEditItemBox.tsx
@@ -59,8 +59,6 @@ const PlanEditItemBox = ({
       visitDate: visitDate,
       tripItemOrder,
     });
-
-    console.log(newData);
   };
 
   useEffect(() => {
@@ -108,7 +106,7 @@ const PlanEditItemBox = ({
         <Droppable droppableId="droppableId">
           {(provided) => (
             <div {...provided.droppableProps} ref={provided.innerRef}>
-              <div className="text-left text-sm font-semibold ">{day}</div>
+              <div className="text-left text-sm font-semibold">{day}</div>
               {items.map((item, index) => (
                 <Draggable
                   key={item.tripItemId.toString()}
@@ -162,8 +160,8 @@ const PlanEditItemBox = ({
           )}
         </Droppable>
       </DragDropContext>
-      <div className="flex w-full justify-center">
-        <div className="flex h-14">
+      <div className="justify-cente fixed bottom-0 left-0 right-0 z-10 flex">
+        <div className="mx-auto flex h-14 max-w-md">
           <Alert
             title={'여행지 삭제'}
             message={<>선택한 장소를 삭제하시겠습니까?</>}
diff --git a/src/components/Plan/PlanItem.tsx b/src/components/Plan/PlanItem.tsx
index c27cf354..a4342a68 100644
--- a/src/components/Plan/PlanItem.tsx
+++ b/src/components/Plan/PlanItem.tsx
@@ -6,11 +6,12 @@ import PlanItemBox from './PlanItemBox';
 import PlanEditItemBox from './PlanEditItemBox';
 import { useContext, useEffect, useState } from 'react';
 import { socketContext } from '@hooks/useSocket';
-import { useRecoilState } from 'recoil';
+import { useRecoilState, useRecoilValue } from 'recoil';
 import { visitDateState } from '@recoil/socket';
 import { pubGetPathAndItems, pubUpdateTransportation } from '@api/socket';
 import { tripIdState } from '@recoil/socket';
-import { useRecoilValue } from 'recoil';
+import { tapState } from '@recoil/plan';
+import { useGetTripsAuthority } from '@hooks/useGetTripsAuthority';
 
 type PlanItemProps = {
   date: string;
@@ -19,21 +20,22 @@ 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 tap = useRecoilValue(tapState);
   const [visitDate, setVisitDate] = useRecoilState(visitDateState);
   const { tripItem, tripPath, callBackPub } = useContext(socketContext);
+  console.log(visitDate);
 
   useEffect(() => {
-    setVisitDate({ visitDate: date });
-  }, [date]);
-
-  useEffect(() => {
-    if (visitDate && tripId) {
-      callBackPub(() => pubGetPathAndItems(visitDate, tripId));
+    if (tap) {
+      setVisitDate({ visitDate: date });
+      if (date && tripId) {
+        callBackPub(() => pubGetPathAndItems({ visitDate: date }, tripId));
+      }
     }
-  }, [visitDate]);
+  }, [tap]);
 
   const handleEdit = () => {
     SetIsEdit((prev) => !prev);
@@ -41,14 +43,14 @@ const PlanItem: React.FC<PlanItemProps> = ({ date, day }) => {
 
   const handleTranspo = (
     transportation: 'CAR' | 'PUBLIC_TRANSPORTATION',
-    visitDate: string,
+    date: string,
     tripId: string,
   ) => {
     if (transportation !== transpo) {
       callBackPub(() =>
         pubUpdateTransportation(
           {
-            visitDate: visitDate,
+            visitDate: date,
             transportation: transportation,
           },
           tripId,
@@ -64,14 +66,12 @@ const PlanItem: React.FC<PlanItemProps> = ({ date, day }) => {
       {tripPath && <TripMap paths={tripPath.data?.paths || []} />}
 
       <div className="mb-[31px] mt-[31px] flex items-center justify-between">
-        {isEdit ? (
+        {tripAuthority !== 'WRITE' || isEdit ? (
           <div />
         ) : (
-          <div className="flex  items-center justify-center">
+          <div className="flex items-center justify-center">
             <div
-              onClick={() =>
-                handleTranspo('CAR', visitDate?.visitDate || '', tripId || '')
-              }
+              onClick={() => handleTranspo('CAR', date || '', tripId || '')}
               className="flex h-[32px] w-[32px] cursor-pointer items-center justify-center rounded-l-md border border-solid border-gray3">
               <CarIcon
                 size={19}
@@ -80,11 +80,7 @@ const PlanItem: React.FC<PlanItemProps> = ({ date, day }) => {
             </div>
             <div
               onClick={() =>
-                handleTranspo(
-                  'PUBLIC_TRANSPORTATION',
-                  visitDate?.visitDate || '',
-                  tripId || '',
-                )
+                handleTranspo('PUBLIC_TRANSPORTATION', date || '', tripId || '')
               }
               className="pointer-cursor -ml-[1px] flex h-[32px] w-[32px] cursor-pointer items-center justify-center rounded-r-md border border-solid border-gray3">
               <BusIcon
@@ -96,13 +92,16 @@ const PlanItem: React.FC<PlanItemProps> = ({ date, day }) => {
             </div>
           </div>
         )}
-
-        <button
-          type="button"
-          onClick={handleEdit}
-          className="flex h-8 w-[46px] cursor-pointer items-center justify-center gap-2 rounded-lg bg-[#f0f0f0] p-2 text-sm font-medium text-gray4">
-          {isEdit ? '완료' : '편집'}
-        </button>
+        {tripAuthority !== 'WRITE' ? (
+          ''
+        ) : (
+          <button
+            type="button"
+            onClick={handleEdit}
+            className="flex h-8 w-[46px] cursor-pointer items-center justify-center gap-2 rounded-lg bg-[#f0f0f0] p-2 text-sm font-medium text-gray4">
+            {isEdit ? '완료' : '편집'}
+          </button>
+        )}
       </div>
 
       <div className="flex flex-col gap-[5px]">
@@ -110,7 +109,7 @@ const PlanItem: React.FC<PlanItemProps> = ({ date, day }) => {
           <PlanEditItemBox
             item={tripItem?.data?.tripItems || []}
             day={day}
-            visitDate={visitDate?.visitDate || ''}
+            visitDate={date || ''}
             tripId={tripId || ''}
           />
         ) : (
@@ -122,10 +121,11 @@ const PlanItem: React.FC<PlanItemProps> = ({ date, day }) => {
           />
         )}
       </div>
-      <div className="mt-[18px]">
-        {isEdit ? (
-          ''
-        ) : (
+
+      {tripAuthority !== 'WRITE' || isEdit ? (
+        <div className="mt-[18px]" />
+      ) : (
+        <div className="my-[18px]">
           <ButtonWhite
             onClick={() => navigate('./place')}
             className="h-[40px] w-full">
@@ -134,8 +134,8 @@ const PlanItem: React.FC<PlanItemProps> = ({ date, day }) => {
               <div className="mt-[1px]">장소 추가하기</div>
             </div>
           </ButtonWhite>
-        )}
-      </div>
+        </div>
+      )}
     </>
   );
 };
diff --git a/src/components/Plan/PlanMoveItem.tsx b/src/components/Plan/PlanMoveItem.tsx
index 9601061a..b06df513 100644
--- a/src/components/Plan/PlanMoveItem.tsx
+++ b/src/components/Plan/PlanMoveItem.tsx
@@ -94,9 +94,8 @@ const PlanMoveItem: React.FC<PlanMoveItemProps> = ({
                     <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>
+                          <Dialog.Close asChild key={day}>
                             <button
-                              key={index}
                               onClick={() => handleMoveItem(date[index])}
                               className="relative flex flex-shrink-0 flex-grow-0 justify-start gap-2">
                               <PaperIcon />
diff --git a/src/components/Plan/PlanSectionTop.tsx b/src/components/Plan/PlanSectionTop.tsx
index c8ace510..52b9989a 100644
--- a/src/components/Plan/PlanSectionTop.tsx
+++ b/src/components/Plan/PlanSectionTop.tsx
@@ -1,4 +1,4 @@
-import TripInfo from '@components/Trip/TripInfo';
+import TripRealtimeEditor from '@components/Trip/TripRealtimeEditor';
 import { BackBox } from '@components/common';
 import { useNavigate } from 'react-router-dom';
 import TripBudget from './TripBudget';
@@ -12,10 +12,13 @@ import { useRecoilValue, useRecoilState } from 'recoil';
 import { dayState, dateState } from '@recoil/plan';
 import { tripIdState, memberIdState } from '@recoil/socket';
 import { calculateDayAndDate } from '@utils/utils';
+import { TripSchedule } from '@components/Trip/TripSchedule';
+// import { getItem } from '@utils/localStorageFun';
 
 const PlanSectionTop = () => {
   const navigate = useNavigate();
   const tripId = useRecoilValue(tripIdState);
+
   const pubMember = useRecoilValue(memberIdState);
   const [, setDay] = useRecoilState(dayState);
   const [, setDate] = useRecoilState(dateState);
@@ -27,7 +30,7 @@ const PlanSectionTop = () => {
   const { callBackPub, tripInfo } = useContext(socketContext);
 
   useEffect(() => {
-    callBackPub(() => pubEnterMember(pubMember, tripId));
+    callBackPub(() => pubEnterMember(tripId));
   }, []);
 
   let DayArr: string[] = [];
@@ -54,7 +57,8 @@ const PlanSectionTop = () => {
           navigate(-1);
         }}
       />
-      <TripInfo />
+      <TripRealtimeEditor />
+      <TripSchedule />
       <TripBudget />
       <Tab
         lists={DayArr}
diff --git a/src/components/Plan/TripBudget.tsx b/src/components/Plan/TripBudget.tsx
index bac3e435..07b33ecf 100644
--- a/src/components/Plan/TripBudget.tsx
+++ b/src/components/Plan/TripBudget.tsx
@@ -1,51 +1,57 @@
+import { pubUpdateBudget } from '@api/socket';
 import Alert from '@components/common/alert/Alert';
-import { SettingIcons } from '@components/common/icons/Icons';
+import { CloseIcon, SettingIcons } from '@components/common/icons/Icons';
 import { socketContext } from '@hooks/useSocket';
 import * as Progress from '@radix-ui/react-progress';
-import { useContext, useEffect, useState } from 'react';
+import { tripIdState } from '@recoil/socket';
+import { useContext, useState } from 'react';
+import { useRecoilValue } from 'recoil';
 
 const TripBudget = () => {
   const { tripBudget } = useContext(socketContext);
-  const budget = tripBudget?.data;
-
-  const [targetBudget, setTargetBudget] = useState(0); // 예시 목표 경비
-  const [currentSpending, setCurrentSpending] = useState(0); // 초기 사용 경비
+  const tripId = useRecoilValue(tripIdState);
 
-  useEffect(() => {
-    if (budget) {
-      setTargetBudget(budget.budget || 0);
-      setCurrentSpending(
-        budget.calculatedPrice >= 0 ? budget.calculatedPrice : 0,
-      );
-    }
-  }, [budget]);
+  const budget = tripBudget?.data;
 
   // 프로그레스 바 값 계산
   const progress = Math.min(
-    currentSpending && targetBudget
-      ? (currentSpending / targetBudget) * 100
+    budget?.calculatedPrice && budget.budget
+      ? (budget.calculatedPrice / budget.budget) * 100
       : 0,
     100,
   );
 
-  // // 목표 경비 설정 함수
-  // const handleSetTargetBudget = (newTargetBudget: number) => {
-  //   setTargetBudget(newTargetBudget);
-  // };
+  const [inputBudget, setInputBudget] = useState('');
+
+  const showCloseIcon = inputBudget;
+
+  // 목표 경비 설정 함수
+  const handleSetTargetBudget = (inputBudget: string) => {
+    const newTargetBudget = parseInt(inputBudget, 10); // 문자열 숫자로 변환
+    if (!isNaN(newTargetBudget) && newTargetBudget !== budget?.budget) {
+      pubUpdateBudget(
+        {
+          budget: newTargetBudget,
+        },
+        tripId || '',
+      );
+      setInputBudget('');
+    }
+  };
 
   return (
     <>
-      <div className="my-4">
+      <div className={`${!budget?.budget ? 'pb-[55px]' : 'pb-[25px]'} my-4}`}>
         <div className="caption1 mb-[2px]">사용 경비</div>
         <div className="flex items-center">
           <span className="title2 mr-[2px]">
-            {currentSpending.toLocaleString()}
+            {budget?.calculatedPrice.toLocaleString() ?? '-'}
           </span>
           <span className="body1">원</span>
         </div>
 
         <Progress.Root
-          className="relative my-2 h-[16px] w-full overflow-hidden rounded-[8px] border border-solid border-gray2"
+          className="relative my-2 h-[8px] w-full overflow-hidden rounded-[8px] border border-solid border-gray2"
           style={{
             transform: 'translateZ(0)',
           }}
@@ -68,31 +74,63 @@ const TripBudget = () => {
             <Alert
               title={'비용을 입력해주세요'}
               message={''}
-              onConfirm={() => {
-                console.log('확인');
-              }}
-              onCancel={() => {
-                console.log('취소');
-              }}
+              onConfirm={() => handleSetTargetBudget(inputBudget)}
+              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="h-3.5 w-[129.36px]">
+                            <span className="caption1 w-[129.36px] text-center text-white">
+                              목표 경비를 입력해보세요!
+                            </span>
+                          </div>
+                        </div>
+                      </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>
+                  )}
                 </button>
               }
               content={
                 <div className="mb-6 mt-8 flex w-[80%] items-center justify-between border-b-[1px] border-solid border-gray4">
-                  <input
-                    type="text"
-                    className="title3 text-gray6 placeholder:text-gray4 focus:outline-none"
-                    placeholder="금액"
-                  />
-                  <span className="title3 text-gray4">원</span>
+                  <div className="flex w-full items-center justify-between">
+                    <input
+                      type="number"
+                      className="title3 text-gray6 placeholder:text-gray4 focus:outline-none"
+                      placeholder="금액"
+                      value={inputBudget}
+                      onChange={(e) => setInputBudget(e.target.value)}
+                    />
+                    <div
+                      className="cursor-pointer"
+                      onClick={() => setInputBudget('')}>
+                      {showCloseIcon && <CloseIcon size={16} fill="#D7D7D7" />}
+                    </div>
+                  </div>
+
+                  <span className="title3 pl-[4.5px] text-gray4">원</span>
                 </div>
               }
             />
           </div>
           <div>
-            <span>{targetBudget.toLocaleString()}</span>
+            <span>{budget?.budget.toLocaleString() ?? '- '}</span>
             <span>원</span>
           </div>
         </div>
diff --git a/src/components/Plan/TripMap.tsx b/src/components/Plan/TripMap.tsx
index 9816403e..7c167103 100644
--- a/src/components/Plan/TripMap.tsx
+++ b/src/components/Plan/TripMap.tsx
@@ -50,7 +50,6 @@ const TripMap = ({ paths }: { paths: Paths[] }) => {
   const MapStyle = {
     width: '100%',
     height: '180px',
-    marginTop: '15px',
     transition: 'height 0.3s ease-in-out',
   };
 
@@ -100,8 +99,6 @@ const TripMap = ({ paths }: { paths: Paths[] }) => {
   // 선택된 마커의 인덱스를 추적하기 위한 상태
   const [selectedMarker, setSelectedMarker] = useState<number | null>(null);
 
-  // ...
-
   // 마커를 클릭할 때 호출되는 함수
   const handleMarkerClick = (index: number) => {
     setSelectedMarker(index);
@@ -127,22 +124,20 @@ const TripMap = ({ paths }: { paths: Paths[] }) => {
         svgComponent = isSelected ? FifthSelectedMarker : FifthMarker;
         break;
       default:
-        // 기본 마커가 필요한 경우 기본 마커 이미지 URL을 제공합니다.
+        // 기본 마커
         return 'default_marker_image_url';
     }
     return svgComponent;
   };
 
-  // ... TripMap 컴포넌트 및 나머지 코드
-
   return (
-    <div className="flex flex-col justify-center">
+    <div className="mx-[-20px] flex flex-col justify-center">
       <Map
         key={VITE_KAKAO_MAP_API_KEY}
         center={centerPosition}
         style={MapStyle}
         level={10}
-        className="relative rounded-lg object-fill"
+        className="relative object-fill"
         ref={mapRef}>
         {paths.map((path, index) => (
           <div key={index}>
diff --git a/src/components/Review/CommentItem.tsx b/src/components/Review/CommentItem.tsx
index c4e4d264..33712b0c 100644
--- a/src/components/Review/CommentItem.tsx
+++ b/src/components/Review/CommentItem.tsx
@@ -57,7 +57,7 @@ const CommentItem: React.FC<ItemProps> = (props: ItemProps) => {
   return (
     <div className="mb-4 border-t border-solid border-gray-300 pt-4">
       <div className=" flex items-center">
-        <div className="mr-2">
+        <div className="mr-4">
           {!(
             authorProfileImageUrl === 'http://asiduheimage.jpg' ||
             authorProfileImageUrl === null
@@ -65,7 +65,7 @@ const CommentItem: React.FC<ItemProps> = (props: ItemProps) => {
             <img
               src={authorProfileImageUrl}
               alt="유저 프로필"
-              className="w-[60px]rounded-full h-[60px]"
+              className="h-[60px] w-[60px] rounded-full"
             />
           ) : (
             <NullUser />
@@ -85,7 +85,7 @@ const CommentItem: React.FC<ItemProps> = (props: ItemProps) => {
           </div>
         )}
       </div>
-      <div className="ml-14 w-[275px] pl-3 text-sm text-gray7">{content}</div>
+      <div className="ml-16 w-[275px] pl-3 text-sm text-gray7">{content}</div>
     </div>
   );
 };
diff --git a/src/components/Trip/LikedToursList.tsx b/src/components/Trip/LikedToursList.tsx
index 67119420..eab8eeea 100644
--- a/src/components/Trip/LikedToursList.tsx
+++ b/src/components/Trip/LikedToursList.tsx
@@ -1,3 +1,92 @@
+import { useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { useInfiniteQuery } from '@tanstack/react-query';
+
+import LikedToursListCategory from './LikedToursLists/LikedToursListCategory';
+import LikedToursListBox from './LikedToursLists/LikedToursListBox';
+import NoDataMessage from '@components/common/noData/NoDataMessage';
+
+import { getTripsLike } from '@api/trips';
+import { HeartIcon, NewIcon } from '@components/common/icons/Icons';
+
 export const LikedToursList = () => {
-  return <div>LikedToursList</div>;
+  const [selectedContentTypeId, setSelectedContentTypeId] = useState<
+    null | number
+  >(null);
+
+  const navigate = useNavigate();
+  const params = useParams();
+
+  const [selectedTripId, _] = useState(Number(params.id));
+
+  const { fetchNextPage, hasNextPage, data, isLoading, error } =
+    useInfiniteQuery({
+      queryKey: ['ourTrips'],
+      queryFn: ({ pageParam = 0 }) =>
+        getTripsLike(selectedTripId, 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 (error) {
+    return <div>데이터를 불러오는 중 오류가 발생했습니다.</div>;
+  }
+
+  const handleCategoryClick = (contentTypeId: number | null) => {
+    setSelectedContentTypeId(contentTypeId);
+  };
+
+  return (
+    <div className="realtive pt-5">
+      <LikedToursListCategory onCategoryClick={handleCategoryClick} />
+
+      {data?.pages[0].data.content.length > 0 ? (
+        <div className="mb-[15px]">
+          <LikedToursListBox
+            toursData={data || { pages: [] }}
+            fetchNextPage={fetchNextPage}
+            hasNextPage={hasNextPage}
+            isLoading={isLoading}
+            selectedTripId={selectedTripId}
+            selectedContentTypeId={selectedContentTypeId}
+          />
+        </div>
+      ) : (
+        <div className="relative min-h-[60vh]">
+          <NoDataMessage
+            message1="우리의 관심 목록이 없습니다."
+            message2="가고 싶은 장소를 추가해보세요!"
+            icon={<HeartIcon size={44} fill="#EDEDED" color="#EDEDED" />}
+          />
+        </div>
+      )}
+
+      {/* 우리의 관심 여행지 추가 버튼 => 검색 라우터 이동 */}
+      <div className="sticky bottom-5 left-1/2 z-[100] inline-flex h-10 w-[168px] -translate-x-1/2 transform items-center justify-center gap-1.5 rounded-3xl border border-solid border-cyan-400 bg-white px-3.5">
+        <button
+          onClick={() => navigate('add')}
+          className="flex items-center justify-between">
+          <NewIcon />
+          <span className="ml-[5px] mt-[0.5px] text-sm font-semibold text-cyan-400">
+            우리의 관심목록 추가
+          </span>
+        </button>
+      </div>
+    </div>
+  );
 };
diff --git a/src/components/Trip/LikedToursLists/LikedToursListBox.tsx b/src/components/Trip/LikedToursLists/LikedToursListBox.tsx
new file mode 100644
index 00000000..56c2db3d
--- /dev/null
+++ b/src/components/Trip/LikedToursLists/LikedToursListBox.tsx
@@ -0,0 +1,72 @@
+import React from 'react';
+import InfiniteScroll from 'react-infinite-scroller';
+import { v4 as uuidv4 } from 'uuid';
+import ToursItemSkeleton from '@components/Tours/ToursItemSkeleton';
+// import { Spinner } from '@components/common/spinner/Spinner';
+
+import LikedToursListItem from './LikedToursListItem';
+
+interface LikedToursListProps {
+  toursData: { pages: Array<{ data: { content: ourTripType[] } }> };
+  fetchNextPage: () => void;
+  hasNextPage: boolean;
+  isLoading: boolean;
+  selectedContentTypeId: number | null;
+  selectedTripId: number;
+}
+
+const LikedToursListBox: React.FC<LikedToursListProps> = ({
+  toursData,
+  fetchNextPage,
+  hasNextPage,
+  isLoading,
+  selectedContentTypeId,
+  selectedTripId,
+}) => {
+  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 (
+    <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-[5px] overflow-y-scroll">
+        {isLoading
+          ? Array.from({ length: 10 }, (_, index) => (
+              <ToursItemSkeleton key={index} />
+            ))
+          : filteredData.map((group) => (
+              <React.Fragment key={uuidv4()}>
+                {group?.data.content.map((ourTripList: ourTripType) => (
+                  <LikedToursListItem
+                    key={uuidv4()}
+                    ourTripList={ourTripList}
+                    selectedTripId={selectedTripId}
+                  />
+                ))}
+              </React.Fragment>
+            ))}
+      </div>
+    </InfiniteScroll>
+  );
+};
+
+export default LikedToursListBox;
diff --git a/src/components/Trip/LikedToursLists/LikedToursListCategory.tsx b/src/components/Trip/LikedToursLists/LikedToursListCategory.tsx
new file mode 100644
index 00000000..8a243c2f
--- /dev/null
+++ b/src/components/Trip/LikedToursLists/LikedToursListCategory.tsx
@@ -0,0 +1,46 @@
+import { useState } from 'react';
+import { LikedToursListCategoryItem } from './LikedToursListCategoryItem';
+
+interface LikedToursListCategoryProps {
+  onCategoryClick: (contentTypeId: number | null) => void;
+}
+
+const LikedToursListCategory: React.FC<LikedToursListCategoryProps> = ({
+  onCategoryClick,
+}) => {
+  const [selectedCategory, setSelectedCategory] = useState<string>('전체');
+
+  const categories = [
+    { code: null, name: '전체' },
+    { code: 12, name: '관광지' },
+    { code: 32, name: '숙소' },
+    { code: 39, name: '식당' },
+  ];
+
+  const handleSelectCategory = (name: string) => {
+    setSelectedCategory(name);
+    window.scrollTo({
+      top: 0,
+      left: 0,
+      behavior: 'smooth',
+    });
+  };
+
+  return (
+    <div className="no-scrollbar mb-6 flex w-[100%] overflow-scroll overflow-y-hidden bg-white">
+      {categories.map((category) => {
+        return (
+          <LikedToursListCategoryItem
+            key={category.code}
+            category={category}
+            onCategoryClick={onCategoryClick}
+            isSelected={category.name === selectedCategory}
+            onSelect={handleSelectCategory}
+          />
+        );
+      })}
+    </div>
+  );
+};
+
+export default LikedToursListCategory;
diff --git a/src/components/Trip/LikedToursLists/LikedToursListCategoryItem.tsx b/src/components/Trip/LikedToursLists/LikedToursListCategoryItem.tsx
new file mode 100644
index 00000000..d795f8f0
--- /dev/null
+++ b/src/components/Trip/LikedToursLists/LikedToursListCategoryItem.tsx
@@ -0,0 +1,29 @@
+interface LikedToursListCategoryItemProps {
+  category: { code: number | null; name: string };
+  onCategoryClick: (contentTypeId: number | null) => void;
+  onSelect: (name: string) => void;
+  isSelected: boolean;
+}
+
+export const LikedToursListCategoryItem: React.FC<
+  LikedToursListCategoryItemProps
+> = ({ category, onCategoryClick, onSelect, isSelected }) => {
+  const handleCategoryClick = () => {
+    if (category.code !== undefined) {
+      onCategoryClick(category.code);
+      onSelect(category.name);
+    }
+  };
+
+  const buttonStyle = isSelected
+    ? 'bg-[#28D8FF] text-white font-bold'
+    : 'bg-[#fff] text-[#888] border-[#ededed]';
+
+  return (
+    <button
+      onClick={handleCategoryClick}
+      className={`body4 mr-[4px] flex items-center justify-center whitespace-nowrap rounded-[30px] border border-solid bg-[#28D8FF] px-[16px] py-[7px] leading-normal ${buttonStyle}`}>
+      {category.name}
+    </button>
+  );
+};
diff --git a/src/components/Trip/LikedToursLists/LikedToursListItem.tsx b/src/components/Trip/LikedToursLists/LikedToursListItem.tsx
new file mode 100644
index 00000000..8fb54656
--- /dev/null
+++ b/src/components/Trip/LikedToursLists/LikedToursListItem.tsx
@@ -0,0 +1,136 @@
+import {
+  ThumbsUp,
+  ThumbsDown,
+  ClickThumbsUp,
+  ClickThumbsDown,
+  StarIcon,
+} from '@components/common/icons/Icons';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { postTripsLikeHate } from '@api/trips';
+import { useNavigate } from 'react-router-dom';
+import { useState } from 'react';
+
+interface LikedToursListItemProps {
+  ourTripList: ourTripType;
+  selectedTripId: number;
+}
+
+const LikedToursListItem: React.FC<LikedToursListItemProps> = ({
+  ourTripList,
+  selectedTripId,
+}) => {
+  const {
+    tourItemId,
+    ratingAverage,
+    reviewCount,
+    prefer,
+    notPrefer,
+    preferTotalCount,
+    notPreferTotalCount,
+    smallThumbnailUrl,
+    tourAddress,
+    title,
+  } = ourTripList;
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+  const [thumbsState, setThumbsState] = useState({
+    prefer: false,
+    notPrefer: false,
+  });
+
+  const { mutate: thumbsUpMutate } = useMutation({
+    mutationFn: () =>
+      postTripsLikeHate(
+        selectedTripId,
+        tourItemId,
+        thumbsState.prefer,
+        thumbsState.notPrefer,
+      ),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['ourTrips'] });
+    },
+    onError: () => console.log('error'),
+  });
+
+  const onClickThumbsUpButton = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    setThumbsState({ prefer: true, notPrefer: false });
+    thumbsUpMutate();
+  };
+
+  const onClickThumbsDownButton = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    setThumbsState({ prefer: false, notPrefer: true });
+    thumbsUpMutate();
+  };
+
+  return (
+    <div
+      className={`relative cursor-pointer pb-[4px]`}
+      onClick={() => navigate(`/detail/${tourItemId}`)}>
+      <div className="flex">
+        <div>
+          <img
+            className="rounded-1 h-[72px] max-h-[72px] w-[72px] rounded-[16px] object-cover"
+            src={smallThumbnailUrl}
+            alt="여행지 이미지"
+          />
+        </div>
+
+        <div className="ml-[8px] flex flex-col items-start justify-between gap-[1px]">
+          <div className="max-w-[270px]">
+            <p className=" truncate  whitespace-nowrap px-[2px] font-['Pretendard'] text-[16px] font-bold leading-normal text-black">
+              {title}
+            </p>
+
+            <div className="flex items-center">
+              <div className="mr-[5px] flex items-center">
+                <div>
+                  <StarIcon size={12.5} color="#FFEC3E" fill="#FFEC3E" />
+                </div>
+
+                <div>
+                  <span className="ml-1 mr-0.5 text-[14px] font-normal text-gray4">
+                    {(Math.ceil(ratingAverage * 100) / 100).toFixed(1)}
+                  </span>
+                  <span className="text-[14px] text-gray4">
+                    ({reviewCount ? reviewCount.toLocaleString() : reviewCount})
+                  </span>
+                </div>
+              </div>
+
+              <div className="max-w-[200px] ">
+                <p className="truncate text-[14px] text-gray4">
+                  {tourAddress ? tourAddress : '주소를 제공하지 않고 있어요'}
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <div className="caption1 flex justify-center leading-normal text-gray4">
+            <div className="flex items-center justify-center ">
+              <button
+                onClick={onClickThumbsUpButton}
+                className="mr-[4px] flex min-h-[24px] min-w-[46px] items-center justify-center rounded border border-solid border-gray-400 px-[8px] py-[1px] opacity-80">
+                {prefer ? <ClickThumbsUp /> : <ThumbsUp />}
+                <span className="pl-[2px] text-[14px] text-gray7">
+                  {preferTotalCount}
+                </span>
+              </button>
+              <button
+                onClick={onClickThumbsDownButton}
+                className="flex min-h-[24px] min-w-[46px] items-center justify-center rounded border border-solid  border-gray-400  px-[8px] py-[1px] opacity-80">
+                {notPrefer ? <ClickThumbsDown /> : <ThumbsDown />}
+                <span className="pl-[2px] text-[14px] text-gray7">
+                  {notPreferTotalCount}
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default LikedToursListItem;
diff --git a/src/components/Trip/PlanTripButton.tsx b/src/components/Trip/PlanTripButton.tsx
index bd5ac6fc..34ce58a5 100644
--- a/src/components/Trip/PlanTripButton.tsx
+++ b/src/components/Trip/PlanTripButton.tsx
@@ -1,18 +1,25 @@
-import { PlanIcon, RightIcon } from '@components/common/icons/Icons';
+import { PlanColorIcon, RightIcon } from '@components/common/icons/Icons';
+import { useNavigate } from 'react-router-dom';
 
 const PlanTripButton = () => {
-  return (
+  const navigate = useNavigate();
+
+  const handleButtonClick = () => {
+    navigate('plan');
+  };
 
-    <button className="body3 mb-10 mt-6 flex w-full items-center justify-between rounded-[8px] bg-[#F3F4F5] px-[15px] py-[15px] text-gray7 text-main1">
+  return (
+    <button
+      onClick={handleButtonClick}
+      className="body3 mb-10 mt-6 flex w-full items-center justify-between rounded-[8px] bg-[#F3F4F5] px-[15px] py-[15px] text-gray7 text-main1">
       <div className="flex items-center justify-start ">
-        <div>
-          <PlanIcon />
+        <div className="pt-0.5">
+          <PlanColorIcon />
         </div>
-        <p className="ml-1.5 text-gray5">여행 계획하기</p>
+        <p className="ml-2 text-[15px] text-gray5">여행 계획하기</p>
       </div>
-      <div>
+      <div className="pt-0.5">
         <RightIcon fill="#888888" />
-
       </div>
     </button>
   );
diff --git a/src/components/Trip/TripInfo.tsx b/src/components/Trip/TripInfo.tsx
index 5594c89a..8dd648a5 100644
--- a/src/components/Trip/TripInfo.tsx
+++ b/src/components/Trip/TripInfo.tsx
@@ -1,4 +1,4 @@
-import { UserIcon } from '@components/common/icons/Icons';
+import { TripSchedule } from './TripSchedule';
 import { useRecoilValue, useRecoilState } from 'recoil';
 import { isModalOpenState, modalChildrenState } from '@recoil/modal';
 import TripSurveyMember from '@components/common/modal/children/TripSurveyMember';
@@ -6,9 +6,10 @@ 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 { 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';
 
 const ShareList = () => {
   const tripId = Number(useRecoilValue(tripIdState));
@@ -21,7 +22,7 @@ const ShareList = () => {
   return (
     <>
       <hr className="my-3 border-solid border-gray2" />
-      <div>
+      <div className="max-h-[115px] overflow-y-auto">
         {members.map((member: any, index: number) => {
           return (
             <div
@@ -35,7 +36,13 @@ const ShareList = () => {
                   className="h-[32px] w-[32px] rounded-full"
                 />
               ) : (
-                <NullUser className="h-[32px] w-[32px]" />
+                <div
+                  className={
+                    'flex h-[32px] w-[32px] items-center justify-center rounded-full bg-[#EDEDED]'
+                  }>
+                  <UserIcon size={20} color="white" fill="white" />
+                </div>
+                // <NullUser className="h-[32px] w-[32px]" />
               )}
               <div className="ml-3">{member.nickname}</div>
             </div>
@@ -81,7 +88,13 @@ const TripInfo = () => {
                     className="h-[32px] w-[32px] rounded-full border-2 border-solid border-white"
                   />
                 ) : (
-                  <NullUser className="h-[32px] w-[32px] border-2 border-solid border-white" />
+                  <div
+                    className={
+                      'flex h-[32px] w-[32px] items-center justify-center rounded-full bg-[#EDEDED]'
+                    }>
+                    <UserIcon size={20} color="white" fill="white" />
+                  </div>
+                  // <NullUser className="h-[32px] w-[32px] border-2 border-solid border-white" />
                 )}
               </div>
             ))}
@@ -104,20 +117,7 @@ const TripInfo = () => {
         </div>
 
         {isAccordion && <ShareList />}
-        <hr className="mb-6 mt-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 items-center pb-[10px]">
-              <UserIcon size={20} fill="#888" color="#888" />
-              <span className="body4 pt-[1px] text-gray4">5</span>
-            </div>
-          </div>
-          <button className="body3 rounded-lg border-2 border-solid border-gray2 p-2 text-gray4">
-            편집
-          </button>
-        </div>
-        <span className="body1 text-gray4">23.12.23 - 23.12.25</span>
+        <TripSchedule />
       </div>
       <Modal isOpen={isModalOpen} closeModal={closeModal}>
         {modalChildren === 'TripSurveyMember' && <TripSurveyMember />}
diff --git a/src/components/Trip/TripParticipant.tsx b/src/components/Trip/TripParticipant.tsx
index 934aa95e..d114a6d5 100644
--- a/src/components/Trip/TripParticipant.tsx
+++ b/src/components/Trip/TripParticipant.tsx
@@ -1,6 +1,7 @@
-import { ReactComponent as NullUser } from '@assets/images/NullUser.svg';
+// import { ReactComponent as NullUser } from '@assets/images/NullUser.svg';
 import { useRecoilValue } from 'recoil';
 import { participantsState } from '@recoil/trip';
+import { UserIcon } from '@components/common/icons/Icons';
 
 interface ParticipantStatusProps {
   status: string;
@@ -19,7 +20,13 @@ const ParticipantList: React.FC<{ infos: any[] }> = ({ infos }) => (
             className="h-[32px] w-[32px] rounded-full"
           />
         ) : (
-          <NullUser className="h-[32px] w-[32px]" />
+          <div
+            className={
+              'flex h-[32px] w-[32px] items-center justify-center rounded-full bg-[#EDEDED]'
+            }>
+            <UserIcon size={20} color="white" fill="white" />
+          </div>
+          // <NullUser className="h-[32px] w-[32px]" />
         )}
         <div className="ml-3">{info.nickname}</div>
       </div>
@@ -33,7 +40,7 @@ export const ParticipantStatus: React.FC<ParticipantStatusProps> = ({
   const participants = useRecoilValue(participantsState);
 
   return (
-    <div className="flex flex-col">
+    <div className="flex flex-col pt-5">
       <div className="mb-4 ml-auto mr-2 text-xs text-gray5">
         {status == '참여' ? (
           <>{participants?.tripSurveyMemberCount}명 참여</>
diff --git a/src/components/Trip/TripPreference.tsx b/src/components/Trip/TripPreference.tsx
index 02f71976..ca11afda 100644
--- a/src/components/Trip/TripPreference.tsx
+++ b/src/components/Trip/TripPreference.tsx
@@ -32,7 +32,9 @@ const TripPreferenceButton: React.FC = () => {
         <div>
           <HeartIcon fill="#888888" color="#888888" size={20} />
         </div>
-        <p className="ml-1.5">내 여행 취향 설정하러 가기</p>
+        <p className="ml-1.5 text-[14px] text-main1">
+          내 여행 취향 설정하러 가기
+        </p>
       </div>
       <div className="ml-auto">
         <RightIcon fill="#5E5E5E" />
@@ -154,7 +156,7 @@ const TripPreference: React.FC = () => {
   };
 
   return (
-    <div className=" m-[-20px] flex flex-col items-center bg-gray1 pb-[20px]  ">
+    <div className=" m-[-20px] mt-0 flex flex-col items-center bg-gray1 pb-[20px]  ">
       <TripPreferenceButton />
       <div
         onClick={handleButtonClick}
diff --git a/src/components/Trip/TripRealtimeEditor.tsx b/src/components/Trip/TripRealtimeEditor.tsx
new file mode 100644
index 00000000..4d810455
--- /dev/null
+++ b/src/components/Trip/TripRealtimeEditor.tsx
@@ -0,0 +1,95 @@
+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 tripMemberData = tripMember?.data;
+  useEffect(() => {
+    console.log('tripMemberData', tripMemberData);
+  }, [tripMemberData]);
+  return (
+    <div className="my-5">
+      <Swiper
+        slidesPerView={5}
+        navigation={true}
+        modules={[Navigation]}
+        className="flex w-[375px] items-center justify-center">
+        {tripMemberData?.tripMembers?.map((member) => {
+          const isConnected = member?.connected;
+          const thumbnailUrl = member?.thumbnailUrl;
+          const isImageUrlValid =
+            thumbnailUrl && thumbnailUrl !== 'http://asiduheimage.jpg';
+          const imageUrl = isImageUrlValid ? thumbnailUrl : null;
+
+          return (
+            <SwiperSlide>
+              <div key={member?.memberId}>
+                {imageUrl ? (
+                  <img
+                    src={imageUrl}
+                    alt="유저 프로필"
+                    className={`h-[48px] w-[48px] rounded-full ${
+                      isConnected
+                        ? 'border-2 border-solid border-[#29DDF6]'
+                        : ''
+                    }`}
+                  />
+                ) : (
+                  <div
+                    className={`flex h-[48px] w-[48px] items-center justify-center rounded-full bg-[#EDEDED] ${
+                      isConnected
+                        ? 'border-2 border-solid border-[#29DDF6]'
+                        : ''
+                    }`}>
+                    <UserIcon size={30} color="white" fill="white" />
+                  </div>
+                )}
+                <div className="mt-1 flex w-[48px] items-center justify-center overflow-hidden whitespace-nowrap">
+                  <span className="inline-block max-w-full overflow-hidden text-ellipsis text-[12px]">
+                    {member?.name}
+                  </span>
+                </div>
+              </div>
+            </SwiperSlide>
+          );
+        })}
+      </Swiper>
+    </div>
+  );
+};
+
+export default TripRealtimeEditor;
diff --git a/src/components/Trip/TripSchedule.tsx b/src/components/Trip/TripSchedule.tsx
new file mode 100644
index 00000000..ad55e20e
--- /dev/null
+++ b/src/components/Trip/TripSchedule.tsx
@@ -0,0 +1,22 @@
+import { UserIcon } from '@components/common/icons/Icons';
+
+export const TripSchedule = () => {
+  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 items-center pb-[10px]">
+            <UserIcon size={20} fill="#888" color="#888" />
+            <span className="body4 pt-[1px] text-gray4">5</span>
+          </div>
+        </div>
+        <button className="body3 rounded-lg border-2 border-solid border-gray2 p-2 text-gray4">
+          편집
+        </button>
+      </div>
+      <span className="body1 text-gray4">23.12.23 - 23.12.25</span>
+    </>
+  );
+};
diff --git a/src/components/Trip/TripSectionTop.tsx b/src/components/Trip/TripSectionTop.tsx
index 82e03c8e..59ef58eb 100644
--- a/src/components/Trip/TripSectionTop.tsx
+++ b/src/components/Trip/TripSectionTop.tsx
@@ -5,9 +5,13 @@ import { BackBox } from '@components/common';
 import { useNavigate } from 'react-router-dom';
 import PlanTripButton from './PlanTripButton';
 import { LikedToursList } from './LikedToursList';
+import { useGetTripsAuthority } from '@hooks/useGetTripsAuthority';
 
 const TripSectionTop = () => {
   const navigate = useNavigate();
+  const { tripAuthority } = useGetTripsAuthority();
+
+  console.log(tripAuthority);
 
   return (
     <div className="min-h-screen">
diff --git a/src/components/Wish/WishItem.tsx b/src/components/Wish/WishItem.tsx
index 6b30c0b5..e8c12eb9 100644
--- a/src/components/Wish/WishItem.tsx
+++ b/src/components/Wish/WishItem.tsx
@@ -38,12 +38,12 @@ const WishItem: React.FC<WishItemProps> = ({ wishList }) => {
         </div>
 
         <div className="ml-[8px] flex flex-col items-start justify-between gap-[15px]">
-          <div className="max-w-[240px]">
-            <p className="overflow-hidden truncate text-clip whitespace-nowrap px-[2px] font-['Pretendard'] text-[16px] font-bold leading-normal text-black">
+          <div className=" max-w-[240px]">
+            <p className=" truncate whitespace-nowrap px-[2px] font-['Pretendard'] text-[16px] font-bold leading-normal text-black">
               {title}
             </p>
-            <div className="ml-[3px] mt-[5px] max-w-[260px] truncate">
-              <p className="text-[14px] text-gray6">{tourAddress}</p>
+            <div className="ml-[3px] mt-[5px] max-w-[260px]">
+              <p className="truncate text-[14px] text-gray6">{tourAddress}</p>
             </div>
           </div>
 
diff --git a/src/components/common/icons/Icons.tsx b/src/components/common/icons/Icons.tsx
index 34987b1f..af595fd3 100644
--- a/src/components/common/icons/Icons.tsx
+++ b/src/components/common/icons/Icons.tsx
@@ -1299,6 +1299,179 @@ export const CounterIcon: React.FC<
   );
 };
 
+export const PlanColorIcon: React.FC<IconProps> = ({ size = 21 }) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 21 21"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M18.1251 0.0742188H6.12282C5.01804 0.0742188 4.12244 0.969827 4.12244 2.07462V18.0778C4.12244 19.1826 5.01804 20.0782 6.12282 20.0782H18.1251C19.2299 20.0782 20.1255 19.1826 20.1255 18.0778V2.07462C20.1255 0.969827 19.2299 0.0742188 18.1251 0.0742188Z"
+        fill="#D7D7D7"
+      />
+      <path
+        d="M8.32007 6.94141H15.8734"
+        stroke="#B9B9B9"
+        stroke-width="1.50023"
+        stroke-linecap="round"
+      />
+      <path
+        d="M8.32007 10.6875H15.8734"
+        stroke="#B9B9B9"
+        stroke-width="1.50023"
+        stroke-linecap="round"
+      />
+      <path
+        d="M16.1244 0.0742188H8.12286V2.07462C8.12286 2.60515 8.33362 3.11396 8.70876 3.48911C9.0839 3.86426 9.59271 4.07501 10.1232 4.07501H14.124C14.6545 4.07501 15.1633 3.86426 15.5385 3.48911C15.9136 3.11396 16.1244 2.60515 16.1244 2.07462V0.0742188ZM3.21193 6.36547L9.83319 12.9768C10.016 13.1685 10.1196 13.4221 10.1232 13.6869V15.0772C10.1232 15.3425 10.0179 15.5969 9.83029 15.7844C9.64272 15.972 9.38832 16.0774 9.12305 16.0774H7.73279C7.60116 16.0782 7.47067 16.0529 7.34881 16.0032C7.22695 15.9534 7.11611 15.88 7.02265 15.7873L0.4114 9.16603C0.228138 8.97906 0.125488 8.72769 0.125488 8.46589C0.125488 8.20408 0.228138 7.95271 0.4114 7.76575L1.81167 6.36547C1.99863 6.18221 2.25 6.07956 2.5118 6.07956C2.7736 6.07956 3.02497 6.18221 3.21193 6.36547Z"
+        fill="#5996CE"
+      />
+    </svg>
+  );
+};
+
+export const ThumbsUp: React.FC<IconProps> = ({
+  size = 16,
+  fill = '#1E1E1E',
+}) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill={fill}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8.87941 3.01879C8.78269 2.95183 8.65012 2.97505 8.58192 3.07089L5.69741 7.12424C5.46947 7.44454 5.10064 7.63476 4.70752 7.63476H3.04846C2.92974 7.63476 2.8335 7.731 2.8335 7.84972V12.8027C2.8335 12.9214 2.92974 13.0176 3.04845 13.0176H5.05169C5.05392 13.0176 5.05615 13.0177 5.05838 13.0177H11.1319C11.2192 13.0177 11.2979 12.9648 11.3309 12.884L13.1509 8.42605C13.1614 8.40026 13.1668 8.37266 13.1668 8.3448V7.26093C13.1668 7.14221 13.0706 7.04597 12.9519 7.04597H10.2043C9.41963 7.04597 8.84076 6.31333 9.02225 5.54997L9.48486 3.60433C9.50534 3.51817 9.47089 3.42827 9.39808 3.37787L8.87941 3.01879ZM7.76716 2.49108C8.15266 1.94938 8.90197 1.81815 9.44862 2.1966L9.96729 2.55567C10.3788 2.84058 10.5735 3.34869 10.4577 3.83564L9.99513 5.78129C9.96302 5.91635 10.0654 6.04597 10.2043 6.04597H12.9519C13.6229 6.04597 14.1668 6.58993 14.1668 7.26093V8.3448C14.1668 8.50227 14.1362 8.65824 14.0767 8.80402L12.2567 13.2619C12.0701 13.719 11.6256 14.0177 11.1319 14.0177H5.05173C5.0495 14.0177 5.04727 14.0177 5.04504 14.0176H3.04845C2.37745 14.0176 1.8335 13.4737 1.8335 12.8027V7.84972C1.8335 7.17871 2.37745 6.63476 3.04846 6.63476H4.70752C4.77707 6.63476 4.84233 6.6011 4.88266 6.54443L7.76716 2.49108Z"
+        fill={fill}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.03223 13.5191V7.08203H5.03223V13.5191H4.03223Z"
+        fill={fill}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.03223 13.5191V7.08203H5.03223V13.5191H4.03223Z"
+        fill={fill}
+      />
+    </svg>
+  );
+};
+
+export const ClickThumbsUp: React.FC<IconProps> = ({
+  size = 16,
+  fill = '#1E1E1E',
+}) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8.62098 3.07089C8.68918 2.97505 8.82176 2.95183 8.91847 3.01879L9.43714 3.37787C9.50996 3.42827 9.5444 3.51817 9.52392 3.60433L9.06132 5.54997C8.87982 6.31333 9.45869 7.04597 10.2433 7.04597H12.9909C13.1097 7.04597 13.2059 7.14221 13.2059 7.26093V8.3448C13.2059 8.37266 13.2005 8.40026 13.1899 8.42605L11.37 12.884C11.337 12.9648 11.2583 13.0177 11.171 13.0177H5.09744L5.09075 13.0176H5.07129V14.0176H5.0841L5.09079 14.0177H11.171C11.6646 14.0177 12.1092 13.719 12.2958 13.2619L14.1158 8.80402C14.1753 8.65824 14.2059 8.50227 14.2059 8.3448V7.26093C14.2059 6.58993 13.6619 6.04597 12.9909 6.04597H10.2433C10.1045 6.04597 10.0021 5.91635 10.0342 5.78129L10.4968 3.83564C10.6126 3.34869 10.4179 2.84058 10.0064 2.55567L9.48768 2.1966C8.94103 1.81815 8.19172 1.94938 7.80623 2.49108L5.07129 6.33426V7.59058C5.33684 7.51691 5.57292 7.35406 5.73647 7.12424L8.62098 3.07089ZM4.07129 7.63476V6.63476H3.08752C2.41651 6.63476 1.87256 7.17871 1.87256 7.84972V12.8027C1.87256 13.4737 2.41651 14.0176 3.08752 14.0176H4.07129V13.0176H3.08752C2.9688 13.0176 2.87256 12.9214 2.87256 12.8027V7.84972C2.87256 7.731 2.9688 7.63476 3.08752 7.63476H4.07129Z"
+        fill={fill}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M5.07129 7.05673L5.07129 13.5176H5.09075L5.09077 13.5176L5.09079 13.5176H11.171C11.4615 13.5176 11.7231 13.3419 11.8329 13.0729L13.6529 8.61499C13.6879 8.5292 13.7059 8.43742 13.7059 8.34476V7.26089C13.7059 6.86603 13.3858 6.54593 12.9909 6.54593H10.2433C9.7816 6.54593 9.44095 6.1148 9.54776 5.66559L10.0104 3.71994C10.0785 3.43339 9.96392 3.13438 9.72175 2.96673L9.20308 2.60765C8.8814 2.38495 8.44045 2.46217 8.2136 2.78095L5.3291 6.8343C5.26136 6.92948 5.17248 7.00514 5.07129 7.05673ZM4.07129 13.5176L4.07129 7.13472H3.08752C2.69266 7.13472 2.37256 7.45481 2.37256 7.84967V12.8026C2.37256 13.1975 2.69266 13.5176 3.08752 13.5176H4.07129Z"
+        fill={fill}
+      />
+    </svg>
+  );
+};
+
+export const ThumbsDown: React.FC<IconProps> = ({
+  size = 16,
+  fill = '#1E1E1E',
+}) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.12059 12.9812C7.21731 13.0482 7.34988 13.0249 7.41808 12.9291L10.3026 8.87576C10.5305 8.55546 10.8994 8.36524 11.2925 8.36524H12.9515C13.0703 8.36524 13.1665 8.269 13.1665 8.15028V3.19732C13.1665 3.0786 13.0703 2.98236 12.9515 2.98236H10.9483C10.9461 2.98236 10.9438 2.98234 10.9416 2.98231H4.86811C4.78077 2.98231 4.70211 3.03516 4.6691 3.11602L2.84912 7.57395C2.83859 7.59974 2.83317 7.62734 2.83317 7.6552V8.73907C2.83317 8.85779 2.92941 8.95403 3.04813 8.95403H5.79574C6.58037 8.95403 7.15924 9.68667 6.97775 10.45L6.51514 12.3957C6.49466 12.4818 6.52911 12.5717 6.60192 12.6221L7.12059 12.9812ZM8.23284 13.5089C7.84734 14.0506 7.09803 14.1819 6.55138 13.8034L6.03271 13.4443C5.62118 13.1594 5.42649 12.6513 5.54227 12.1644L6.00487 10.2187C6.03698 10.0837 5.93456 9.95403 5.79574 9.95403H3.04813C2.37713 9.95403 1.83317 9.41007 1.83317 8.73907V7.6552C1.83317 7.49773 1.86378 7.34176 1.9233 7.19598L3.74328 2.73805C3.92987 2.28102 4.37445 1.98232 4.86811 1.98232H10.9483C10.9505 1.98232 10.9527 1.98233 10.955 1.98236H12.9515C13.6225 1.98236 14.1665 2.52631 14.1665 3.19732V8.15028C14.1665 8.82129 13.6225 9.36524 12.9515 9.36524H11.2925C11.2229 9.36524 11.1577 9.3989 11.1173 9.45557L8.23284 13.5089Z"
+        fill={fill}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M11.9678 2.48089V8.91797H10.9678V2.48089H11.9678Z"
+        fill={fill}
+      />
+    </svg>
+  );
+};
+
+export const ClickThumbsDown: React.FC<IconProps> = ({
+  size = 16,
+  fill = '#1E1E1E',
+}) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.45715 12.9291C7.38894 13.0249 7.25637 13.0482 7.15965 12.9812L6.64098 12.6221C6.56817 12.5717 6.53372 12.4818 6.55421 12.3957L7.01681 10.45C7.19831 9.68667 6.61943 8.95403 5.8348 8.95403H3.08719C2.96847 8.95403 2.87223 8.85779 2.87223 8.73907V7.6552C2.87223 7.62734 2.87765 7.59974 2.88818 7.57395L4.70816 3.11603C4.74117 3.03516 4.81983 2.98232 4.90717 2.98232H10.9807L10.9874 2.98236H11.0068V1.98236H10.994L10.9873 1.98232H4.90717C4.41351 1.98232 3.96893 2.28102 3.78234 2.73805L1.96236 7.19598C1.90284 7.34176 1.87223 7.49773 1.87223 7.6552V8.73907C1.87223 9.41007 2.41619 9.95403 3.08719 9.95403H5.8348C5.97362 9.95403 6.07604 10.0837 6.04393 10.2187L5.58133 12.1644C5.46555 12.6513 5.66025 13.1594 6.07177 13.4443L6.59044 13.8034C7.13709 14.1819 7.8864 14.0506 8.2719 13.5089L11.0068 9.66574V8.40942C10.7413 8.48309 10.5052 8.64594 10.3417 8.87576L7.45715 12.9291ZM12.0068 8.36524V9.36524H12.9906C13.6616 9.36524 14.2056 8.82129 14.2056 8.15028V3.19732C14.2056 2.52632 13.6616 1.98236 12.9906 1.98236H12.0068V2.98236H12.9906C13.1093 2.98236 13.2056 3.0786 13.2056 3.19732V8.15028C13.2056 8.269 13.1093 8.36524 12.9906 8.36524H12.0068Z"
+        fill={fill}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M11.0068 8.94327L11.0068 2.4824H10.9874L10.9874 2.48238L10.9873 2.48236H4.90717C4.61667 2.48236 4.35505 2.65813 4.24525 2.92708L2.42527 7.38501C2.39025 7.4708 2.37223 7.56258 2.37223 7.65524V8.73911C2.37223 9.13397 2.69233 9.45407 3.08719 9.45407H5.8348C6.29653 9.45407 6.63717 9.8852 6.53037 10.3344L6.06777 12.2801C5.99964 12.5666 6.11421 12.8656 6.35638 13.0333L6.87505 13.3923C7.19673 13.6151 7.63767 13.5378 7.86452 13.2191L10.749 9.1657C10.8168 9.07052 10.9056 8.99486 11.0068 8.94327ZM12.0068 2.4824L12.0068 8.86528H12.9906C13.3855 8.86528 13.7056 8.54519 13.7056 8.15033V3.19736C13.7056 2.8025 13.3855 2.4824 12.9906 2.4824H12.0068Z"
+        fill={fill}
+      />
+    </svg>
+  );
+};
+
+export const NewIcon: React.FC<IconProps> = ({
+  size = 11,
+  fill = '#1E1E1E',
+}) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size - 1}
+      viewBox="0 0 11 10"
+      fill={fill}>
+      <path
+        d="M1.5 5H9.5"
+        stroke="#29DDF6"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      />
+      <path
+        d="M5.5 1L5.5 9"
+        stroke="#29DDF6"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+};
+
 export const RedIcon: React.FC<IconProps> = ({ size = 20, className }) => {
   return (
     <svg
diff --git a/src/components/common/modal/Modal.tsx b/src/components/common/modal/Modal.tsx
index c8ec7ed8..bb558735 100644
--- a/src/components/common/modal/Modal.tsx
+++ b/src/components/common/modal/Modal.tsx
@@ -43,8 +43,8 @@ export const getModalStyles = (modalChildren: string) => {
         maxWidth: '412px',
         width: '100%',
         height: '186px',
-        borderTopLeftRadius: '2rem',
-        borderTopRightRadius: '2rem',
+        borderTopLeftRadius: '16px',
+        borderTopRightRadius: '16px',
       },
       overlay: {
         backgroundColor: 'rgba(0, 0, 0, 0.25)',
@@ -62,7 +62,7 @@ export const getModalStyles = (modalChildren: string) => {
         transform: 'translate(-50%, -50%)',
         width: '309px',
         height: '192px',
-        borderRadius: '2rem',
+        borderRadius: '16px',
       },
       overlay: {
         backgroundColor: 'rgba(0, 0, 0, 0.25)',
@@ -81,8 +81,8 @@ export const getModalStyles = (modalChildren: string) => {
         maxWidth: '412px',
         width: '100%',
         height: '280px',
-        borderTopLeftRadius: '2rem',
-        borderTopRightRadius: '2rem',
+        borderTopLeftRadius: '16px',
+        borderTopRightRadius: '16px',
       },
       overlay: {
         backgroundColor: 'rgba(0, 0, 0, 0.25)',
diff --git a/src/components/common/modal/children/MyAlert.tsx b/src/components/common/modal/children/MyAlert.tsx
index e5f50f7e..7e226d68 100644
--- a/src/components/common/modal/children/MyAlert.tsx
+++ b/src/components/common/modal/children/MyAlert.tsx
@@ -69,7 +69,7 @@ const MyAlert: React.FC<MyAlertProps> = ({ title, content }) => {
     <div className="flex h-full flex-col justify-between">
       <div className="mt-4 flex justify-center font-bold">{title}</div>
       <div className="mb-4 flex flex-col justify-center text-sm text-[#888888]">
-        {content.split('. ').map((sentence, index) => (
+        {content.split(/(?<=\.) /).map((sentence, index) => (
           <div key={index} className="flex justify-center">
             {sentence}
           </div>
diff --git a/src/components/common/tab/Tab.tsx b/src/components/common/tab/Tab.tsx
index 3ae8f972..f3a799c9 100644
--- a/src/components/common/tab/Tab.tsx
+++ b/src/components/common/tab/Tab.tsx
@@ -1,37 +1,61 @@
 import * as Tabs from '@radix-ui/react-tabs';
+import { useRecoilState } from 'recoil';
+import { tapState } from '@recoil/plan';
 
 interface TabProps {
   lists: string[];
   contents: React.ReactNode[];
 }
 
-const Tab = ({ lists, contents }: TabProps) => (
-  <Tabs.Root className="flex w-full flex-col" defaultValue="tab0">
-    <Tabs.List
-      className="border-b-1 no-scrollbar flex shrink-0 overflow-x-scroll"
-      aria-label="Manage your account">
-      {lists.map((list, index) => {
+const Tab = ({ lists, contents }: TabProps) => {
+  const [, setTapState] = useRecoilState(tapState);
+
+  const handleTabChange = (value: string) => {
+    const tabIndex = value.replace('tab', '');
+    setTapState(tabIndex);
+  };
+
+  let isDayTab = false;
+
+  lists.forEach((list) => {
+    if (list.includes('DAY')) {
+      isDayTab = true;
+    }
+  });
+
+  return (
+    <Tabs.Root
+      className="flex w-full flex-col"
+      defaultValue="tab0"
+      onValueChange={handleTabChange}>
+      <Tabs.List
+        className="border-b-1 no-scrollbar flex shrink-0 overflow-x-scroll"
+        aria-label="Manage your account">
+        {lists.map((list, index) => {
+          return (
+            <Tabs.Trigger
+              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`}
+              value={`tab${index}`}>
+              {list}
+            </Tabs.Trigger>
+          );
+        })}
+      </Tabs.List>
+      {contents.map((content, index) => {
         return (
-          <Tabs.Trigger
+          <Tabs.Content
             key={index}
-            className="headline1 flex flex-1 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"
+            className="grow outline-none"
             value={`tab${index}`}>
-            {list}
-          </Tabs.Trigger>
+            {content}
+          </Tabs.Content>
         );
       })}
-    </Tabs.List>
-    {contents.map((content, index) => {
-      return (
-        <Tabs.Content
-          key={index}
-          className="grow py-5 outline-none"
-          value={`tab${index}`}>
-          {content}
-        </Tabs.Content>
-      );
-    })}
-  </Tabs.Root>
-);
+    </Tabs.Root>
+  );
+};
 
 export default Tab;
diff --git a/src/hooks/useGetTripsAuthority.ts b/src/hooks/useGetTripsAuthority.ts
new file mode 100644
index 00000000..efef5695
--- /dev/null
+++ b/src/hooks/useGetTripsAuthority.ts
@@ -0,0 +1,39 @@
+import { useQuery } from '@tanstack/react-query';
+import { getTripsAuthority } from '@api/trips';
+
+import { useParams } from 'react-router-dom';
+
+type useGetTripsAuthorityReturn = {
+  tripAuthority: string | null;
+  memberId: number | null;
+  TripId: number | null;
+};
+
+export const useGetTripsAuthority = (): useGetTripsAuthorityReturn => {
+  const { id } = useParams();
+
+  const defaultReturn = {
+    tripAuthority: null,
+    memberId: null,
+    TripId: null,
+  };
+
+  if (!id) {
+    return defaultReturn;
+  }
+  const { data, isLoading, isError } = useQuery({
+    queryKey: ['getTripsAuthority', id],
+    queryFn: () => getTripsAuthority(id),
+    enabled: !!id,
+  });
+
+  const tripAuthority = data?.data.data.tripAuthority;
+  const memberId = data?.data.data.memberId;
+  const TripId = data?.data.data.TripId;
+
+  if (isLoading || isError) {
+    return defaultReturn;
+  }
+
+  return { tripAuthority, memberId, TripId };
+};
diff --git a/src/hooks/useSocket.ts b/src/hooks/useSocket.ts
index 50c9e2d6..6f07b0ca 100644
--- a/src/hooks/useSocket.ts
+++ b/src/hooks/useSocket.ts
@@ -63,6 +63,7 @@ export const useSocket = (tripId: string, visitDate: string) => {
 
       subMember(tripId, (res) => {
         if (res) {
+          // console.log('subMemberRes', res);
           setTripMember(res);
         }
       });
@@ -83,6 +84,7 @@ export const useSocket = (tripId: string, visitDate: string) => {
 
   useEffect(() => {
     socketConnect();
+    console.log('소켓연결');
 
     return () => {
       socketClient.deactivate();
diff --git a/src/pages/detail/detail.page.tsx b/src/pages/detail/detail.page.tsx
index bcccedb5..cee1949a 100644
--- a/src/pages/detail/detail.page.tsx
+++ b/src/pages/detail/detail.page.tsx
@@ -2,20 +2,15 @@ import { DetailHeader } from '@components/common/header';
 import DetailSectionTop from '@components/DetailSectionTop/DetailSectionTop';
 import DetailSectionBottom from '@components/DetailSectionBottom/DetailSectionBottom';
 import { DetailTopButton } from '@components/DetailSectionTop';
-import { useRef } from 'react';
 
 const DetailTours = () => {
-  const parentRef = useRef<HTMLDivElement>(null);
-
   return (
-    <div>
+    <>
       <DetailHeader />
       <DetailSectionTop />
-      <div className="relative" ref={parentRef}>
-        <DetailSectionBottom />
-        <DetailTopButton parentRef={parentRef} />
-      </div>
-    </div>
+      <DetailSectionBottom />
+      <DetailTopButton />
+    </>
   );
 };
 
diff --git a/src/pages/plan/OurLikedList.tsx b/src/pages/plan/OurLikedList.tsx
index 09e6fc3f..907790ac 100644
--- a/src/pages/plan/OurLikedList.tsx
+++ b/src/pages/plan/OurLikedList.tsx
@@ -19,15 +19,10 @@ export const OurLikedList = () => {
 
   const tripId = getTripIdFromUrl();
 
-  const { fetchNextPage, hasNextPage, data, isLoading, isError } =
+  const { fetchNextPage, hasNextPage, data, isLoading, error } =
     useInfiniteQuery({
-      queryKey: ['TripsLike'],
-      queryFn: ({ pageParam = 0 }) =>
-        getTripsLike({
-          tripId: tripId,
-          category: undefined,
-          page: pageParam,
-        }),
+      queryKey: ['ourTrips'],
+      queryFn: ({ pageParam = 0 }) => getTripsLike(tripId, pageParam, 10),
       initialPageParam: 0,
       getNextPageParam: (lastPage) => {
         if (
@@ -52,8 +47,8 @@ export const OurLikedList = () => {
   if (isLoading) {
     return <Spinner />;
   }
-  if (isError) {
-    console.log('error fetching search result ');
+  if (error) {
+    return <div>데이터를 불러오는 중 오류가 발생했습니다.</div>;
   }
 
   const results = data?.pages.flatMap((page) => page.data.content) || [];
diff --git a/src/pages/plan/addPlace/AddtoListBtn.tsx b/src/pages/plan/addPlace/AddtoListBtn.tsx
index 0bcc5aa5..4b3bcb08 100644
--- a/src/pages/plan/addPlace/AddtoListBtn.tsx
+++ b/src/pages/plan/addPlace/AddtoListBtn.tsx
@@ -3,6 +3,7 @@ import { selectedItemsState } from '@recoil/listItem';
 import { ButtonPrimary } from '@components/common/button/Button';
 import { postTripsLike, putTrips } from '@api/trips';
 import { getTripIdFromUrl } from '@utils/getTripIdFromUrl';
+import { useNavigate } from 'react-router-dom';
 
 const AddToListButton = ({
   apiType,
@@ -12,6 +13,8 @@ const AddToListButton = ({
   const selectedTourItemIds = useRecoilValue(selectedItemsState);
   const VISIT_DATE = '2024-02-01';
 
+  const navigate = useNavigate();
+
   const handleAddClick = async () => {
     const tripId = getTripIdFromUrl();
     if (tripId) {
@@ -19,6 +22,7 @@ const AddToListButton = ({
         let response;
         if (apiType === 'postTripsLike') {
           response = await postTripsLike(tripId, selectedTourItemIds);
+          navigate(`/trip/${tripId}`);
         } else if (apiType === 'putTrips' && selectedTourItemIds.length > 0) {
           response = await putTrips(tripId, selectedTourItemIds[0], VISIT_DATE);
         }
diff --git a/src/recoil/plan.ts b/src/recoil/plan.ts
index c938efaa..42e69971 100644
--- a/src/recoil/plan.ts
+++ b/src/recoil/plan.ts
@@ -9,3 +9,8 @@ export const dateState = atom<string[]>({
   key: 'dateState',
   default: [''],
 });
+
+export const tapState = atom<string>({
+  key: 'tapState',
+  default: '',
+});
diff --git a/src/recoil/review.ts b/src/recoil/review.ts
index 6bb84cc2..1c9753e1 100644
--- a/src/recoil/review.ts
+++ b/src/recoil/review.ts
@@ -88,3 +88,8 @@ export const inputFocusState = atom({
   key: 'inputFocusState',
   default: false,
 });
+
+export const reviewCountState = atom({
+  key: 'reviewCountState',
+  default: 0,
+});
diff --git a/src/recoil/socket.ts b/src/recoil/socket.ts
index d722c733..ab7bb76b 100644
--- a/src/recoil/socket.ts
+++ b/src/recoil/socket.ts
@@ -10,7 +10,7 @@ export const visitDateState = atom<{ visitDate: string } | null>({
   default: { visitDate: '2024-01-03' },
 });
 
-export const memberIdState = atom<{ memberId: number } | null>({
+export const memberIdState = atom<{ token: number | null }>({
   key: 'memberIdState',
-  default: { memberId: 1 },
+  default: { token: null },
 });
diff --git a/src/router/socketRouter.tsx b/src/router/socketRouter.tsx
index a48c16dc..e679617b 100644
--- a/src/router/socketRouter.tsx
+++ b/src/router/socketRouter.tsx
@@ -19,9 +19,9 @@ const SocketRoutes = () => {
   return (
     <socketContext.Provider value={useSocket(tripId, visitDate?.visitDate)}>
       <Routes>
-        <Route path="/plan" element={<PlanTrip />} />
-        <Route path="/plan/place" element={<PlanAddPlace />} />
-        <Route path="/plan/place/search" element={<PlanPlaceSearch />} />
+        <Route path="/" element={<PlanTrip />} />
+        <Route path="/place" element={<PlanAddPlace />} />
+        <Route path="/place/search" element={<PlanPlaceSearch />} />
       </Routes>
     </socketContext.Provider>
   );
@@ -33,7 +33,7 @@ const SocketRouter = () => {
       <Route path="/trip" element={<MainLayout />}>
         <Route path=":id" element={<Trip />} />
         <Route path=":id/add" element={<AddOurList />} />
-        <Route path=":id/*" element={<SocketRoutes />} />
+        <Route path=":id/plan/*" element={<SocketRoutes />} />
       </Route>
     </Routes>
   );