추억의 롤링 페이퍼 웹 서비스 '롤링'

1. 프로젝트 개요

• 소속: 코드잇 프론트엔드 엔지니어 부트캠프 2기, 파트 2 - 9팀
• 개발 기간: 2023. 12. 09 - 2023. 12. 22
• 개발 인원: 프론트엔드 개발자 5명
• 배포 링크: https://rolling-team9.netlify.app
• 주요 기능:
  • 롤링 페이퍼 생성: 이미지 또는 컬러 배경을 선택해 나만의 롤링 페이퍼 방을 생성
  • 친구 초대: 카카오톡 링크를 통해 롤링 페이퍼 공유
  • 메시지 작성: 폰트 크기 및 스타일을 자유롭게 편집하여 메시지 작성
  • 메시지 꾸미기: 작성자의 이름 및 프로필 이미지를 설정하여 개성 표현
  • 리액션 기능: 친구의 롤링 페이퍼에 이모지를 추가해 감정 표현

2. 팀원

@kimbobby @juncastle97 @juncastle97 @Useong0 @ynmkim

3. 기술 스택

🛠 언어

• 
• 
• 

📚 라이브러리

• 

🎨 스타일링

• 

🧑‍💻 코드 품질 관리

• 
• 

4. 주요 기여 내용

1. 디자인 토큰 제작

• 색상 팔레트, 타이포그래피, 레이아웃, Box Shadow, Overlay Backdrop Color 속성의 문자열 오타 및 반복 코드 작성의 비효율을 방지하기 위해, 재사용 가능한 객체 타입으로 정의한 디자인 토큰 제작으로 생산성을 높임.

2. 컴포넌트 가이드 문서 작성

• 팀원 모두가 타입스크립트 학습 전이라 기술 스택에 포함되지 않아 Button 컴포넌트에 필요한 props와 자료형 타입을 정의한 가이드 문서를 작성하여, 팀원이 잘못된 props를 전달하는 실수를 방지하고, 빠르게 컴포넌트를 적용할 수 있도록 제공함. 이를 통해 타입스크립트의 유용성에 대해 배움.

5. 역할 분담

🍃 김윤미

🖥 UI 개발

• 공통 컴포넌트: Button, Modal
• 페이지: 롤링 페이퍼 개설 페이지
• 반응형 적용: 롤링 페이퍼 개설 페이지, 롤링 페이퍼 메시지 작성 페이지, 롤링 페이퍼 목록 페이지

⚙ 기능 개발

• 롤링 페이퍼 메시지 생성 기능

🛠 기타 작업

• 디자인 토큰 정의
• ESLint 설정

---

🐱 김주현

🖥 UI 개발

• 공통 컴포넌트: Header, Date, RecipientName
• 페이지: 롤링 페이퍼 메시지 작성 페이지
• 테마 적용: 크리스마스 테마

⚙ 기능 개발

• 텍스트 편집기 기능
• 메시지 카드 등록 기능

🛠 기타 작업

• Notion 문서 정리 및 프로젝트 문서화
• 기능 및 컴포넌트 구조 정리
• R&R 조정

---

💙 이준기

🖥 UI 개발

• 공통 컴포넌트: Badge, Emojis, Toast
• 페이지: 메인 페이지, 롤링 페이퍼 관리 페이지
• 반응형 적용: 메인 페이지, 롤링 페이퍼 관리 페이지

⚙ 기능 개발

• 롤링 페이퍼 메시지 삭제 기능
• 카카오톡 및 URL 공유 기능
• SEO 최적화를 위한 Helmet 설정

🛠 기타 작업

• 개발 컨벤션 정리 (디렉토리 구조, 브랜치 전략)

---

🧸 박준성

🖥 UI 개발

• 공통 컴포넌트: Option, TextField, Card
• 페이지: 롤링 페이퍼 페이지
• 반응형 적용: 롤링 페이퍼 목록 페이지

⚙ 기능 개발

• 이모지 추가 기능

🛠 기타 작업

• 배포 환경 구축 (Netlify)

---

☁️ 박운성

🖥 UI 개발

• 공통 컴포넌트: Avatar, CardList
• 페이지: 롤링 페이퍼 목록 페이지
• 반응형 적용: 롤링 페이퍼 목록 페이지

⚙ 기능 개발

• 무한 스크롤 기능
• 스켈레톤 로딩 기능

🛠 기타 작업

• 라우팅 구조 설정 (React Router)

6. 미리보기

메인

롤링 페이퍼 전체 목록

롤링 페이퍼 개설

롤링 페이퍼 메시지 보내기

롤링 페이퍼 상세

롤링 페이퍼 관리

롤링 페이퍼 리액션