PlaNet-Devteam

🚀 우주 테마 소셜 네트워크 PlaNet 🚀

강명주 (@myungju030)	김보라 (@rockbell89)	정민상 (@jeongminsang)	이민형 (@lsx2003)

배포 URL

현재 요금 문제로 서버 중지

Contents

• 👨‍👨‍👧‍👦 Role
• 📃 Pages
• ⚙ Tech Stack
• 🔗 Git

Role

강명주 (@myungju030)

• 공통 컴포넌트
- 공통으로 사용할 버튼, 모달창 구현
• 피드 페이지
- 피드 생성, 수정 기능 구현
- 피드 이미지 업로드 구현
- useMouseDrag 커스텀 훅을 통한 좌우 스크롤 기능 구현
• README.md 작성

김보라 (@rockbell89)

• 레이아웃
- 로그인 상태여부에 따른 레이아웃 구분
• 인트로 & 404 에러
- 인트로 화면 CSS 애니메이션 적용
- 404 에러페이지 CSS 애니메이션 적용
• 회원가입 & 로그인
- 회원가입 및 로그인 기능 구현
- useForm 커스텀 훅을 통한 폼 데이터 상태 관리
- 로그인 시 recoil 및 cookie를 통한 유저정보 상태 관리
• 프로필 페이지
- 프로필 정보 및 유저별 피드 목록 구현
- 프로필 수정 기능 구현
- 프로필 이미지 업로드 기능 구현
• 기타
- useInfinityScroll 커스텀 훅 리팩토링
- 서버 유저정보 수정 구현
- 서버 피드 CRUD 구현

정민상 (@jeongminsang)

• 피드 페이지
- SSR 을 활용한 첫 피드 데이터 페칭
- 이미지 데이터의 갯수에 따라서 피드에 출력되는 방식 변경
- 피드 폼 구성
- 피드 스크롤 위치 저장 기능 구현
- MSW 로 피드 mock data 활용
• useInfiniteQuery를 활용한 무한 스크롤
- 맨 아래로 스크롤을 이동하면 로딩 스피너가 동작하고 React-Query가 서버에 요청
- 첫번째 데이터는 SSR을 통해 데이터를 미리 가져오고 무한스크롤은 두번째 데이터부터 순차적으로 가져옴
- 만약 서버에 데이터가 더 없다면? 더 이상 요청을 보내지 않고 중단
• 이미지 캐러셀
- 이미지를 클릭하면 모달창이 켜지고 해당 이미지를 자세하게 볼 수 있음
- 이미지가 여러장일 때 이미지를 드래그하면 다음 이미지로 슬라이드
• 스크롤 동작에 따라 동적으로 하단바 출력 방식 리팩토링
• dayjs 날짜 데이터 가공

이민형 (@lsx2003)

• 프로젝트 초기설정
• AWS S3 버킷 이미지 업로드 구현

Pages

🚀 User

인트로	로그인	회원가입	회원가입

피드 등록	피드 수정	피드 삭제	피드 보관

마이페이지	프로필 수정	팔로워 삭제	비밀번호 변경

유저 검색	유저 팔로우	유저 차단

좋아요	북마크	404 페이지	계종 활성 비활성

댓글 등록	댓글 수정	댓글 정렬

태그 검색	피드 태그 검색	피드 캐러샐

Tech Stack

Git

🌿 Branch

• main : 서비스 운영 브랜치
• dev : 개발중인 브랜치
• feat/기능명 : 기능 개발 브랜치

💌 Commit Message

Message	설명
init	초기 설정
feat	새로운 기능 추가
fix	버그 수정
docs	문서 수정
refactor	코드 리팩터링
test	테스트 코드, 리팩터링 테스트 코드 추가(프로덕션 코드 변경 X)
chore	빌드 업무 수정, 패키지 매니저 수정(프로덕션 코드 변경 X)
rename	파일 혹은 폴더명을 수정하거나 옮기는 작업만인 경우