From 269c5a233c7e7038a4c41da2bbd0ea8fc223ba79 Mon Sep 17 00:00:00 2001
From: Sung Hoo <120024673+HOOOO98@users.noreply.github.com>
Date: Sun, 28 Jan 2024 02:29:00 +0900
Subject: [PATCH 1/6] Update README.md

---
 README.md | 530 ++++++++++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 498 insertions(+), 32 deletions(-)

diff --git a/README.md b/README.md
index 3f498e9b..ea1e28d1 100644
--- a/README.md
+++ b/README.md
@@ -1,47 +1,513 @@
-# 중간 결과물 서면 피드백 8조 FE
-## API 명세 
-[스웨거](https://app.swaggerhub.com/apis-docs/strong-potato/trip-vote_api/1.0.0)
+# ⛵️ 함께 할때 더 좋은 여행 일정 서비스 TRIPVOTE
 
-## 다자인 
-[피그마](https://www.figma.com/file/ypTLv92s72sihUApnxjP5C/%EA%B0%95%EC%9E%90%EB%B0%AD-%ED%94%BC%EA%B7%B8%EB%A7%88?type=design&node-id=40-3&mode=design&t=ApKRWjdA112o0y1T-0)
+![1 표지](https://github.com/Strong-Potato/TripVote-FE/assets/120024673/acbebd6f-1cb7-4e98-8804-1c0dcce509cb)
 
-## 역할
+
+- 배포 URL : https://tripvote.site
+- Test ID : test@test.com
+- Test PW : 1q2w3e4r!Q
+
+<br>
+
+## 프로젝트 소개
+
+- TRIPVOTE는 일행과 함꼐 여행일정을 만들어 갈 수 있는 서비스입니다.
+- 여행 스페이스를 만들고 투표와 일정을 등록할 수 있습니다.
+- 검색을 통해서 장소를 찾고, 투표와 일정에 등록시킬 수 있습니다.
+- 일행과 함께 투표에 참여하여 일정을 정해볼 수 있습니다.
+
+<br>
+
+## 팀원 구성
+
+<div align="center">
+
+| **남궁종민** | **박성후** | **박은영** | **백상원** | **정서현** | **진정민** |
+| :------: |  :------: | :------: | :------: | :------: | :------: |
+| [<img src="https://avatars.githubusercontent.com/u/100336573?v=4" width=150px alt="종민"> <br> @NamgungJongMin](https://github.com/NamgungJongMin) | [<img src="https://avatars.githubusercontent.com/u/120024673?v=4" width=150px alt="성후"> <br> @HOOOO98](https://github.com/HOOOO98) | [<img src="https://avatars.githubusercontent.com/u/139188760?v=4" width=150px alt="은영"> <br> @SKY-PEY](https://github.com/SKY-PEY) | [<img src="https://avatars.githubusercontent.com/u/121215024?v=4" width=150px alt="상원"> <br> @Yamyam-code](https://github.com/Yamyam-code) | [<img src="https://avatars.githubusercontent.com/u/63582234?v=4" width=150px alt="서현"> <br> @JSH99](https://github.com/JSH99) | [<img src="https://avatars.githubusercontent.com/u/57976371?v=4" width=150px alt="정민"> <br> @JeongMin83](https://github.com/JeongMin83) |
+
+</div>
+
+<br>
+
+## 1. 개발 환경
+
+- Front : React(Vite), TypeScript, SCSS
+- Back-end : TourAPI, Java Springboot3
+- 버전 및 이슈관리 : Github, Github Issues, Github Project
+- 협업 툴 : Discord, Notion, Slack
+- 서비스 배포 환경 : Vercel. Github CI
+- 디자인 : [Figma](https://www.figma.com/file/ypTLv92s72sihUApnxjP5C/%EA%B0%95%EC%9E%90%EB%B0%AD-%ED%94%BC%EA%B7%B8%EB%A7%88?type=design&node-id=40%3A3&mode=design&t=uYBOpmiZcAjXWHWQ-1)
+<br>
+
+## 2. 채택한 개발 기술과 브랜치 전략
+
+### React, SCSS
+
+- React
+    - 컴포넌트화를 통해 추후 유지보수와 재사용성을 고려했습니다.
+    - 유저 배너, 상단과 하단 배너 등 중복되어 사용되는 부분이 많아 컴포넌트화를 통해 리소스 절약이 가능했습니다.
+- styled-component
+    - props를 이용한 조건부 스타일링을 활용하여 상황에 알맞은 스타일을 적용시킬 수 있었습니다.
+    - 빌드될 때 고유한 클래스 이름이 부여되어 네이밍 컨벤션을 정하는 비용을 절약할 수 있었습니다.
+    - S dot naming을 통해 일반 컴포넌트와 스타일드 컴포넌트를 쉽게 구별하도록 했습니다.
+    
+### Recoil
+
+- 최상위 컴포넌트를 만들어 props로 유저 정보를 내려주는 방식의 경우 불필요한 props 전달이 발생합니다. 따라서, 필요한 컴포넌트 내부에서만 상태 값을 가져다 사용하기 위해 상태 관리 라이브러리를 사용하기로 했습니다.
+- Redux가 아닌 Recoil을 채택한 이유
+    - Recoil은 React만을 위한 라이브러리로, 사용법도 기존의 useState 훅을 사용하는 방식과 유사해 학습비용을 낮출 수 있었습니다.
+    - 또한 Redux보다 훨씬 적은 코드라인으로 작동 가능하다는 장점이 있었습니다.
+- 로그인과 최초 프로필 설정 시 유저 정보를 atom에 저장하여 필요한 컴포넌트에서 구독하는 방식으로 사용했습니다.
+
+### eslint, prettier
+
+- 정해진 규칙에 따라 자동적으로 코드 스타일을 정리해 코드의 일관성을 유지하고자 했습니다.
+- 코드 품질 관리는 eslint에, 코드 포맷팅은 prettier에 일임해 사용했습니다.
+- airbnb의 코딩 컨벤션을 참고해 사용했고, 예외 규칙은 팀원들과 협의했습니다.
+- 협업 시 매번 컨벤션을 신경 쓸 필요 없이 빠르게 개발하는 데에 목적을 두었습니다.
+
+### MSW
+
+
+
+### Jest
+
+
+
+### 브랜치 전략
+
+- Git-flow 전략을 기반으로 main, develop 브랜치와 feature 보조 브랜치를 운용했습니다.
+- main, develop, Feat 브랜치로 나누어 개발을 하였습니다.
+    - **main** 브랜치는 배포 단계에서만 사용하는 브랜치입니다.
+    - **develop** 브랜치는 개발 단계에서 git-flow의 master 역할을 하는 브랜치입니다.
+    - **Feat** 브랜치는 기능 단위로 독립적인 개발 환경을 위하여 사용하고 merge 후 각 브랜치를 삭제해주었습니다.
+
+<br>
+
+## 3. 프로젝트 구조
+
+```
+├── README.md
+├── .eslintrc.js
+├── .gitignore
+├── .prettierrc.json
+├── package-lock.json
+├── package.json
+│
+├── public
+│    └── index.html
+└── src
+     ├── App.jsx
+     ├── index.jsx
+     ├── api
+     │     └── mandarinAPI.js
+     ├── asset
+     │     ├── fonts
+     │     ├── css_sprites.png
+     │     ├── logo-404.svg
+     │     └── logo-home.svg
+     │          .
+     │          .
+     │          .
+     ├── atoms
+     │     ├── LoginData.js
+     │     └── LoginState.js
+     ├── common
+     │     ├── alert
+     │     │     ├── Alert.jsx
+     │     │     └── Alert.Style.jsx
+     │     ├── button
+     │     ├── comment
+     │     ├── inputBox
+     │     ├── post
+     │     ├── postModal
+     │     ├── product
+     │     ├── tabMenu
+     │     ├── topBanner
+     │     └── userBanner
+     ├── pages
+     │     ├── addProduct
+     │     │     ├── AddProduct.jsx
+     │     │     └── AddProduct.Style.jsx
+     │     ├── chatList
+     │     ├── chatRoom
+     │     ├── emailLogin
+     │     ├── followerList
+     │     ├── followingList
+     │     ├── home
+     │     ├── join
+     │     ├── page404
+     │     ├── postDetail
+     │     ├── postEdit
+     │     ├── postUpload
+     │     ├── productEdit
+     │     ├── profile
+     │     ├── profileEdit
+     │     ├── profileSetting
+     │     ├── search
+     │     ├── snsLogin
+     │     └── splash
+     ├── routes
+     │     ├── privateRoutes.jsx
+     │     └── privateRoutesRev.jsx  
+     └── styles
+           └── Globalstyled.jsx
+```
+
+<br>
+
+## 4. 역할 분담
+
+### 남궁종민
+
+- **UI**
+    - 페이지 : 홈, 검색, 게시글 작성, 게시글 수정, 게시글 상세, 채팅방
+    - 공통 컴포넌트 : 게시글 템플릿, 버튼
+- **기능**
+    - 유저 검색, 게시글 등록 및 수정, 게시글 상세 확인, 댓글 등록, 팔로워 게시글 불러오기, 좋아요 기능
+
+<br>
+    
 ### 박성후
 
-- 알림
-- 친구 초대
+- **UI**
+    - 페이지 : 프로필 설정, 프로필 수정, 팔로잉&팔로워 리스트, 상품 등록, 상품 수정, 채팅 목록, 404 페이지
+    - 공통 컴포넌트 : 탭메뉴, InputBox, Alert 모달, 댓글
+- **기능**
+    - 프로필 설정 및 수정 페이지 유저 아이디 유효성 및 중복 검사, 상품 등록 및 수정
+
+<br>
+
+### 박은영
+
+- **UI**
+    - 페이지 : splash 페이지, sns 로그인 페이지, 로그인, 회원가입
+    - 공통 컴포넌트 : 상품 카드, 사용자 배너
+- **기능**
+    - splash 페이지, sns로그인 페이지, 로그인 유효성 및 중복 검사, 회원가입 유효성 및 중복 검사, 이메일 검증, 프로필 설정, 접근제한 설정
+
+<br>
+
+### 백상원
+
+- **UI**
+    - 페이지 : 사용자 프로필 페이지
+    - 공통 컴포넌트 : 탑배너, 하단 모달창
+- **기능**
+    - 팔로우 & 언팔로우, 로그아웃, 하단 모달창, 댓글 삭제, 게시글 삭제, 상품 삭제, 사용자 게시글 앨범형 이미지, 탑 배너 뒤로가기 버튼, Alert 모달
+ 
+
+<br>
+
+### 정서현
+
+- **UI**
+    - 페이지 : 사용자 프로필 페이지
+    - 공통 컴포넌트 : 탑배너, 하단 모달창
+- **기능**
+    - 팔로우 & 언팔로우, 로그아웃, 하단 모달창, 댓글 삭제, 게시글 삭제, 상품 삭제, 사용자 게시글 앨범형 이미지, 탑 배너 뒤로가기 버튼, Alert 모달
+ 
+<br>
+
+### 백상원
+
+- **UI**
+    - 페이지 : 사용자 프로필 페이지
+    - 공통 컴포넌트 : 탑배너, 하단 모달창
+- **기능**
+    - 팔로우 & 언팔로우, 로그아웃, 하단 모달창, 댓글 삭제, 게시글 삭제, 상품 삭제, 사용자 게시글 앨범형 이미지, 탑 배너 뒤로가기 버튼, Alert 모달
+    
+<br>
+
+## 5. 개발 기간 및 작업 관리
+
+### 개발 기간
+
+- 전체 개발 기간 : 2022-12-09 ~ 2022-12-31
+- UI 구현 : 2022-12-09 ~ 2022-12-16
+- 기능 구현 : 2022-12-17 ~ 2022-12-31
+
+<br>
+
+### 작업 관리
+
+- GitHub Projects와 Issues를 사용하여 진행 상황을 공유했습니다.
+- 주간회의를 진행하며 작업 순서와 방향성에 대한 고민을 나누고 GitHub Wiki에 회의 내용을 기록했습니다.
+
+<br>
+
+## 6. 신경 쓴 부분
+
+- [접근제한 설정](https://github.com/likelion-project-README/README/wiki/README-6.%EC%8B%A0%EA%B2%BD-%EC%93%B4-%EB%B6%80%EB%B6%84_%EC%A0%91%EA%B7%BC%EC%A0%9C%ED%95%9C-%EC%84%A4%EC%A0%95)
+
+- [Recoil을 통한 상태관리 및 유지](https://github.com/likelion-project-README/README/wiki/README-6.%EC%8B%A0%EA%B2%BD-%EC%93%B4-%EB%B6%80%EB%B6%84_Recoil%EC%9D%84-%ED%86%B5%ED%95%9C-%EC%83%81%ED%83%9C%EA%B4%80%EB%A6%AC-%EB%B0%8F-%EC%9C%A0%EC%A7%80)
+
+<br>
+
+## 7. 페이지별 기능
+
+### [초기화면]
+- 서비스 접속 초기화면으로 splash 화면이 잠시 나온 뒤 다음 페이지가 나타납니다.
+    - 로그인이 되어 있지 않은 경우 : SNS 로그인 페이지
+    - 로그인이 되어 있는 경우 : README 홈 화면
+- SNS(카카오톡, 구글, 페이스북) 로그인 기능은 구현되어 있지 않습니다.
+
+| 초기화면 |
+|----------|
+|![splash](https://user-images.githubusercontent.com/112460466/210172920-aef402ed-5aef-4d4a-94b9-2b7147fd8389.gif)|
+
+<br>
+
+### [회원가입]
+- 이메일 주소와 비밀번호를 입력하면 입력창에서 바로 유효성 검사가 진행되고 통과하지 못한 경우 각 경고 문구가 입력창 하단에 표시됩니다.
+- 이메일 주소의 형식이 유효하지 않거나 이미 가입된 이메일일 경우 또는 비밀번호가 6자 미만일 경우에는 각 입력창 하단에 경구 문구가 나타납니다.
+- 작성이 완료된 후, 유효성 검사가 통과된 경우 다음 버튼이 활성화되며, 버튼을 클릭하면 프로필 설정 화면이 나타납니다.
+
+| 회원가입 |
+|----------|
+|![join](https://user-images.githubusercontent.com/112460466/210173571-490f5beb-5791-4a4a-8c5e-510cdcb5f1fe.gif)|
+
+<br>
+
+### [프로필 설정]
+- 회원가입 페이지의 유효성 검사를 통과해야 진입할 수 있습니다.
+- 프로필 설정에 필요한 프로필 사진, 사용자 이름, 계정 ID, 소개를 입력받습니다.
+- 사용자 이름과 계정 ID는 필수 입력사항입니다.
+- 계정 ID에는 형식 및 중복 검사가 진행됩니다.
+- 프로필 사진은 등록하지 않을 경우 기본 이미지가 등록됩니다.
+
+| 프로필 설정 |
+|----------|
+|![setProfile](https://user-images.githubusercontent.com/112460466/210173749-2da6c9af-eb93-4eea-9663-1a03e19299ec.gif)|
+
+<br>
+
+### [로그인]
+- 이메일 주소와 비밀번호를 입력하면 입력창에서 바로 유효성 검사가 진행되고 통과하지 못한 경우 각 경고 문구가 입력창 하단에 표시됩니다.
+- 이메일 주소의 형식이 유효하지 않거나 비밀번호가 6자 미만일 경우에는 각 입력창 하단에 경구 문구가 나타납니다.
+- 작성이 완료된 후, 유효성 검사가 통과된 경우 로그인 버튼이 활성화됩니다.
+- 로그인 버튼 클릭 시 이메일 주소 또는 비밀번호가 일치하지 않을 경우에는 경고 문구가 나타나며, 로그인에 성공하면 홈 피드 화면으로 이동합니다.
+
+| 로그인 |
+|----------|
+|![login](https://user-images.githubusercontent.com/112460466/210177956-c716414e-01c2-4c1e-b1f7-6562b9b7a857.gif)|
+
+<br>
+
+### [로그아웃]
+- 상단 의 kebab menu를 클릭 후 나타나는 모달창의 로그아웃 버튼을 클릭하면 확인창이 뜹니다.
+- 로그아웃시 로컬 저장소의 토큰 값과 사용자 정보를 삭제하고 초기화면으로 이동합니다.
+
+| 로그아웃 |
+|----------|
+|![logout](https://user-images.githubusercontent.com/112460466/210178009-11225733-7af5-4b8b-aa1c-fe264af01797.gif)|
+
+<br>
+
+### [상하단 배너]
+- 상단 배너 : 각 페이지별로 다른 종류의 버튼을 가지고 있습니다.
+    - 뒤로가기 : 브라우저 상에 기록된 이전 페이지로 돌아갑니다.
+    - 검색 : 사용자 검색 페이지로 이동합니다.
+    - 사용자 이름 : 채팅룸 페이지의 경우 상대방의 사용자 이름을 보여줍니다.
+    - kebab menu : 각 페이지 또는 컴포넌트에 따른 하단 모달창을 생성합니다.
+        - 상품, 댓글, 게시글 컴포넌트 - 삭제, 수정, 신고하기
+        - 사용자 프로필 페이지 - 설정 및 사용자 정보, 로그아웃
+- 하단 탭 메뉴 : 홈, 채팅, 게시물 작성, 프로필 아이콘을 클릭하면 각각 홈 피드, 채팅 목록, 게시글 작성 페이지, 내 프로필 페이지로 이동합니다.
+
+| 상하단 배너 |
+|----------|
+|![tab](https://user-images.githubusercontent.com/112460466/210178028-3185f944-6ac1-468a-94ba-b32cdc5e380e.gif)|
+
+<br>
+
+### [홈 피드]
+- 자신이 팔로우 한 유저의 게시글이 최신순으로 보여집니다.
+- 팔로우 한 유저가 없거나, 팔로워의 게시글이 없을 경우 검색 버튼이 표시됩니다.
+- 게시글의 상단 유저 배너 클릭 시 게시글을 작성한 유저의 프로필 페이지로, 본문 클릭 시 게시글 상세 페이지로 이동합니다.
+
+| 팔로우하는 유저가 없을 때 | 팔로우하는 유저가 있을 때 |
+|----------|----------|
+|![home0](https://user-images.githubusercontent.com/112460466/210379059-48900aac-3735-45c6-a249-bc9c41b49414.gif)|![home1](https://user-images.githubusercontent.com/112460466/210379110-49153d27-0405-48e6-adfb-62c7818d2f43.gif)|
+
+<br>
+
+### [검색]
+- 사용자 이름 혹은 계정 ID로 유저를 검색할 수 있습니다.
+- 검색어와 일치하는 단어는 파란색 글씨로 표시됩니다.
+- 클릭 시 해당 유저의 프로필 페이지로 진입합니다.
+
+| 검색 |
+|----------|
+|![search](https://user-images.githubusercontent.com/112460466/210379805-6c8a42c0-0de8-48d3-8f75-cdf0ae5f4fb6.gif)|
+
+<br>
+
+### [프로필]
+
+#### 1. 내 프로필
+- 상단 프로필란에 프로필 수정과 상품 등록 버튼이 나타납니다.
+- 판매중인 상품란에는 사용자가 판매하는 상품이 등록되며, 판매중인 상품이 없을 경우에는 영역 자체가 나타나지 않습니다.
+- 게시글란은 상단의 리스트형과 앨범형 두 개의 버튼을 통해서 나누어 볼 수 있습니다.
+    - 리스트형의 경우, 사용자가 작성한 글 내용과 이미지, 좋아요와 댓글의 수를 보여줍니다.
+    - 앨범형의 경우, 사용자 게시글 중 이미지가 있는 글만 필터링해 바둑판 배열로 보여줍니다.
+- 게시글을 클릭하면 각 게시글의 상세페이지로 이동합니다.
+
+| 리스트형 & 앨범형 게시글 | 팔로잉 & 팔로워 리스트 |
+|----------|----------|
+|![myProfile](https://user-images.githubusercontent.com/112460466/210380492-40560e0b-c306-4e69-8939-cc3e7dc3d8fe.gif)|![followList](https://user-images.githubusercontent.com/112460466/210380539-d09b0bd7-0b61-4b22-85fa-f75e6bcecb68.gif)|
+
+<br>
+
+#### 2. 타 유저의 프로필
+- 버튼을 클릭해 해당 사용자를 팔로우 또는 언팔로우할지 결정할 수 있으며 팔로워 수의 변화가 페이지에 즉시 반영됩니다.
+
+| 팔로우 & 언팔로우 |
+|----------|
+|![yourProfile](https://user-images.githubusercontent.com/112460466/210380853-04f2d2bd-adab-4786-a8e8-c275ce765071.gif)|
+
+<br>
+
+#### 3. 프로필 수정
+- 사용자 프로필 이미지, 이름, 아이디, 소개 중 한 가지를 수정하면 저장 버튼이 활성화됩니다.
+- 계정 ID의 유효한 형식 및 중복 검사를 통과하지 못하면 하단에 경고 문구가 나타나며 저장 버튼이 비활성화됩니다.
+- 사용자 이름과 소개는 공백으로 시작할 수 없습니다.
+- 프로필 수정이 완료되면 내 프로필 페이지로 이동합니다.
+
+| 초기화면 |
+|----------|
+|![editProfile](https://user-images.githubusercontent.com/112460466/210381212-d67fdf87-b90c-4501-a331-f2a384534941.gif)|
+
+<br>
+
+### [게시글]
+
+#### 1. 게시글 작성
+- 글이 입력되거나 사진이 첨부되면 업로드 버튼이 활성화됩니다.
+- 최대 세 장까지 이미지 첨부가 가능하며 첨부한 파일을 취소할 수 있습니다.
+- 게시글 하단에 업로드 날짜가 표시됩니다.
+
+| 게시글 작성 |
+|----------|
+|![uploadPost](https://user-images.githubusercontent.com/112460466/210381758-1de5a889-f587-41d2-b200-22c20a970519.gif)|
+
+<br>
+
+#### 2. 게시글 수정 및 삭제
+- 자신의 게시글일 경우 모달 버튼을 통해 수정, 삭제가 가능합니다.
+- 게시글 삭제 버튼 클릭 시, 게시글을 삭제하고 페이지를 리렌더링하여 삭제된 내용을 페이지에 반영합니다.
+- 타 유저의 게시글일 경우 모달 버튼을 통해 신고할 수 있습니다.
+
+| 게시글 수정 & 삭제 |
+|----------|
+|![editDeletePost](https://user-images.githubusercontent.com/112460466/210382021-da057943-dc21-411e-a1f8-552be0e973bf.gif)|
+
+<br>
+
+#### 3. 좋아요와 댓글
+- 좋아요와 댓글 수는 실시간으로 상세 페이지에 반영됩니다.
+- 댓글이 몇 분 전에 작성되었는지 표시됩니다.
+- 자신의 댓글일 경우 모달 버튼을 통해 삭제가 가능합니다.
+- 타 유저의 댓글일 경우 모달 버튼을 통해 신고할 수 있습니다.
+
+| 좋아요 & 댓글 |
+|----------|
+|![likeComment](https://user-images.githubusercontent.com/112460466/210382217-01d70181-91c3-43db-a1b8-409a612afb1c.gif)|
+
+<br>
+
+### [상품]
+
+#### 1. 상품 등록
+- 상품 이미지, 상품명, 가격, 판매 링크를 필수로 입력해야 저장 버튼이 활성화됩니다.
+- 상품 가격은 숫자만 입력할 수 있으며, 숫자를 입력하면 자동으로 원 단위로 변환됩니다.
+- 상품 가격이 0원일 경우 버튼이 비활성화되며 하단에 경고 문구가 나타납니다.
+- 상품명과 판매 링크는 공백으로 시작할 수 없습니다.
+- 상품 등록이 완료되면 내 프로필 페이지로 이동합니다.
+
+| 상품 등록 |
+|----------|
+|![addProduct](https://user-images.githubusercontent.com/112460466/210386068-c6ff2e05-eb64-4abc-b6dc-93bf52b88d3f.gif)|
+
+<br>
+
+#### 2. 상품 수정 및 삭제
+- 상품 이미지, 상품명, 가격, 판매 링크 중 한 가지를 수정하면 저장 버튼이 활성화됩니다.
+- 상품 수정이 완료되면 내 프로필 페이지로 이동합니다.
+- 상품 삭제 버튼 클릭 시, 상품을 삭제하고 페이지를 리렌더링하여 삭제된 내용을 페이지에 반영합니다.
+
+| 상품 수정 & 삭제 |
+|----------|
+|![editDeleteProduct](https://user-images.githubusercontent.com/112460466/210386311-5fae87a7-745f-47c0-b8e3-fc41c65cb3cb.gif)|
+
+<br>
+
+### [채팅]
+- 채팅 목록에서 아직 읽지 않은 채팅에는 좌측 상단의 파란색 알림을 띄워줍니다.
+- 채팅방에서 메시지를 입력하거나 파일을 업로드하면 전송 버튼이 활성화됩니다.
+- 채팅방에서 우측 상단의 채팅방 나가기 모달 버튼을 통해 채팅 목록 페이지로 이동할 수 있습니다.
+- 채팅 메시지 전송 및 수신 기능은 개발 예정입니다.
+
+| 채팅 |
+|----------|
+|![chat](https://user-images.githubusercontent.com/112460466/210386478-ea4877c5-1728-4872-ab50-a8408ddf6dcd.gif)|
+
+<br>
+
+## 8. 트러블 슈팅
+
+- [탭메뉴 프로필 버튼 이슈](https://github.com/likelion-project-README/README/wiki/README-8.%ED%8A%B8%EB%9F%AC%EB%B8%94-%EC%8A%88%ED%8C%85_%ED%83%AD%EB%A9%94%EB%89%B4-%ED%94%84%EB%A1%9C%ED%95%84-%EB%B2%84%ED%8A%BC-%EC%9D%B4%EC%8A%88)
+
+- [프로필 수정 이슈](https://github.com/likelion-project-README/README/wiki/README-8.%ED%8A%B8%EB%9F%AC%EB%B8%94-%EC%8A%88%ED%8C%85_%ED%94%84%EB%A1%9C%ED%95%84-%EC%88%98%EC%A0%95-%EC%9D%B4%EC%8A%88)
+
+<br>
+
+## 9. 개선 목표
+
+- API 모듈화 : API를 불러오는 코드의 반복이 많아 모듈화할 예정
+- lighthouse Performance 증진
+    - 모든 페이지에서 특히 Best Practices & SEO 점수는 90~100으로 우수
+    - Performance 점수가 대체적으로 미흡한 문제
+    
+    ![KakaoTalk_Photo_2023-01-04-16-55-30](https://user-images.githubusercontent.com/112460466/210591134-09bf8efd-3c34-4b99-a3d7-895ca99e1457.png)
+    
+- **23-01-17 성능 개선 내용**
+    
+    ![성능개선 후](https://user-images.githubusercontent.com/106502312/212872369-7ceeb2cf-d551-41d2-bfb0-01e35e9903fe.png)
+    
+    - 이미지 최적화
+        - `<img>` 요소에 `width` , `height` 속성값을 명시해 불필요한 Reflow를 방지했습니다.
+        - browser-image-compression 라이브러리를 사용해 유저가 업로드하는 이미지를 압축했습니다.
+        - Intersection Observer API를 사용해 Lazy Loading 기법을 적용하여 홈 피드의 게시글 이미지가 viewport 내에 들어오는 순간 로딩되도록 변경했습니다.
+    - 웹폰트 최적화
+        - WOFF2 포맷을 추가하고 가장 우선적으로 적용되도록 선언했습니다.
+        - 서브셋 폰트로 교체해 용량을 줄였습니다.
+    
+<br>
+
+## 10. 프로젝트 후기
 
----
+### 🍊 고지연
 
-### 은영 & 서현
+깃헙을 통한 협업에 익숙해지는 것, 서로 감정 상하지 않고 무사히 마무리하는 것이 1차적인 목표였어서 항상 이 부분을 명심하면서 작업했습니다.
+각자 페이지를 작업하고 합치는 과정에서 마주친 버그들이 몇 있었는데, 시간에 쫓기느라 해결하기에 급급해서 제대로 트러블슈팅 과정을 기록하지 못한 게 살짝 아쉬운 부분으로 남습니다. 그래도 2022년 한 해 동안 가장 치열하게 살았던 한 달인 것 같습니다. 조원들 모두에게 고생했다고 전하고 싶습니다🧡
 
-- 투표 만들기
-    - 투표만들기, 투표 만들기 완료페이지
-- 투표하기
-    - 투표하기, 투표 페이지에서 일정 추가, 지도보기 기능
+<br>
 
-- 여행지 후보 등록
-- 장소 검색, 후보 장소 메모작성, 나의 찜 가져오기, 전체 지역 필터 기능
+### 👻 김민제
 
-- 여행 스페이스 만들기
-    - 여행 날짜 정하기, 여행지 정하기, 완료 페이지
-- 일정 관리
-    - 일정 유무에 따라 보여지는 일정 탭 화면, 지도 확대 기능, 일정 편집 기능, 투표에서 불러오기, 루트 최적화, 장소 검색, 찜목록 검색
+여러모로 많은 것들을 배울 수 있었던 한 달이었습니다. 혼자서는 할 수 없었던 일이라는 것을 너무 잘 알기에 팀원들에게 정말 감사하다는 말 전하고 싶습니다. 개인적으로 아쉬웠던 부분은 기한 내에 기능을 구현하는 데에만 집중하면서 트러블 슈팅이나 새로 배웠던 것들을 체계적으로 기록하지 못했다는 점입니다. 이렇게 느낀 바가 있으니 이후의 제가 잘 정리하면서 개발할 거라 믿습니다… 하하 다들 수고하셨습니다!!!!
 
----
+<br>
 
-### 정민 & 상원
+### 😎 양희지
 
-- gnb
-- 홈화면
-- 검색
-- 상세페이지
-    - 후보장소 등록 기능, 투표만들기 기능, 상품 검색 기능, 찜하기
+팀 프로젝트 시작에 앞서 초기 설정을 진행하며 체계적인 설계의 중요성을 느꼈습니다. 앞으로는 점점 더 체계적이고 효율적으로 프로젝트를 진행할 수 있도록 발전하고 싶습니다.
+정규 수업 직후에 프로젝트를 진행하면서 배운 내용을 직접 구현하는 과정이 어색했지만 어떤 부분이 부족한지 알 수 있는 기회였습니다. 스스로 최대한 노력해보고 팀원들과 함께 해결해 나가면서 협업의 장점을 체감할 수 있었습니다. 하지만 빠르게 작업을 진행하면서 팀원들과 함께 해결한 이슈가 어떤 이슈이며 어떻게 해결했는지에 대해 자세히 작성하지 못한 것이 아쉽습니다.
+’멋쟁이 사자처럼’이라는 같은 목표를 가진 집단에서 프로젝트에 함께할 수 있는 소중한 경험이었습니다. 함께 고생한 조원들 모두 고생하셨습니다! 앞으로도 화이팅해서 함께 목표를 이뤄가고 싶습니다.
 
----
+<br>
 
-### 남궁 & 종민
+### 🐬 지창언
 
-- 리뷰
-- 마이페이지
-- 인증
+컨벤션을 정하는 것부터 Readme 파일 작성까지 전 과정을 진행하려니 처음 생각보다 많은 에너지를 썼어요. 좋은 의미로 많이 썼다기보다, 제 능력을 십분 발휘하지 못해서 아쉬움이 남는 쪽입니다. 개발한다고 개발만 해서는 안 된다는 것을 몸소 느껴보는 기간이었던 것 같습니다. 이번 기회로 프로젝트를 진행하면서, 제가 잘하는 점과 부족한 점을 확실하게 알고 가는 건 정말 좋습니다. 기술적인 부분에 있어서는 리액트의 컴포넌트화가 주는 장점을 알았습니다. 조금 느린 개발이 되었을지라도 코드 가독성 부분에 있어서 좋았고, 오류가 발생해도 전체가 아닌 오류가 난 컴포넌트와 근접한 컴포넌트만 살펴보면 수정할 수 있는 부분이 너무 편했습니다. 모두 고생 참 많으셨고 리팩토링을 통해 더 나은 프로젝트 완성까지 화이팅입니다.

From 222f78182baabaf48e8e0af3131aa2d007549b63 Mon Sep 17 00:00:00 2001
From: Sung Hoo <120024673+HOOOO98@users.noreply.github.com>
Date: Mon, 29 Jan 2024 00:02:09 +0900
Subject: [PATCH 2/6] Update README.md

---
 README.md | 104 ++++++++++++++----------------------------------------
 1 file changed, 26 insertions(+), 78 deletions(-)

diff --git a/README.md b/README.md
index ea1e28d1..a6d47ea7 100644
--- a/README.md
+++ b/README.md
@@ -36,7 +36,7 @@
 - Back-end : TourAPI, Java Springboot3
 - 버전 및 이슈관리 : Github, Github Issues, Github Project
 - 협업 툴 : Discord, Notion, Slack
-- 서비스 배포 환경 : Vercel. Github CI
+- 서비스 배포 환경 : Vercel, Github Action
 - 디자인 : [Figma](https://www.figma.com/file/ypTLv92s72sihUApnxjP5C/%EA%B0%95%EC%9E%90%EB%B0%AD-%ED%94%BC%EA%B7%B8%EB%A7%88?type=design&node-id=40%3A3&mode=design&t=uYBOpmiZcAjXWHWQ-1)
 <br>
 
@@ -44,13 +44,12 @@
 
 ### React, SCSS
 
-- React
+- React(Vite)
     - 컴포넌트화를 통해 추후 유지보수와 재사용성을 고려했습니다.
-    - 유저 배너, 상단과 하단 배너 등 중복되어 사용되는 부분이 많아 컴포넌트화를 통해 리소스 절약이 가능했습니다.
-- styled-component
-    - props를 이용한 조건부 스타일링을 활용하여 상황에 알맞은 스타일을 적용시킬 수 있었습니다.
-    - 빌드될 때 고유한 클래스 이름이 부여되어 네이밍 컨벤션을 정하는 비용을 절약할 수 있었습니다.
-    - S dot naming을 통해 일반 컴포넌트와 스타일드 컴포넌트를 쉽게 구별하도록 했습니다.
+    - 커스텀 훅과 유틸 함수를 사용하여 일관된 데이터를 사용할 수 있도록 노력했습니다.
+- SCSS
+    - module.scss를 사용해서 className의 네이밍 컨벤션을 정하는 비용을 절약할 수 있었습니다.
+    - BEM 방법론을 도입하여 컴포넌트 구조를 좀 더 쉽게 파악할 수 있도록 했습니다.
     
 ### Recoil
 
@@ -58,101 +57,50 @@
 - Redux가 아닌 Recoil을 채택한 이유
     - Recoil은 React만을 위한 라이브러리로, 사용법도 기존의 useState 훅을 사용하는 방식과 유사해 학습비용을 낮출 수 있었습니다.
     - 또한 Redux보다 훨씬 적은 코드라인으로 작동 가능하다는 장점이 있었습니다.
-- 로그인과 최초 프로필 설정 시 유저 정보를 atom에 저장하여 필요한 컴포넌트에서 구독하는 방식으로 사용했습니다.
 
 ### eslint, prettier
 
 - 정해진 규칙에 따라 자동적으로 코드 스타일을 정리해 코드의 일관성을 유지하고자 했습니다.
 - 코드 품질 관리는 eslint에, 코드 포맷팅은 prettier에 일임해 사용했습니다.
-- airbnb의 코딩 컨벤션을 참고해 사용했고, 예외 규칙은 팀원들과 협의했습니다.
 - 협업 시 매번 컨벤션을 신경 쓸 필요 없이 빠르게 개발하는 데에 목적을 두었습니다.
 
 ### MSW
 
+- 기획, 디자인이 완료되어 렌더링에 필요한 데이터를 명세를 통해 정하고, 이를 바탕으로 API를 mocking하여 사용할 수 있었습니다.
+- BackEnd에서 API를 제공해주는 시점 전에도 미리 API 연결을 통해 미리 화면을 구성하여 작업을 진행할 수 있었습니다.
 
 
 ### Jest
 
-
+- 유틸 함수를 테스트하여 일관된 데이터가 도출 되는지 확인하여, 변칙적인 상황을 줄였습니다. 
 
 ### 브랜치 전략
 
-- Git-flow 전략을 기반으로 main, develop 브랜치와 feature 보조 브랜치를 운용했습니다.
+- Git-flow 전략을 기반으로 main, dev 브랜치로 버전을 관리하였고, Git issue를 통해 브랜치를 생성하여 이슈단위로 기능을 개발했습니다.
 - main, develop, Feat 브랜치로 나누어 개발을 하였습니다.
     - **main** 브랜치는 배포 단계에서만 사용하는 브랜치입니다.
     - **develop** 브랜치는 개발 단계에서 git-flow의 master 역할을 하는 브랜치입니다.
-    - **Feat** 브랜치는 기능 단위로 독립적인 개발 환경을 위하여 사용하고 merge 후 각 브랜치를 삭제해주었습니다.
-
+    - **Feat** 브랜치는 기능 단위로 독립적인 개발 환경을 위하여 사용하고 PR merge 후 각 브랜치를 자동 삭제해주었습니다.
+-  Github actions에 CI를 적용하여 빌드 및 시작에 오류가 없는지 테스트하고 그 결과를 PR 상태에 반영했습니다.
 <br>
 
 ## 3. 프로젝트 구조
 
 ```
-├── README.md
-├── .eslintrc.js
-├── .gitignore
-├── .prettierrc.json
-├── package-lock.json
-├── package.json
-│
-├── public
-│    └── index.html
-└── src
-     ├── App.jsx
-     ├── index.jsx
-     ├── api
-     │     └── mandarinAPI.js
-     ├── asset
-     │     ├── fonts
-     │     ├── css_sprites.png
-     │     ├── logo-404.svg
-     │     └── logo-home.svg
-     │          .
-     │          .
-     │          .
-     ├── atoms
-     │     ├── LoginData.js
-     │     └── LoginState.js
-     ├── common
-     │     ├── alert
-     │     │     ├── Alert.jsx
-     │     │     └── Alert.Style.jsx
-     │     ├── button
-     │     ├── comment
-     │     ├── inputBox
-     │     ├── post
-     │     ├── postModal
-     │     ├── product
-     │     ├── tabMenu
-     │     ├── topBanner
-     │     └── userBanner
-     ├── pages
-     │     ├── addProduct
-     │     │     ├── AddProduct.jsx
-     │     │     └── AddProduct.Style.jsx
-     │     ├── chatList
-     │     ├── chatRoom
-     │     ├── emailLogin
-     │     ├── followerList
-     │     ├── followingList
-     │     ├── home
-     │     ├── join
-     │     ├── page404
-     │     ├── postDetail
-     │     ├── postEdit
-     │     ├── postUpload
-     │     ├── productEdit
-     │     ├── profile
-     │     ├── profileEdit
-     │     ├── profileSetting
-     │     ├── search
-     │     ├── snsLogin
-     │     └── splash
-     ├── routes
-     │     ├── privateRoutes.jsx
-     │     └── privateRoutesRev.jsx  
-     └── styles
-           └── Globalstyled.jsx
+📦src
+ ┣ 📂api
+ ┣ 📂assets
+ ┣ 📂chakra
+ ┣ 📂components
+ ┣ 📂firebase
+ ┣ 📂hooks
+ ┣ 📂mocks
+ ┣ 📂pages
+ ┣ 📂recoil
+ ┣ 📂routes
+ ┣ 📂sass
+ ┣ 📂types
+ ┗ 📂utils
 ```
 
 <br>

From 324be3bf225c74b95637bab36fe0fe4bafe8abd7 Mon Sep 17 00:00:00 2001
From: Sung Hoo <120024673+HOOOO98@users.noreply.github.com>
Date: Mon, 29 Jan 2024 03:17:47 +0900
Subject: [PATCH 3/6] Update README.md

---
 README.md | 285 +++++++-----------------------------------------------
 1 file changed, 36 insertions(+), 249 deletions(-)

diff --git a/README.md b/README.md
index a6d47ea7..b2853a08 100644
--- a/README.md
+++ b/README.md
@@ -11,7 +11,7 @@
 
 ## 프로젝트 소개
 
-- TRIPVOTE는 일행과 함꼐 여행일정을 만들어 갈 수 있는 서비스입니다.
+- TRIPVOTE는 일행과 함께 여행일정을 만들어 갈 수 있는 서비스입니다.
 - 여행 스페이스를 만들고 투표와 일정을 등록할 수 있습니다.
 - 검색을 통해서 장소를 찾고, 투표와 일정에 등록시킬 수 있습니다.
 - 일행과 함께 투표에 참여하여 일정을 정해볼 수 있습니다.
@@ -108,42 +108,37 @@
 ## 4. 역할 분담
 
 ### 남궁종민
-
 - **UI**
-    - 페이지 : 홈, 검색, 게시글 작성, 게시글 수정, 게시글 상세, 채팅방
-    - 공통 컴포넌트 : 게시글 템플릿, 버튼
+    - 마이페이지 , 로그인 , 회원가입
 - **기능**
-    - 유저 검색, 게시글 등록 및 수정, 게시글 상세 확인, 댓글 등록, 팔로워 게시글 불러오기, 좋아요 기능
+  -  비밀번호 변경 , 재발급 , 회원 가입 , 로그인 , 소셜 로그인 , 회원 탈퇴 , 프로필 변경 
 
 <br>
     
 ### 박성후
 
 - **UI**
-    - 페이지 : 프로필 설정, 프로필 수정, 팔로잉&팔로워 리스트, 상품 등록, 상품 수정, 채팅 목록, 404 페이지
-    - 공통 컴포넌트 : 탭메뉴, InputBox, Alert 모달, 댓글
+    - 사이드바 , 알림
 - **기능**
-    - 프로필 설정 및 수정 페이지 유저 아이디 유효성 및 중복 검사, 상품 등록 및 수정
+    - 푸시알림 , 카카오톡 초대
 
 <br>
 
 ### 박은영
 
 - **UI**
-    - 페이지 : splash 페이지, sns 로그인 페이지, 로그인, 회원가입
-    - 공통 컴포넌트 : 상품 카드, 사용자 배너
+    - 투표
 - **기능**
-    - splash 페이지, sns로그인 페이지, 로그인 유효성 및 중복 검사, 회원가입 유효성 및 중복 검사, 이메일 검증, 프로필 설정, 접근제한 설정
+    - 투표만들기 , 투표하기 , 투표 페이지에서 일정 추가, 지도보기 , 여행지 후보 등록 , 후보 장소 메모작성 , 나의 찜 가져오기, 전체 지역 필터 기능
 
 <br>
 
 ### 백상원
 
 - **UI**
-    - 페이지 : 사용자 프로필 페이지
-    - 공통 컴포넌트 : 탑배너, 하단 모달창
+    - gnb , 온보딩 , 장소 검색 , 지도
 - **기능**
-    - 팔로우 & 언팔로우, 로그아웃, 하단 모달창, 댓글 삭제, 게시글 삭제, 상품 삭제, 사용자 게시글 앨범형 이미지, 탑 배너 뒤로가기 버튼, Alert 모달
+    - 홈페이지 리스팅 , 검색 인기 장소 리스팅 , 장소 검색 지도
  
 
 <br>
@@ -151,311 +146,103 @@
 ### 정서현
 
 - **UI**
-    - 페이지 : 사용자 프로필 페이지
-    - 공통 컴포넌트 : 탑배너, 하단 모달창
+    - 여행 스페이스
 - **기능**
-    - 팔로우 & 언팔로우, 로그아웃, 하단 모달창, 댓글 삭제, 게시글 삭제, 상품 삭제, 사용자 게시글 앨범형 이미지, 탑 배너 뒤로가기 버튼, Alert 모달
+    - 여행 날짜 정하기 , 여행지 정하기 , 일정 탭 화면 , 지도 확대 기능 , 일정 편집 기능 , 투표에서 불러오기 , 루트 최적화 , 장소 검색 , 찜목록 검색
  
 <br>
 
-### 백상원
+### 진정민
 
 - **UI**
-    - 페이지 : 사용자 프로필 페이지
-    - 공통 컴포넌트 : 탑배너, 하단 모달창
+    - 상세페이지 , 리뷰 , 찜
 - **기능**
-    - 팔로우 & 언팔로우, 로그아웃, 하단 모달창, 댓글 삭제, 게시글 삭제, 상품 삭제, 사용자 게시글 앨범형 이미지, 탑 배너 뒤로가기 버튼, Alert 모달
+    - 찜하기 , 리뷰쓰기 , 리뷰수정 , 후보 등록하기 , 주변 다른 숙소
     
 <br>
 
 ## 5. 개발 기간 및 작업 관리
 
-### 개발 기간
+### 프로젝트 기간
 
-- 전체 개발 기간 : 2022-12-09 ~ 2022-12-31
-- UI 구현 : 2022-12-09 ~ 2022-12-16
-- 기능 구현 : 2022-12-17 ~ 2022-12-31
+- 전체 기간 : 2023-12-04 ~ 2024-01-29
+- 기획 / UI  : 2023-12-04 ~ 2024-01-05
+- 기능 구현 : 2024-01-05 ~ 2024-01-29
 
 <br>
 
 ### 작업 관리
 
 - GitHub Projects와 Issues를 사용하여 진행 상황을 공유했습니다.
-- 주간회의를 진행하며 작업 순서와 방향성에 대한 고민을 나누고 GitHub Wiki에 회의 내용을 기록했습니다.
+- 주간회의를 진행하고 각자의 작업 상황을 공유했습니다.
+- 노션에는 정해진 컨벤션을 정리하고, 슬랙으로는 전체적인 공지를 확인하고, 디스크드에 깃허브 웹훅을 사용해 PR의 생명주기를 단축시켰습니다. 
 
 <br>
 
 ## 6. 신경 쓴 부분
 
-- [접근제한 설정](https://github.com/likelion-project-README/README/wiki/README-6.%EC%8B%A0%EA%B2%BD-%EC%93%B4-%EB%B6%80%EB%B6%84_%EC%A0%91%EA%B7%BC%EC%A0%9C%ED%95%9C-%EC%84%A4%EC%A0%95)
-
-- [Recoil을 통한 상태관리 및 유지](https://github.com/likelion-project-README/README/wiki/README-6.%EC%8B%A0%EA%B2%BD-%EC%93%B4-%EB%B6%80%EB%B6%84_Recoil%EC%9D%84-%ED%86%B5%ED%95%9C-%EC%83%81%ED%83%9C%EA%B4%80%EB%A6%AC-%EB%B0%8F-%EC%9C%A0%EC%A7%80)
+-
+- 
 
 <br>
 
 ## 7. 페이지별 기능
 
-### [초기화면]
-- 서비스 접속 초기화면으로 splash 화면이 잠시 나온 뒤 다음 페이지가 나타납니다.
-    - 로그인이 되어 있지 않은 경우 : SNS 로그인 페이지
-    - 로그인이 되어 있는 경우 : README 홈 화면
-- SNS(카카오톡, 구글, 페이스북) 로그인 기능은 구현되어 있지 않습니다.
-
-| 초기화면 |
-|----------|
-|![splash](https://user-images.githubusercontent.com/112460466/210172920-aef402ed-5aef-4d4a-94b9-2b7147fd8389.gif)|
-
-<br>
-
-### [회원가입]
-- 이메일 주소와 비밀번호를 입력하면 입력창에서 바로 유효성 검사가 진행되고 통과하지 못한 경우 각 경고 문구가 입력창 하단에 표시됩니다.
-- 이메일 주소의 형식이 유효하지 않거나 이미 가입된 이메일일 경우 또는 비밀번호가 6자 미만일 경우에는 각 입력창 하단에 경구 문구가 나타납니다.
-- 작성이 완료된 후, 유효성 검사가 통과된 경우 다음 버튼이 활성화되며, 버튼을 클릭하면 프로필 설정 화면이 나타납니다.
-
-| 회원가입 |
-|----------|
-|![join](https://user-images.githubusercontent.com/112460466/210173571-490f5beb-5791-4a4a-8c5e-510cdcb5f1fe.gif)|
-
-<br>
-
-### [프로필 설정]
-- 회원가입 페이지의 유효성 검사를 통과해야 진입할 수 있습니다.
-- 프로필 설정에 필요한 프로필 사진, 사용자 이름, 계정 ID, 소개를 입력받습니다.
-- 사용자 이름과 계정 ID는 필수 입력사항입니다.
-- 계정 ID에는 형식 및 중복 검사가 진행됩니다.
-- 프로필 사진은 등록하지 않을 경우 기본 이미지가 등록됩니다.
-
-| 프로필 설정 |
-|----------|
-|![setProfile](https://user-images.githubusercontent.com/112460466/210173749-2da6c9af-eb93-4eea-9663-1a03e19299ec.gif)|
-
-<br>
-
-### [로그인]
-- 이메일 주소와 비밀번호를 입력하면 입력창에서 바로 유효성 검사가 진행되고 통과하지 못한 경우 각 경고 문구가 입력창 하단에 표시됩니다.
-- 이메일 주소의 형식이 유효하지 않거나 비밀번호가 6자 미만일 경우에는 각 입력창 하단에 경구 문구가 나타납니다.
-- 작성이 완료된 후, 유효성 검사가 통과된 경우 로그인 버튼이 활성화됩니다.
-- 로그인 버튼 클릭 시 이메일 주소 또는 비밀번호가 일치하지 않을 경우에는 경고 문구가 나타나며, 로그인에 성공하면 홈 피드 화면으로 이동합니다.
-
-| 로그인 |
-|----------|
-|![login](https://user-images.githubusercontent.com/112460466/210177956-c716414e-01c2-4c1e-b1f7-6562b9b7a857.gif)|
-
-<br>
-
-### [로그아웃]
-- 상단 의 kebab menu를 클릭 후 나타나는 모달창의 로그아웃 버튼을 클릭하면 확인창이 뜹니다.
-- 로그아웃시 로컬 저장소의 토큰 값과 사용자 정보를 삭제하고 초기화면으로 이동합니다.
-
-| 로그아웃 |
-|----------|
-|![logout](https://user-images.githubusercontent.com/112460466/210178009-11225733-7af5-4b8b-aa1c-fe264af01797.gif)|
-
-<br>
-
-### [상하단 배너]
-- 상단 배너 : 각 페이지별로 다른 종류의 버튼을 가지고 있습니다.
-    - 뒤로가기 : 브라우저 상에 기록된 이전 페이지로 돌아갑니다.
-    - 검색 : 사용자 검색 페이지로 이동합니다.
-    - 사용자 이름 : 채팅룸 페이지의 경우 상대방의 사용자 이름을 보여줍니다.
-    - kebab menu : 각 페이지 또는 컴포넌트에 따른 하단 모달창을 생성합니다.
-        - 상품, 댓글, 게시글 컴포넌트 - 삭제, 수정, 신고하기
-        - 사용자 프로필 페이지 - 설정 및 사용자 정보, 로그아웃
-- 하단 탭 메뉴 : 홈, 채팅, 게시물 작성, 프로필 아이콘을 클릭하면 각각 홈 피드, 채팅 목록, 게시글 작성 페이지, 내 프로필 페이지로 이동합니다.
-
-| 상하단 배너 |
-|----------|
-|![tab](https://user-images.githubusercontent.com/112460466/210178028-3185f944-6ac1-468a-94ba-b32cdc5e380e.gif)|
-
-<br>
-
-### [홈 피드]
-- 자신이 팔로우 한 유저의 게시글이 최신순으로 보여집니다.
-- 팔로우 한 유저가 없거나, 팔로워의 게시글이 없을 경우 검색 버튼이 표시됩니다.
-- 게시글의 상단 유저 배너 클릭 시 게시글을 작성한 유저의 프로필 페이지로, 본문 클릭 시 게시글 상세 페이지로 이동합니다.
-
-| 팔로우하는 유저가 없을 때 | 팔로우하는 유저가 있을 때 |
-|----------|----------|
-|![home0](https://user-images.githubusercontent.com/112460466/210379059-48900aac-3735-45c6-a249-bc9c41b49414.gif)|![home1](https://user-images.githubusercontent.com/112460466/210379110-49153d27-0405-48e6-adfb-62c7818d2f43.gif)|
-
-<br>
-
-### [검색]
-- 사용자 이름 혹은 계정 ID로 유저를 검색할 수 있습니다.
-- 검색어와 일치하는 단어는 파란색 글씨로 표시됩니다.
-- 클릭 시 해당 유저의 프로필 페이지로 진입합니다.
-
-| 검색 |
-|----------|
-|![search](https://user-images.githubusercontent.com/112460466/210379805-6c8a42c0-0de8-48d3-8f75-cdf0ae5f4fb6.gif)|
-
-<br>
-
-### [프로필]
 
-#### 1. 내 프로필
-- 상단 프로필란에 프로필 수정과 상품 등록 버튼이 나타납니다.
-- 판매중인 상품란에는 사용자가 판매하는 상품이 등록되며, 판매중인 상품이 없을 경우에는 영역 자체가 나타나지 않습니다.
-- 게시글란은 상단의 리스트형과 앨범형 두 개의 버튼을 통해서 나누어 볼 수 있습니다.
-    - 리스트형의 경우, 사용자가 작성한 글 내용과 이미지, 좋아요와 댓글의 수를 보여줍니다.
-    - 앨범형의 경우, 사용자 게시글 중 이미지가 있는 글만 필터링해 바둑판 배열로 보여줍니다.
-- 게시글을 클릭하면 각 게시글의 상세페이지로 이동합니다.
-
-| 리스트형 & 앨범형 게시글 | 팔로잉 & 팔로워 리스트 |
-|----------|----------|
-|![myProfile](https://user-images.githubusercontent.com/112460466/210380492-40560e0b-c306-4e69-8939-cc3e7dc3d8fe.gif)|![followList](https://user-images.githubusercontent.com/112460466/210380539-d09b0bd7-0b61-4b22-85fa-f75e6bcecb68.gif)|
 
 <br>
 
-#### 2. 타 유저의 프로필
-- 버튼을 클릭해 해당 사용자를 팔로우 또는 언팔로우할지 결정할 수 있으며 팔로워 수의 변화가 페이지에 즉시 반영됩니다.
-
-| 팔로우 & 언팔로우 |
-|----------|
-|![yourProfile](https://user-images.githubusercontent.com/112460466/210380853-04f2d2bd-adab-4786-a8e8-c275ce765071.gif)|
-
-<br>
+## 8. 트러블 슈팅
 
-#### 3. 프로필 수정
-- 사용자 프로필 이미지, 이름, 아이디, 소개 중 한 가지를 수정하면 저장 버튼이 활성화됩니다.
-- 계정 ID의 유효한 형식 및 중복 검사를 통과하지 못하면 하단에 경고 문구가 나타나며 저장 버튼이 비활성화됩니다.
-- 사용자 이름과 소개는 공백으로 시작할 수 없습니다.
-- 프로필 수정이 완료되면 내 프로필 페이지로 이동합니다.
 
-| 초기화면 |
-|----------|
-|![editProfile](https://user-images.githubusercontent.com/112460466/210381212-d67fdf87-b90c-4501-a331-f2a384534941.gif)|
 
 <br>
 
-### [게시글]
-
-#### 1. 게시글 작성
-- 글이 입력되거나 사진이 첨부되면 업로드 버튼이 활성화됩니다.
-- 최대 세 장까지 이미지 첨부가 가능하며 첨부한 파일을 취소할 수 있습니다.
-- 게시글 하단에 업로드 날짜가 표시됩니다.
-
-| 게시글 작성 |
-|----------|
-|![uploadPost](https://user-images.githubusercontent.com/112460466/210381758-1de5a889-f587-41d2-b200-22c20a970519.gif)|
+## 9. 개선 목표
 
+- **목표**
+    
+- **2024-00-00 성능 개선 내용**
+    
+    
 <br>
 
-#### 2. 게시글 수정 및 삭제
-- 자신의 게시글일 경우 모달 버튼을 통해 수정, 삭제가 가능합니다.
-- 게시글 삭제 버튼 클릭 시, 게시글을 삭제하고 페이지를 리렌더링하여 삭제된 내용을 페이지에 반영합니다.
-- 타 유저의 게시글일 경우 모달 버튼을 통해 신고할 수 있습니다.
-
-| 게시글 수정 & 삭제 |
-|----------|
-|![editDeletePost](https://user-images.githubusercontent.com/112460466/210382021-da057943-dc21-411e-a1f8-552be0e973bf.gif)|
+## 10. 프로젝트 후기
 
-<br>
+###  남궁종민
 
-#### 3. 좋아요와 댓글
-- 좋아요와 댓글 수는 실시간으로 상세 페이지에 반영됩니다.
-- 댓글이 몇 분 전에 작성되었는지 표시됩니다.
-- 자신의 댓글일 경우 모달 버튼을 통해 삭제가 가능합니다.
-- 타 유저의 댓글일 경우 모달 버튼을 통해 신고할 수 있습니다.
 
-| 좋아요 & 댓글 |
-|----------|
-|![likeComment](https://user-images.githubusercontent.com/112460466/210382217-01d70181-91c3-43db-a1b8-409a612afb1c.gif)|
 
 <br>
 
-### [상품]
+### 박성후
 
-#### 1. 상품 등록
-- 상품 이미지, 상품명, 가격, 판매 링크를 필수로 입력해야 저장 버튼이 활성화됩니다.
-- 상품 가격은 숫자만 입력할 수 있으며, 숫자를 입력하면 자동으로 원 단위로 변환됩니다.
-- 상품 가격이 0원일 경우 버튼이 비활성화되며 하단에 경고 문구가 나타납니다.
-- 상품명과 판매 링크는 공백으로 시작할 수 없습니다.
-- 상품 등록이 완료되면 내 프로필 페이지로 이동합니다.
 
-| 상품 등록 |
-|----------|
-|![addProduct](https://user-images.githubusercontent.com/112460466/210386068-c6ff2e05-eb64-4abc-b6dc-93bf52b88d3f.gif)|
 
 <br>
 
-#### 2. 상품 수정 및 삭제
-- 상품 이미지, 상품명, 가격, 판매 링크 중 한 가지를 수정하면 저장 버튼이 활성화됩니다.
-- 상품 수정이 완료되면 내 프로필 페이지로 이동합니다.
-- 상품 삭제 버튼 클릭 시, 상품을 삭제하고 페이지를 리렌더링하여 삭제된 내용을 페이지에 반영합니다.
-
-| 상품 수정 & 삭제 |
-|----------|
-|![editDeleteProduct](https://user-images.githubusercontent.com/112460466/210386311-5fae87a7-745f-47c0-b8e3-fc41c65cb3cb.gif)|
-
-<br>
+### 박은영
 
-### [채팅]
-- 채팅 목록에서 아직 읽지 않은 채팅에는 좌측 상단의 파란색 알림을 띄워줍니다.
-- 채팅방에서 메시지를 입력하거나 파일을 업로드하면 전송 버튼이 활성화됩니다.
-- 채팅방에서 우측 상단의 채팅방 나가기 모달 버튼을 통해 채팅 목록 페이지로 이동할 수 있습니다.
-- 채팅 메시지 전송 및 수신 기능은 개발 예정입니다.
 
-| 채팅 |
-|----------|
-|![chat](https://user-images.githubusercontent.com/112460466/210386478-ea4877c5-1728-4872-ab50-a8408ddf6dcd.gif)|
 
 <br>
 
-## 8. 트러블 슈팅
+### 백상원
 
-- [탭메뉴 프로필 버튼 이슈](https://github.com/likelion-project-README/README/wiki/README-8.%ED%8A%B8%EB%9F%AC%EB%B8%94-%EC%8A%88%ED%8C%85_%ED%83%AD%EB%A9%94%EB%89%B4-%ED%94%84%EB%A1%9C%ED%95%84-%EB%B2%84%ED%8A%BC-%EC%9D%B4%EC%8A%88)
 
-- [프로필 수정 이슈](https://github.com/likelion-project-README/README/wiki/README-8.%ED%8A%B8%EB%9F%AC%EB%B8%94-%EC%8A%88%ED%8C%85_%ED%94%84%EB%A1%9C%ED%95%84-%EC%88%98%EC%A0%95-%EC%9D%B4%EC%8A%88)
 
 <br>
 
-## 9. 개선 목표
-
-- API 모듈화 : API를 불러오는 코드의 반복이 많아 모듈화할 예정
-- lighthouse Performance 증진
-    - 모든 페이지에서 특히 Best Practices & SEO 점수는 90~100으로 우수
-    - Performance 점수가 대체적으로 미흡한 문제
-    
-    ![KakaoTalk_Photo_2023-01-04-16-55-30](https://user-images.githubusercontent.com/112460466/210591134-09bf8efd-3c34-4b99-a3d7-895ca99e1457.png)
-    
-- **23-01-17 성능 개선 내용**
-    
-    ![성능개선 후](https://user-images.githubusercontent.com/106502312/212872369-7ceeb2cf-d551-41d2-bfb0-01e35e9903fe.png)
-    
-    - 이미지 최적화
-        - `<img>` 요소에 `width` , `height` 속성값을 명시해 불필요한 Reflow를 방지했습니다.
-        - browser-image-compression 라이브러리를 사용해 유저가 업로드하는 이미지를 압축했습니다.
-        - Intersection Observer API를 사용해 Lazy Loading 기법을 적용하여 홈 피드의 게시글 이미지가 viewport 내에 들어오는 순간 로딩되도록 변경했습니다.
-    - 웹폰트 최적화
-        - WOFF2 포맷을 추가하고 가장 우선적으로 적용되도록 선언했습니다.
-        - 서브셋 폰트로 교체해 용량을 줄였습니다.
-    
-<br>
-
-## 10. 프로젝트 후기
+### 정서현
 
-### 🍊 고지연
 
-깃헙을 통한 협업에 익숙해지는 것, 서로 감정 상하지 않고 무사히 마무리하는 것이 1차적인 목표였어서 항상 이 부분을 명심하면서 작업했습니다.
-각자 페이지를 작업하고 합치는 과정에서 마주친 버그들이 몇 있었는데, 시간에 쫓기느라 해결하기에 급급해서 제대로 트러블슈팅 과정을 기록하지 못한 게 살짝 아쉬운 부분으로 남습니다. 그래도 2022년 한 해 동안 가장 치열하게 살았던 한 달인 것 같습니다. 조원들 모두에게 고생했다고 전하고 싶습니다🧡
 
 <br>
 
-### 👻 김민제
-
-여러모로 많은 것들을 배울 수 있었던 한 달이었습니다. 혼자서는 할 수 없었던 일이라는 것을 너무 잘 알기에 팀원들에게 정말 감사하다는 말 전하고 싶습니다. 개인적으로 아쉬웠던 부분은 기한 내에 기능을 구현하는 데에만 집중하면서 트러블 슈팅이나 새로 배웠던 것들을 체계적으로 기록하지 못했다는 점입니다. 이렇게 느낀 바가 있으니 이후의 제가 잘 정리하면서 개발할 거라 믿습니다… 하하 다들 수고하셨습니다!!!!
-
-<br>
+### 진정민
 
-### 😎 양희지
 
-팀 프로젝트 시작에 앞서 초기 설정을 진행하며 체계적인 설계의 중요성을 느꼈습니다. 앞으로는 점점 더 체계적이고 효율적으로 프로젝트를 진행할 수 있도록 발전하고 싶습니다.
-정규 수업 직후에 프로젝트를 진행하면서 배운 내용을 직접 구현하는 과정이 어색했지만 어떤 부분이 부족한지 알 수 있는 기회였습니다. 스스로 최대한 노력해보고 팀원들과 함께 해결해 나가면서 협업의 장점을 체감할 수 있었습니다. 하지만 빠르게 작업을 진행하면서 팀원들과 함께 해결한 이슈가 어떤 이슈이며 어떻게 해결했는지에 대해 자세히 작성하지 못한 것이 아쉽습니다.
-’멋쟁이 사자처럼’이라는 같은 목표를 가진 집단에서 프로젝트에 함께할 수 있는 소중한 경험이었습니다. 함께 고생한 조원들 모두 고생하셨습니다! 앞으로도 화이팅해서 함께 목표를 이뤄가고 싶습니다.
 
 <br>
 
-### 🐬 지창언
 
-컨벤션을 정하는 것부터 Readme 파일 작성까지 전 과정을 진행하려니 처음 생각보다 많은 에너지를 썼어요. 좋은 의미로 많이 썼다기보다, 제 능력을 십분 발휘하지 못해서 아쉬움이 남는 쪽입니다. 개발한다고 개발만 해서는 안 된다는 것을 몸소 느껴보는 기간이었던 것 같습니다. 이번 기회로 프로젝트를 진행하면서, 제가 잘하는 점과 부족한 점을 확실하게 알고 가는 건 정말 좋습니다. 기술적인 부분에 있어서는 리액트의 컴포넌트화가 주는 장점을 알았습니다. 조금 느린 개발이 되었을지라도 코드 가독성 부분에 있어서 좋았고, 오류가 발생해도 전체가 아닌 오류가 난 컴포넌트와 근접한 컴포넌트만 살펴보면 수정할 수 있는 부분이 너무 편했습니다. 모두 고생 참 많으셨고 리팩토링을 통해 더 나은 프로젝트 완성까지 화이팅입니다.

From 2dd843e277802b39e1b1ee15d834e746b4261279 Mon Sep 17 00:00:00 2001
From: Sung Hoo <120024673+HOOOO98@users.noreply.github.com>
Date: Tue, 30 Jan 2024 14:01:39 +0900
Subject: [PATCH 4/6] Update README.md

---
 README.md | 46 ++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 42 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index b2853a08..e7602df0 100644
--- a/README.md
+++ b/README.md
@@ -181,20 +181,58 @@
 
 ## 6. 신경 쓴 부분
 
--
-- 
+- React-Query
+    - 의존적 쿼리 키 : 쿼리 키를 사용해서 데이터 가져오기 요청을 최적화했습니다. 쿼리 키가 변경될 때 마다 새롭게 데이터를 업데이트를 할 수 있어 불필요한 재요청을 방지할 수 있습니다.
+    - 로딩, 에러 처리 : 데이터가 도착하기 전 상태를 자동으로 감지하여 수동으로 코드를 적용하지 않았습니다. 또한 에러를 자동으로 감지하기 때문에 에러 바운더리를 정해 컴포넌트 렌더링 최적화를 위해 노력했습니다.
+- Proxy
+    - 프록시 서버를 사용하여 개발 환경 및 배포 환경에서 발생하는 CORS 문제를 해결했습니다.
+    - 보안과 개발자 경험을 향상시키기 위해 노력했습니다.
 
 <br>
 
-## 7. 페이지별 기능
-
+## 7. 시연영상
 
+[![Video Label](https://i.ytimg.com/vi/bfKGZHpvXsc/hq720.jpg?sqp=-oaymwEcCNAFEJQDSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLA_JSsy52DV0U5jdfOjhp5_iYFVvw)](https://www.youtube.com/watch?v=bfKGZHpvXsc)
 
 <br>
 
 ## 8. 트러블 슈팅
 
+###  남궁종민
+
+
+
+<br>
+
+### 박성후
+
+
+
+<br>
+
+### 박은영
+
+
+
+<br>
 
+### 백상원
+
+
+
+<br>
+
+### 정서현
+
+
+
+<br>
+
+### 진정민
+
+
+
+<br>
 
 <br>
 

From 0286822bfb7f355dcea3508d5aac649aac7f4731 Mon Sep 17 00:00:00 2001
From: Sung Hoo <120024673+HOOOO98@users.noreply.github.com>
Date: Tue, 30 Jan 2024 18:26:46 +0900
Subject: [PATCH 5/6] Update README.md

---
 README.md | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index e7602df0..fa6fd212 100644
--- a/README.md
+++ b/README.md
@@ -206,8 +206,18 @@
 
 ### 박성후
 
+- Service Worker
+    - 파이어베이스에서 제공하는 자바스크립트 FCM을 사용하기 위해 애플리케이션에서 백그라운드에서 실행되는 스크립트를 사용했었지만, 포그라운드에서 onMessage를 수신하지 못하는 현상을 마주했습니다. 이는 PWA가 아닌 순수 웹의 한계였음을 깨닫고 이후 PWA를 공부 후 프로젝트에 적용해보기로 했습니다.
+- 카카오 API
+    - 일행 추가 로직을 정리하면서 분기처리 및 예외 처리의 중요성을 깨달았습니다.
+    - 복합적인 기능을 구현하기 위해 상황을 단순화하는 과정을 거치고 꼼꼼하게 예외처리를 하여 기능을 성공적으로 구현할 수 있었습니다.
+    - 카카오 로직 변경 과정
 
 
+
+| <img width="500" alt="스크린샷 2024-01-30 오후 5 31 41" src="https://github.com/Strong-Potato/TripVote-FE/assets/120024673/bc4c7693-b384-4579-b7fd-9c2229454a28"> | <img width="500" alt="스크린샷 2024-01-30 오후 5 31 53" src="https://github.com/Strong-Potato/TripVote-FE/assets/120024673/b9c4dc50-b745-45b6-85c2-83a6c0c52db1"> |
+|------------------------|------------------------|
+
 <br>
 
 ### 박은영
@@ -255,7 +265,8 @@
 
 ### 박성후
 
-
+- UXUI 다지이너 1, PM 5, BE 5, FE 6 명이 모인 프로젝트를 통해 어떤 점을 조심하고 더 잘 할 수 있을지 생각해 보았습니다. 다양한 역할의 팀원들과 함께하며 소통의 부재가 일정 지연으로 이어질 수 있음을 깨달았고, 기획과 기술 검증에 충분한 시간을 할애하지 않은 점이 문제였다고 느꼈습니다. 이를 개선하기 위해 소통 창구를 단순화하고 트렐로와 같은 도구를 활용하는 것이 좋겠다고 생각했습니다.
+개인적으로는 개발에 대한 열정을 재확인하고, 리더로서의 소통 능력과 상황 파악 능력의 중요성을 인식하게 되었습니다. 의지가 강한 팀원들과 함께 프로젝트를 완성해 나갈 수 있었던 것은 큰 행운이었으며, 이러한 경험을 통해 부딪히고 문제를 해결하는 능력을 키울 수 있는 좋은 기회가 되었습니다.
 
 <br>
 

From e1177737b6f393a25f3d1e05880c15155407d226 Mon Sep 17 00:00:00 2001
From: Sung Hoo <120024673+HOOOO98@users.noreply.github.com>
Date: Mon, 5 Feb 2024 13:49:04 +0900
Subject: [PATCH 6/6] Update README.md

---
 README.md | 133 ++++++++++++++----------------------------------------
 1 file changed, 33 insertions(+), 100 deletions(-)

diff --git a/README.md b/README.md
index fa6fd212..44265755 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,7 @@
 # ⛵️ 함께 할때 더 좋은 여행 일정 서비스 TRIPVOTE
 
-![1 표지](https://github.com/Strong-Potato/TripVote-FE/assets/120024673/acbebd6f-1cb7-4e98-8804-1c0dcce509cb)
+![강자밭 최종발표_표지](https://github.com/Strong-Potato/TripVote-FE/assets/120024673/aa756e0b-b2c2-439a-9f4a-1069da84a723)
+
 
 
 - 배포 URL : https://tripvote.site
@@ -10,6 +11,22 @@
 <br>
 
 ## 프로젝트 소개
+![강자밭 최종발표_page-0004](https://github.com/Strong-Potato/TripVote-FE/assets/120024673/cae4c280-b640-4de0-b3f3-46b319db667a)
+![강자밭 최종발표_page-0005](https://github.com/Strong-Potato/TripVote-FE/assets/120024673/d66f8f76-29ac-443c-8be9-aea8d0879e22)
+![강자밭 최종발표_page-0006](https://github.com/Strong-Potato/TripVote-FE/assets/120024673/3f437739-c654-45d2-b991-86d2449a899f)
+![강자밭 최종발표_page-0007](https://github.com/Strong-Potato/TripVote-FE/assets/120024673/a88046a1-0f9d-4ffa-9f81-836ce602b2a0)
+![강자밭 최종발표_page-0009](https://github.com/Strong-Potato/TripVote-FE/assets/120024673/1fc80c7e-fed5-4da6-8bb3-9cf2ebdd2ea8)
+![강자밭 최종발표_page-0010](https://github.com/Strong-Potato/TripVote-FE/assets/120024673/4d5e6f09-9b10-4c81-8ad2-993a6ba1387f)
+![강자밭 최종발표_page-0011](https://github.com/Strong-Potato/TripVote-FE/assets/120024673/86333637-a66c-4cd7-ad72-f0661db70ea5)
+![강자밭 최종발표_page-0012](https://github.com/Strong-Potato/TripVote-FE/assets/120024673/2b0c9280-bc69-4bc2-894e-4aaa569c6663)
+![강자밭 최종발표_page-0013](https://github.com/Strong-Potato/TripVote-FE/assets/120024673/fa804b91-60a2-409a-ba30-aeae14708ab8)
+![강자밭 최종발표_page-0014](https://github.com/Strong-Potato/TripVote-FE/assets/120024673/33cb9fcc-b7e5-4638-8e80-b44504199640)
+![강자밭 최종발표_page-0015](https://github.com/Strong-Potato/TripVote-FE/assets/120024673/51437825-6b19-446d-8f3e-24cbf762766f)
+![강자밭 최종발표_page-0016](https://github.com/Strong-Potato/TripVote-FE/assets/120024673/1e727bef-65a4-4000-ba09-6863f66d2178)
+![강자밭 최종발표_page-0017](https://github.com/Strong-Potato/TripVote-FE/assets/120024673/dd32913f-0af2-4562-b065-2e5c10e25fbf)
+![강자밭 최종발표_page-0018](https://github.com/Strong-Potato/TripVote-FE/assets/120024673/1eb6305d-a82c-411a-b884-1ab3df4dcd39)
+![강자밭 최종발표_page-0019](https://github.com/Strong-Potato/TripVote-FE/assets/120024673/2e7bed2f-ccba-466e-b24c-bf5b6bc767a8)
+
 
 - TRIPVOTE는 일행과 함께 여행일정을 만들어 갈 수 있는 서비스입니다.
 - 여행 스페이스를 만들고 투표와 일정을 등록할 수 있습니다.
@@ -18,6 +35,21 @@
 
 <br>
 
+## 기획 및 협업
+![강자밭 최종발표_page-0021](https://github.com/Strong-Potato/TripVote-FE/assets/120024673/4bd1dbe9-45aa-41a1-a633-fa5981871d92)
+![강자밭 최종발표_page-0022](https://github.com/Strong-Potato/TripVote-FE/assets/120024673/c540a1d9-e854-4690-a254-4231777496a0)
+![강자밭 최종발표_page-0023](https://github.com/Strong-Potato/TripVote-FE/assets/120024673/193773cc-86f4-4dec-a67f-77c317b384cf)
+![강자밭 최종발표_page-0024](https://github.com/Strong-Potato/TripVote-FE/assets/120024673/3d5600e9-4997-48ad-b862-42d9c28d3d91)
+![강자밭 최종발표_page-0025](https://github.com/Strong-Potato/TripVote-FE/assets/120024673/d85f5c36-a867-4eb1-8669-6d07fdfa6964)
+![강자밭 최종발표_page-0026](https://github.com/Strong-Potato/TripVote-FE/assets/120024673/b3962145-27b8-4c96-bca6-e0ae6354dbcb)
+![강자밭 최종발표_page-0027](https://github.com/Strong-Potato/TripVote-FE/assets/120024673/d23dc516-f5c1-4556-8388-bd67c7c07787)
+![강자밭 최종발표_page-0028](https://github.com/Strong-Potato/TripVote-FE/assets/120024673/4c7d5247-2823-45f4-a26e-a2d6d37e1931)
+![강자밭 최종발표_page-0029](https://github.com/Strong-Potato/TripVote-FE/assets/120024673/c84e09e2-9916-4dbf-9d35-3f691c9c5a70)
+![강자밭 최종발표_page-0047](https://github.com/Strong-Potato/TripVote-FE/assets/120024673/08a5e23b-a642-4c9f-93f9-f269bedf7c11)
+![강자밭 최종발표_page-0048](https://github.com/Strong-Potato/TripVote-FE/assets/120024673/a81d0828-d1e5-4e3f-b50a-5fd7801bf625)
+![강자밭 최종발표_page-0049](https://github.com/Strong-Potato/TripVote-FE/assets/120024673/b5498402-26f1-4791-bd64-55144f5bb477)
+
+
 ## 팀원 구성
 
 <div align="center">
@@ -196,102 +228,3 @@
 
 <br>
 
-## 8. 트러블 슈팅
-
-###  남궁종민
-
-
-
-<br>
-
-### 박성후
-
-- Service Worker
-    - 파이어베이스에서 제공하는 자바스크립트 FCM을 사용하기 위해 애플리케이션에서 백그라운드에서 실행되는 스크립트를 사용했었지만, 포그라운드에서 onMessage를 수신하지 못하는 현상을 마주했습니다. 이는 PWA가 아닌 순수 웹의 한계였음을 깨닫고 이후 PWA를 공부 후 프로젝트에 적용해보기로 했습니다.
-- 카카오 API
-    - 일행 추가 로직을 정리하면서 분기처리 및 예외 처리의 중요성을 깨달았습니다.
-    - 복합적인 기능을 구현하기 위해 상황을 단순화하는 과정을 거치고 꼼꼼하게 예외처리를 하여 기능을 성공적으로 구현할 수 있었습니다.
-    - 카카오 로직 변경 과정
-
-
-
-| <img width="500" alt="스크린샷 2024-01-30 오후 5 31 41" src="https://github.com/Strong-Potato/TripVote-FE/assets/120024673/bc4c7693-b384-4579-b7fd-9c2229454a28"> | <img width="500" alt="스크린샷 2024-01-30 오후 5 31 53" src="https://github.com/Strong-Potato/TripVote-FE/assets/120024673/b9c4dc50-b745-45b6-85c2-83a6c0c52db1"> |
-|------------------------|------------------------|
-
-<br>
-
-### 박은영
-
-
-
-<br>
-
-### 백상원
-
-
-
-<br>
-
-### 정서현
-
-
-
-<br>
-
-### 진정민
-
-
-
-<br>
-
-<br>
-
-## 9. 개선 목표
-
-- **목표**
-    
-- **2024-00-00 성능 개선 내용**
-    
-    
-<br>
-
-## 10. 프로젝트 후기
-
-###  남궁종민
-
-
-
-<br>
-
-### 박성후
-
-- UXUI 다지이너 1, PM 5, BE 5, FE 6 명이 모인 프로젝트를 통해 어떤 점을 조심하고 더 잘 할 수 있을지 생각해 보았습니다. 다양한 역할의 팀원들과 함께하며 소통의 부재가 일정 지연으로 이어질 수 있음을 깨달았고, 기획과 기술 검증에 충분한 시간을 할애하지 않은 점이 문제였다고 느꼈습니다. 이를 개선하기 위해 소통 창구를 단순화하고 트렐로와 같은 도구를 활용하는 것이 좋겠다고 생각했습니다.
-개인적으로는 개발에 대한 열정을 재확인하고, 리더로서의 소통 능력과 상황 파악 능력의 중요성을 인식하게 되었습니다. 의지가 강한 팀원들과 함께 프로젝트를 완성해 나갈 수 있었던 것은 큰 행운이었으며, 이러한 경험을 통해 부딪히고 문제를 해결하는 능력을 키울 수 있는 좋은 기회가 되었습니다.
-
-<br>
-
-### 박은영
-
-
-
-<br>
-
-### 백상원
-
-
-
-<br>
-
-### 정서현
-
-
-
-<br>
-
-### 진정민
-
-
-
-<br>
-
-