Dev QA

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>

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>
   );
 };

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>
   );
 };
 

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;

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>

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>

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 ? (
         <>