Q&A 디자인 (Design)¶
요지¶
Q&A 화면은 질문 목록·작성·상세 세 개로 이뤄진다. 아래 화면·컴포넌트·상태는 디자인 전용 원본이 없어 기획(prd)·개발 명세(frd)의 정책에서 역산한 초안이다.
🚧 내용 추가 필요
Q&A 전용 Figma(화면흐름·컴포넌트·상태 시안) 미입수. 디자이너가 확정 시 — 질문 목록/작성/상세 3화면의 레이아웃·상태 칩 디자인·빈/권한없음/탈퇴 사용자 상태 시안·답변 스레드 UI를 본문에 명세. 아래는 그 전까지의 정책 기반 골격.
상위 PRD¶
기획(1:1 질문/답변, 비공개 열람, 공용 에디터 첨부)은 prd, 데이터·권한 계약은 frd가 기준이다.
사용자 플로우¶
- 질문 목록: 스터디룸 내 본인 질문 리스트(학생) / 전체 학생 질문 리스트(선생님). 상태 칩(답변 대기 / 답변 완료).
- 질문 작성: 제목 + 본문 에디터(에디터) + 출처 선택(일반 / 수업노트 연결) + 공개범위.
- 질문 상세: 질문 본문 + 답변 스레드(다중) + 메타(작성자·작성일시·조회수). 노트 연결 시 노트 제목·링크 표시.
진입 라우팅(로그인 → 스터디룸 권한 → 사용자 권한 순차 검증)은 frd §5.
화면 · 컴포넌트¶
- 질문 카드(상태 칩·작성자·상대날짜·'수정됨'), 답변 작성/수정 폼(선생님 전용), 공개범위 토글(비공개/보호자공개).
- 빈 상태(질문 없음), 권한 없음, 탈퇴 사용자('탈퇴한 사용자' 표기).
- 에셋·토큰·아이콘·버튼은 design-system. 에디터 툴바 에셋은 에디터 공용. (전용 Figma 미입수.)
인터랙션 · 상태¶
- 작성 → 등록 → 목록 갱신, 답변 등록 시 상태 칩 '답변 완료' 전환.
- 비공개 질문은 타 학생에게 목록·상세 모두 미노출.
- 수업노트 상세에서 '질문하기' 진입 시 출처가 '수업노트 질문'으로 자동 선택, 상세 화면에 노트 제목·링크 카드 표시.
- 보호자 공개 토글: 비공개 질문도 보호자에게 보일지 작성/수정 시 선택(default 공개).
엣지케이스
- 질문 제목 50자 / 본문 3,000자 / 답변 3,000자 초과 입력 차단·카운터 표시.
- 답변 대기 상태에서 학생이 질문 수정 가능. 작성자 본인만 수정·삭제(질문은 학생, 답변은 선생님).
- 탈퇴/내보낸 사용자 작성 건: 데이터 잔존, 작성자명 회색 처리.
- 권한 없는 URL 직접 접근: frd §5 순차 라우팅 폴백 화면 이동.
접근성¶
표준 그리드·브레이크포인트는 responsive. 폼 라벨·상태 칩 색상 대비, 키보드 포커스 순서 준수.
개발 핸드오프 노트¶
핸드오프 규약은 dev-handoff. 데이터/권한 계약은 frd SSOT.