LoginMethods
인증 방식 버튼을 동등하게 노출하는 그룹 — prominence parity를 풀폭 균등 스택으로 강제하고, 선택적 "또는" 라벨 구분선으로 1차 폼과 방식 목록을 가릅니다.
마지막 업데이트 2026-06-29
한눈에#
인증 방식 버튼들을 풀폭 균등 스택으로 배치하는 그룹입니다. 서드파티 인증 가이드라인의
prominence parity(인증 방식을 동등하게 노출, 한 방식을 3차 스타일로 묻지 않음)를
레이아웃으로 강제합니다. 선택적 라벨 구분선(divider, 기본 “또는”)으로 1차 폼 영역과
방식 목록을 가릅니다. 자식으로 AuthMethodButton과
ProviderButton을 섞어 합성합니다.
- prominence parity
- 풀폭 균등 스택
- "또는" 구분선
- children 합성
기본 — 구분선 + 방식 스택
구분선#
divider로 가운데 정렬 라벨을 바꾸거나(string), false로 끕니다. 1차 폼과 방식 목록을 가르는 헤어라인입니다.
prominence parity#
모든 자식이 동일 폭·동일 간격입니다. 자식 컴포넌트가 fullWidth를 빠뜨려도 그룹 안에서는
폭이 100%로 맞춰집니다. 한 방식만 작게/3차로 두지 않습니다 — 인증 방식은 동등하게 노출하라는
주요 서드파티 인증 요구를 그룹이 보장합니다.
사용 시점#
- 이럴 때: 로그인/가입 화면에서 인증 방식을 둘 이상 노출할 때 — 방식들을 동등하게 묶어 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)이 보장합니다.