다크모드
로그인 화면 — FE 메인테이너 매뉴얼
라우트
| 문맥 | 정본 route | 호환 alias |
|---|---|---|
| 조직 | /auth/organization | /auth/signin |
| 워크스페이스 | /auth/workspace | /auth/staff, /auth/signin-auth |
루트 /의 미인증 진입은 워크스페이스 로그인으로 연결됩니다.
컴포넌트
- 조직 페이지:
src/components/auth/signin/SigninPag.vue - 워크스페이스 페이지:
src/components/auth/signin-auth/SigninAuthPag.vue - 계정 유형 navigation:
src/components/auth/shared/SigninAccountContextNavigation.vue - 공용 패스워드 field:
src/components/auth/shared/SigninPasswordField.vue - 회귀 계약:
src/components/auth/signin/SigninAccountContext.spec.js
SSOT 정본은 leysys-design pattern-app/blocks/auth/Login의 Login 06 — Account context + sign-in method와 LOGIN-ACCOUNT-CONTEXT-NAVIGATION-2026-07-25 결정 문서입니다.
정보 구조
두 선택 축의 interaction semantics를 섞지 않습니다.
- 계정 유형은 route navigation입니다.
nav안의RouterLink를 사용합니다.- 현재 문맥에는
aria-current="page"를 제공합니다. - 유형 선택 아래에 대상 사용자 설명을 반복하지 않습니다.
- 로그인 방식은 조직 route 안에서 form panel을 바꾸는 tab입니다.
- 별도 가시 제목 없이
aria-label="조직 로그인 방식"으로 접근 가능한 이름을 제공합니다. role="tablist"와role="tab"을 사용합니다.aria-selected, rovingtabindex,data-state를 함께 갱신합니다.- 좌우 방향키로 이메일과 로그인 ID를 전환합니다.
- panel은
role="tabpanel"과aria-labelledby로 trigger에 연결합니다.
- 별도 가시 제목 없이
계정 유형은 2-column button-like navigation, 로그인 방식은 line tabs입니다. 같은 plane tabs를 두 줄로 반복하거나 route link에 tab role을 붙이지 않습니다.
문구 밀도
헤더는 Leyve만 표시합니다. 계정 유형별 대상 사용자 설명, 로그인 방식 가시 제목, 운영자 포털 안내는 로그인 결정이나 입력에 필요하지 않으므로 표시하지 않습니다. 조직 이메일 로그인에서 필요한 회원가입 액션만 카드 푸터 우측에 둡니다. 로그인 ID 방식과 워크스페이스 로그인에는 빈 푸터를 만들지 않습니다.
폼과 자동완성
브라우저 credential 자동완성 충돌을 줄이기 위해 다음 section을 고정합니다.
| 경로 | 사용자명 autocomplete | 패스워드 autocomplete |
|---|---|---|
| 조직 이메일 | section-organization-email username | section-organization-email current-password |
| 조직 로그인 ID | section-organization-id username | section-organization-id current-password |
| 워크스페이스 로그인 ID | section-workspace username | section-workspace current-password |
조직 코드와 워크스페이스 코드는 HTML organization autocomplete token의 본래 의미인 회사명과 다르므로 autocomplete="organization"을 사용하지 않습니다. 코드 입력은 autocomplete="off", autocapitalize="none", spellcheck="false"를 유지합니다. 워크스페이스 코드 입력은 IAM 계약과 동일한 ^ws-[0-9a-hjkmnp-tv-z]{10}$만 허용하고 레거시 무접두 코드를 위한 별도 분기는 두지 않습니다.
패스워드는 EDS input-group → input + inline-end addon → icon button 합성을 사용합니다. 페이지 전용 CSS나 input padding 보정은 추가하지 않습니다.
오류와 focus
- 모든 입력 오류는
aria-invalid와aria-describedby로 연결합니다. - 오류 문구와 인증 오류는
role="alert"로 알립니다. - submit 검증 실패 후 첫 오류 입력의 exposed
focus()를 호출합니다. - 사용자가 입력을 수정하면 해당 field 오류만 해제합니다.
- 서버 인증 오류는 사용자 존재 여부나 내부 Auth 식별자를 노출하지 않는 일반 문구를 사용합니다.
문구 계약
내부 canonical entity는 Organization, Workspace지만 한국어 UI는 다음 어휘를 사용합니다.
- 조직 계정
- 워크스페이스 계정
- 조직 코드
- 워크스페이스 코드
- 로그인 ID
Company, Office, Organization ID, Workspace 로그인처럼 언어와 계층이 섞인 문구를 새로 추가하지 않습니다.