✍️ 추억의 롤링 페이퍼를 웹 상에서도 즐길 수 있는 플랫폼

코드잇 스프린트-프론트엔드 2기 PART2 - 5팀
개발기간: 2023. 12. 09 ~ 2023. 12. 22

• 배포 URL : https://momonga.netlify.app/
• 프로젝트 PPT : https://www.miricanvas.com/v/12qlt9x

💁🏻‍♀️💁🏻‍♂️ 프로젝트 소개

• Rolling은 누구나 쉽게 롤링 페이퍼를 만들고, 작성할 수 있는 웹 플랫폼입니다.
• [ 롤링 페이퍼 만들기 ] 버튼을 눌러 롤링 페이퍼를 직접 만들 수 있습니다.
• 롤링 페이퍼에 메세지를 직접 작성하거나 삭제할 수 있습니다.

👯Participants

이해빈	김재환	손오름	임주민
@lhv0829	@BBoBBoM	@mrhandsup	@imkrmin

🖥️ TECH STACK

Language

CSS

Framework

Collabaration tool

Version control

Build Tool

Deployment

📄페이지별 기능 소개

Landing Page

• 로고 클릭 시 Landing 페이지로 이동합니다.
• 롤링페이퍼 버튼 클릭 시 Post 페이지로 이동합니다.
• 구경해보기 버튼 클릭 시 List 페이지로 이동합니다.

Post Message Page

• From은 입력창에 발신자 이름을 적습니다. 미입력 시 값을 입력해주세요. 라는 에러메시지가 뜹니다.
• 프로필 이미지는 기본 이미지가 제공됩니다. + 버튼 클릭 시 원하는 프로필 이미지를 추가할 수 있도록 URL 모달창이 뜹니다. 유효하지 않는 URL이거나 미입력시 확인 버튼이 비활성화 됩니다.
• 상대방과의 관계는 미입력 시 지인으로 설정되어있고, 관계에 따라 친구, 동료, 가족으로 변경할 수 있습니다.
• 내용을 입력해주세요는 수신자에게 하고싶은 말을 적습니다.
• 폰트 설정은 Noto Sans가 기본으로 설정되어있고, 원하는 폰트를 변경할 수 있습니다.
• 내용을 입력하면 생성하기 버튼이 활성화 됩니다. 버튼을 누르면 롤링페이지가 생성됩니다.

Post Page

• To 입력창에 사용자 이름을 작성합니다. 미입력시 오류 메시지 표시, 40자 글자 제한을 두었습니다.
• 배경에 사용할 색상 또는 이미지를 선택할수 있습니다. 이미지 선택하지 않을시 기본 배경 색상으로 post요청이 보내도록 하였습니다.
• 색상은 기본 제공 4가지 색상에서 골라야 하지만, 이미지 에서는 '+' card 클릭시 파일을 업로드 할 수 있고 URL을 입력 받는 모달창을 만들어 URL 입력시 미리보기를 제공하고 URL 입력시 https:// http:// 형식을 지키지 않으면 오류 메시지를 표시하고 버튼 활성화도 되지 않습니다. (api post 요청시 backgroundImage부분이 https:// 형식으로 받음) 파일 업로드 관련하여 파일 객체를 api에서 받지 않고 url 형식으로 받기 때문에 웹에서 파일을 업로드 해주고 url을 반환해주는 https://imgbb.com 사이트의 api를 활용해서 구현했습니다.
• 배경화면 없애기 버튼은 본인의 의지에 따라 배경화면을 넣고 싶지 않을때의 기능을 말합니다. 기존 이미지를 클릭시 card부분에 체크 반응이 나오도록 되어 있는데 클릭시 체크 부분이 없어집니다 이는 아무것도 선택되지 않았다는 것을 의미합니다.
• 색상은 필수 요소 이기 때문에 색상 없애기와 같은 기능을 넣지 않았고
• 입력창의 값과 색상 이미지를 선택하면 버튼이 활성화 됩니다.
• 생성하기 버튼 클릭시 본인이 작성한 이름 배경색상 선택하거나 개인적으로 추가한 파일 또는 URL 정보를 가진 recipient가 생성됩니다.

Message Page

• +카드를 클릭하면 메세지를 입력할 수 있는 Post Message Page로 이동합니다.
• Post Message Page에서 메세지 입력이 완료 되면 메세지 페이지에 렌더링 됩니다.
• 무한스크롤 기능을 구현하여, 메세지가 많을 때 스크롤하면 메세지 데이터가 연속적으로 로드됩니다.
• 메세지를 클릭하면 클릭한 메세지의 내용을 모달창으로 띄워 나타납니다.
• 편집하기 버튼을 누르면 편집모드가 활성화 됩니다.
• 휴지통 이미지를 클릭하면 삭제할 메세지가 선택되고, 선택이 되었음을 알리는 UI로 투명도가 조절됩니다.
• 삭제할 메세지를 선택한 후에 저장하기 버튼을 누르면 선택한 메세지가 삭제되고, 아무 메세지도 선택하지 않았을 시에는 저장하기 버튼이 비활성화 됩니다.
• 페이지 삭제하기 버튼을 누르면 확인 모달이 띄워지고, 확인 버튼을 누르면 해당 메세지 페이지가 삭제됩니다.

List Page

• 롤링페이퍼 데이터를 인기순과 최신순으로 받아와서 캐러셀을 통해 보여줍니다. 캐러셀 슬라이드 개수가 4개 이하일 때는 왼쪽부터 채워지며 4개를 초과할 경우 화살표 버튼을 클릭하면 슬라이드 되면서 다음 카드로 넘어갑니다. 첫번째 카드가 보일 때는 이전으로 가는 버튼이 보이지 않고 마지막 카드가 보여질 때는 다음으로 넘어가는 버튼이 보이지 않습니다.
• 전체보기 버튼을 클릭하면 롤링페이퍼 데이터 전체를 한번에 볼 수 있는 페이지로 넘어갑니다.

All Page

• 롤링 페이퍼 전체를 볼 수 있는 페이지 입니다.
• 검색 기능을 통해 아래로 스크롤 하지 않고도 찾아볼 수 있습니다.
• 최신순과 인기순으로 선택해서 정렬할 수 있고 현재 어떻게 정렬되어 있는지 버튼의 활성화 여부로 알 수 있습니다.

Recipient Menu

• 롤링페이퍼 수신자가 누구인지, 그리고 몇명이 작성했는지 알려주는 메뉴입니다.
• 이모티콘을 통해 반응을 표시할 수 있습니다. 이모티콘은 수가 많은 순서대로 3개만 보이며 더보기 화살표를 클릭하면 이모티콘을 수가 많은 대로 최대 8개까지 보여줍니다. 만약에 반응이 없을 경우 이모티콘은 보여지지 않고 더보기 버튼도 보여지지 않습니다.
• 이모티콘을 추가할 경우 메뉴에 바로 반영되어 보여집니다.
• 공유 버튼을 통해 카카오톡으로 공유하거나 링크를 클립보드에 복사해서 공유할 수 있습니다.