[cherry-pick] 마이페이지 계정 탈퇴 API 연동

[HA-SEUNG-JEONG]

개요

마이페이지 프로필의 계정 탈퇴 버튼에 실제 API를 연동합니다. DELETE /api/v6/mypage/class/withdraw 호출 후 성공 시 모든 클라이언트 상태(쿠키, Zustand, QueryCache)를 초기화하고 랜딩 페이지로 리다이렉트합니다. 에러 핸들링은 hook 레벨 onError에서 처리해 global MutationCache와 중복 토스트가 발생하지 않도록 합니다.

원본 PR

• develop PR: 마이페이지 계정 탈퇴 API 연동 #701 (마이페이지 계정 탈퇴 API 연동 #701)
• 원본 브랜치: fix/withdrawal

Cherry-pick 대상 커밋

• 06816c3 — [withdrawal] fix : feat(my-page): 계정 탈퇴 API 연동
• e2195ec — [withdrawal] fix : 탈퇴 에러 핸들링 analyzeError 경유로 통일

변경 파일

• src/hooks/queries/user/use-withdraw-member-mutation.ts — 계정 탈퇴 mutation hook 신규 추가 (DELETE API 연동, analyzeError 경유 에러 처리)
• src/app/(service)/(my)/my-page/_components/withdrawal-confirm-modal.tsx — mutation 연동, isPending 중 취소/탈퇴 버튼 disabled 처리

혼입 검증 결과

각 커밋의 --stat 확인 결과:

• 커밋 1: withdrawal-confirm-modal.tsx + use-withdraw-member-mutation.ts 2개 파일만 변경
• 커밋 2: use-withdraw-member-mutation.ts 1개 파일만 변경
• develop 전용 코드 혼입 없음 (변경 파일이 원본 PR 범위와 일치)

Test plan

• 마이페이지 > 프로필 > '계정 탈퇴' 버튼 클릭 → 안내 모달 표시 확인
• 탈퇴하기 클릭 → 로딩 중 버튼 텍스트 '탈퇴 중...' 및 취소/탈퇴 버튼 비활성화 확인
• 탈퇴 성공 → 랜딩(/) 리다이렉트, 로그인 상태 해제 확인
• 탈퇴 실패 시 에러 토스트 1개만 표시, 모달 유지 확인

🤖 Generated with Claude Code

Summary by CodeRabbit

Release Notes

• New Features
  • 회원 탈퇴 기능이 이제 실제로 작동합니다.
  • 탈퇴 진행 중 UI 개선: 버튼 비활성화 및 "탈퇴 중..." 상태 표시를 통해 진행 상황을 명확히 전달합니다.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
study-platform-client-dev	Ready	Preview, Comment	May 26, 2026 4:04am

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: aeb669a8-97c8-41eb-9053-c439f03c9fb3

📥 Commits

Reviewing files that changed from the base of the PR and between 780cce8 and 4621f98.

📒 Files selected for processing (2)

• src/app/(service)/(my)/my-page/_components/withdrawal-confirm-modal.tsx
• src/hooks/queries/user/use-withdraw-member-mutation.ts

---

📝 Walkthrough

Walkthrough

클래스 탈퇴 기능을 구현하는 PR입니다. 새 mutation 훅 useWithdrawMemberMutation을 추가하여 탈퇴 API를 react-query로 관리하고, 성공 시 인증 정리 및 리다이렉트, 실패 시 에러 토스트와 Sentry 전송을 처리합니다. 탈퇴 확인 모달을 이 훅과 연동하여 요청 진행 중 버튼 비활성화와 로딩 상태 텍스트를 표시합니다.

Changes

클래스 탈퇴 흐름

Layer / File(s)	Summary
탈퇴 API 뮤테이션 훅 src/hooks/queries/user/use-withdraw-member-mutation.ts	DELETE /mypage/class/withdraw 요청을 react-query로 관리하며, 성공 시 clearClientAuthStateAndRedirect(LANDING) 호출로 인증 상태 정리 및 랜딩 리다이렉트, 실패 시 analyzeError로 에러 메시지 구성 후 토스트 표시 및 Sentry 전송
모달 확인 흐름 및 로딩 상태 UI src/app/(service)/(my)/my-page/_components/withdrawal-confirm-modal.tsx	handleConfirm에서 mutation 호출, 탈퇴 진행 중(isPending) 취소/탈퇴 버튼 disabled 처리, 탈퇴하기 버튼 텍스트를 조건부로 "탈퇴 중..."으로 표시

Sequence Diagram

sequenceDiagram
  participant User as 사용자
  participant Modal as WithdrawalConfirmModal
  participant Mutation as useWithdrawMemberMutation
  participant API as DELETE /mypage/class/withdraw
  participant Auth as clearClientAuthStateAndRedirect
  participant Sentry as Sentry

  User->>Modal: 탈퇴하기 클릭 (handleConfirm)
  Modal->>Mutation: withdraw()
  Mutation->>API: delete (agreedToClassWithdrawalNotice: true)
  
  alt 성공
    API-->>Mutation: 200 OK
    Mutation->>Auth: clearClientAuthStateAndRedirect(LANDING)
    Auth-->>User: 랜딩 페이지로 리다이렉트
  else 실패
    API-->>Mutation: Error
    Mutation->>Sentry: sendErrorToSentry
    Mutation->>Modal: showToast (error)
    Modal-->>User: 에러 메시지 표시
  end

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• code-zero-to-one/study-platform-client#668: 탈퇴 확인 모달 컴포넌트를 처음 추가한 변경이며, 본 PR에서 해당 모달을 실제 탈퇴 API와 연동하여 확장합니다.
• code-zero-to-one/study-platform-client#701: 동일한 탈퇴 확인 모달과 mutation 훅 통합 코드 변경을 포함합니다.
• code-zero-to-one/study-platform-client#667: 탈퇴 모달의 초기 구현 단계이며, 본 PR에서 해당 기능을 API 연동으로 완성합니다.

Suggested labels

release:patch

Poem

🐰 탈퇴의 길을 다지며
mutation 훅이 API를 안내하고
모달의 버튼들은 로딩 상태로 숨을 고르네요
성공하면 랜딩으로, 실패하면 토스트로—
사용자의 선택을 차분히 처리하는 코드입니다 🌙

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	PR 제목이 '마이페이지 계정 탈퇴 API 연동'으로 변경 사항의 핵심을 명확하게 요약하고 있습니다.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch cherry/fix-withdrawal-to-main

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}