---
# System prepended metadata

title: Untitled

---

![HOOKIE](https://i.imgur.com/Peev1Mz.png)


[🔗 배포 링크](https://hookie.netlify.app/)

<br>

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

<br>

## 👥 팀원 소개

### **Frontend**  
|신윤철|왕유린|김설하|서유림|
|:----:|:----:|:----:|:----:|
|<img src="https://avatars.githubusercontent.com/u/71367408?v=4" alt="신윤철" width="130" height="130">|<img src="https://avatars.githubusercontent.com/u/101461874?v=4" alt="왕유린" width="130" height="130">|<img src="https://avatars.githubusercontent.com/u/95897068?v=4" alt="김설하" width="130" height="130">|<img src="https://avatars.githubusercontent.com/u/74060716?v=4" alt="서유림" width="130" height="130">|
|[dev-yun](https://github.com/dev-yun)|[wang-yurin](https://github.com/wang-yurin)|[zldnlto](https://github.com/zldnlto)|[yoorimseo](https://github.com/yoorimseo)|

### **Backend**  
부트캠프 제공 API 

<br>

## 👨‍👩‍👧‍👦 역할 분담
### 🧑🏻‍💻 신윤철
- 홈 페이지, 게시글 업로드 페이지, 게시글 수정 페이지, 프로필 페이지, 프로필 수정 페이지, 검색 페이지
- bottom Sheet, SnackBar, Dialog 모달 구현
- Loading Skeleton 구현

### 👩🏻‍💻 왕유린
- splash 페이지, 회원가입 페이지, 로그인 페이지, 프로필 설정 페이지
- 다크모드 기능 구현

### 👩🏻‍💻 김설하
- myPicks 페이지, 채팅 페이지, 404페이지
- 디자인 기획 및 에셋 제작

### 👩🏻‍💻 서유림
- 게시글 상세 페이지, 팔로워 페이지, 팔로잉 페이지
- 디자인 기획 및 에셋 제작

### 👥 공통
- Header, Navigation, Button 컴포넌트

<br>

## 🤝 팀문화
- 매일 오전 9시에 **회고 및 진행 상황**을 공유해요.
- **감정 나누기 시간**을 가지며 팀원들과 함께 멘탈도 챙겨요.
- **'쉴땐 쉰다!'** 지속가능한 개발 지향해요.
 
<br>

## 🛠 테크 스택
![Tech Stack](https://i.imgur.com/tbB78SU.png)

<br>

## 🔀 Git Flow
![Git Flow](https://i.imgur.com/EvI6Zny.png)

<br>

## 🖥️ 페이지 소개 

|스플래시|회원가입|
|:----:|:----:|
|<img src='https://i.imgur.com/NrkBgAe.gif' width="300" />|<img src='https://i.imgur.com/Ynj45pS.gif' width="300"/>|
|<pre style='width:300px'>✨ 앱 구동 시작화면<br>✨ 로그인 정보 유무에 따른 페이지 이동</pre>|<pre style='width:300px'>✨ 사용자의 오류를 최소화하기 위해 인풋 입력 시 유효성 검사<br>✨ 유효성 검사 통과하면 버튼 활성화</pre>|
<div style="color:tomato">----------------------------------------------</div>
<hr style="color:tomato" />
|프로필 설정|로그인|
|:----:|:----:|
|<img src='https://i.imgur.com/7z6YZYt.gif' width="300" />|<img src='https://i.imgur.com/0NHwPYU.gif' width="300"/>|
|<pre  style='width:300px'>✨ 사용자의 오류를 최소화하기 위해 인풋 입력 시 유효성 검사<br>✨ 유효성 검사 통과하면 버튼 활성화<br>✨ 이미지 설정하지 않으면 기본 프로필 이미지 적용</pre>|<pre  style='width:300px'>✨ 사용자의 오류를 최소화하기 위해 인풋 모두 입력해야 버튼 활성화<br>✨ 로컬스토리지에 토큰 저장<br>✨ 로그인 완료 후 홈 페이지로 이동</pre>|

|홈 페이지|검색 페이지|
|:----:|:----:|
|<img src='https://i.imgur.com/wNaJtA7.gif' width="300"/>|<img src='https://i.imgur.com/atXjz5c.gif' width="300"/>|
|<pre style='width:300px'>✨ 게시글 수정, 삭제, 신고, 좋아요 기능 구현<br>✨ Loading Indicator 구현</pre>|<pre style='width:300px'>✨ 사용자를 검색하고 프로필로 이동하는 기능 구현<br>✨ debounce 기능 적용<br>✨ Loading Indicator 구현</pre>|

|업로드 페이지|게시글 상세 페이지|
|:----:|:----:|
|<img src='https://i.imgur.com/PVHIpVN.gif' width="300"/>|<img src='https://i.imgur.com/q4E5FJp.gif' width="300"/>|
|<pre>✨ 이미지, 후기, 태그 추가 기능 구현<br>✨ 작성한 포스트 수정 기능 구현 <br>✨ Loading Indicator 구현 <br>✨ HEIC 파일 변환하여 추가 기능 구현</pre>|<pre>✨ 게시글 삭제, 수정, 신고, 좋아요 기능 구현<br>✨ 댓글 작성, 삭제, 신고 기능 구현<br>✨ 댓글 작성 시 스크롤 이동 구현<br>✨ 입력에 따라 입력창의 세로 길이가 유동적으로 변하도록 구현</pre>|

|프로필 페이지|프로필 수정 페이지|
|:----:|:----:|
|<img src='https://i.imgur.com/K2PbWhx.gif' width="300"/>|<img src='https://i.imgur.com/9p66u8E.gif' width="300"/>|
✨ 게시글 수정, 삭제, 신고 좋아요<br>✨ 프로필 수정, 팔로우, 팔로잉 페이지 이동<br>✨ 게시글 리스트형, 앨범형 보기 <br>✨ 무한 스크롤 구현 |<pre>✨ 기존 프로필 정보를 유지하며 수정 페이지로 이동<br>✨ validation을 통과해야 수정할 수 있도록 구현</pre>|

|팔로우 페이지|채팅 페이지|
|:----:|:----:|
|<img src='https://i.imgur.com/drRX0XL.gif' width="300"/>|<img src='https://i.imgur.com/r8AybVb.gif' width="300"/>|
|<pre>✨ 유저 팔로우, 팔로잉 기능 구현<br>✨ 타 유저 프로필 페이지 이동 </pre>|<pre>✨ 채팅 페이지 구현 <br> ✨ 나의 메세지, 상대방 메세지 컴포넌트 구분</pre>|


|MyPicks|MyPicks 업로드 페이지|
|:----:|:----:|
|<img src='https://i.imgur.com/sTl1bjD.gif' width='300' />|<img src='https://i.imgur.com/sQ6Dld0.gif' width='300' />|
|<pre>✨ 모달 형식으로 띄워지는 상세 조회 페이지 <br>✨ myPicks 수정, 삭제 기능 구현 <br>✨ 기존의 작성 내용을 유지하며 수정 페이지로 이동</pre>|<pre>✨ 이미지 파일 등록, 미리보기 기능 구현 <br> ✨ 유효성 검사 통과해야 등록 가능 <br> ✨ 가격 미정 항목에 대한 예외처리</pre>| 

|다크모드|404|
|:----:|:----:|
|<img src='https://i.imgur.com/ydVU5yM.gif' width='300'/>|<img src='https://i.imgur.com/vono9VQ.png' width='300'/>|
|<pre>✨ 사용자 OS에 따른 다크모드, 라이트모드 적용<br>✨ 사용자가 선택하여 테마 모드 설정</pre>|<pre>✨ 유효하지 않은 url 접근 시 404페이지 표시</pre>|

<br>

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

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

<br>

## 📁 프로젝트 폴더 구조
```
├── 📁 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
└──
```
