Checklist

공통

• 로고를 클릭하면 /로 이동
• Desktop, tablet, mobile 반응형 디자인

메인 페이지(/)

UI

• 롤링 페이퍼 소개 영역
• 이모지 소개 영역

Navigation

• '롤링 페이퍼 만들기' 버튼을 클릭해서 /post로 이동
• '구경해보기' 버튼을 클릭해서 /list로 이동

롤링 페이퍼 목록 페이지(/list)

UI

• 인기 롤링 페이퍼 목록 표시
• 최근에 만든 롤링 페이퍼 목록 표시
• Desktop에서 좌우 버튼을 클릭해서 다음/이전 목록 표시
• Tablet, mobile에서 좌우 스크롤로 전체 목록 탐색
• 인기 롤링 페이퍼 / 최근 롤링 페이퍼가 4개 미만일 때 처리
• 이모지 배지의 개수가 커질 때 layout 처리

Navigation

• '롤링 페이퍼 만들기' 버튼을 클릭해서 /post로 이동
• '나도 만들어보기' 버튼을 클릭해서 /post로 이동
• 카드를 클릭해서 /post/:id로 이동

생성된 롤링 페이퍼 페이지(/post/:id 및 /post/:id/edit)

UI

• 롤링 페이퍼 받는 사람 이름 표시
• 롤링 페이퍼에 메시지를 남긴 sender 숫자 표시
• 롤링 페이퍼에 받은 reaction top3 표시
• 롤링 페이퍼에 받은 최대 8개의 reaction을 popover로 표시
• '추가' 버튼을 클릭해서 emoji picker popover 표시
• 공유 버튼을 클릭해서 '카카오톡 공유' 및 'URL 공유' 옵션 popover 표시
• 'URL 공유' 클릭 시 toast 표시
• 메시지 카드 클릭 시 modal 표시
• 배경 이미지가 없을 때만 배경 색상 사용

Feature

• Emoji picker popover에서 emoji 선택 시 전체 emoji 개수에 반영
• '카카오톡 공유' 클릭 시 카카오톡 채팅방으로 /post/:id page 공유
• 'URL 공유' 클릭 시 클립보드에 /post/:id URL 저장

Navigation

• '+' 카드를 클릭하면 /post로 이동
• (+) '수정하기' 버튼을 클릭하면 /post/:id/edit으로 이동
• (+) '완료하기' 버튼을 클릭하면 /post/:id로 이동 (되돌아가기)
• (+) '삭제하기' 버튼을 클릭하면 /list로 이동

롤링 페이퍼 생성 페이지(/post)

UI

• 이름을 입력하지 않고 focus out 하면 error message 표시
• 배경 색상 선택
• 배경 이미지 선택
• '컬러'와 '이미지' 버튼을 클릭해서 색상 목록과 이미지 목록을 바꿔 보여주기

Feature

• '생성하기' 버튼 클릭 시 새 롤링 페이퍼 생성
• 받는 사람 이름을 입력하지 않으면 '생성하기' 버튼 비활성화

Navigation

• '생성하기' 버튼을 클릭하면 /post/:id로 이동 (생성된 롤링 페이퍼)

롤링 페이퍼에 메시지 보내기 페이지(/post/:id/message)

UI

• 이름을 입력하지 않고 focus out 하면 error message 표시
• 프로필 이미지를 선택하지 않으면 preview에 기본 이미지 표시
• 프로필 이미지를 선택하면 preview에 선택한 이미지 표시
• Text editor
• '상대와의 관계' input의 dropdown으로 '지인', '동료', '가족', '친구' 표시
• '폰트 선택' input의 dropdown으로 4가지 폰트 표시

Feature

• 받는 사람 이름과 내용 모두를 입력하지 않으면 '생성하기' 버튼 비활성화
• Dropdown input으로 상대와의 관계 선택
• Dropdown input으로 폰트 선택

Navigation

• '생성하기' 버튼을 클릭하면 /post/:id로 이동