🌱 Rolling 프로젝트

코드잇 스프린트 - 프론트엔드 16기 - PART2 / TEAM3
개발기간: 2025.05.28. - 2025.06.12

🔗 배포 URL

💡 프로젝트 소개

• 롤링은 전통적인 롤링페이퍼 문화를 웹으로 구현한 커뮤니티형 플렛폼입니다.
• [ 롤링 페이퍼 만들기 ] 버튼을 눌러 롤링 페이퍼를 만들 수 있습니다.
• 롤링 페이퍼에 메세지를 작성하고 삭제할 수 있습니다.

⚙️ 기술 스택

Environment

Config

Development

Deploy

Collaboration Tools

👨‍👩‍👧‍👧 팀원 소개

[FE] 나소연

[FE] 최창환

[FE] 홍성현

💥 역할 분담

나소연

• UI
  • 공통 컴포넌트 : 배경 선택 토글, 반응형 버튼, 텍스트 에디터, 텍스트 드롭다운, 텍스트 인풋 박스
  • 페이지 : 롤링 페이퍼 만들기 페이지, 메세지 카드 작성 페이지
• 기능
  • 롤링페이퍼 등록, 메세지 카드 등록, 버튼 토글시 배경/이미지 선택 구현, 텍스트 에디터 구현, 사용자 선택에 따른 텍스트 스타일 반영
• ETC
  • 서기, 발표 PDF, PPT

최창환

• UI
  • 공통 컴포넌트 : API, 이모지 뱃지, 프로필 이미지, 링크 버튼, 입력 버튼, 롤링 페이퍼 카드, 컨테이너 박스, 헤더, 애니메이션
  • 페이지 : 홈페이지, 롤링 페이퍼 리스트 페이지
• 기능
  • API, 롤링 페이퍼 리스트 불러오기, 롤링 페이퍼 리스트 캐러셀 구현, 롤링 페이퍼 검색 기능, 로딩시 화면 및 화면 애니메이션 구현
• ETC
  • 프로젝트 초기 세팅 및 깃허브 운영, 배포, 발표

홍성현

• UI
  • 공통 컴포넌트 : 뱃지 리스트, 메시지 카드, 모달, 토스트, 이모지 추가 버튼, 메시지 공유 버튼, 수신자 페이지 헤더
  • 페이지 : 롤링 페이퍼 페이지
• 기능
  • API, 롤링 페이퍼 불러오기, 메세지 카드 삭제하기, 이모지 추가하기, 롤링 페이퍼 카카오톡 및 URL 공유
• ETC
  • 🔥팀 장, 시연영상 및 자료

✨ 페이지별 기능

1. 홈페이지

• [ 구경해보기 ] 버튼을 눌러 롤링페이퍼 리스트 페이지로 이동할 수 있습니다.
• [ 롤링 페이퍼 만들기 ] 버튼을 눌러 롤링페이퍼 만들기 페이지로 이동할 수 있습니다.

2. 롤링페이퍼 리스트 페이지

2-1. 롤링페이퍼 리스트 검색 기능

• 현재 만들어진 롤링페이퍼들을 인기순, 최신순으로 구경할 수 있습니다.
• PC버전의 경우, 캐러셀을 이용해 롤링페이퍼 목록을 구경할 수 있습니다.
• 캐러셀의 화살표를 클릭하면 카드를 하나씩 넘길 수 있습니다.
• 검색 기능을 통해 원하는 롤링페이퍼를 직접 찾아볼 수 있습니다.
• 검색시 자동완성 기능을 통해 검색어를 찾아볼 수 있습니다
• 롤링페이퍼 카드를 누르면 해당 롤링페이퍼 페이지로 이동할 수 있습니다.

3. 롤링페이퍼 만들기 페이지

• 받는 사람의 이름을 입력합니다.
• 롤링 페이퍼의 배경을 선택합니다. 배경은 기본 옵션으로 주어진 색깔 또는 이미지를 선택할 수 있습니다.
• [ 보내기 ] 버튼을 눌러 롤링페이퍼를 만들 수 있습니다.
• 기본 사항을 잘 작성하지 않으면 버튼이 사용불가 상태가 됩니다.

4. 롤링페이퍼 페이지

4-1. 메세지 카드 본문 보기

4-2. 롤링페이퍼 수정 페이지로 이동하기

4-3. 롤링페이퍼에 이모지 추가하기

4-4. 롤링페이퍼 공유하기

• 해당 롤링페이퍼에 작성된 메시지 카드 목록을 볼 수 있습니다.
• 각 메세지 카드는 [ 더보기 ] 를 눌러 전체 내용을 확인할 수 있습니다.
• 첫 번째 카드의 [ + ] 버튼을 눌러 메세지 카드를 작성하는 페이지로 이동할 수 있습니다.
• 편집하기 버튼을 누르고, 초기에 설정했던 비밀번호를 입력하면 롤링페이퍼 수정 페이지로 이동할 수 있습니다.
• url을 이용해서 수정 페이지로 직접 이동할 수 없습니다.
• 헤더의 이모지 아이콘을 눌러 해당 롤링페이퍼에 이모지를 추가할 수 있습니다.
• 헤더의 공유 아이콘을 눌러 카카오톡으로 해당 롤링페이퍼를 공유하거나, URL로 공유할 수 있습니다.

5. 롤링페이퍼 수정하기 페이지

5-1. 롤링페이퍼 삭제

5-2. 메세지 카드 삭제

• 메세지 카드의 쓰레기통 버튼을 눌러 삭제할 메세지 카드들을 선택할 수 있습니다.
• 삭제할 메세지 카드를 선택하면 메세지가 삭제됩니다
• [ 롤링페이퍼 삭제하기 ] 버튼을 누르면 해당 롤링페이퍼를 삭제할 수 있습니다.

6. 메세지 카드 작성하기 페이지

• 보내는 사람의 이름을 입력합니다.
• 보내는 사람 이름 필드에 유효한 값을 입력해야 생성하기 버튼이 동작합니다.
• 보내는 사람 이름 필드에 글자를 입력하지 않으면 에러메시지가 출력되며, 40자 이상 입력을 시도할 경우, 입력되지 않습니다.
• 기본 프로필 사진이 랜덤으로 배정됩니다 프로필 사진을 선택할 수 있습니다.
• 관계 태그를 선택합니다.
• 메세지 카드에 작성할 메세지를 입력합니다.
• [ 생성하기 ] 버튼을 눌러 메세지 카드를 보낼 수 있습니다.