✉️ Rolling - 롤링

🚩 프로젝트 소개

Rolling은 누구나 쉽게 온라인 롤링페이퍼를 만들어 소중한 사람에게 메시지와 이모지 리액션으로 마음을 전할 수 있는 서비스입니다.

모달, 토스트, 에디터, API 연동 등 다양한 컴포넌트와 커스텀 훅(useHook)을 직접 구현하며 프로젝트를 완성했습니다.

📅 프로젝트 수행

프로젝트 기간: 2025.09.24 ~ 2025.10.16
프로젝트 주제 선정 및 진행 계획 수립: 2025.09.22 ~ 2025.09.24
프로젝트 기능 구현: 2025.09.25 ~ 2025.10.12
프로젝트 중간 점검: 2025.10.09
버그 / 테스팅: 2025.10.11 ~ 2025.10.13
팀 소통 및 일정 관리: 코어타임에 Discord로 모여서 작업 + GitHub 이슈로 진행 상황 트래킹

💁 팀원 소개


이아름	양은지	최희락	차혁	선기훈
팀장 `FE`	팀원 `FE`	팀원 `FE`	팀원 `FE`	팀원 `FE`

📋 역할 분배

이아름

UI

공통 컴포넌트

Footer, Button, LinkButton, Title, Error, FloatingButtonContainer 컴포넌트 구현
MainLayout, PostLayout 등 레이아웃 컴포넌트 구성

페이지 컴포넌트

메인 페이지 서비스 소개 섹션 및 전체 레이아웃 구현
리스트 페이지
- 전체 레이아웃 구성, 에러 처리 뷰, 스켈레톤 카드 컴포넌트 제작
롤링페이퍼 리스트 페이지
- 날짜, 메시지 리스트, 메시지 카드, 메시지 카드 스켈레톤, 메시지 추가 버튼, 서브헤더, 프로필 영역, 이모지 영역 등 UI 컴포넌트 구현
- 전체 레이아웃 구성
담당 컴포넌트 전반에 반응형 레이아웃 적용

기능

전역 에러 관리(Error Context) 및 토스트 알림 시스템(Toast Context) 구현
롤링페이퍼 리스트 페이지
- 메시지 조회, 리액션 조회/등록 API 연동 및 낙관적 업데이트 적용
- 무한 스크롤 구현
공통 로직을 커스텀 훅으로 분리 (useError, useToast, useDataFetch, useResponsiveSize)
카카오톡 공유 및 URL 복사 기능 구현
유틸함수
- formatDate: ISO 형식 UTC 날짜를 한국 시간(KST) 기준 YYYY.MM.DD 형식으로 변환
- cn: 조건부 Tailwind 클래스를 병합하고 중복 클래스를 정리

기타

초기세팅
- ESLint, Prettier 설정
- Husky 설정 (Commit lint + pre-commit, lint-staged 적용)
- VSCode 개발 환경 설정 (settings.json, extensions.json, 코드 스니펫)
환경변수 설정
SEO 및 메타태그 설정 (OG/Twitter 카드, 파비콘)
React Router 라우팅 설정
GitHub Wiki 문서화
README 작성, 시연 영상 및 발표 PPT 제작

양은지

UI

공통 컴포넌트

개별 프로필
그룹 프로필

페이지 컴포넌트

메시지 추가 페이지 - 프로필 선택 영역
롤링페이퍼 생성 페이지 - 탭 버튼 UI 제작
롤링페이퍼 생성 페이지 - 탭 콘텐츠 UI 제작
롤링페이퍼 생성 페이지 - 페이지 레이아웃 구성
롤링페이퍼 생성 페이지 - 전체 디자인 및 반응형 구현 + 생성 API 연동
롤링페이퍼 리스트 페이지 - 배경색 적용 기능

기능

Axios

공통 및 팀 API 인스턴스 설정
공통 API 오류 처리 로직 구현
롤링페이퍼 생성 페이지 오류 처리 및 API 분리
API 함수 단위 리팩토링

기타

프로젝트 발표 및 PPT 제작
버그 점검 및 담당자 피드백 전달

최희락

UI

공통 컴포넌트

Input 컴포넌트 구현
header 컴포넌트 구현

페이지 컴포넌트

롤링페이퍼 리스트 페이지 - 모달 구현
롤링페이퍼 메시지 추가 페이지 - 전체 디자인 및 반응형 구현
롤링페이퍼 메시지 추가 페이지 - 텍스트 에디터 컴포넌트 구현

기능

롤링페이퍼 메세지 등록 및 프로필 조희 api 연동
텍스트 에디터 서식제거 기능 구현
텍스트 에디터 글꼴설정 기능 구현
텍스트 에디터 체크리스트 기능 구현

차혁

UI

공통 컴포넌트

관계 뱃지 컴포넌트 구현
이모티콘 뱃지 컴포넌트 구현

페이지 컴포넌트

롤링페이퍼 카드 컴포넌트 구현
리스트 페이지 - 데스크탑 리스트 컴포넌트 구현
리스트 페이지 - 모바일 리스트 컴포넌트 구현
리스트 페이지 - 리스트 컨테이너 컴포넌트 구현
리스트 페이지 - 리스트 화살표 버튼 컴포넌트 구현
리스트 페이지 반응형 레이아웃 구현 - 타이틀, 버튼 배치 제외

기능

롤링페이퍼 데이터 무한 스크롤 및 페이지네이션 연동
리스트 정렬(인기순, 최신순) 로직 연동

기타

Tailwind CSS 기본 설정 및 테마 스타일 파일 구성

선기훈

UI

드롭다운 컴포넌트 구현
편집 토글 버튼 구현
삭제하기 버튼 반응형 구현

기능

vercel 배포 연동
PR 생성 시 Vercel Preview가 자동으로 배포되도록 GitHub Actions 워크플로우 추가
롤링페이퍼 삭제 api 연결
롤링페이퍼 메세지 삭제 api 연결

🧑‍💻 기술 스택

라이브러리

React → UI 라이브러리
React Router → 클라이언트 라우팅
Axios → HTTP 요청
Tailwind CSS → 유틸리티 기반 CSS
React Context → 전역 상태 관리
React Quill New → 리치 텍스트 에디터
emoji-picker-react → 이모지 선택 UI

빌드 & 개발 도구

npm → 패키지 매니저
Vite → 프론트엔드 빌드 도구
@vitejs/plugin-react → Vite React 지원 플러그인
vite-plugin-svgr → SVG를 React 컴포넌트로 변환

코드 품질 & 포맷팅

ESLint → 코드 린트
Prettier → 코드 포맷팅
Husky → 커밋 전 린트/포맷 자동화
lint-staged → 커밋 전 파일 단위 린트
Commitlint → 커밋 메시지 컨벤션 검사

배포 & CI/CD

Vercel → 프론트엔드 배포
GitHub Actions → Preview 링크 자동 생성 및 배포 워크플로우 구현

협업 도구

GitHub → 코드 버전 관리, 위키 문서화, 이슈 트래킹
Notion → 문서화 및 일정 관리
Figma → UI/UX 디자인
Discord → 팀 커뮤니케이션

🗂️ 디렉토리 구조

📦 Rolling-Frontend
 ┣ 📂.github                    # GitHub 이슈 및 PR 템플릿 관리
 ┣ 📂.husky                     # Git Hook 설정 (pre-commit, commit-msg)
 ┣ 📂.vscode                    # VSCode 개발 환경 설정 (확장, 스니펫, 설정 등)
 ┣ 📂public                     # 웹폰트 리소스, 브라우저 탭 아이콘, 오픈그래프용 대표 이미지
 ┣ 📂src
 ┃ ┣ 📂apis                     # API 요청 모듈
 ┃ ┣ 📂assets                   # 정적 리소스
 ┃ ┣ 📂components               # UI 컴포넌트
 ┃ ┃ ┣ 📂common                 # 버튼, 모달, 인풋 등 공용 컴포넌트
 ┃ ┃ ┣ 📂main                   # 메인 페이지 전용 컴포넌트
 ┃ ┃ ┣ 📂post                   # 롤링페이퍼 작성 탭 관련 컴포넌트
 ┃ ┃ ┗ 📂rolling-paper-list     # 메시지 카드, 토스트, 토글 등 리스트 관련 컴포넌트
 ┃ ┣ 📂constants                # 상수 정의
 ┃ ┣ 📂context                  # 전역 상태 관리
 ┃ ┣ 📂hooks                    # 커스텀 훅
 ┃ ┣ 📂pages                    # 라우트 단위 페이지
 ┃ ┣ 📂router                   # 라우팅 설정
 ┃ ┣ 📂style                    # 전역 스타일, Tailwind 유틸, Quill 커스텀 CSS
 ┃ ┗ 📂utils                    # 공용 유틸 함수
 ┣ 📜App.jsx
 ┣ 📜main.jsx
 ┣ 📜index.html
 ┣ 📜vite.config.js             # Vite 빌드 설정
 ┣ 📜vercel.json                # Vercel 배포 설정
 ┣ 📜eslint.config.js           # ESLint 규칙
 ┣ 📜commitlint.config.js       # Commitlint 규칙
 ┣ 📜.prettierrc.json           # Prettier 포맷 설정
 ┣ 📜.prettierignore
 ┣ 📜.gitignore
 ┣ 📜.env                       # 환경 변수 파일
 ┗ 📜README.md

✨ 페이지 소개

🖥️ 메인 페이지

PC	Tablet	Mobile

🖥️ 리스트 페이지

PC	Tablet	Mobile

🖥️ 롤링페이퍼 생성 페이지

롤링페이퍼 생성하기

롤링페이퍼 생성	에러 처리

반응형

PC	Tablet	Mobile

🖥️ 롤링페이퍼 리스트 페이지

롤링페이퍼 공유하기

카카오톡 공유하기	URL 복사

롤링페이퍼 이모지 추가

이모지 추가	이모지 확인

반응형

PC	Tablet	Mobile

🖥️ 롤링페이퍼 리스트 편집 페이지

롤링페이퍼 삭제하기

롤링페이퍼 메세지 삭제	롤링페이퍼 삭제

반응형

PC	Tablet	Mobile

🖥️ 롤링페이퍼 메세지 등록 페이지

롤링페이퍼 메세지 등록

롤링페이퍼 메세지 등록	에러처리

반응형

PC	Tablet	Mobile

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Repository files navigation

✉️ Rolling - 롤링

🚩 프로젝트 소개

📅 프로젝트 수행

💁 팀원 소개

📋 역할 분배

이아름

양은지

최희락

차혁

선기훈