WIZ Design System

데모#

상단 상태 컨트롤로 기본·저장 중·저장됨·오류를 전환해 폼의 저장 매트릭스를 검수합니다. 오류에선 메시지 위계가 함께 나타납니다 — 이메일 필드의 Tier 1 오류 + CTA 옆 Tier 2 폼 메시지. 실제 저장은 없습니다(UI Reference).

상태

프로필

워크스페이스에 표시되는 정보입니다.

이름

이메일

알림

받을 알림을 선택하세요.

이메일 알림멘션·승인 요청을 메일로 받기

데스크톱 알림브라우저 푸시 알림

주간 요약매주 월요일 활동 요약

환경

테마와 언어를 설정합니다.

언어

Settings — 섹션 내비 + 프로필·알림·환경 폼 + 저장 상태 매트릭스(좁아지면 적층)

구성#

영역	역할
섹션 내비	설정 그룹 이동 — 넓으면 좌측 sticky, 좁으면 가로 스크롤 탭
프로필	FormField + Input — 라벨·접근성 자동 배선, 검증 시 필드 오류(Tier 1)
알림	라벨/설명 + Switch 토글 행
환경	RadioGroup 테마 · Select 언어
푸터	좌측 저장 결과 메시지(Tier 2) + 우측 취소 · 저장(저장 중 로딩)

폼 규약 — 비제어 우선#

WDS 폼 컴포넌트는 비제어(uncontrolled)를 기본으로 합니다 — defaultValue/defaultChecked로 초기값을 주고 변경은 onChange로 받습니다. 화면이 모든 입력 상태를 직접 들고 있을 필요가 없어 폼이 단순해집니다.

상태#

폼은 행복 경로 하나가 아니라 저장 매트릭스로 다룹니다. 데모의 상태 컨트롤로 전환합니다.

상태	트리거	표현
기본	편집 중	폼 + 취소·저장(활성)
저장 중	저장 제출	저장 버튼 로딩 스피너 + 컨테이너 `aria-busy` + 취소 비활성
저장됨	저장 성공	`FormMessage(success)`(Tier 2) — CTA 옆
오류	검증·저장 실패	이메일 필드 오류(Tier 1) + `FormMessage(error)`(Tier 2)

메시지 위계 — 3-tier#

폼은 메시지 위계의 세 계층이 모두 나타나는 표면입니다.

Tier	범위	컴포넌트	이 패턴에서
1 필드	단일 입력	`FormField`의 `error`	이메일 도메인 검증 실패 — 필드 아래 `role="alert"`
2 폼	폼 전체·제출	`FormMessage`	저장 결과 — CTA 옆 success/error
3 페이지	화면·세션	`Alert`·`Toast`	흐름과 무관한 전역 알림(여기선 미사용)

오류는 필드(Tier 1)에서 무엇을, 폼(Tier 2)에서 결과를 알려 사용자가 어디를 고칠지 바로 압니다.

적응형 동작#

컨테이너 폭	레이아웃
`≥ 640px`	좌 섹션 내비(sticky) + 우 폼
`< 640px`	내비 가로 스크롤 + 폼 단독 적층

접근성#

계약	구현
라벨 배선	`FormField`가 label·control을 `htmlFor`/`id`로 연결하고 단일 자식에 자동 주입
필드 오류	`error` 시 `role="alert"` 메시지 + 컨트롤 `aria-invalid="true"` + `aria-describedby` 연결
저장 결과	`FormMessage(error)`는 `role="alert"`(즉시 낭독), success는 `role="status"`
저장 중	컨테이너 `aria-busy="true"` + 저장 버튼 로딩(스피너 `aria-hidden`, 버튼 `aria-busy`)
토글	`Switch`에 `aria-label` — 시각 라벨과 별개로 보조기술에 의미 전달

사용 컴포넌트#

FormField · Input · Switch · RadioGroup · Select · Button(로딩) · FormMessage(저장 결과, Tier 2) · SegmentedButton(데모 컨트롤). 저장 결과는 메시지 위계(Tier 1 필드 + Tier 2 폼)로 전달합니다. 실제 저장은 없습니다 — UI Reference입니다.