📬 Rolling

코드잇 스프린트 - 프론트엔드 14기 6팀
배포 URL: https://rolling-paper-five.vercel.app/ >
협업 노션: https://ito-dev.notion.site/2-6-197e6a3d27348055a455d2746ddd9bcb

📅 개발기간: 2025. 03. 06 ~ 2025. 03. 21

🚀 프로젝트 소개

• 친구, 동료들이 롤링페이퍼를 온라인으로 쉽게 작성할 수 있도록 만든 서비스입니다
  • 다양한 이모지 기능을 통해 감정을 표현할 수 있습니다
  • 간편한 UI로 쉽고 빠르게 롤링페이퍼를 만들 수 있습니다

💁🏻 팀원 소개

[FE] 최혜윤	[FE] 조지현	[FE] 지정환	[FE] 진성진	[FE] 최권진

🔧 기술 스택

Front-End

Communication

💡 시작 가이드

### 1. 클론하기
>git clone https://github.com/cozy-ito/rolling-paper.git

### 2. 디렉토리 이동
>cd rolling-paper

### 3. 패키지 설치
>npm install

### 4. 프로젝트 실행
>npm run dev

🫱🏻‍🫲🏻 역할 분담

❤️ 최혜윤

• 페이지 작업
  • 메인 페이지

🍑 조지현

• 공통 컴포넌트
  • ProfilButton, Button, CardList, Toast
• 페이지 작업
  • 카드 만들기 페이지

🧑🏻‍🦱 지정환

• 공통 컴포넌트
  • Badge, Input, Card, TextEditor
• 페이지 작업
  • 롤링페이퍼에 메세지 보내기 페이지

🤗 진성진

• 프로젝트 세팅 및 기본 레이아웃 구성
• 공통 컴포넌트
  • ArrowButton, Header
• 페이지 작업
  • 메인 페이지, 생성된 롤링페이퍼 페이지, 생성된 롤링페이퍼 수정 페이지

🫧 최권진

• 공통 컴포넌트
  • ToggleButton, Option, Dropdown, Modal
• 페이지 작업
  • 롤링페이퍼 목록 페이지, 404 오류 페이지

📌 주요 기능

1. 메인 페이지

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

2. 롤링페이퍼 목록 페이지

• [나도 만들어보기] 버튼 클릭 시 롤링 페이퍼 만들기 페이지로 이동할 수 있습니다
• [인기 롤링 페이퍼]는 리액션 수를 기준으로 정렬됩니다
• [최근에 만든 롤링 페이퍼]는 최근 생성 기준으로 정렬됩니다
• 스켈레톤 UI와 로딩 스피너를 통해 자연스러운 로딩 효과를 줍니다
• 화살표를 클릭하면 애니메이션 효과가 적용되어 부드럽게 카드를 넘길 수 있습니다
• 스크롤 스냅 기능으로 스크롤할 때 특정 위치에서 롤링페이퍼가 자동으로 정렬됩니다
• 롤링 페이퍼 카드를 클릭하면 해당 롤링페이퍼 상세 페이지로 이동할 수 있습니다

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

• [컬러] 토글을 선택하면 배경색을 선택할 수 있고, [이미지] 토글을 선택하면 업로드할 이미지를 선택할 수 있습니다
• 받는 사람의 이름을 입력하지 않을 경우 [생성하기] 버튼은 비활성화 상태가 됩니다
• 받는 사람의 이름을 입력하지 않고 focus out을 하면 "값을 입력해 주세요" 에러 메시지가 뜹니다
• [생성하기] 버튼을 누르면 롤링페이퍼가 생성되고 생성된 롤링페이퍼 페이지로 이동할 수 있습니다

4. 생성된 롤링페이퍼 페이지

• 해당 롤링페이퍼에 작성된 메시지 카드 목록을 볼 수 있습니다
• 헤더의 [추가] 버튼을 눌러 다양한 이모지를 사용할 수 있습니다
• 헤더의 아래 화살표 버튼을 눌러 이모지 리스트를 확인할 수 있습니다
• 헤더의 공유 버튼을 통해 카카오톡 및 URL로 해당 롤링페이퍼를 공유할 수 있습니다
• [+] 버튼을 누르면 카드를 작성할 수 있는 롤링페이퍼 메시지 보내기 페이지로 이동할 수 있습니다

5. 생성된 롤링페이퍼 수정 페이지

• [수정하기] 버튼을 통해 메시지 카드를 수정할 수 있습니다
• [페이지 삭제하기] 버튼을 통해 롤링페이퍼를 삭제할 수 있습니다
  • [페이지 삭제하기] 버튼을 누르면 롤링페이퍼 목록 페이지로 이동합니다
• [휴지통] 버튼을 통해 메시지 카드를 삭제할 수 있습니다

6. 롤링페이퍼 메시지 보내기 페이지

• 보내는 사람 이름을 입력합니다 (입력할 수 있는 글자는 최대 20자)
• 보내는 사람의 이름을 입력하지 않고 focus out을 하면 "값을 입력해 주세요" 에러 메시지가 뜹니다
• 프로필 버튼을 클릭하여 원하는 이미지로 프로필을 선택할 수 있습니다
• 관계를 선택하여 지인, 가족 등의 관계를 표시할 수 있습니다
• 이름과 메세지의 입력값이 비어 있으면 버튼은 비활성화 상태가 됩니다
• 글자 굵기, 기울임, 글자색, 폰트 등을 선택하여 글을 작성할 수 있습니다
• [생성하기] 버튼을 클릭하면 롤링페이퍼가 성공적으로 생성이 되고, 생성된 롤링페이퍼 페이지로 이동합니다
• 이후 생성된 롤링페이퍼 페이지의 헤더와 롤링페이퍼 목록 페이지의 롤링페이퍼에서 현재까지 작성된 메시지 개수를 실시간으로 확인할 수 있습니다

7. 404 에러 페이지

• 존재하지 않은 url에 접근했을 경우 해당 페이지가 보여집니다