Sign in/#58

.storybook/main.ts

@@ -20,6 +20,7 @@ const config: StorybookConfig = {
       config.resolve.alias = {
         ...config.resolve.alias,
         '@': path.resolve(__dirname, '../'),
+        'next/headers': path.resolve(__dirname, '../app/utils/test/__mock__/next/headers.ts'),
       };
     }
     return config;

app/(sub-page)/sign-in/page.tsx

@@ -0,0 +1,11 @@
+import ContentContainer from '@/app/ui/view/atom/content-container';
+import SignInForm from '@/app/ui/user/sign-in-form/sign-in-form';
+
+// Refactor: fallback 스켈레톤으로 대체
+export default function Page() {
+  return (
+    <ContentContainer className="md:w-[768px]">
+      <SignInForm />
+    </ContentContainer>
+  );
+}

app/business/api-path.ts

@@ -6,4 +6,5 @@ export const API_PATH = {
   parsePDFtoText: `${BASE_URL}/parsePDFtoText`,
   takenLectures: `${BASE_URL}/taken-lectures`,
   user: `${BASE_URL}/users`,
+  auth: `${BASE_URL}/auth`,
 };

app/business/user/user.command.ts

@@ -2,10 +2,88 @@
 
 import { FormState } from '@/app/ui/view/molecule/form/form-root';
 import { API_PATH } from '../api-path';
-import { SignUpRequestBody } from './user.type';
+import { SignUpRequestBody, SignInRequestBody } from './user.type';
 import { httpErrorHandler } from '@/app/utils/http/http-error-handler';
 import { BadRequestError } from '@/app/utils/http/http-error';
-import { SignUpFormSchema } from './user.validation';
+import { SignUpFormSchema, SignInFormSchema, SignInResponseSchema } from './user.validation';
+import { cookies } from 'next/headers';
+import { z } from 'zod';
+
+function isValidation<T extends z.ZodObject<any>>(data: any, schema: T): data is z.infer<T> {
+  try {
+    schema.parse(data);
+    return true;
+  } catch (error) {
+    return false;
+  }
+}
+
+export async function authenticate(prevState: FormState, formData: FormData): Promise<FormState> {
+  const validatedFields = SignInFormSchema.safeParse({
+    authId: formData.get('authId'),
+    password: formData.get('password'),
+  });
+
+  if (!validatedFields.success) {
+    return {
+      isSuccess: false,
+      isFailure: true,
+      validationError: validatedFields.error.flatten().fieldErrors,
+      message: '양식에 맞춰 다시 입력해주세요.',
+    };
+  }
+
+  const body: SignInRequestBody = {
+    ...validatedFields.data,
+  };
+
+  try {
+    const response = await fetch(`${API_PATH.auth}/sign-in`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(body),
+    });
+
+    const result = await response.json();
+
+    httpErrorHandler(response, result);
+
+    if (isValidation(result, SignInResponseSchema)) {
+      cookies().set('accessToken', result.accessToken, {
+        httpOnly: true,
+        // secure: process.env.NODE_ENV === 'production',
+        path: '/',
+      });
+      cookies().set('refreshToken', result.refreshToken, {
+        httpOnly: true,
+        secure: process.env.NODE_ENV === 'production',
+        path: '/',
+      });
+    }
+  } catch (error) {
+    if (error instanceof BadRequestError) {
+      // 잘못된 요청 처리 로직
+      return {
+        isSuccess: false,
+        isFailure: true,
+        validationError: {},
+        message: error.message,
+      };
+    } else {
+      // 나머지 에러는 더 상위 수준에서 처리
+      throw error;
+    }
+  }
+
+  return {
+    isSuccess: true,
+    isFailure: false,
+    validationError: {},
+    message: '로그인 성공',
+  };
+}
 
 export async function createUser(prevState: FormState, formData: FormData): Promise<FormState> {
   const validatedFields = SignUpFormSchema.safeParse({

app/business/user/user.type.ts

@@ -1,9 +1,19 @@
 // https://stackoverflow.com/questions/76957592/error-only-async-functions-are-allowed-to-be-exported-in-a-use-server-file
 // server action 파일에서는 async function만 export 가능
 
+import { SignInResponseSchema } from './user.validation';
+import z from 'zod';
+
 export interface SignUpRequestBody {
   authId: string;
   password: string;
   studentNumber: string;
   engLv: string;
 }
+
+export interface SignInRequestBody {
+  authId: string;
+  password: string;
+}
+
+export type SignInResponse = z.infer<typeof SignInResponseSchema>;

app/business/user/user.validation.ts

@@ -1,5 +1,15 @@
 import { z } from 'zod';
 
+export const SignInFormSchema = z.object({
+  authId: z.string(),
+  password: z.string(),
+});
+
+export const SignInResponseSchema = z.object({
+  accessToken: z.string(),
+  refreshToken: z.string(),
+});
+
 export const SignUpFormSchema = z
   .object({
     authId: z

app/mocks/db.mock.ts

@@ -1,5 +1,5 @@
 import { TakenLectures } from '../business/lecture/taken-lecture.query';
-import { SignUpRequestBody } from '../business/user/user.type';
+import { SignUpRequestBody, SignInRequestBody } from '../business/user/user.type';
 import { takenLectures } from './data.mock';
 
 interface MockUser {
@@ -19,6 +19,7 @@ type MockDatabaseAction = {
   getTakenLectures: () => TakenLectures[];
   getUser: (authId: string) => MockUser | undefined;
   createUser: (user: MockUser) => boolean;
+  signIn: (userData: SignInRequestBody) => boolean;
 };
 
 export const mockDatabase: MockDatabaseAction = {
@@ -31,6 +32,10 @@ export const mockDatabase: MockDatabaseAction = {
     mockDatabaseStore.users = [...mockDatabaseStore.users, user];
     return true;
   },
+  signIn: (userData: SignInRequestBody) => {
+    const user = mockDatabaseStore.users.find((u) => u.authId === userData.authId && u.password === userData.password);
+    return !!user;
+  },
 };
 
 const initialState: MockDatabaseState = {

app/mocks/handlers/user-handler.mock.ts

@@ -1,7 +1,8 @@
 import { HttpResponse, http, delay } from 'msw';
 import { API_PATH } from '../../business/api-path';
 import { mockDatabase } from '../db.mock';
-import { SignUpRequestBody } from '@/app/business/user/user.type';
+import { SignUpRequestBody, SignInRequestBody, SignInResponse } from '@/app/business/user/user.type';
+import { ErrorResponseData } from '@/app/utils/http/http-error-handler';
 
 export const userHandlers = [
   http.post<never, SignUpRequestBody, never>(`${API_PATH.user}/sign-up`, async ({ request }) => {
@@ -16,4 +17,26 @@ export const userHandlers = [
 
     return HttpResponse.json({ status: 200 });
   }),
+
+  http.post<never, SignInRequestBody, SignInResponse | ErrorResponseData>(
+    `${API_PATH.auth}/sign-in`,
+    async ({ request }) => {
+      const signInData = await request.json();
+
+      const isSuccess = mockDatabase.signIn(signInData);
+      await delay(500);
+
+      if (!isSuccess) {
+        return HttpResponse.json(
+          { status: 400, message: '아이디 또는 비밀번호가 일치하지 않습니다.' },
+          { status: 400 },
+        );
+      }
+
+      return HttpResponse.json({
+        accessToken: 'fake-access-token',
+        refreshToken: 'fake-refresh-token',
+      });
+    },
+  ),
 ];

app/ui/user/sign-in-form/sign-in-form.stories.tsx

@@ -0,0 +1,73 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import SignInForm from './sign-in-form';
+
+import { userEvent, within, expect, fn, waitFor } from '@storybook/test';
+import { resetMockDB, mockDatabase } from '@/app/mocks/db.mock';
+
+const meta = {
+  title: 'ui/user/SignInForm',
+  component: SignInForm,
+  decorators: [
+    (Story) => (
+      <div className="w-96">
+        <Story />
+      </div>
+    ),
+  ],
+  args: {
+    onNext: fn(),
+  },
+} as Meta<typeof SignInForm>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+const beforeEach = () => {
+  resetMockDB();
+  mockDatabase.createUser({
+    authId: 'testtest',
+    password: 'test1234!',
+    studentNumber: '60000001',
+    engLv: 'ENG12',
+  });
+};
+
+export const SuccessSenario: Story = {
+  play: async ({ args, canvasElement, step }) => {
+    beforeEach();
+    const canvas = within(canvasElement);
+
+    await step('사용자가 양식에 맞춰서 폼을 입력하면', async () => {
+      await userEvent.type(canvas.getByLabelText('아이디'), 'testtest');
+      await userEvent.type(canvas.getByLabelText('비밀번호'), 'test1234!');
+
+      await userEvent.click(canvas.getByText('로그인'));
+    });
+
+    await step('로그인에 성공한다', async () => {
+      await waitFor(() => expect(args.onNext).toHaveBeenCalled());
+    });
+  },
+};
+
+export const FailureScenarioWithoutUser: Story = {
+  play: async ({ args, canvasElement, step }) => {
+    beforeEach();
+    const canvas = within(canvasElement);
+
+    await step('사용자가 존재하지 않는 아이디로 로그인하면', async () => {
+      await userEvent.type(canvas.getByLabelText('아이디'), 'test');
+      await userEvent.type(canvas.getByLabelText('비밀번호'), 'test1234');
+
+      await userEvent.click(canvas.getByText('로그인'));
+    });
+
+    await step('로그인에 실패한다', async () => {
+      await waitFor(() => expect(args.onNext).not.toHaveBeenCalled());
+      expect(await canvas.findByText('아이디 또는 비밀번호가 일치하지 않습니다.')).toBeInTheDocument();
+    });
+  },
+};

app/ui/user/sign-in-form/sign-in-form.tsx

@@ -0,0 +1,17 @@
+'use client';
+import Form from '../../view/molecule/form';
+import { authenticate } from '@/app/business/user/user.command';
+
+interface SignInFormProps {
+  onNext?: () => void;
+}
+
+export default function SignInForm({ onNext }: SignInFormProps) {
+  return (
+    <Form onSuccess={onNext} id="로그인" action={authenticate}>
+      <Form.TextInput required={true} label="아이디" id="authId" placeholder="아이디를 입력하세요" />
+      <Form.PasswordInput required={true} label="비밀번호" id="password" placeholder="비밀번호를 입력하세요" />
+      <Form.SubmitButton label="로그인" position="center" variant="primary" />
+    </Form>
+  );
+}

app/utils/test/__mock__/next/headers.ts

@@ -0,0 +1,6 @@
+export function cookies() {
+  return {
+    set: () => {},
+    get: () => {},
+  };
+}