README.md

🔗 배포 링크

• 🗝️서비스 이용을 위한 계정

  • ID: hookie13@gmail.com
  • PW: 123123

• 주의사항 : hookie라는 accountName을 사용하지 않는 계정을 follow할 경우 에러가 발생할 수 있습니다!
  (부트캠프에서 제공된 공용 서버를 사용하는데 우리 프로젝트만의 태그 기능을 위해 기존 데이터를 파싱한 코드가 존재하기 때문입니다.)

🖥️ 서비스 소개

내가 만든 후기 너를 위해 썼지~ 🎶
후키를 통해 나의 후기를 자유롭게 작성하고 공유해보세요! 영화, 장소, 물건... 뭐든 좋아요 😀

👥 팀원 소개

Frontend

신윤철	왕유린	김설하	서유림
dev-yun	wang-yurin	zldnlto	yoorimseo

Backend

부트캠프 제공 API

👨‍👩‍👧‍👦 역할 분담

🧑🏻‍💻 신윤철

• 홈 페이지, 게시글 업로드 페이지, 게시글 수정 페이지, 프로필 페이지, 프로필 수정 페이지, 검색 페이지
• bottom Sheet, SnackBar, Dialog 모달 구현
• Loading Skeleton 구현

👩🏻‍💻 왕유린

• splash 페이지, 회원가입 페이지, 로그인 페이지, 프로필 설정 페이지
• 다크모드 기능 구현

👩🏻‍💻 김설하

• myPicks 페이지, 채팅 페이지, 404페이지
• 디자인 기획 및 에셋 제작

👩🏻‍💻 서유림

• 게시글 상세 페이지, 팔로워 페이지, 팔로잉 페이지
• 디자인 기획 및 에셋 제작

👥 공통

• Header, Navigation, Button 컴포넌트

(🔼 Top)

🤝 팀문화

• 매일 오전 9시에 회고 및 진행 상황을 공유해요.
• 감정 나누기 시간을 가지며 팀원들과 함께 멘탈도 챙겨요.
• '쉴땐 쉰다!' 지속가능한 개발 지향해요.
• 모든 기록은 노션과 GitHub Wiki에 작성해요. Wiki

(🔼 Top)

🛠 테크 스택

⚙️ 협업 툴

(🔼 Top)

🔀 Git Flow

(🔼 Top)

🖥️ 페이지 소개

스플래시	회원가입
ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ ✨ 앱 구동 시작화면 ✨ 로그인 정보 유무에 따른 페이지 이동	ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ ✨ 사용자 입력 값 유효성 검사 ✨ 유효성 검사 통과하면 버튼 활성화

프로필 설정	로그인
ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ ✨ 사용자 입력 값 유효성 검사 ✨ 유효성 검사 통과하면 버튼 활성화 ✨ 이미지 설정하지 않으면 기본 프로필 이미지 적용	ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ ✨ 필수 입력 값을 모두 입력해야 버튼 활성화 ✨ 로컬스토리지에 토큰 저장 ✨ 로그인 완료 후 홈 페이지로 이동

홈 페이지	검색 페이지
ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ ✨ 게시글 수정, 삭제, 신고, 좋아요 기능 구현 ✨ Loading Indicator 구현	ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ ✨ 사용자를 검색하고 프로필로 이동하는 기능 구현 ✨ debounce 기능 적용 ✨ Loading Indicator 구현

업로드 페이지	게시글 상세 페이지
ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ ✨ 이미지, 후기, 태그 추가 기능 구현 ✨ 작성한 포스트 수정 기능 구현 ✨ Loading Indicator 구현 ✨ HEIC 파일 변환하여 추가 기능 구현	ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ ✨ 게시글 삭제, 수정, 신고, 좋아요 기능 구현 ✨ 댓글 작성, 삭제, 신고 기능 구현 ✨ 댓글 작성 시 스크롤 이동 구현 ✨ 입력에 따라 입력창의 세로 길이가 유동적으로 변하도록 구현

프로필 페이지	프로필 수정 페이지
ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ ✨ 게시글 수정, 삭제, 신고 좋아요 ✨ 프로필 수정, 팔로우, 팔로잉 페이지 이동 ✨ 게시글 리스트형, 앨범형 보기 ✨ 무한 스크롤 구현	ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ ✨ 기존 프로필 정보를 유지하며 수정 페이지로 이동 ✨ validation을 통과해야 수정할 수 있도록 구현

팔로우 페이지	채팅 페이지
ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ ✨ 유저 팔로우, 팔로잉 기능 구현 ✨ 타 유저 프로필 페이지 이동	ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ ✨ 채팅 페이지 구현 ✨ 나의 메세지, 상대방 메세지 컴포넌트 구분

MyPicks	MyPicks 업로드 페이지
ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ ✨ 모달 형식으로 띄워지는 상세 조회 페이지 ✨ myPicks 수정, 삭제 기능 구현 ✨ 기존의 작성 내용을 유지하며 수정 페이지로 이동	ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ ✨ 이미지 파일 등록, 미리보기 기능 구현 ✨ 유효성 검사 통과해야 등록 가능 ✨ 가격 미정 항목에 대한 예외처리

다크모드	404
ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ ✨ 사용자 OS에 따른 다크모드, 라이트모드 적용 ✨ 사용자가 선택하여 테마 모드 설정	ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ ✨ 유효하지 않은 url 접근 시 404페이지 표시

(🔼 Top)

🗓️ 개발 기간 (22년 11월 27일 ~ 23년 1월 4일)

📌 주차별 프로젝트 마일스톤

주차
1주차 (11/27 ~ 12/8)	- 프로젝트 컨셉 회의 및 기술 스택, 협업툴 결정 (Notion, Discord, Figma) - GitProject, GitIssue 템플릿 적용, GitFlow 실습, Figma 디자인 작업 및 기획, 컨벤션 설정
2주차 (12/9 ~ 12/15)	- 초기 개발환경 세팅 - 공통 컴포넌트 페어프로그래밍으로 구현
3주차 (12/16 ~ 12/22)	- 페이지 단위로 업무를 분담하여 작업 시작
4주차 (12/23 ~ 12/29)	- 주요 기능 구현 1차 완료 - 추가기능 구현(다크모드, Loading Indicator) - 배포
5주차 (12/30~1/4)	- 프로젝트를 시연해보며 보이는 에러 수정 - SEO작업 - 프로젝트 PPT, README 작성

(🔼 Top)

📁 프로젝트 폴더 구조

├── 📁 src
│   ├── App.jsx
│   ├── 📁 api
│   ├── 📁 assets
│   ├── 📁 atoms
│   ├── 📁 components
│   │   ├── 📁 AuthInputForm
│   │   ├── 📁 ChatUserItem
│   │   ├── 📁 Comment
│   │   ├── 📁 FollowItem
│   │   ├── 📁 Message
│   │   ├── 📁 Modal
│   │   ├── 📁 Post
│   │   ├── 📁 Profile
│   │   ├── 📁 Skeleton
│   │   ├── 📁 Title
│   │   ├── 📁 UserSearch
│   │   └── 📁 common
│   ├── 📁 constants
│   ├── 📁 hooks
│   ├── 📁 pages
│   │   ├── 📁 Auth
│   │   ├── 📁 Chat
│   │   ├── 📁 Home
│   │   ├── 📁 MyPicksUpload
│   │   ├── 📁 NotFound
│   │   ├── 📁 Post
│   │   ├── 📁 Profile
│   │   ├── 📁 Search
│   │   ├── 📁 Splash
│   │   └── 📁 Welcome
│   ├── 📁 routes
│   └── 📁 styles
└──

(🔼 Top)