From be1c74ec5a498fe099713784104d38cf7def331f Mon Sep 17 00:00:00 2001 From: bottlewook Date: Sat, 2 Mar 2024 00:32:03 +0900 Subject: [PATCH 1/4] =?UTF-8?q?feat:=20=ED=94=84=EB=A1=9C=ED=95=84=20?= =?UTF-8?q?=EC=BF=BC=EB=A6=AC=ED=9B=85=20=EC=A0=9C=EC=9E=91=20#205?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/remote/queries/my-page/useProfile.ts | 10 +++++++++ .../queries/my-page/useUpdateProfile.ts | 21 +++++++++++++++++++ 2 files changed, 31 insertions(+) create mode 100644 src/remote/queries/my-page/useProfile.ts create mode 100644 src/remote/queries/my-page/useUpdateProfile.ts diff --git a/src/remote/queries/my-page/useProfile.ts b/src/remote/queries/my-page/useProfile.ts new file mode 100644 index 00000000..de36f93d --- /dev/null +++ b/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({ queryKey: ['profile'], queryFn: getProfile }); +} + +export default useProfile; diff --git a/src/remote/queries/my-page/useUpdateProfile.ts b/src/remote/queries/my-page/useUpdateProfile.ts new file mode 100644 index 00000000..127b05e1 --- /dev/null +++ b/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; From 25240531d8af0b28be65f8504c639c818b31e684 Mon Sep 17 00:00:00 2001 From: bottlewook Date: Sat, 2 Mar 2024 00:32:22 +0900 Subject: [PATCH 2/4] =?UTF-8?q?feat:=20=ED=94=84=EB=A1=9C=ED=95=84=20?= =?UTF-8?q?=EC=BF=BC=EB=A6=AC=ED=95=A8=EC=88=98=20=EB=B0=8F=20=ED=83=80?= =?UTF-8?q?=EC=9E=85=20=EC=A0=9C=EC=9E=91=20#205?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../api/requests/my-page/myPage.get.api.ts | 9 +++++++++ .../api/requests/my-page/myPage.patch.api.ts | 13 +++++++++++++ src/remote/api/types/auth.ts | 17 +++++++++-------- 3 files changed, 31 insertions(+), 8 deletions(-) create mode 100644 src/remote/api/requests/my-page/myPage.get.api.ts create mode 100644 src/remote/api/requests/my-page/myPage.patch.api.ts diff --git a/src/remote/api/requests/my-page/myPage.get.api.ts b/src/remote/api/requests/my-page/myPage.get.api.ts new file mode 100644 index 00000000..1b65f895 --- /dev/null +++ b/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('/mypage/member'); + + return response; +}; diff --git a/src/remote/api/requests/my-page/myPage.patch.api.ts b/src/remote/api/requests/my-page/myPage.patch.api.ts new file mode 100644 index 00000000..092c4c21 --- /dev/null +++ b/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, IUpdateProfile>('/mypage/member', { + gender, + age, + }); + + return response; +}; diff --git a/src/remote/api/types/auth.ts b/src/remote/api/types/auth.ts index 27cffc9a..8c4c6361 100644 --- a/src/remote/api/types/auth.ts +++ b/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; - -export type FindPassword = Pick; - -export type ChangePassword = Pick; - // 로그인 성공시 res export interface IUserInfo { age: string @@ -37,11 +36,13 @@ export interface IUserInfo { password: null } -export type UserInfoType = ICommon; - // refreshToken res export interface IRefreshToken { jwtToken: string } +export type FindId = Pick; +export type FindPassword = Pick; +export type ChangePassword = Pick; +export type UserInfoType = ICommon; export type RefreshTokenType = ICommon; From 8f7d0f46d9f3359b4950a9b2cc66f2d314632e11 Mon Sep 17 00:00:00 2001 From: bottlewook Date: Sat, 2 Mar 2024 00:32:54 +0900 Subject: [PATCH 3/4] =?UTF-8?q?feat:=20=ED=94=84=EB=A1=9C=ED=95=84=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20api=20=EA=B8=B0=EB=8A=A5=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=20#205?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/(my-page)/my-page/page.tsx | 9 ++--- src/app/(my-page)/my-page/profile/page.tsx | 44 ++++++++++++++++------ 2 files changed, 37 insertions(+), 16 deletions(-) diff --git a/src/app/(my-page)/my-page/page.tsx b/src/app/(my-page)/my-page/page.tsx index 8333d1c6..9a8d03fe 100644 --- a/src/app/(my-page)/my-page/page.tsx +++ b/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); diff --git a/src/app/(my-page)/my-page/profile/page.tsx b/src/app/(my-page)/my-page/profile/page.tsx index 18efd744..564f5af9 100644 --- a/src/app/(my-page)/my-page/profile/page.tsx +++ b/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: 'washpedia@gmail.com', - 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 ( <>
@@ -67,7 +89,7 @@ function ProfilePage() { Date: Sat, 2 Mar 2024 01:19:13 +0900 Subject: [PATCH 4/4] =?UTF-8?q?chore:=20CHROMATIC=20TOKEN=20=EA=B0=92=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 5cd5d22a..257117bc 100644 --- a/package.json +++ b/package.json @@ -86,4 +86,4 @@ "msw": { "workerDirectory": "public" } -} +} \ No newline at end of file