From 0f60da0d3664354edb7bd0eec391b57da453b89b Mon Sep 17 00:00:00 2001
From: SeonghunYang <didtjdgns852@naver.com>
Date: Thu, 25 Apr 2024 11:29:23 +0000
Subject: [PATCH 01/39] [web] feat: Update middleware.ts to improve guest path
 handling

---
 middleware.ts | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/middleware.ts b/middleware.ts
index c61ab09a..b701287e 100644
--- a/middleware.ts
+++ b/middleware.ts
@@ -31,10 +31,12 @@ async function getAuth(request: NextRequest): Promise<{
   };
 }
 
-const allowdGuestPath = ['/tutorial', '/sign-in', '/sign-up', '/find-password', '/find-id'];
+const allowdOnlyGuestPath = ['/sign-in', '/sign-up', '/find-password', '/find-id'];
+const allowdGuestPath = ['/', '/tutorial', ...allowdOnlyGuestPath];
 
-function isAllowedGuestPath(path: string) {
-  return allowdGuestPath.some((allowedPath) => path.startsWith(allowedPath));
+function isAllowedGuestPath(path: string, strict: boolean = false) {
+  const allowdPath = strict ? allowdOnlyGuestPath : allowdGuestPath;
+  return allowdPath.some((allowedPath) => path.startsWith(allowedPath));
 }
 
 export async function middleware(request: NextRequest) {
@@ -51,6 +53,10 @@ export async function middleware(request: NextRequest) {
     if (auth.role === 'guest' && !isAllowedGuestPath(request.nextUrl.pathname)) {
       return Response.redirect(new URL('/sign-in', request.url));
     }
+
+    if (auth.role !== 'guest' && isAllowedGuestPath(request.nextUrl.pathname, true)) {
+      return Response.redirect(new URL('/my', request.url));
+    }
   }
 }
 

From ae407937ac5dd0818ca0cb89729125c98100af8f Mon Sep 17 00:00:00 2001
From: SeonghunYang <didtjdgns852@naver.com>
Date: Thu, 25 Apr 2024 11:36:58 +0000
Subject: [PATCH 02/39] feat: Add signOut function and redirect to sign-in page

---
 app/business/user/user.command.ts | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/app/business/user/user.command.ts b/app/business/user/user.command.ts
index 33a1f833..a4f45fb8 100644
--- a/app/business/user/user.command.ts
+++ b/app/business/user/user.command.ts
@@ -15,6 +15,13 @@ import { cookies } from 'next/headers';
 import { isValidation } from '@/app/utils/zod/validation.util';
 import { redirect } from 'next/navigation';
 
+export async function signOut() {
+  cookies().delete('accessToken');
+  cookies().delete('refreshToken');
+
+  redirect('/sign-in');
+}
+
 export async function validateToken(): Promise<ValidateTokenResponse | false> {
   const accessToken = cookies().get('accessToken')?.value;
   const refreshToken = cookies().get('refreshToken')?.value;

From 944399f76618fb928f31b97f340f7d4296a76398 Mon Sep 17 00:00:00 2001
From: SeonghunYang <didtjdgns852@naver.com>
Date: Thu, 25 Apr 2024 11:38:16 +0000
Subject: [PATCH 03/39] feat: Add SignOutButton component to UserInfoNavigator

---
 app/ui/user/user-info-navigator/sign-out-button.tsx   | 11 +++++++++++
 .../user/user-info-navigator/user-info-navigator.tsx  |  3 ++-
 2 files changed, 13 insertions(+), 1 deletion(-)
 create mode 100644 app/ui/user/user-info-navigator/sign-out-button.tsx

diff --git a/app/ui/user/user-info-navigator/sign-out-button.tsx b/app/ui/user/user-info-navigator/sign-out-button.tsx
new file mode 100644
index 00000000..3fbe6726
--- /dev/null
+++ b/app/ui/user/user-info-navigator/sign-out-button.tsx
@@ -0,0 +1,11 @@
+'use client';
+import { signOut } from '@/app/business/user/user.command';
+import Button from '../../view/atom/button/button';
+
+export default function SignOutButton() {
+  const handleSignOut = async () => {
+    await signOut();
+  };
+
+  return <Button onClick={handleSignOut} size="sm" variant="secondary" label="로그아웃" />;
+}
diff --git a/app/ui/user/user-info-navigator/user-info-navigator.tsx b/app/ui/user/user-info-navigator/user-info-navigator.tsx
index e975e6bc..dd927ee6 100644
--- a/app/ui/user/user-info-navigator/user-info-navigator.tsx
+++ b/app/ui/user/user-info-navigator/user-info-navigator.tsx
@@ -2,6 +2,7 @@ import Avatar from '../../view/atom/avatar/avatar';
 import Button from '../../view/atom/button/button';
 import { getUserInfo } from '@/app/business/user/user.query';
 import Skeleton from '../../view/atom/skeleton';
+import SignOutButton from './sign-out-button';
 
 export default async function UserInfoNavigator() {
   const userInfo = await getUserInfo();
@@ -18,7 +19,7 @@ export default async function UserInfoNavigator() {
       <div className="text-sm text-gray-400">{userInfo.studentNumber}</div>
 
       <div className="mt-9">
-        <Button size="sm" variant="secondary" label="로그아웃" />
+        <SignOutButton />
       </div>
       <div className="mt-2">
         <Button size="sm" variant="text" label="회원탈퇴하기" />

From 4e0650015da57f8f268825155f5c846d234f71fc Mon Sep 17 00:00:00 2001
From: SeonghunYang <didtjdgns852@naver.com>
Date: Thu, 25 Apr 2024 11:41:47 +0000
Subject: [PATCH 04/39] feat: Add USER_DEELETE dialog key

---
 app/store/dialog.ts         | 1 +
 app/utils/key/dialog.key.ts | 1 +
 2 files changed, 2 insertions(+)

diff --git a/app/store/dialog.ts b/app/store/dialog.ts
index 5b554c53..941b2542 100644
--- a/app/store/dialog.ts
+++ b/app/store/dialog.ts
@@ -5,6 +5,7 @@ const initialState = {
   [DIALOG_KEY.RESULT_CATEGORY]: false,
   [DIALOG_KEY.DIALOG_TEST]: true,
   [DIALOG_KEY.LECTURE_SEARCH]: false,
+  [DIALOG_KEY.USER_DEELETE]: false,
 };
 
 const dialogAtom = atom(initialState);
diff --git a/app/utils/key/dialog.key.ts b/app/utils/key/dialog.key.ts
index 93e3c913..f799df8e 100644
--- a/app/utils/key/dialog.key.ts
+++ b/app/utils/key/dialog.key.ts
@@ -2,6 +2,7 @@ export const DIALOG_KEY = {
   RESULT_CATEGORY: 'RESULT_CATEGORY',
   DIALOG_TEST: 'DIALOG_TEST',
   LECTURE_SEARCH: 'LECTURE_SEARCH',
+  USER_DEELETE: 'USER_DEELETE',
 } as const;
 
 export type DialogKey = (typeof DIALOG_KEY)[keyof typeof DIALOG_KEY];

From f6a2f424d03507b8b1b7b7e7bc76177e6386e708 Mon Sep 17 00:00:00 2001
From: SeonghunYang <didtjdgns852@naver.com>
Date: Thu, 25 Apr 2024 11:45:19 +0000
Subject: [PATCH 05/39] feat: Add UserDeleteButton component to
 UserInfoNavigator

---
 app/ui/user/user-info-navigator/user-delete-button.tsx  | 5 +++++
 app/ui/user/user-info-navigator/user-info-navigator.tsx | 3 ++-
 2 files changed, 7 insertions(+), 1 deletion(-)
 create mode 100644 app/ui/user/user-info-navigator/user-delete-button.tsx

diff --git a/app/ui/user/user-info-navigator/user-delete-button.tsx b/app/ui/user/user-info-navigator/user-delete-button.tsx
new file mode 100644
index 00000000..56aa084c
--- /dev/null
+++ b/app/ui/user/user-info-navigator/user-delete-button.tsx
@@ -0,0 +1,5 @@
+import Button from '../../view/atom/button/button';
+
+export default function UserDeleteButton() {
+  return <Button size="sm" variant="text" label="회원탈퇴하기" />;
+}
diff --git a/app/ui/user/user-info-navigator/user-info-navigator.tsx b/app/ui/user/user-info-navigator/user-info-navigator.tsx
index dd927ee6..a485b98f 100644
--- a/app/ui/user/user-info-navigator/user-info-navigator.tsx
+++ b/app/ui/user/user-info-navigator/user-info-navigator.tsx
@@ -3,6 +3,7 @@ import Button from '../../view/atom/button/button';
 import { getUserInfo } from '@/app/business/user/user.query';
 import Skeleton from '../../view/atom/skeleton';
 import SignOutButton from './sign-out-button';
+import UserDeleteButton from './user-delete-button';
 
 export default async function UserInfoNavigator() {
   const userInfo = await getUserInfo();
@@ -22,7 +23,7 @@ export default async function UserInfoNavigator() {
         <SignOutButton />
       </div>
       <div className="mt-2">
-        <Button size="sm" variant="text" label="회원탈퇴하기" />
+        <UserDeleteButton />
       </div>
     </div>
   );

From 1ccb7b37e99a6736224da64ea0ae61e9e5e8633f Mon Sep 17 00:00:00 2001
From: SeonghunYang <didtjdgns852@naver.com>
Date: Thu, 25 Apr 2024 11:47:28 +0000
Subject: [PATCH 06/39] feat: Add UserDeleteModal component

---
 app/ui/user/user-info-navigator/user-delete-modal.tsx | 10 ++++++++++
 1 file changed, 10 insertions(+)
 create mode 100644 app/ui/user/user-info-navigator/user-delete-modal.tsx

diff --git a/app/ui/user/user-info-navigator/user-delete-modal.tsx b/app/ui/user/user-info-navigator/user-delete-modal.tsx
new file mode 100644
index 00000000..fe89de34
--- /dev/null
+++ b/app/ui/user/user-info-navigator/user-delete-modal.tsx
@@ -0,0 +1,10 @@
+import { DIALOG_KEY } from '@/app/utils/key/dialog.key';
+import Modal from '../../view/molecule/modal/modal';
+
+export default function UserDeleteModal() {
+  return (
+    <Modal modalKey={DIALOG_KEY.USER_DEELETE}>
+      <div className="text-center"></div>
+    </Modal>
+  );
+}

From 5863c3bc774dd3e93b7f4d7028d00a04c492e9eb Mon Sep 17 00:00:00 2001
From: SeonghunYang <didtjdgns852@naver.com>
Date: Thu, 25 Apr 2024 11:49:48 +0000
Subject: [PATCH 07/39] feat: Add FloatingComponentContainer to MyPage

---
 app/(sub-page)/my/floating-component-container.tsx | 9 +++++++++
 app/(sub-page)/my/page.tsx                         | 2 ++
 2 files changed, 11 insertions(+)
 create mode 100644 app/(sub-page)/my/floating-component-container.tsx

diff --git a/app/(sub-page)/my/floating-component-container.tsx b/app/(sub-page)/my/floating-component-container.tsx
new file mode 100644
index 00000000..7be873eb
--- /dev/null
+++ b/app/(sub-page)/my/floating-component-container.tsx
@@ -0,0 +1,9 @@
+import UserDeleteModal from '@/app/ui/user/user-info-navigator/user-delete-modal';
+
+export default function FloatingComponentContainer() {
+  return (
+    <>
+      <UserDeleteModal />
+    </>
+  );
+}
diff --git a/app/(sub-page)/my/page.tsx b/app/(sub-page)/my/page.tsx
index a1bf7f11..4cfea195 100644
--- a/app/(sub-page)/my/page.tsx
+++ b/app/(sub-page)/my/page.tsx
@@ -5,6 +5,7 @@ import ContentContainer from '@/app/ui/view/atom/content-container';
 import Drawer from '@/app/ui/view/molecule/drawer/drawer';
 import { DIALOG_KEY } from '@/app/utils/key/dialog.key';
 import { Suspense } from 'react';
+import FloatingComponentContainer from './floating-component-container';
 
 export default function MyPage() {
   return (
@@ -22,6 +23,7 @@ export default function MyPage() {
       <Drawer drawerKey={DIALOG_KEY.LECTURE_SEARCH}>
         <LectureSearch />
       </Drawer>
+      <FloatingComponentContainer />
     </>
   );
 }

From f125a640191c2ffb56a0d05058f46c1e364bab8b Mon Sep 17 00:00:00 2001
From: SeonghunYang <didtjdgns852@naver.com>
Date: Thu, 25 Apr 2024 11:53:08 +0000
Subject: [PATCH 08/39] feat: Add user delete dialog and handle toggle

---
 .../user/user-info-navigator/user-delete-button.tsx   | 11 ++++++++++-
 app/ui/user/user-info-navigator/user-delete-modal.tsx |  2 +-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/app/ui/user/user-info-navigator/user-delete-button.tsx b/app/ui/user/user-info-navigator/user-delete-button.tsx
index 56aa084c..ed4dad76 100644
--- a/app/ui/user/user-info-navigator/user-delete-button.tsx
+++ b/app/ui/user/user-info-navigator/user-delete-button.tsx
@@ -1,5 +1,14 @@
+'use client';
 import Button from '../../view/atom/button/button';
+import { DIALOG_KEY } from '@/app/utils/key/dialog.key';
+import useDialog from '@/app/hooks/useDialog';
 
 export default function UserDeleteButton() {
-  return <Button size="sm" variant="text" label="회원탈퇴하기" />;
+  const { toggle } = useDialog(DIALOG_KEY.USER_DEELETE);
+
+  const handleModalToggle = () => {
+    toggle();
+  };
+
+  return <Button onClick={handleModalToggle} size="sm" variant="text" label="회원탈퇴하기" />;
 }
diff --git a/app/ui/user/user-info-navigator/user-delete-modal.tsx b/app/ui/user/user-info-navigator/user-delete-modal.tsx
index fe89de34..7147502f 100644
--- a/app/ui/user/user-info-navigator/user-delete-modal.tsx
+++ b/app/ui/user/user-info-navigator/user-delete-modal.tsx
@@ -4,7 +4,7 @@ import Modal from '../../view/molecule/modal/modal';
 export default function UserDeleteModal() {
   return (
     <Modal modalKey={DIALOG_KEY.USER_DEELETE}>
-      <div className="text-center"></div>
+      <div className="text-center">test</div>
     </Modal>
   );
 }

From 804fa9530004f29a2c4b9467a3d66b7d97d60929 Mon Sep 17 00:00:00 2001
From: SeonghunYang <didtjdgns852@naver.com>
Date: Thu, 25 Apr 2024 12:19:58 +0000
Subject: [PATCH 09/39] refactor: Refactor user-handler.mock.ts to add
 devModeAuthGuard function

---
 app/mocks/handlers/user-handler.mock.ts | 34 ++++++++++++++++++-------
 1 file changed, 25 insertions(+), 9 deletions(-)

diff --git a/app/mocks/handlers/user-handler.mock.ts b/app/mocks/handlers/user-handler.mock.ts
index af26d9d7..7aa98163 100644
--- a/app/mocks/handlers/user-handler.mock.ts
+++ b/app/mocks/handlers/user-handler.mock.ts
@@ -9,6 +9,7 @@ import {
   UserInfoResponse,
 } from '@/app/business/user/user.type';
 import { ErrorResponseData } from '@/app/utils/http/http-error-handler';
+import { StrictRequest } from 'msw';
 
 function mockDecryptToken(token: string) {
   if (token === 'fake-access-token') {
@@ -21,6 +22,21 @@ function mockDecryptToken(token: string) {
   };
 }
 
+export const devModeAuthGuard = (request: StrictRequest<never>) => {
+  if (process.env.NODE_ENV === 'development') {
+    const accessToken = request.headers.get('Authorization')?.replace('Bearer ', '');
+    if (accessToken === 'undefined' || !accessToken) {
+      throw new Error('Unauthorized');
+    }
+
+    return mockDecryptToken(accessToken);
+  } else {
+    return {
+      authId: 'admin',
+    };
+  }
+};
+
 export const userHandlers = [
   http.get<never, never, never>(`${API_PATH.auth}/failure`, async ({ request }) => {
     await delay(500);
@@ -32,19 +48,19 @@ export const userHandlers = [
     });
   }),
   http.get<never, never, UserInfoResponse | ErrorResponseData>(`${API_PATH.user}`, async ({ request }) => {
-    const accessToken = request.headers.get('Authorization')?.replace('Bearer ', '');
-    if (accessToken === 'undefined' || !accessToken) {
-      return HttpResponse.json({ status: 401, message: 'Unauthorized' }, { status: 401 });
-    }
+    try {
+      const { authId } = devModeAuthGuard(request);
+      const userInfo = mockDatabase.getUserInfo(authId);
+      await delay(3000);
 
-    const userInfo = mockDatabase.getUserInfo(mockDecryptToken(accessToken).authId);
-    await delay(3000);
+      if (!userInfo) {
+        return HttpResponse.json({ status: 401, message: 'Unauthorized' }, { status: 401 });
+      }
 
-    if (!userInfo) {
+      return HttpResponse.json(userInfo);
+    } catch {
       return HttpResponse.json({ status: 401, message: 'Unauthorized' }, { status: 401 });
     }
-
-    return HttpResponse.json(userInfo);
   }),
   http.post<never, SignUpRequestBody, never>(`${API_PATH.user}/sign-up`, async ({ request }) => {
     const userData = await request.json();

From d4e50cc23d84afd2c9a0f9291f16f78f6d591ba0 Mon Sep 17 00:00:00 2001
From: SeonghunYang <didtjdgns852@naver.com>
Date: Thu, 25 Apr 2024 12:20:26 +0000
Subject: [PATCH 10/39] feat: Add unit tests for UserInfoNavigator component
 and update mock database

---
 .../ui/user/user-info-navigator.test.tsx      | 21 +++++++++++++++++++
 app/mocks/db.mock.ts                          |  4 ++--
 2 files changed, 23 insertions(+), 2 deletions(-)
 create mode 100644 app/__test__/ui/user/user-info-navigator.test.tsx

diff --git a/app/__test__/ui/user/user-info-navigator.test.tsx b/app/__test__/ui/user/user-info-navigator.test.tsx
new file mode 100644
index 00000000..032bd6ec
--- /dev/null
+++ b/app/__test__/ui/user/user-info-navigator.test.tsx
@@ -0,0 +1,21 @@
+import '@testing-library/jest-dom';
+import UserInfoNavigator from '@/app/ui/user/user-info-navigator/user-info-navigator';
+import { render, screen } from '@testing-library/react';
+
+jest.mock('next/headers', () => ({
+  cookies: jest.fn().mockReturnValue({
+    get: jest.fn().mockReturnValue({
+      value: 'fake-access-token',
+    }),
+  }),
+}));
+
+describe('UserInfoNavigator', () => {
+  it('UserInfoNavigator를 렌더링한다.', async () => {
+    render(await UserInfoNavigator());
+
+    expect(await screen.findByText(/모킹이/i)).toBeInTheDocument();
+    expect(await screen.findByText(/융합소프트웨어/i)).toBeInTheDocument();
+    expect(await screen.findByText(/60000000/i)).toBeInTheDocument();
+  });
+});
diff --git a/app/mocks/db.mock.ts b/app/mocks/db.mock.ts
index 302d1615..a611b6de 100644
--- a/app/mocks/db.mock.ts
+++ b/app/mocks/db.mock.ts
@@ -66,7 +66,7 @@ export const mockDatabase: MockDatabaseAction = {
       {
         ...user,
         isSumbitted: false,
-        major: '융소입니다',
+        major: '융합소프트웨어',
         name: '모킹이2',
       },
     ];
@@ -105,7 +105,7 @@ const initialState: MockDatabaseState = {
       studentNumber: '60000000',
       engLv: 'ENG12',
       isSumbitted: false,
-      major: '융소입니다',
+      major: '융합소프트웨어',
       name: '모킹이',
     },
   ],

From eca405fe82ffb022311a236659a4389e7694472f Mon Sep 17 00:00:00 2001
From: SeonghunYang <didtjdgns852@naver.com>
Date: Thu, 25 Apr 2024 12:31:20 +0000
Subject: [PATCH 11/39] feat: Update UserDeleteModal component to improve UI
 and add user delete functionality

---
 .../user-info-navigator/user-delete-modal.tsx   | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/app/ui/user/user-info-navigator/user-delete-modal.tsx b/app/ui/user/user-info-navigator/user-delete-modal.tsx
index 7147502f..fd8ac051 100644
--- a/app/ui/user/user-info-navigator/user-delete-modal.tsx
+++ b/app/ui/user/user-info-navigator/user-delete-modal.tsx
@@ -1,10 +1,25 @@
 import { DIALOG_KEY } from '@/app/utils/key/dialog.key';
 import Modal from '../../view/molecule/modal/modal';
+import Form from '../../view/molecule/form';
+import { deleteUser } from '@/app/business/user/user.command';
 
 export default function UserDeleteModal() {
   return (
     <Modal modalKey={DIALOG_KEY.USER_DEELETE}>
-      <div className="text-center">test</div>
+      <div className="max-w-sm mx-auto my-12 p-6 border rounded-lg shadow-md bg-white">
+        <h2 className="text-xl font-bold text-center">회원 탈퇴</h2>
+        <div className="h-1 w-10 bg-blue-600 mx-auto my-3" />
+        <p className="text-sm text-center my-4">
+          회원탈퇴를 진행하시겠습니까? 탈퇴를 진행하면더 비밀번호 입력이 필요합니다.
+        </p>
+        <div className="my-4">
+          <Form action={deleteUser} id={'user-delete'}>
+            <Form.PasswordInput label="비밀번호" id="password" placeholder="비밀번호를 입력하세요" required={true} />
+            <Form.SubmitButton label="탈퇴하기" position="center" variant="primary" />
+          </Form>
+        </div>
+        <p className="text-xs text-center my-4">정보를 누락하여 서비스를 이용해 주셔서 감사합니다.</p>
+      </div>
     </Modal>
   );
 }

From 8bbc2f5fe1acdbff5af2be6228001e863652229f Mon Sep 17 00:00:00 2001
From: SeonghunYang <didtjdgns852@naver.com>
Date: Thu, 25 Apr 2024 12:41:20 +0000
Subject: [PATCH 12/39] feat: add UserDeleteRequestBody interface

---
 app/business/user/user.command.ts | 40 +++++++++++++++++++++++++++++++
 app/business/user/user.type.ts    |  4 ++++
 2 files changed, 44 insertions(+)

diff --git a/app/business/user/user.command.ts b/app/business/user/user.command.ts
index a4f45fb8..4e01b2f2 100644
--- a/app/business/user/user.command.ts
+++ b/app/business/user/user.command.ts
@@ -22,6 +22,46 @@ export async function signOut() {
   redirect('/sign-in');
 }
 
+export async function deleteUser(prevState: FormState, formData: FormData): Promise<FormState> {
+  // const body: SignUpRequestBody = {
+  //   authId,
+  // };
+
+  // try {
+  //   const response = await fetch(`${API_PATH.user}/sign-up`, {
+  //     method: 'POST',
+  //     headers: {
+  //       'Content-Type': 'application/json',
+  //     },
+  //     body: JSON.stringify(body),
+  //   });
+
+  //   const result = await response.json();
+
+  //   httpErrorHandler(response, result);
+  // } 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 validateToken(): Promise<ValidateTokenResponse | false> {
   const accessToken = cookies().get('accessToken')?.value;
   const refreshToken = cookies().get('refreshToken')?.value;
diff --git a/app/business/user/user.type.ts b/app/business/user/user.type.ts
index 3f18be25..3014a628 100644
--- a/app/business/user/user.type.ts
+++ b/app/business/user/user.type.ts
@@ -16,6 +16,10 @@ export interface SignInRequestBody {
   password: string;
 }
 
+export interface UserDeleteRequestBody {
+  password: string;
+}
+
 export type SignInResponse = z.infer<typeof SignInResponseSchema>;
 
 export type UserInfoResponse = z.infer<typeof UserInfoResponseSchema>;

From 259ed1036c784fb18ee6692848f3edca311a98cb Mon Sep 17 00:00:00 2001
From: SeonghunYang <didtjdgns852@naver.com>
Date: Thu, 25 Apr 2024 12:41:42 +0000
Subject: [PATCH 13/39] feat: Add deleteUser function to mockDatabase and
 update user-handler.mock.ts

---
 app/mocks/db.mock.ts                    |  9 +++++++++
 app/mocks/handlers/user-handler.mock.ts | 19 ++++++++++++++++++-
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/app/mocks/db.mock.ts b/app/mocks/db.mock.ts
index a611b6de..7aafa81e 100644
--- a/app/mocks/db.mock.ts
+++ b/app/mocks/db.mock.ts
@@ -28,6 +28,7 @@ type MockDatabaseAction = {
   createUser: (user: SignUpRequestBody) => boolean;
   signIn: (userData: SignInRequestBody) => boolean;
   getUserInfo: (authId: string) => UserInfoResponse;
+  deleteUser: (authId: string, password: string) => boolean;
 };
 
 export const mockDatabase: MockDatabaseAction = {
@@ -93,6 +94,14 @@ export const mockDatabase: MockDatabaseAction = {
       isSumbitted: user.isSumbitted,
     };
   },
+  deleteUser: (authId: string, password: string) => {
+    const user = mockDatabaseStore.users.find((u) => u.authId === authId && u.password === password);
+    if (user) {
+      mockDatabaseStore.users = mockDatabaseStore.users.filter((u) => u.authId !== authId);
+      return true;
+    }
+    return false;
+  },
 };
 
 const initialState: MockDatabaseState = {
diff --git a/app/mocks/handlers/user-handler.mock.ts b/app/mocks/handlers/user-handler.mock.ts
index 7aa98163..d9a52164 100644
--- a/app/mocks/handlers/user-handler.mock.ts
+++ b/app/mocks/handlers/user-handler.mock.ts
@@ -7,6 +7,7 @@ import {
   SignInResponse,
   ValidateTokenResponse,
   UserInfoResponse,
+  UserDeleteRequestBody,
 } from '@/app/business/user/user.type';
 import { ErrorResponseData } from '@/app/utils/http/http-error-handler';
 import { StrictRequest } from 'msw';
@@ -22,7 +23,7 @@ function mockDecryptToken(token: string) {
   };
 }
 
-export const devModeAuthGuard = (request: StrictRequest<never>) => {
+export const devModeAuthGuard = (request: StrictRequest<any>) => {
   if (process.env.NODE_ENV === 'development') {
     const accessToken = request.headers.get('Authorization')?.replace('Bearer ', '');
     if (accessToken === 'undefined' || !accessToken) {
@@ -47,6 +48,22 @@ export const userHandlers = [
       accessToken: 'fake-access-token',
     });
   }),
+  http.delete<never, UserDeleteRequestBody, never>(`${API_PATH.user}/delete-me`, async ({ request }) => {
+    try {
+      const { authId } = devModeAuthGuard(request);
+      const { password } = await request.json();
+
+      const result = mockDatabase.deleteUser(authId, password);
+
+      if (result) {
+        return HttpResponse.json({ status: 200 });
+      } else {
+        return HttpResponse.json({ status: 400, message: '비밀번호가 일치하지 않습니다' }, { status: 400 });
+      }
+    } catch {
+      return HttpResponse.json({ status: 401, message: 'Unauthorized' }, { status: 401 });
+    }
+  }),
   http.get<never, never, UserInfoResponse | ErrorResponseData>(`${API_PATH.user}`, async ({ request }) => {
     try {
       const { authId } = devModeAuthGuard(request);

From 364e3127137feeca04151a68d33ac7697180b47c Mon Sep 17 00:00:00 2001
From: SeonghunYang <didtjdgns852@naver.com>
Date: Thu, 25 Apr 2024 13:01:37 +0000
Subject: [PATCH 14/39] feat: add deleteUser function and update
 UserDeleteModal component

---
 app/business/user/user.command.ts             | 64 +++++++++----------
 .../user-info-navigator/user-delete-modal.tsx |  3 +-
 2 files changed, 34 insertions(+), 33 deletions(-)

diff --git a/app/business/user/user.command.ts b/app/business/user/user.command.ts
index 4e01b2f2..6c234392 100644
--- a/app/business/user/user.command.ts
+++ b/app/business/user/user.command.ts
@@ -2,7 +2,7 @@
 
 import { FormState } from '@/app/ui/view/molecule/form/form-root';
 import { API_PATH } from '../api-path';
-import { SignUpRequestBody, SignInRequestBody, ValidateTokenResponse } from './user.type';
+import { SignUpRequestBody, SignInRequestBody, ValidateTokenResponse, UserDeleteRequestBody } from './user.type';
 import { httpErrorHandler } from '@/app/utils/http/http-error-handler';
 import { BadRequestError } from '@/app/utils/http/http-error';
 import {
@@ -23,42 +23,42 @@ export async function signOut() {
 }
 
 export async function deleteUser(prevState: FormState, formData: FormData): Promise<FormState> {
-  // const body: SignUpRequestBody = {
-  //   authId,
-  // };
-
-  // try {
-  //   const response = await fetch(`${API_PATH.user}/sign-up`, {
-  //     method: 'POST',
-  //     headers: {
-  //       'Content-Type': 'application/json',
-  //     },
-  //     body: JSON.stringify(body),
-  //   });
-
-  //   const result = await response.json();
-
-  //   httpErrorHandler(response, result);
-  // } catch (error) {
-  //   if (error instanceof BadRequestError) {
-  //     // 잘못된 요청 처리 로직
-  //     return {
-  //       isSuccess: false,
-  //       isFailure: true,
-  //       validationError: {},
-  //       message: error.message,
-  //     };
-  //   } else {
-  //     // 나머지 에러는 더 상위 수준에서 처리
-  //     throw error;
-  //   }
-  // }
+  try {
+    const body: UserDeleteRequestBody = {
+      password: formData.get('password') as string,
+    };
+
+    const response = await fetch(`${API_PATH.user}/delete-me`, {
+      method: 'DELETE',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${cookies().get('accessToken')?.value}`,
+      },
+      body: JSON.stringify(body),
+    });
+    const result = await response.json();
+
+    httpErrorHandler(response, result);
+  } 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: '회원가입이 완료되었습니다.',
+    message: '회원 탈퇴가 완료되었습니다.',
   };
 }
 
diff --git a/app/ui/user/user-info-navigator/user-delete-modal.tsx b/app/ui/user/user-info-navigator/user-delete-modal.tsx
index fd8ac051..2e18ad48 100644
--- a/app/ui/user/user-info-navigator/user-delete-modal.tsx
+++ b/app/ui/user/user-info-navigator/user-delete-modal.tsx
@@ -1,3 +1,4 @@
+'use client';
 import { DIALOG_KEY } from '@/app/utils/key/dialog.key';
 import Modal from '../../view/molecule/modal/modal';
 import Form from '../../view/molecule/form';
@@ -13,7 +14,7 @@ export default function UserDeleteModal() {
           회원탈퇴를 진행하시겠습니까? 탈퇴를 진행하면더 비밀번호 입력이 필요합니다.
         </p>
         <div className="my-4">
-          <Form action={deleteUser} id={'user-delete'}>
+          <Form failMessageControl={'toast'} action={deleteUser} id={'user-delete'}>
             <Form.PasswordInput label="비밀번호" id="password" placeholder="비밀번호를 입력하세요" required={true} />
             <Form.SubmitButton label="탈퇴하기" position="center" variant="primary" />
           </Form>

From 773c350f6beb826d6edbb761961fcc2f656d403b Mon Sep 17 00:00:00 2001
From: SeonghunYang <didtjdgns852@naver.com>
Date: Thu, 16 May 2024 05:33:05 +0000
Subject: [PATCH 15/39] remove: Remove FloatingComponentContainer and add
 UserDeleteModal to MyPage

---
 app/(sub-page)/my/floating-component-container.tsx | 9 ---------
 app/(sub-page)/my/page.tsx                         | 3 ++-
 2 files changed, 2 insertions(+), 10 deletions(-)
 delete mode 100644 app/(sub-page)/my/floating-component-container.tsx

diff --git a/app/(sub-page)/my/floating-component-container.tsx b/app/(sub-page)/my/floating-component-container.tsx
deleted file mode 100644
index 7be873eb..00000000
--- a/app/(sub-page)/my/floating-component-container.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import UserDeleteModal from '@/app/ui/user/user-info-navigator/user-delete-modal';
-
-export default function FloatingComponentContainer() {
-  return (
-    <>
-      <UserDeleteModal />
-    </>
-  );
-}
diff --git a/app/(sub-page)/my/page.tsx b/app/(sub-page)/my/page.tsx
index 15686c72..ba1bd37b 100644
--- a/app/(sub-page)/my/page.tsx
+++ b/app/(sub-page)/my/page.tsx
@@ -8,6 +8,7 @@ import { DIALOG_KEY } from '@/app/utils/key/dialog-key.util';
 import { Suspense } from 'react';
 import FloatingComponentContainer from './floating-component-container';
 import MyResultContainer from './components/my-result-container';
+import UserDeleteModal from '@/app/ui/user/user-info-navigator/user-delete-modal';
 
 export default function MyPage() {
   return (
@@ -26,7 +27,7 @@ export default function MyPage() {
       <Drawer drawerKey={DIALOG_KEY.LECTURE_SEARCH}>
         <LectureSearch />
       </Drawer>
-      <FloatingComponentContainer />
+      <UserDeleteModal />
     </>
   );
 }

From c3bc43838f5ee51c1d629a381f5f53491d75d1df Mon Sep 17 00:00:00 2001
From: SeonghunYang <didtjdgns852@naver.com>
Date: Thu, 16 May 2024 05:33:48 +0000
Subject: [PATCH 16/39] fix: Fix typo in dialog key for user delete
 functionality

---
 app/store/dialog.ts                                    | 2 +-
 app/ui/user/user-info-navigator/user-delete-button.tsx | 2 +-
 app/ui/user/user-info-navigator/user-delete-modal.tsx  | 2 +-
 app/utils/key/dialog-key.util.ts                       | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/store/dialog.ts b/app/store/dialog.ts
index 42213922..049a8ee4 100644
--- a/app/store/dialog.ts
+++ b/app/store/dialog.ts
@@ -5,7 +5,7 @@ const initialState = {
   [DIALOG_KEY.RESULT_CATEGORY]: false,
   [DIALOG_KEY.DIALOG_TEST]: true,
   [DIALOG_KEY.LECTURE_SEARCH]: false,
-  [DIALOG_KEY.USER_DEELETE]: false,
+  [DIALOG_KEY.USER_DELETE]: false,
 };
 
 const dialogAtom = atom(initialState);
diff --git a/app/ui/user/user-info-navigator/user-delete-button.tsx b/app/ui/user/user-info-navigator/user-delete-button.tsx
index ee7d15bc..c64aee1b 100644
--- a/app/ui/user/user-info-navigator/user-delete-button.tsx
+++ b/app/ui/user/user-info-navigator/user-delete-button.tsx
@@ -4,7 +4,7 @@ import { DIALOG_KEY } from '@/app/utils/key/dialog-key.util';
 import useDialog from '@/app/hooks/useDialog';
 
 export default function UserDeleteButton() {
-  const { toggle } = useDialog(DIALOG_KEY.USER_DEELETE);
+  const { toggle } = useDialog(DIALOG_KEY.USER_DELETE);
 
   const handleModalToggle = () => {
     toggle();
diff --git a/app/ui/user/user-info-navigator/user-delete-modal.tsx b/app/ui/user/user-info-navigator/user-delete-modal.tsx
index 3c939b0d..8bd49100 100644
--- a/app/ui/user/user-info-navigator/user-delete-modal.tsx
+++ b/app/ui/user/user-info-navigator/user-delete-modal.tsx
@@ -6,7 +6,7 @@ import { DIALOG_KEY } from '@/app/utils/key/dialog-key.util';
 
 export default function UserDeleteModal() {
   return (
-    <Modal modalKey={DIALOG_KEY.USER_DEELETE}>
+    <Modal modalKey={DIALOG_KEY.USER_DELETE}>
       <div className="max-w-sm mx-auto my-12 p-6 border rounded-lg shadow-md bg-white">
         <h2 className="text-xl font-bold text-center">회원 탈퇴</h2>
         <div className="h-1 w-10 bg-blue-600 mx-auto my-3" />
diff --git a/app/utils/key/dialog-key.util.ts b/app/utils/key/dialog-key.util.ts
index f799df8e..a97c77ae 100644
--- a/app/utils/key/dialog-key.util.ts
+++ b/app/utils/key/dialog-key.util.ts
@@ -2,7 +2,7 @@ export const DIALOG_KEY = {
   RESULT_CATEGORY: 'RESULT_CATEGORY',
   DIALOG_TEST: 'DIALOG_TEST',
   LECTURE_SEARCH: 'LECTURE_SEARCH',
-  USER_DEELETE: 'USER_DEELETE',
+  USER_DELETE: 'USER_DELETE',
 } as const;
 
 export type DialogKey = (typeof DIALOG_KEY)[keyof typeof DIALOG_KEY];

From b6c6ae67010e581dbcf09b1cbb94652433cb17ba Mon Sep 17 00:00:00 2001
From: SeonghunYang <didtjdgns852@naver.com>
Date: Thu, 16 May 2024 05:35:08 +0000
Subject: [PATCH 17/39] fix: Fix middleware.ts to use consistent variable
 naming conventions

---
 middleware.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/middleware.ts b/middleware.ts
index 285d5042..909048ef 100644
--- a/middleware.ts
+++ b/middleware.ts
@@ -30,12 +30,12 @@ async function getAuth(request: NextRequest): Promise<{
   };
 }
 
-const allowdOnlyGuestPath = ['/sign-in', '/sign-up', '/find-password', '/find-id'];
-const allowdGuestPath = ['/', '/tutorial', ...allowdOnlyGuestPath];
+const allowedOnlyGuestPath = ['/sign-in', '/sign-up', '/find-password', '/find-id'];
+const allowedGuestPath = ['/', '/tutorial', ...allowedOnlyGuestPath];
 
 function isAllowedGuestPath(path: string, strict: boolean = false) {
-  const allowdPath = strict ? allowdOnlyGuestPath : allowdGuestPath;
-  return allowdPath.some((allowedPath) => path.startsWith(allowedPath));
+  const allowedPath = strict ? allowedOnlyGuestPath : allowedGuestPath;
+  return allowedPath.some((allowedPath) => path.startsWith(allowedPath));
 }
 
 export async function middleware(request: NextRequest) {

From 336fd901aba1905991b9f722afa1e28c14f39007 Mon Sep 17 00:00:00 2001
From: SeonghunYang <didtjdgns852@naver.com>
Date: Thu, 16 May 2024 05:43:19 +0000
Subject: [PATCH 18/39] remove: Remove FloatingComponentContainer and add
 UserDeleteModal to MyPage

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

diff --git a/app/(sub-page)/my/page.tsx b/app/(sub-page)/my/page.tsx
index ba1bd37b..59b3552a 100644
--- a/app/(sub-page)/my/page.tsx
+++ b/app/(sub-page)/my/page.tsx
@@ -6,7 +6,6 @@ import ContentContainer from '@/app/ui/view/atom/content-container';
 import Drawer from '@/app/ui/view/molecule/drawer/drawer';
 import { DIALOG_KEY } from '@/app/utils/key/dialog-key.util';
 import { Suspense } from 'react';
-import FloatingComponentContainer from './floating-component-container';
 import MyResultContainer from './components/my-result-container';
 import UserDeleteModal from '@/app/ui/user/user-info-navigator/user-delete-modal';
 

From 15493c554d6bd26a8ff815339b9f70512a6ec8e1 Mon Sep 17 00:00:00 2001
From: SeonghunYang <didtjdgns852@naver.com>
Date: Thu, 16 May 2024 05:53:11 +0000
Subject: [PATCH 19/39] feat: Update NavigationBar component to include
 HamburgerMenuIcon for responsive design

---
 app/ui/view/molecule/navigation-bar.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/app/ui/view/molecule/navigation-bar.tsx b/app/ui/view/molecule/navigation-bar.tsx
index 905c0ee9..443f5b89 100644
--- a/app/ui/view/molecule/navigation-bar.tsx
+++ b/app/ui/view/molecule/navigation-bar.tsx
@@ -1,10 +1,15 @@
 import Image from 'next/image';
 import logo from '../../../../public/assets/logo.svg';
+import { HamburgerMenuIcon } from '@radix-ui/react-icons';
+import Responsive from '../../responsive';
 
 export default function NavigationBar() {
   return (
-    <div className="absolute p-4 border-b-[1px] w-full z-1">
+    <div className="absolute flex justify-between items-center p-4 border-b-[1px] w-full z-2">
       <Image className="md:h-10 h-7 w-[110px] md:w-[150px]" width={150} height={100} src={logo} alt="main-logo" />
+      <Responsive maxWidth={768}>
+        <HamburgerMenuIcon className="w-6 h-6 text-white" />
+      </Responsive>
     </div>
   );
 }

From 740215f32b6a78bda42a56b5efa2a8646fe1b95c Mon Sep 17 00:00:00 2001
From: SeonghunYang <didtjdgns852@naver.com>
Date: Thu, 16 May 2024 05:57:50 +0000
Subject: [PATCH 20/39] refactor: Update NavigationBar component to include
 SideNavigationBar for responsive design

---
 app/ui/view/molecule/navigation-bar.tsx      |   4 +-
 app/ui/view/molecule/sheet/sheet.tsx         | 117 +++++++++++++++++++
 app/ui/view/molecule/side-navigation-bar.tsx |   5 +
 3 files changed, 124 insertions(+), 2 deletions(-)
 create mode 100644 app/ui/view/molecule/sheet/sheet.tsx
 create mode 100644 app/ui/view/molecule/side-navigation-bar.tsx

diff --git a/app/ui/view/molecule/navigation-bar.tsx b/app/ui/view/molecule/navigation-bar.tsx
index 443f5b89..b062287d 100644
--- a/app/ui/view/molecule/navigation-bar.tsx
+++ b/app/ui/view/molecule/navigation-bar.tsx
@@ -1,14 +1,14 @@
 import Image from 'next/image';
 import logo from '../../../../public/assets/logo.svg';
-import { HamburgerMenuIcon } from '@radix-ui/react-icons';
 import Responsive from '../../responsive';
+import SideNavigationBar from './side-navigation-bar';
 
 export default function NavigationBar() {
   return (
     <div className="absolute flex justify-between items-center p-4 border-b-[1px] w-full z-2">
       <Image className="md:h-10 h-7 w-[110px] md:w-[150px]" width={150} height={100} src={logo} alt="main-logo" />
       <Responsive maxWidth={768}>
-        <HamburgerMenuIcon className="w-6 h-6 text-white" />
+        <SideNavigationBar />
       </Responsive>
     </div>
   );
diff --git a/app/ui/view/molecule/sheet/sheet.tsx b/app/ui/view/molecule/sheet/sheet.tsx
new file mode 100644
index 00000000..5eb41714
--- /dev/null
+++ b/app/ui/view/molecule/sheet/sheet.tsx
@@ -0,0 +1,117 @@
+'use client';
+
+import * as React from 'react';
+import * as SheetPrimitive from '@radix-ui/react-dialog';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { X } from 'lucide-react';
+
+import { cn } from '@/app/utils/shadcn/utils';
+
+const Sheet = SheetPrimitive.Root;
+
+const SheetTrigger = SheetPrimitive.Trigger;
+
+const SheetClose = SheetPrimitive.Close;
+
+const SheetPortal = SheetPrimitive.Portal;
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Overlay
+    className={cn(
+      'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      className,
+    )}
+    {...props}
+    ref={ref}
+  />
+));
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
+
+const sheetVariants = cva(
+  'fixed z-50 gap-4 bg-white p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500 dark:bg-slate-950',
+  {
+    variants: {
+      side: {
+        top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
+        bottom:
+          'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+        left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
+        right:
+          'inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
+      },
+    },
+    defaultVariants: {
+      side: 'right',
+    },
+  },
+);
+
+interface SheetContentProps
+  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+    VariantProps<typeof sheetVariants> {}
+
+const SheetContent = React.forwardRef<React.ElementRef<typeof SheetPrimitive.Content>, SheetContentProps>(
+  ({ side = 'right', className, children, ...props }, ref) => (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}>
+        {children}
+        <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-slate-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-slate-100 dark:ring-offset-slate-950 dark:focus:ring-slate-300 dark:data-[state=open]:bg-slate-800">
+          <X className="h-4 w-4" />
+          <span className="sr-only">Close</span>
+        </SheetPrimitive.Close>
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  ),
+);
+SheetContent.displayName = SheetPrimitive.Content.displayName;
+
+const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn('flex flex-col space-y-2 text-center sm:text-left', className)} {...props} />
+);
+SheetHeader.displayName = 'SheetHeader';
+
+const SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)} {...props} />
+);
+SheetFooter.displayName = 'SheetFooter';
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    className={cn('text-lg font-semibold text-slate-950 dark:text-slate-50', className)}
+    {...props}
+  />
+));
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description
+    ref={ref}
+    className={cn('text-sm text-slate-500 dark:text-slate-400', className)}
+    {...props}
+  />
+));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
+
+export {
+  Sheet,
+  SheetPortal,
+  SheetOverlay,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+};
diff --git a/app/ui/view/molecule/side-navigation-bar.tsx b/app/ui/view/molecule/side-navigation-bar.tsx
new file mode 100644
index 00000000..bc29393e
--- /dev/null
+++ b/app/ui/view/molecule/side-navigation-bar.tsx
@@ -0,0 +1,5 @@
+import { HamburgerMenuIcon } from '@radix-ui/react-icons';
+
+export default function SideNavigationBar() {
+  return <HamburgerMenuIcon className="w-6 h-6 text-white" />;
+}

From 3ae0765a0dcc488cc2bc3324afc7415ea42fe6c8 Mon Sep 17 00:00:00 2001
From: SeonghunYang <didtjdgns852@naver.com>
Date: Thu, 16 May 2024 06:10:45 +0000
Subject: [PATCH 21/39] feat: Update SideNavigationBar component to include
 Sheet for additional functionality

---
 app/ui/view/molecule/side-navigation-bar.tsx | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/app/ui/view/molecule/side-navigation-bar.tsx b/app/ui/view/molecule/side-navigation-bar.tsx
index bc29393e..f0376b34 100644
--- a/app/ui/view/molecule/side-navigation-bar.tsx
+++ b/app/ui/view/molecule/side-navigation-bar.tsx
@@ -1,5 +1,22 @@
+'use client';
 import { HamburgerMenuIcon } from '@radix-ui/react-icons';
+import { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetDescription } from './sheet/sheet';
 
 export default function SideNavigationBar() {
-  return <HamburgerMenuIcon className="w-6 h-6 text-white" />;
+  return (
+    <Sheet>
+      <SheetTrigger className="h-6">
+        <HamburgerMenuIcon className="w-6 h-6 text-white" />;
+      </SheetTrigger>
+      <SheetContent className="z-3">
+        <SheetHeader>
+          <SheetTitle>Are you absolutely sure?</SheetTitle>
+          <SheetDescription>
+            This action cannot be undone. This will permanently delete your account and remove your data from our
+            servers.
+          </SheetDescription>
+        </SheetHeader>
+      </SheetContent>
+    </Sheet>
+  );
 }

From 23499ba0c5a4334db97a176dab0b0fc8dc29d8fe Mon Sep 17 00:00:00 2001
From: SeonghunYang <didtjdgns852@naver.com>
Date: Thu, 16 May 2024 06:13:15 +0000
Subject: [PATCH 22/39] refactor: Refactor file paths for NavigationBar
 component to match new folder structure

---
 .../molecule => (sub-page)/components}/navigation-bar.tsx     | 4 ++--
 app/(sub-page)/layout.tsx                                     | 2 +-
 app/layout.tsx                                                | 2 +-
 app/page.tsx                                                  | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)
 rename app/{ui/view/molecule => (sub-page)/components}/navigation-bar.tsx (78%)

diff --git a/app/ui/view/molecule/navigation-bar.tsx b/app/(sub-page)/components/navigation-bar.tsx
similarity index 78%
rename from app/ui/view/molecule/navigation-bar.tsx
rename to app/(sub-page)/components/navigation-bar.tsx
index b062287d..545a6b25 100644
--- a/app/ui/view/molecule/navigation-bar.tsx
+++ b/app/(sub-page)/components/navigation-bar.tsx
@@ -1,7 +1,7 @@
 import Image from 'next/image';
 import logo from '../../../../public/assets/logo.svg';
-import Responsive from '../../responsive';
-import SideNavigationBar from './side-navigation-bar';
+import Responsive from '../../ui/responsive';
+import SideNavigationBar from '../../ui/view/molecule/side-navigation-bar';
 
 export default function NavigationBar() {
   return (
diff --git a/app/(sub-page)/layout.tsx b/app/(sub-page)/layout.tsx
index 50f06eed..03ec2911 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';
+import NavigationBar from './components/navigation-bar';
 
 interface LayoutProps {
   children: React.ReactNode;
diff --git a/app/layout.tsx b/app/layout.tsx
index 0936e932..5449262d 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,6 +1,6 @@
 import type { Metadata } from 'next';
 import './globals.css';
-import NavigationBar from './ui/view/molecule/navigation-bar';
+import NavigationBar from './(sub-page)/components/navigation-bar';
 import { Toaster } from './ui/view/molecule/toast/toaster';
 import Provider from './provider';
 import MSWComponent from './mocks/msw-component.mock';
diff --git a/app/page.tsx b/app/page.tsx
index 3ea63295..b704d5f5 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -3,7 +3,7 @@ import mainBookBackground from '../public/assets/main-book-background.png';
 import mainMyongjiLogo from '../public/assets/main-myongji-logo.png';
 import graduationCap from '../public/assets/graduation-cap.png';
 import Responsive from './ui/responsive';
-import NavigationBar from './ui/view/molecule/navigation-bar';
+import NavigationBar from './(sub-page)/components/navigation-bar';
 import Button from './ui/view/atom/button/button';
 import Link from 'next/link';
 

From 7d929d515c57b460f325c0ecca6312430d0de870 Mon Sep 17 00:00:00 2001
From: SeonghunYang <didtjdgns852@naver.com>
Date: Thu, 16 May 2024 06:14:02 +0000
Subject: [PATCH 23/39] refactor: Refactor file paths for NavigationBar and
 SideNavigationBar components to match new folder structure

---
 app/(sub-page)/components/navigation-bar.tsx             | 2 +-
 .../components}/side-navigation-bar.tsx                  | 9 ++++++++-
 2 files changed, 9 insertions(+), 2 deletions(-)
 rename app/{ui/view/molecule => (sub-page)/components}/side-navigation-bar.tsx (81%)

diff --git a/app/(sub-page)/components/navigation-bar.tsx b/app/(sub-page)/components/navigation-bar.tsx
index 545a6b25..02367f14 100644
--- a/app/(sub-page)/components/navigation-bar.tsx
+++ b/app/(sub-page)/components/navigation-bar.tsx
@@ -1,7 +1,7 @@
 import Image from 'next/image';
 import logo from '../../../../public/assets/logo.svg';
 import Responsive from '../../ui/responsive';
-import SideNavigationBar from '../../ui/view/molecule/side-navigation-bar';
+import SideNavigationBar from './side-navigation-bar';
 
 export default function NavigationBar() {
   return (
diff --git a/app/ui/view/molecule/side-navigation-bar.tsx b/app/(sub-page)/components/side-navigation-bar.tsx
similarity index 81%
rename from app/ui/view/molecule/side-navigation-bar.tsx
rename to app/(sub-page)/components/side-navigation-bar.tsx
index f0376b34..2f7f4e62 100644
--- a/app/ui/view/molecule/side-navigation-bar.tsx
+++ b/app/(sub-page)/components/side-navigation-bar.tsx
@@ -1,6 +1,13 @@
 'use client';
 import { HamburgerMenuIcon } from '@radix-ui/react-icons';
-import { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetDescription } from './sheet/sheet';
+import {
+  Sheet,
+  SheetTrigger,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetDescription,
+} from '../../ui/view/molecule/sheet/sheet';
 
 export default function SideNavigationBar() {
   return (

From 01d29df3be1f0cea6558b23dd546c43af2fe18ec Mon Sep 17 00:00:00 2001
From: SeonghunYang <didtjdgns852@naver.com>
Date: Thu, 16 May 2024 06:31:33 +0000
Subject: [PATCH 24/39] refactor: Refactor file paths for NavigationBar and
 SideNavigationBar components

---
 app/(sub-page)/components/navigation-bar.tsx  |  5 ++--
 .../components/side-navigation-bar.tsx        | 23 ++++++-------------
 2 files changed, 10 insertions(+), 18 deletions(-)

diff --git a/app/(sub-page)/components/navigation-bar.tsx b/app/(sub-page)/components/navigation-bar.tsx
index 02367f14..c377ab41 100644
--- a/app/(sub-page)/components/navigation-bar.tsx
+++ b/app/(sub-page)/components/navigation-bar.tsx
@@ -1,14 +1,15 @@
 import Image from 'next/image';
-import logo from '../../../../public/assets/logo.svg';
+import logo from '../../../public/assets/logo.svg';
 import Responsive from '../../ui/responsive';
 import SideNavigationBar from './side-navigation-bar';
+import UserInfoNavigator from '@/app/ui/user/user-info-navigator/user-info-navigator';
 
 export default function NavigationBar() {
   return (
     <div className="absolute flex justify-between items-center p-4 border-b-[1px] w-full z-2">
       <Image className="md:h-10 h-7 w-[110px] md:w-[150px]" width={150} height={100} src={logo} alt="main-logo" />
       <Responsive maxWidth={768}>
-        <SideNavigationBar />
+        <SideNavigationBar header={<UserInfoNavigator />} />
       </Responsive>
     </div>
   );
diff --git a/app/(sub-page)/components/side-navigation-bar.tsx b/app/(sub-page)/components/side-navigation-bar.tsx
index 2f7f4e62..56bf9009 100644
--- a/app/(sub-page)/components/side-navigation-bar.tsx
+++ b/app/(sub-page)/components/side-navigation-bar.tsx
@@ -1,28 +1,19 @@
 'use client';
 import { HamburgerMenuIcon } from '@radix-ui/react-icons';
-import {
-  Sheet,
-  SheetTrigger,
-  SheetContent,
-  SheetHeader,
-  SheetTitle,
-  SheetDescription,
-} from '../../ui/view/molecule/sheet/sheet';
+import { Sheet, SheetTrigger, SheetContent, SheetHeader } from '../../ui/view/molecule/sheet/sheet';
 
-export default function SideNavigationBar() {
+type SideNavigationBarProps = {
+  header: React.ReactNode;
+};
+
+export default function SideNavigationBar({ header }: SideNavigationBarProps) {
   return (
     <Sheet>
       <SheetTrigger className="h-6">
         <HamburgerMenuIcon className="w-6 h-6 text-white" />;
       </SheetTrigger>
       <SheetContent className="z-3">
-        <SheetHeader>
-          <SheetTitle>Are you absolutely sure?</SheetTitle>
-          <SheetDescription>
-            This action cannot be undone. This will permanently delete your account and remove your data from our
-            servers.
-          </SheetDescription>
-        </SheetHeader>
+        <SheetHeader>{header}</SheetHeader>
       </SheetContent>
     </Sheet>
   );

From d738afc85039f37b47778beefcfc8ced000afae9 Mon Sep 17 00:00:00 2001
From: SeonghunYang <didtjdgns852@naver.com>
Date: Thu, 16 May 2024 06:40:06 +0000
Subject: [PATCH 25/39] refactor: Refactor user-info-navigator.tsx to improve
 profile picture display and layout

---
 .../user-info-navigator.tsx                   | 20 ++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/app/ui/user/user-info-navigator/user-info-navigator.tsx b/app/ui/user/user-info-navigator/user-info-navigator.tsx
index c544e78d..e7e872a7 100644
--- a/app/ui/user/user-info-navigator/user-info-navigator.tsx
+++ b/app/ui/user/user-info-navigator/user-info-navigator.tsx
@@ -9,21 +9,23 @@ export default async function UserInfoNavigator() {
   const userInfo = (await fetchUserInfo()) as z.infer<typeof UserInfoResponseSchema>;
 
   return (
-    <div className="flex flex-col items-center p-4 ">
-      <Avatar className="w-24 h-24" alt="Profile picture" src={'/assets/profile-image.png'} />
+    <div className="flex md:flex-col items-center md:p-4 space-x-4 md:space-x-0">
+      <Avatar className="w-20 h-20 md:w-24 md:h-24" alt="Profile picture" src={'/assets/profile-image.png'} />
 
-      <div className="my-5 text-lg">
-        <span className="font-semibold">{userInfo.studentName}</span>
-        <span>님</span>
+      <div className="flex flex-col items-start md:items-center">
+        <div className="md:my-5 md:text-lg ">
+          <span className="font-semibold">{userInfo.studentName}</span>
+          <span>님</span>
+        </div>
+        <div className="mb-3 md:text-sm text-xs truncate">{userInfo.completionDivision[0].major}</div>
+        <div className="md:text-sm text-xs text-gray-400">{userInfo.studentNumber}</div>
       </div>
-      <div className="mb-3 text-sm">{userInfo.completionDivision[0].major}</div>
-      <div className="text-sm text-gray-400">{userInfo.studentNumber}</div>
-      <div className="mt-9">
+      {/* <div className="mt-9">
         <SignOutButton />
       </div>
       <div className="mt-2">
         <UserDeleteButton />
-      </div>
+      </div> */}
     </div>
   );
 }

From 5fed2ddd367c43cca576be1890c9c1f915681992 Mon Sep 17 00:00:00 2001
From: SeonghunYang <didtjdgns852@naver.com>
Date: Thu, 16 May 2024 06:42:46 +0000
Subject: [PATCH 26/39] feat: Add SignOutButton and UserDeleteButton to
 UserInfoNavigator component

---
 app/(sub-page)/my/page.tsx                              | 6 ++++++
 app/ui/user/user-info-navigator/user-info-navigator.tsx | 9 ---------
 2 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/app/(sub-page)/my/page.tsx b/app/(sub-page)/my/page.tsx
index 59b3552a..46c67025 100644
--- a/app/(sub-page)/my/page.tsx
+++ b/app/(sub-page)/my/page.tsx
@@ -8,6 +8,8 @@ import { DIALOG_KEY } from '@/app/utils/key/dialog-key.util';
 import { Suspense } from 'react';
 import MyResultContainer from './components/my-result-container';
 import UserDeleteModal from '@/app/ui/user/user-info-navigator/user-delete-modal';
+import SignOutButton from '@/app/ui/user/user-info-navigator/sign-out-button';
+import UserDeleteButton from '@/app/ui/user/user-info-navigator/user-delete-button';
 
 export default function MyPage() {
   return (
@@ -16,6 +18,10 @@ export default function MyPage() {
         <div className="hidden lg:w-[30%] lg:block">
           <Suspense fallback={<UserInfoNavigatorSkeleton />}>
             <UserInfoNavigator />
+            <div className="flex flex-col items-center mt-9 space-y-2">
+              <SignOutButton />
+              <UserDeleteButton />
+            </div>
           </Suspense>
         </div>
         <div className="w-full lg:w-[70%] lg:px-[20px] pt-12 pb-2 flex flex-col gap-12">
diff --git a/app/ui/user/user-info-navigator/user-info-navigator.tsx b/app/ui/user/user-info-navigator/user-info-navigator.tsx
index e7e872a7..5ed33858 100644
--- a/app/ui/user/user-info-navigator/user-info-navigator.tsx
+++ b/app/ui/user/user-info-navigator/user-info-navigator.tsx
@@ -1,7 +1,5 @@
 import { UserInfoResponseSchema } from '@/app/business/user/user.validation';
 import Avatar from '../../view/atom/avatar/avatar';
-import SignOutButton from './sign-out-button';
-import UserDeleteButton from './user-delete-button';
 import { fetchUserInfo } from '@/app/business/user/user.query';
 import { z } from 'zod';
 
@@ -11,7 +9,6 @@ export default async function UserInfoNavigator() {
   return (
     <div className="flex md:flex-col items-center md:p-4 space-x-4 md:space-x-0">
       <Avatar className="w-20 h-20 md:w-24 md:h-24" alt="Profile picture" src={'/assets/profile-image.png'} />
-
       <div className="flex flex-col items-start md:items-center">
         <div className="md:my-5 md:text-lg ">
           <span className="font-semibold">{userInfo.studentName}</span>
@@ -20,12 +17,6 @@ export default async function UserInfoNavigator() {
         <div className="mb-3 md:text-sm text-xs truncate">{userInfo.completionDivision[0].major}</div>
         <div className="md:text-sm text-xs text-gray-400">{userInfo.studentNumber}</div>
       </div>
-      {/* <div className="mt-9">
-        <SignOutButton />
-      </div>
-      <div className="mt-2">
-        <UserDeleteButton />
-      </div> */}
     </div>
   );
 }

From dc758b5becaec955bee254b60e46cb0b9748c092 Mon Sep 17 00:00:00 2001
From: SeonghunYang <didtjdgns852@naver.com>
Date: Thu, 16 May 2024 07:02:19 +0000
Subject: [PATCH 27/39] refactor: Refactor file paths for NavigationBar and
 SideNavigationBar components to match new folder structure

---
 app/(sub-page)/components/navigation-bar.tsx      | 13 ++++++++++++-
 app/(sub-page)/components/side-navigation-bar.tsx | 13 ++++++++++---
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/app/(sub-page)/components/navigation-bar.tsx b/app/(sub-page)/components/navigation-bar.tsx
index c377ab41..9760e9a5 100644
--- a/app/(sub-page)/components/navigation-bar.tsx
+++ b/app/(sub-page)/components/navigation-bar.tsx
@@ -3,13 +3,24 @@ import logo from '../../../public/assets/logo.svg';
 import Responsive from '../../ui/responsive';
 import SideNavigationBar from './side-navigation-bar';
 import UserInfoNavigator from '@/app/ui/user/user-info-navigator/user-info-navigator';
+import SignOutButton from '@/app/ui/user/user-info-navigator/sign-out-button';
+import UserDeleteButton from '@/app/ui/user/user-info-navigator/user-delete-button';
 
 export default function NavigationBar() {
   return (
     <div className="absolute flex justify-between items-center p-4 border-b-[1px] w-full z-2">
       <Image className="md:h-10 h-7 w-[110px] md:w-[150px]" width={150} height={100} src={logo} alt="main-logo" />
       <Responsive maxWidth={768}>
-        <SideNavigationBar header={<UserInfoNavigator />} />
+        <SideNavigationBar
+          header={<UserInfoNavigator />}
+          content={<div>콘텐츠</div>}
+          footer={
+            <div className="flex flex-col items-center space-y-2">
+              <SignOutButton />
+              <UserDeleteButton />
+            </div>
+          }
+        />
       </Responsive>
     </div>
   );
diff --git a/app/(sub-page)/components/side-navigation-bar.tsx b/app/(sub-page)/components/side-navigation-bar.tsx
index 56bf9009..f2e401b8 100644
--- a/app/(sub-page)/components/side-navigation-bar.tsx
+++ b/app/(sub-page)/components/side-navigation-bar.tsx
@@ -1,19 +1,26 @@
 'use client';
 import { HamburgerMenuIcon } from '@radix-ui/react-icons';
-import { Sheet, SheetTrigger, SheetContent, SheetHeader } from '../../ui/view/molecule/sheet/sheet';
+import { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetFooter } from '../../ui/view/molecule/sheet/sheet';
 
 type SideNavigationBarProps = {
   header: React.ReactNode;
+  footer: React.ReactNode;
+  content: React.ReactNode;
 };
 
-export default function SideNavigationBar({ header }: SideNavigationBarProps) {
+export default function SideNavigationBar({ header, content, footer }: SideNavigationBarProps) {
   return (
     <Sheet>
       <SheetTrigger className="h-6">
         <HamburgerMenuIcon className="w-6 h-6 text-white" />;
       </SheetTrigger>
       <SheetContent className="z-3">
-        <SheetHeader>{header}</SheetHeader>
+        <div className="flex h-full flex-col justify-between">
+          <SheetHeader>{header}</SheetHeader>
+          <div className="w-full h-1 rounded-full my-4 bg-gray-200" />
+          <div className="h-full">{content}</div>
+          <SheetFooter>{footer}</SheetFooter>
+        </div>
       </SheetContent>
     </Sheet>
   );

From 630192c6015a74d797c139a9c751791002781c53 Mon Sep 17 00:00:00 2001
From: SeonghunYang <didtjdgns852@naver.com>
Date: Thu, 16 May 2024 07:31:34 +0000
Subject: [PATCH 28/39] refactor: Refactor user.query.ts and user.validation.ts
 to handle unauthorized errors

---
 app/business/user/user.query.ts               | 13 +++++++
 app/business/user/user.validation.ts          |  4 ++
 app/ui/user/user-info-card/user-info-card.tsx | 14 +++----
 .../user-info-navigator.tsx                   | 39 ++++++++++++++++---
 4 files changed, 56 insertions(+), 14 deletions(-)

diff --git a/app/business/user/user.query.ts b/app/business/user/user.query.ts
index cd759e03..2512ed97 100644
--- a/app/business/user/user.query.ts
+++ b/app/business/user/user.query.ts
@@ -5,6 +5,19 @@ import { cookies } from 'next/headers';
 import { isValidation } from '@/app/utils/zod/validation.util';
 import { InitUserInfoResponse, UserInfoResponse } from './user.type';
 import { UserInfoResponseSchema, InitUserInfoResponseSchema } from './user.validation';
+import { UnauthorizedError } from '@/app/utils/http/http-error';
+
+export async function auth(): Promise<InitUserInfoResponse | UserInfoResponse | undefined> {
+  try {
+    const result = await fetchUserInfo();
+    return result;
+  } catch (error) {
+    if (error instanceof UnauthorizedError) {
+      return;
+    }
+    throw error;
+  }
+}
 
 export async function fetchUserInfo(): Promise<InitUserInfoResponse | UserInfoResponse> {
   try {
diff --git a/app/business/user/user.validation.ts b/app/business/user/user.validation.ts
index 89596799..a80d5763 100644
--- a/app/business/user/user.validation.ts
+++ b/app/business/user/user.validation.ts
@@ -1,4 +1,5 @@
 import { z } from 'zod';
+import { UserInfoResponse, InitUserInfoResponse } from './user.type';
 
 export const UserInfoResponseSchema = z.object({
   studentNumber: z.string(),
@@ -71,3 +72,6 @@ export const SignUpFormSchema = z
       });
     }
   });
+export function isInitUser(x: UserInfoResponse | InitUserInfoResponse): x is InitUserInfoResponse {
+  return typeof x.studentName === null;
+}
diff --git a/app/ui/user/user-info-card/user-info-card.tsx b/app/ui/user/user-info-card/user-info-card.tsx
index 949a83e1..2b9807bf 100644
--- a/app/ui/user/user-info-card/user-info-card.tsx
+++ b/app/ui/user/user-info-card/user-info-card.tsx
@@ -2,18 +2,14 @@ import { fetchUserInfo } from '@/app/business/user/user.query';
 import { InitUserInfoResponse, UserInfoResponse } from '@/app/business/user/user.type';
 import InitUserAnnounce from './init-user-announce';
 import UserInfoContent from './user-info-content';
+import { isInitUser } from '@/app/business/user/user.validation';
+
+function renderUserInfo(data: UserInfoResponse | InitUserInfoResponse) {
+  isInitUser(data) ? <InitUserAnnounce /> : <UserInfoContent data={data} />;
+}
 
 async function UserInfoCard() {
   const data = await fetchUserInfo();
-
-  function isInitUser(x: UserInfoResponse | InitUserInfoResponse): x is InitUserInfoResponse {
-    return typeof x.studentName === null;
-  }
-
-  function renderUserInfo(data: UserInfoResponse | InitUserInfoResponse) {
-    isInitUser(data) ? <InitUserAnnounce /> : <UserInfoContent data={data} />;
-  }
-
   return <>{renderUserInfo(data)}</>;
 }
 
diff --git a/app/ui/user/user-info-navigator/user-info-navigator.tsx b/app/ui/user/user-info-navigator/user-info-navigator.tsx
index 5ed33858..32be3f4e 100644
--- a/app/ui/user/user-info-navigator/user-info-navigator.tsx
+++ b/app/ui/user/user-info-navigator/user-info-navigator.tsx
@@ -1,20 +1,49 @@
 import { UserInfoResponseSchema } from '@/app/business/user/user.validation';
 import Avatar from '../../view/atom/avatar/avatar';
-import { fetchUserInfo } from '@/app/business/user/user.query';
-import { z } from 'zod';
+import { auth, fetchUserInfo } from '@/app/business/user/user.query';
+import { isInitUser } from '@/app/business/user/user.validation';
+import { InitUserInfoResponse, UserInfoResponse } from '@/app/business/user/user.type';
+
+function formatUserInfo(userInfo: InitUserInfoResponse | UserInfoResponse | undefined): {
+  name: string;
+  major: string;
+  studentNumber: string;
+} {
+  if (!userInfo) {
+    return {
+      name: 'GUEST',
+      major: '로그인이 필요합니다.',
+      studentNumber: '',
+    };
+  }
+
+  if (isInitUser(userInfo)) {
+    return {
+      name: '명지대학우..?',
+      major: '성적표를 입력하고, 졸업 여부를 확인하세요',
+      studentNumber: userInfo.studentNumber,
+    };
+  }
+
+  return {
+    name: userInfo.studentName,
+    major: userInfo.completionDivision[0].major,
+    studentNumber: userInfo.studentNumber,
+  };
+}
 
 export default async function UserInfoNavigator() {
-  const userInfo = (await fetchUserInfo()) as z.infer<typeof UserInfoResponseSchema>;
+  const userInfo = formatUserInfo(await auth());
 
   return (
     <div className="flex md:flex-col items-center md:p-4 space-x-4 md:space-x-0">
       <Avatar className="w-20 h-20 md:w-24 md:h-24" alt="Profile picture" src={'/assets/profile-image.png'} />
       <div className="flex flex-col items-start md:items-center">
         <div className="md:my-5 md:text-lg ">
-          <span className="font-semibold">{userInfo.studentName}</span>
+          <span className="font-semibold">{userInfo.name}</span>
           <span>님</span>
         </div>
-        <div className="mb-3 md:text-sm text-xs truncate">{userInfo.completionDivision[0].major}</div>
+        <div className="mb-3 md:text-sm text-xs truncate">{userInfo.major}</div>
         <div className="md:text-sm text-xs text-gray-400">{userInfo.studentNumber}</div>
       </div>
     </div>

From 778c16fe88c6065841a80d9a85e8b164c635ae22 Mon Sep 17 00:00:00 2001
From: SeonghunYang <didtjdgns852@naver.com>
Date: Thu, 16 May 2024 07:36:56 +0000
Subject: [PATCH 29/39] refactor: Refactor file paths for NavigationBar and
 SideNavigationBar components to match new folder structure

---
 app/(sub-page)/components/navigation-bar.tsx       | 14 ++------------
 app/(sub-page)/my/page.tsx                         |  6 +++---
 .../user/user-info-navigator/sign-button-group.tsx | 11 +++++++++++
 3 files changed, 16 insertions(+), 15 deletions(-)
 create mode 100644 app/ui/user/user-info-navigator/sign-button-group.tsx

diff --git a/app/(sub-page)/components/navigation-bar.tsx b/app/(sub-page)/components/navigation-bar.tsx
index 9760e9a5..32e6957c 100644
--- a/app/(sub-page)/components/navigation-bar.tsx
+++ b/app/(sub-page)/components/navigation-bar.tsx
@@ -3,24 +3,14 @@ import logo from '../../../public/assets/logo.svg';
 import Responsive from '../../ui/responsive';
 import SideNavigationBar from './side-navigation-bar';
 import UserInfoNavigator from '@/app/ui/user/user-info-navigator/user-info-navigator';
-import SignOutButton from '@/app/ui/user/user-info-navigator/sign-out-button';
-import UserDeleteButton from '@/app/ui/user/user-info-navigator/user-delete-button';
+import SignButtonGroup from '@/app/ui/user/user-info-navigator/sign-button-group';
 
 export default function NavigationBar() {
   return (
     <div className="absolute flex justify-between items-center p-4 border-b-[1px] w-full z-2">
       <Image className="md:h-10 h-7 w-[110px] md:w-[150px]" width={150} height={100} src={logo} alt="main-logo" />
       <Responsive maxWidth={768}>
-        <SideNavigationBar
-          header={<UserInfoNavigator />}
-          content={<div>콘텐츠</div>}
-          footer={
-            <div className="flex flex-col items-center space-y-2">
-              <SignOutButton />
-              <UserDeleteButton />
-            </div>
-          }
-        />
+        <SideNavigationBar header={<UserInfoNavigator />} content={<div>콘텐츠</div>} footer={<SignButtonGroup />} />
       </Responsive>
     </div>
   );
diff --git a/app/(sub-page)/my/page.tsx b/app/(sub-page)/my/page.tsx
index 46c67025..0e6b38ed 100644
--- a/app/(sub-page)/my/page.tsx
+++ b/app/(sub-page)/my/page.tsx
@@ -10,6 +10,7 @@ import MyResultContainer from './components/my-result-container';
 import UserDeleteModal from '@/app/ui/user/user-info-navigator/user-delete-modal';
 import SignOutButton from '@/app/ui/user/user-info-navigator/sign-out-button';
 import UserDeleteButton from '@/app/ui/user/user-info-navigator/user-delete-button';
+import SignButtonGroup from '@/app/ui/user/user-info-navigator/sign-button-group';
 
 export default function MyPage() {
   return (
@@ -18,9 +19,8 @@ export default function MyPage() {
         <div className="hidden lg:w-[30%] lg:block">
           <Suspense fallback={<UserInfoNavigatorSkeleton />}>
             <UserInfoNavigator />
-            <div className="flex flex-col items-center mt-9 space-y-2">
-              <SignOutButton />
-              <UserDeleteButton />
+            <div className="mt-9">
+              <SignButtonGroup />
             </div>
           </Suspense>
         </div>
diff --git a/app/ui/user/user-info-navigator/sign-button-group.tsx b/app/ui/user/user-info-navigator/sign-button-group.tsx
new file mode 100644
index 00000000..17413137
--- /dev/null
+++ b/app/ui/user/user-info-navigator/sign-button-group.tsx
@@ -0,0 +1,11 @@
+import SignOutButton from './sign-out-button';
+import UserDeleteButton from './user-delete-button';
+
+export default function SignButtonGroup() {
+  return (
+    <div className="flex flex-col items-center mt-9 space-y-2">
+      <SignOutButton />
+      <UserDeleteButton />
+    </div>
+  );
+}

From 2626f5edc24e1fd2a06cffc439494d8585e1f25e Mon Sep 17 00:00:00 2001
From: SeonghunYang <didtjdgns852@naver.com>
Date: Thu, 16 May 2024 07:46:36 +0000
Subject: [PATCH 30/39] refactor: Refactor SignButtonGroup component to
 conditionally

---
 .../user-info-navigator/sign-button-group.tsx     | 15 ++++++++++++---
 .../user-info-navigator/sign-in-link-button.tsx   | 12 ++++++++++++
 2 files changed, 24 insertions(+), 3 deletions(-)
 create mode 100644 app/ui/user/user-info-navigator/sign-in-link-button.tsx

diff --git a/app/ui/user/user-info-navigator/sign-button-group.tsx b/app/ui/user/user-info-navigator/sign-button-group.tsx
index 17413137..e742835f 100644
--- a/app/ui/user/user-info-navigator/sign-button-group.tsx
+++ b/app/ui/user/user-info-navigator/sign-button-group.tsx
@@ -1,11 +1,20 @@
+import { auth } from '@/app/business/user/user.query';
 import SignOutButton from './sign-out-button';
 import UserDeleteButton from './user-delete-button';
+import SignInLinkButton from './sign-in-link-button';
 
-export default function SignButtonGroup() {
+export default async function SignButtonGroup() {
+  const userInfo = await auth();
   return (
     <div className="flex flex-col items-center mt-9 space-y-2">
-      <SignOutButton />
-      <UserDeleteButton />
+      {userInfo ? (
+        <>
+          <SignOutButton />
+          <UserDeleteButton />
+        </>
+      ) : (
+        <SignInLinkButton />
+      )}
     </div>
   );
 }
diff --git a/app/ui/user/user-info-navigator/sign-in-link-button.tsx b/app/ui/user/user-info-navigator/sign-in-link-button.tsx
new file mode 100644
index 00000000..902d93d3
--- /dev/null
+++ b/app/ui/user/user-info-navigator/sign-in-link-button.tsx
@@ -0,0 +1,12 @@
+'use client';
+import Button from '../../view/atom/button/button';
+import { useRouter } from 'next/navigation';
+
+export default function SignInLinkButton() {
+  const router = useRouter();
+
+  const handleToLoginButtonClick = () => {
+    router.push('/sign-in');
+  };
+  return <Button onClick={handleToLoginButtonClick} size="sm" variant="text" label="로그인" />;
+}

From cde228b311c6323ebc2c98afae6e9f1735165a9a Mon Sep 17 00:00:00 2001
From: SeonghunYang <didtjdgns852@naver.com>
Date: Mon, 20 May 2024 15:26:44 +0900
Subject: [PATCH 31/39] Update
 app/(sub-page)/components/side-navigation-bar.tsx

Co-authored-by: yougyung <youkyeongs@naver.com>
---
 app/(sub-page)/components/side-navigation-bar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/(sub-page)/components/side-navigation-bar.tsx b/app/(sub-page)/components/side-navigation-bar.tsx
index f2e401b8..f2a4514b 100644
--- a/app/(sub-page)/components/side-navigation-bar.tsx
+++ b/app/(sub-page)/components/side-navigation-bar.tsx
@@ -12,7 +12,7 @@ export default function SideNavigationBar({ header, content, footer }: SideNavig
   return (
     <Sheet>
       <SheetTrigger className="h-6">
-        <HamburgerMenuIcon className="w-6 h-6 text-white" />;
+        <HamburgerMenuIcon className="w-6 h-6 text-white" />
       </SheetTrigger>
       <SheetContent className="z-3">
         <div className="flex h-full flex-col justify-between">

From 0405b87ca5aa271a2de0e7bfa70706fc4473027e Mon Sep 17 00:00:00 2001
From: SeonghunYang <didtjdgns852@naver.com>
Date: Mon, 20 May 2024 06:34:51 +0000
Subject: [PATCH 32/39] refactor: Update user-info-navigator.tsx and sheet.tsx
 components

---
 app/ui/user/user-info-navigator/user-info-navigator.tsx | 6 +++---
 app/ui/view/molecule/sheet/sheet.tsx                    | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/ui/user/user-info-navigator/user-info-navigator.tsx b/app/ui/user/user-info-navigator/user-info-navigator.tsx
index 32be3f4e..4fc61b5b 100644
--- a/app/ui/user/user-info-navigator/user-info-navigator.tsx
+++ b/app/ui/user/user-info-navigator/user-info-navigator.tsx
@@ -11,15 +11,15 @@ function formatUserInfo(userInfo: InitUserInfoResponse | UserInfoResponse | unde
 } {
   if (!userInfo) {
     return {
-      name: 'GUEST',
-      major: '로그인이 필요합니다.',
+      name: '소중한 GUEST',
+      major: '성적표를 입력하고, 졸업 여부를 확인하세요',
       studentNumber: '',
     };
   }
 
   if (isInitUser(userInfo)) {
     return {
-      name: '명지대학우..?',
+      name: '명지인',
       major: '성적표를 입력하고, 졸업 여부를 확인하세요',
       studentNumber: userInfo.studentNumber,
     };
diff --git a/app/ui/view/molecule/sheet/sheet.tsx b/app/ui/view/molecule/sheet/sheet.tsx
index 5eb41714..219545ef 100644
--- a/app/ui/view/molecule/sheet/sheet.tsx
+++ b/app/ui/view/molecule/sheet/sheet.tsx
@@ -38,9 +38,9 @@ const sheetVariants = cva(
         top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
         bottom:
           'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
-        left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
+        left: 'inset-y-0 left-0 h-full w-[85%] border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
         right:
-          'inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
+          'inset-y-0 right-0 h-full w-[85%]	border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
       },
     },
     defaultVariants: {

From 3b0a8652abf48e7aee8d34d3a3ba5ba57b4b5387 Mon Sep 17 00:00:00 2001
From: SeonghunYang <didtjdgns852@naver.com>
Date: Mon, 20 May 2024 06:44:15 +0000
Subject: [PATCH 33/39] refactor: Refactor SideNavigationBar component to use
 interface instead of type for props

---
 app/(sub-page)/components/side-navigation-bar.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/(sub-page)/components/side-navigation-bar.tsx b/app/(sub-page)/components/side-navigation-bar.tsx
index f2a4514b..182ff9d3 100644
--- a/app/(sub-page)/components/side-navigation-bar.tsx
+++ b/app/(sub-page)/components/side-navigation-bar.tsx
@@ -2,11 +2,11 @@
 import { HamburgerMenuIcon } from '@radix-ui/react-icons';
 import { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetFooter } from '../../ui/view/molecule/sheet/sheet';
 
-type SideNavigationBarProps = {
+interface SideNavigationBarProps {
   header: React.ReactNode;
   footer: React.ReactNode;
   content: React.ReactNode;
-};
+}
 
 export default function SideNavigationBar({ header, content, footer }: SideNavigationBarProps) {
   return (

From 1d6d7b8b94a53016a7901a1c53464a3e16ab5efc Mon Sep 17 00:00:00 2001
From: SeonghunYang <didtjdgns852@naver.com>
Date: Mon, 20 May 2024 06:46:55 +0000
Subject: [PATCH 34/39] refactor: Refactor Sheet component styles in sheet.tsx

---
 app/ui/view/molecule/sheet/sheet.tsx | 16 ++++------------
 1 file changed, 4 insertions(+), 12 deletions(-)

diff --git a/app/ui/view/molecule/sheet/sheet.tsx b/app/ui/view/molecule/sheet/sheet.tsx
index 219545ef..4c6e0733 100644
--- a/app/ui/view/molecule/sheet/sheet.tsx
+++ b/app/ui/view/molecule/sheet/sheet.tsx
@@ -31,7 +31,7 @@ const SheetOverlay = React.forwardRef<
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 
 const sheetVariants = cva(
-  'fixed z-50 gap-4 bg-white p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500 dark:bg-slate-950',
+  'fixed z-50 gap-4 bg-white p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
   {
     variants: {
       side: {
@@ -59,7 +59,7 @@ const SheetContent = React.forwardRef<React.ElementRef<typeof SheetPrimitive.Con
       <SheetOverlay />
       <SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}>
         {children}
-        <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-slate-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-slate-100 dark:ring-offset-slate-950 dark:focus:ring-slate-300 dark:data-[state=open]:bg-slate-800">
+        <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-slate-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-slate-100">
           <X className="h-4 w-4" />
           <span className="sr-only">Close</span>
         </SheetPrimitive.Close>
@@ -83,11 +83,7 @@ const SheetTitle = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Title>,
   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
 >(({ className, ...props }, ref) => (
-  <SheetPrimitive.Title
-    ref={ref}
-    className={cn('text-lg font-semibold text-slate-950 dark:text-slate-50', className)}
-    {...props}
-  />
+  <SheetPrimitive.Title ref={ref} className={cn('text-lg font-semibold text-slate-950', className)} {...props} />
 ));
 SheetTitle.displayName = SheetPrimitive.Title.displayName;
 
@@ -95,11 +91,7 @@ const SheetDescription = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Description>,
   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
 >(({ className, ...props }, ref) => (
-  <SheetPrimitive.Description
-    ref={ref}
-    className={cn('text-sm text-slate-500 dark:text-slate-400', className)}
-    {...props}
-  />
+  <SheetPrimitive.Description ref={ref} className={cn('text-sm text-slate-500', className)} {...props} />
 ));
 SheetDescription.displayName = SheetPrimitive.Description.displayName;
 

From 15d27d7a0c22b28b913a261e4fabda0b6944a54c Mon Sep 17 00:00:00 2001
From: SeonghunYang <didtjdgns852@naver.com>
Date: Mon, 20 May 2024 06:56:43 +0000
Subject: [PATCH 35/39] refactor: Refactor navigation-bar.tsx and my/page.tsx
 components, and update sheet.tsx component styles

---
 app/(sub-page)/components/navigation-bar.tsx |  2 +-
 app/(sub-page)/my/page.tsx                   | 21 ++++++++++----------
 app/ui/view/molecule/sheet/sheet.tsx         |  2 +-
 3 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/app/(sub-page)/components/navigation-bar.tsx b/app/(sub-page)/components/navigation-bar.tsx
index 32e6957c..4972ba2e 100644
--- a/app/(sub-page)/components/navigation-bar.tsx
+++ b/app/(sub-page)/components/navigation-bar.tsx
@@ -9,7 +9,7 @@ export default function NavigationBar() {
   return (
     <div className="absolute flex justify-between items-center p-4 border-b-[1px] w-full z-2">
       <Image className="md:h-10 h-7 w-[110px] md:w-[150px]" width={150} height={100} src={logo} alt="main-logo" />
-      <Responsive maxWidth={768}>
+      <Responsive maxWidth={1023}>
         <SideNavigationBar header={<UserInfoNavigator />} content={<div>콘텐츠</div>} footer={<SignButtonGroup />} />
       </Responsive>
     </div>
diff --git a/app/(sub-page)/my/page.tsx b/app/(sub-page)/my/page.tsx
index 0e6b38ed..cd931cba 100644
--- a/app/(sub-page)/my/page.tsx
+++ b/app/(sub-page)/my/page.tsx
@@ -8,22 +8,23 @@ import { DIALOG_KEY } from '@/app/utils/key/dialog-key.util';
 import { Suspense } from 'react';
 import MyResultContainer from './components/my-result-container';
 import UserDeleteModal from '@/app/ui/user/user-info-navigator/user-delete-modal';
-import SignOutButton from '@/app/ui/user/user-info-navigator/sign-out-button';
-import UserDeleteButton from '@/app/ui/user/user-info-navigator/user-delete-button';
 import SignButtonGroup from '@/app/ui/user/user-info-navigator/sign-button-group';
+import Responsive from '@/app/ui/responsive';
 
 export default function MyPage() {
   return (
     <>
       <ContentContainer className="flex">
-        <div className="hidden lg:w-[30%] lg:block">
-          <Suspense fallback={<UserInfoNavigatorSkeleton />}>
-            <UserInfoNavigator />
-            <div className="mt-9">
-              <SignButtonGroup />
-            </div>
-          </Suspense>
-        </div>
+        <Responsive minWidth={1023}>
+          <div className="lg:w-[30%]">
+            <Suspense fallback={<UserInfoNavigatorSkeleton />}>
+              <UserInfoNavigator />
+              <div className="mt-9">
+                <SignButtonGroup />
+              </div>
+            </Suspense>
+          </div>
+        </Responsive>
         <div className="w-full lg:w-[70%] lg:px-[20px] pt-12 pb-2 flex flex-col gap-12">
           <MyResultContainer />
           <TakenLecture />
diff --git a/app/ui/view/molecule/sheet/sheet.tsx b/app/ui/view/molecule/sheet/sheet.tsx
index 4c6e0733..50245dbd 100644
--- a/app/ui/view/molecule/sheet/sheet.tsx
+++ b/app/ui/view/molecule/sheet/sheet.tsx
@@ -75,7 +75,7 @@ const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElemen
 SheetHeader.displayName = 'SheetHeader';
 
 const SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)} {...props} />
+  <div className={cn('flex flex-col-reverse sm:flex-row sm:justify-center sm:space-x-2', className)} {...props} />
 );
 SheetFooter.displayName = 'SheetFooter';
 

From 2dea51a1aba4590e4d72493d08f683c30357cb86 Mon Sep 17 00:00:00 2001
From: SeonghunYang <didtjdgns852@naver.com>
Date: Mon, 20 May 2024 15:59:53 +0900
Subject: [PATCH 36/39] Update
 app/ui/user/user-info-navigator/user-delete-modal.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>
---
 app/ui/user/user-info-navigator/user-delete-modal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/ui/user/user-info-navigator/user-delete-modal.tsx b/app/ui/user/user-info-navigator/user-delete-modal.tsx
index 8bd49100..7e5d5926 100644
--- a/app/ui/user/user-info-navigator/user-delete-modal.tsx
+++ b/app/ui/user/user-info-navigator/user-delete-modal.tsx
@@ -11,7 +11,7 @@ export default function UserDeleteModal() {
         <h2 className="text-xl font-bold text-center">회원 탈퇴</h2>
         <div className="h-1 w-10 bg-blue-600 mx-auto my-3" />
         <p className="text-sm text-center my-4">
-          회원탈퇴를 진행하시겠습니까? 탈퇴를 진행하면더 비밀번호 입력이 필요합니다.
+          회원탈퇴를 진행하시겠습니까? 탈퇴를 진행하려면 비밀번호 입력이 필요합니다.
         </p>
         <div className="my-4">
           <Form failMessageControl={'toast'} action={deleteUser} id={'user-delete'}>

From 2f32ce3dbd03b8ea29e55a4d98b668aa4d87929d Mon Sep 17 00:00:00 2001
From: SeonghunYang <didtjdgns852@naver.com>
Date: Mon, 20 May 2024 07:13:55 +0000
Subject: [PATCH 37/39] refactor: Refactor SideNavigationBar component to use
 useDialog hook and add handleSideNavOpen function

---
 app/(sub-page)/components/side-navigation-bar.tsx  | 14 +++++++++++++-
 app/(sub-page)/my/page.tsx                         |  2 --
 app/layout.tsx                                     |  3 ++-
 app/store/dialog.ts                                |  1 +
 .../user-info-navigator/user-delete-button.tsx     |  6 ++++--
 app/ui/view/molecule/modal/modal.tsx               |  4 ++--
 app/utils/key/dialog-key.util.ts                   |  1 +
 7 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/app/(sub-page)/components/side-navigation-bar.tsx b/app/(sub-page)/components/side-navigation-bar.tsx
index 182ff9d3..8a0d8b9b 100644
--- a/app/(sub-page)/components/side-navigation-bar.tsx
+++ b/app/(sub-page)/components/side-navigation-bar.tsx
@@ -1,6 +1,8 @@
 'use client';
 import { HamburgerMenuIcon } from '@radix-ui/react-icons';
 import { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetFooter } from '../../ui/view/molecule/sheet/sheet';
+import { DIALOG_KEY } from '@/app/utils/key/dialog-key.util';
+import useDialog from '@/app/hooks/useDialog';
 
 interface SideNavigationBarProps {
   header: React.ReactNode;
@@ -9,8 +11,18 @@ interface SideNavigationBarProps {
 }
 
 export default function SideNavigationBar({ header, content, footer }: SideNavigationBarProps) {
+  const { isOpen, open, close } = useDialog(DIALOG_KEY.SIDE_NAVIGATION);
+
+  const handleSideNavOpen = (value: boolean) => {
+    if (value) {
+      open();
+    } else {
+      close();
+    }
+  };
+
   return (
-    <Sheet>
+    <Sheet open={isOpen} onOpenChange={handleSideNavOpen}>
       <SheetTrigger className="h-6">
         <HamburgerMenuIcon className="w-6 h-6 text-white" />
       </SheetTrigger>
diff --git a/app/(sub-page)/my/page.tsx b/app/(sub-page)/my/page.tsx
index cd931cba..810b34d9 100644
--- a/app/(sub-page)/my/page.tsx
+++ b/app/(sub-page)/my/page.tsx
@@ -7,7 +7,6 @@ import Drawer from '@/app/ui/view/molecule/drawer/drawer';
 import { DIALOG_KEY } from '@/app/utils/key/dialog-key.util';
 import { Suspense } from 'react';
 import MyResultContainer from './components/my-result-container';
-import UserDeleteModal from '@/app/ui/user/user-info-navigator/user-delete-modal';
 import SignButtonGroup from '@/app/ui/user/user-info-navigator/sign-button-group';
 import Responsive from '@/app/ui/responsive';
 
@@ -33,7 +32,6 @@ export default function MyPage() {
       <Drawer drawerKey={DIALOG_KEY.LECTURE_SEARCH}>
         <LectureSearch />
       </Drawer>
-      <UserDeleteModal />
     </>
   );
 }
diff --git a/app/layout.tsx b/app/layout.tsx
index 5449262d..b8ee62db 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,9 +1,9 @@
 import type { Metadata } from 'next';
 import './globals.css';
-import NavigationBar from './(sub-page)/components/navigation-bar';
 import { Toaster } from './ui/view/molecule/toast/toaster';
 import Provider from './provider';
 import MSWComponent from './mocks/msw-component.mock';
+import UserDeleteModal from './ui/user/user-info-navigator/user-delete-modal';
 
 export const metadata: Metadata = {
   title: 'Create Next App',
@@ -31,6 +31,7 @@ export default function RootLayout({
           </Provider>
         </div>
         <Toaster />
+        <UserDeleteModal />
       </body>
     </html>
   );
diff --git a/app/store/dialog.ts b/app/store/dialog.ts
index 049a8ee4..84067c04 100644
--- a/app/store/dialog.ts
+++ b/app/store/dialog.ts
@@ -6,6 +6,7 @@ const initialState = {
   [DIALOG_KEY.DIALOG_TEST]: true,
   [DIALOG_KEY.LECTURE_SEARCH]: false,
   [DIALOG_KEY.USER_DELETE]: false,
+  [DIALOG_KEY.SIDE_NAVIGATION]: false,
 };
 
 const dialogAtom = atom(initialState);
diff --git a/app/ui/user/user-info-navigator/user-delete-button.tsx b/app/ui/user/user-info-navigator/user-delete-button.tsx
index c64aee1b..dcdb31ac 100644
--- a/app/ui/user/user-info-navigator/user-delete-button.tsx
+++ b/app/ui/user/user-info-navigator/user-delete-button.tsx
@@ -4,10 +4,12 @@ import { DIALOG_KEY } from '@/app/utils/key/dialog-key.util';
 import useDialog from '@/app/hooks/useDialog';
 
 export default function UserDeleteButton() {
-  const { toggle } = useDialog(DIALOG_KEY.USER_DELETE);
+  const { open: userDeleteDialogOpen } = useDialog(DIALOG_KEY.USER_DELETE);
+  const { close: sideDialogClose } = useDialog(DIALOG_KEY.SIDE_NAVIGATION);
 
   const handleModalToggle = () => {
-    toggle();
+    sideDialogClose();
+    userDeleteDialogOpen();
   };
 
   return <Button onClick={handleModalToggle} size="sm" variant="text" label="회원탈퇴하기" />;
diff --git a/app/ui/view/molecule/modal/modal.tsx b/app/ui/view/molecule/modal/modal.tsx
index 91c28dae..e4f0513e 100644
--- a/app/ui/view/molecule/modal/modal.tsx
+++ b/app/ui/view/molecule/modal/modal.tsx
@@ -22,10 +22,10 @@ const Modal = ({ modalKey, children, onClose }: ModalProp) => {
   return (
     <Root open={isOpen} onOpenChange={toggle}>
       <Portal>
-        <Overlay className={cn('fixed inset-0 zIndex-3 bg-black/50', fadeAnimation)} />
+        <Overlay className={cn('fixed inset-0 z-3 bg-black/50', fadeAnimation)} />
         <Content
           className={cn(
-            'outline-none fixed left-[50%] top-[50%] zIndex-3 max-w-[90%] min-w-[30%] overflow-y-auto translate-x-[-50%] translate-y-[-50%] bg-white p-6 shadow-lg duration-200 rounded-lg max-h-[70vh] lg:max-h-[90vh]',
+            'outline-none fixed left-[50%] top-[50%] z-3 max-w-[90%] min-w-[30%] overflow-y-auto translate-x-[-50%] translate-y-[-50%] bg-white p-6 shadow-lg duration-200 rounded-lg max-h-[70vh] lg:max-h-[90vh]',
             noneSlideAnimation,
             fadeAnimation,
           )}
diff --git a/app/utils/key/dialog-key.util.ts b/app/utils/key/dialog-key.util.ts
index a97c77ae..5f74eadf 100644
--- a/app/utils/key/dialog-key.util.ts
+++ b/app/utils/key/dialog-key.util.ts
@@ -3,6 +3,7 @@ export const DIALOG_KEY = {
   DIALOG_TEST: 'DIALOG_TEST',
   LECTURE_SEARCH: 'LECTURE_SEARCH',
   USER_DELETE: 'USER_DELETE',
+  SIDE_NAVIGATION: 'SIDE_NAVIGATION',
 } as const;
 
 export type DialogKey = (typeof DIALOG_KEY)[keyof typeof DIALOG_KEY];

From e6a148ca0ded56b589cde24b2e7767f7985b2633 Mon Sep 17 00:00:00 2001
From: SeonghunYang <didtjdgns852@naver.com>
Date: Mon, 20 May 2024 08:15:23 +0000
Subject: [PATCH 38/39] refactor: Refactor SignButtonGroup component to import
 Button and Link from specific paths

---
 app/ui/user/user-info-navigator/sign-button-group.tsx   | 2 ++
 app/ui/user/user-info-navigator/sign-in-link-button.tsx | 4 ++++
 2 files changed, 6 insertions(+)

diff --git a/app/ui/user/user-info-navigator/sign-button-group.tsx b/app/ui/user/user-info-navigator/sign-button-group.tsx
index e742835f..6db565ec 100644
--- a/app/ui/user/user-info-navigator/sign-button-group.tsx
+++ b/app/ui/user/user-info-navigator/sign-button-group.tsx
@@ -2,6 +2,8 @@ import { auth } from '@/app/business/user/user.query';
 import SignOutButton from './sign-out-button';
 import UserDeleteButton from './user-delete-button';
 import SignInLinkButton from './sign-in-link-button';
+import Button from '../../view/atom/button/button';
+import Link from 'next/link';
 
 export default async function SignButtonGroup() {
   const userInfo = await auth();
diff --git a/app/ui/user/user-info-navigator/sign-in-link-button.tsx b/app/ui/user/user-info-navigator/sign-in-link-button.tsx
index 902d93d3..9d32d52e 100644
--- a/app/ui/user/user-info-navigator/sign-in-link-button.tsx
+++ b/app/ui/user/user-info-navigator/sign-in-link-button.tsx
@@ -1,11 +1,15 @@
 'use client';
+import useDialog from '@/app/hooks/useDialog';
 import Button from '../../view/atom/button/button';
 import { useRouter } from 'next/navigation';
+import { DIALOG_KEY } from '@/app/utils/key/dialog-key.util';
 
 export default function SignInLinkButton() {
+  const { close } = useDialog(DIALOG_KEY.SIDE_NAVIGATION);
   const router = useRouter();
 
   const handleToLoginButtonClick = () => {
+    close();
     router.push('/sign-in');
   };
   return <Button onClick={handleToLoginButtonClick} size="sm" variant="text" label="로그인" />;

From d1612980202a0fd2463728f673fdc2bae2311f33 Mon Sep 17 00:00:00 2001
From: SeonghunYang <didtjdgns852@naver.com>
Date: Mon, 20 May 2024 08:19:28 +0000
Subject: [PATCH 39/39] refactor: Refactor SignButtonGroup component to import
 Button and Link from specific paths

---
 app/ui/user/user-info-navigator/sign-button-group.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/app/ui/user/user-info-navigator/sign-button-group.tsx b/app/ui/user/user-info-navigator/sign-button-group.tsx
index 6db565ec..e742835f 100644
--- a/app/ui/user/user-info-navigator/sign-button-group.tsx
+++ b/app/ui/user/user-info-navigator/sign-button-group.tsx
@@ -2,8 +2,6 @@ import { auth } from '@/app/business/user/user.query';
 import SignOutButton from './sign-out-button';
 import UserDeleteButton from './user-delete-button';
 import SignInLinkButton from './sign-in-link-button';
-import Button from '../../view/atom/button/button';
-import Link from 'next/link';
 
 export default async function SignButtonGroup() {
   const userInfo = await auth();