) => {
+ event.preventDefault();
+ const pasted = event.clipboardData.getData('text').replace(/\D/g, '').slice(0, length);
+ if (!pasted) return;
+
+ onChange(pasted);
+ focusInput(pasted.length);
+ };
+
+ return (
+
+ {Array.from({ length }).map((_, index) => (
+ {
+ 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"
+ />
+ ))}
+
+ );
+}
diff --git a/src/pages/my/ui/LogoutConfirmDialog.tsx b/src/pages/my/ui/LogoutConfirmDialog.tsx
new file mode 100644
index 0000000..202cee1
--- /dev/null
+++ b/src/pages/my/ui/LogoutConfirmDialog.tsx
@@ -0,0 +1,65 @@
+import { useNavigate } from 'react-router-dom';
+
+import { useLogout } from '@/features/auth';
+import { clearTokens } from '@/shared/lib/auth/token';
+import { Modal } from '@/shared/ui';
+
+interface LogoutConfirmDialogProps {
+ open: boolean;
+ onClose: () => void;
+}
+
+export function LogoutConfirmDialog({ open, onClose }: LogoutConfirmDialogProps) {
+ const navigate = useNavigate();
+ const { mutateAsync, isPending } = useLogout();
+
+ const handleClose = () => {
+ if (isPending) return;
+ onClose();
+ };
+
+ const handleConfirm = async () => {
+ try {
+ await mutateAsync();
+ } catch (error) {
+ // 서버 로그아웃이 실패해도 로컬 세션은 반드시 정리해 사용자가 갇히지 않도록 한다.
+ console.error('[auth/logout] 서버 로그아웃 실패', error);
+ } finally {
+ // 인증 페이지(마이도도)에서 먼저 빠져나간 뒤 토큰을 정리해야
+ // 잔여 인증 쿼리의 재요청 → 401 → 세션 만료 리다이렉트를 피할 수 있다.
+ navigate('/', { replace: true });
+ clearTokens();
+ }
+ };
+
+ return (
+
+
+
LOGOUT
+
로그아웃 하시겠습니까?
+
+ 로그아웃하면 현재 기기에서 로그인 정보가 정리돼요. 다시 이용하려면 로그인이 필요해요.
+
+
+
+
+
+
+
{MY_DODO_SECTION_LABELS[section]}
- {items.map((item) => (
-
- {item.label}
-
- ))}
+ {items.map((item) =>
+ item.type === 'action' ? (
+
+ ) : (
+
+ {item.label}
+
+ ),
+ )}
);
}
export function MyDodoSidebar({ activeKey }: MyDodoSidebarProps) {
+ const [logoutOpen, setLogoutOpen] = useState(false);
+
return (
-
-
+ setLogoutOpen(true)} />
+ setLogoutOpen(true)} />
+
+
setLogoutOpen(false)} />
);
}
diff --git a/src/pages/my/ui/MyProfileEditContent.tsx b/src/pages/my/ui/MyProfileEditContent.tsx
index 36bc020..d818c96 100644
--- a/src/pages/my/ui/MyProfileEditContent.tsx
+++ b/src/pages/my/ui/MyProfileEditContent.tsx
@@ -1,4 +1,5 @@
import { type ChangeEvent, type ReactNode, useEffect, useMemo, useRef, useState } from 'react';
+import { Link } from 'react-router-dom';
import profileDefaultIllustration from '@/features/auth/assets/profile-default.svg';
import { PROFILE_UPDATE_STATUS_MESSAGES, getApiErrorMessage, updateMyProfile, type UserProfile } from '@/features/auth';
@@ -320,6 +321,23 @@ export function MyProfileEditContent({ user, isLoading = false }: MyProfileEditC
+
+
+
+
회원 탈퇴
+
+ 탈퇴하면 계정과 모든 데이터가 삭제되며 되돌릴 수 없어요.
+
+
+
+ 회원 탈퇴
+
+
+
+
회원 탈퇴 완료
+
+ 그동안 DoDo를 이용해 주셔서 감사합니다.
+
더 좋은 모습으로 다시 만날 수 있기를 바라요.
+
+
+
+
+
+
인증번호
+
메일로 받은 6자리 숫자를 입력해주세요.
+
+
+
+
+ 인증번호를 받지 못하셨나요?
+
+
+
+ {withdrawError ?
{withdrawError}
: null}
+
+
+