Auth Dialog

로그인과 가입 폼을 하나의 모달로 묶은 컴포넌트입니다. 모달 안에서 두 모드를 오갈 수 있고, 성공하면 자동으로 닫힙니다.

When to use

• 사용자를 현재 페이지에서 벗어나게 하지 않고 로그인·가입을 받고 싶을 때
• 보호된 화면의 "로그인이 필요합니다" 안내에서 바로 로그인시키고 싶을 때 (RequireAuth가 이 모달을 엽니다)
• 헤더, 웰컴 페이지, 버튼 어디서든 openDialog 한 줄로 열고 싶을 때

Preview

const openDialog = useAuthDialog((s) => s.openDialog);

<Button onClick={() => openDialog("login")}>로그인</Button>
<Button onClick={() => openDialog("signup")}>회원가입</Button>

Store

Behavior

• 로그인에 성공하면 액세스 토큰을 저장하고 모달을 닫습니다.
• 가입에 성공하면 같은 아이디와 비밀번호로 이어서 로그인합니다.
• 로그인에서 비밀번호를 잊으셨나요?를 누르면 같은 모달 안에서 비밀번호 찾기 폼으로 바뀌고, 메일 발송 후 안내 화면이 나옵니다.
• 로그인 연속 실패 잠금 상태를 폼에 전달합니다 (Login Lockout 참고).
• 가입 폼에는 meerkit.config.ts의 비밀번호 확인, 선택 항목, 약관 설정이 그대로 적용됩니다.
• 서버가 돌려준 detail 메시지를 폼 아래에 표시합니다.

Usage

어디서든 스토어의 openDialog만 호출하면 됩니다. 웰컴 페이지의 버튼도 같은 방식입니다.

"use client";

import { useAuthDialog } from "@/meerkit/auth/dialog-store";

export function LoginButton() {
  const openDialog = useAuthDialog((s) => s.openDialog);
  return <button onClick={() => openDialog("login")}>로그인</button>;
}

Accessibility

• Radix Dialog 기반이라 열리면 포커스가 모달 안에 갇히고, Esc로 닫을 수 있습니다.
• 제목과 설명이 aria-labelledby, aria-describedby로 연결됩니다.
• 닫으면 포커스가 모달을 연 버튼으로 돌아갑니다.

Customization

• 문구(제목, 설명, 전환 링크)는 AuthDialog.tsx에 있습니다.
• 폭과 모서리는 components/ui/dialog.tsx의 DialogContent 클래스를 바꿉니다.
• 소셜 로그인 같은 버튼은 폼 아래에 추가하면 됩니다.