Merge pull request #238 from Kernel360/feature-my-page-api

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

package.json

@@ -86,4 +86,4 @@
   "msw": {
     "workerDirectory": "public"
   }
-}
+}

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

src/remote/api/requests/my-page/myPage.get.api.ts

@@ -0,0 +1,9 @@
+import { UserInfoType } from '../../types/auth';
+import { getRequest } from '../requests.api';
+
+/* ----- 내 정보 조회 ----- */
+export const getProfile = async () => {
+  const response = await getRequest<UserInfoType>('/mypage/member');
+
+  return response;
+};

src/remote/api/requests/my-page/myPage.patch.api.ts

@@ -0,0 +1,13 @@
+import { IUpdateProfile } from '../../types/auth';
+import { ICommon } from '../../types/common';
+import { patchRequest } from '../requests.api';
+
+/* ----- 내 정보 조회 ----- */
+export const updateProfile = async ({ gender, age }: IUpdateProfile) => {
+  const response = await patchRequest<ICommon<null>, IUpdateProfile>('/mypage/member', {
+    gender,
+    age,
+  });
+
+  return response;
+};

src/remote/api/types/auth.ts

@@ -11,17 +11,16 @@ export interface ISignUp extends ISignIn {
   age: string
 }
 
+export interface IUpdateProfile {
+  gender: string
+  age: string
+}
+
 export interface IResetPassword {
   token: string
   password: string
 }
 
-export type FindId = Pick<ISignUp, 'email'>;
-
-export type FindPassword = Pick<ISignUp, 'id'>;
-
-export type ChangePassword = Pick<ISignUp, 'password'>;
-
 // 로그인 성공시 res
 export interface IUserInfo {
   age: string
@@ -37,11 +36,13 @@ export interface IUserInfo {
   password: null
 }
 
-export type UserInfoType = ICommon<IUserInfo>;
-
 // refreshToken res
 export interface IRefreshToken {
   jwtToken: string
 }
 
+export type FindId = Pick<ISignUp, 'email'>;
+export type FindPassword = Pick<ISignUp, 'id'>;
+export type ChangePassword = Pick<ISignUp, 'password'>;
+export type UserInfoType = ICommon<IUserInfo>;
 export type RefreshTokenType = ICommon<IRefreshToken>;

src/remote/queries/my-page/useProfile.ts

@@ -0,0 +1,10 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { getProfile } from '@remote/api/requests/my-page/myPage.get.api';
+import { UserInfoType } from '@remote/api/types/auth';
+
+function useProfile() {
+  return useQuery<UserInfoType>({ queryKey: ['profile'], queryFn: getProfile });
+}
+
+export default useProfile;

src/remote/queries/my-page/useUpdateProfile.ts

@@ -0,0 +1,21 @@
+import { toast } from 'react-toastify';
+
+import { useMutation } from '@tanstack/react-query';
+import { useRouter } from 'next/navigation';
+
+import { updateProfile } from '@/remote/api/requests/my-page/myPage.patch.api';
+
+function useUpdateProfile() {
+  const router = useRouter();
+  const onSuccess = () => {
+    router.push('/');
+    toast.success('회원정보가 수정되었습니다.');
+  };
+  const onError = () => {
+    toast.error('유효하지 않은 값입니다.');
+  };
+
+  return useMutation({ mutationFn: updateProfile, onSuccess, onError });
+}
+
+export default useUpdateProfile;