feat: 프로필 페이지 api 기능 추가 #205

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

@@ -1,7 +1,6 @@
 'use client';
 
 import { useEffect, useState } from 'react';
-import { useCookies } from 'react-cookie';
 
 import classNames from 'classnames/bind';
 import Link from 'next/link';
@@ -24,12 +23,12 @@ const TOP_MARGIN = 96;
 const BOTTOM_MARGIN = 97;
 
 function MyProfilePage() {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [cookies, removeCookie] = useCookies(['token']);
   const logout = useLoggedOut();
 
-  // eslint-disable-next-line max-len
-  const userId = useAppSelector((state) => { return state.user.id; }, (prev, curr) => { return prev === curr; });
+  const userId = useAppSelector(
+    (state) => { return state.user.id; },
+    (prev, curr) => { return prev === curr; },
+  );
 
   const [isLoggedIn, setIsLoggedIn] = useState(false);
 

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

@@ -1,11 +1,17 @@
 'use client';
 
+import { useEffect, useMemo } from 'react';
 import { useForm } from 'react-hook-form';
 
 import dynamic from 'next/dynamic';
 
+import {
+  AGE_MAP, AgeType, GENDER_MAP, GenderType,
+} from '@constants/dropdownMap';
 import { AGE_OPTIONS, GENDER_OPTIONS } from '@constants/myPage';
 import VALIDATION_MESSAGE_MAP from '@constants/validationMessage';
+import useProfile from '@remote/queries/my-page/useProfile';
+import useUpdateProfile from '@remote/queries/my-page/useUpdateProfile';
 import DropdownField from '@shared/dropdown-field/DropdownField';
 import Header from '@shared/header/Header';
 import Spacing from '@shared/spacing/Spacing';
@@ -16,26 +22,42 @@ const FixedBottomButton = dynamic(() => { return import('@shared/fixedBottomButt
 });
 
 function ProfilePage() {
-  // TODO: api or store를 통해 defaultValue 설정하기
+  const { data: profile } = useProfile();
+  const { mutate } = useUpdateProfile();
+
   const {
-    register, watch, formState: {
+    register, watch, reset, formState: {
       errors, isDirty, isValid,
     }, getValues,
   } = useForm({
-    defaultValues: {
-      id: 'washpedia123',
-      email: '[email protected]',
-      gender: '남성',
-      age: '20',
-    },
+    defaultValues: useMemo(() => {
+      return {
+        id: profile?.value.id,
+        email: profile?.value.email,
+        gender: profile?.value.gender,
+        age: profile?.value.age,
+      };
+    }, [profile?.value.age, profile?.value.email, profile?.value.gender, profile?.value.id]),
     mode: 'onBlur',
   });
 
   const onSubmit = () => {
     // eslint-disable-next-line no-console
-    console.log(getValues());
+    const { gender, age } = getValues();
+    if (gender != null && age != null) {
+      mutate({ gender, age });
+    }
   };
 
+  useEffect(() => {
+    reset({
+      id: profile?.value.id,
+      email: profile?.value.email,
+      gender: profile?.value.gender,
+      age: profile?.value.age,
+    });
+  }, [profile?.value.age, profile?.value.email, profile?.value.gender, profile?.value.id, reset]);
+
   return (
     <>
       <Header />
@@ -67,15 +89,15 @@ function ProfilePage() {
         <Spacing size={12} />
         <DropdownField
           label="성별"
-          selectedLabel={watch('gender')}
+          selectedLabel={GENDER_MAP[watch('gender') as GenderType]}
           type="profile"
           options={GENDER_OPTIONS}
           {...register('gender')}
         />
         <Spacing size={12} />
         <DropdownField
           label="연령대"
-          selectedLabel={watch('age')}
+          selectedLabel={AGE_MAP[watch('age') as AgeType]}
           type="profile"
           options={AGE_OPTIONS}
           {...register('age')}