추억과 메시지를 디지털 롤링 페이퍼로 손쉽게 공유하고 저장할 수 있는 웹, 모바일 서비스 입니다.

✨✨여러분의 소중한 순간들을 가장 특별한 방식으로 기록하고 나누세요!✨✨

📝 목차

• 프로젝트 소개
• Team
• 역할
• Quickstart Guide
• 메인 기능
• UI
• Link

📩 프로젝트 소개

프로젝트 이름: 누구나 쉽게 만드는 온라인 롤링 페이퍼, Rolling
프로젝트 지속 기간: 2023.11.01 - 2023.11.16
개발 언어: Javascript & HTML & CSS
팀: sprint 1-5팀

Rolling은 인터넷 상에서 자유롭게 롤링페이퍼를 만들고, 편지를 쓰고자 만들어진 웹사이트입니다. Rolling에서는 일반 롤링페이퍼에서 더 나아가 자신의 이모티콘을 등록하고, 링크나 카카오톡 공유 기능을 통해 누구에게나 페이퍼를 공유할 수 있습니다.

Rolling is a website designed to create memory books and write letters freely on the Internet. In Rolling, you can go beyond regular memory books and register your own emoticons, and share the paper with anyone through the link or Kakao Talk sharing function.

👥 Team

김진우	이슬	홍재원	강현지	이태희

🔎 역할

김진우 🚀 - post/{id} 페이지, 무한 스크롤, 수정하기 페이지, 롤링페이퍼 삭제, 메세지 삭제, useRequest hook
이슬 😺 - 카드 캐러셸, 터치스크롤, 롤링페이퍼 카드 기능 구현 디자인, 롤링페이퍼 인기순 최신순으로 정렬
홍재원 🍀 - 카카오톡 공유 및 링크 복사 기능, 버튼, 모달 구현, nav 바, 텍스트 에디터 구현
강현지 🐳 - 랜딩 페이지, /post 페이지, /post/{id}/message 페이지, Header Service의 일부 컴포넌트
이태희 🍇 - 이모지 버튼 및 팝오버, 이모지 추가하기, Header-service 바 구현

💻 Front-End

React	Styled-Components

➡ Quickstart Guide

requirement

• axios: ^1.6.0
• dompurify: ^3.0.6
• dotenv: ^16.3.1
• emoji-picker-react: ^4.5.15
• moment: ^2.29.4
• "react: ^18.2.0
• react-dom: ^18.2.0
• react-quill: ^2.0.0
• react-router-dom: ^6.18.0
• react-select: ^5.8.0
• react-toastify: ^9.1.3
• styled-components: ^6.1.0
• swiper: ^6.8.4
• web-vitals: ^2.1.4

installation

$ git clone https://github.com/codeit-1st-team5/rolling.git
$ cd rolling

$ npm install
$ npm start run

🎨 UI

• LandingPage.

• background color selection

• background image selection

• ListPage

• CardsList

• Modal

• CreateMessage

📚 메인 기능

• 사용자들이 온라인에서 롤링 페이퍼를 만들고, 공유할 수 있도록 다양한 기능을 제공합니다.

• 주요 기능으로는 롤링 페이퍼 생성 및 수정하고 메시지를 보내고 리액션을 남길 수 있습니다.

• 반응형 웹 디자인을 지원하며, 사용자가 롤링 페이퍼에 직접 메시지를 추가하고 친구나 지인들과의 공유 기능이 있습니다.

🔗 Link

Rolling : 누구나 쉽게 만드는 롤링페이퍼