💌 Rolling

📝 프로젝트 소개

복잡한 가입 절차 없이 링크 하나로 롤링 페이퍼를 만들고, 여러 사람이 각자의 메시지와 이모지로 마음을 모아 전달할 수 있어요.
생일, 감사 인사, 응원, 축하 등 어떤 순간이든 마음을 전해야 할 때 Rolling으로 가장 쉽게 시작해 보세요.

🔗 배포 주소

• Service: https://rolling-nine.vercel.app/

👥 팀 소개

김현진	김송현	이서정	남빛나

👥 팀원별 역할 및 기여

김현진

공통 컴포넌트

• 이모티콘 선택(emoji-picker-react), 이모티콘 리액션 뱃지, 이모티콘 더보기 기능 구현
• 모달 컴포넌트 (메시지용, 확인용)
• 공통 버튼 컴포넌트 및 링크 버튼 컴포넌트

페이지

• /post/{id}/message 페이지 API 연동
• 404 페이지 UI 구현

김송현

공통 컴포넌트

• Header
• Footer

페이지

• 리스트 페이지(/list)
  • 전체 레이아웃 및 반응형 구현
  • 인기 롤링 페이퍼 영역
  • 최근 롤링 페이퍼 영역
• 리스트 상세 페이지
  • 전체 레이아웃 및 반응형 구현

기능

• 인기 롤링 페이퍼 슬라이드 구현 (Swiper 라이브러리 사용)
• 최근 롤링 페이퍼 더보기 기능 구현
• 롤링페이퍼 작성/메시지 작성 페이지 Name input 글자 수 제한
• 전체 페이지 Scroll To Top 기능 구현

기타

• 디자인 리뉴얼

남빛나

공통 컴포넌트

• 관계 배지 컴포넌트
• 인풋 컴포넌트
• 드롭다운 컴포넌트

페이지

• 랜딩 페이지 전체 레이아웃 및 반응형 구현
• /post/{id} 페이지 편집 모드 구현
• /post/{id} 페이지 API 연동

기능

• 무한 스크롤 구현
• 글 작성 모듈
• 폰트 모듈
• formatDate 유틸 함수 구현

이서정

공통 컴포넌트

• 개별 프로필 컴포넌트
• 그룹 프로필 컴포넌트

페이지

• 메시지 페이지
  • 전체 레이아웃 및 반응형 구현
  • 에디터 Quill → Tiptap 마이그레이션
• 포스트 페이지
  • 전체 레이아웃 및 반응형 구현
  • API 연동

기능

• ErrorBoundary 및 Toast 알림 시스템 구현
• 카카오톡 공유 및 URL 복사 기능
• 공통 API 및 팀 API Axios 인스턴스 설정

기타

• 초기 프로젝트 세팅
  • ESLint, Prettier 설정
  • Husky 설정
  • VSCode 개발 환경 설정
• SEO 및 메타태그 설정 (OG 태그, 파비콘)
• React Router 기반 라우팅 설정
• 스타일 시스템 설정
  • 컬러, 폰트 굵기 정의
  • 폰트 적용
• Vercel 배포

🖥️ 화면

모든 화면은 PC / Tablet / Mobile 반응형을 고려해 구현했습니다.

1️⃣ 랜딩 페이지

PC	Tablet	Mobile

• 서비스 컨셉 및 주요 기능 소개

2️⃣ 리스트 페이지 (/list)

PC	Tablet	Mobile

• 인기 롤링페이퍼 슬라이드(swiper)
• 최근 롤링페이퍼 더보기 기능

3️⃣ 리스트 상세 페이지 (/post/{id})

PC	Tablet	Mobile

• 롤링페이퍼 정보 및 메시지 목록 표시
• 메세지 및 롤링페이퍼 삭제
• 이모지 리액션 생성
• 카카오톡 공유 & url 복사

4️⃣ 롤링페이퍼 작성 / 편집 페이지 (/post)

PC	Tablet	Mobile

• 롤링 페이퍼 제목 및 배경 설정

5️⃣ 메시지 작성 페이지 (/post/{id}/message)

PC	Tablet	Mobile

• 메시지 작성

---

🛠️ 기술 스택

Frontend

Editor & UI

Tooling & Infra

Collaboration

🗂️ 폴더 구조

📦 src
 ┣ 📁 apis        # API 요청 함수
 ┣ 📁 assets      # 아이콘, 이미지 등 정적 리소스
 ┣ 📁 components  # 공통 컴포넌트
 ┣ 📁 pages       # 페이지 단위 컴포넌트
 ┣ 📁 routers     # 라우터 설정
 ┣ 📁 styles      # 공통 스타일 (폰트, 컬러, reset.css)
 ┣ 📁 utils       # 유틸 함수
 ┣ 📁 hooks       # 커스텀 훅
 ┣ 📁 constants   # 상수 관리
 ┣ 📄 App.jsx     # 루트 컴포넌트
 ┗ 📄 main.jsx    # 엔트리 포인트