diff --git a/src/api/trips.ts b/src/api/trips.ts
index 3441cb6b..be019a7f 100644
--- a/src/api/trips.ts
+++ b/src/api/trips.ts
@@ -47,7 +47,13 @@ export const getTripsLike = async (
 
 // 우리의 관심 목록 등록
 export const postTripsLike = async (tripId: number, tourItemIds: number[]) => {
-  const res = await client.post(`trips/${tripId}/tripLikedTours`, tourItemIds);
+  const requestBody = {
+    tourItemIds: tourItemIds,
+  };
+  const res = await authClient.post(
+    `trips/${tripId}/tripLikedTours`,
+    requestBody,
+  );
   return res;
 };
 
@@ -68,3 +74,13 @@ export const getTripsSurvey = async (tripId: number) => {
   const res = await client.get(`trips/${tripId}/survey`);
   return res;
 };
+// 우리의 여행취향 참여/미참여 회원 조회
+export const getTripsSurveyMembers = async (tripId: number) => {
+  const res = await client.get(`trips/${tripId}/survey/members`);
+  return res;
+};
+// 여정을 공유하고 있는 회원 조회
+export const getTripsMembers = async (tripId: number) => {
+  const res = await client.get(`trips/${tripId}/members`);
+  return res;
+};
diff --git a/src/components/Trip/PlanTripButton.tsx b/src/components/Trip/PlanTripButton.tsx
index b218ef76..bd5ac6fc 100644
--- a/src/components/Trip/PlanTripButton.tsx
+++ b/src/components/Trip/PlanTripButton.tsx
@@ -2,12 +2,18 @@ import { PlanIcon, RightIcon } from '@components/common/icons/Icons';
 
 const PlanTripButton = () => {
   return (
-    <button className="body3 my-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">
-        <PlanIcon />
-        <span className="ml-[3px]">여행 계획하기</span>
+
+    <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">
+      <div className="flex items-center justify-start ">
+        <div>
+          <PlanIcon />
+        </div>
+        <p className="ml-1.5 text-gray5">여행 계획하기</p>
+      </div>
+      <div>
+        <RightIcon fill="#888888" />
+
       </div>
-      <RightIcon />
     </button>
   );
 };
diff --git a/src/components/Trip/TripInfo.tsx b/src/components/Trip/TripInfo.tsx
index 8e7a2a21..5594c89a 100644
--- a/src/components/Trip/TripInfo.tsx
+++ b/src/components/Trip/TripInfo.tsx
@@ -1,28 +1,128 @@
 import { UserIcon } from '@components/common/icons/Icons';
-import { socketContext } from '@hooks/useSocket';
-import { useContext } from 'react';
+import { useRecoilValue, useRecoilState } from 'recoil';
+import { isModalOpenState, modalChildrenState } from '@recoil/modal';
+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';
+
+const ShareList = () => {
+  const tripId = Number(useRecoilValue(tripIdState));
+  const { data: tripsMembers } = useQuery({
+    queryKey: ['tripsMembers', tripId],
+    queryFn: () => getTripsMembers(tripId),
+  });
+  const members = tripsMembers?.data?.data?.tripMemberSimpleInfos;
+
+  return (
+    <>
+      <hr className="my-3 border-solid border-gray2" />
+      <div>
+        {members.map((member: any, index: number) => {
+          return (
+            <div
+              className={`mb-2 flex cursor-pointer items-center text-gray5`}
+              key={index}>
+              {member.profileImageUrl &&
+              member.profileImageUrl !== 'http://asiduheimage.jpg' ? (
+                <img
+                  src={member.profileImageUrl}
+                  alt="유저 프로필"
+                  className="h-[32px] w-[32px] rounded-full"
+                />
+              ) : (
+                <NullUser className="h-[32px] w-[32px]" />
+              )}
+              <div className="ml-3">{member.nickname}</div>
+            </div>
+          );
+        })}
+      </div>
+    </>
+  );
+};
 
 const TripInfo = () => {
-  const { tripInfo } = useContext(socketContext);
-  const trip = tripInfo?.data;
+  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),
+  });
+  const members = tripsMembers?.data?.data?.tripMemberSimpleInfos;
+
+  const closeModal = () => {
+    setIsModalOpen(false);
+  };
+
+  const handleClickButton = () => {
+    setIsAccordion((prev) => !prev);
+  };
 
   return (
-    <div className="my-5">
-      <div className="flex items-center justify-between">
-        <div className="flex items-center">
-          <div className="title1 mb-[10px] mr-1">{trip?.tripName}</div>
-          <div className="flex items-center pb-[10px]">
-            <UserIcon size={20} fill="#888" color="#888" />
-            <span className="body4 pt-[1px] text-gray4">
-              {trip?.numberOfPeople}
-            </span>
+    <>
+      <div className="my-5">
+        <div className="flex items-center justify-between">
+          <div className="flex  space-x-[-17.5px]">
+            {members?.map((member: any, index: number) => (
+              <div key={index}>
+                {member.profileImageUrl &&
+                member.profileImageUrl !== 'http://asiduheimage.jpg' ? (
+                  <img
+                    src={member.profileImageUrl}
+                    alt="유저 프로필"
+                    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>
+            ))}
+          </div>
+
+          <div className="flex items-center gap-1">
+            <p className="body1 text-[13px] text-gray7">
+              {members?.length}명과 공유중
+            </p>
+            <div
+              style={{
+                transform: isAccordion ? 'rotate(180deg)' : 'rotate(0deg)',
+                transition: 'transform 0.3s ease',
+              }}
+              onClick={handleClickButton}
+              className="pt-0.5">
+              <DownIcon color="#888888" size={20} />
+            </div>
+          </div>
+        </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>
       </div>
-      <span className="body1 text-gray4">
-        {trip?.startDate} ~ {trip?.endDate}
-      </span>
-    </div>
+      <Modal isOpen={isModalOpen} closeModal={closeModal}>
+        {modalChildren === 'TripSurveyMember' && <TripSurveyMember />}
+      </Modal>
+    </>
   );
 };
 
diff --git a/src/components/Trip/TripParticipant.tsx b/src/components/Trip/TripParticipant.tsx
new file mode 100644
index 00000000..934aa95e
--- /dev/null
+++ b/src/components/Trip/TripParticipant.tsx
@@ -0,0 +1,51 @@
+import { ReactComponent as NullUser } from '@assets/images/NullUser.svg';
+import { useRecoilValue } from 'recoil';
+import { participantsState } from '@recoil/trip';
+
+interface ParticipantStatusProps {
+  status: string;
+}
+
+const ParticipantList: React.FC<{ infos: any[] }> = ({ infos }) => (
+  <div className="grid grid-cols-2 gap-3.5">
+    {infos.map((info: any) => (
+      <div
+        key={info.memberId}
+        className={`flex h-[40px] cursor-pointer items-center text-gray5`}>
+        {info.thumbnail && info.thumbnail !== 'http://asiduheimage.jpg' ? (
+          <img
+            src={info.thumbnail}
+            alt="유저 프로필"
+            className="h-[32px] w-[32px] rounded-full"
+          />
+        ) : (
+          <NullUser className="h-[32px] w-[32px]" />
+        )}
+        <div className="ml-3">{info.nickname}</div>
+      </div>
+    ))}
+  </div>
+);
+
+export const ParticipantStatus: React.FC<ParticipantStatusProps> = ({
+  status,
+}) => {
+  const participants = useRecoilValue(participantsState);
+
+  return (
+    <div className="flex flex-col">
+      <div className="mb-4 ml-auto mr-2 text-xs text-gray5">
+        {status == '참여' ? (
+          <>{participants?.tripSurveyMemberCount}명 참여</>
+        ) : (
+          <>{participants?.nonTripSurveySetMemberInfos?.length}명 미참여</>
+        )}
+      </div>
+      {status == '참여' ? (
+        <ParticipantList infos={participants?.tripSurveySetMemberInfos} />
+      ) : (
+        <ParticipantList infos={participants?.nonTripSurveySetMemberInfos} />
+      )}
+    </div>
+  );
+};
diff --git a/src/components/Trip/TripPreference.tsx b/src/components/Trip/TripPreference.tsx
index 0a59f8c7..02f71976 100644
--- a/src/components/Trip/TripPreference.tsx
+++ b/src/components/Trip/TripPreference.tsx
@@ -1,14 +1,16 @@
 import React, { useState, useEffect } from 'react';
 import { getTripsSurvey } from '@api/trips';
 import { useQuery } from '@tanstack/react-query';
-import { useParams } from 'react-router-dom';
-import { MoreIcon } from '@components/common/icons/Icons';
-import { RightIcon } from '@components/common/icons/Icons';
+import { MoreIcon, RightIcon, HeartIcon } from '@components/common/icons/Icons';
 import {
   calculatePercentage,
   calculatePercentageRemain,
 } 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 { participantsState } from '@recoil/trip';
 interface RatioBarParams {
   value: number;
   total: number;
@@ -26,7 +28,12 @@ interface PercentageParams {
 const TripPreferenceButton: React.FC = () => {
   return (
     <button className="mb-[17.5px] mt-[20px] flex w-[335px] items-center rounded-full bg-white px-6 py-4 text-sm">
-      <div className="text-gray6">내 여행 취향 설정하러 가기</div>
+      <div className="flex items-center text-gray6">
+        <div>
+          <HeartIcon fill="#888888" color="#888888" size={20} />
+        </div>
+        <p className="ml-1.5">내 여행 취향 설정하러 가기</p>
+      </div>
       <div className="ml-auto">
         <RightIcon fill="#5E5E5E" />
       </div>
@@ -87,13 +94,25 @@ const Percentage = ({ value, total, color }: PercentageParams) => (
 );
 
 const TripPreference: React.FC = () => {
-  const params = useParams();
-  const tripId = Number(params.id);
   const [A, setA] = useState<[number, number]>([0, 0]);
   const [B, setB] = useState<[number, number]>([0, 0]);
   const [C, setC] = useState<[number, number]>([0, 0]);
   const [D, setD] = useState<[number, number]>([0, 0]);
   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),
+  });
+
+  useEffect(() => {
+    const participants = tripsSurveyMembers?.data?.data;
+    setParticipants(participants);
+  }, [tripsSurveyMembers]);
 
   const { data: tripPreference, isLoading } = useQuery({
     queryKey: ['tripPreference', tripId],
@@ -129,11 +148,20 @@ const TripPreference: React.FC = () => {
     return <div>Loading...</div>;
   }
 
+  const handleButtonClick = () => {
+    setModalChildren('TripSurveyMember');
+    setIsModalOpen(true);
+  };
+
   return (
-    <div className=" mb-[-20px] ml-[-40px] mr-[-40px] mt-[-20px] flex flex-col items-center bg-gray1  ">
+    <div className=" m-[-20px] flex flex-col items-center bg-gray1 pb-[20px]  ">
       <TripPreferenceButton />
-      <div className="mb-[20px] ml-auto mr-[40px] flex items-center text-sm ">
-        <div>n명 참여</div>
+      <div
+        onClick={handleButtonClick}
+        className="mb-[20px] ml-auto mr-[40px] flex cursor-pointer items-center text-sm ">
+        <div className="text-gray6">
+          {participants?.tripSurveyMemberCount}명 참여
+        </div>
         <div className="mt-0.5">
           <MoreIcon size={20} color="none" fill="#888888" />
         </div>
diff --git a/src/components/common/accordion/Accordion.tsx b/src/components/common/accordion/Accordion.tsx
index 6bcf4b90..4175b9f7 100644
--- a/src/components/common/accordion/Accordion.tsx
+++ b/src/components/common/accordion/Accordion.tsx
@@ -12,8 +12,8 @@ const Accordion: React.FC<AccordionProps> = ({ title, content }) => {
       <accordion.Item value="item-1">
         <accordion.Header className="flex">
           {title}
-          <accordion.Trigger className="ml-auto">
-            <DownIcon size={17} className="rotate-on-open" />
+          <accordion.Trigger>
+            <DownIcon size={17} className="rotate-on-open ml-1" />
           </accordion.Trigger>
         </accordion.Header>
         <accordion.Content>{content}</accordion.Content>
diff --git a/src/components/common/button/ListSelectBtn.tsx b/src/components/common/button/ListSelectBtn.tsx
new file mode 100644
index 00000000..4328e6d2
--- /dev/null
+++ b/src/components/common/button/ListSelectBtn.tsx
@@ -0,0 +1,57 @@
+import { useState, ReactNode } from 'react';
+import { CheckIcon } from '../icons/Icons';
+
+interface ListSelectBtnProps {
+  children: ReactNode;
+  onClick?: () => void;
+}
+
+export const ListSelectBtn = ({ children, onClick }: ListSelectBtnProps) => {
+  const [isActive, setIsActive] = useState(false);
+
+  const handleClick = () => {
+    setIsActive(!isActive);
+    if (onClick) {
+      onClick();
+    }
+  };
+
+  return (
+    <button
+      onClick={handleClick}
+      className={`focus:shadow-outline-blue body3 shrink-0 rounded-[32px] px-[14px] py-[7px] text-center leading-normal transition-colors duration-100 focus:outline-none ${
+        isActive
+          ? 'border border-solid border-main2 bg-white text-main2'
+          : 'border border-solid border-gray1 bg-gray1 text-gray4'
+      }`}>
+      {children}
+    </button>
+  );
+};
+
+interface ListCheckBtnProps {
+  onClick?: () => void;
+}
+
+export const ListCheckBtn = ({ onClick }: ListCheckBtnProps) => {
+  const [isActive, setIsActive] = useState(false);
+
+  const handleClick = () => {
+    setIsActive(!isActive);
+    if (onClick) {
+      onClick();
+    }
+  };
+
+  return (
+    <div className="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 ${
+          isActive ? ' bg-black ' : 'bg-gray3 '
+        }`}>
+        <CheckIcon color="white" />
+      </button>
+    </div>
+  );
+};
diff --git a/src/components/common/modal/Modal.tsx b/src/components/common/modal/Modal.tsx
index 34060d49..c8ec7ed8 100644
--- a/src/components/common/modal/Modal.tsx
+++ b/src/components/common/modal/Modal.tsx
@@ -69,5 +69,25 @@ export const getModalStyles = (modalChildren: string) => {
         zIndex: 1, // 이거 해줘야 kakao-map도 dimmed됨
       },
     };
+  } else if (modalChildren === 'TripSurveyMember') {
+    return {
+      content: {
+        top: 'auto',
+        left: '50%',
+        right: 'auto',
+        bottom: '0',
+        marginRight: '-50%',
+        transform: 'translate(-50%, 0)',
+        maxWidth: '412px',
+        width: '100%',
+        height: '280px',
+        borderTopLeftRadius: '2rem',
+        borderTopRightRadius: '2rem',
+      },
+      overlay: {
+        backgroundColor: 'rgba(0, 0, 0, 0.25)',
+        zIndex: 1, // 이거 해줘야 kakao-map도 dimmed됨
+      },
+    };
   }
 };
diff --git a/src/components/common/modal/children/TripSurveyMember.tsx b/src/components/common/modal/children/TripSurveyMember.tsx
new file mode 100644
index 00000000..ee6551c6
--- /dev/null
+++ b/src/components/common/modal/children/TripSurveyMember.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { ParticipantStatus } from '@components/Trip/TripParticipant';
+import Tab from '@components/common/tab/Tab';
+
+const TripSurveyMember: React.FC = () => {
+  return (
+    <div className="mt-2">
+      <Tab
+        lists={['참여', '미참여']}
+        contents={[
+          <ParticipantStatus status="참여" />,
+          <ParticipantStatus status="미참여" />,
+        ]}
+      />
+    </div>
+  );
+};
+
+export default TripSurveyMember;
diff --git a/src/components/common/nav/InputComment.tsx b/src/components/common/nav/InputComment.tsx
index b186b9d4..3e3bb64d 100644
--- a/src/components/common/nav/InputComment.tsx
+++ b/src/components/common/nav/InputComment.tsx
@@ -106,8 +106,8 @@ export const InputComment: React.FC<InputCommentProps> = () => {
   };
 
   return (
-    <div className="fixed bottom-0 mt-auto flex flex h-[64px] w-full items-center justify-center border  border-solid border-[#EDEDED] bg-white ">
-      <div className="ml-4 mr-4 flex h-[40px] w-full items-center  rounded-md border border-solid border-[#EDEDED]">
+    <div className="fixed bottom-0 mt-auto flex flex h-[64px] w-[412px] items-center justify-center border  border-solid border-[#EDEDED] bg-white ">
+      <div className="ml-4 mr-4 flex h-[40px] w-[375px] items-center  rounded-md border border-solid border-[#EDEDED]">
         <div className="pl-1 pr-0.5 text-sm font-bold text-[#29ddf6]">ㅣ</div>
         <div className="flex  w-full ">
           <input
@@ -120,7 +120,7 @@ export const InputComment: React.FC<InputCommentProps> = () => {
             onKeyPress={handleKeyPress}
           />
         </div>
-        <div className="ml-auto mr-1 min-w-[2rem] ">
+        <div className="ml-auto mr-3 min-w-[2rem] ">
           <button
             onClick={handleSubmit}
             className=" text-sm font-bold text-[#29ddf6]">
diff --git a/src/pages/plan/OurLikedList.tsx b/src/pages/plan/OurLikedList.tsx
new file mode 100644
index 00000000..bb192296
--- /dev/null
+++ b/src/pages/plan/OurLikedList.tsx
@@ -0,0 +1,100 @@
+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
new file mode 100644
index 00000000..9e54f742
--- /dev/null
+++ b/src/pages/plan/addPlace/AddtoListBtn.tsx
@@ -0,0 +1,36 @@
+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/addPlace/MyLiked.tsx b/src/pages/plan/addPlace/MyLiked.tsx
new file mode 100644
index 00000000..5e65a8d3
--- /dev/null
+++ b/src/pages/plan/addPlace/MyLiked.tsx
@@ -0,0 +1,73 @@
+import { useInfiniteQuery } from '@tanstack/react-query';
+import { useState } from 'react';
+import { Spinner } from '@components/common/spinner/Spinner';
+import { getMemberTours } from '@api/member';
+import { MyLikedList } from './MyLikedList';
+import WishCategory from '@components/Wish/WishCategory';
+import AddToListButton from './AddtoListBtn';
+
+export const MyLiked = () => {
+  const [selectedContentTypeId, setSelectedContentTypeId] = useState<
+    null | number
+  >(null);
+
+  const handleCategoryClick = (contentTypeId: number | null) => {
+    setSelectedContentTypeId(contentTypeId);
+  };
+
+  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;
+      },
+    });
+
+  if (isLoading) {
+    return <Spinner />;
+  }
+  if (isError) {
+    console.log('error fetching search result ');
+  }
+
+  const searchResults = data?.pages.flatMap((page) => page.data.content) || [];
+  const noResults = searchResults && searchResults.length === 0;
+
+  return (
+    <>
+      <div className="title3 pt-3">나의 관심 목록 </div>
+      <WishCategory onCategoryClick={handleCategoryClick} />
+      {noResults ? (
+        <div className="my-10 text-center text-gray3">
+          나의 관심목록이 없습니다.
+        </div>
+      ) : (
+        <MyLikedList
+          toursData={data || { pages: [] }}
+          fetchNextPage={fetchNextPage}
+          hasNextPage={hasNextPage}
+          isLoading={isLoading}
+          selectedContentTypeId={selectedContentTypeId}
+        />
+      )}
+      <div className="sticky bottom-0 bg-white py-[20px]">
+        <AddToListButton />
+      </div>
+    </>
+  );
+};
diff --git a/src/pages/plan/addPlace/MyLikedList.tsx b/src/pages/plan/addPlace/MyLikedList.tsx
new file mode 100644
index 00000000..295328c6
--- /dev/null
+++ b/src/pages/plan/addPlace/MyLikedList.tsx
@@ -0,0 +1,62 @@
+import React from 'react';
+import InfiniteScroll from 'react-infinite-scroller';
+import { v4 as uuidv4 } from 'uuid';
+import { MyLikedListItem } from './MyLikedListItem';
+import { TourType } from '@/@types/tours.types';
+import { Spinner } from '@components/common/spinner/Spinner';
+
+interface WishListProps {
+  toursData: { pages: Array<{ data: { content: TourType[] } }> };
+  fetchNextPage: () => void;
+  hasNextPage: boolean;
+  isLoading: boolean;
+  selectedContentTypeId: number | null;
+}
+
+export const MyLikedList: 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="min-h-[70vh]">
+      <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: TourType) => (
+                  <MyLikedListItem key={uuidv4()} wishList={wishList} />
+                ))}
+              </React.Fragment>
+            ))}
+        </div>
+      </InfiniteScroll>
+    </div>
+  );
+};
diff --git a/src/pages/plan/addPlace/MyLikedListItem.tsx b/src/pages/plan/addPlace/MyLikedListItem.tsx
new file mode 100644
index 00000000..c1cdcfa7
--- /dev/null
+++ b/src/pages/plan/addPlace/MyLikedListItem.tsx
@@ -0,0 +1,57 @@
+import { TourType } 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';
+
+interface WishItemProps {
+  wishList: TourType;
+}
+
+export const MyLikedListItem: React.FC<WishItemProps> = ({ wishList }) => {
+  const {
+    id,
+    title,
+    ratingAverage,
+    reviewCount,
+    smallThumbnailUrl,
+    tourAddress,
+  } = wishList;
+
+  const [selectedItems, setSelectedItems] = useRecoilState(selectedItemsState);
+
+  const handleSelect = () => {
+    if (selectedItems.includes(id)) {
+      setSelectedItems(selectedItems.filter((item) => item !== id));
+    } else {
+      setSelectedItems([...selectedItems, id]);
+    }
+  };
+
+  return (
+    <div className="flex h-[48px] w-full items-center justify-center">
+      <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}({reviewCount})
+          </span>
+          <span className="address body4 mr-[6px] truncate text-gray4">
+            {tourAddress}
+          </span>
+        </div>
+      </div>
+      <ListCheckBtn onClick={handleSelect} />
+    </div>
+  );
+};
diff --git a/src/pages/plan/addPlace/PlanAddPlace.page.tsx b/src/pages/plan/addPlace/PlanAddPlace.page.tsx
new file mode 100644
index 00000000..98002a06
--- /dev/null
+++ b/src/pages/plan/addPlace/PlanAddPlace.page.tsx
@@ -0,0 +1,32 @@
+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';
+
+export const PlanAddPlace = () => {
+  const location = useLocation();
+
+  const queryParams = new URLSearchParams(location.search);
+  const searchWordFromQuery = queryParams.get('searchWord');
+
+  const [searchWord, setSearchWord] = useState('');
+
+  useEffect(() => {
+    if (searchWordFromQuery) {
+      setSearchWord(searchWordFromQuery);
+    } else {
+      setSearchWord('');
+    }
+  }, [location, searchWordFromQuery]);
+  return (
+    <>
+      <SearchInput />
+      {searchWord ? (
+        <SearchResultForPlan searchWord={searchWord} />
+      ) : (
+        <OurLikedList />
+      )}
+    </>
+  );
+};
diff --git a/src/pages/plan/addPlace/ResultCategoryPlan.tsx b/src/pages/plan/addPlace/ResultCategoryPlan.tsx
new file mode 100644
index 00000000..7e3f8706
--- /dev/null
+++ b/src/pages/plan/addPlace/ResultCategoryPlan.tsx
@@ -0,0 +1,47 @@
+import { ButtonWhite } from '@components/common/button/Button';
+import { TourType } from '@/@types/tours.types';
+import { InfiniteQueryObserverResult } from '@tanstack/react-query';
+import { ResultItemPlan } from './ResultItem';
+import AddToListButton from './AddtoListBtn';
+
+interface ResultCategoryProps {
+  data: TourType[];
+  category: string;
+  fetchNextPage: (() => Promise<InfiniteQueryObserverResult<any, any>>) | null;
+  hasNextPage: boolean;
+  isFetchingNextPage: boolean;
+}
+
+export const ResultCategoryPlan = ({
+  data,
+  fetchNextPage,
+  hasNextPage,
+  isFetchingNextPage,
+}: ResultCategoryProps) => {
+  return (
+    <>
+      <h2 className="headline2 my-2.5">ResultCategoryPlan</h2>
+      {data.map((item) => (
+        <ResultItemPlan key={item.id} result={item} />
+      ))}
+      {hasNextPage && !isFetchingNextPage ? (
+        <ButtonWhite
+          className="my-2"
+          onClick={() => fetchNextPage && fetchNextPage()}>
+          더보기
+        </ButtonWhite>
+      ) : isFetchingNextPage ? (
+        <ButtonWhite className="my-2" disabled>
+          Loading...
+        </ButtonWhite>
+      ) : (
+        <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>
+      </div>
+    </>
+  );
+};
diff --git a/src/pages/plan/addPlace/ResultItem.tsx b/src/pages/plan/addPlace/ResultItem.tsx
new file mode 100644
index 00000000..9ad70dde
--- /dev/null
+++ b/src/pages/plan/addPlace/ResultItem.tsx
@@ -0,0 +1,43 @@
+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 { useRecoilState } from 'recoil';
+
+export const ResultItemPlan = ({ result }: { result: TourType }) => {
+  const [selectedItems, setSelectedItems] = useRecoilState(selectedItemsState);
+  const id = result.id;
+  const handleSelect = () => {
+    if (selectedItems.includes(id)) {
+      setSelectedItems(selectedItems.filter((item) => item !== id));
+    } else {
+      setSelectedItems([...selectedItems, id]);
+    }
+  };
+  return (
+    <div className="mt-[14px] flex h-[52px] w-full py-1.5">
+      <div className="imgWrap mr-[16px] flex-shrink-0 overflow-hidden rounded-lg">
+        <img
+          className="size-[44px] object-cover"
+          src={result.smallThumbnailUrl}
+          alt={result.title}
+        />
+      </div>
+      <div className="textWrap flex flex-grow flex-col justify-between overflow-hidden py-0.5">
+        <div className="name body3 truncate">{result.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">
+            {result.ratingAverage}({result.reviewCount})
+          </span>
+          <span className="address body4 mr-[6px] truncate text-gray4">
+            {result.tourAddress}
+          </span>
+        </div>
+      </div>
+      <ListSelectBtn onClick={handleSelect}>선택</ListSelectBtn>
+    </div>
+  );
+};
diff --git a/src/pages/plan/addPlace/SearchResult.tsx b/src/pages/plan/addPlace/SearchResult.tsx
new file mode 100644
index 00000000..485f37e8
--- /dev/null
+++ b/src/pages/plan/addPlace/SearchResult.tsx
@@ -0,0 +1,94 @@
+import { getToursSearch } from '@api/tours';
+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 { ResultCategoryPlan } from './ResultCategoryPlan';
+
+interface SearchResultProps {
+  searchWord: string;
+}
+
+export const SearchResultForPlan = ({ searchWord }: 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,
+    hasNextPage,
+    isLoading,
+    isError,
+    isFetchingNextPage,
+  } = useInfiniteQuery({
+    queryKey: ['searchResults', searchWord, selectedCategory],
+    queryFn: ({ pageParam = 0 }) =>
+      getToursSearch({
+        region: '',
+        searchWord: searchWord,
+        category: selectedCategory !== '전체' ? selectedCategory : undefined,
+        page: pageParam,
+        size: 20,
+      }),
+    initialPageParam: 0,
+    getNextPageParam: (lastPage, allPages) => {
+      if (!lastPage.data.data.last) {
+        return allPages.length;
+      }
+      return undefined;
+    },
+    enabled: !!searchWord,
+    retry: 2,
+  });
+
+  if (isLoading) {
+    return <Spinner />;
+  }
+  if (isError) {
+    console.log('error fetching search result ');
+  }
+
+  const searchResults =
+    data?.pages.flatMap((page) => page.data.data.content) || [];
+  console.log('searchResults', searchResults);
+  const noResults = searchResults && searchResults.length === 0;
+
+  return (
+    <>
+      <div className="mb-[24px] mt-2 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>
+      ) : (
+        <ResultCategoryPlan
+          data={searchResults}
+          category={selectedCategory}
+          fetchNextPage={hasNextPage ? fetchNextPage : null}
+          hasNextPage={hasNextPage}
+          isFetchingNextPage={isFetchingNextPage}
+        />
+      )}
+    </>
+  );
+};
diff --git a/src/pages/plan/planPlaceTrip.page.tsx b/src/pages/plan/planPlaceTrip.page.tsx
deleted file mode 100644
index 4ff978c4..00000000
--- a/src/pages/plan/planPlaceTrip.page.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-const PlanPlaceTrip = () => {
-  return <div>여행계획 - 장소 추가 페이지</div>;
-};
-
-export default PlanPlaceTrip;
diff --git a/src/pages/trip/AddOurList.tsx b/src/pages/trip/AddOurList.tsx
new file mode 100644
index 00000000..80bce838
--- /dev/null
+++ b/src/pages/trip/AddOurList.tsx
@@ -0,0 +1,32 @@
+import SearchInput from '@components/search/SearchInput';
+import { MyLiked } from '@pages/plan/addPlace/MyLiked';
+import { SearchResultForPlan } from '@pages/plan/addPlace/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');
+
+  const [searchWord, setSearchWord] = useState('');
+
+  useEffect(() => {
+    if (searchWordFromQuery) {
+      setSearchWord(searchWordFromQuery);
+    } else {
+      setSearchWord('');
+    }
+  }, [location, searchWordFromQuery]);
+  return (
+    <div>
+      <SearchInput />
+      {searchWord ? (
+        <SearchResultForPlan searchWord={searchWord} />
+      ) : (
+        <MyLiked />
+      )}
+    </div>
+  );
+};
diff --git a/src/recoil/listItem.ts b/src/recoil/listItem.ts
new file mode 100644
index 00000000..72eb7456
--- /dev/null
+++ b/src/recoil/listItem.ts
@@ -0,0 +1,6 @@
+import { atom } from 'recoil';
+
+export const selectedItemsState = atom<number[]>({
+  key: 'selectedItemsState',
+  default: [],
+});
diff --git a/src/recoil/trip.ts b/src/recoil/trip.ts
new file mode 100644
index 00000000..9df993e0
--- /dev/null
+++ b/src/recoil/trip.ts
@@ -0,0 +1,22 @@
+import { atom } from 'recoil';
+
+type Participant = {
+  memberId: number;
+  nickname: string;
+  thumbnail: string;
+};
+
+export type Participants = {
+  tripSurveyMemberCount: number;
+  tripSurveySetMemberInfos: Participant[];
+  nonTripSurveySetMemberInfos: Participant[];
+};
+
+export const participantsState = atom<Participants>({
+  key: 'participantsState',
+  default: {
+    tripSurveyMemberCount: 0,
+    tripSurveySetMemberInfos: [],
+    nonTripSurveySetMemberInfos: [],
+  },
+});
diff --git a/src/router/socketRouter.tsx b/src/router/socketRouter.tsx
index 4503f830..a48c16dc 100644
--- a/src/router/socketRouter.tsx
+++ b/src/router/socketRouter.tsx
@@ -1,12 +1,13 @@
 import { Route, Routes } from 'react-router-dom';
 import { useSocket, socketContext } from '@hooks/useSocket';
 import PlanTrip from '@pages/plan/planTrip.page';
-import PlanPlaceTrip from '@pages/plan/planPlaceTrip.page';
+import { PlanAddPlace } from '@pages/plan/addPlace/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';
 
 const SocketRoutes = () => {
   const tripId = useRecoilValue(tripIdState);
@@ -19,7 +20,7 @@ const SocketRoutes = () => {
     <socketContext.Provider value={useSocket(tripId, visitDate?.visitDate)}>
       <Routes>
         <Route path="/plan" element={<PlanTrip />} />
-        <Route path="/plan/place" element={<PlanPlaceTrip />} />
+        <Route path="/plan/place" element={<PlanAddPlace />} />
         <Route path="/plan/place/search" element={<PlanPlaceSearch />} />
       </Routes>
     </socketContext.Provider>
@@ -31,6 +32,7 @@ const SocketRouter = () => {
     <Routes>
       <Route path="/trip" element={<MainLayout />}>
         <Route path=":id" element={<Trip />} />
+        <Route path=":id/add" element={<AddOurList />} />
         <Route path=":id/*" element={<SocketRoutes />} />
       </Route>
     </Routes>
diff --git a/tailwind.config.js b/tailwind.config.js
index 0ec3313f..1853d03c 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -23,4 +23,9 @@ export default {
     },
   },
   plugins: [require('tailwind-scrollbar-hide')],
+  safelist: [
+    {
+      pattern: /(bg|text|border|sub2|orange|purple|green)-/,
+    },
+  ],
 };