diff --git a/package.json b/package.json
index c962cb80..b572eba0 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
     "path": "^0.12.7",
     "react": "^18.2.0",
     "react-beautiful-dnd": "^13.1.1",
+    "react-device-detect": "^2.2.3",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.49.2",
     "react-icons": "^5.0.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index abcef86b..95225e8f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -74,6 +74,9 @@ dependencies:
   react-beautiful-dnd:
     specifier: ^13.1.1
     version: 13.1.1(react-dom@18.2.0)(react@18.2.0)
+  react-device-detect:
+    specifier: ^2.2.3
+    version: 2.2.3(react-dom@18.2.0)(react@18.2.0)
   react-dom:
     specifier: ^18.2.0
     version: 18.2.0(react@18.2.0)
@@ -5139,6 +5142,17 @@ packages:
       - react-native
     dev: false
 
+  /react-device-detect@2.2.3(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-buYY3qrCnQVlIFHrC5UcUoAj7iANs/+srdkwsnNjI7anr3Tt7UY6MqNxtMLlr0tMBied0O49UZVK8XKs3ZIiPw==}
+    peerDependencies:
+      react: '>= 0.14.0'
+      react-dom: '>= 0.14.0'
+    dependencies:
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      ua-parser-js: 1.0.37
+    dev: false
+
   /react-dom@18.2.0(react@18.2.0):
     resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==}
     peerDependencies:
@@ -5900,6 +5914,10 @@ packages:
     engines: {node: '>=14.17'}
     hasBin: true
 
+  /ua-parser-js@1.0.37:
+    resolution: {integrity: sha512-bhTyI94tZofjo+Dn8SN6Zv8nBDvyXTymAdM3LDI/0IboIUwTu1rEhW7v2TfiVsoYWgkQ4kOVqnI8APUFbIQIFQ==}
+    dev: false
+
   /undici-types@5.26.5:
     resolution: {integrity: sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==}
     dev: false
diff --git a/src/api/socket.ts b/src/api/socket.ts
index 2f22446e..978ae336 100644
--- a/src/api/socket.ts
+++ b/src/api/socket.ts
@@ -125,6 +125,7 @@ export const pubUpdateTransportation = (
     destination: `/pub/trips/${tripId}/updateTransportation`,
     body: JSON.stringify(pubUpdateTransportation),
   });
+  console.log('펍실행');
 };
 
 // 여행 아이템 방문 날짜 변경 이벤트 발생시
diff --git a/src/components/Auth/AuthInput/AuthInputBox/AuthInputItem/AuthInput.tsx b/src/components/Auth/AuthInput/AuthInputBox/AuthInputItem/AuthInput.tsx
index 6a6ea0f9..94943892 100644
--- a/src/components/Auth/AuthInput/AuthInputBox/AuthInputItem/AuthInput.tsx
+++ b/src/components/Auth/AuthInput/AuthInputBox/AuthInputItem/AuthInput.tsx
@@ -33,7 +33,7 @@ const AuthInput = ({
   return (
     <div className="flex flex-col gap-2">
       <div>
-        <label htmlFor={id} className="body3 text-main1">
+        <label htmlFor={id} className="body2 text-main1">
           {label}
         </label>
         <span className="body5 text-main1">{subLabel}</span>
diff --git a/src/components/Auth/AuthSurvey/AuthSurvey.tsx b/src/components/Auth/AuthSurvey/AuthSurvey.tsx
index a4d02834..9f5f446b 100644
--- a/src/components/Auth/AuthSurvey/AuthSurvey.tsx
+++ b/src/components/Auth/AuthSurvey/AuthSurvey.tsx
@@ -1,25 +1,16 @@
-import SubmitBtn from '@components/common/button/SubmitBtn';
 import AuthSurveyOption from './AuthSurveyOption';
-import { SubmitHandler, useForm } from 'react-hook-form';
-import { putMemberSurvey } from '@api/member';
-import { useNavigate } from 'react-router-dom';
 import { surveyArr } from '@utils/survey.constants';
 import { useEffect } from 'react';
 import { UserInfoState } from '@recoil/Auth.atom';
 import { useRecoilState } from 'recoil';
+import { UseFormRegister, UseFormSetValue } from 'react-hook-form';
 
 interface Props {
-  path?: string;
+  register: UseFormRegister<Survey>;
+  setValue: UseFormSetValue<Survey>;
 }
 
-const AuthSurvey = ({ path }: Props) => {
-  const {
-    register,
-    handleSubmit,
-    setValue,
-    formState: { isDirty, isValid },
-  } = useForm<Survey>();
-  const navigate = useNavigate();
+const AuthSurvey = ({ register, setValue }: Props) => {
   const [userInfo, _] = useRecoilState(UserInfoState);
   useEffect(() => {
     if (userInfo?.survey) {
@@ -33,29 +24,8 @@ const AuthSurvey = ({ path }: Props) => {
     }
   }, [userInfo]);
 
-  const onSaveSubmit: SubmitHandler<Survey> = async (data) => {
-    try {
-      const res = await putMemberSurvey({ survey: data });
-      if (res.data.status === 200) {
-        // setUserInfo((prevUserInfo) => {
-        //   const newPrevUserInfo = prevUserInfo!;
-        //   newPrevUserInfo.survey = data;
-        //   return newPrevUserInfo;
-        // });
-        if (path) {
-          navigate(path);
-        } else {
-          navigate(-1);
-        }
-      }
-    } catch (err) {
-      console.error(err);
-      alert('오류가 발생했습니다. 다시 시도해주세요');
-    }
-  };
-
   return (
-    <form className="mb-8" onSubmit={handleSubmit(onSaveSubmit)}>
+    <form className="mb-8">
       <div className="overflow-auto">
         {surveyArr.map((section) => (
           <fieldset key={section.id} className="mb-8 flex flex-col gap-4">
@@ -75,7 +45,6 @@ const AuthSurvey = ({ path }: Props) => {
           </fieldset>
         ))}
       </div>
-      <SubmitBtn isActive={isDirty && isValid}>완료</SubmitBtn>
     </form>
   );
 };
diff --git a/src/components/Auth/SignupInfo/AuthDropDown/AuthDropDown.tsx b/src/components/Auth/SignupInfo/AuthDropDown/AuthDropDown.tsx
index 1c57aed0..9afe5126 100644
--- a/src/components/Auth/SignupInfo/AuthDropDown/AuthDropDown.tsx
+++ b/src/components/Auth/SignupInfo/AuthDropDown/AuthDropDown.tsx
@@ -1,82 +1,48 @@
 import AuthDropDownOption from './AuthDropDownOption';
-import { UseFormRegister } from 'react-hook-form';
+import { UseFormSetValue } from 'react-hook-form';
+import * as Select from '@radix-ui/react-select';
+import { AuthDropDownIcon } from '@components/common/icons/Icons';
 
 interface Props {
   label: string;
   options: SelectOption[];
   name: string;
-  register: UseFormRegister<any>;
+  setValue: UseFormSetValue<any>;
+  value?: string;
 }
 
-const AuthDropDown = ({ label, options, name, register }: Props) => {
+const AuthDropDown = ({ label, options, name, setValue, value }: Props) => {
   return (
-    <div className="z-10 flex flex-col">
+    <div>
       <h2 className="body2 mb-2 text-main1">{label}</h2>
-      <select
-        {...register(name)}
-        className="h-12 w-full rounded-lg border border-solid border-gray3 px-2.5 py-2">
-        {options.map((option) => (
-          <AuthDropDownOption option={option} />
-        ))}
-      </select>
-    </div>
+      <Select.Root
+        value={value}
+        onValueChange={(e) => {
+          setValue(name, e);
+        }}>
+        <Select.Trigger className="data-[placeholder]:body5 relative flex h-12 w-full items-center justify-center rounded-lg border border-solid border-gray3 bg-white hover:bg-gray1 data-[state=open]:rounded-b-none data-[placeholder]:text-gray4">
+          <Select.Value placeholder={`${label}을 선택해주세요`} />
+          <Select.Icon className="absolute right-2.5">
+            <AuthDropDownIcon />
+          </Select.Icon>
+        </Select.Trigger>
 
-    // <div className="z-10 flex flex-col">
-    //   <h2 className="body2 mb-2 text-main1">{label}</h2>
-    //   <div
-    //     onClick={() => setIsShow(!isShow)}
-    //     className={`${
-    //       isShow ? 'h-48' : 'h-12'
-    //     } relative w-full overflow-hidden rounded-lg border border-solid border-gray3`}>
-    //     <AuthDropDownOption
-    //       clickHandler={() => {
-    //         setIsShow(!isShow);
-    //       }}
-    //       showDownIcon>
-    //       {isSelected}
-    //     </AuthDropDownOption>
-    //     {isShow && (
-    //       <ul className="absolute top-12 z-20 h-36 w-full overflow-auto rounded-b-lg bg-white">
-    //         {options.map((option) => (
-    //           <li className="h-12 ">
-    //             <AuthDropDownOption
-    //               clickHandler={() => {
-    //                 setIsSelected(option.value);
-    //                 setIsShow(!isShow);
-    //               }}>
-    //               {option.value}
-    //             </AuthDropDownOption>
-    //           </li>
-    //         ))}
-    //       </ul>
-    //     )}
-    //   </div>
-    // </div>
-    // <div className="w-full">
-    //   <Select.Root onValueChange={onSelectClick} {...register(name)}>
-    //     <h2 className="body2 mb-2 text-main1">{label}</h2>
-    //     <Select.Trigger className="data-[placeholder]:body5 relative flex h-12 w-full items-center justify-center rounded-lg border border-solid border-gray3 bg-white hover:bg-gray1 data-[state=open]:rounded-b-none data-[placeholder]:text-gray4">
-    //       <Select.Value className="body5 text-gray6" placeholder={text} />
-    //       <Select.Icon className="absolute right-[10px] top-4">
-    //         <DownIcon size={20} color="#888888" />
-    //       </Select.Icon>
-    //     </Select.Trigger>
-    //     <Select.Portal>
-    //       <Select.Content
-    //         position={'popper'}
-    //         collisionPadding={0}
-    //         className="h-36 overflow-hidden rounded-b-lg border-x border-b border-solid border-gray3 bg-white">
-    //         <Select.Viewport>
-    //           {options.map((option) => (
-    //             <AuthDropDownOption key={option.id} value={option.id}>
-    //               {option.value}
-    //             </AuthDropDownOption>
-    //           ))}
-    //         </Select.Viewport>
-    //       </Select.Content>
-    //     </Select.Portal>
-    //   </Select.Root>
-    // </div>
+        <Select.Portal>
+          <Select.Content
+            position={'popper'}
+            collisionPadding={0}
+            className="h-36 w-[var(--radix-select-trigger-width)] overflow-hidden rounded-b-lg border-x border-b border-solid border-gray3 bg-white">
+            <Select.Viewport>
+              {options.map((option) => (
+                <AuthDropDownOption key={option.id} id={option.id}>
+                  {option.value}
+                </AuthDropDownOption>
+              ))}
+            </Select.Viewport>
+          </Select.Content>
+        </Select.Portal>
+      </Select.Root>
+    </div>
   );
 };
 
diff --git a/src/components/Auth/SignupInfo/AuthDropDown/AuthDropDownOption.tsx b/src/components/Auth/SignupInfo/AuthDropDown/AuthDropDownOption.tsx
index 077cad1e..ea47b954 100644
--- a/src/components/Auth/SignupInfo/AuthDropDown/AuthDropDownOption.tsx
+++ b/src/components/Auth/SignupInfo/AuthDropDown/AuthDropDownOption.tsx
@@ -1,76 +1,18 @@
-// interface Props {
-// children: string;
-// clickHandler?: VoidFunction;
-// showDownIcon?: boolean;
-// }
-
-// const AuthDropDownOption = ({
-//   children,
-//   clickHandler,
-//   showDownIcon = false,
-// }: Props) => {
-//   return (
-// <button
-//   onClick={clickHandler}
-//   className="relative h-12 w-full border-b border-solid border-gray3 hover:bg-gray1">
-//   {children}
-//   {showDownIcon && (
-//     <div className="absolute right-2 top-4">
-//       <DownIcon size={20} color="#888888" />
-//     </div>
-//   )}
-// </button>
-//   );
-// };
-
-// export default AuthDropDownOption;
-
-// const AuthDropDownOption = ({ children }: Props) => {
-//   return (
-//     <Select.Item>
-//       <Select.ItemText>{children}</Select.ItemText>
-//       <Select.ItemIndicator className="absolute left-0 inline-flex w-[25px] items-center justify-center">
-//         {/* <CheckIcon /> */}
-//       </Select.ItemIndicator>
-//     </Select.Item>
-//   );
-// };
-
-// export default AuthDropDownOption;
-
-// interface SelectItemProps {
-//   value: string;
-//   children: ReactNode;
-//   className?: string;
-//   disabled?: boolean;
-// }
-
-// const AuthDropDownOption = React.forwardRef(
-//   (
-//     { children, className, ...props }: SelectItemProps,
-//     forwardedRef: Ref<HTMLDivElement>,
-//   ) => {
-//     return (
-//       <Select.Item
-//         className="body5 relative flex h-12 w-full select-none items-center border-b border-solid border-gray3 pl-[25px] pr-[35px] text-gray6 hover:bg-gray1"
-//         {...props}
-//         ref={forwardedRef}>
-//         <Select.ItemText>{children}</Select.ItemText>
-//         <Select.ItemIndicator className="absolute left-0 inline-flex w-[25px] items-center justify-center">
-//           <CheckIcon />
-//         </Select.ItemIndicator>
-//       </Select.Item>
-//     );
-//   },
-// );
-
-// export default AuthDropDownOption;
+import * as Select from '@radix-ui/react-select';
 
 interface Props {
-  option: SelectOption;
+  id: string;
+  children: string;
 }
 
-const AuthDropDownOption = ({ option }: Props) => {
-  return <option value={option.id}>{option.value}</option>;
+const AuthDropDownOption = ({ id, children }: Props) => {
+  return (
+    <Select.Item
+      value={id}
+      className="flex h-12 items-center justify-center border-b border-solid border-gray3">
+      <Select.ItemText className="body5 text-gray6">{children}</Select.ItemText>
+    </Select.Item>
+  );
 };
+
 export default AuthDropDownOption;
diff --git a/src/components/Auth/SignupInfo/SignupInfoForm.tsx b/src/components/Auth/SignupInfo/SignupInfoForm.tsx
index 5fe4e480..970546e9 100644
--- a/src/components/Auth/SignupInfo/SignupInfoForm.tsx
+++ b/src/components/Auth/SignupInfo/SignupInfoForm.tsx
@@ -78,13 +78,15 @@ const SignupInfoForm = () => {
             label="성별"
             options={genderArr}
             name={'genderType'}
-            register={register}
+            setValue={setValue}
+            value={watch('genderType')}
           />
           <AuthDropDown
             label="연령대"
             options={ageArr}
             name={'ageType'}
-            register={register}
+            setValue={setValue}
+            value={watch('ageType')}
           />
         </div>
       </div>
diff --git a/src/components/DetailSectionBottom/ReviewItem.tsx b/src/components/DetailSectionBottom/ReviewItem.tsx
index c11e040e..2ff1c349 100644
--- a/src/components/DetailSectionBottom/ReviewItem.tsx
+++ b/src/components/DetailSectionBottom/ReviewItem.tsx
@@ -151,51 +151,41 @@ const Item: React.FC<ReviewInfoItemProps> = (props: ReviewInfoItemProps) => {
       <div className="flex items-center ">
         <div className="flex gap-2">
           {!showMoreKeywords &&
-            keywords.slice(0, 2).map((keyword, idx) => (
+            keywords.slice(0, 1).map((keyword, idx) => (
               <div
                 key={idx}
                 className="rounded-md bg-gray1 px-2 py-1 text-xs text-gray6">
                 {getEmoji(keyword.content)} {keyword.content}
               </div>
             ))}
-          {keywords.length > 2 && !showMoreKeywords && (
+          {keywords.length > 1 && !showMoreKeywords && (
             <div
               className="rounded-md bg-gray1 px-2 py-1 text-xs text-gray6"
               onClick={(e) => {
                 handleClickPlusButton(e);
               }}>
-              +{keywords.length - 2}
+              +{keywords.length - 1}
             </div>
           )}
         </div>
+
         <div>
-          {showMoreKeywords &&
-            Array.from({ length: Math.ceil(keywords.length / 2) }).map(
-              (_, lineIdx) => (
+          {showMoreKeywords && (
+            <div className="flex flex-wrap gap-2">
+              {keywords.map((keyword, idx) => (
                 <div
-                  key={lineIdx}
-                  className={`flex gap-2 ${
-                    lineIdx === Math.ceil(keywords.length / 2) - 1
-                      ? ''
-                      : ' mb-3'
-                  }`}>
-                  {keywords
-                    .slice(lineIdx * 2, lineIdx * 2 + 2)
-                    .map((keyword, idx) => (
-                      <div
-                        key={idx}
-                        className="rounded-md bg-gray1 px-2 py-1 text-xs text-gray6">
-                        {getEmoji(keyword.content)} {keyword.content}
-                      </div>
-                    ))}
+                  key={idx}
+                  className="rounded-md bg-gray1 px-2 py-1 text-xs text-gray6">
+                  {getEmoji(keyword.content)} {keyword.content}
                 </div>
-              ),
-            )}
+              ))}
+            </div>
+          )}
         </div>
 
-        <div className="ml-auto mr-2 flex ">
+        <div className="ml-auto mr-2 flex flex items-center ">
           <ChatIcon size={20} color="#5E5E5E" />
-          <div className="ml-1 text-gray5">{commentCount}</div>
+          <div className="ml-1.5 text-gray5">{commentCount}</div>
         </div>
       </div>
     </div>
diff --git a/src/components/DetailSectionTop/DetailAddSchedule.tsx b/src/components/DetailSectionTop/DetailAddSchedule.tsx
index 0b39bba6..e976a48c 100644
--- a/src/components/DetailSectionTop/DetailAddSchedule.tsx
+++ b/src/components/DetailSectionTop/DetailAddSchedule.tsx
@@ -265,9 +265,9 @@ const DetailAddSchedule = () => {
           title={'로그인'}
           message={
             <>
-              새로운 여행 생성 시 로그인이 필요합니다.
+              여정에 추가하려면 로그인이 필요해요.
               <br />
-              로그인 하시겠습니까?
+              로그인하러 가볼까요?
             </>
           }
           onConfirm={() => handleNavigate('/login')}>
diff --git a/src/components/MyTrip/MyTrip.tsx b/src/components/MyTrip/MyTrip.tsx
index c80f12fc..1062e245 100644
--- a/src/components/MyTrip/MyTrip.tsx
+++ b/src/components/MyTrip/MyTrip.tsx
@@ -30,9 +30,9 @@ const MyTrip = () => {
   const { ingTrips, beforeTrips, afterTrips } = classifyTrips(data);
 
   return (
-    <div className="mt-3 min-h-[100vh]">
-      <div className="pb-[15px]">
-        <h1 className="text-[24px] font-bold text-gray7">나의 여정</h1>
+    <div className="mt-[5px] min-h-[100vh]">
+      <div className="py-[8px]">
+        <h1 className="text-[20px] font-bold text-gray7">나의 여정</h1>
       </div>
       {data.length > 0 ? (
         <>
diff --git a/src/components/MyTrip/MyTripAfterList.tsx b/src/components/MyTrip/MyTripAfterList.tsx
index c5d65cb4..c7ddd74c 100644
--- a/src/components/MyTrip/MyTripAfterList.tsx
+++ b/src/components/MyTrip/MyTripAfterList.tsx
@@ -19,16 +19,16 @@ const MyTripAfterList: React.FC<MyTripIngListProps> = ({ myTripsData }) => {
 
   if (sortedTrips.length > 0) {
     return (
-      <>
-        <div className="mb-[10px] mt-[30px]">
+      <div className="mt-[48px]">
+        <div className="mb-[16px]">
           <h1 className="text-[18px] font-bold text-gray7">지난 여행</h1>
         </div>
-        <div className="no-scrollbar grid grid-cols-1 gap-[5px] overflow-y-scroll">
+        <div className="no-scrollbar grid grid-cols-1 gap-[24px] overflow-y-scroll">
           {sortedTrips.map((myTripList: MyTripType) => (
             <MyTripItem key={uuidv4()} myTripList={myTripList} />
           ))}
         </div>
-      </>
+      </div>
     );
   } else {
     return null;
diff --git a/src/components/MyTrip/MyTripBeforeList.tsx b/src/components/MyTrip/MyTripBeforeList.tsx
index 88dc770f..c6792597 100644
--- a/src/components/MyTrip/MyTripBeforeList.tsx
+++ b/src/components/MyTrip/MyTripBeforeList.tsx
@@ -12,18 +12,22 @@ const MyTripBeforeList: React.FC<MyTripIngListProps> = ({ myTripsData }) => {
     return <div>데이터를 불러오는 중 오류가 발생했습니다.</div>;
   }
 
-  return (
-    <>
-      <div className="mb-[10px] mt-[30px]">
-        <h1 className="text-[18px] font-bold text-gray7">다가오는 여행</h1>
+  if (myTripsData.length > 0) {
+    return (
+      <div className="mt-[40px]">
+        <div className="mb-[16px]">
+          <h1 className="text-[18px] font-bold text-gray7">다가오는 여행</h1>
+        </div>
+        <div className="no-scrollbar grid grid-cols-1 gap-[24px] overflow-y-scroll">
+          {myTripsData.map((myTripList: MyTripType) => (
+            <MyTripItem key={uuidv4()} myTripList={myTripList} />
+          ))}
+        </div>
       </div>
-      <div className="no-scrollbar grid grid-cols-1 gap-[5px] overflow-y-scroll">
-        {myTripsData.map((myTripList: MyTripType) => (
-          <MyTripItem key={uuidv4()} myTripList={myTripList} />
-        ))}
-      </div>
-    </>
-  );
+    );
+  } else {
+    return null;
+  }
 };
 
 export default MyTripBeforeList;
diff --git a/src/components/MyTrip/MyTripIngItem.tsx b/src/components/MyTrip/MyTripIngItem.tsx
index e054b93f..328a80d0 100644
--- a/src/components/MyTrip/MyTripIngItem.tsx
+++ b/src/components/MyTrip/MyTripIngItem.tsx
@@ -16,7 +16,7 @@ const MyTripIngItem: React.FC<MyTripItemProps> = ({ myTripList }) => {
     <div
       className="relative flex h-16 w-full cursor-pointer items-center rounded-2xl border border-solid border-cyan-400 bg-cyan-400 px-3"
       onClick={() => navigate(`/trip/${tripId}`)}>
-      <div className="flex">
+      <div className="flex items-center">
         <div>
           <img
             className="h-10 min-h-10 w-10 rounded-3xl  object-cover"
@@ -24,18 +24,18 @@ const MyTripIngItem: React.FC<MyTripItemProps> = ({ myTripList }) => {
             alt="여행지 이미지"
           />
         </div>
-        <div className="absolute right-3 top-[20px] inline-flex h-[22px] w-[54px] items-center justify-center gap-[8px] rounded-2xl border border-solid border-cyan-400 bg-white px-[8px] py-[10px] pt-[13px]">
+        <div className="absolute right-3 top-[20px] inline-flex h-[24px] w-[54px] items-center justify-center gap-[8px] rounded-2xl border border-solid border-cyan-400 bg-white px-[8px] py-[10px] pt-[10px]">
           <span className="text-xs font-semibold text-cyan-400">
             {tripStatus}
           </span>
         </div>
         <div className="ml-[15px] flex max-w-[300px] flex-col items-start justify-between gap-[15px] ">
-          <div className="mt-[6px]">
+          <div className="mt-[3px]">
             <div className="w-56 truncate text-[15px] font-bold text-white ">
               {tripName}
             </div>
 
-            <div className="mt-[4px] text-xs font-semibold text-white">
+            <div className="mb-[5px] text-xs font-semibold text-white">
               {startDate.replace(/-/g, '.')} -{' '}
               {endDate.replace(/-/g, '.').split('2024.')}{' '}
               {tripDuration === '0박 1일' ? null : ` (${tripDuration})`}
diff --git a/src/components/MyTrip/MyTripIngList.tsx b/src/components/MyTrip/MyTripIngList.tsx
index 758a4f71..01cf3210 100644
--- a/src/components/MyTrip/MyTripIngList.tsx
+++ b/src/components/MyTrip/MyTripIngList.tsx
@@ -14,7 +14,7 @@ const MyTripIngList: React.FC<MyTripIngListProps> = ({ myTripsData }) => {
 
   return (
     <>
-      <div className="no-scrollbar grid grid-cols-1 gap-[5px] overflow-y-scroll ">
+      <div className="no-scrollbar mt-[8px] grid grid-cols-1 gap-[8px] overflow-y-scroll ">
         {myTripsData.map((myTripList: MyTripType) => (
           <MyTripIngItem key={uuidv4()} myTripList={myTripList} />
         ))}
diff --git a/src/components/MyTrip/MyTripItem.tsx b/src/components/MyTrip/MyTripItem.tsx
index 7776541d..4fe80cce 100644
--- a/src/components/MyTrip/MyTripItem.tsx
+++ b/src/components/MyTrip/MyTripItem.tsx
@@ -54,7 +54,7 @@ const MyTripItem: React.FC<MyTripItemProps> = ({ myTripList }) => {
     <SwipeableList>
       <SwipeableListItem trailingActions={trailingActions()}>
         <div
-          className="relative mb-[10px] cursor-pointer"
+          className="relative cursor-pointer"
           onClick={() => navigate(`/trip/${tripId}`)}>
           <div className="flex min-h-[72px]">
             <div>
@@ -64,8 +64,8 @@ const MyTripItem: React.FC<MyTripItemProps> = ({ myTripList }) => {
                 alt="여행지 이미지"
               />
             </div>
-            <div className="ml-[10px] flex w-full flex-col items-start justify-between  ">
-              <div className="mt-[1px] ">
+            <div className="ml-[10px] mt-[-2px] flex w-full flex-col items-start justify-between  ">
+              <div>
                 <div className="truncate text-[15px] text-base font-bold text-stone-900">
                   {tripName}
                 </div>
@@ -76,7 +76,7 @@ const MyTripItem: React.FC<MyTripItemProps> = ({ myTripList }) => {
                 </div>
               </div>
 
-              <div className="mb-[5px] flex text-xs font-normal text-zinc-500">
+              <div className="flex pt-[2px] text-xs font-normal text-zinc-500">
                 <UserIcon size={13} fill="#888" color="none" />
                 <span>{numberOfTripMember}명과 공유중</span>
               </div>
diff --git a/src/components/Mypage/UserInfoForm.tsx b/src/components/Mypage/UserInfoForm.tsx
index 6126a244..8cedc7e4 100644
--- a/src/components/Mypage/UserInfoForm.tsx
+++ b/src/components/Mypage/UserInfoForm.tsx
@@ -4,11 +4,12 @@ import { Link, useNavigate } from 'react-router-dom';
 import { useRecoilValue } from 'recoil';
 import { UserInfoState } from '@recoil/Auth.atom';
 import { useEffect } from 'react';
-import SubmitBtn from '@components/common/button/SubmitBtn';
 import UserInfoImg from '@components/Auth/SignupInfo/UserInfoImg';
 import AuthNicknameInputBox from '@components/Auth/AuthInput/AuthInputBox/AuthNicknameInputBox';
 import AuthDropDown from '@components/Auth/SignupInfo/AuthDropDown/AuthDropDown';
 import { ageArr, genderArr } from '@utils/authSelectOptions';
+import { BackBox } from '@components/common';
+import DeleteMemberButton from './DeleteMemberButton';
 
 const UserInfoForm = () => {
   const {
@@ -53,52 +54,66 @@ const UserInfoForm = () => {
   };
 
   return (
-    <form
-      onSubmit={handleSubmit(onInfoSubmit)}
-      className="flex h-[85vh] w-full flex-col justify-between">
-      <div>
-        <div className="mb-4 mt-6">
-          <UserInfoImg
-            register={register}
-            setValue={setValue}
-            inputValue={watch('profileImageUrl')}
-          />
-        </div>
-        <div className="mb-12 flex flex-col items-center">
-          <div className="body5 mb-2 h-8 rounded-full border border-solid border-gray2 px-3 py-2 text-gray5">
-            {userInfo?.email}
+    <>
+      <BackBox
+        showBack
+        backHandler={() => {
+          navigate('/mypage');
+        }}
+        showSave
+        isSaveValid={isValid}
+        saveHandler={handleSubmit(onInfoSubmit)}>
+        회원정보 수정
+      </BackBox>
+      <div className="flex flex-col items-center">
+        <form
+          // onSubmit={handleSubmit(onInfoSubmit)}
+          className="flex h-[85vh] w-full flex-col justify-between">
+          <div>
+            <div className="mb-4 mt-6">
+              <UserInfoImg
+                register={register}
+                setValue={setValue}
+                inputValue={watch('profileImageUrl')}
+              />
+            </div>
+            <div className="mb-12 flex flex-col items-center">
+              <div className="body5 mb-2 h-8 rounded-full border border-solid border-gray2 px-3 py-2 text-gray5">
+                {userInfo?.email}
+              </div>
+              <Link to="password" className="body4 text-gray4">
+                비밀번호 변경
+              </Link>
+            </div>
+            <AuthNicknameInputBox
+              register={register}
+              inputValue={watch('nickname')}
+              resetField={resetField}
+              errors={errors}
+              setError={setError}
+              getValues={getValues}
+            />
+            <div className="flex flex-col gap-6">
+              <AuthDropDown
+                label="성별"
+                options={genderArr}
+                name={'genderType'}
+                setValue={setValue}
+                value={watch('genderType')}
+              />
+              <AuthDropDown
+                label="연령대"
+                options={ageArr}
+                name={'ageType'}
+                setValue={setValue}
+                value={watch('ageType')}
+              />
+            </div>
           </div>
-          <Link to="password" className="body4 text-gray4">
-            비밀번호 변경
-          </Link>
-        </div>
-        <AuthNicknameInputBox
-          register={register}
-          inputValue={watch('nickname')}
-          resetField={resetField}
-          errors={errors}
-          setError={setError}
-          getValues={getValues}
-        />
-        <div className="flex flex-col gap-6">
-          <AuthDropDown
-            label="성별"
-            options={genderArr}
-            name={'genderType'}
-            register={register}
-          />
-          <AuthDropDown
-            label="연령대"
-            options={ageArr}
-            name={'ageType'}
-            register={register}
-          />
-        </div>
+          <DeleteMemberButton />
+        </form>
       </div>
-      <div className="mt-auto">
-        <SubmitBtn isActive={isValid}>완료</SubmitBtn>
-      </div>
-    </form>
+    </>
   );
 };
 
diff --git a/src/components/Plan/PlanEditItemBox.tsx b/src/components/Plan/PlanEditItemBox.tsx
index c1a3fa98..a52064b0 100644
--- a/src/components/Plan/PlanEditItemBox.tsx
+++ b/src/components/Plan/PlanEditItemBox.tsx
@@ -6,7 +6,7 @@ import {
   Draggable,
   DropResult,
 } from 'react-beautiful-dnd';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { pubUpdateTripItem, pubDeleteItem } from '@api/socket';
 import { pubUpdateTripItemReq } from '@/@types/service';
 import Alert from '@components/common/alert/Alert';
@@ -35,7 +35,6 @@ const PlanEditItemBox = ({
 
   const [, setIsEdit] = useRecoilState(isEditState);
   const [items, setItems] = useState(item);
-  const [newData, setNewData] = useState<pubUpdateTripItemReq | null>(null);
   const [selectedItemId, setSelectedItemId] = useState<number | null>(null);
   const [toastPopUp, setToastPopUp] = useState({
     isPopUp: false,
@@ -43,6 +42,13 @@ const PlanEditItemBox = ({
     verb: '',
   });
 
+  const debouncedPubUpdateTripItem = useCallback(
+    debounce((newData: pubUpdateTripItemReq, tripId: string) => {
+      pubUpdateTripItem(newData, tripId);
+    }, 3000),
+    [],
+  );
+
   const onDragEnd = (result: DropResult) => {
     if (!result.destination) return;
     const reorderedItems = Array.from(items);
@@ -55,22 +61,9 @@ const PlanEditItemBox = ({
       seqNum: index + 1,
     }));
 
-    setNewData({
-      visitDate: visitDate,
-      tripItemOrder,
-    });
+    debouncedPubUpdateTripItem({ visitDate: visitDate, tripItemOrder }, tripId);
   };
 
-  const debouncedPubUpdateTripItem = debounce((newData, tripId) => {
-    pubUpdateTripItem(newData, tripId);
-  }, 1000);
-
-  useEffect(() => {
-    if (newData && tripId) {
-      debouncedPubUpdateTripItem(newData, tripId);
-    }
-  }, [newData]);
-
   const handleConfirm = () => {
     if (tripId && visitDate && selectedItemId) {
       pubDeleteItem({ tripId: tripId, visitDate: visitDate }, selectedItemId);
diff --git a/src/components/Plan/PlanItem.tsx b/src/components/Plan/PlanItem.tsx
index 5ce5b3bb..ebe35ae5 100644
--- a/src/components/Plan/PlanItem.tsx
+++ b/src/components/Plan/PlanItem.tsx
@@ -4,13 +4,14 @@ import { useNavigate } from 'react-router-dom';
 import TripMap from './TripMap';
 import PlanItemBox from './PlanItemBox';
 import PlanEditItemBox from './PlanEditItemBox';
-import { useContext, useEffect } from 'react';
+import { useContext, useEffect, useCallback } from 'react';
 import { socketContext } from '@hooks/useSocket';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { visitDateState, isEditState } from '@recoil/socket';
 import { pubGetPathAndItems, pubUpdateTransportation } from '@api/socket';
 import { tapState } from '@recoil/plan';
 import { useGetTripsAuthority } from '@hooks/useGetTripsAuthority';
+import { debounce } from 'lodash';
 
 type PlanItemProps = {
   date: string;
@@ -40,24 +41,23 @@ const PlanItem: React.FC<PlanItemProps> = ({ date, day }) => {
     setIsEdit((prev) => !prev);
   };
 
-  const handleTranspo = (
-    transportation: 'CAR' | 'PUBLIC_TRANSPORTATION',
-    date: string,
-    tripId: string,
-  ) => {
-    if (transportation !== transpo) {
-      pubUpdateTransportation(
-        {
-          visitDate: date,
-          transportation: transportation,
-        },
-        tripId,
-      );
-    }
-  };
-
   const transpo = tripItem?.data?.transportation || '';
 
+  const debouncedHandleTranspo = useCallback(
+    debounce((transportation, date, tripId) => {
+      if (transportation !== transpo) {
+        pubUpdateTransportation(
+          {
+            visitDate: date,
+            transportation: transportation,
+          },
+          tripId,
+        );
+      }
+    }, 1000),
+    [transpo],
+  );
+
   return (
     <>
       {tripPath && <TripMap paths={tripPath.data?.paths || []} />}
@@ -67,7 +67,9 @@ const PlanItem: React.FC<PlanItemProps> = ({ date, day }) => {
         ) : (
           <div className="flex items-center justify-center">
             <div
-              onClick={() => handleTranspo('CAR', date || '', tripId || '')}
+              onClick={() =>
+                debouncedHandleTranspo('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}
@@ -76,7 +78,11 @@ const PlanItem: React.FC<PlanItemProps> = ({ date, day }) => {
             </div>
             <div
               onClick={() =>
-                handleTranspo('PUBLIC_TRANSPORTATION', date || '', tripId || '')
+                debouncedHandleTranspo(
+                  '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
diff --git a/src/components/Plan/PlanSectionTop.tsx b/src/components/Plan/PlanSectionTop.tsx
index 00d23134..afe01e17 100644
--- a/src/components/Plan/PlanSectionTop.tsx
+++ b/src/components/Plan/PlanSectionTop.tsx
@@ -23,6 +23,7 @@ import PlanSchedule from './PlanSchedule';
 import PlanCursor from './PlanCursor';
 import PlanOtherCursor from './PlanOtherCursor';
 import ScrollTopButton from '@components/common/scrollTopButton/ScrollTopButton';
+import { isMobile } from 'react-device-detect';
 
 const PlanSectionTop = () => {
   const navigate = useNavigate();
@@ -82,7 +83,11 @@ const PlanSectionTop = () => {
   }, [isEnter]);
   return (
     <div className="cursor-area min-h-screen" ref={cursorAreaRef}>
-      <PlanCursor props={cursorAreaRef} />
+      {!isMobile && (
+        <>
+          <PlanCursor props={cursorAreaRef} />
+        </>
+      )}
       <PlanOtherCursor />
       <BackBox
         showBack={true}
diff --git a/src/components/Review/CommentItem.tsx b/src/components/Review/CommentItem.tsx
index c74ff1c5..929621b9 100644
--- a/src/components/Review/CommentItem.tsx
+++ b/src/components/Review/CommentItem.tsx
@@ -44,7 +44,7 @@ const CommentItem: React.FC<CommentItemProps> = (props: CommentItemProps) => {
   };
 
   return (
-    <div className="border-b border-solid border-gray-300 py-[13px]">
+    <div className="border-b border-solid border-gray2 py-[13px]">
       <div className=" flex items-center">
         <div className="mr-4">
           {!(
diff --git a/src/components/Review/ReviewComments.tsx b/src/components/Review/ReviewComments.tsx
index 05dd0244..fbf4858b 100644
--- a/src/components/Review/ReviewComments.tsx
+++ b/src/components/Review/ReviewComments.tsx
@@ -85,7 +85,7 @@ export default function ReviewComments() {
         댓글
         <span className="pl-1 font-bold">{commentDataLength}</span>
       </div>
-      <div className="h-[8px] bg-gray1"></div>
+      <div className="ml-[-20px] mr-[-20px] h-[8px] bg-gray1"></div>
       <div className="flex flex-col">
         {commentDataLength == 0 && (
           <div className="mt-10 flex flex-col items-center justify-center text-sm text-gray4">
diff --git a/src/components/Review/ReviewKeyword.tsx b/src/components/Review/ReviewKeyword.tsx
index d6c24780..c33d7323 100644
--- a/src/components/Review/ReviewKeyword.tsx
+++ b/src/components/Review/ReviewKeyword.tsx
@@ -45,38 +45,29 @@ export default function ReviewKeyword() {
     }
   };
 
-  // 5x2 형태로 배치하기 위해 행(row)과 열(column)을 계산
-  // const rows = 5;
-  const columns = 2;
-
   return (
     <>
       <div className="mb-5 text-lg font-bold">어떤 점이 좋았나요? </div>
-      <div className="text-md mb-10 grid grid-cols-2 gap-2 font-bold">
-        {reviewKeywords?.data?.data?.keywords?.map(
-          (keyword: Keyword, index: number) => {
-            const row = Math.floor(index / columns) + 1;
-            const col = (index % columns) + 1;
-
-            const isSelected = selectedKeywords.some(
-              (selectedKeyword) =>
-                selectedKeyword.keywordId === keyword.keywordId,
-            );
+      <div className="mb-10  flex  flex-wrap gap-2 text-[14px] font-bold">
+        {reviewKeywords?.data?.data?.keywords?.map((keyword: Keyword) => {
+          const isSelected = selectedKeywords.some(
+            (selectedKeyword) =>
+              selectedKeyword.keywordId === keyword.keywordId,
+          );
 
-            return (
-              <button
-                className={`flex items-center justify-center row-${row} col-${col} h-[40px] cursor-pointer rounded-md ${
-                  isSelected
-                    ? 'bg-[#062139] text-white'
-                    : 'bg-gray-100 text-gray-500'
-                } px-2 py-1`}
-                key={keyword.keywordId}
-                onClick={() => handleKeywordClick(keyword)}>
-                {keyword.content}
-              </button>
-            );
-          },
-        )}
+          return (
+            <button
+              className={`h-[40px] cursor-pointer items-center justify-center rounded-[30px] ${
+                isSelected
+                  ? 'bg-[#062139] text-white'
+                  : 'bg-gray-100 text-gray-500'
+              } px-[14px] py-[8px]`}
+              key={keyword.keywordId}
+              onClick={() => handleKeywordClick(keyword)}>
+              {keyword.content}
+            </button>
+          );
+        })}
       </div>
     </>
   );
diff --git a/src/components/Trip/LikedToursList.tsx b/src/components/Trip/LikedToursList.tsx
index 9fa49f59..fcca4483 100644
--- a/src/components/Trip/LikedToursList.tsx
+++ b/src/components/Trip/LikedToursList.tsx
@@ -68,7 +68,7 @@ export const LikedToursList = () => {
   }, []);
 
   return (
-    <div className="realtive mt-[10px]">
+    <div className="realtive">
       <LikedToursListCategory onCategoryClick={handleCategoryClick} />
 
       {data?.pages[0].data.content.length > 0 ? (
diff --git a/src/components/Trip/LikedToursLists/LikedToursListBox.tsx b/src/components/Trip/LikedToursLists/LikedToursListBox.tsx
index 39ef3aae..45bba12d 100644
--- a/src/components/Trip/LikedToursLists/LikedToursListBox.tsx
+++ b/src/components/Trip/LikedToursLists/LikedToursListBox.tsx
@@ -48,7 +48,7 @@ const LikedToursListBox: React.FC<LikedToursListProps> = ({
           {/* <Spinner /> */}
         </div>
       }>
-      <div className="no-scrollbar grid grid-cols-1 gap-[5px] overflow-y-scroll">
+      <div className="no-scrollbar mt-[8px] grid grid-cols-1 gap-[24px] overflow-y-scroll">
         {isLoading
           ? Array.from({ length: 10 }, (_, index) => (
               <ToursItemSkeleton key={index} />
diff --git a/src/components/Trip/LikedToursLists/LikedToursListCategory.tsx b/src/components/Trip/LikedToursLists/LikedToursListCategory.tsx
index 8e78be04..1ffe97d4 100644
--- a/src/components/Trip/LikedToursLists/LikedToursListCategory.tsx
+++ b/src/components/Trip/LikedToursLists/LikedToursListCategory.tsx
@@ -27,7 +27,7 @@ const LikedToursListCategory: React.FC<LikedToursListCategoryProps> = ({
   };
 
   return (
-    <div className="no-scrollbar mb-[10px] flex w-[100%] overflow-scroll overflow-y-hidden bg-white">
+    <div className="no-scrollbar my-[8px] flex w-[100%] overflow-scroll overflow-y-hidden bg-white py-[10px]">
       {categories.map((category) => {
         return (
           <LikedToursListCategoryItem
diff --git a/src/components/Trip/LikedToursLists/LikedToursListCategoryItem.tsx b/src/components/Trip/LikedToursLists/LikedToursListCategoryItem.tsx
index 9172815d..a461e4f0 100644
--- a/src/components/Trip/LikedToursLists/LikedToursListCategoryItem.tsx
+++ b/src/components/Trip/LikedToursLists/LikedToursListCategoryItem.tsx
@@ -22,7 +22,7 @@ export const LikedToursListCategoryItem: React.FC<
   return (
     <button
       onClick={handleCategoryClick}
-      className={`body4 mr-[8px] flex h-[32px] w-[58px] items-center justify-center whitespace-nowrap  rounded-[30px] border border-solid bg-[#28D8FF] px-[16px] py-[7px] leading-normal ${buttonStyle}`}>
+      className={`body4 mr-[5px] 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
index f72641fa..f01607b4 100644
--- a/src/components/Trip/LikedToursLists/LikedToursListItem.tsx
+++ b/src/components/Trip/LikedToursLists/LikedToursListItem.tsx
@@ -83,7 +83,7 @@ const LikedToursListItem: React.FC<LikedToursListItemProps> = ({
           />
         </div>
 
-        <div className="ml-[8px] flex max-h-[72px] flex-col items-start">
+        <div className="ml-[16px] flex max-h-[72px] flex-col items-start">
           <div className="mt-[-5px] flex max-w-[230px] flex-col">
             <p className="truncate whitespace-nowrap text-[16px] font-bold leading-normal text-black ">
               {title}
@@ -105,7 +105,7 @@ const LikedToursListItem: React.FC<LikedToursListItemProps> = ({
                 </div>
               </div>
 
-              <div className="max-w-[200px] ">
+              <div className="max-w-[180px] ">
                 <p className="truncate text-[14px] text-gray4">
                   {tourAddress ? tourAddress : '주소를 제공하지 않고 있어요'}
                 </p>
diff --git a/src/components/Wish/Wish.tsx b/src/components/Wish/Wish.tsx
index 560a700a..296c4a77 100644
--- a/src/components/Wish/Wish.tsx
+++ b/src/components/Wish/Wish.tsx
@@ -44,9 +44,11 @@ const Wish = () => {
   }
 
   return (
-    <div className="mt-[10px] min-h-[100vh]">
-      <div className="sticky top-0 z-[105] bg-white py-0.5">
-        <h1 className="title2 pt-3">나의 관심 목록</h1>
+    <div className="mt-[5px] min-h-[100vh]">
+      <div className="sticky top-0 z-[105] bg-white">
+        <h1 className="py-[8px] text-[20px] font-bold text-gray7">
+          나의 관심 목록
+        </h1>
         <WishCategory onCategoryClick={handleCategoryClick} />
       </div>
 
diff --git a/src/components/Wish/WishCategoryItem.tsx b/src/components/Wish/WishCategoryItem.tsx
index 8704adff..4fcf3516 100644
--- a/src/components/Wish/WishCategoryItem.tsx
+++ b/src/components/Wish/WishCategoryItem.tsx
@@ -27,7 +27,7 @@ const WishCategoryItem: React.FC<WishCategoryItemProps> = ({
   return (
     <button
       onClick={handleCategoryClick}
-      className={`body4 mr-[8px] flex h-[32px] w-[58px] items-center justify-center whitespace-nowrap  rounded-[30px] border border-solid bg-[#28D8FF] px-[16px] py-[7px] leading-normal ${buttonStyle}`}>
+      className={`body4 mr-[5px] 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/Wish/WishItem.tsx b/src/components/Wish/WishItem.tsx
index 75928caa..cc7a4edd 100644
--- a/src/components/Wish/WishItem.tsx
+++ b/src/components/Wish/WishItem.tsx
@@ -32,7 +32,7 @@ const WishItem: React.FC<WishItemProps> = ({ wishList }) => {
 
   return (
     <div
-      className={`relative mb-[6px] flex max-h-[72px] cursor-pointer items-center`}
+      className={`relative flex max-h-[72px] cursor-pointer items-center`}
       onClick={() => navigate(`/detail/${id}`)}>
       <div className="flex items-center">
         <div>
@@ -46,12 +46,12 @@ const WishItem: React.FC<WishItemProps> = ({ wishList }) => {
           </div>
         </div>
 
-        <div className="ml-[8px] flex flex-col items-start justify-between gap-[15px]">
-          <div className=" max-w-[230px]">
-            <p className=" truncate whitespace-nowrap px-[2px] text-[16px] font-bold leading-normal text-black">
+        <div className="ml-[15px] flex flex-col items-start justify-between gap-[15px]">
+          <div className="max-w-[230px]">
+            <p className="truncate whitespace-nowrap text-[16px] font-bold leading-normal text-black">
               {title}
             </p>
-            <div className="ml-[3px] max-w-[260px]">
+            <div className="max-w-[260px]">
               <p className="truncate text-[14px] text-gray6">
                 {isMetroIncluded && tourAddress
                   ? (tourAddress.match(/(.*?[시군구])/)?.[0] || '') +
@@ -63,25 +63,25 @@ const WishItem: React.FC<WishItemProps> = ({ wishList }) => {
             </div>
           </div>
 
-          <div className="caption1 mb-[4px] ml-[3px] flex justify-center leading-normal text-gray4">
+          <div className="caption1 mb-[4px] flex h-[16px] items-center justify-center leading-normal text-gray4">
             <div className="mr-[5px] flex items-center">
-              <div className="">
-                <StarIcon size={12.5} color="#FFEC3E" fill="#FFEC3E" />
+              <div>
+                <StarIcon size={15} color="#FFEC3E" fill="#FFEC3E" />
               </div>
-              <div className="flex items-center pt-[1.5px]">
-                <span className="ml-1 mr-0.5 text-xs font-bold">
+              <div className="flex items-center">
+                <span className="ml-[2px] mr-0.5 text-[12px] font-bold">
                   {(Math.ceil(ratingAverage * 100) / 100).toFixed(1)}
                 </span>
-                <span className="text-xs">
+                <span className="text-[12px] font-normal ">
                   ({reviewCount ? reviewCount.toLocaleString() : reviewCount})
                 </span>
               </div>
             </div>
-            <div className="flex items-center justify-center ">
-              <div className="">
-                <HeartIcon size={14} color="#FF2167" fill="#FF2167" />
+            <div className="flex items-center justify-center">
+              <div>
+                <HeartIcon size={16} color="#FF2167" fill="#FF2167" />
               </div>
-              <span className="ml-1 mt-[0px] text-xs">
+              <span className="ml-[2px] text-[12px] font-normal">
                 {likedCount ? likedCount.toLocaleString() : likedCount}
               </span>
             </div>
diff --git a/src/components/Wish/WishList.tsx b/src/components/Wish/WishList.tsx
index c4fbb68d..3889d820 100644
--- a/src/components/Wish/WishList.tsx
+++ b/src/components/Wish/WishList.tsx
@@ -45,7 +45,7 @@ const WishList: React.FC<WishListProps> = ({
           <Spinner />
         </div>
       }>
-      <div className="no-scrollbar grid grid-cols-1 gap-[5px] overflow-y-scroll">
+      <div className="no-scrollbar grid grid-cols-1 gap-[16px] overflow-y-scroll pt-[10px]">
         {isLoading
           ? Array.from({ length: 10 }, (_, index) => (
               <ToursItemSkeleton key={index} />
diff --git a/src/components/common/BackBox/BackBox.tsx b/src/components/common/BackBox/BackBox.tsx
index 0d29c96f..6e51e9c9 100644
--- a/src/components/common/BackBox/BackBox.tsx
+++ b/src/components/common/BackBox/BackBox.tsx
@@ -8,6 +8,7 @@ interface Props {
   showSkip?: boolean;
   skipHandler?: VoidFunction;
   showSave?: boolean;
+  isSaveValid?: boolean;
   saveHandler?: VoidFunction;
   showShare?: boolean;
   shareHandler?: VoidFunction;
@@ -20,6 +21,7 @@ const BackBox = ({
   showSkip,
   skipHandler,
   showSave,
+  isSaveValid,
   saveHandler,
   showShare,
   shareHandler,
@@ -51,7 +53,8 @@ const BackBox = ({
       )}
       {showSave && (
         <button
-          className="headline2 absolute right-0 text-main2"
+          disabled={!isSaveValid}
+          className="headline2 absolute right-0 text-main2 disabled:cursor-not-allowed disabled:text-gray3"
           onClick={onSaveClick}>
           저장
         </button>
diff --git a/src/components/common/icons/Icons.tsx b/src/components/common/icons/Icons.tsx
index ec00f17e..5676e760 100644
--- a/src/components/common/icons/Icons.tsx
+++ b/src/components/common/icons/Icons.tsx
@@ -305,36 +305,19 @@ export const CheckIcon = ({
   );
 };
 
-interface LeftIconProps {
-  width?: number;
-  height?: number;
-  fill?: string;
-  onClick?: VoidFunction;
-  cursor?: string;
-}
-
-export const LeftIcon = ({
-  width = 8,
-  height = 15,
-  fill = '#1E1E1E',
-  onClick,
-  cursor = 'pointer',
-}: LeftIconProps) => {
+export const LeftIcon = () => {
   return (
     <svg
-      onClick={onClick}
-      cursor={cursor}
-      width={width}
-      height={height}
-      viewBox="0 0 8 15"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg">
+      xmlns="http://www.w3.org/2000/svg"
+      width="9"
+      height="16"
+      viewBox="0 0 9 16"
+      fill="none">
       <path
-        id="Left"
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M8.65547 0.743953C8.9713 1.02827 8.99457 1.51229 8.70746 1.82503L2.99737 8.04492L8.70746 14.2648C8.99457 14.5776 8.9713 15.0616 8.65547 15.3459C8.33964 15.6302 7.85086 15.6072 7.56375 15.2944L0.908447 8.04492L7.56375 0.795433C7.85087 0.482685 8.33965 0.459636 8.65547 0.743953Z"
-        fill={fill}
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M8.24116 1.13262C8.55699 1.41694 8.58027 1.90096 8.29315 2.21371L2.58306 8.43359L8.29315 14.6535C8.58026 14.9662 8.55699 15.4502 8.24116 15.7346C7.92534 16.0189 7.43656 15.9958 7.14944 15.6831L0.49414 8.43359L7.14944 1.1841C7.43656 0.871356 7.92534 0.848308 8.24116 1.13262Z"
+        fill="#1E1E1E"
       />
     </svg>
   );
@@ -1806,3 +1789,21 @@ export const GrayCalendarIcon: React.FC<IconProps> = ({}) => {
     </svg>
   );
 };
+
+export const AuthDropDownIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="21"
+      height="21"
+      viewBox="0 0 21 21"
+      fill="none">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.43696 7.66943C4.66915 7.41402 5.06443 7.39519 5.31984 7.62739L10.3994 12.2452L15.479 7.62739C15.7344 7.39519 16.1297 7.41402 16.3619 7.66943C16.5941 7.92484 16.5752 8.32012 16.3198 8.55231L10.3994 13.9345L4.479 8.55231C4.22359 8.32012 4.20476 7.92484 4.43696 7.66943Z"
+        fill="#888888"
+      />
+    </svg>
+  );
+};
diff --git a/src/components/common/nav/InputComment.tsx b/src/components/common/nav/InputComment.tsx
index 00a343dc..ebaad8f5 100644
--- a/src/components/common/nav/InputComment.tsx
+++ b/src/components/common/nav/InputComment.tsx
@@ -106,12 +106,11 @@ 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-[375px] items-center  rounded-md border border-solid border-[#EDEDED]">
+    <div className="fixed bottom-0 flex h-[64px] w-full  max-w-[412px] 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="pl-1 pr-0.5 text-sm font-bold text-[#29ddf6]">ㅣ</div>
         <div className="flex  w-full ">
           <input
-            // ref={inputRef}
             type="text"
             placeholder="댓글을 입력하세요"
             className=" w-full max-w-full text-sm placeholder-[#d7d7d7]  outline-none"
diff --git a/src/components/common/nav/Nav.tsx b/src/components/common/nav/Nav.tsx
index b29f1d70..3ec01923 100644
--- a/src/components/common/nav/Nav.tsx
+++ b/src/components/common/nav/Nav.tsx
@@ -62,7 +62,7 @@ const Nav = () => {
               )}
             </div>
             <p className="caption1 mt-[5px] text-center text-xs/[11px] font-normal text-gray7">
-              일정
+              여정
             </p>
           </div>
         ) : (
@@ -84,7 +84,7 @@ const Nav = () => {
                 />
               </div>
               <p className="caption1 mt-[5px] text-center text-xs/[11px] font-normal text-gray7">
-                일정
+                여정
               </p>
             </div>
           </Alert>
diff --git a/src/pages/mypage/editUserInfo.page.tsx b/src/pages/mypage/editUserInfo.page.tsx
index aab9743d..4932b44c 100644
--- a/src/pages/mypage/editUserInfo.page.tsx
+++ b/src/pages/mypage/editUserInfo.page.tsx
@@ -1,28 +1,7 @@
-import DeleteMemberButton from '@components/Mypage/DeleteMemberButton';
 import UserInfoForm from '@components/Mypage/UserInfoForm';
-import { BackBox } from '@components/common';
-import { useNavigate } from 'react-router-dom';
 
 const EditUserInfo = () => {
-  const navigate = useNavigate();
-  return (
-    <>
-      <BackBox
-        showBack
-        backHandler={() => {
-          navigate('/mypage');
-        }}
-        // showSave
-        // saveHandler={() => {}}
-      >
-        회원정보 수정
-      </BackBox>
-      <div className="flex flex-col items-center">
-        <UserInfoForm />
-        <DeleteMemberButton />
-      </div>
-    </>
-  );
+  return <UserInfoForm />;
 };
 
 export default EditUserInfo;
diff --git a/src/pages/mypage/editUserSurvey.page.tsx b/src/pages/mypage/editUserSurvey.page.tsx
index adf0f324..12124c49 100644
--- a/src/pages/mypage/editUserSurvey.page.tsx
+++ b/src/pages/mypage/editUserSurvey.page.tsx
@@ -1,21 +1,47 @@
+import { putMemberSurvey } from '@api/member';
 import AuthSurvey from '@components/Auth/AuthSurvey/AuthSurvey';
 import { BackBox } from '@components/common';
+import { SubmitHandler, useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 
 const EditUserSurvey = () => {
   const navigate = useNavigate();
 
+  const {
+    register,
+    handleSubmit,
+    setValue,
+    formState: { isValid },
+  } = useForm<Survey>();
+
+  const onSaveSubmit: SubmitHandler<Survey> = async (data) => {
+    try {
+      const res = await putMemberSurvey({ survey: data });
+      if (res.data.status === 200) {
+        navigate(-1);
+      }
+    } catch (err) {
+      console.error(err);
+      alert('오류가 발생했습니다. 다시 시도해주세요');
+    }
+  };
+
+  console.log(isValid);
+
   return (
     <>
       <BackBox
         showBack
         backHandler={() => {
           navigate(-1);
-        }}>
+        }}
+        showSave
+        isSaveValid={isValid}
+        saveHandler={handleSubmit(onSaveSubmit)}>
         나의 여행 취향 설정
       </BackBox>
       <div className="mt-8">
-        <AuthSurvey />
+        <AuthSurvey register={register} setValue={setValue} />
       </div>
     </>
   );
diff --git a/src/pages/signup/signup.page.tsx b/src/pages/signup/signup.page.tsx
index def45d2d..7ee023b0 100644
--- a/src/pages/signup/signup.page.tsx
+++ b/src/pages/signup/signup.page.tsx
@@ -9,10 +9,12 @@ import {
 import { BackBox } from '@components/common';
 import SubmitBtn from '@components/common/button/SubmitBtn';
 import { CheckboxIcon } from '@components/common/icons/Icons';
+import { UserInfoState } from '@recoil/Auth.atom';
 import { setItem } from '@utils/localStorageFun';
 import { useEffect } from 'react';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
+import { useSetRecoilState } from 'recoil';
 
 const Signup = () => {
   const {
@@ -39,6 +41,8 @@ const Signup = () => {
     }
   }, [password, trigger]);
 
+  const setUserInfo = useSetRecoilState(UserInfoState);
+
   const onSignupSubmit: SubmitHandler<SignupFormValue> = async (data) => {
     const { email, password } = data;
 
@@ -48,6 +52,14 @@ const Signup = () => {
         password,
       });
       if (res.status === 200) {
+        setUserInfo({
+          nickname: res.data.data.nickName!,
+          email: res.data.data.email!,
+          profileImageUrl: null,
+          ageType: null,
+          genderType: null,
+          survey: null,
+        });
         setItem('accessToken', res.data.data.tokenInfo.accessToken);
         navigate('/signup/success');
       }
diff --git a/src/pages/signup/signupSuccess.page.tsx b/src/pages/signup/signupSuccess.page.tsx
index 82eeb663..9a8fa527 100644
--- a/src/pages/signup/signupSuccess.page.tsx
+++ b/src/pages/signup/signupSuccess.page.tsx
@@ -5,7 +5,7 @@ import { useNavigate } from 'react-router-dom';
 const SignupSuccess = () => {
   const navigate = useNavigate();
   return (
-    <div className="flex h-[93vh] flex-col justify-between">
+    <div className="flex h-[85vh] flex-col justify-between">
       <div className="mt-40 flex flex-col items-center">
         <div className="mb-6">
           <SuccessIcon />
diff --git a/src/pages/signup/signupSurvey.page.tsx b/src/pages/signup/signupSurvey.page.tsx
index a00fe2e2..f3a73cf7 100644
--- a/src/pages/signup/signupSurvey.page.tsx
+++ b/src/pages/signup/signupSurvey.page.tsx
@@ -3,9 +3,32 @@ import { BackBox } from '@components/common';
 import AuthSurvey from '@components/Auth/AuthSurvey/AuthSurvey';
 import { useNavigate } from 'react-router-dom';
 import { ProgressBarIcon } from '@components/common/icons/Icons';
+import { SubmitHandler, useForm } from 'react-hook-form';
+import SubmitBtn from '@components/common/button/SubmitBtn';
+import { putMemberSurvey } from '@api/member';
 
 const SignupSurvey = () => {
   const navigate = useNavigate();
+
+  const {
+    register,
+    handleSubmit,
+    setValue,
+    formState: { isDirty, isValid },
+  } = useForm<Survey>();
+
+  const onSaveSubmit: SubmitHandler<Survey> = async (data) => {
+    try {
+      const res = await putMemberSurvey({ survey: data });
+      if (res.data.status === 200) {
+        navigate('/signup/info');
+      }
+    } catch (err) {
+      console.error(err);
+      alert('오류가 발생했습니다. 다시 시도해주세요');
+    }
+  };
+
   return (
     <div className="relative flex h-full flex-col">
       <BackBox
@@ -21,7 +44,12 @@ const SignupSurvey = () => {
         title={'어떤 여행을 좋아하세요?'}
         subTitle="여행 취향을 골라주세요."
       />
-      <AuthSurvey path="/signup/info" />
+      <AuthSurvey register={register} setValue={setValue} />
+      <SubmitBtn
+        isActive={isDirty && isValid}
+        onClick={handleSubmit(onSaveSubmit)}>
+        완료
+      </SubmitBtn>
     </div>
   );
 };
diff --git a/src/utils/authSelectOptions.ts b/src/utils/authSelectOptions.ts
index d16d0a59..576bbc79 100644
--- a/src/utils/authSelectOptions.ts
+++ b/src/utils/authSelectOptions.ts
@@ -1,12 +1,10 @@
 export const genderArr: SelectOption[] = [
-  { id: '', value: '성별을 선택해주세요.' },
   { id: 'FEMALE', value: '여' },
   { id: 'MALE', value: '남' },
   { id: 'NON_BINARY', value: '기타' },
 ];
 
 export const ageArr: SelectOption[] = [
-  { id: '', value: '연령대를 설정해주세요.' },
   { id: 'TEENAGER', value: '10대' },
   { id: 'TWENTIES', value: '20대' },
   { id: 'THIRTIES', value: '30대' },