페이지 기능: 마이페이지 api 기능

src/app/(auth)/signup/page.tsx

@@ -5,8 +5,6 @@
 import { useCallback, useState } from 'react';
 import { useForm } from 'react-hook-form';
 
-import { useRouter } from 'next/navigation';
-
 import {
   AGE_MAP, AgeType, GENDER_MAP, GenderType,
 } from '@constants/dropdownMap';
@@ -28,7 +26,6 @@ type SignUpFormType = {
 } & ISignUp;
 
 function SignupPage() {
-  const router = useRouter();
   const [duplicationValidation, setDuplicationValidation] = useState({
     id: false,
     email: false,
@@ -56,7 +53,6 @@ function SignupPage() {
     mutate({
       id, password, email, gender, age,
     });
-    router.push('/login');
   };
 
   const [step, setStep] = useState(1);

src/app/(car-details)/car-details/hydrated-page.tsx

@@ -93,8 +93,8 @@ function CarDetailsPage() {
       {step === 3 && (
         <CarColorPicker
           onClick={onNext}
-          main="차량 크기가 무엇인가요?"
-          sub="차량 크기를 선택해주세요."
+          main="차량 색상은 무엇인가요?"
+          sub="차량 색상을 선택해주세요."
           options={carColorData}
           register={register}
           dirtyFields={dirtyFields}

src/app/(my-page)/my-page/car-details/page.tsx

@@ -1,90 +1,107 @@
+/* eslint-disable @typescript-eslint/no-misused-promises */
+
 'use client';
 
+import { useEffect, useMemo } from 'react';
 import { useForm } from 'react-hook-form';
 
 import dynamic from 'next/dynamic';
 
-import {
-  CARTYPE_OPTIONS, COLOR_OPTIONS, DRIVING_OPTIONS, PARKING_OPTIONS, SEGMENT_OPTIONS,
-} from '@constants/myPage';
+import withRegisterCarDetails from '@hooks/withRegisterCarDetails';
+import { ICarDetails } from '@remote/api/types/additional-info';
+import { CarInfoType } from '@remote/api/types/my-page';
+import useRegisterCarDetails from '@remote/queries/additional-info/car-details/useRegisterCarDetails';
 import DropdownField from '@shared/dropdown-field/DropdownField';
 import Header from '@shared/header/Header';
 import Spacing from '@shared/spacing/Spacing';
+import mappingCarDetails from '@utils/mappingCarDetails';
 
 const FixedBottomButton = dynamic(() => { return import('@shared/fixedBottomButton/FixedBottomButton'); }, {
   ssr: false,
 });
 
-function MyCarDetailsPage() {
-  // TODO: api or store를 통해 defaultValue 설정하기
+function MyCarDetailsPage({ myCarInfo }: { myCarInfo: CarInfoType }) {
+  const { carOptions, mappingCarOptions } = mappingCarDetails(myCarInfo);
+  const { mutate } = useRegisterCarDetails();
   const {
-    register, watch, formState: {
+    register, watch, reset, formState: {
       isDirty, isValid,
-    }, getValues,
+    }, handleSubmit,
   } = useForm({
-    defaultValues: {
-      segment: '세단',
-      cartype: '중형',
-      color: '빨간색',
-      driving: '복합적',
-      parking: '노상',
-    },
+    defaultValues: useMemo(() => {
+      return {
+        segment: myCarInfo.value.car_info.segment,
+        cartype: myCarInfo.value.car_info.cartype,
+        color: myCarInfo.value.car_info.color,
+        driving: myCarInfo.value.car_info.driving,
+        parking: myCarInfo.value.car_info.parking,
+      };
+    }, [myCarInfo]),
     mode: 'onBlur',
   });
 
-  const onSubmit = () => {
-    // eslint-disable-next-line no-console
-    console.log(getValues());
+  const onSubmit = (carInfo: ICarDetails) => {
+    mutate(carInfo);
   };
 
+  useEffect(() => {
+    reset({
+      segment: myCarInfo.value.car_info.segment,
+      cartype: myCarInfo.value.car_info.cartype,
+      color: myCarInfo.value.car_info.color,
+      driving: myCarInfo.value.car_info.driving,
+      parking: myCarInfo.value.car_info.parking,
+    });
+  }, [myCarInfo, reset]);
+
   return (
     <>
       <Header />
       <Spacing size={24} />
       <main className="mainContainer">
         <DropdownField
           label="차량 유형"
-          selectedLabel={watch('segment')}
+          selectedLabel={mappingCarOptions.segment_options[watch('segment')]}
           type="profile"
-          options={SEGMENT_OPTIONS}
+          options={carOptions.segment_options}
           {...register('segment')}
         />
         <Spacing size={12} />
         <DropdownField
           label="차량 크기"
-          selectedLabel={watch('cartype')}
+          selectedLabel={mappingCarOptions.carType_options[watch('cartype')]}
           type="profile"
-          options={CARTYPE_OPTIONS}
+          options={carOptions.carType_options}
           {...register('cartype')}
         />
         <Spacing size={12} />
         <DropdownField
           label="차량 색상"
-          selectedLabel={watch('color')}
+          selectedLabel={mappingCarOptions.color_options[watch('color')]}
           type="profile"
-          options={COLOR_OPTIONS}
+          options={carOptions.color_options}
           {...register('color')}
         />
         <Spacing size={12} />
         <DropdownField
           label="주행 환경"
-          selectedLabel={watch('driving')}
+          selectedLabel={mappingCarOptions.driving_options[watch('driving')]}
           type="profile"
-          options={DRIVING_OPTIONS}
+          options={carOptions.driving_options}
           {...register('driving')}
         />
         <Spacing size={12} />
         <DropdownField
           label="주차 환경"
-          selectedLabel={watch('parking')}
+          selectedLabel={mappingCarOptions.parking_options[watch('parking')]}
           type="profile"
-          options={PARKING_OPTIONS}
+          options={carOptions.parking_options}
           {...register('parking')}
         />
-        <FixedBottomButton onClick={onSubmit} type="submit" disabled={!isDirty || !isValid}>변경 사항 저장하기</FixedBottomButton>
+        <FixedBottomButton onClick={handleSubmit(onSubmit)} type="submit" disabled={!isDirty || !isValid}>변경 사항 저장하기</FixedBottomButton>
       </main>
     </>
   );
 }
 
-export default MyCarDetailsPage;
+export default withRegisterCarDetails(MyCarDetailsPage);

src/app/(my-page)/my-page/car-wash-details/page.tsx

@@ -1,72 +1,87 @@
+/* eslint-disable @typescript-eslint/no-misused-promises */
+
 'use client';
 
+import { useEffect, useMemo } from 'react';
 import { useForm } from 'react-hook-form';
 
 import dynamic from 'next/dynamic';
 
-import {
-  COST_OPTIONS, FREQUENCY_OPTIONS, INTEREST_OPTIONS,
-} from '@constants/myPage';
+import withRegisterCarWashDetails from '@hooks/withRegisterCarWashDetails';
+import { ICarWashDetails } from '@remote/api/types/additional-info';
+import { CarWashInfoType } from '@remote/api/types/my-page';
+import useRegisterCarWashDetails from '@remote/queries/additional-info/car-wash-details/useRegisterCarWashDetails';
 import DropdownField from '@shared/dropdown-field/DropdownField';
 import Header from '@shared/header/Header';
 import Spacing from '@shared/spacing/Spacing';
+import mappingCarWashDetails from '@utils/mappingCarWashDetails';
 
 const FixedBottomButton = dynamic(() => { return import('@shared/fixedBottomButton/FixedBottomButton'); }, {
   ssr: false,
 });
 
-function MyCarWashDetailsPage() {
-  // TODO: api or store를 통해 defaultValue 설정하기
+function MyCarWashDetailsPage({ myCarWashInfo }: { myCarWashInfo: CarWashInfoType }) {
+  const { carWashOptions, mappingCarWashOptions } = mappingCarWashDetails(myCarWashInfo);
+  const { mutate } = useRegisterCarWashDetails();
   const {
-    register, watch, formState: {
+    register, watch, reset, formState: {
       isDirty, isValid,
-    }, getValues,
+    }, handleSubmit,
   } = useForm({
-    defaultValues: {
-      frequency: '월 4회 이상',
-      cost: '월 10만원 이상',
-      interest: '도장',
-    },
+    defaultValues: useMemo(() => {
+      return {
+        frequency: myCarWashInfo.value.wash_info.frequency,
+        cost: myCarWashInfo.value.wash_info.cost,
+        interest: myCarWashInfo.value.wash_info.interest,
+      };
+    }, [myCarWashInfo]),
     mode: 'onBlur',
   });
 
-  const onSubmit = () => {
-    // eslint-disable-next-line no-console
-    console.log(getValues());
+  const onSubmit = (carWashInfo: ICarWashDetails) => {
+    mutate(carWashInfo);
   };
 
+  useEffect(() => {
+    reset({
+      frequency: myCarWashInfo.value.wash_info.frequency,
+      cost: myCarWashInfo.value.wash_info.cost,
+      interest: myCarWashInfo.value.wash_info.interest,
+    });
+  }, [myCarWashInfo, reset]);
+
   return (
     <>
       <Header />
       <Spacing size={24} />
       <main className="mainContainer">
         <DropdownField
           label="세차 횟수"
-          selectedLabel={watch('frequency')}
+          selectedLabel={mappingCarWashOptions.frequency_options[watch('frequency')]}
           type="profile"
-          options={FREQUENCY_OPTIONS}
+          options={carWashOptions.frequency_options}
           {...register('frequency')}
         />
         <Spacing size={12} />
         <DropdownField
           label="지출 비용"
-          selectedLabel={watch('cost')}
+          selectedLabel={mappingCarWashOptions.cost_options[watch('cost')]}
           type="profile"
-          options={COST_OPTIONS}
+          options={carWashOptions.cost_options}
           {...register('cost')}
         />
         <Spacing size={12} />
         <DropdownField
           label="주요 관심사"
-          selectedLabel={watch('interest')}
+          selectedLabel={mappingCarWashOptions.interest_options[watch('interest')]}
           type="profile"
-          options={INTEREST_OPTIONS}
+          options={carWashOptions.interest_options}
           {...register('interest')}
         />
-        <FixedBottomButton onClick={onSubmit} type="submit" disabled={!isDirty || !isValid}>변경 사항 저장하기</FixedBottomButton>
+        <FixedBottomButton onClick={handleSubmit(onSubmit)} type="submit" disabled={!isDirty || !isValid}>변경 사항 저장하기</FixedBottomButton>
       </main>
     </>
   );
 }
 
-export default MyCarWashDetailsPage;
+export default withRegisterCarWashDetails(MyCarWashDetailsPage);

src/app/(my-page)/my-page/page.tsx

@@ -1,7 +1,5 @@
 'use client';
 
-import { useEffect, useState } from 'react';
-
 import classNames from 'classnames/bind';
 import Link from 'next/link';
 
@@ -30,19 +28,13 @@ function MyProfilePage() {
     (prev, curr) => { return prev === curr; },
   );
 
-  const [isLoggedIn, setIsLoggedIn] = useState(false);
-
-  useEffect(() => {
-    setIsLoggedIn(userId !== null);
-  }, [userId]);
-
   // 로그아웃
   const handleLoggedOut = () => {
     // TODO: 먼저 로그아웃 모달이 뜨도록 할지 논의필요
     logout();
   };
 
-  if (isLoggedIn === false) {
+  if (userId == null) {
     return (
       <>
         <Confirmation
@@ -75,13 +67,13 @@ function MyProfilePage() {
           </Link>
         </li>
         <li className={cx('linkInfoContainer')}>
-          <Link href="/car-details">
+          <Link href="/my-page/car-details">
             나의 차량 정보
             <LinkArrow />
           </Link>
         </li>
         <li className={cx('linkInfoContainer')}>
-          <Link href="/car-wash-details">
+          <Link href="/my-page/car-wash-details">
             나의 세차 정보
             <LinkArrow />
           </Link>

src/app/(my-page)/my-page/profile/page.tsx

@@ -24,7 +24,6 @@ const FixedBottomButton = dynamic(() => { return import('@shared/fixedBottomButt
 function ProfilePage() {
   const { data: profile } = useProfile();
   const { mutate } = useUpdateProfile();
-
   const {
     register, watch, reset, formState: {
       errors, isDirty, isValid,
@@ -37,7 +36,7 @@ function ProfilePage() {
         gender: profile?.value.gender,
         age: profile?.value.age,
       };
-    }, [profile?.value.age, profile?.value.email, profile?.value.gender, profile?.value.id]),
+    }, [profile]),
     mode: 'onBlur',
   });
 
@@ -56,7 +55,7 @@ function ProfilePage() {
       gender: profile?.value.gender,
       age: profile?.value.age,
     });
-  }, [profile?.value.age, profile?.value.email, profile?.value.gender, profile?.value.id, reset]);
+  }, [profile, reset]);
 
   return (
     <>