From team 4 - 22

DEMO

• Link: netlify
  
• Link: vercel

---

프로젝트 소개

---

개요

코드잇 스프린트 프론트엔드4기 기초 프로젝트 Rolling

추억의 롤링페이퍼를 웹 상에서도 즐길 수 있는 플렛폼인 Rolling 서비스 입니다.

주요 기능 소개

• 롤링페이퍼를 제작하고 삭제할 수 있습니다.
  
• 롤링페이퍼에 자유롭게 카드를 작성할 수 있고 작성한 카드를 삭제할 수 있습니다.
  
• 롤링페이퍼에 이모지를 추가할 수 있습니다.
  
• 가장 이모지를 많이 받은 롤링페이퍼와 최근에 만든 롤링페이퍼, 전체 롤링 페이퍼를 열람할 수 있습니다.

목표

• 유저에 따른 UI 및 액션 변경

• 반응형 UI 제작

• 다양한 주체의 상호작용에 대한 입체적 이해

• API와의 데이터 통신과 화면에 최신 정보를 반영하기 위한 상호작용의 이해

• LocalStorage에 대한 이해

• CRUD, 유저 액션 등을 다룰 때 새로고침 되지 않는 비동기적 API/UI 처리를 통한 역량 향상

• 각 파트를 담당하는 사람들과의 커뮤니케이션 역량 향상

• 다양한 환경에서의 테스트를 통해 실제 유저에게 완성도 있는 제품을 deliver하는 연습

• 여러 사람에게 효과적으로 업무 분배/관리

기술적 성취

• vite 환경의 사전 번들링 기능으로 react-app보다 빠른 개발, 사용자 경험을 제공합니다.
  
• useMutate, useFetch와 같은 다양한 커스텀 훅을 제작해 코드의 가독성과 유지 보수성을 높였습니다.
  
• 여러명의 개발자가 협업하는 프로젝트이기에 scss + module을 사용해 코드 중복 가능성을 낮추고 생산성을 높였습니다.
  
• Pagination 기법을 통해 단일 페이지 내에 자칫 무거워질 수 있는 api요청들을 최소화하여 퍼포먼스 향상을 이루었습니다.
  
• 웹, 모바일 환경에서도 만족스러운 사용자 경험을 위해 반응형 웹 디자인을 적용했습니다.
  

---

Language

CSS

Framework

State Management Tool

Collaboration Tool

Version control

Build Tool

Deployment

Others

---

김가은_@kong33

useMutate 제작

• useMutate 커스텀 훅으로 Post, delete 등의 fetch 로직 분리

TextEditor 제작

• 라이브러리의 코드를 커스터마이징 해 프로젝트에 어울리게 구현

Post 페이지 제작

• common Input, Dropdown, Option 등 컴포넌트를 제작하고 페이지 구현

---

김보경_@bokeeey

Carousel 제작

• embla carousel 라이브러리를 커스터마이징 해 프로젝트에 적합한 모션 구현

useFetch 제작

• useFetch를 제작해 get, delete, fetch, post를 하나의 훅으로 해결

ListPage

CardList

CardOverview

---

김진아_@jinah-dev

CardPost 컴포넌트

• 페어 프로그래밍으로 card 컴포넌트 및 다양한 컴포넌트 개발

CardPostListPage

---

임채민_@ChaeMin

Header 및 SubHeader

• header와 subHeader를 제작

Toast

LandingPage

KaKao share API

• 카카오톡 공유하기 기능 구현

Emoji Picker

---

정봉찬_@devwqc [Team Leader]

common Button

• button 공통 컴포넌트 제작

CardList 컴포넌트 개발

• 페어 프로그래밍으로 card 컴포넌트 및 다양한 컴포넌트 개발

Modal 개발