🍎 Rolling

롤링은 전통적인 롤링페이퍼 문화를 웹으로 구현한 커뮤니티형 플랫폼입니다. 사용자는 친구나 동료들과 따뜻한 메시지를 주고받으며, 이를 통해 CRUD(Create, Read, Update, Delete) 기능을 직접 경험하게 됩니다. 이 프로젝트에서는 롤링페이퍼의 생성, 수정, 삭제뿐만 아니라 이모지 반응 기능을 추가해 감정 표현을 더 풍부하게 할 수 있습니다. 또한, 모달, 토스트와 같은 UI 요소를 활용하고, 글 입력에 외부 라이브러리를 적용해 사용자 경험을 개선할 수 있습니다.

---

Live Demo: 데모링크

📟 Figma

👥 팀원 구성

• 팀장: 오영교 Gyo50
• 팀원: 홍요한ghddygks45 , 최가을choigaeul , 박지영duddj122352-design , 진아름areumjin

---

🛠 기술 스택

• Core: React, JavaScript (ES6+), React Router
• Styling: CSS Modules, Tailwind CSS
• Data Fetching: Axios
• Editor: Froala Editor (Rich Text 구현)
• Deployment: Vercel

---

📂 페이지 구성

src/
├── api/            # API 요청 모듈 (client, messages, recipients)
├── Component/      # 공통 UI 컴포넌트 (Badge, Button, Card, Modal, Toast 등)
├── CreatePostPage/ # 롤링페이퍼 페이지 생성 로직
├── ListPage/       # 카드 리스트 조회 및 필터링 검색
├── MainPage/       # 서비스 소개 및 랜딩 페이지
├── MessagePage/    # 메시지 상세 보기 및 삭제 처리
├── RollingPage/    # 수신자별 메시지 관리 및 이모지 반응
└── index.js        # 엔트리 포인트 및 전역 스타일 설정

---

🚀 실행 방법

1. 환경 변수 설정

프로젝트 루트에 .env.local 파일을 생성하고 다음 내용을 입력하세요:

REACT_APP_ROLLING_API_BASE_URL=https://rolling-api.vercel.app/20-4/
REACT_APP_DEBUG=true

주의: REACT_APP_ROLLING_API_BASE_URL에 팀 경로(/20-4/)를 포함해야 합니다.

중요: .env.local 파일은 Git에 커밋되지 않습니다. 각 개발자가 자신의 환경에 맞게 설정해야 합니다.

디버깅 모드

디버깅 모드를 활성화하려면 .env.local 파일에 REACT_APP_DEBUG=true를 추가하세요.

• 개발 모드 (npm start): 기본적으로 디버깅 모드가 활성화됩니다.
• 프로덕션 빌드: REACT_APP_DEBUG=true를 명시적으로 설정해야 디버깅 모드가 활성화됩니다.

디버깅 모드가 활성화되면:

• 모든 API 요청/응답이 콘솔에 상세히 로깅됩니다
• 요청 URL, 메서드, 파라미터, 데이터가 표시됩니다
• 응답 상태 코드, 데이터, 헤더가 표시됩니다
• 에러 발생 시 상세한 에러 정보가 표시됩니다

2. 프로젝트 실행

npm install
npm start

참고: 환경 변수를 변경한 후에는 개발 서버를 재시작해야 합니다.

문제 해결

다른 컴퓨터에서 데이터가 불러와지지 않거나 에러가 발생하는 경우, TROUBLESHOOTING.md 파일을 참고하세요.

주요 체크 사항:

• ✅ .env.local 파일이 프로젝트 루트에 존재하는가?
• ✅ 환경 변수 값이 올바른가? (REACT_APP_ 접두사 확인)
• ✅ 환경 변수 변경 후 개발 서버를 재시작했는가?
• ✅ 브라우저 콘솔에 에러 메시지가 있는가?
• ✅ 인터넷 연결이 정상인가?

hooks test