✨ Feat: 마이도도 로그아웃 및 회원 탈퇴 기능 구현

[sooloin]

📄 작업 내용 (Description)

이번 PR에서 변경되거나 추가된 주요 작업을 간단히 설명해주세요.

로그아웃

• 사이드바 로그아웃 메뉴를 링크가 아닌 확인 모달 트리거로 전환 (메뉴에 link/action 타입 구분 추가)
• "로그아웃 하시겠습니까?" 모달 → 확인 시 POST /auth/logout 호출 후 토큰/세션 정리(clearTokens) → 홈 이동
• 인증 페이지에서 먼저 이탈한 뒤 토큰을 정리해, 잔여 인증 쿼리의 401 → 세션 만료 리다이렉트 문제 방지

회원 탈퇴 (2단계 플로우)

• 회원정보 수정 화면 하단에 danger zone 진입점 배치 → /my/withdrawal 페이지로 이동
• 1단계: POST /users/me/withdrawal/email로 인증 메일 발송, 발송 결과를 토스트로 안내, 60초 재발송 쿨다운
• 2단계: 6자리 OTP 박스 입력(자동 이동/백스페이스/붙여넣기 지원) → DELETE /users/me로 최종 탈퇴
• 탈퇴 성공 시 세션 정리(clearTokens) + 완료 모달 노출 (회원가입 완료 화면과 톤 대칭)
• 예외 처리: 메일 발송 401/404/429(쿨다운 안내)/500, 최종 탈퇴 시 인증번호 불일치(400/401)는 "인증번호가 틀렸습니다"로 안내

🖥️ 플로우

로그아웃: 사이드바 로그아웃 → 확인 모달 → 홈
회원 탈퇴: 회원정보 수정 하단 → 탈퇴 페이지 → 인증 메일 발송 → 6자리 입력 → 탈퇴 완료 모달 → 홈

🔗 관련 이슈 (Related Issues)

작업한 이슈 번호를 아래 형식으로 PULL REQUEST BODY에 작성해주세요.
(PR 머지 시 해당 이슈가 자동으로 종료됩니다.)

• Closes: [Feat] 마이도도 로그아웃 및 회원 탈퇴 기능 구현 #51
• Closes: [Feat] 마이도도 회원정보 수정 및 로그아웃/탈퇴 UI 연동 #33

✅ 체크리스트 (Checklist)

PR을 보내기 전 아래 항목들을 모두 확인해주세요.

• PR 제목은 커밋 컨벤션을 따랐습니다.
• 관련 이슈를 연결했습니다.
• 스스로 코드를 검토하고 불필요한 코드를 제거했습니다.
• 코드 스타일이 프로젝트 규칙과 일치합니다. (Style)
• 새로운 기능에 대한 테스트 코드를 추가했거나, 기존 테스트가 모두 통과했습니다. (Test)

📸 스크린샷 (Screenshots)

작업 내용과 관련된 스크린샷이 있다면 첨부해주세요. (UI 변경이 있는 경우)

💬 기타 사항 (Etc)

리뷰어에게 전달하고 싶은 추가 정보가 있다면 자유롭게 작성해주세요.

[vercel]

@sooloin is attempting to deploy a commit to the sooloin's projects Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
dodo-frontend	Ready	Preview, Comment	Jun 23, 2026 7:56am

[gemini-code-assist]

Code Review

This pull request implements the logout and user withdrawal features, including API integrations, state hooks, and UI components such as confirmation dialogs, verification code inputs, and status modals. The review feedback highlights several critical improvements: ensuring that local tokens are cleared even if the logout API fails, delaying token clearance during withdrawal to prevent premature redirection before the completion modal is shown, optimizing the countdown timer's effect dependencies, adding focus guards to the auth code input to prevent UX inconsistencies, and correcting the non-standard Tailwind class z-60 to z-[60].

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

[gemini-code-assist]

서버 로그아웃 API 요청(mutateAsync())이 실패하더라도, 클라이언트에서는 항상 토큰을 정리하고 홈 화면으로 이동할 수 있어야 합니다. 그렇지 않으면 서버 장애나 네트워크 불안정 시 사용자가 로그아웃을 할 수 없는 상태에 빠지게 됩니다.

실패 여부와 관계없이 로컬 세션을 정리하도록 finally 블록을 사용하거나 예외를 적절히 처리하는 것이 안전합니다.

  const handleConfirm = async () => {
    setErrorMessage('');

    try {
      await mutateAsync();
    } catch (error) {
      console.error('Server logout failed:', error);
    } finally {
      navigate('/', { replace: true });
      clearTokens();
    }
  };

[gemini-code-assist]

WithdrawalPage는 RequireAuth 가드로 보호되어 있습니다. 따라서 handleCompleted에서 즉시 clearTokens()를 호출하면 인증 상태가 해제되어, WithdrawalCompleteModal이 표시되기도 전에 로그인 페이지(/auth)로 강제 리다이렉트되는 UX 버그가 발생할 수 있습니다.

토큰 삭제는 탈퇴 완료 모달을 닫고 홈으로 이동하는 시점(WithdrawalCompleteModal 내부)으로 미루는 것이 안전합니다.

  const handleCompleted = () => {
    setCompleted(true);
  };

[gemini-code-assist]

WithdrawalPage에서 토큰 삭제 시점을 미룸에 따라, 탈퇴 완료 모달에서 '홈으로' 버튼을 누르거나 모달을 닫을 때 clearTokens()가 호출되도록 변경합니다. 이를 통해 사용자가 탈퇴 완료 메시지를 정상적으로 확인한 후 안전하게 세션이 정리되도록 보장할 수 있습니다.

import { useNavigate } from 'react-router-dom';

import DoDoLogo from '@/shared/assets/images/Logo_light.svg?react';
import { clearTokens } from '@/shared/lib/auth/token';
import { Modal } from '@/shared/ui';

interface WithdrawalCompleteModalProps {
  open: boolean;
}

export function WithdrawalCompleteModal({ open }: WithdrawalCompleteModalProps) {
  const navigate = useNavigate();
  const goHome = () => {
    clearTokens();
    navigate('/', { replace: true });
  };

[gemini-code-assist]

useEffect의 의존성 배열에 seconds가 포함되어 있어, 매 초마다 타이머가 해제되고 새로 생성되는 비효율이 발생합니다.

의존성을 seconds > 0으로 변경하고, setSeconds 내부에서 이전 상태값을 기반으로 안전하게 감소시키면 타이머가 한 번만 생성되어 훨씬 효율적이고 정확하게 동작합니다.

Suggested change

	useEffect(() => {
	if (seconds <= 0) return;
	const timer = setInterval(() => {
	setSeconds((prev) => (prev <= 1 ? 0 : prev - 1));
	}, 1000);
	return () => clearInterval(timer);
	}, [seconds]);
	useEffect(() => {
	if (seconds <= 0) return;
	const timer = setInterval(() => {
	setSeconds((prev) => (prev <= 1 ? 0 : prev - 1));
	}, 1000);
	return () => clearInterval(timer);
	}, [seconds > 0]);

[gemini-code-assist]

사용자가 아직 입력하지 않은 빈 슬롯(예: 3번째 칸이 비어있는데 5번째 칸)을 클릭하여 입력할 경우, 내부 문자열 처리(replace(/ /g, ''))로 인해 입력한 값이 앞쪽 빈 슬롯으로 당겨져 채워지지만 포커스는 뒤쪽에 남아있는 UX 불일치 현상이 발생합니다.

이를 방지하기 위해, 사용자가 현재 입력 가능한 가장 첫 번째 빈 슬롯보다 뒤쪽의 슬롯을 포커스하려고 할 때 자동으로 첫 번째 빈 슬롯으로 포커스를 이동시켜주는 onFocus 가드를 추가하는 것을 권장합니다.

        <input
          key={index}
          ref={(el) => {
            inputsRef.current[index] = el;
          }}
          type="text"
          inputMode="numeric"
          autoComplete={index === 0 ? 'one-time-code' : 'off'}
          maxLength={1}
          value={value[index] ?? ''}
          disabled={disabled}
          onChange={(event) => handleChange(index, event.target.value)}
          onKeyDown={(event) => handleKeyDown(index, event)}
          onFocus={() => {
            const firstEmptyIndex = value.length;
            if (index > firstEmptyIndex) {
              focusInput(firstEmptyIndex);
            }
          }}
          className="h-20 w-full rounded-xl border border-neutral-200 bg-white text-center text-2xl font-semibold text-neutral-900 outline-none transition-colors focus:border-brand disabled:bg-neutral-50 disabled:opacity-60"
        />

[gemini-code-assist]

z-60은 Tailwind CSS의 기본 z-index 클래스(z-0 ~ z-50)에 포함되지 않습니다. 프로젝트의 Tailwind 설정에 z-60이 별도로 정의되어 있지 않다면 z-index가 적용되지 않아 토스트 메시지가 모달 등의 요소 뒤에 가려질 수 있습니다.

안전하게 임의 값 문법인 z-[60]을 사용하는 것을 권장합니다.

  return createPortal(
    <div className="fixed left-1/2 top-6 z-[60] -translate-x-1/2 px-4">
      <div
        role="status"
        className={
          `rounded-2xl px-5 py-3 text-sm font-medium shadow-[0_18px_42px_rgba(15,23,42,0.18)] ${TONE_CLASS[tone]}`
        }
      >
        {message}
      </div>
    </div>,
    document.body,
  );