스터디룸 대시보드 디자인¶
역할에 따라 보이는 위젯이 달라지는 대시보드(Home)의 화면과 인터랙션을 정의한다. 위젯 구성은 대치온라인 시절 메인 화면을 바탕으로 추렸다. 전용 디자인 시안은 아직 없어 prd의 권한별 노출 매트릭스와 화면 구성을 골격으로 삼는다.
사용자 플로우¶
룸 진입 → 대시보드(Home)
헤더(룸명·공개여부·교사명)
요약 카드(진도율·출석률·과제완료율·성취도) ─클릭→ 상세 피처
공지/일정(강사 작성 · 학생·보호자 읽기)
활동 로그(노트·과제·피드백 시간순 무한 스크롤)
[강사] 학생 리스트 요약 테이블
화면 · 컴포넌트 (Figma 링크)¶
- 권한 분기(LEADER/MEMBER/GUARDIAN)에 따라 노출 위젯·데이터 범위 변경 → 매트릭스 SSOT는 prd §요구사항.
- 요약 카드, 공지/일정 리스트, 활동 피드(무한 스크롤), 학생 테이블(강사), CTA(역할별).
- 토큰·컴포넌트 → design-system. (전용 Figma 미확보 — 확보 시 추가.)
인터랙션 · 상태¶
- 카드 클릭 → 상세 피처(
/study-rooms/{id}/{feature}) 이동. CTA: 강사(작성·초대·설정) / 학생(과제 확인) / 보호자(성장 리포트). - 새로고침·무한 스크롤(활동 로그 폴링/소켓 갱신) 시
aria-live="polite"낭독. 트래킹 이벤트는 prd §트래킹·라우팅 / frd. - 상태: 빈 위젯/로딩/권한없음/집계 실패 에러.
접근성¶
- 위젯 그리드의 모바일 스택 레이아웃. A11y 요건:
- 페이지
<main role="main">, 헤더aria-labelledby="room-title", 요약 카드role="button"+aria-describedby(클릭 이동 가능 시), 공지/일정role="region"+aria-label, 활동 로그aria-live="polite", 학생 테이블<table role="grid">+<th scope>, 하단 안내role="note", 사이드바<nav aria-label="스터디룸 탐색">. - 색상만으로 상태 구분 금지(출석률=색+텍스트 병행), 차트는
aria-describedby텍스트 요약 제공. 상세 → responsive.
개발 핸드오프 노트¶
- 권한 매트릭스·라우팅(
/studyrooms/{publicId}/dashboard)·트래킹은 frd / prd. 핸드오프 규약 → dev-handoff.