💚 모임이 끝나고 후기를 전할 수 있는 롤링페이퍼 프로젝트

리액트 심화주차 프로젝트로 NEXTJS를 통해 구현했어요.

어떤 모임을 마치고 소감은 듣고 싶은데, 막상 부탁하기 어려울 때! "어땠어?"를 사용해보는건 어떨까요?

0. 팀원 소개

남현재	정민석	조은영	임현석	안종현	한종섭
모임 전체 목록, 닉네임 수정 & 로그아웃 기능, 프로젝트 환경 셋팅	모임생성, 이미지 drag&drop 방식 추가 기능,	회원가입 & 로그인 소셜로그인(google, kakao)	모임 목록 페이지 리스트 (기본순, 모아보기) 모임 재배치 기능	모임 후기 글쓰기 및 편지지 색상 변경 기능 후기 상세페이지	디테일 페이지 헤더 카카오톡 공유하기

0-1. 프로젝트 진행 기간

• 2024.07.08 ~ 2024.07.12
  
  

0-2. 프로젝트를 진행하며..

• 서로의 진행 상황을 공유하기 위해 zep과 slack을 통해 소통했어요.
• 서로의 코드를 리뷰하는 문화를 지향했어요.

0-3. 프로젝트 Github 전략

git-flow 전략을 간소화 하여 메인 브랜치인 main, dev와 보조 브랜치 feature 사용했어요.

main branch

• 최종 프로젝트 버전을 배포하는 브랜치
  

dev branch

• feature 브랜치의 분기가 되는 곳, 개발 브랜치
  

feature branch

• 각자의 기능을 개발하는 브랜치 dev branch로부터 각자의 feature branch를 만들어 작업한 이후 PR을 통해 코드리뷰를 진행하고 merge를 했서요. 또한 2명 이상 approve가 있어야 dev에 merge 할 수 있도록 조건을 설정하였어요.
  
  

1. 사용한 라이브러리

tanstack-query

서버 상태 관리를 관리 하기 위해 사용하였으며, 비동기 로직을 간편하게 작성하기 위해 사용했어요

supabase

Supabase를 백엔드로 사용하여 실시간 데이터베이스를 사용했어요

tailwind css

재사용성이 높고, 코드의 가독성과 유지보수성을 향상시킬 수 있기에 사용했어요

Kakao Share API

카카오 API를 이용하여 사용자가 콘텐츠를 쉽게 공유할 수 있도록 하였어요.

2. 대표기능

• 회원가입 로그인을 통해 인증된 사용자만 모임을 생성할 수 있어요.
  
• 모임을 생성하고 모임 공유 기능을 통해 다른 사람들이 나에게 글을 쓸 수 있어요.
  
• 모임 재배치 기능을 통해 포스트잇 처럼 마우스로 글을 옮길 수 있어요.
  
• 글작성 페이지에서 배경색을 바꿀 수 있어요
  
  

3. 상세설명

1. Supabase Auth를 사용하여 로그인 회원가입 페이지를 구현

• Supabase Auth를 사용하여 로그인 및 회원가입 페이지를 구현했어요.
• 이메일 회원가입 및 소셜 로그인(구글, 카카오) 기능을 구현하여 편리하게 인증할 수 있어요
  
  

2. 내가 생성한 모임과 닉네임 변경 기능

• 나의 모임을 통해 내가 생성한 모임을 빠르게 찾아볼 수 있어요.
• 닉네임 변경을 통해 나만의 닉네임을 가질 수 있어요.
  
  

3. 모임 리스트 페이지 구현

• 유저들이 생성한 모임들을 볼 수 있어요.
• 무한 스크롤을 구현하였어요. 무한 스크롤시 로딩은 로딩 스피너를 통해 로딩중임을 알 수 있어요.

4. 모임 생성 페이지 구현

• 드래그 방식으로 이미지를 넣어 모임을 생성할수 있어요.

4. 모임 상세페이지

• 내가 생성한 모임에 다른 사람들이 써준
• 버튼을 통해 보기 방식을 변경 할 수 있어요.
• 다른 사람이 쓴 글을 마우스를 통해 배치할 수 있어요.

• URL 공유하기와 카카오톡 공유하기 기능으로 비회원도 링크를 통해 글을 남길 수 있어요

• 아이콘을 클릭해 글의 내용을 볼 수 있어요

• 잘못된 경로로 접근한 경우 Not-Found UI를 보여줬어요
  
• 에러 발생시 Error UI를 보여줬어요
  
  

• 공유 받은 URL이나 카카오톡 공유를 통해 글을 작성할 수 있어요.
• 카테고리별 선택과 배경색을 바꿀 수 있어요.