콘텐츠로 이동
✍️ 수정가능누구나 고쳐도 됩니다. 고치면 하단 frontmatter의 갱신일·작성자·변경요약을 남겨 주세요.작성 Claude · 2026-06-04 · v12 재편·raw 컴파일·인간화

후기 디자인 스펙

요지

후기 목록과 작성 화면의 흐름·상태를 다룬다. 선행 작업으로 잡힌 디에듀 Design — 후기 와이어프레임의 골격을 옮겨 왔다.

상위 PRD (링크)

기획(작성 조건 14~60일·1회, 입력 1,000자·이미지 3장, 예외)은 prd, 구현은 frd.

사용자 플로우

프로필 > 후기 목록(최신순)
  ├─ 항목 클릭 → 본문 + 이미지 확대
  └─ [후기 작성](입장 14일 후 활성) → 작성 모달(텍스트 1,000자 + 이미지 3장) → "후기 등록 완료" 토스트
  • 강사 프로필 / 학생 프로필 > 후기 목록(최신순) → 항목 클릭 → 본문+이미지 확대.
  • 입장 14일 이후 [후기 작성] 버튼 활성 → 작성 모달 → 완료 토스트.

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

  • 후기 카드: 썸네일(이미지 + 텍스트 일부), "후기 n개" 카운트.
  • 작성 에디터: 텍스트 박스(최대 1,000자) + 이미지 업로드(최대 3장, 미리보기·삭제) + 업로드 로딩 인디케이터.
  • Figma: 디에듀 Design — 후기 와이어프레임. 토큰·컴포넌트는 design-system.

인터랙션 · 상태

  • 작성 버튼 활성 조건(입장 14일~종료 후 60일, 1회).
  • 상태: 작성 가능(14일 후) / 비활성 / 작성 중 / 업로드 로딩 / 완료 / 이미 작성 / 신고됨(검수 중).
  • 이미지 3장 초과·네트워크 오류·중복 작성 시 안내 메시지(prd §예외 처리).

접근성

  • 이미지 대체텍스트·키보드 포커스. 상태(검수 중 등)는 색 외 보조 텍스트 병행.

개발 핸드오프 노트

  • 목록은 모바일 1열·데스크탑 다열. 작성 모달은 모바일 풀스크린/시트. 브레이크포인트 공통 responsive.
  • 카드·에디터·상태와 작성 조건·예외 매핑 규약은 dev-handoff, API·도메인 구조는 frd.