Feat: 소켓 교통수단 변경 구현

src/@types/service.ts

@@ -8,8 +8,6 @@ export type subInfoRes = {
     numberOfPeople: number;
     tripName: string;
     tripStatus: string;
-    area: string;
-    subarea: string;
     budget: number;
   } | null;
 };
@@ -121,4 +119,4 @@ export type TripItem = {
   seqNum: number;
   visitDate: string;
   price: number;
-} | null;
+};

src/@types/socket.types.ts

@@ -8,8 +8,6 @@ type subInfoMessage = (message: {
     numberOfPeople: number;
     tripName: string;
     tripStatus: string;
-    area: string;
-    subarea: string;
     budget: number;
   } | null;
 }) => void;
@@ -93,8 +91,6 @@ interface pubInfo {
   endDate: string;
   numberOfPeople: number;
   tripName: string;
-  area: string;
-  subarea: string;
   budget: number;
 }
 

src/api/socket.ts

@@ -104,7 +104,7 @@ export const pubUpdateTripItem = (
 // 여행 날짜별 교통 수단 변경 이벤트 발생시 (01/16 업데이트)
 export const pubUpdateTransportation = (
   pubUpdateTransportation: pubUpdateTransportation,
-  trips: number,
+  trips: string,
 ) => {
   socketClient.publish({
     destination: `/pub/trips/${trips}/updateTransportation`,

src/components/Auth/SignupInfo/AuthDropDown/AuthDropDown.tsx

@@ -1,33 +1,26 @@
 import AuthDropDownOption from './AuthDropDownOption';
-import * as Select from '@radix-ui/react-select';
-import { DownIcon } from '@components/common/icons/Icons';
-import { UseFormRegister, UseFormSetValue } from 'react-hook-form';
+import { UseFormRegister } from 'react-hook-form';
 
 interface Props {
   label: string;
-  text: string;
   options: SelectOption[];
   name: string;
   register: UseFormRegister<any>;
-  setValue: UseFormSetValue<any>;
-
-  // initialState: string | null;
-  // setState: React.Dispatch<React.SetStateAction<string | null>>;
 }
 
-const AuthDropDown = ({
-  label,
-  text,
-  options,
-  name,
-  register,
-  setValue,
-}: Props) => {
-  const onSelectClick = (e: any) => {
-    setValue(name, e);
-  };
-
+const AuthDropDown = ({ label, options, name, register }: Props) => {
   return (
+    <div className="z-10 flex flex-col">
+      <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>
+
     // <div className="z-10 flex flex-col">
     //   <h2 className="body2 mb-2 text-main1">{label}</h2>
     //   <div
@@ -59,31 +52,31 @@ const AuthDropDown = ({
     //     )}
     //   </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>
+    // <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>
   );
 };
 

src/components/Auth/SignupInfo/AuthDropDown/AuthDropDownOption.tsx

@@ -1,7 +1,3 @@
-import { CheckIcon } from '@components/common/icons/Icons';
-import * as Select from '@radix-ui/react-select';
-import React, { ReactNode, Ref } from 'react';
-
 // interface Props {
 // children: string;
 // clickHandler?: VoidFunction;
@@ -42,30 +38,39 @@ import React, { ReactNode, Ref } from 'react';
 
 // export default AuthDropDownOption;
 
-interface SelectItemProps {
-  value: string;
-  children: ReactNode;
-  className?: string;
-  disabled?: boolean;
-}
+// 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>
+//     );
+//   },
+// );
 
-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;
+
+interface Props {
+  option: SelectOption;
+}
 
+const AuthDropDownOption = ({ option }: Props) => {
+  return <option value={option.id}>{option.value}</option>;
+};
 export default AuthDropDownOption;

src/components/Auth/SignupInfo/SignupInfoForm.tsx

@@ -8,6 +8,7 @@ import { useEffect } from 'react';
 import SubmitBtn from '@components/common/button/SubmitBtn';
 import AuthDropDown from './AuthDropDown/AuthDropDown';
 import AuthNicknameInputBox from '../AuthInput/AuthInputBox/AuthNicknameInputBox';
+import { ageArr, genderArr } from '@utils/authSelectOptions';
 
 const SignupInfoForm = () => {
   const {
@@ -23,8 +24,6 @@ const SignupInfoForm = () => {
     mode: 'onChange',
     criteriaMode: 'all',
   });
-  // const [genderType, setGenderType] = useState<string | null>(null);
-  // const [ageType, setAgeType] = useState<string | null>(null);
 
   const navigate = useNavigate();
 
@@ -43,8 +42,8 @@ const SignupInfoForm = () => {
       const res = await putMember({
         nickname: nickname,
         profileImageUrl: profileImageUrl,
-        genderType: genderType,
-        ageType: ageType,
+        ageType: ageType === '' ? null : ageType,
+        genderType: genderType === '' ? null : genderType,
       });
       if (res.status === 200) {
         navigate('/');
@@ -77,19 +76,15 @@ const SignupInfoForm = () => {
         <div className="flex flex-col gap-6">
           <AuthDropDown
             label="성별"
-            text={'성별을 선택해주세요.'}
             options={genderArr}
             name={'genderType'}
             register={register}
-            setValue={setValue}
           />
           <AuthDropDown
             label="연령대"
-            text={'연령대를 선택해주세요.'}
             options={ageArr}
             name={'ageType'}
             register={register}
-            setValue={setValue}
           />
         </div>
       </div>
@@ -101,17 +96,3 @@ const SignupInfoForm = () => {
 };
 
 export default SignupInfoForm;
-
-const genderArr: SelectOption[] = [
-  { id: 'FEMALE', value: '여' },
-  { id: 'MALE', value: '남' },
-  { id: 'NON_BINARY', value: '기타' },
-];
-
-const ageArr: SelectOption[] = [
-  { id: 'TEENAGER', value: '10대' },
-  { id: 'TWENTIES', value: '20대' },
-  { id: 'THIRTIES', value: '30대' },
-  { id: 'FOURTIES', value: '40대' },
-  { id: 'ABOVE_FIFTIES', value: '50대 이상' },
-];

src/components/Auth/SignupInfo/UserInfoImg.tsx

@@ -28,7 +28,7 @@ const UserInfoImg = ({ register, setValue, inputValue }: AuthImgProps) => {
         <img
           className="rounded-full"
           src={
-            inputValue !== null
+            inputValue
               ? inputValue
               : 'https://elasticbeanstalk-ap-northeast-2-077853585725.s3.ap-northeast-2.amazonaws.com/static/387fde04-f7d4-443d-88e1-b678ab5e079ddefaultProfileImg.svg'
           }

src/components/Mypage/EditPassword/EditPwForm.tsx

@@ -7,6 +7,7 @@ import {
 } from '@components/Auth';
 import SubmitBtn from '@components/common/button/SubmitBtn';
 import { AxiosError } from 'axios';
+import { useEffect } from 'react';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 
@@ -18,6 +19,7 @@ const EditPwForm = () => {
     watch,
     resetField,
     setError,
+    trigger,
     formState: { errors, isValid },
   } = useForm<EditPassword>({
     mode: 'onChange',
@@ -26,6 +28,14 @@ const EditPwForm = () => {
 
   const navigate = useNavigate();
 
+  const password = watch('password');
+  const passwordCheck = watch('passwordCheck');
+  useEffect(() => {
+    if (passwordCheck) {
+      trigger('passwordCheck');
+    }
+  }, [password, trigger]);
+
   const onEditPwSubmit: SubmitHandler<EditPassword> = async (data) => {
     const { currentPw, password } = data;
 

src/components/Mypage/UserInfoForm.tsx

@@ -8,6 +8,7 @@ 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';
 
 const UserInfoForm = () => {
   const {
@@ -29,20 +30,22 @@ const UserInfoForm = () => {
   useEffect(() => {
     setValue('nickname', userInfo?.nickname);
     setValue('profileImageUrl', userInfo?.profileImageUrl);
+    setValue('genderType', userInfo?.genderType);
+    setValue('ageType', userInfo?.ageType);
   }, [userInfo]);
 
   const onInfoSubmit: SubmitHandler<any> = async (data) => {
-    const { nickname, profileImageUrl } = data;
+    const { nickname, profileImageUrl, genderType, ageType } = data;
 
     try {
       const res = await putMember({
         nickname: nickname,
         profileImageUrl: profileImageUrl,
-        ageType: null,
-        genderType: null,
+        ageType: ageType === '' ? null : ageType,
+        genderType: genderType === '' ? null : genderType,
       });
       if (res.status === 200) {
-        navigate('/');
+        navigate('/mypage');
       }
     } catch (err) {
       console.error('회원정보 수정 요청 중 에러 발생', err);
@@ -80,19 +83,15 @@ const UserInfoForm = () => {
         <div className="flex flex-col gap-6">
           <AuthDropDown
             label="성별"
-            text={'성별을 선택해주세요.'}
             options={genderArr}
             name={'genderType'}
             register={register}
-            setValue={setValue}
           />
           <AuthDropDown
             label="연령대"
-            text={'연령대를 선택해주세요.'}
             options={ageArr}
             name={'ageType'}
             register={register}
-            setValue={setValue}
           />
         </div>
       </div>
@@ -104,17 +103,3 @@ const UserInfoForm = () => {
 };
 
 export default UserInfoForm;
-
-const genderArr: SelectOption[] = [
-  { id: '1', value: '여' },
-  { id: '2', value: '남' },
-  { id: '3', value: '기타' },
-];
-
-const ageArr: SelectOption[] = [
-  { id: '1', value: '10대' },
-  { id: '2', value: '20대' },
-  { id: '3', value: '30대' },
-  { id: '4', value: '40대' },
-  { id: '5', value: '50대 이상' },
-];