feat: 마이페이지 비밀번호변경/회원탈퇴 API연동

[jjjsun]

💡 개요

SettingPage에서 비밀번호 변경 및 회원탈퇴 기능 API연동하고, 성공/실패에 따라서 UI/상태처리 추가했습니다.

🔢 관련 이슈 링크

• Closes [feat] 마이페이지 계정 설정 API 연동 #70

💻 작업내용

• SettingPage 비밀번호 변경 API 연동 및 요청/응답 처리
• 비밀번호 변경 입력값 검증 및 에러 메세지 표시
• 회원 탈퇴 API 연동 및 요청/응답 처리
• 회원 탈퇴 전 안내사항 추가
• 회원 탈퇴 성공시 인증 토큰/전역 상태 초기화 및 페이지 이동 처리
• 공통 예외 처리(로딩, 에러, 실패) 추가

📌 변경사항PR

• FEAT: 새로운 기능 추가
• FIX: 버그/오류 수정
• CHORE: 코드/내부 파일/설정 수정
• DOCS: 문서 수정(README 등)
• REFACTOR: 코드 리팩토링 (기능 변경 없음)
• TEST: 테스트 코드 추가/수정
• STYLE: 스타일 변경(포맷, 세미콜론 등)

🤔 추가 논의하고 싶은 내용

• 지금 회원탈퇴 부분 에러메세지 미작동은 백엔드에 문의중입니다

✅ 체크리스트

• 브랜치는 잘 맞게 올렸는지
• 관련 이슈를 맞게 연결했는지
• 로컬에서 정상 동작을 확있했는지
• 충돌이 없다(또는 브랜치에서 충돌 해결 후 PR 업데이트 완료)

Summary by CodeRabbit

• 새 기능

  • 설정에 비밀번호 변경 다이얼로그 추가
  • 계정 탈퇴 다이얼로그 추가(진행 중 예약으로 제한 여부 안내 및 처리 흐름 포함)

• 제거된 기능

  • 결제 관련 페이지 및 경로 삭제(마이페이지 및 최상위의 결제/예약 완료 관련 경로 포함)

[coderabbitai]

Warning

Rate limit exceeded

@jjjsun has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 15 minutes and 38 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

📝 Walkthrough

Walkthrough

마이페이지 계정 설정 관련 기능을 추가: 비밀번호 변경 및 회원 탈퇴용 API 엔드포인트와 다이얼로그 컴포넌트를 도입하고, SettingPage에서 이를 연결함. 동시에 결제 관련 일부 라우트가 제거되고 menus API 반환 타입이 일부 옵셔널화되었습니다.

Changes

Cohort / File(s)	Summary
설정 페이지 UI src/pages/myPage/settingPage.tsx	ChangePasswordDialog, WithdrawDialog 컴포넌트 임포트 및 open 상태 추가, 두 다이얼로그를 설정 페이지에서 열도록 연결.
비밀번호 변경 – API + UI src/api/endpoints/member.ts, src/components/auth/ChangePasswordDiaLog.tsx	PUT /api/v1/member/password 엔드포인트 및 타입 추가(ChangePasswordRequest, ChangePasswordResponse)과 Zod 기반 폼을 사용하는 ChangePasswordDialog 컴포넌트 추가.
회원탈퇴 – API + UI src/api/endpoints/member.ts, src/components/auth/WithdrawDialog.tsx	DELETE /api/auth/withdraw 엔드포인트 추가 및 WithdrawDialog 컴포넌트 추가. 예약 존재 시 탈퇴 차단 감지 로직(isWithdrawBlockByBookings)과 성공 시 로그아웃/리다이렉트 처리 포함.
라우팅 정리 src/App.tsx	Intro 라우트 인라인화 및 결제/예약 관련 라우트(/payment/success, /payment/fail, /reservation/complete) 제거.
API 타입 변경 src/api/endpoints/menus.ts	ApiResult의 isSuccess, code, message 필드를 옵셔널로 변경하고 success? 필드 추가(기존 엔드포인트 소비 코드 영향 검토 필요).
마이페이지 소소 변경 src/pages/myPage/myInfoPage.tsx	주석 제거(코드 동작 변화 없음).

Sequence Diagram

sequenceDiagram
    participant User as 사용자
    participant UI as SettingPage
    participant Dialog as ChangePasswordDialog
    participant API as API\n(/api/v1/member/password)
    participant Store as AuthStore

    User->>UI: "비밀번호 변경하기" 클릭
    UI->>Dialog: 다이얼로그 열기
    User->>Dialog: 기존/새 비밀번호 입력 및 제출
    Dialog->>Dialog: Zod 유효성 검사 (길이, 일치)
    alt 유효성 실패
        Dialog->>User: 필드 에러 표시
    else 유효성 성공
        Dialog->>API: PUT /api/v1/member/password
        API-->>Dialog: 응답 (성공/실패)
        alt 성공
            Dialog->>User: 성공 메시지, 폼 초기화, 다이얼로그 닫기
        else 실패
            Dialog->>User: 서버 에러 표시 (필드 매핑 시 currentPassword 오류 표기 가능)
        end
    end

Loading

sequenceDiagram
    participant User as 사용자
    participant UI as SettingPage
    participant Dialog as WithdrawDialog
    participant API as API\n(/api/auth/withdraw)
    participant Store as AuthStore
    participant Router as Router

    User->>UI: "계정 탈퇴하기" 클릭
    UI->>Dialog: 확인 다이얼로그 열기
    User->>Dialog: "탈퇴하기" 클릭
    Dialog->>API: DELETE /api/auth/withdraw
    API-->>Dialog: 응답 (성공 / BLOCKED / 기타)
    alt 성공
        Dialog->>Store: 로그아웃 처리 (토큰 삭제)
        Dialog->>User: 성공 알림
        Dialog->>Router: 메인페이지로 이동
    else 예약으로 차단
        Dialog->>User: 블록 메시지 표시, 예약 확인 유도
        User->>Dialog: "예약 확인하기" 클릭
        Dialog->>Router: 예약 페이지로 이동
    else 기타 오류
        Dialog->>User: 오류 메시지 표시
    end

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• fix: 마이페이지 동작 버그 수정 및 내정보 편집 UX 개선 #43 — settingPage 관련 UI 변경; ChangePasswordDialog/WithdrawDialog 연결과 레이아웃 충돌 가능성 있음.
• feat: 메인페이지 UI구현 #25 — Intro 라우트 및 App.tsx 변경과 연관된 라우팅 수정 사항.

Suggested labels

feat

Suggested reviewers

• yooseolhee
• dew102938

팀원을 위한 리뷰 포인트

1. 타입 안정성 — menus.ts의 ApiResult 변경
   • 문제: isSuccess? 등이 optional이면 기존 호출부가 undefined를 처리하지 못해 분기 오류 발생 가능.
   • 제안: 공통 API 결과형은 필수값을 유지하고, 예외 API는 별도 타입으로 분리.

     // 권장
     type ApiResult<T> = { isSuccess: boolean; code: string; message: string; result?: T }
     type LooseApiResult<T> = { success?: boolean; result?: T }

2. 탈퇴 차단 판단 로직의 견고성
   • 문제: 에러 메시지에 포함된 텍스트로 판별하는 현재 방식은 번역/메시지 변경에 취약.
   • 제안: 서버에서 명시적 에러 코드를 제공하도록 협의하고 코드 기준으로 검사.

     const isWithdrawBlockByBookings = (e: any) =>
       e?.response?.data?.code === 'WITHDRAW_BLOCKED';

3. ChangePasswordDialog 유효성 기준과 서버 규약 정합성
   • 문제: 클라이언트에서 min length 8을 사용했으나 서버 정책과 불일치 가능성.
   • 제안: 최소 길이와 정책을 상수로 관리하고 서버와 동기화.

     const PASSWORD_MIN = 8;
     z.string().min(PASSWORD_MIN, `비밀번호는 ${PASSWORD_MIN}자 이상이어야 합니다.`);

4. 오류 메시지 매핑 및 UX
   • 문제: 현재 alert 기반 알림과 필드 에러 설정 혼용. 사용자 경험이 일관되지 않을 수 있음.
   • 제안: 성공/실패는 토스트로, 필드별 오류는 입력 밑에 표시하도록 통일.
5. 테스트와 경계 조건
   • 확인 필요: 비밀번호 확인(refinement) 로직, 서버 에러 메시지에 따른 currentPassword 필드 에러 매핑, 탈퇴 블록 상태에서의 내비게이션 경로 및 메시지 한글/영문 처리.

Poem

🔐 비밀번호 바꾸고, 계정은 떠날 수도
다이얼로그 열면 선택의 길이 보이네
예약이 남아 있으면 문은 닫히고 🚪
성공하면 토큰 지우고 집으로 가자 🏠
작지만 중요한 흐름, 잘 정리했네 ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 12.50% 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
Title check	✅ Passed	PR 제목이 주요 변경사항(비밀번호 변경/회원탈퇴 API 연동)을 명확하게 요약하고 있습니다.
Description check	✅ Passed	PR 설명이 템플릿을 잘 따르고 있으며, 개요, 관련 이슈, 작업내용, 변경사항, 체크리스트가 모두 작성되어 있습니다.
Linked Issues check	✅ Passed	PR의 코드 변경사항들이 이슈 #70의 주요 목표들(비밀번호 변경 API 연동, 회원탈퇴 API 연동, 토큰 초기화, 페이지 리다이렉트)을 구현하고 있습니다.
Out of Scope Changes check	✅ Passed	모든 변경사항이 비밀번호 변경/회원탈퇴 기능 구현과 관련되어 있으며, 범위를 벗어난 수정사항은 없습니다.

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

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/mypage-setting-spi

---

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.}

[coderabbitai]

Actionable comments posted: 3

🤖 Fix all issues with AI agents

In `@src/api/endpoints/member.ts`:
- Around line 34-40: The putChangePassword function currently accepts body:
ChangePasswordResponse but must accept the request DTO; change the parameter
type to ChangePasswordRequest (and import it if missing) while keeping the API
call's response generic as ApiEnvelope<ChangePasswordResponse>, then return
res.data.result as before; also update any call sites (e.g.,
ChangePasswordDiaLog.tsx mutate(values)) to match the new signature if they
relied on the incorrect type.

In `@src/components/auth/ChangePasswordDiaLog.tsx`:
- Around line 88-133: The labels in ChangePasswordDiaLog.tsx are not linked to
their inputs; add matching id attributes to each input and htmlFor attributes to
each corresponding label (e.g., id="currentPassword", htmlFor="currentPassword"
for the input registered as "currentPassword", and similarly for "newPassword"
and "newPasswordConfirm") so screen readers can associate label and field; keep
existing form.register(...) calls and disabled/isPending logic intact while
adding the id/htmlFor pairs.

In `@src/components/auth/WithdrawDialog.tsx`:
- Line 38: The useAuthStore selector is returning the whole store (identity) so
logout is not the function; update the selector in WithdrawDialog.tsx to select
the real logout action from the store (useAuthStore(s => s.actions.logout) or
similar) and call that function; also invoke the server-side logout
(auth.logout) as part of the same flow and make the mutationFn or onSuccess
async so you await auth.logout before clearing tokens; remove the empty catch
and handle errors (log or rethrow) and ensure localStorage token removal happens
after successful logout call.

🧹 Nitpick comments (6)

src/api/endpoints/menus.ts (1)

4-10: ApiResult와 ApiEnvelope 타입이 중복되고, 응답 타입 안전성이 약화되었어요.

src/api/endpoints/member.ts의 ApiEnvelope<T>와 동일한 구조가 여기 ApiResult<T>로 중복 정의되어 있습니다. 또한 isSuccess를 optional로 변경하면서 Line 30의 !data?.isSuccess 체크가 서버 응답에 해당 필드가 없을 때도 에러를 던지게 됩니다.

개선 제안:

1. 공통 envelope 타입을 하나로 통합해서 관리
2. isSuccess와 success 중 어떤 필드를 사용할지 백엔드와 합의 후, 한쪽으로 통일

예시: 공통 타입 분리

// src/api/types.ts
export type ApiEnvelope<T> = {
  isSuccess?: boolean;
  success?: boolean;
  code?: string;
  message?: string;
  result: T;
};

그리고 menus.ts, member.ts 모두에서 import해서 사용하면 됩니다.

As per coding guidelines, src/api/**: 응답 타입 안전성 유지.

src/components/auth/ChangePasswordDiaLog.tsx (1)

46-53: 에러 메시지 감지 로직이 정규식 기반이라 깨지기 쉬워요.

/현재|기존|일치|틀렸/ 패턴으로 서버 메시지를 파싱해 필드 에러를 설정하는 방식은, 백엔드 메시지가 변경되면 바로 동작하지 않게 됩니다. 당장 큰 문제는 아니지만, 가능하면 백엔드에서 에러 코드(예: INVALID_CURRENT_PASSWORD)를 내려주고 그걸로 분기하는 게 더 안정적입니다. 주석으로 TODO를 남겨두시는 것도 방법이에요.

src/pages/myPage/settingPage.tsx (1)

121-122: 다이얼로그 컴포넌트가 "계정 탈퇴" 섹션 내부에 배치되어 있어요.

ChangePasswordDialog와 WithdrawDialog가 모두 계정 탈퇴 섹션의 <div> 안에 렌더링되고 있습니다. fixed 포지셔닝이라 동작에 문제는 없지만, 의미상 <section> 닫기 직전(Line 125 앞)으로 옮기면 구조가 더 명확해져요.

위치 변경 제안

         </div>
       </div>
+      <ChangePasswordDialog open={pwOpen} onOpenChange={setPwOpen} />
+      <WithdrawDialog open={withdrawOpen} onOpenChange={setWithdrawOpen} />
     </section>

기존 Line 121-122의 다이얼로그는 제거합니다.

src/components/auth/WithdrawDialog.tsx (3)

55-57: 빈 catch {} 블록이 에러를 삼키고 있어요.

try { logout?.() } catch {}는 로그아웃 실패를 완전히 무시합니다. 위의 셀렉터 버그 수정 후에도, 최소한 console.warn으로 로깅하는 것을 권장합니다. 참고로 src/api/auth.ts의 logout 함수도 동일한 패턴(console.warn + finally에서 clearAuth)을 사용하고 있어요.

예시

   try {
     logout?.();
-  } catch {}
+  } catch (err) {
+    console.warn("로그아웃 처리 중 오류:", err);
+  }

---

9-22: isWithdrawBlockByBookings 헬퍼의 regex 매칭이 과도하게 넓어요.

/booking/i이나 /foreign key constraint/i 같은 패턴은 백엔드 내부 에러 메시지에 의존하고 있어 깨지기 쉽습니다. 주석(Line 24-28)에 백엔드 코드 기반 분기가 이미 준비되어 있으니, 백엔드 메시지가 확정되면 code === "WITHDRAW_BLOCKED"만 남기고 정리하면 좋겠어요.

---

74-79: 배경(backdrop) 버튼에 type="button" 추가를 권장합니다.

ChangePasswordDiaLog.tsx에서는 backdrop에 type="button"이 명시되어 있는데, 여기서는 빠져 있어요. 폼 안에 있지는 않지만, 일관성을 위해 추가해주세요.

수정

       <button
+        type="button"
         className="absolute inset-0 bg-black/40"
         aria-label="모달 닫기"

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@src/components/auth/ChangePasswordDiaLog.tsx`:
- Around line 41-44: In the onSuccess handler (the callback using onSuccess:
(result) => { alert(result.message); form.reset(); onOpenChange(false); }) guard
against result.message being undefined by supplying a fallback string before
calling alert (e.g., use a defaultMessage or the nullish-coalescing operator) so
the alert never shows "undefined"; keep the rest of the handler behavior
(form.reset() and onOpenChange(false)) unchanged.

🧹 Nitpick comments (4)

src/components/auth/ChangePasswordDiaLog.tsx (1)

46-53: 에러 메시지 매칭이 정규식 기반이라 깨지기 쉬워요.

/현재|기존|일치|틀렸/ 정규식은 백엔드 메시지가 살짝만 바뀌어도 의도대로 동작하지 않을 수 있어요. 가능하면 백엔드와 협의해서 에러 code 기반으로 분기하는 것이 안정적입니다. 지금 당장은 동작하지만, 백엔드 배포 완료 후 code 필드 기반으로 전환하는 걸 추천드려요.

src/components/auth/WithdrawDialog.tsx (3)

79-83: 배경 버튼에 type="button" 속성이 빠져있어요.

ChangePasswordDialog의 동일한 backdrop 버튼에는 type="button"이 있는데, 여기는 빠져있네요. <button>의 기본 type은 "submit"이라 form 내부에서 의도치 않은 동작이 발생할 수 있어요. 지금은 form 밖이라 실질적 문제는 없지만, 일관성을 위해 추가하면 좋겠습니다.

수정 예시

       <button
+        type="button"
         className="absolute inset-0 bg-black/40"
         aria-label="모달 닫기"

---

25-29: 주석 처리된 코드가 남아있어요.

백엔드 배포 후 교체 예정이라는 건 이해하지만, TODO 주석으로 남기거나 이슈로 트래킹하는 게 더 깔끔할 것 같아요. 현재 isWithdrawBlockByBookings도 regex 기반이라 백엔드 확정 후 빠르게 code 기반으로 전환해주시면 좋겠습니다!

---

10-23: isWithdrawBlockByBookings 헬퍼의 any 타입과 regex 매칭에 대해.

현재 e: any로 타입이 지정되어 있고, foreign key constraint, booking, 예약 등 다양한 문자열 패턴을 regex로 검사하고 있어요. 백엔드 에러 응답 구조가 확정되면 타입을 좁히고 code 필드만으로 분기하는 것이 유지보수에 유리합니다. 지금은 임시 조치로 이해하지만, 백엔드 배포 후 꼭 정리해주세요 🙏