Feat: #144 비밀번호 변경 네트워크 로직 구현

src/mocks/mockData.ts

@@ -38,6 +38,7 @@ export const USER_INFO_DUMMY = {
   provider: 'LOCAL',
   userId: 1,
   username: 'test123',
+  password: 'qwer@1234',
   email: '[email protected]',
   nickname: 'momoco',
   profileImageName: null,

src/mocks/services/authServiceHandler.ts

@@ -2,7 +2,7 @@ import Cookies from 'js-cookie';
 import { http, HttpResponse } from 'msw';
 import { AUTH_SETTINGS } from '@constants/settings';
 import { USER_INFO_DUMMY } from '@mocks/mockData';
-import { EmailVerificationForm, SearchPasswordForm, UserSignInForm } from '@/types/UserType';
+import { EmailVerificationForm, SearchPasswordForm, UpdatePasswordForm, UserSignInForm } from '@/types/UserType';
 
 const BASE_URL = import.meta.env.VITE_BASE_URL;
 const refreshTokenExpiryDate = new Date(Date.now() + AUTH_SETTINGS.REFRESH_TOKEN_EXPIRATION).toISOString();
@@ -149,6 +149,20 @@ const authServiceHandler = [
 
     return HttpResponse.json({ password: tempPassword }, { status: 200 });
   }),
+
+  // 비밀번호 변경 API
+  http.patch(`${BASE_URL}/user/password`, async ({ request }) => {
+    const accessToken = request.headers.get('Authorization');
+    if (!accessToken) return HttpResponse.json({ message: '인증 정보가 존재하지 않습니다.' }, { status: 401 });
+
+    const { password, newPassword } = (await request.json()) as UpdatePasswordForm;
+    if (password !== USER_INFO_DUMMY.password)
+      return HttpResponse.json({ message: '비밀번호가 일치하지 않습니다.' }, { status: 400 });
+
+    USER_INFO_DUMMY.password = newPassword;
+    console.log(USER_INFO_DUMMY);
+    return HttpResponse.json(null, { status: 200 });
+  }),
 ];
 
 export default authServiceHandler;

src/pages/setting/UserPasswordSettingPage.tsx

@@ -1,20 +1,29 @@
+import { AxiosError } from 'axios';
 import { useForm } from 'react-hook-form';
-import ValidationInput from '@/components/common/ValidationInput';
-import { USER_AUTH_VALIDATION_RULES } from '@/constants/formValidationRules';
-import { EditPasswordForm } from '@/types/UserType';
+import ValidationInput from '@components/common/ValidationInput';
+import { USER_AUTH_VALIDATION_RULES } from '@constants/formValidationRules';
+import { updateUserPassword } from '@services/authService';
+import useToast from '@hooks/useToast';
+import { UpdatePasswordForm } from '@/types/UserType';
 
 export default function UserPasswordSettingPage() {
+  const { toastError } = useToast();
   const {
     register,
     handleSubmit,
     watch,
     formState: { errors, isSubmitting },
-  } = useForm<EditPasswordForm>({
+  } = useForm<UpdatePasswordForm>({
     mode: 'onChange',
   });
 
-  const onSubmit = (data: EditPasswordForm) => {
-    console.log(data);
+  const onSubmit = async (data: UpdatePasswordForm) => {
+    try {
+      await updateUserPassword(data);
+    } catch (error) {
+      if (error instanceof AxiosError && error.response) toastError(error.response.data.message);
+      else toastError('예상치 못한 에러가 발생했습니다.');
+    }
   };
 
   return (
@@ -23,20 +32,23 @@ export default function UserPasswordSettingPage() {
         {/* 현재 비밀번호 */}
         <ValidationInput
           label="현재 비밀번호"
+          type="password"
           errors={errors.password?.message}
           register={register('password', USER_AUTH_VALIDATION_RULES.PASSWORD)}
         />
 
         {/* 신규 비밀번호 */}
         <ValidationInput
           label="신규 비밀번호"
+          type="password"
           errors={errors.newPassword?.message}
           register={register('newPassword', USER_AUTH_VALIDATION_RULES.PASSWORD)}
         />
 
         {/* 신규 비밀번호 확인 */}
         <ValidationInput
           label="신규 비밀번호 확인"
+          type="password"
           errors={errors.checkNewPassword?.message}
           register={register('checkNewPassword', USER_AUTH_VALIDATION_RULES.PASSWORD_CONFIRM(watch('newPassword')))}
         />

src/services/authService.ts

@@ -2,6 +2,7 @@ import { authAxios, defaultAxios } from '@services/axiosProvider';
 
 import type { AxiosRequestConfig } from 'axios';
 import type {
+  UpdatePasswordForm,
   EmailVerificationForm,
   SearchIdResult,
   SearchPasswordForm,
@@ -96,3 +97,16 @@ export async function searchUserId(searchUserIdForm: EmailVerificationForm, axio
 export async function searchUserPassword(searchPasswordForm: SearchPasswordForm, axiosConfig: AxiosRequestConfig = {}) {
   return defaultAxios.post<SearchPasswordResult>('user/recover/password', searchPasswordForm, axiosConfig);
 }
+
+/**
+ * 비밀번호 변경 API
+ *
+ * @export
+ * @async
+ * @param {UpdatePasswordForm} updatePasswordForm - 비밀번호 변경 요청 데이터
+ * @param {AxiosRequestConfig} [axiosConfig={}] - axios 요청 옵션 설정 객체
+ * @returns {Promise<AxiosResponse>}
+ */
+export async function updateUserPassword(updatePasswordForm: UpdatePasswordForm, axiosConfig: AxiosRequestConfig = {}) {
+  return authAxios.patch('user/password', updatePasswordForm, axiosConfig);
+}

src/types/UserType.tsx

@@ -29,14 +29,12 @@ export type EmailVerificationForm = Pick<User, 'email'> & { code: string };
 
 export type SearchPasswordForm = Pick<User, 'username' | 'email'> & { code: string };
 
-export type EditPasswordForm = {
+export type UpdatePasswordForm = {
   password: string;
   newPassword: string;
   checkNewPassword: string;
 };
 
 export type SearchIdResult = Pick<User, 'username'>;
 
-export type SearchPasswordResult = {
-  password: string;
-};
+export type SearchPasswordResult = { password: string };