Merge pull request #146 from JECT-Study/feat/IN-301

feat(IN-301): 마이페이지 계정 탈퇴 페이지 및 탈퇴 플로우 구현

Author: shunn2

app/(protected)/me/profile/account-delete/page.ts

@@ -0,0 +1 @@
+export { MyAccountDeletePage as default } from '@/pages/me/account-delete'

src/features/me/api/userApi.ts

@@ -0,0 +1,11 @@
+import { axiosInstance } from '@/shared/api'
+
+import type { WithdrawalReason } from '../model/withdrawalReason'
+
+export interface DeleteUserPayload {
+  reason: WithdrawalReason
+  detail?: string
+}
+
+export const deleteUser = (payload: DeleteUserPayload) =>
+  axiosInstance.delete('/user/delete', { data: payload })

src/features/me/index.ts

@@ -1,5 +1,17 @@
 export { MyPageSidebar } from './ui/MyPageSidebar'
+export { useDeleteUser } from './model/useDeleteUser'
+export {
+  WITHDRAWAL_REASONS,
+  WITHDRAWAL_REASON_LABELS,
+} from './model/withdrawalReason'
+export type { WithdrawalReason } from './model/withdrawalReason'
 export { useMyProfile } from './profile/model/useMyProfile'
 export { useEditPreferencesModal } from './profile/model/useEditPreferencesModal'
 export { EditPreferencesModal } from './profile/ui/EditPreferencesModal'
-export type { MyProfileDto, MyProfileAccountDto, MyProfilePreferencesDto, UserRole, Need } from './profile/types'
+export type {
+  MyProfileDto,
+  MyProfileAccountDto,
+  MyProfilePreferencesDto,
+  UserRole,
+  Need,
+} from './profile/types'

src/features/me/model/useDeleteUser.ts

@@ -0,0 +1,8 @@
+import { useMutation } from '@tanstack/react-query'
+
+import { deleteUser } from '../api/userApi'
+
+export const useDeleteUser = () =>
+  useMutation({
+    mutationFn: deleteUser,
+  })

src/features/me/model/withdrawalReason.ts

@@ -0,0 +1,22 @@
+export const WITHDRAWAL_REASONS = [
+  'YOUTUBE_LINK_INCONVENIENT',
+  'INSUFFICIENT_ANALYSIS_FEATURES',
+  'EXPENSIVE_PLAN',
+  'DASHBOARD_DIFFICULT',
+  'SWITCHING_TO_OTHER_TOOL',
+  'TEMPORARY_USE',
+  'OTHER',
+] as const
+
+export type WithdrawalReason = (typeof WITHDRAWAL_REASONS)[number]
+
+/* dropdown 표시용 한국어 라벨 — OTHER는 자유 입력 모드 진입 옵션 */
+export const WITHDRAWAL_REASON_LABELS: Record<WithdrawalReason, string> = {
+  YOUTUBE_LINK_INCONVENIENT: '유튜브 채널 연동이 불편해요',
+  INSUFFICIENT_ANALYSIS_FEATURES: '필요한 분석 기능이 부족해요',
+  EXPENSIVE_PLAN: '구독 플랜 가격이 부담돼요',
+  DASHBOARD_DIFFICULT: '대시보드 사용이 어려워요',
+  SWITCHING_TO_OTHER_TOOL: '다른 마케팅/채널 분석 툴로 이동해요',
+  TEMPORARY_USE: '일시적으로 사용',
+  OTHER: '기타',
+}

src/features/me/ui/MyPageSidebar.tsx

@@ -21,21 +21,26 @@ export function MyPageSidebar() {
     <div className='h-fit w-[30.3rem] shrink-0 gap-20 p-24'>
       <div className='flex h-fit w-full gap-4 rounded-8 bg-white p-16 shadow-[0px_2px_6px_0px_#0D0D0D0A]'>
         <ul className='flex h-fit w-full flex-col'>
-          {SIDEBAR_ITEMS.map((item) => (
-            <li key={item.href}>
-              <Link
-                href={item.href}
-                className={cn(
-                  'flex h-fit w-full items-center gap-8 rounded-6 p-8',
-                  currentPath === item.href
-                    ? 'bg-[#5A44F214] text-noto-label-md-bold text-brand-primary'
-                    : 'bg-white text-noto-label-md-thin text-text-and-icon-primary'
-                )}>
-                <item.Icon className='size-[1.8rem]' />
-                {item.label}
-              </Link>
-            </li>
-          ))}
+          {SIDEBAR_ITEMS.map((item) => {
+            const isActive =
+              currentPath === item.href ||
+              (currentPath?.startsWith(item.href + '/') ?? false)
+            return (
+              <li key={item.href}>
+                <Link
+                  href={item.href}
+                  className={cn(
+                    'flex h-fit w-full items-center gap-8 rounded-6 p-8',
+                    isActive
+                      ? 'bg-[#5A44F214] text-noto-label-md-bold text-brand-primary'
+                      : 'bg-white text-noto-label-md-thin text-text-and-icon-primary'
+                  )}>
+                  <item.Icon className='size-[1.8rem]' />
+                  {item.label}
+                </Link>
+              </li>
+            )
+          })}
         </ul>
       </div>
     </div>

src/pages/me/account-delete/index.ts

@@ -0,0 +1 @@
+export { MyAccountDeletePage } from './ui/MyAccountDeletePage'

src/pages/me/account-delete/ui/MyAccountDeletePage.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+
+import { MyAccountDeletePage } from './MyAccountDeletePage'
+
+const meta = {
+  title: 'Pages/Me/MyAccountDeletePage',
+  component: MyAccountDeletePage,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          '계정 탈퇴 페이지 (라우트: `/me/profile/account-delete`). 안내 카드 → 연동 채널 카드 → "계정 탈퇴하기" 버튼 → 모달 3단계 시퀀스. 모달 트리거 후 흐름은 페이지 안에서 직접 확인 가능합니다.',
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className='min-h-screen bg-background-gray-default'>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof MyAccountDeletePage>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}

src/pages/me/account-delete/ui/MyAccountDeletePage.tsx

@@ -0,0 +1,70 @@
+'use client'
+
+import { useState } from 'react'
+import { useRouter } from 'next/navigation'
+
+import { Button } from '@/shared/ui/button'
+import IconArrowLeft from '@/shared/assets/leftwards-arrow-bold.svg'
+import {
+  AccountDeleteModalFlow,
+  AccountDeleteNoticeCard,
+  LinkedChannelsForDeleteCard,
+} from '@/widgets/me/accountDelete'
+import { useAuth } from '@/features/auth'
+import { useDeleteUser, type WithdrawalReason } from '@/features/me'
+
+export function MyAccountDeletePage() {
+  const router = useRouter()
+  const [open, setOpen] = useState(false)
+  const { logout } = useAuth()
+  const { mutateAsync: deleteUser } = useDeleteUser()
+
+  async function handleSubmitReason(
+    reason: WithdrawalReason,
+    customReason?: string
+  ) {
+    await deleteUser({
+      reason,
+      detail: reason === 'OTHER' ? customReason : undefined,
+    })
+  }
+
+  /* 탈퇴 완료 — 클라이언트 인증 상태 초기화 + refreshToken 쿠키 삭제 후 홈으로 이동 */
+  async function handleComplete() {
+    setOpen(false)
+    await logout()
+  }
+
+  return (
+    <div className='flex h-fit w-full flex-col gap-24 p-24'>
+      <button
+        type='button'
+        onClick={() => router.back()}
+        className='flex w-fit cursor-pointer items-center gap-8 text-ibm-title-lg-normal text-text-and-icon-default'>
+        <IconArrowLeft className='size-24' />
+        계정 탈퇴
+      </button>
+
+      <AccountDeleteNoticeCard />
+      <LinkedChannelsForDeleteCard />
+
+      <div className='flex justify-end'>
+        <Button
+          type='button'
+          color='gray'
+          variant='filled'
+          size='sm'
+          onClick={() => setOpen(true)}>
+          계정 탈퇴하기
+        </Button>
+      </div>
+
+      <AccountDeleteModalFlow
+        open={open}
+        onClose={() => setOpen(false)}
+        onComplete={handleComplete}
+        onSubmitReason={handleSubmitReason}
+      />
+    </div>
+  )
+}

src/pages/me/index.ts

@@ -1 +1,2 @@
 export { MyPageLayout } from './ui/MyPageLayout'
+export { MyAccountDeletePage } from './account-delete'