💟 롤링페이퍼 문화를 웹으로 구현한 커뮤니티형 플랫폼 Rolling

• 배포 URL: Rolling
• 팀 노션: Notion | 파트 2 5팀

💌 프로젝트 소개

Rolling은 익숙한 '롤링페이퍼' 문화를 웹으로 구현한 커뮤니티형 플랫폼입니다.
사용자들은 서로에게 따뜻한 메시지를 남기고, 감정과 기억을 공유할 수 있습니다.

📚 프로젝트 선정 배경

롤링페이퍼라는 친숙하고 감성적인 주제를 통해 사용자 중심의 커뮤니티 기능을 구현하고자 했습니다.

1. 다양한 실제 사용자 시나리오를 바탕으로 기능을 설계함으로써, 사용자 경험(UX)을 고려한 개발을 경험할 수 있었습니다.
2. 페이지 단위의 명확한 기능 분할이 가능하여 팀원 간 역할을 효율적으로 분담하고 협업하기에 적합하다고 판단했습니다.
3. 웹 앱 개발의 핵심 개념(CRUD, 라우팅, 상태관리 등)을 실제로 구현한 사례로, 웹 서비스의 전반적인 개발 흐름을 직접 경험하며 역량을 쌓을 수 있는 좋은 기회가 되었습니다.

무엇보다도, 따뜻한 메시지를 전하는 감성적인 프로젝트를 통해 팀원 간의 유대감을 형성하고 의미 있는 마무리를 하고자 본 주제를 선택하게 되었습니다.

🧑🏻‍💻 팀원 소개

정상인	노서연	권민영	이연수	송용훈
👑 팀장 FE	팀원 FE	팀원 FE	팀원 FE	팀원 FE

📅 개발 기간 및 작업 관리

• 프로젝트 기간: 2025. 8. 9 ~ 2025. 8. 26
  
• 프로젝트 주제 선정 및 논의: 2025. 8. 7 ~ 2025. 8. 11
• 공통 컴포넌트 개발: 2025. 8. 12 ~ 2025. 8. 20
• 개별 페이지 개발: 2025. 8. 20 ~ 2025. 8. 24
• 디버깅/QA: 2025. 8. 24 ~ 2025. 8. 25

프로젝트 수행

• 매일 데일리스크럼 & 코어타임 ⇒ 진행상황 및 의견 공유
• GitHub Projects / Issues로 할 일 관리
• 개발 → 테스트 → PR → 피드백 → 반영
• 프로젝트 배포 & QA

⚙️ 개발 환경

⚒️ 기술 스택

⚒️ 사용 라이브러리

📂 UI

📂 메시지 작성

Tiptap 에디터

📂 기타 기능 관련

react-router-dom(라우팅), axios(API 통신), dotenv(환경 변수 관리), Emoji Picker(이모지), lodash(디바운스)

💬 협업 툴

📂 프로젝트 구조

📂 src
 ┣ 📂 api
 ┣ 📂 assets
 ┣ 📂 components
 ┣ 📂 constants
 ┣ 📂 hooks
 ┣ 📂 pages
 ┣ 📂 utils
 ┗ main.jsx

🔗 플로우 차트

🧩 역할 분담

UI와 기능을 분리하면 좋을 듯 합니다.(각자 작업했던 깃허브 이슈 참고하면 기재할만한게 많이 나올 것 같아요)

👑 정상인

• UI
  • 페이지: 롤링페이퍼 만들기 페이지
  • 공통 컴포넌트: Header, badge 컴포넌트
• 기능
  • axios 설정, Router 설정
• 기타
  • github wiki 정리

🐈‍⬛ 노서연

• UI
  • 페이지: 롤링페이퍼 페이지, 롤링페이퍼 수정 페이지
  • 공통 컴포넌트: Card, CardList 컴포넌트
• 기능
  • 기능
• 기타
  • 발표 자료 준비

🫕 권민영

• UI
  • 페이지: 메인 페이지, 롤링페이퍼 목록 페이지
  • 공통 컴포넌트: Button, Modal, Toast 컴포넌트
• 기능
  • 기능

🐥 이연수

• UI
  • 페이지: 롤링페이퍼에 메시지 보내기 페이지
  • 공통 컴포넌트: TextField(dropdown, input) 컴포넌트, 메타데이터 관리
• 기능
  • 텍스트 입력 기능, 포커스 이벤트 처리, 상태 변화 관리, 유효성 검사 및 에러 처리, 접근성 고려한 구조 설계, 서비스 SEO 최적화 및 메타데이터와 파비콘 적용
• 기타
  • README 작성

🦆 송용훈

• UI
  • 공통 컴포넌트: Color, Font
• 기능
  • 기능

🔑 페이지별 주요 기능

롤링페이퍼 만들기

메시지 카드 및 롤링페이퍼 페이지 삭제하기

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

기능 설명 이미지 첨부

🐛 트러블 슈팅

각자 겪었던 문제와 해결 방법 작성

📈 개선 목표

🍵 프로젝트 후기

잘한점, 아쉬운점, 느낀점.(시간 부족하면 저희 팀회고 작성했던거 가져와서 활용하는 것도 괜찮을 것 같아욤)