스터디룸 디자인¶
스터디룸을 만들고, 학생을 초대하고, 목록에서 들어가기까지의 화면과 인터랙션을 정의한다. 생성은 2-스텝 위저드와 완료 모달로, 초대는 이메일 Combobox에 칩을 더하는 방식으로 풀었다. 전용 디자인 시안은 아직 없어 prd의 구성요소·검증·정책과 FRD의 UI 명세를 화면 흐름의 골격으로 삼는다.
사용자 플로우¶
스터디룸 목록 ─[+ 생성]→ 생성 위저드(Step1 기본정보 → Step2 수업정보)
└─[생성하기]→ 완료 모달
├─[학생 초대하기]→ 초대 화면(이메일 검색·칩)
└─[스터디룸으로 이동]→ 룸 대시보드
화면 · 컴포넌트 (Figma 링크)¶
- 목록: 카드/리스트, 정렬 토글(생성순 default / 가나다순).
- 생성 위저드: 진행률 스텝퍼 상단 고정(1/2 "스터디룸 기본 정보를 입력해주세요." → 2/2 "수업 정보를 선택해 주세요.").
- Step1: 스터디룸명 입력(maxlength=50·
나의 첫 스터디룸) · 설명 TipTap 미니 에디터(선택) · 공개범위 Select(전체 공개 default / 비공개, 헬퍼 "비공개는 초대된 사용자만 조회할 수 있어요."). - Step2: RadioGroup(온/오프라인) · RadioGroup(1:1/1:N) · RadioGroup(국/영/수/기타) · Select(초1~6/중1~3/고1~3/없음).
다음/생성하기는 기본 비활성→유효 시 활성,건너뛰기도 Step2 활성 트리거. 안내 "작성하신 정보는 더 나은 디에듀 서비스를 제공하는 데 활용돼요."- 완료 모달: Radix Dialog. 타이틀 "스터디룸이 생성되었어요" + 서브 "다음으로 무엇을 하시겠어요?". 버튼 A(학생 초대) / B(룸 이동) / 닫기(X). 반투명 오버레이(rgba 0,0,0,0.6)·중앙 정렬·배경 스크롤 차단. 페이드 인 0.2s/아웃 0.15s. 최소 너비 320px·버튼 세로 스택.
- 초대: 이메일 Combobox/Popover 검색(Enter 실행, ph "초대할 학생을 검색후 선택해 주세요.") → option 클릭 시 칩 추가 →
초대하기(전송 중 "초대 중…"). 안내 "학생을 초대하지 않아도 스터디룸 기능을 먼저 사용할 수 있어요."
메시지 매핑(주요)¶
| ID | 문구 | 위치 |
|---|---|---|
| V-SR-01 | 스터디룸 이름을 입력해주세요! | 룸명 하단 |
| V-SR-02 | 50자 이내로 입력해주세요. | 룸명 하단 |
| V-SR-03 | 공개 범위를 선택해주세요! | 공개범위 하단 |
| V-SR-04 | 설명은 300자 이내(순수 텍스트)로 입력해주세요. | 설명 에디터 하단 |
| V-SR-05 | 지원하지 않는 서식은 사용할 수 없어요. | 설명 에디터 상단(툴바 인라인) |
| V-SR-11 | 항목을 선택하거나 건너뛰기를 눌러주세요. | 질문 카드 하단 |
| V-INV-02 | 해당 이메일을 가진 사용자가 없습니다. | 검색 결과 영역 |
| 500 | 잠시 후 다시 시도해주세요. | 상단 글로벌 배너 |
전체 매핑은 frd.
인터랙션 · 상태¶
- Step1은 로컬 검증·상태저장만(서버 호출 없음), Step2 제출 시 Step1+Step2 병합해 1회 API.
- 201 → 완료 모달(포커스 Dialog.Title) / 4xx → 첫 오류 필드 포커스+인라인 / 5xx → AlertDialog. 제출 중 중복 요청 차단(
disabled+aria-busy). 모달 닫기(Esc/X/외부클릭) 시 트리거(생성하기)로 포커스 복귀. - 초대: Combobox 클릭→Popover 오픈→검색→option 선택→칩 추가(1명+ 시 CTA 활성)→
sendInvitation({studyRoomId, emails[]}). 202 → 룸 노트/대시보드 이동. 칩 중복/미존재 인라인 피드백(V-INV-*). - 상태: IDLE → 입력 중 → 유효성 분기(인라인 에러/CTA 비활성 ↔ 전역 상태 저장→Step2), 제출 로딩(
aria-busy), 완료 모달, 빈 목록, 권한 없음 리디렉션.
접근성¶
- 모바일·데스크톱 위저드 레이아웃(모달 최소 320px·버튼 세로 스택).
- 라벨 연결(
<label for>), 에러aria-invalid+aria-describedby, 라디오role="group"+aria-checked+aria-required, 완료 모달role="dialog/alertdialog"+aria-modal+포커스 트랩, 초대 Comboboxaria-expanded/aria-controls+칩role="list". 에러 영역은role="alert"또는aria-live="polite"중 하나만(중복 낭독 방지). CTA 대비 3:1 이상. 시각 라벨 있으면aria-label중복 금지. 상세 → responsive.
개발 핸드오프 노트¶
- 검증 코드(
V-SR-*·V-INV-*)·트래킹 이벤트·라우팅(publicId·/r/{publicId}/dashboard)·Status Code는 frd. 핸드오프 규약 → dev-handoff. 토큰·컴포넌트 → design-system. (전용 Figma 미확보 — 확보 시 추가.)