[Team22] 기초프로젝트 ‐ 롤링

롤링

💡 본 페이지를 통해 제공하는 모든 자료는 저작권법에 의해 보호받는 ㈜코드잇의 자산이며, 무단 사용 및 도용, 복제 및 배포를 금합니다.

1차 기초 프로젝트인 <롤링>에 대해서 안내해 드립니다.

개요

• 제목: 롤링
• 소개: 추억의 롤링 페이퍼를 웹 상에서도 즐길 수 있는 플랫폼인 '롤링' 서비스를 제공된 기획과 디자인을 따라 만들어 주세요.
• 일정: 2 / 24 (토) ~ 3 / 12 (화)
• 난이도: 중
• 디자인 시안: 롤링 Fimga 시안 확인하러 바로가기
• Swagger 문서 : 롤링 Swagger 확인하러 바로가기
• API 문서 : API 문서 확인하러 바로가기

API 무한 호출을 하게 되면 서버 오류가 날 수 있으니 꼭 주의해 주세요.

기획 요구 사항

• 제공해드린 디자인 시안과 비교하면서 기획 요구 사항을 꼼꼼하게 살펴봐 주세요.

공통

• 제시된 폰트, 컬러 시스템을 설정해 주세요.
• 재사용성을 위해 공용 컴포넌트를 만들어 주세요.
• 반응형 웹 디자인을 준수해주세요.

메인 페이지(/)

• '로고 버튼'을 클릭하면 /페이지로 이동합니다.
• '롤링 페이퍼 만들기' 버튼을 클릭하면 /post 페이지로 이동합니다.
• '구경해보기' 버튼을 클릭하면 /list 페이지로 이동합니다.
• PC에서 상단 네비게이션은 화면의 너비가 1248px보다 줄어들 때 좌우 여백은 24px로 고정하고, '상단 로고'와 '롤링 페이퍼 만들기' 버튼의 간격이 줄어듭니다.
• Tablet에서 화면의 너비가 줄어들거나 커지면 서비스 소개 영역의 좌우 여백이 줄어들거나 커집니다.
• Tablet에서 화면의 너비가 줄어들거나 커지면 '구경해보기' 버튼의 너비가 줄어들거나 커집니다.
• Mobile에서 좌우 여백은 24px로 고정합니다
• Mobile에서 화면의 너비가 줄어들거나 커지면 '롤링 로고'와 '롤링 페이퍼 만들기' 버튼의 간격이 줄어들거나 커집니다.

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

• '로고' 버튼을 클릭하면 / 페이지로 이동합니다.
• '롤링 페이퍼 만들기' 버튼을 클릭하면 /post 페이지로 이동합니다.
• '나도 만들어보기' 버튼을 클릭하면 /post 페이지로 이동합니다.
• 생성된 카드를 클릭하면 /post{id} 페이지로 이동합니다
• PC에서 롤링 페이퍼 카드 목록 영역의 너비는 고정합니다.
• PC에서 좌/우측 버튼 클릭 시 다음 순서의 롤링 페이퍼 카드들이 보입니다.
• PC에서 첫 순서일 때는 좌측 버튼이 보이지 않고, 마지막 순서일 때는 우측 버튼이 보이지 않습니다.
• 롤링 페이퍼 카드의 개수가 4개보다 적을 때 좌측부터 채워지고, 좌/우측 버튼은 보이지 않습니다.
• Tablet에서 롤링 페이퍼 카드 목록 영역이 화면의 너비를 넘어갈 경우 터치로 좌우 스크롤 가능합니다.
• Tablet에서 상단 네비게이션은 좌우 여백은 24px로 고정하고 '로고'와 '롤링 페이퍼 만들기' 버튼의 간격이 줄어들거나 커집니다.
• Mobile에서 롤링 페이퍼 카드 목록 영역이 화면의 너비를 넘어갈 경우 터치로 좌우 스크롤 가능합니다.

롤링페이퍼 만들기 페이지(/post)

• 'To.' Input 컴포넌트에 값을 입력하지 않고 focus out 하면, Input 컴포넌트를 에러 상태로 변경하고 “값을 입력해 주세요.” 에러 메세지가 보입니다.
• '컬러'를 클릭하면 배경색을 선택할 수 있습니다(기본값은 첫번째 항목).
• '이미지'를 클릭하면 업로드할 이미지 파일을 선택할 수 있습니다(기본값은 첫번째 항목).
• '생성하기' 버튼은 비활성화 상태에 있다가 받는 사람 이름에 값이 있는 경우 활성화 됩니다.
• '생성하기 버튼을 누르면 롤링페이퍼가 생성이 되고 /post/{id} 로 이동합니다.

생성된 롤링페이퍼 페이지(/post{id})

• 카드 목록은 '최신순'으로 무한 스크롤 방식으로 배치합니다.
• '카드'를 누르면 해당 카드가 확대되어 보여집니다.
• PC에서 헤더 영역의 너비는 1200px로 고정하고 좌우 여백만 변하다가, 화면의 너비가 1248px보다 줄어들 때 좌우 여백은 24px로 고정하고 'To.OOO' 영역과 '프로필 이미지 OO명이 작성 했어요!' 영역이 가까워집니다.
• PC에서 카드 목록 영역의 너비는 1200px로 고정하고 좌우 여백만 변하다가, 화면의 너비가 1248px보다 줄어들 때 좌우 여백은 24px로 고정하고 카드들의 너비가 줄어듭니다.
• 저장된 이모지는 횟수가 많은 순서대로 최대 '6개' 까지 나열해 주세요.
• 카카오톡 공유 docs를 참고해 '카카오톡 공유' 기능을 만들어 주세요. (구현 방법이나 공유에 들어갈 메시지는 팀 내에서 논의해 결정해 주세요)
• 'URL 공유'를 클릭하면 클립보드에 URL을 저장하고, URL이 복사되었다는 토스트를 5초 동안 보였다가 사라지게 해주세요.
• 이모지 추가 드롭다운 디자인은 예시이고, 이와 동일한 기능을 하는 외부 모듈의 디자인을 그대로 사용해도 좋습니다.
• '+' 버튼을 누르면 /post/{id}/message 로 이동합니다.

생성된 롤링페이퍼 수정 페이지(/post{id}/edit)

• '쓰레기통' 모양 버튼을 클릭하면 해당하는 카드는 사라집니다.
• '삭제하기' 버튼을 클릭하면 생성된 롤링페이퍼는 삭제됩니다
• Tablet, Mobile에서 '저장하기' 버튼은 아래 24px 여백을 두고 고정하고, 다른 요소들 보다 상위에 있습니다.

롤링페이퍼에 메세지 보내기 페이지(/post/{id}/message )

• 'From.' Input 컴포넌트에 값을 입력하지 않고 focus out 하면, Input 컴포넌트를 에러 상태로 변경하고 “값을 입력해 주세요.” 에러 메세지가 보입니다.
• 프로필 이미지 파일을 선택 하지 않으면 기본이미지를 넣습니다.
• '상대와의 관계' 항목은 지인이 기본값으로 선택되어 있습니다. 친구” | “지인” | “동료” | “가족 중에 하나를 고르셔야 합니다.
• “내용을 입력해 주세요” 항목의 에디터는 예시입니다. 디자인과 기능을 고려해 외부 에디터 모듈을 사용해도 됩니다.
• 폰트는 'Noto Sans'가 기본값으로 선택되어 있습니다.
• '생성하기' 버튼은 비활성화 상태에 있다가 받는 사람 이름과 카드 내용이 있는 경우 활성화 됩니다.
• '생성하기 버튼을 누르면 롤링페이퍼가 생성이 되고 /post/{id} 로 이동합니다.

Copyright 2024 코드잇 Inc. All rights reserved.