Rolling-Project-Team-9

코드잇 스프린트 : 프론트 엔드 2기 Part2 - 9팀

개발 기간: 2023. 12.9 ~ 12.22

URL: https://rolling-team9.netlify.app/

💡프로젝트 소개

말하기 어려웠던 고민부터 시시콜콜한 안부까지 하고 싶었던 말을 롤링페이퍼를 통해서 남겨보세요.

• 롤링페이퍼 만들기 롤링페이퍼를 만들고 친구들을 초대해 평소에 하지 못했던 이야기를 담아보세요.

• 작성 방식 메시지를 작성하기 전에 내 롤링페이퍼 방에 컬러와 이미지 배경을 선택할 수 있어요.

• 친구 초대 나만의 롤링페이퍼 방을 만들고, 카톡 공유하기 링크를 보내 친구들을 초대해요.

• 메시지 쓰기 방에 초대되었다면, 하고 싶은 이야기를 남겨보세요.

• 메시지 꾸미기 작성자 이름과 프로필 이미지로 힌트를 남겨주세요.

• 메시지 읽기 카드를 클릭해서 메시지의 내용을 확인해요.

• 리액션 친구의 롤링페이퍼에 이모지로 공감해 주세요.

💡팀원 소개

[FE] 김주현

[FE] 이준기

[FE] 박준성

[FE] 박운성

[FE] 김윤미

💡 기술 스택

Front-End

협업

💡 역할분담

🐱 김주현

• UI
  • 공통 컴포넌트: Header, Date, RecipinetName
  • 페이지: 롤링페이퍼 메세지 보내기 페이지
  • 크리스마스 테마 적용
• 기능
  • 텍스트 에디터 기능, 메세지 카드 등록 기능
• 노션 정리, 컴포넌트 및 기능 정리, R&R 분배

💙 이준기

• UI
  • 공통 컴포넌트: Badge, Emojis, Toast
  • 페이지: 메인 페이지, 롤링페이퍼 수정 페이지
  • 반응형 디자인 : 메인 페이지, 롤링페이퍼 수정 페이지
• 기능
  • 롤링페이퍼 및 메세지 삭제 기능, 카카오톡 및 url 공유 기능, 헬멧
• 컨벤션 정리(디렉토리 구조, 브랜치 전략)

🧸 박준성

• UI
  • 공통 컴포넌트 : Option, TextFeild, Card
  • 페이지 : 롤링페이퍼 페이지
  • 반응형 디자인 : 롤링페이퍼 리스트 페이지
• 기능
  • 이모지 추가 기능
• netlify 배포

☁️ 박운성

• UI
  • 공통 컴포넌트: Avatar, CardList
  • 페이지: 롤링페이퍼 리스트 페이지
  • 반응형 디자인 : 롤링페이퍼 리스트 페이지
• 기능
  • 무한 스크롤 기능, 스켈레톤 기능
• React Router 셋팅

🍃 김윤미

• UI
  • 공통 컴포넌트: Button
  • 페이지: 롤링페이퍼 만들기 페이지
  • 반응형 : 롤링페이퍼 만들기 페이지, 롤링페이퍼 메세지 보내기 페이지, 롤링페이퍼 페이지, 모달
• 기능
  • 롤링페이퍼 등록 기능
• 디자인 토큰 정리 , EsLint 정리

👀 페이지 preview

홈페이지

롤링페이퍼 리스트 페이지

롤링페이퍼 만들기 페이지

롤링페이퍼 페이지

롤링페이퍼 수정 페이지

롤링페이퍼 메세지 페이지