From 09ef69145e75aae49b6746b0037dcb90e0ea181e Mon Sep 17 00:00:00 2001
From: gahyuun <pgh123166@naver.com>
Date: Tue, 26 Mar 2024 14:09:53 +0900
Subject: [PATCH 01/34] refactor: add group style

---
 .../lecture/taken-lecture/delete-taken-lecture-button.tsx   | 6 +++++-
 app/ui/view/molecule/grid/grid-root.tsx                     | 2 +-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/app/ui/lecture/taken-lecture/delete-taken-lecture-button.tsx b/app/ui/lecture/taken-lecture/delete-taken-lecture-button.tsx
index 1f4fd792..975e6cb9 100644
--- a/app/ui/lecture/taken-lecture/delete-taken-lecture-button.tsx
+++ b/app/ui/lecture/taken-lecture/delete-taken-lecture-button.tsx
@@ -10,5 +10,9 @@ export default function DeleteTakenLectureButton({ lectureId }: DeleteTakenLectu
   const deleteLecture = () => {
     setCustomLecture(customLecture.filter((lecture) => lecture.id !== lectureId));
   };
-  return <Button label="삭제" variant="list" data-testid="taken-lecture-delete-button" onClick={deleteLecture} />;
+  return (
+    <div className="opacity-0 group-hover:opacity-100">
+      <Button label="삭제" variant="list" data-testid="taken-lecture-delete-button" onClick={deleteLecture} />
+    </div>
+  );
 }
diff --git a/app/ui/view/molecule/grid/grid-root.tsx b/app/ui/view/molecule/grid/grid-root.tsx
index c2dd079a..4312cac0 100644
--- a/app/ui/view/molecule/grid/grid-root.tsx
+++ b/app/ui/view/molecule/grid/grid-root.tsx
@@ -8,7 +8,7 @@ type GridRootProps = {
   cols: ColType;
 };
 
-export const GridVariants = cva('grid', {
+export const GridVariants = cva('grid group', {
   variants: {
     cols: {
       3: 'grid-cols-3',

From 49174d314d962b5fc580613129aa7d2add37b6e4 Mon Sep 17 00:00:00 2001
From: gahyuun <pgh123166@naver.com>
Date: Tue, 26 Mar 2024 14:10:59 +0900
Subject: [PATCH 02/34] chore: add hover style

---
 app/ui/view/molecule/list/list-row.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/ui/view/molecule/list/list-row.tsx b/app/ui/view/molecule/list/list-row.tsx
index bdbcae09..010cea7a 100644
--- a/app/ui/view/molecule/list/list-row.tsx
+++ b/app/ui/view/molecule/list/list-row.tsx
@@ -9,7 +9,7 @@ export function ListRow({ children, textColor = 'black' }: ListRowProps) {
   return (
     <div
       className={twMerge(
-        'border-solid border-gray-300 border-b-[1px] last:border-b-0 py-4 font-medium text-lg',
+        'border-solid border-gray-300 border-b-[1px] last:border-b-0 py-4 font-medium text-lg hover:bg-gray-100',
         textColor === 'red' ? 'text-red-500' : 'text-zinc-700',
       )}
     >

From 950789d1e2a91556eed01f6bc22e4df0139a73d0 Mon Sep 17 00:00:00 2001
From: yougyung <youkyeongs@naver.com>
Date: Wed, 27 Mar 2024 18:39:07 +0900
Subject: [PATCH 03/34] =?UTF-8?q?fix:=20button=20size=20=EC=A1=B0=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/(sub-page)/layout.tsx          | 2 +-
 app/ui/view/atom/button/button.tsx | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/(sub-page)/layout.tsx b/app/(sub-page)/layout.tsx
index 5adad969..92bc14c8 100644
--- a/app/(sub-page)/layout.tsx
+++ b/app/(sub-page)/layout.tsx
@@ -1,6 +1,6 @@
 import Image from 'next/image';
 import background from '../../public/assets/background.png';
-import NavigationBar from '../ui/view/molecule/navigation-bar';
+
 interface LayoutProps {
   children: React.ReactNode;
 }
diff --git a/app/ui/view/atom/button/button.tsx b/app/ui/view/atom/button/button.tsx
index 0b48f78e..9b2a43ad 100644
--- a/app/ui/view/atom/button/button.tsx
+++ b/app/ui/view/atom/button/button.tsx
@@ -23,10 +23,10 @@ export const ButtonVariants = cva(`flex justify-center items-center`, {
     },
     size: {
       default: '',
-      xs: 'px-5 py-3 text-lg font-medium leading-5',
-      sm: 'px-12 py-3.5 text-sm font-medium leading-3',
-      md: 'px-6 py-4 text-lg font-medium leading-3',
-      lg: 'px-32 py-6 text-3xl font-medium leading-9',
+      xs: 'px-5 py-2.5 text-sm font-medium leading-5',
+      sm: 'px-10 py-2.5 text-xs font-medium leading-3',
+      md: 'px-20 py-4 text-md font-medium leading-3',
+      lg: 'px-28 py-4 text-2xl font-medium leading-9',
     },
   },
 });

From b47d953561888cf5892bd8a3df1f92933eba44a5 Mon Sep 17 00:00:00 2001
From: SeonghunYang <didtjdgns852@naver.com>
Date: Wed, 27 Mar 2024 11:52:13 +0000
Subject: [PATCH 04/34] feat: Add sign-in form component and stories

---
 .../sign-in-form/sign-in-form.stories.tsx     | 23 +++++++++++++++++++
 app/ui/user/sign-in-form/sign-in-form.tsx     | 13 +++++++++++
 2 files changed, 36 insertions(+)
 create mode 100644 app/ui/user/sign-in-form/sign-in-form.stories.tsx
 create mode 100644 app/ui/user/sign-in-form/sign-in-form.tsx

diff --git a/app/ui/user/sign-in-form/sign-in-form.stories.tsx b/app/ui/user/sign-in-form/sign-in-form.stories.tsx
new file mode 100644
index 00000000..68695d4a
--- /dev/null
+++ b/app/ui/user/sign-in-form/sign-in-form.stories.tsx
@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import SignInForm from './sign-in-form';
+
+import { userEvent, within, expect, fn, waitFor } from '@storybook/test';
+import { resetMockDB } from '@/app/mocks/db.mock';
+
+const meta = {
+  title: 'ui/user/SignInForm',
+  component: SignInForm,
+  decorators: [
+    (Story) => (
+      <div className="w-96">
+        <Story />
+      </div>
+    ),
+  ],
+} as Meta<typeof SignInForm>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
diff --git a/app/ui/user/sign-in-form/sign-in-form.tsx b/app/ui/user/sign-in-form/sign-in-form.tsx
new file mode 100644
index 00000000..1c04b351
--- /dev/null
+++ b/app/ui/user/sign-in-form/sign-in-form.tsx
@@ -0,0 +1,13 @@
+'use client';
+import Form from '../../view/molecule/form';
+import { authenticate } from '@/app/business/user/user.command';
+
+export default function SignInForm() {
+  return (
+    <Form 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>
+  );
+}

From a26c166c3fba0ce2f9b14142b9806013208e4cd9 Mon Sep 17 00:00:00 2001
From: SeonghunYang <didtjdgns852@naver.com>
Date: Wed, 27 Mar 2024 11:59:52 +0000
Subject: [PATCH 05/34] feat: Add authentication functionality for sign-in

---
 app/business/api-path.ts             |  1 +
 app/business/user/user.command.ts    | 60 +++++++++++++++++++++++++++-
 app/business/user/user.type.ts       |  5 +++
 app/business/user/user.validation.ts |  5 +++
 4 files changed, 69 insertions(+), 2 deletions(-)

diff --git a/app/business/api-path.ts b/app/business/api-path.ts
index 6bb0a801..9774731e 100644
--- a/app/business/api-path.ts
+++ b/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`,
 };
diff --git a/app/business/user/user.command.ts b/app/business/user/user.command.ts
index d56ee9fc..b248d4d2 100644
--- a/app/business/user/user.command.ts
+++ b/app/business/user/user.command.ts
@@ -2,10 +2,66 @@
 
 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 } from './user.validation';
+
+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);
+
+    // cookie
+  } 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({
diff --git a/app/business/user/user.type.ts b/app/business/user/user.type.ts
index 3bd86c27..dd307ee8 100644
--- a/app/business/user/user.type.ts
+++ b/app/business/user/user.type.ts
@@ -7,3 +7,8 @@ export interface SignUpRequestBody {
   studentNumber: string;
   engLv: string;
 }
+
+export interface SignInRequestBody {
+  authId: string;
+  password: string;
+}
diff --git a/app/business/user/user.validation.ts b/app/business/user/user.validation.ts
index a9939ebf..a640deb0 100644
--- a/app/business/user/user.validation.ts
+++ b/app/business/user/user.validation.ts
@@ -1,5 +1,10 @@
 import { z } from 'zod';
 
+export const SignInFormSchema = z.object({
+  authId: z.string(),
+  password: z.string(),
+});
+
 export const SignUpFormSchema = z
   .object({
     authId: z

From 77b0c1cbde000c456a02a7825a86117735fa0e9c Mon Sep 17 00:00:00 2001
From: SeonghunYang <didtjdgns852@naver.com>
Date: Wed, 27 Mar 2024 12:04:49 +0000
Subject: [PATCH 06/34] feat: Add sign-in functionality to user handler

---
 app/mocks/db.mock.ts                    |  7 ++++++-
 app/mocks/handlers/user-handler.mock.ts | 18 +++++++++++++++++-
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/app/mocks/db.mock.ts b/app/mocks/db.mock.ts
index 1c7788b4..4dfd9649 100644
--- a/app/mocks/db.mock.ts
+++ b/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 = {
diff --git a/app/mocks/handlers/user-handler.mock.ts b/app/mocks/handlers/user-handler.mock.ts
index c1e77efc..6e1269af 100644
--- a/app/mocks/handlers/user-handler.mock.ts
+++ b/app/mocks/handlers/user-handler.mock.ts
@@ -1,7 +1,7 @@
 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 } from '@/app/business/user/user.type';
 
 export const userHandlers = [
   http.post<never, SignUpRequestBody, never>(`${API_PATH.user}/sign-up`, async ({ request }) => {
@@ -16,4 +16,20 @@ export const userHandlers = [
 
     return HttpResponse.json({ status: 200 });
   }),
+
+  http.post<never, SignInRequestBody, never>(`${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',
+    });
+  }),
 ];

From b42608ba3c13ac0c7b3a35a4e45160e30ddc238a Mon Sep 17 00:00:00 2001
From: SeonghunYang <didtjdgns852@naver.com>
Date: Wed, 27 Mar 2024 12:16:31 +0000
Subject: [PATCH 07/34] test: Add sign-in form stories and update sign-in form
 component

---
 .../sign-in-form/sign-in-form.stories.tsx     | 52 ++++++++++++++++++-
 app/ui/user/sign-in-form/sign-in-form.tsx     |  8 ++-
 2 files changed, 57 insertions(+), 3 deletions(-)

diff --git a/app/ui/user/sign-in-form/sign-in-form.stories.tsx b/app/ui/user/sign-in-form/sign-in-form.stories.tsx
index 68695d4a..ad8596e2 100644
--- a/app/ui/user/sign-in-form/sign-in-form.stories.tsx
+++ b/app/ui/user/sign-in-form/sign-in-form.stories.tsx
@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import SignInForm from './sign-in-form';
 
 import { userEvent, within, expect, fn, waitFor } from '@storybook/test';
-import { resetMockDB } from '@/app/mocks/db.mock';
+import { resetMockDB, mockDatabase } from '@/app/mocks/db.mock';
 
 const meta = {
   title: 'ui/user/SignInForm',
@@ -15,9 +15,59 @@ const meta = {
       </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();
+    });
+  },
+};
diff --git a/app/ui/user/sign-in-form/sign-in-form.tsx b/app/ui/user/sign-in-form/sign-in-form.tsx
index 1c04b351..e0e9d761 100644
--- a/app/ui/user/sign-in-form/sign-in-form.tsx
+++ b/app/ui/user/sign-in-form/sign-in-form.tsx
@@ -2,9 +2,13 @@
 import Form from '../../view/molecule/form';
 import { authenticate } from '@/app/business/user/user.command';
 
-export default function SignInForm() {
+interface SignInFormProps {
+  onNext?: () => void;
+}
+
+export default function SignInForm({ onNext }: SignInFormProps) {
   return (
-    <Form id="로그인" action={authenticate}>
+    <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" />

From 1b9b3c2aae5644125ac73739ab5c87693838de30 Mon Sep 17 00:00:00 2001
From: SeonghunYang <didtjdgns852@naver.com>
Date: Wed, 27 Mar 2024 12:49:52 +0000
Subject: [PATCH 08/34] feat: Add SignInResponse interface to user.type.ts and
 update user-handler.mock.ts

---
 app/business/user/user.type.ts          |  5 ++++
 app/mocks/handlers/user-handler.mock.ts | 39 +++++++++++++++----------
 2 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/app/business/user/user.type.ts b/app/business/user/user.type.ts
index dd307ee8..ff5a5eb3 100644
--- a/app/business/user/user.type.ts
+++ b/app/business/user/user.type.ts
@@ -12,3 +12,8 @@ export interface SignInRequestBody {
   authId: string;
   password: string;
 }
+
+export interface SignInResponse {
+  accessToken: string;
+  refreshToken: string;
+}
diff --git a/app/mocks/handlers/user-handler.mock.ts b/app/mocks/handlers/user-handler.mock.ts
index 6e1269af..dc5bd575 100644
--- a/app/mocks/handlers/user-handler.mock.ts
+++ b/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, SignInRequestBody } 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 }) => {
@@ -17,19 +18,25 @@ export const userHandlers = [
     return HttpResponse.json({ status: 200 });
   }),
 
-  http.post<never, SignInRequestBody, never>(`${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',
-    });
-  }),
+  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',
+      });
+    },
+  ),
 ];

From b0c0a633254ea9537304d69dcf1d54035bc1b5cc Mon Sep 17 00:00:00 2001
From: SeonghunYang <didtjdgns852@naver.com>
Date: Wed, 27 Mar 2024 13:20:58 +0000
Subject: [PATCH 09/34] feat: Add SignInResponseSchema to user.command.ts

---
 app/business/user/user.command.ts    | 26 ++++++++++++++++++++++++--
 app/business/user/user.type.ts       |  8 ++++----
 app/business/user/user.validation.ts |  5 +++++
 3 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/app/business/user/user.command.ts b/app/business/user/user.command.ts
index b248d4d2..ace15408 100644
--- a/app/business/user/user.command.ts
+++ b/app/business/user/user.command.ts
@@ -5,7 +5,18 @@ import { API_PATH } from '../api-path';
 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, SignInFormSchema } 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({
@@ -39,7 +50,18 @@ export async function authenticate(prevState: FormState, formData: FormData): Pr
 
     httpErrorHandler(response, result);
 
-    // cookie
+    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) {
       // 잘못된 요청 처리 로직
diff --git a/app/business/user/user.type.ts b/app/business/user/user.type.ts
index ff5a5eb3..c453cbc5 100644
--- a/app/business/user/user.type.ts
+++ b/app/business/user/user.type.ts
@@ -1,6 +1,9 @@
 // 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;
@@ -13,7 +16,4 @@ export interface SignInRequestBody {
   password: string;
 }
 
-export interface SignInResponse {
-  accessToken: string;
-  refreshToken: string;
-}
+export type SignInResponse = z.infer<typeof SignInResponseSchema>;
diff --git a/app/business/user/user.validation.ts b/app/business/user/user.validation.ts
index a640deb0..4e8573d7 100644
--- a/app/business/user/user.validation.ts
+++ b/app/business/user/user.validation.ts
@@ -5,6 +5,11 @@ export const SignInFormSchema = z.object({
   password: z.string(),
 });
 
+export const SignInResponseSchema = z.object({
+  accessToken: z.string(),
+  refreshToken: z.string(),
+});
+
 export const SignUpFormSchema = z
   .object({
     authId: z

From 8a8dcd19b01129d6213af7c3f9176a2ddc67d33f Mon Sep 17 00:00:00 2001
From: SeonghunYang <didtjdgns852@naver.com>
Date: Wed, 27 Mar 2024 13:55:05 +0000
Subject: [PATCH 10/34] feat: Add aliases and new files for mocking in
 storybook

---
 .storybook/main.ts                      |  1 +
 app/(sub-page)/sign-in/page.tsx         | 11 +++++++++++
 app/utils/test/__mock__/next/headers.ts |  6 ++++++
 3 files changed, 18 insertions(+)
 create mode 100644 app/(sub-page)/sign-in/page.tsx
 create mode 100644 app/utils/test/__mock__/next/headers.ts

diff --git a/.storybook/main.ts b/.storybook/main.ts
index 56aad86f..18cba9d3 100644
--- a/.storybook/main.ts
+++ b/.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;
diff --git a/app/(sub-page)/sign-in/page.tsx b/app/(sub-page)/sign-in/page.tsx
new file mode 100644
index 00000000..dbdb34a8
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/app/utils/test/__mock__/next/headers.ts b/app/utils/test/__mock__/next/headers.ts
new file mode 100644
index 00000000..31069b15
--- /dev/null
+++ b/app/utils/test/__mock__/next/headers.ts
@@ -0,0 +1,6 @@
+export function cookies() {
+  return {
+    set: () => {},
+    get: () => {},
+  };
+}

From b8a1c065b46f992ff0b48abdabd4145cdf5391ee Mon Sep 17 00:00:00 2001
From: SeonghunYang <didtjdgns852@naver.com>
Date: Wed, 27 Mar 2024 14:28:42 +0000
Subject: [PATCH 11/34] feat: Update size prop value in FormSubmitButton
 component

---
 app/ui/view/molecule/form/form-submit-button.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/ui/view/molecule/form/form-submit-button.tsx b/app/ui/view/molecule/form/form-submit-button.tsx
index 0ea53254..cd3b6a5d 100644
--- a/app/ui/view/molecule/form/form-submit-button.tsx
+++ b/app/ui/view/molecule/form/form-submit-button.tsx
@@ -15,7 +15,7 @@ export function FormSubmitButton({
   label,
   position = 'right',
   variant = 'primary',
-  size = 'sm',
+  size = 'md',
 }: FormSubmitButtonProps) {
   const { formId } = useContext(FormContext);
   const { pending } = useFormStatus();

From 1d46ae5697eac4e214e90eef368e9c895ba2bed5 Mon Sep 17 00:00:00 2001
From: SeonghunYang <didtjdgns852@naver.com>
Date: Wed, 27 Mar 2024 15:17:21 +0000
Subject: [PATCH 12/34] fix: clear unnecessary annotation

---
 app/(sub-page)/sign-in/page.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/(sub-page)/sign-in/page.tsx b/app/(sub-page)/sign-in/page.tsx
index dbdb34a8..d478e140 100644
--- a/app/(sub-page)/sign-in/page.tsx
+++ b/app/(sub-page)/sign-in/page.tsx
@@ -1,7 +1,6 @@
 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]">

From af5ce65b3892ee14fffcebfaf5dc7f1e5c0569d2 Mon Sep 17 00:00:00 2001
From: gahyuun <pgh123166@naver.com>
Date: Thu, 28 Mar 2024 00:18:49 +0900
Subject: [PATCH 13/34] feat: implement my page

---
 app/(sub-page)/my/page.tsx | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 app/(sub-page)/my/page.tsx

diff --git a/app/(sub-page)/my/page.tsx b/app/(sub-page)/my/page.tsx
new file mode 100644
index 00000000..e7a67ab2
--- /dev/null
+++ b/app/(sub-page)/my/page.tsx
@@ -0,0 +1,16 @@
+import LectureSearch from '@/app/ui/lecture/lecture-search';
+import TakenLecture from '@/app/ui/lecture/taken-lecture';
+import ContentContainer from '@/app/ui/view/atom/content-container';
+import React from 'react';
+
+export default function Page() {
+  return (
+    <ContentContainer className="flex">
+      <div className="w-[30%]">정보칸</div>
+      <div className="w-[70%] px-[20px]">
+        <LectureSearch />
+        <TakenLecture />
+      </div>
+    </ContentContainer>
+  );
+}

From 9c4bb78cab0a72015eb234281b6dbffae08576cc Mon Sep 17 00:00:00 2001
From: gahyuun <pgh123166@naver.com>
Date: Thu, 28 Mar 2024 00:19:44 +0900
Subject: [PATCH 14/34] refactor: change button style

---
 .../lecture/taken-lecture/delete-taken-lecture-button.tsx | 2 +-
 app/ui/lecture/taken-lecture/taken-lecture-label.tsx      | 8 ++++----
 app/ui/view/atom/button/button.tsx                        | 8 ++++----
 app/ui/view/atom/label-container/label-container.tsx      | 2 +-
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/app/ui/lecture/taken-lecture/delete-taken-lecture-button.tsx b/app/ui/lecture/taken-lecture/delete-taken-lecture-button.tsx
index 975e6cb9..94423861 100644
--- a/app/ui/lecture/taken-lecture/delete-taken-lecture-button.tsx
+++ b/app/ui/lecture/taken-lecture/delete-taken-lecture-button.tsx
@@ -12,7 +12,7 @@ export default function DeleteTakenLectureButton({ lectureId }: DeleteTakenLectu
   };
   return (
     <div className="opacity-0 group-hover:opacity-100">
-      <Button label="삭제" variant="list" data-testid="taken-lecture-delete-button" onClick={deleteLecture} />
+      <Button label="삭제" variant="text" size="xs" data-testid="taken-lecture-delete-button" onClick={deleteLecture} />
     </div>
   );
 }
diff --git a/app/ui/lecture/taken-lecture/taken-lecture-label.tsx b/app/ui/lecture/taken-lecture/taken-lecture-label.tsx
index 614e5e64..126c6107 100644
--- a/app/ui/lecture/taken-lecture/taken-lecture-label.tsx
+++ b/app/ui/lecture/taken-lecture/taken-lecture-label.tsx
@@ -29,20 +29,20 @@ export default function TakenLectureLabel({ data }: TakenLectureLabelProps) {
         <div className="flex gap-2">
           {isCustomizing ? (
             <>
-              <Button label="저장하기" variant="primary" size="md" />
-              <Button label="취소하기" variant="secondary" size="md" onClick={cancelCustomizing} />
+              <Button label="저장하기" variant="primary" size="xs" />
+              <Button label="취소하기" variant="secondary" size="xs" onClick={cancelCustomizing} />
             </>
           ) : (
             <>
               <Button
                 label="커스텀하기"
                 variant="secondary"
-                size="md"
+                size="xs"
                 onClick={startCustomizing}
                 data-testid="custom-button"
               />
               <Link href="/file-upload">
-                <Button label="업데이트" variant="secondary" size="md" />
+                <Button label="업데이트" variant="secondary" size="xs" />
               </Link>
             </>
           )}
diff --git a/app/ui/view/atom/button/button.tsx b/app/ui/view/atom/button/button.tsx
index 0b48f78e..9b2a43ad 100644
--- a/app/ui/view/atom/button/button.tsx
+++ b/app/ui/view/atom/button/button.tsx
@@ -23,10 +23,10 @@ export const ButtonVariants = cva(`flex justify-center items-center`, {
     },
     size: {
       default: '',
-      xs: 'px-5 py-3 text-lg font-medium leading-5',
-      sm: 'px-12 py-3.5 text-sm font-medium leading-3',
-      md: 'px-6 py-4 text-lg font-medium leading-3',
-      lg: 'px-32 py-6 text-3xl font-medium leading-9',
+      xs: 'px-5 py-2.5 text-sm font-medium leading-5',
+      sm: 'px-10 py-2.5 text-xs font-medium leading-3',
+      md: 'px-20 py-4 text-md font-medium leading-3',
+      lg: 'px-28 py-4 text-2xl font-medium leading-9',
     },
   },
 });
diff --git a/app/ui/view/atom/label-container/label-container.tsx b/app/ui/view/atom/label-container/label-container.tsx
index deaca120..d625a5b6 100644
--- a/app/ui/view/atom/label-container/label-container.tsx
+++ b/app/ui/view/atom/label-container/label-container.tsx
@@ -8,7 +8,7 @@ interface LabelContainerProps {
 export default function LabelContainer({ label, rightElement }: LabelContainerProps) {
   return (
     <div className="flex justify-between items-center w-full">
-      <div className="rounded-[100px] bg-light-blue-6 p-2.5 text-white text-lg font-bold">{label}</div>
+      <div className="rounded-[100px] bg-light-blue-6 p-2.5 text-white text-md font-semibold">{label}</div>
       {rightElement}
     </div>
   );

From d7ef74c6b3688a5164528092343a719be73e4820 Mon Sep 17 00:00:00 2001
From: gahyuun <pgh123166@naver.com>
Date: Thu, 28 Mar 2024 00:22:08 +0900
Subject: [PATCH 15/34] refactor: change table style

---
 app/ui/lecture/taken-lecture/index.tsx      | 1 -
 app/ui/view/molecule/grid/grid-root.tsx     | 2 +-
 app/ui/view/molecule/list/list-row.tsx      | 2 +-
 app/ui/view/molecule/table/table-header.tsx | 2 +-
 4 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/app/ui/lecture/taken-lecture/index.tsx b/app/ui/lecture/taken-lecture/index.tsx
index 8155ea21..04df389f 100644
--- a/app/ui/lecture/taken-lecture/index.tsx
+++ b/app/ui/lecture/taken-lecture/index.tsx
@@ -6,7 +6,6 @@ export default async function TakenLecture() {
   const data = await fetchTakenLectures();
   return (
     <div className="flex flex-col gap-2">
-      {/* w-[800px]은 w-full로 변경 예정  */}
       <TakenLectureLabel data={data.takenLectures} />
       <TakenLectureList data={data.takenLectures} />
     </div>
diff --git a/app/ui/view/molecule/grid/grid-root.tsx b/app/ui/view/molecule/grid/grid-root.tsx
index 4312cac0..c2dd079a 100644
--- a/app/ui/view/molecule/grid/grid-root.tsx
+++ b/app/ui/view/molecule/grid/grid-root.tsx
@@ -8,7 +8,7 @@ type GridRootProps = {
   cols: ColType;
 };
 
-export const GridVariants = cva('grid group', {
+export const GridVariants = cva('grid', {
   variants: {
     cols: {
       3: 'grid-cols-3',
diff --git a/app/ui/view/molecule/list/list-row.tsx b/app/ui/view/molecule/list/list-row.tsx
index 010cea7a..093296e9 100644
--- a/app/ui/view/molecule/list/list-row.tsx
+++ b/app/ui/view/molecule/list/list-row.tsx
@@ -9,7 +9,7 @@ export function ListRow({ children, textColor = 'black' }: ListRowProps) {
   return (
     <div
       className={twMerge(
-        'border-solid border-gray-300 border-b-[1px] last:border-b-0 py-4 font-medium text-lg hover:bg-gray-100',
+        'border-solid border-gray-300 border-b-[1px] last:border-b-0 py-4 font-medium text-md hover:bg-gray-100 group hover:first:rounded-t-xl hover:last:rounded-b-xl',
         textColor === 'red' ? 'text-red-500' : 'text-zinc-700',
       )}
     >
diff --git a/app/ui/view/molecule/table/table-header.tsx b/app/ui/view/molecule/table/table-header.tsx
index fb9e6e2f..40a91d84 100644
--- a/app/ui/view/molecule/table/table-header.tsx
+++ b/app/ui/view/molecule/table/table-header.tsx
@@ -8,7 +8,7 @@ interface TableHeaderProps {
 
 export function TableHeader({ cols, headerInfo }: TableHeaderProps) {
   return (
-    <div className="text-light-blue-6 leading-4 text-lg font-bold bg-light-blue-1 py-5 rounded-[100px]">
+    <div className="text-light-blue-6 leading-4 text-md font-bold bg-light-blue-1 py-5 rounded-[100px]">
       <Grid cols={cols}>
         {headerInfo.map((info) => (
           <Grid.Column key={info}>{info}</Grid.Column>

From 1ab18abc50e55e6d36ff56c881b237d515e259a6 Mon Sep 17 00:00:00 2001
From: gahyuun <pgh123166@naver.com>
Date: Thu, 28 Mar 2024 01:31:11 +0900
Subject: [PATCH 16/34] test: delete test code

---
 .../ui/lecture/taken-lecture-list.test.tsx    | 34 -------------------
 1 file changed, 34 deletions(-)

diff --git a/app/__test__/ui/lecture/taken-lecture-list.test.tsx b/app/__test__/ui/lecture/taken-lecture-list.test.tsx
index 2e35e816..d86896eb 100644
--- a/app/__test__/ui/lecture/taken-lecture-list.test.tsx
+++ b/app/__test__/ui/lecture/taken-lecture-list.test.tsx
@@ -1,43 +1,9 @@
-import LectureSearch from '@/app/ui/lecture/lecture-search';
 import TakenLecture from '@/app/ui/lecture/taken-lecture';
 import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
 
 describe('Taken lecture list', () => {
   it('기이수 과목 리스트를 보여준다.', async () => {
     render(await TakenLecture());
     expect(await screen.findByTestId('table-data'));
   });
-
-  it('커스텀하기 버튼을 클릭하면 기이수 과목 리스트가 변경되며 과목 검색 컴포넌트가 렌더링된다.', async () => {
-    //given
-    render(await TakenLecture());
-    render(<LectureSearch />);
-
-    //when
-    const customButton = await screen.findByTestId('custom-button');
-    await userEvent.click(customButton);
-
-    //then
-    const deleteButton = await screen.findAllByTestId('taken-lecture-delete-button');
-    expect(deleteButton[0]).toBeInTheDocument();
-
-    const lectureSearchComponent = await screen.findByTestId('lecture-search-component');
-    expect(lectureSearchComponent).toBeInTheDocument();
-  });
-
-  it('커스텀 시 삭제 버튼을 클릭하면 해당하는 lecture가 사라진다', async () => {
-    //given
-    render(await TakenLecture());
-
-    const customButton = await screen.findByTestId('custom-button');
-    await userEvent.click(customButton);
-
-    //when
-    const deleteButton = await screen.findAllByTestId('taken-lecture-delete-button');
-    await userEvent.click(deleteButton[0]);
-
-    //then
-    expect(screen.queryByText('딥러닝')).not.toBeInTheDocument();
-  });
 });

From ba77e60fda25a11898d188e5cfb05fee49d5468a Mon Sep 17 00:00:00 2001
From: gahyuun <pgh123166@naver.com>
Date: Thu, 28 Mar 2024 01:32:17 +0900
Subject: [PATCH 17/34] refactor: delete custom logic

---
 .../delete-taken-lecture-button.tsx           |  6 +--
 app/ui/lecture/taken-lecture/index.tsx        |  2 +-
 .../taken-lecture/taken-lecture-label.tsx     | 43 +++----------------
 .../taken-lecture/taken-lecture-list.tsx      | 31 +++----------
 4 files changed, 13 insertions(+), 69 deletions(-)

diff --git a/app/ui/lecture/taken-lecture/delete-taken-lecture-button.tsx b/app/ui/lecture/taken-lecture/delete-taken-lecture-button.tsx
index 94423861..525f1df7 100644
--- a/app/ui/lecture/taken-lecture/delete-taken-lecture-button.tsx
+++ b/app/ui/lecture/taken-lecture/delete-taken-lecture-button.tsx
@@ -1,14 +1,12 @@
-import { useAtom } from 'jotai';
+'use client';
 import Button from '../../view/atom/button/button';
-import { customLectureAtom } from '@/app/store/custom-taken-lecture';
 
 interface DeleteTakenLectureButtonProps {
   lectureId: number;
 }
 export default function DeleteTakenLectureButton({ lectureId }: DeleteTakenLectureButtonProps) {
-  const [customLecture, setCustomLecture] = useAtom(customLectureAtom);
   const deleteLecture = () => {
-    setCustomLecture(customLecture.filter((lecture) => lecture.id !== lectureId));
+    // 삭제 api 연결 예정
   };
   return (
     <div className="opacity-0 group-hover:opacity-100">
diff --git a/app/ui/lecture/taken-lecture/index.tsx b/app/ui/lecture/taken-lecture/index.tsx
index 04df389f..83c65ca2 100644
--- a/app/ui/lecture/taken-lecture/index.tsx
+++ b/app/ui/lecture/taken-lecture/index.tsx
@@ -6,7 +6,7 @@ export default async function TakenLecture() {
   const data = await fetchTakenLectures();
   return (
     <div className="flex flex-col gap-2">
-      <TakenLectureLabel data={data.takenLectures} />
+      <TakenLectureLabel />
       <TakenLectureList data={data.takenLectures} />
     </div>
   );
diff --git a/app/ui/lecture/taken-lecture/taken-lecture-label.tsx b/app/ui/lecture/taken-lecture/taken-lecture-label.tsx
index 126c6107..f90123a0 100644
--- a/app/ui/lecture/taken-lecture/taken-lecture-label.tsx
+++ b/app/ui/lecture/taken-lecture/taken-lecture-label.tsx
@@ -2,50 +2,17 @@
 import Link from 'next/link';
 import Button from '../../view/atom/button/button';
 import LabelContainer from '../../view/atom/label-container/label-container';
-import { useAtom, useSetAtom } from 'jotai';
-import { customLectureAtom, isCustomizingAtom } from '@/app/store/custom-taken-lecture';
-import { LectureInfo } from '@/app/type/lecture';
-
-interface TakenLectureLabelProps {
-  data: LectureInfo[];
-}
-export default function TakenLectureLabel({ data }: TakenLectureLabelProps) {
-  const [isCustomizing, setIsCustomizing] = useAtom(isCustomizingAtom);
-  const setCustomLecture = useSetAtom(customLectureAtom);
-
-  const startCustomizing = () => {
-    setIsCustomizing(true);
-  };
-
-  const cancelCustomizing = () => {
-    setIsCustomizing(false);
-    setCustomLecture(data);
-  };
 
+export default function TakenLectureLabel() {
   return (
     <LabelContainer
       label="내 기이수 과목"
       rightElement={
         <div className="flex gap-2">
-          {isCustomizing ? (
-            <>
-              <Button label="저장하기" variant="primary" size="xs" />
-              <Button label="취소하기" variant="secondary" size="xs" onClick={cancelCustomizing} />
-            </>
-          ) : (
-            <>
-              <Button
-                label="커스텀하기"
-                variant="secondary"
-                size="xs"
-                onClick={startCustomizing}
-                data-testid="custom-button"
-              />
-              <Link href="/file-upload">
-                <Button label="업데이트" variant="secondary" size="xs" />
-              </Link>
-            </>
-          )}
+          <Button label="과목 추가" variant="secondary" size="xs" data-testid="lecture-add-button" />
+          <Link href="/file-upload">
+            <Button label="성적표 재업로드" variant="secondary" size="xs" />
+          </Link>
         </div>
       }
     />
diff --git a/app/ui/lecture/taken-lecture/taken-lecture-list.tsx b/app/ui/lecture/taken-lecture/taken-lecture-list.tsx
index 3ced3674..a4018953 100644
--- a/app/ui/lecture/taken-lecture/taken-lecture-list.tsx
+++ b/app/ui/lecture/taken-lecture/taken-lecture-list.tsx
@@ -1,10 +1,5 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-'use client';
 import { Table } from '../../view/molecule/table';
-import { useEffect } from 'react';
 import { LectureInfo } from '@/app/type/lecture';
-import { useAtom } from 'jotai';
-import { customLectureAtom, isCustomizingAtom } from '@/app/store/custom-taken-lecture';
 import DeleteTakenLectureButton from './delete-taken-lecture-button';
 
 const headerInfo = ['수강년도', '수강학기', '과목코드', '과목명', '학점'];
@@ -14,27 +9,11 @@ interface TakenLectureListProps {
 }
 
 export default function TakenLectureList({ data }: TakenLectureListProps) {
-  const [isCustomizing, setIsCustomizing] = useAtom(isCustomizingAtom);
-  const [customLecture, setCustomLecture] = useAtom(customLectureAtom);
-
-  useEffect(() => {
-    return () => {
-      setCustomLecture(data);
-      setIsCustomizing(false);
-    };
-  }, []);
-
   return (
-    <>
-      {isCustomizing ? (
-        <Table
-          headerInfo={headerInfo}
-          data={customLecture}
-          renderActionButton={(id: number) => <DeleteTakenLectureButton lectureId={id} />}
-        />
-      ) : (
-        <Table headerInfo={headerInfo} data={data} />
-      )}
-    </>
+    <Table
+      headerInfo={headerInfo}
+      data={data}
+      renderActionButton={(id: number) => <DeleteTakenLectureButton lectureId={id} />}
+    />
   );
 }

From bf10b9946bfbb79125f6e722baf43b7b7fc212c0 Mon Sep 17 00:00:00 2001
From: gahyuun <pgh123166@naver.com>
Date: Thu, 28 Mar 2024 01:39:48 +0900
Subject: [PATCH 18/34] refactor: change grid style

---
 app/ui/view/molecule/grid/grid-root.tsx | 3 ++-
 app/ui/view/molecule/table/index.tsx    | 6 +++---
 tailwind.config.ts                      | 3 +++
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/app/ui/view/molecule/grid/grid-root.tsx b/app/ui/view/molecule/grid/grid-root.tsx
index c2dd079a..c1721199 100644
--- a/app/ui/view/molecule/grid/grid-root.tsx
+++ b/app/ui/view/molecule/grid/grid-root.tsx
@@ -1,7 +1,7 @@
 import { cva } from 'class-variance-authority';
 import { ReactNode } from 'react';
 
-export type ColType = 3 | 4 | 5 | 6;
+export type ColType = 3 | 4 | 5 | 6 | 'custom';
 
 type GridRootProps = {
   children: ReactNode;
@@ -15,6 +15,7 @@ export const GridVariants = cva('grid', {
       4: 'grid-cols-4',
       5: 'grid-cols-5',
       6: 'grid-cols-6',
+      custom: 'grid-cols-custom',
     },
   },
 });
diff --git a/app/ui/view/molecule/table/index.tsx b/app/ui/view/molecule/table/index.tsx
index 68ceef12..ba608dd6 100644
--- a/app/ui/view/molecule/table/index.tsx
+++ b/app/ui/view/molecule/table/index.tsx
@@ -10,15 +10,15 @@ interface TableProps<T extends ListRow> {
   renderActionButton?: (id: number) => JSX.Element;
 }
 
-function isCol(cols: number): cols is ColType {
-  if (cols === 3 || cols === 4 || cols === 5 || cols === 6) {
+function isCol(cols: number | string): cols is ColType {
+  if (cols === 3 || cols === 4 || cols === 5 || cols === 6 || cols === 'custom') {
     return true;
   }
   return false;
 }
 
 export function Table<T extends ListRow>({ data, headerInfo, renderActionButton }: TableProps<T>) {
-  const cols = renderActionButton ? headerInfo.length + 1 : headerInfo.length;
+  const cols = renderActionButton ? 'custom' : headerInfo.length;
 
   const render = (item: T, index: number) => {
     return (
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 7208b560..d011422d 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -51,6 +51,9 @@ const config: Config = {
         3: '300', // upper all
       },
     },
+    gridTemplateColumns: {
+      custom: 'repeat(5, 1fr) 0.6fr',
+    },
   },
   plugins: [headlessui, require('tailwindcss-animate')],
 };

From 4e41643d93371f3a2d54f2dd91e78cb36c091e34 Mon Sep 17 00:00:00 2001
From: gahyuun <pgh123166@naver.com>
Date: Thu, 28 Mar 2024 12:35:36 +0900
Subject: [PATCH 19/34] style: implement table pc responsive design

---
 .../lecture/taken-lecture/delete-taken-lecture-button.tsx | 8 +++++++-
 app/ui/view/atom/label-container/label-container.tsx      | 4 +++-
 app/ui/view/molecule/list/list-row.tsx                    | 2 +-
 app/ui/view/molecule/table/table-header.tsx               | 2 +-
 4 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/app/ui/lecture/taken-lecture/delete-taken-lecture-button.tsx b/app/ui/lecture/taken-lecture/delete-taken-lecture-button.tsx
index 525f1df7..deb2ccc4 100644
--- a/app/ui/lecture/taken-lecture/delete-taken-lecture-button.tsx
+++ b/app/ui/lecture/taken-lecture/delete-taken-lecture-button.tsx
@@ -10,7 +10,13 @@ export default function DeleteTakenLectureButton({ lectureId }: DeleteTakenLectu
   };
   return (
     <div className="opacity-0 group-hover:opacity-100">
-      <Button label="삭제" variant="text" size="xs" data-testid="taken-lecture-delete-button" onClick={deleteLecture} />
+      <Button
+        label="삭제"
+        variant="text"
+        size="default"
+        data-testid="taken-lecture-delete-button"
+        onClick={deleteLecture}
+      />
     </div>
   );
 }
diff --git a/app/ui/view/atom/label-container/label-container.tsx b/app/ui/view/atom/label-container/label-container.tsx
index d625a5b6..22068cfc 100644
--- a/app/ui/view/atom/label-container/label-container.tsx
+++ b/app/ui/view/atom/label-container/label-container.tsx
@@ -8,7 +8,9 @@ interface LabelContainerProps {
 export default function LabelContainer({ label, rightElement }: LabelContainerProps) {
   return (
     <div className="flex justify-between items-center w-full">
-      <div className="rounded-[100px] bg-light-blue-6 p-2.5 text-white text-md font-semibold">{label}</div>
+      <div className="rounded-[100px] bg-light-blue-6 p-2 xl:p-2.5 text-white lg:text-sm xl:text-md 2xl:text-lg font-semibold">
+        {label}
+      </div>
       {rightElement}
     </div>
   );
diff --git a/app/ui/view/molecule/list/list-row.tsx b/app/ui/view/molecule/list/list-row.tsx
index 093296e9..2f9acb1b 100644
--- a/app/ui/view/molecule/list/list-row.tsx
+++ b/app/ui/view/molecule/list/list-row.tsx
@@ -9,7 +9,7 @@ export function ListRow({ children, textColor = 'black' }: ListRowProps) {
   return (
     <div
       className={twMerge(
-        'border-solid border-gray-300 border-b-[1px] last:border-b-0 py-4 font-medium text-md hover:bg-gray-100 group hover:first:rounded-t-xl hover:last:rounded-b-xl',
+        'border-solid border-gray-300 border-b-[1px] last:border-b-0 py-4 font-medium text-sm xl:text-base 2xl:text-lg hover:bg-gray-100 group hover:first:rounded-t-xl hover:last:rounded-b-xl',
         textColor === 'red' ? 'text-red-500' : 'text-zinc-700',
       )}
     >
diff --git a/app/ui/view/molecule/table/table-header.tsx b/app/ui/view/molecule/table/table-header.tsx
index 40a91d84..5bf875b4 100644
--- a/app/ui/view/molecule/table/table-header.tsx
+++ b/app/ui/view/molecule/table/table-header.tsx
@@ -8,7 +8,7 @@ interface TableHeaderProps {
 
 export function TableHeader({ cols, headerInfo }: TableHeaderProps) {
   return (
-    <div className="text-light-blue-6 leading-4 text-md font-bold bg-light-blue-1 py-5 rounded-[100px]">
+    <div className="text-light-blue-6 leading-4 text-sm xl:text-base 2xl:text-lg font-medium xl:font-semibold bg-light-blue-1 py-3 xl:py-4 rounded-[100px]">
       <Grid cols={cols}>
         {headerInfo.map((info) => (
           <Grid.Column key={info}>{info}</Grid.Column>

From 8742ce54534e72473fd5b8ae72be142e8fb3288a Mon Sep 17 00:00:00 2001
From: gahyuun <pgh123166@naver.com>
Date: Thu, 28 Mar 2024 13:45:56 +0900
Subject: [PATCH 20/34] chore: change custom grid style

---
 app/ui/view/molecule/grid/grid-root.tsx     | 4 ++--
 app/ui/view/molecule/table/index.tsx        | 5 ++---
 app/ui/view/molecule/table/table-header.tsx | 2 +-
 tailwind.config.ts                          | 6 +++---
 4 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/app/ui/view/molecule/grid/grid-root.tsx b/app/ui/view/molecule/grid/grid-root.tsx
index c1721199..75972661 100644
--- a/app/ui/view/molecule/grid/grid-root.tsx
+++ b/app/ui/view/molecule/grid/grid-root.tsx
@@ -1,7 +1,7 @@
 import { cva } from 'class-variance-authority';
 import { ReactNode } from 'react';
 
-export type ColType = 3 | 4 | 5 | 6 | 'custom';
+export type ColType = 3 | 4 | 5 | 6 | 'render-button';
 
 type GridRootProps = {
   children: ReactNode;
@@ -15,7 +15,7 @@ export const GridVariants = cva('grid', {
       4: 'grid-cols-4',
       5: 'grid-cols-5',
       6: 'grid-cols-6',
-      custom: 'grid-cols-custom',
+      'render-button': 'grid-cols-render-button',
     },
   },
 });
diff --git a/app/ui/view/molecule/table/index.tsx b/app/ui/view/molecule/table/index.tsx
index ba608dd6..0d447a87 100644
--- a/app/ui/view/molecule/table/index.tsx
+++ b/app/ui/view/molecule/table/index.tsx
@@ -11,15 +11,14 @@ interface TableProps<T extends ListRow> {
 }
 
 function isCol(cols: number | string): cols is ColType {
-  if (cols === 3 || cols === 4 || cols === 5 || cols === 6 || cols === 'custom') {
+  if (cols === 3 || cols === 4 || cols === 5 || cols === 6 || cols === 'render-button') {
     return true;
   }
   return false;
 }
 
 export function Table<T extends ListRow>({ data, headerInfo, renderActionButton }: TableProps<T>) {
-  const cols = renderActionButton ? 'custom' : headerInfo.length;
-
+  const cols = renderActionButton ? 'render-button' : headerInfo.length;
   const render = (item: T, index: number) => {
     return (
       <List.Row key={index}>
diff --git a/app/ui/view/molecule/table/table-header.tsx b/app/ui/view/molecule/table/table-header.tsx
index 5bf875b4..ca1fa5b3 100644
--- a/app/ui/view/molecule/table/table-header.tsx
+++ b/app/ui/view/molecule/table/table-header.tsx
@@ -8,7 +8,7 @@ interface TableHeaderProps {
 
 export function TableHeader({ cols, headerInfo }: TableHeaderProps) {
   return (
-    <div className="text-light-blue-6 leading-4 text-sm xl:text-base 2xl:text-lg font-medium xl:font-semibold bg-light-blue-1 py-3 xl:py-4 rounded-[100px]">
+    <div className="text-light-blue-6 leading-4 text-sm xl:text-base 2xl:text-lg font-medium xl:font-semibold bg-light-blue-1 py-3 rounded-[100px]">
       <Grid cols={cols}>
         {headerInfo.map((info) => (
           <Grid.Column key={info}>{info}</Grid.Column>
diff --git a/tailwind.config.ts b/tailwind.config.ts
index d011422d..8a49530a 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -50,9 +50,9 @@ const config: Config = {
         2: '200', // upper content
         3: '300', // upper all
       },
-    },
-    gridTemplateColumns: {
-      custom: 'repeat(5, 1fr) 0.6fr',
+      gridTemplateColumns: {
+        'render-button': 'repeat(5, 1fr) 0.6fr',
+      },
     },
   },
   plugins: [headlessui, require('tailwindcss-animate')],

From cb70e3d262ca967fbd48f4dc573bafccdbdf56af Mon Sep 17 00:00:00 2001
From: gahyuun <pgh123166@naver.com>
Date: Thu, 28 Mar 2024 13:46:18 +0900
Subject: [PATCH 21/34] feat: implement table mobile responsive design

---
 app/(sub-page)/my/page.tsx                    |  4 ++--
 .../ui/lecture/taken-lecture-list.test.tsx    |  2 +-
 .../taken-lecture/taken-lecture-list.tsx      | 19 ++++++++++++++-----
 app/ui/view/atom/content-container.tsx        |  2 +-
 .../atom/label-container/label-container.tsx  |  2 +-
 5 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/app/(sub-page)/my/page.tsx b/app/(sub-page)/my/page.tsx
index e7a67ab2..76298a09 100644
--- a/app/(sub-page)/my/page.tsx
+++ b/app/(sub-page)/my/page.tsx
@@ -6,8 +6,8 @@ import React from 'react';
 export default function Page() {
   return (
     <ContentContainer className="flex">
-      <div className="w-[30%]">정보칸</div>
-      <div className="w-[70%] px-[20px]">
+      <div className="hidden lg:w-[30%] lg:block">정보칸</div>
+      <div className="w-full lg:w-[70%] lg:px-[20px]">
         <LectureSearch />
         <TakenLecture />
       </div>
diff --git a/app/__test__/ui/lecture/taken-lecture-list.test.tsx b/app/__test__/ui/lecture/taken-lecture-list.test.tsx
index d86896eb..9dc47845 100644
--- a/app/__test__/ui/lecture/taken-lecture-list.test.tsx
+++ b/app/__test__/ui/lecture/taken-lecture-list.test.tsx
@@ -4,6 +4,6 @@ import { render, screen } from '@testing-library/react';
 describe('Taken lecture list', () => {
   it('기이수 과목 리스트를 보여준다.', async () => {
     render(await TakenLecture());
-    expect(await screen.findByTestId('table-data'));
+    expect(await screen.findAllByTestId('table-data'));
   });
 });
diff --git a/app/ui/lecture/taken-lecture/taken-lecture-list.tsx b/app/ui/lecture/taken-lecture/taken-lecture-list.tsx
index a4018953..b77e3a5f 100644
--- a/app/ui/lecture/taken-lecture/taken-lecture-list.tsx
+++ b/app/ui/lecture/taken-lecture/taken-lecture-list.tsx
@@ -10,10 +10,19 @@ interface TakenLectureListProps {
 
 export default function TakenLectureList({ data }: TakenLectureListProps) {
   return (
-    <Table
-      headerInfo={headerInfo}
-      data={data}
-      renderActionButton={(id: number) => <DeleteTakenLectureButton lectureId={id} />}
-    />
+    <>
+      {/* pc  */}
+      <div className="hidden lg:block">
+        <Table
+          headerInfo={headerInfo}
+          data={data}
+          renderActionButton={(id: number) => <DeleteTakenLectureButton lectureId={id} />}
+        />
+      </div>
+      {/* mobile */}
+      <div className="block lg:hidden">
+        <Table headerInfo={headerInfo} data={data} />
+      </div>
+    </>
   );
 }
diff --git a/app/ui/view/atom/content-container.tsx b/app/ui/view/atom/content-container.tsx
index c0d0bc0a..17100e76 100644
--- a/app/ui/view/atom/content-container.tsx
+++ b/app/ui/view/atom/content-container.tsx
@@ -10,7 +10,7 @@ export default function ContentContainer({ children, size = 'md', className }: C
   return (
     <div
       className={twMerge(
-        'absolute bg-white top-[7rem] zIndex-1 rounded-xl p-[1.5rem] shadow-lg max-md:w-full',
+        'absolute bg-white top-[7rem] zIndex-1 rounded-xl shadow-lg max-md:w-full',
         size === 'md' ? 'md:w-[70%]' : 'md:w-[80%]',
         className,
       )}
diff --git a/app/ui/view/atom/label-container/label-container.tsx b/app/ui/view/atom/label-container/label-container.tsx
index 22068cfc..90c28d85 100644
--- a/app/ui/view/atom/label-container/label-container.tsx
+++ b/app/ui/view/atom/label-container/label-container.tsx
@@ -8,7 +8,7 @@ interface LabelContainerProps {
 export default function LabelContainer({ label, rightElement }: LabelContainerProps) {
   return (
     <div className="flex justify-between items-center w-full">
-      <div className="rounded-[100px] bg-light-blue-6 p-2 xl:p-2.5 text-white lg:text-sm xl:text-md 2xl:text-lg font-semibold">
+      <div className="rounded-[100px] bg-light-blue-6 p-2.5 text-white lg:text-sm xl:text-base 2xl:text-lg font-semibold">
         {label}
       </div>
       {rightElement}

From 3f1727ad045df206f479afd8ae54fb2cdc0c4c8f Mon Sep 17 00:00:00 2001
From: yougyung <youkyeongs@naver.com>
Date: Thu, 28 Mar 2024 21:29:03 +0900
Subject: [PATCH 22/34] =?UTF-8?q?fix:=20md=ED=81=AC=EA=B8=B0=EC=9D=98=20fo?=
 =?UTF-8?q?nt-size=20=ED=91=9C=EA=B8=B0=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/ui/view/atom/button/button.stories.tsx | 1 -
 app/ui/view/atom/button/button.tsx         | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/app/ui/view/atom/button/button.stories.tsx b/app/ui/view/atom/button/button.stories.tsx
index 3e0ed3d7..dbb08050 100644
--- a/app/ui/view/atom/button/button.stories.tsx
+++ b/app/ui/view/atom/button/button.stories.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import Button from './button';
 
diff --git a/app/ui/view/atom/button/button.tsx b/app/ui/view/atom/button/button.tsx
index 9b2a43ad..e2c00088 100644
--- a/app/ui/view/atom/button/button.tsx
+++ b/app/ui/view/atom/button/button.tsx
@@ -25,7 +25,7 @@ export const ButtonVariants = cva(`flex justify-center items-center`, {
       default: '',
       xs: 'px-5 py-2.5 text-sm font-medium leading-5',
       sm: 'px-10 py-2.5 text-xs font-medium leading-3',
-      md: 'px-20 py-4 text-md font-medium leading-3',
+      md: 'px-20 py-4 text-base font-medium leading-3',
       lg: 'px-28 py-4 text-2xl font-medium leading-9',
     },
   },

From f4bc2e35c35d774eef605c8c1715bc5bb9fd9e4a Mon Sep 17 00:00:00 2001
From: gahyuun <pgh123166@naver.com>
Date: Fri, 29 Mar 2024 10:36:41 +0900
Subject: [PATCH 23/34] feat: add react-swipeable-list package

---
 package-lock.json | 6 ++++++
 package.json      | 1 +
 2 files changed, 7 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index 97016eac..93519f6b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,6 +22,7 @@
         "next": "14.1.0",
         "react": "^18",
         "react-dom": "^18",
+        "react-swipeable-list": "^1.9.3",
         "tailwind-merge": "^2.2.1",
         "tailwindcss-animate": "^1.0.7",
         "zod": "^3.22.4"
@@ -19630,6 +19631,11 @@
         }
       }
     },
+    "node_modules/react-swipeable-list": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/react-swipeable-list/-/react-swipeable-list-1.9.3.tgz",
+      "integrity": "sha512-YinT0+Ww3SNJZaTVBGAN86tNL2cka5s4m8MkQfgp8kdoORuGaPoo+PemFK3kA3mb6vkSZc0IBCp6Ci3y1Er21Q=="
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
diff --git a/package.json b/package.json
index 2029c910..bdee7738 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
     "next": "14.1.0",
     "react": "^18",
     "react-dom": "^18",
+    "react-swipeable-list": "^1.9.3",
     "tailwind-merge": "^2.2.1",
     "tailwindcss-animate": "^1.0.7",
     "zod": "^3.22.4"

From 9d6c6c89abdba9e7e75d07ca0dcf6725972e9f4b Mon Sep 17 00:00:00 2001
From: gahyuun <pgh123166@naver.com>
Date: Fri, 29 Mar 2024 10:41:00 +0900
Subject: [PATCH 24/34] feat: implement swipeable delete taken lecture button

---
 .../delete-taken-lecture-button.tsx           |  2 +-
 .../swipeable-delete-taken-lecture-button.tsx | 21 +++++++++++++++++++
 2 files changed, 22 insertions(+), 1 deletion(-)
 create mode 100644 app/ui/lecture/taken-lecture/swipeable-delete-taken-lecture-button.tsx

diff --git a/app/ui/lecture/taken-lecture/delete-taken-lecture-button.tsx b/app/ui/lecture/taken-lecture/delete-taken-lecture-button.tsx
index deb2ccc4..183cb2cb 100644
--- a/app/ui/lecture/taken-lecture/delete-taken-lecture-button.tsx
+++ b/app/ui/lecture/taken-lecture/delete-taken-lecture-button.tsx
@@ -1,7 +1,7 @@
 'use client';
 import Button from '../../view/atom/button/button';
 
-interface DeleteTakenLectureButtonProps {
+export interface DeleteTakenLectureButtonProps {
   lectureId: number;
 }
 export default function DeleteTakenLectureButton({ lectureId }: DeleteTakenLectureButtonProps) {
diff --git a/app/ui/lecture/taken-lecture/swipeable-delete-taken-lecture-button.tsx b/app/ui/lecture/taken-lecture/swipeable-delete-taken-lecture-button.tsx
new file mode 100644
index 00000000..61f36a70
--- /dev/null
+++ b/app/ui/lecture/taken-lecture/swipeable-delete-taken-lecture-button.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { DeleteTakenLectureButtonProps } from './delete-taken-lecture-button';
+import { SwipeAction, TrailingActions } from 'react-swipeable-list';
+
+export default function SwipeableDeleteTakenLectureButton({ lectureId }: DeleteTakenLectureButtonProps) {
+  const deleteLecture = () => {
+    //삭제 api
+  };
+  return (
+    <TrailingActions>
+      <SwipeAction
+        destructive={true}
+        onClick={() => {
+          // 삭제 api
+        }}
+      >
+        <div className="bg-gray-400 text-white flex justify-center items-center w-14">삭제</div>
+      </SwipeAction>
+    </TrailingActions>
+  );
+}

From 3090005d7e780b0ed661589adaa5aed8036ff483 Mon Sep 17 00:00:00 2001
From: gahyuun <pgh123166@naver.com>
Date: Fri, 29 Mar 2024 10:41:51 +0900
Subject: [PATCH 25/34] feat: implement swipeable list

---
 .../molecule/list/swipeable-custom-list.tsx   |  16 ++
 app/ui/view/molecule/table/index.tsx          |  25 ++-
 app/ui/view/molecule/table/table.stories.tsx  |  35 +++-
 app/utils/style/reactswipeable-list.css       | 190 ++++++++++++++++++
 4 files changed, 261 insertions(+), 5 deletions(-)
 create mode 100644 app/ui/view/molecule/list/swipeable-custom-list.tsx
 create mode 100644 app/utils/style/reactswipeable-list.css

diff --git a/app/ui/view/molecule/list/swipeable-custom-list.tsx b/app/ui/view/molecule/list/swipeable-custom-list.tsx
new file mode 100644
index 00000000..60f2c92d
--- /dev/null
+++ b/app/ui/view/molecule/list/swipeable-custom-list.tsx
@@ -0,0 +1,16 @@
+import React, { ReactNode } from 'react';
+import { ListRow } from './list-root';
+import { SwipeableList, Type as ListType } from 'react-swipeable-list';
+
+interface SwipeableListProps<T extends ListRow> {
+  data: T[];
+  render: (item: T, index: number) => ReactNode;
+}
+
+export default function SwipeableCustomList<T extends ListRow>({ data, render }: SwipeableListProps<T>) {
+  return (
+    <div className="rounded-xl border-[1px] border-gray-300 w-full ">
+      <SwipeableList type={ListType.IOS}>{data.map((item, index) => render(item, index))}</SwipeableList>
+    </div>
+  );
+}
diff --git a/app/ui/view/molecule/table/index.tsx b/app/ui/view/molecule/table/index.tsx
index 0d447a87..805b903d 100644
--- a/app/ui/view/molecule/table/index.tsx
+++ b/app/ui/view/molecule/table/index.tsx
@@ -3,11 +3,15 @@ import { ColType } from '../grid/grid-root';
 import List from '../list';
 import Grid from '../grid';
 import { ListRow } from '../list/list-root';
+import { SwipeableListItem } from 'react-swipeable-list';
+import '@/app/utils/style/reactswipeable-list.css';
+import SwipeableCustomList from '../list/swipeable-custom-list';
 
 interface TableProps<T extends ListRow> {
   headerInfo: string[];
   data: T[];
   renderActionButton?: (id: number) => JSX.Element;
+  swipeable?: boolean;
 }
 
 function isCol(cols: number | string): cols is ColType {
@@ -17,8 +21,9 @@ function isCol(cols: number | string): cols is ColType {
   return false;
 }
 
-export function Table<T extends ListRow>({ data, headerInfo, renderActionButton }: TableProps<T>) {
-  const cols = renderActionButton ? 'render-button' : headerInfo.length;
+export function Table<T extends ListRow>({ data, headerInfo, renderActionButton, swipeable = false }: TableProps<T>) {
+  const cols = renderActionButton && !swipeable ? 'render-button' : headerInfo.length;
+
   const render = (item: T, index: number) => {
     return (
       <List.Row key={index}>
@@ -33,10 +38,24 @@ export function Table<T extends ListRow>({ data, headerInfo, renderActionButton
     );
   };
 
+  const swipealbeRender = (item: T, index: number) => {
+    return (
+      <SwipeableListItem trailingActions={renderActionButton ? renderActionButton(item.id) : null}>
+        <List.Row key={index}>
+          <Grid cols={isCol(cols) ? cols : 6}>
+            {Object.keys(item).map((key, index) => {
+              if (key === 'id') return null;
+              return <Grid.Column key={index}>{item[key]}</Grid.Column>;
+            })}
+          </Grid>
+        </List.Row>
+      </SwipeableListItem>
+    );
+  };
   return (
     <div className="flex flex-col gap-2.5 w-full" data-testid="table-data">
       <TableHeader headerInfo={headerInfo} cols={isCol(cols) ? cols : 6} />
-      <List data={data} render={render} />
+      {swipeable ? <SwipeableCustomList data={data} render={swipealbeRender} /> : <List data={data} render={render} />}
     </div>
   );
 }
diff --git a/app/ui/view/molecule/table/table.stories.tsx b/app/ui/view/molecule/table/table.stories.tsx
index 9783f542..d11ab255 100644
--- a/app/ui/view/molecule/table/table.stories.tsx
+++ b/app/ui/view/molecule/table/table.stories.tsx
@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import Button from '../../atom/button/button';
 import { Table } from '.';
+import SwipeableDeleteTakenLectureButton from '@/app/ui/lecture/taken-lecture/swipeable-delete-taken-lecture-button';
 
 const meta = {
   title: 'ui/view/molecule/Table',
@@ -56,11 +57,41 @@ export const ButtonLectureTable: StoryObj = {
         credit: 3,
       },
     ];
-    const actionButton = () => <Button variant="list" label="삭제" />;
+    const actionButton = () => <Button variant="text" label="삭제" />;
     return (
-      <main>
+      <main className="w-[600px]">
         <Table headerInfo={headerInfo} data={lectures} renderActionButton={actionButton} />
       </main>
     );
   },
 };
+
+export const SwipeableLectureTable: StoryObj = {
+  render: () => {
+    const headerInfo = ['수강년도', '수강학기', '과목코드', '과목명', '학점'];
+    const lectures = [
+      {
+        id: 140,
+        year: '2024',
+        semester: '1학기',
+        lectureCode: 'HED01407',
+        lectureName: '딥러닝',
+        credit: 3,
+      },
+      {
+        id: 143,
+        year: '2024',
+        semester: '1학기',
+        lectureCode: 'HED01407',
+        lectureName: '인공지능',
+        credit: 3,
+      },
+    ];
+    const actionButton = () => <SwipeableDeleteTakenLectureButton lectureId={3} />;
+    return (
+      <main>
+        <Table headerInfo={headerInfo} data={lectures} renderActionButton={actionButton} swipeable={true} />
+      </main>
+    );
+  },
+};
diff --git a/app/utils/style/reactswipeable-list.css b/app/utils/style/reactswipeable-list.css
new file mode 100644
index 00000000..ee3dcc81
--- /dev/null
+++ b/app/utils/style/reactswipeable-list.css
@@ -0,0 +1,190 @@
+.leading-actions {
+  display: flex;
+}
+
+.leading-actions > * {
+  width: 0;
+  overflow-x: hidden;
+}
+
+.swipeable-list {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.swipeable-list-item {
+  position: relative;
+  transition: max-height 0.5s ease-in-out;
+  max-height: 1000px;
+  transform-origin: top;
+  overflow: hidden;
+  width: 100%;
+}
+
+.swipeable-list-item--remove {
+  max-height: 0;
+  transition: max-height 0.35s ease-out;
+}
+
+.swipeable-list-item__content {
+  width: 100%;
+  align-items: center;
+  box-sizing: border-box;
+  height: 100%;
+}
+
+.swipeable-list-item__content--return {
+  transition: transform 0.5s ease-in-out;
+}
+
+@keyframes content-return-leading-ms {
+  20% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+.swipeable-list-item__content--return-leading-ms {
+  animation-duration: 0.5s;
+  animation-name: content-return-leading-ms;
+  animation-timing-function: linear;
+}
+
+@keyframes content-return-trailing-ms {
+  20% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+.swipeable-list-item__content--return-trailing-ms {
+  animation-duration: 0.5s;
+  animation-name: content-return-trailing-ms;
+  animation-timing-function: linear;
+}
+
+.swipeable-list-item__content--remove {
+  transition: transform 0.5s ease-in-out;
+}
+
+.swipeable-list-item__leading-actions {
+  position: absolute;
+  display: flex;
+  width: 0px;
+  overflow: hidden;
+  height: 100%;
+}
+
+.swipeable-list-item__leading-actions--return {
+  transition: width 0.5s ease-in-out;
+}
+
+@keyframes actions-return-ms {
+  20% {
+    width: 100%;
+  }
+  100% {
+    width: 0;
+  }
+}
+
+.swipeable-list-item__actions--return-ms {
+  animation-duration: 0.5s;
+  animation-name: actions-return-ms;
+  animation-timing-function: linear;
+}
+
+.swipeable-list-item__leading-actions > * {
+  overflow: hidden;
+  display: flex;
+  justify-content: flex-end;
+  transform: scale(1);
+  transform-origin: center left;
+  transition: transform 0.2s ease-out;
+}
+
+.swipeable-list-item__trailing-actions {
+  display: flex;
+  width: 0px;
+  position: absolute;
+  right: 0;
+  top: 0;
+  justify-content: flex-end;
+  overflow: hidden;
+  height: 100%;
+}
+
+.swipeable-list-item__trailing-actions--return {
+  transition: width 0.5s ease-in-out;
+}
+
+.swipeable-list-item__trailing-actions > * {
+  overflow: hidden;
+  transform: scale(1);
+  transform-origin: center right;
+  transition: transform 0.2s ease-out;
+}
+
+.swipeable-list-item__leading-actions--scaled > * {
+  transform: scale(1.2);
+  transform-origin: center left;
+  transition: transform 0.2s ease-in;
+}
+
+.swipeable-list-item__trailing-actions--scaled > * {
+  transform: scale(1.2);
+  transform-origin: center right;
+  transition: transform 0.2s ease-in;
+}
+
+.swipe-action {
+  display: flex;
+  width: 100%;
+  align-items: stretch;
+}
+
+.swipe-action > * {
+  flex: 1;
+}
+
+.swipe-action__grayed > * {
+  background-color: gray !important;
+}
+
+.swipe-action__leading > * {
+  justify-content: flex-start;
+}
+
+.swipe-action__trailing > * {
+  justify-content: center;
+}
+
+.swipe-action__leading--full-swipe-rest,
+.swipe-action__trailing--full-swipe-rest {
+  width: 0;
+  transition: width 0.2s;
+}
+
+.swipe-action__leading--full-swipe-main > * {
+  justify-content: flex-end;
+}
+
+.swipe-action__trailing--full-swipe-main > * {
+  justify-content: flex-start;
+}
+
+.trailing-actions {
+  display: flex;
+}
+
+.trailing-actions > * {
+  width: 0;
+  overflow-x: hidden;
+}

From 99722911e1617d801b75d2da79324bd660c74c2d Mon Sep 17 00:00:00 2001
From: gahyuun <pgh123166@naver.com>
Date: Fri, 29 Mar 2024 10:44:12 +0900
Subject: [PATCH 26/34] feat: add swipeable table to taken lecture list

---
 app/ui/lecture/taken-lecture/taken-lecture-list.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/app/ui/lecture/taken-lecture/taken-lecture-list.tsx b/app/ui/lecture/taken-lecture/taken-lecture-list.tsx
index b77e3a5f..1a8ec3f1 100644
--- a/app/ui/lecture/taken-lecture/taken-lecture-list.tsx
+++ b/app/ui/lecture/taken-lecture/taken-lecture-list.tsx
@@ -1,6 +1,8 @@
+'use client';
 import { Table } from '../../view/molecule/table';
 import { LectureInfo } from '@/app/type/lecture';
 import DeleteTakenLectureButton from './delete-taken-lecture-button';
+import SwipeableDeleteTakenLectureButton from './swipeable-delete-taken-lecture-button';
 
 const headerInfo = ['수강년도', '수강학기', '과목코드', '과목명', '학점'];
 
@@ -21,7 +23,12 @@ export default function TakenLectureList({ data }: TakenLectureListProps) {
       </div>
       {/* mobile */}
       <div className="block lg:hidden">
-        <Table headerInfo={headerInfo} data={data} />
+        <Table
+          headerInfo={headerInfo}
+          data={data}
+          swipeable={true}
+          renderActionButton={(id: number) => <SwipeableDeleteTakenLectureButton lectureId={id} />}
+        />
       </div>
     </>
   );

From 7d5bb2c42987d1c6e0aefadc57d2e2b1195329f4 Mon Sep 17 00:00:00 2001
From: gahyuun <pgh123166@naver.com>
Date: Fri, 29 Mar 2024 11:09:57 +0900
Subject: [PATCH 27/34] refactor: delete swipeable taken lecture button

---
 .../delete-taken-lecture-button.tsx           | 39 +++++++++++++------
 .../swipeable-delete-taken-lecture-button.tsx | 21 ----------
 .../taken-lecture/taken-lecture-list.tsx      |  3 +-
 app/ui/view/molecule/table/table.stories.tsx  |  4 +-
 4 files changed, 31 insertions(+), 36 deletions(-)
 delete mode 100644 app/ui/lecture/taken-lecture/swipeable-delete-taken-lecture-button.tsx

diff --git a/app/ui/lecture/taken-lecture/delete-taken-lecture-button.tsx b/app/ui/lecture/taken-lecture/delete-taken-lecture-button.tsx
index 183cb2cb..77338316 100644
--- a/app/ui/lecture/taken-lecture/delete-taken-lecture-button.tsx
+++ b/app/ui/lecture/taken-lecture/delete-taken-lecture-button.tsx
@@ -1,22 +1,39 @@
 'use client';
+import { SwipeAction, TrailingActions } from 'react-swipeable-list';
 import Button from '../../view/atom/button/button';
 
-export interface DeleteTakenLectureButtonProps {
+interface DeleteTakenLectureButtonProps {
   lectureId: number;
+  swipeable?: boolean;
 }
-export default function DeleteTakenLectureButton({ lectureId }: DeleteTakenLectureButtonProps) {
+export default function DeleteTakenLectureButton({ lectureId, swipeable = false }: DeleteTakenLectureButtonProps) {
   const deleteLecture = () => {
     // 삭제 api 연결 예정
   };
   return (
-    <div className="opacity-0 group-hover:opacity-100">
-      <Button
-        label="삭제"
-        variant="text"
-        size="default"
-        data-testid="taken-lecture-delete-button"
-        onClick={deleteLecture}
-      />
-    </div>
+    <>
+      {swipeable ? (
+        <TrailingActions>
+          <SwipeAction
+            destructive={true}
+            onClick={() => {
+              // 삭제 api
+            }}
+          >
+            <div className="bg-gray-400 text-white flex justify-center items-center w-14">삭제</div>
+          </SwipeAction>
+        </TrailingActions>
+      ) : (
+        <div className="opacity-0 group-hover:opacity-100">
+          <Button
+            label="삭제"
+            variant="text"
+            size="default"
+            data-testid="taken-lecture-delete-button"
+            onClick={deleteLecture}
+          />
+        </div>
+      )}
+    </>
   );
 }
diff --git a/app/ui/lecture/taken-lecture/swipeable-delete-taken-lecture-button.tsx b/app/ui/lecture/taken-lecture/swipeable-delete-taken-lecture-button.tsx
deleted file mode 100644
index 61f36a70..00000000
--- a/app/ui/lecture/taken-lecture/swipeable-delete-taken-lecture-button.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-import { DeleteTakenLectureButtonProps } from './delete-taken-lecture-button';
-import { SwipeAction, TrailingActions } from 'react-swipeable-list';
-
-export default function SwipeableDeleteTakenLectureButton({ lectureId }: DeleteTakenLectureButtonProps) {
-  const deleteLecture = () => {
-    //삭제 api
-  };
-  return (
-    <TrailingActions>
-      <SwipeAction
-        destructive={true}
-        onClick={() => {
-          // 삭제 api
-        }}
-      >
-        <div className="bg-gray-400 text-white flex justify-center items-center w-14">삭제</div>
-      </SwipeAction>
-    </TrailingActions>
-  );
-}
diff --git a/app/ui/lecture/taken-lecture/taken-lecture-list.tsx b/app/ui/lecture/taken-lecture/taken-lecture-list.tsx
index 1a8ec3f1..e44975a0 100644
--- a/app/ui/lecture/taken-lecture/taken-lecture-list.tsx
+++ b/app/ui/lecture/taken-lecture/taken-lecture-list.tsx
@@ -2,7 +2,6 @@
 import { Table } from '../../view/molecule/table';
 import { LectureInfo } from '@/app/type/lecture';
 import DeleteTakenLectureButton from './delete-taken-lecture-button';
-import SwipeableDeleteTakenLectureButton from './swipeable-delete-taken-lecture-button';
 
 const headerInfo = ['수강년도', '수강학기', '과목코드', '과목명', '학점'];
 
@@ -27,7 +26,7 @@ export default function TakenLectureList({ data }: TakenLectureListProps) {
           headerInfo={headerInfo}
           data={data}
           swipeable={true}
-          renderActionButton={(id: number) => <SwipeableDeleteTakenLectureButton lectureId={id} />}
+          renderActionButton={(id: number) => <DeleteTakenLectureButton lectureId={id} swipeable={true} />}
         />
       </div>
     </>
diff --git a/app/ui/view/molecule/table/table.stories.tsx b/app/ui/view/molecule/table/table.stories.tsx
index d11ab255..931bae07 100644
--- a/app/ui/view/molecule/table/table.stories.tsx
+++ b/app/ui/view/molecule/table/table.stories.tsx
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import Button from '../../atom/button/button';
 import { Table } from '.';
-import SwipeableDeleteTakenLectureButton from '@/app/ui/lecture/taken-lecture/swipeable-delete-taken-lecture-button';
+import DeleteTakenLectureButton from '@/app/ui/lecture/taken-lecture/delete-taken-lecture-button';
 
 const meta = {
   title: 'ui/view/molecule/Table',
@@ -87,7 +87,7 @@ export const SwipeableLectureTable: StoryObj = {
         credit: 3,
       },
     ];
-    const actionButton = () => <SwipeableDeleteTakenLectureButton lectureId={3} />;
+    const actionButton = () => <DeleteTakenLectureButton lectureId={3} swipeable={true} />;
     return (
       <main>
         <Table headerInfo={headerInfo} data={lectures} renderActionButton={actionButton} swipeable={true} />

From 16c72c4bebcab7f8a6a9ddd47ee6b2059899fda6 Mon Sep 17 00:00:00 2001
From: gahyuun <pgh123166@naver.com>
Date: Sun, 31 Mar 2024 01:14:24 +0900
Subject: [PATCH 28/34] chore: page -> MyPage

---
 app/(sub-page)/my/page.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/app/(sub-page)/my/page.tsx b/app/(sub-page)/my/page.tsx
index 76298a09..7b5637dd 100644
--- a/app/(sub-page)/my/page.tsx
+++ b/app/(sub-page)/my/page.tsx
@@ -1,9 +1,8 @@
 import LectureSearch from '@/app/ui/lecture/lecture-search';
 import TakenLecture from '@/app/ui/lecture/taken-lecture';
 import ContentContainer from '@/app/ui/view/atom/content-container';
-import React from 'react';
 
-export default function Page() {
+export default function MyPage() {
   return (
     <ContentContainer className="flex">
       <div className="hidden lg:w-[30%] lg:block">정보칸</div>

From 7990bcfdb6d5a675bf1032de590bf98caaa690d0 Mon Sep 17 00:00:00 2001
From: gahyuun <pgh123166@naver.com>
Date: Sun, 31 Mar 2024 01:20:04 +0900
Subject: [PATCH 29/34] chore: add  swipeable list item key

---
 app/ui/view/molecule/table/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/ui/view/molecule/table/index.tsx b/app/ui/view/molecule/table/index.tsx
index 805b903d..923e5988 100644
--- a/app/ui/view/molecule/table/index.tsx
+++ b/app/ui/view/molecule/table/index.tsx
@@ -40,8 +40,8 @@ export function Table<T extends ListRow>({ data, headerInfo, renderActionButton,
 
   const swipealbeRender = (item: T, index: number) => {
     return (
-      <SwipeableListItem trailingActions={renderActionButton ? renderActionButton(item.id) : null}>
-        <List.Row key={index}>
+      <SwipeableListItem key={index} trailingActions={renderActionButton ? renderActionButton(item.id) : null}>
+        <List.Row>
           <Grid cols={isCol(cols) ? cols : 6}>
             {Object.keys(item).map((key, index) => {
               if (key === 'id') return null;

From d21a53fff49e4984d262562b93d69e829c7f8e5d Mon Sep 17 00:00:00 2001
From: SeonghunYang <didtjdgns852@naver.com>
Date: Sun, 31 Mar 2024 11:44:39 +0000
Subject: [PATCH 30/34] feat: Add isValidation function to handle Zod
 validation

---
 app/business/user/user.command.ts | 11 +----------
 app/utils/zod/validation.util.ts  | 10 ++++++++++
 2 files changed, 11 insertions(+), 10 deletions(-)
 create mode 100644 app/utils/zod/validation.util.ts

diff --git a/app/business/user/user.command.ts b/app/business/user/user.command.ts
index ace15408..c29c7afb 100644
--- a/app/business/user/user.command.ts
+++ b/app/business/user/user.command.ts
@@ -7,16 +7,7 @@ import { httpErrorHandler } from '@/app/utils/http/http-error-handler';
 import { BadRequestError } from '@/app/utils/http/http-error';
 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;
-  }
-}
+import { isValidation } from '@/app/utils/zod/validation.util';
 
 export async function authenticate(prevState: FormState, formData: FormData): Promise<FormState> {
   const validatedFields = SignInFormSchema.safeParse({
diff --git a/app/utils/zod/validation.util.ts b/app/utils/zod/validation.util.ts
new file mode 100644
index 00000000..8121a739
--- /dev/null
+++ b/app/utils/zod/validation.util.ts
@@ -0,0 +1,10 @@
+import { z } from 'zod';
+
+export 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;
+  }
+}

From 4c8bf01ec01d1bb23a4cbdffe027a8dee50cfb52 Mon Sep 17 00:00:00 2001
From: SeonghunYang <didtjdgns852@naver.com>
Date: Sun, 31 Mar 2024 20:49:56 +0900
Subject: [PATCH 31/34] Update
 app/ui/user/sign-in-form/sign-in-form.stories.tsx
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: 박가현 <81469686+gahyuun@users.noreply.github.com>
---
 .../sign-in-form/sign-in-form.stories.tsx     | 24 ++++++++++++++-----
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/app/ui/user/sign-in-form/sign-in-form.stories.tsx b/app/ui/user/sign-in-form/sign-in-form.stories.tsx
index ad8596e2..1a371055 100644
--- a/app/ui/user/sign-in-form/sign-in-form.stories.tsx
+++ b/app/ui/user/sign-in-form/sign-in-form.stories.tsx
@@ -8,12 +8,24 @@ import { resetMockDB, mockDatabase } from '@/app/mocks/db.mock';
 const meta = {
   title: 'ui/user/SignInForm',
   component: SignInForm,
-  decorators: [
-    (Story) => (
-      <div className="w-96">
-        <Story />
-      </div>
-    ),
+ decorators: [
+    (Story) => {
+      const beforeEach = () => {
+        resetMockDB();
+        mockDatabase.createUser({
+          authId: 'testtest',
+          password: 'test1234!',
+          studentNumber: '60000001',
+          engLv: 'ENG12',
+        });
+      };
+      beforeEach();
+      return (
+        <div className="w-96">
+          <Story />
+        </div>
+      );
+    },
   ],
   args: {
     onNext: fn(),

From 564ed7791c581a245ae138b70ead178ccdb1c900 Mon Sep 17 00:00:00 2001
From: SeonghunYang <didtjdgns852@naver.com>
Date: Sun, 31 Mar 2024 12:01:01 +0000
Subject: [PATCH 32/34] fix: Update sign-up success page link to sign-in

---
 app/(sub-page)/sign-up/components/sign-up-success.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/(sub-page)/sign-up/components/sign-up-success.tsx b/app/(sub-page)/sign-up/components/sign-up-success.tsx
index a27e7758..d28f7b20 100644
--- a/app/(sub-page)/sign-up/components/sign-up-success.tsx
+++ b/app/(sub-page)/sign-up/components/sign-up-success.tsx
@@ -14,7 +14,7 @@ export default function SignUpSuccess() {
         </div>
         <div className="space-y-4">
           <div className="grid grid-cols-2 gap-4">
-            <Link className="inline-block w-full" href="/login">
+            <Link className="inline-block w-full" href="/sign-in">
               <Button className="w-full" label={'로그인 하기'} />
             </Link>
           </div>

From 5f6c004d213dcbfe34fe87e7be8bda94be521826 Mon Sep 17 00:00:00 2001
From: SeonghunYang <didtjdgns852@naver.com>
Date: Sun, 31 Mar 2024 12:02:33 +0000
Subject: [PATCH 33/34] feat: Enable secure cookie setting in production
 environment

---
 app/business/user/user.command.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/business/user/user.command.ts b/app/business/user/user.command.ts
index c29c7afb..d4e3ce3d 100644
--- a/app/business/user/user.command.ts
+++ b/app/business/user/user.command.ts
@@ -44,7 +44,7 @@ export async function authenticate(prevState: FormState, formData: FormData): Pr
     if (isValidation(result, SignInResponseSchema)) {
       cookies().set('accessToken', result.accessToken, {
         httpOnly: true,
-        // secure: process.env.NODE_ENV === 'production',
+        secure: process.env.NODE_ENV === 'production',
         path: '/',
       });
       cookies().set('refreshToken', result.refreshToken, {

From ebf2b285cbc631cfa2113b0a3dd5457480a7bf5e Mon Sep 17 00:00:00 2001
From: gahyuun <pgh123166@naver.com>
Date: Mon, 1 Apr 2024 17:25:30 +0900
Subject: [PATCH 34/34] chore: change css file path

---
 app/{utils/style => }/reactswipeable-list.css | 0
 app/ui/view/molecule/table/index.tsx          | 2 +-
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename app/{utils/style => }/reactswipeable-list.css (100%)

diff --git a/app/utils/style/reactswipeable-list.css b/app/reactswipeable-list.css
similarity index 100%
rename from app/utils/style/reactswipeable-list.css
rename to app/reactswipeable-list.css
diff --git a/app/ui/view/molecule/table/index.tsx b/app/ui/view/molecule/table/index.tsx
index 923e5988..d542c832 100644
--- a/app/ui/view/molecule/table/index.tsx
+++ b/app/ui/view/molecule/table/index.tsx
@@ -4,7 +4,7 @@ import List from '../list';
 import Grid from '../grid';
 import { ListRow } from '../list/list-root';
 import { SwipeableListItem } from 'react-swipeable-list';
-import '@/app/utils/style/reactswipeable-list.css';
+import '@/app/reactswipeable-list.css';
 import SwipeableCustomList from '../list/swipeable-custom-list';
 
 interface TableProps<T extends ListRow> {