에디터 고도화 디자인 (Design)¶
요지¶
공용 에디터의 툴바와 첨부, 인터랙션을 다룬다. 아래 화면·컴포넌트·상태는 디자인 전용 원본이 없어 기획(prd)·개발 명세(frd)의 기능·예외에서 역산한 초안이다.
🚧 내용 추가 필요
에디터 전용 Figma(툴바·첨부 카드·og 카드·업로드 상태 시안) 미입수. 디자이너가 확정 시 — 툴바 버튼군 아이콘·이미지/파일/링크 첨부 카드 디자인·업로드 진행률/실패 UI·모바일 툴바 축약 규칙을 본문에 명세. 아래는 그 전까지의 정책 기반 골격.
상위 PRD¶
기획(이미지/파일/링크 첨부, 기본 서식, 공용 미디어 연결)은 prd, 용량 정책과 미디어 연결 계약은 frd가 기준이다.
사용자 플로우¶
- 에디터 본문: 툴바(서식·이미지·파일·링크) + 작성 영역. 공용 컴포넌트로 수업노트(teaching-note)·qna·과제관리에서 동일 노출.
- 이미지 삽입: 툴바 [이미지] 또는 드래그&드롭 → 업로드 로딩 → 썸네일 삽입(크기 조절·정렬).
- 파일 첨부: 다운로드 링크 카드(아이콘+파일명+용량), 다중.
- 링크: Ctrl+K/버튼 → og 미리보기 카드(링크/문구 개별 편집).
화면 · 컴포넌트¶
- 툴바 버튼군(헤딩·bold·기울임·들여쓰기·이미지·파일·링크), 업로드 로딩/진행, 첨부 카드, og 카드.
- 상태: 업로드 중 / 성공 / 실패(재시도), 용량·확장자 초과 경고, 잘못된 URL 경고.
- 툴바 아이콘·토큰은 design-system. 첨부 카드/og 카드 스펙 공용.
인터랙션 · 상태¶
- 드래그&드롭, 단축키(Ctrl+B/L/K, Tab/Shift+Tab), 비로그인 첨부 클릭 시 로그인 화면 → 원래 화면 복귀.
- 이미지 업로드 실패 시 에러 토스트("업로드 실패. 이미지를 다시 업로드해주세요.") + 재시도 UI.
엣지케이스
- 이미지 5MB / 파일 30MB 초과 → "용량 초과" 알림, 삽입 실패.
- 미지원 확장자(이미지: jpg/png/gif/webp 외, 파일: pdf/docx/pptx/hwp/hwpx/xlsx/zip 외) → 거부.
- 잘못된 URL 형식 → "잘못된 주소입니다" 경고.
- presignedUrl 만료 시 재요청 UX(상세 조회 시
MediaAssetContentResolver가media://참조를 갱신 — frd) — 진행률·만료 표시는 오픈이슈(prd).
접근성¶
브레이크포인트·모바일 툴바 축약은 responsive. 버튼 라벨·포커스 링·대비 준수.
개발 핸드오프 노트¶
dev-handoff 규약. 미디어 연결(MediaAssetService·presignedUrl)·용량 정책은 frd SSOT.