수업노트 디자인¶

수업노트를 쓰고, 보고, 고치고, 지우는 흐름의 화면과 인터랙션을 정의한다. 화면은 좌측 상세 / 우측 목록을 나란히 둔 분할 SPA에 TipTap 에디터를 얹는 구조다. 전용 디자인 시안은 아직 없어 prd의 구성요소·공개범위·그룹화와 FRD의 UI 명세를 화면 골격으로 삼는다.

사용자 플로우¶

노트 목록(좌 상세 / 우 목록 SPA) ─[새 노트]→ 작성 화면
   목록 → 항목 클릭 → 상세 ─[수정]→ 수정 화면
                          └─[케밥 ⋮]→ 삭제(AlertDialog 확인)
학생/보호자: 상세 조회 → [질문하기] → QnA 연계

화면 · 컴포넌트 (Figma 링크)¶

목록: 좌측 상세 / 우측 목록 분할 SPA. 검색(제목/작성자)·정렬(최신 default/오래된/제목/조회수)·필터(공개범위/내 글만/대상학생)·페이지네이션. URL 쿼리 동기화.
작성/수정: 제목 입력 → TipTap 본문(bold/italic/strike/ul/ol) → 공개범위 RadioGroup → 대상학생 MultiSelect(Chip, TARGET일 때) → 보호자공개 Switch.
상세: 헤더(제목·작성자·메타·가시성 아이콘) + CTA(수정·삭제=작성자, 질문하기=학생·보호자) + TipTap Viewer + 대상학생 Chip + 과제/메모.
컴포넌트: TipTap 에디터, RadioGroup(공개범위), MultiSelect+Chip(대상학생), Switch(보호자공개), 케밥 팝오버, AlertDialog.
그룹화 UI는 스터디룸 선택 상태에서만 노출.
토큰·컴포넌트 → design-system. (전용 Figma 미확보 — 확보 시 추가.)

인터랙션 · 상태¶

작성/수정 제출 시 1회 API. 수정 충돌(409) 시 최신본 불러오기/재시도.
삭제는 케밥(작성자만) → AlertDialog 확인 → Soft Delete + 목록 갱신.
질문하기 → QnA 연계.
상태: 빈 목록, 결과 없음, 검증 에러(첫 오류 포커스), 저장 충돌(409), 권한없음/404 리디렉션.

접근성¶

분할 SPA의 모바일 단일 컬럼 전환, 에디터·필터 A11y(라벨·포커스·aria 에러). 상세 → responsive.

개발 핸드오프 노트¶

검증 코드(V-SN-*)·트래킹 이벤트·라우팅(/study-rooms/{publicId}/study-notes)·권한×공개범위 매트릭스는 frd. 핸드오프 규약 → dev-handoff.