Test: #80 로그인 모킹 함수 작성

src/mocks/handlers.ts

@@ -1,7 +1,8 @@
 import userServiceHandler from '@mocks/services/userServiceHandler';
 import teamServiceHandler from '@mocks/services/teamServiceHandler';
 import projectServiceHandler from '@mocks/services/projectServiceHandler';
+import authServiceHandler from './services/authServiceHandler';
 
-const handlers = [...userServiceHandler, ...teamServiceHandler, ...projectServiceHandler];
+const handlers = [...userServiceHandler, ...teamServiceHandler, ...projectServiceHandler, ...authServiceHandler];
 
 export default handlers;

src/mocks/services/authServiceHandler.ts

@@ -0,0 +1,32 @@
+import { http, HttpResponse } from 'msw';
+
+const BASE_URL = import.meta.env.VITE_BASE_URL;
+
+type LoginRequestBody = {
+  username: string;
+  password: string;
+};
+const authServiceHandler = [
+  // 로그인 API
+  http.post(`${BASE_URL}/user/login`, async ({ request }) => {
+    const { username, password } = (await request.json()) as LoginRequestBody;
+
+    if (username === 'test' && password === 'test@123') {
+      const accessToken = 'mockedAccessToken';
+      const refreshToken = 'mockedRefreshToken';
+
+      return HttpResponse.json(
+        { accessToken },
+        {
+          status: 200,
+          headers: {
+            'Set-Cookie': `refreshToken=${refreshToken}; HttpOnly; Secure; SameSite=Strict; Path=/;`,
+          },
+        },
+      );
+    }
+    return new HttpResponse(JSON.stringify({ message: '아이디 또는 비밀번호가 잘못되었습니다.' }), { status: 400 });
+  }),
+];
+
+export default authServiceHandler;

src/pages/user/SearchPasswordPage.tsx

@@ -13,7 +13,7 @@ export default function SearchPasswordPage() {
   } = useForm<SearchPasswordForm>({
     mode: 'onChange',
     defaultValues: {
-      id: '',
+      username: '',
       email: '',
       code: '',
     },
@@ -28,8 +28,8 @@ export default function SearchPasswordPage() {
       {/* 아이디 */}
       <ValidationInput
         placeholder="아이디"
-        errors={errors.id?.message}
-        register={register('id', USER_AUTH_VALIDATION_RULES.ID)}
+        errors={errors.username?.message}
+        register={register('username', USER_AUTH_VALIDATION_RULES.ID)}
       />
 
       {/* 이메일 */}

src/pages/user/SignInPage.tsx

@@ -23,7 +23,7 @@ export default function SignInPage() {
   } = useForm({
     mode: 'onChange',
     defaultValues: {
-      id: '',
+      username: '',
       password: '',
     },
   });
@@ -58,8 +58,8 @@ export default function SignInPage() {
         {/* 아이디 */}
         <ValidationInput
           placeholder="아이디"
-          errors={errors.id?.message}
-          register={register('id', USER_AUTH_VALIDATION_RULES.ID)}
+          errors={errors.username?.message}
+          register={register('username', USER_AUTH_VALIDATION_RULES.ID)}
         />
 
         {/* 비밀번호 */}

src/pages/user/SignUpPage.tsx

@@ -21,7 +21,7 @@ export default function SignUpPage() {
   const methods = useForm<UserSignUpForm>({
     mode: 'onChange',
     defaultValues: {
-      id: '',
+      username: '',
       email: '',
       code: '',
       nickname: '',
@@ -34,7 +34,7 @@ export default function SignUpPage() {
 
   // form 전송 함수
   const onSubmit = async (data: UserSignUpForm) => {
-    const { id, code, checkPassword, ...filteredData } = data;
+    const { username, code, checkPassword, ...filteredData } = data;
     console.log(data);
 
     const verifyResult = verifyCode(methods.watch('code'), methods.setError);
@@ -43,8 +43,8 @@ export default function SignUpPage() {
     // TODO: 폼 제출 로직 수정 필요
     try {
       // 회원가입 폼
-      const formData = { ...filteredData, id, code };
-      const registrationResponse = await axios.post(`http://localhost:8080/api/v1/user/${id}`, formData);
+      const formData = { ...filteredData, username, code };
+      const registrationResponse = await axios.post(`http://localhost:8080/api/v1/user/${username}`, formData);
       if (registrationResponse.status !== 200) return toastError('회원가입에 실패했습니다. 다시 시도해 주세요.');
 
       // 이미지 폼
@@ -54,7 +54,7 @@ export default function SignUpPage() {
         const jpeg = await reduceImageSize(imageUrl);
         const file = new File([jpeg], new Date().toISOString(), { type: 'image/jpeg' });
         imgFormData.append('profileUrl', file);
-        imgFormData.append('id', id ?? '');
+        imgFormData.append('username', username ?? '');
 
         const imageResponse = await axios.post(`http://localhost:8080/api/v1/users/file`, imgFormData, {
           headers: { 'Content-Type': 'multipart/form-data' },
@@ -80,8 +80,8 @@ export default function SignUpPage() {
         {/* 아이디 */}
         <ValidationInput
           label="아이디"
-          errors={methods.formState.errors?.id?.message}
-          register={methods.register('id', USER_AUTH_VALIDATION_RULES.ID)}
+          errors={methods.formState.errors?.username?.message}
+          register={methods.register('username', USER_AUTH_VALIDATION_RULES.ID)}
         />
 
         {/* 이메일 */}

src/types/UserType.tsx

@@ -2,7 +2,7 @@ import type { Role } from '@/types/RoleType';
 
 export type User = {
   userId: number;
-  id: string | null;
+  username: string | null;
   email: string;
   provider: 'LOCAL' | 'KAKAO' | 'GOOGLE';
   nickname: string;
@@ -21,13 +21,13 @@ export type UserSignUpForm = Omit<User, 'userId' | 'provider'> & {
   checkPassword: string;
 };
 
-export type UserSignInForm = Pick<User, 'id'> & {
+export type UserSignInForm = Pick<User, 'username'> & {
   password: string;
 };
 
 export type EmailVerificationForm = Pick<User, 'email'> & { code: string };
 
-export type SearchPasswordForm = Pick<User, 'id' | 'email'> & { code: string };
+export type SearchPasswordForm = Pick<User, 'username' | 'email'> & { code: string };
 
 export type EditPasswordForm = {
   password: string;