LoginMethods
인증 방식 버튼을 동등하게 노출하는 그룹 — prominence parity를 풀폭 균등 스택으로 강제하고, 선택적 "또는" 라벨 구분선으로 1차 폼과 방식 목록을 가릅니다.
마지막 업데이트 2026-06-22
한눈에#
인증 방식 버튼들을 풀폭 균등 스택으로 배치하는 그룹입니다. Apple·Google 가이드라인의
prominence parity(인증 방식을 동등하게 노출, 한 방식을 3차 스타일로 묻지 않음)를
레이아웃으로 강제합니다. 선택적 라벨 구분선(divider, 기본 “또는”)으로 1차 폼 영역과
방식 목록을 가릅니다. 자식으로 AuthMethodButton과
ProviderButton을 섞어 합성합니다.
- prominence parity
- 풀폭 균등 스택
- "또는" 구분선
- children 합성
기본 — 구분선 + 방식 스택
구분선#
divider로 가운데 정렬 라벨을 바꾸거나(string), false로 끕니다. 1차 폼과 방식 목록을 가르는 헤어라인입니다.
prominence parity#
모든 자식이 동일 폭·동일 간격입니다. 한 방식만 작게/3차로 두지 않습니다 — 인증 방식은 동등하게 노출하라는 Apple·Google 공통 요구를 그룹이 보장합니다.
사용#
- 이럴 때: 로그인/가입 화면에서 인증 방식을 둘 이상 노출할 때 — 방식들을 동등하게 묶어 prominence parity를 강제합니다.
- 자식 합성: 배열 prop이 아니라
children으로 AuthMethodButton·ProviderButton을 직접 넣습니다(자유 합성). - 1차 영역과 분리: 이메일/비밀번호 폼 같은 1차 입력 영역 아래에 두고,
divider로 시각적으로 가릅니다. 패턴 전체 구성은 Login 패턴을 참고하세요. - 피하세요: 한 방식만 강조하려고 다른 방식을 그룹 밖으로 빼거나 작게 만드는 것 — parity 위반.
Props#
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
children | ReactNode | — | 인증 방식 버튼들 — 풀폭 균등 스택으로 배치 (필수) |
divider | string | false | '또는' | 가운데 정렬 라벨 구분선. false면 미렌더 |
aria-label | string | '로그인 방식' | 그룹 접근성 이름 |
className | string | — | 그룹 루트에 병합되는 소비자 클래스 |
접근성#
- 컨테이너는
role="group"+aria-label(기본 “로그인 방식”)로 방식 묶음을 보조 기술에 한 단위로 전달합니다. - 구분선은 장식이므로
aria-hidden입니다 — 접근성 트리에 노출되지 않습니다. - 키보드 포커스·타깃 크기 등 개별 버튼의 접근성은 각 자식(AuthMethodButton·ProviderButton)이 보장합니다.