LoginSurface
범용 로그인·기업 로그인·MFA·복구·패스키 등록을 같은 단일 패널 공식으로 조립하는 슬롯형 인증 표면 recipe.
마지막 업데이트 2026-06-29
한눈에#
LoginSurface는 로그인 화면의 단일 인증 패널을 패키지 API로 제공하는 recipe입니다.
서비스 로고, 제목, 설명, 입력 영역, 대체 인증 방식, 하단 링크를 같은 폭과 리듬으로 쌓습니다.
실제 인증 의식(WebAuthn·OAuth/OIDC·SAML·세션·복구)은 제품 코드가 배선합니다.
서비스 로고
로그인
이메일과 비밀번호를 기본으로 두고 패스키를 함께 제공합니다.
- 최대 390px
- slot composition
- RSC-safe
- 인증 로직 없음
기본 — 브랜드 슬롯 + 본문 + 액션 + 푸터
슬롯#
서비스 로고
로그인
회사 이메일 또는 조직 SSO로 계속할 수 있습니다.
사용 시점#
- 이럴 때: 로그인·재인증·인증 앱 코드·복구 코드·패스키 등록 권유를 같은 패널 공식으로 재사용할 때.
- 범용/기업 분리: 범용은 하단에
계정 만들기, 기업은관리자에게 문의를 둡니다. 기업 패널은 셀프 회원가입으로 보내지 않습니다. - Provider 경계: Apple·Google·Microsoft는 ProviderButton, 조직 SSO는 AuthMethodButton
method="sso"를 씁니다. - 피하세요: 제품 인증 SDK, client id, redirect URI, WebAuthn challenge, 토큰/세션 처리를
LoginSurface에 넣지 마세요.
Props#
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
brand | ReactNode | — | 서비스 로고·워드마크 슬롯. 제품 로고를 그대로 넣는다. |
title | ReactNode | — | 표면 제목. 제공 시 headingLevel에 맞는 heading으로 렌더한다. |
subtitle | ReactNode | — | 제목 아래 보조 설명. |
footer | ReactNode | — | 하단 보조 링크·문의·가입 CTA 슬롯. |
size | 'sm' | 'md' | — | 패널 최대 폭 — sm(390px, 기본) 또는 md(440px). |
headingLevel | 1 | 2 | 3 | — | 제목 heading level — 기본 h1. |
ref | Ref<HTMLDivElement> | — | 루트 <div>로 전달되는 ref. |
접근성#
- 기본
role="region"이며, 문자열title을 주면 접근성 이름으로도 사용합니다. 제목이 ReactNode이거나 직접 구조를 조립하면aria-label을 주세요. - 제목은 기본
h1이고headingLevel로h2·h3로 낮출 수 있습니다. - 필드 라벨·오류·자동완성은 FormField와 Input이 소유합니다.