Use info logic/#82

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 />
+    </>
+  );
+}

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 />
     </>
   );
 }

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();
+  });
+});

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 {
@@ -15,6 +15,53 @@ 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 deleteUser(prevState: FormState, formData: FormData): Promise<FormState> {
+  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: '회원 탈퇴가 완료되었습니다.',
+  };
+}
+
 export async function validateToken(): Promise<ValidateTokenResponse | false> {
   const accessToken = cookies().get('accessToken')?.value;
   const refreshToken = cookies().get('refreshToken')?.value;

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>;

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 = {
@@ -66,7 +67,7 @@ export const mockDatabase: MockDatabaseAction = {
       {
         ...user,
         isSumbitted: false,
-        major: '융소입니다',
+        major: '융합소프트웨어',
         name: '모킹이2',
       },
     ];
@@ -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 = {
@@ -105,7 +114,7 @@ const initialState: MockDatabaseState = {
       studentNumber: '60000000',
       engLv: 'ENG12',
       isSumbitted: false,
-      major: '융소입니다',
+      major: '융합소프트웨어',
       name: '모킹이',
     },
   ],

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

@@ -7,8 +7,10 @@ import {
   SignInResponse,
   ValidateTokenResponse,
   UserInfoResponse,
+  UserDeleteRequestBody,
 } 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 +23,21 @@ function mockDecryptToken(token: string) {
   };
 }
 
+export const devModeAuthGuard = (request: StrictRequest<any>) => {
+  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);
@@ -31,20 +48,36 @@ export const userHandlers = [
       accessToken: 'fake-access-token',
     });
   }),
-  http.get<never, never, UserInfoResponse | ErrorResponseData>(`${API_PATH.user}`, async ({ request }) => {
-    const accessToken = request.headers.get('Authorization')?.replace('Bearer ', '');
-    if (accessToken === 'undefined' || !accessToken) {
+  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);
+      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();

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);

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="로그아웃" />;
+}

app/ui/user/user-info-navigator/user-delete-button.tsx

@@ -0,0 +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() {
+  const { toggle } = useDialog(DIALOG_KEY.USER_DEELETE);
+
+  const handleModalToggle = () => {
+    toggle();
+  };
+
+  return <Button onClick={handleModalToggle} size="sm" variant="text" label="회원탈퇴하기" />;
+}

app/ui/user/user-info-navigator/user-delete-modal.tsx

@@ -0,0 +1,26 @@
+'use client';
+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="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 failMessageControl={'toast'} 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>
+  );
+}

app/ui/user/user-info-navigator/user-info-navigator.tsx

@@ -2,6 +2,8 @@ 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';
+import UserDeleteButton from './user-delete-button';
 
 export default async function UserInfoNavigator() {
   const userInfo = await getUserInfo();
@@ -18,10 +20,10 @@ 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="회원탈퇴하기" />
+        <UserDeleteButton />
       </div>
     </div>
   );

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];

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));
+    }
   }
 }