#229 readme

README.md

@@ -1,47 +1,230 @@
-# 중간 결과물 서면 피드백 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)
+![강자밭 최종발표_표지](https://github.com/Strong-Potato/TripVote-FE/assets/120024673/aa756e0b-b2c2-439a-9f4a-1069da84a723)
 
-## 역할
+
+
+- 배포 URL : https://tripvote.site
+- Test ID : test@test.com
+- Test PW : 1q2w3e4r!Q
+
+<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는 일행과 함께 여행일정을 만들어 갈 수 있는 서비스입니다.
+- 여행 스페이스를 만들고 투표와 일정을 등록할 수 있습니다.
+- 검색을 통해서 장소를 찾고, 투표와 일정에 등록시킬 수 있습니다.
+- 일행과 함께 투표에 참여하여 일정을 정해볼 수 있습니다.
+
+<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">
+
+| **남궁종민** | **박성후** | **박은영** | **백상원** | **정서현** | **진정민** |
+| :------: |  :------: | :------: | :------: | :------: | :------: |
+| [<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 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>
+
+## 2. 채택한 개발 기술과 브랜치 전략
+
+### React, SCSS
+
+- React(Vite)
+    - 컴포넌트화를 통해 추후 유지보수와 재사용성을 고려했습니다.
+    - 커스텀 훅과 유틸 함수를 사용하여 일관된 데이터를 사용할 수 있도록 노력했습니다.
+- SCSS
+    - module.scss를 사용해서 className의 네이밍 컨벤션을 정하는 비용을 절약할 수 있었습니다.
+    - BEM 방법론을 도입하여 컴포넌트 구조를 좀 더 쉽게 파악할 수 있도록 했습니다.
+
+### Recoil
+
+- 최상위 컴포넌트를 만들어 props로 유저 정보를 내려주는 방식의 경우 불필요한 props 전달이 발생합니다. 따라서, 필요한 컴포넌트 내부에서만 상태 값을 가져다 사용하기 위해 상태 관리 라이브러리를 사용하기로 했습니다.
+- Redux가 아닌 Recoil을 채택한 이유
+    - Recoil은 React만을 위한 라이브러리로, 사용법도 기존의 useState 훅을 사용하는 방식과 유사해 학습비용을 낮출 수 있었습니다.
+    - 또한 Redux보다 훨씬 적은 코드라인으로 작동 가능하다는 장점이 있었습니다.
+
+### eslint, prettier
+
+- 정해진 규칙에 따라 자동적으로 코드 스타일을 정리해 코드의 일관성을 유지하고자 했습니다.
+- 코드 품질 관리는 eslint에, 코드 포맷팅은 prettier에 일임해 사용했습니다.
+- 협업 시 매번 컨벤션을 신경 쓸 필요 없이 빠르게 개발하는 데에 목적을 두었습니다.
+
+### MSW
+
+- 기획, 디자인이 완료되어 렌더링에 필요한 데이터를 명세를 통해 정하고, 이를 바탕으로 API를 mocking하여 사용할 수 있었습니다.
+- BackEnd에서 API를 제공해주는 시점 전에도 미리 API 연결을 통해 미리 화면을 구성하여 작업을 진행할 수 있었습니다.
+
+
+### Jest
+
+- 유틸 함수를 테스트하여 일관된 데이터가 도출 되는지 확인하여, 변칙적인 상황을 줄였습니다. 
+
+### 브랜치 전략
+
+- Git-flow 전략을 기반으로 main, dev 브랜치로 버전을 관리하였고, Git issue를 통해 브랜치를 생성하여 이슈단위로 기능을 개발했습니다.
+- main, develop, Feat 브랜치로 나누어 개발을 하였습니다.
+    - **main** 브랜치는 배포 단계에서만 사용하는 브랜치입니다.
+    - **develop** 브랜치는 개발 단계에서 git-flow의 master 역할을 하는 브랜치입니다.
+    - **Feat** 브랜치는 기능 단위로 독립적인 개발 환경을 위하여 사용하고 PR merge 후 각 브랜치를 자동 삭제해주었습니다.
+-  Github actions에 CI를 적용하여 빌드 및 시작에 오류가 없는지 테스트하고 그 결과를 PR 상태에 반영했습니다.
+<br>
+
+## 3. 프로젝트 구조
+
+```
+📦src
+ ┣ 📂api
+ ┣ 📂assets
+ ┣ 📂chakra
+ ┣ 📂components
+ ┣ 📂firebase
+ ┣ 📂hooks
+ ┣ 📂mocks
+ ┣ 📂pages
+ ┣ 📂recoil
+ ┣ 📂routes
+ ┣ 📂sass
+ ┣ 📂types
+ ┗ 📂utils
+```
+
+<br>
+
+## 4. 역할 분담
+
+### 남궁종민
+- **UI**
+    - 마이페이지 , 로그인 , 회원가입
+- **기능**
+  -  비밀번호 변경 , 재발급 , 회원 가입 , 로그인 , 소셜 로그인 , 회원 탈퇴 , 프로필 변경 
+
+<br>
+
 ### 박성후
 
-- 알림
-- 친구 초대
+- **UI**
+    - 사이드바 , 알림
+- **기능**
+    - 푸시알림 , 카카오톡 초대
+
+<br>
+
+### 박은영
+
+- **UI**
+    - 투표
+- **기능**
+    - 투표만들기 , 투표하기 , 투표 페이지에서 일정 추가, 지도보기 , 여행지 후보 등록 , 후보 장소 메모작성 , 나의 찜 가져오기, 전체 지역 필터 기능
+
+<br>
+
+### 백상원
+
+- **UI**
+    - gnb , 온보딩 , 장소 검색 , 지도
+- **기능**
+    - 홈페이지 리스팅 , 검색 인기 장소 리스팅 , 장소 검색 지도
+
+
+<br>
+
+### 정서현
+
+- **UI**
+    - 여행 스페이스
+- **기능**
+    - 여행 날짜 정하기 , 여행지 정하기 , 일정 탭 화면 , 지도 확대 기능 , 일정 편집 기능 , 투표에서 불러오기 , 루트 최적화 , 장소 검색 , 찜목록 검색
+
+<br>
+
+### 진정민
+
+- **UI**
+    - 상세페이지 , 리뷰 , 찜
+- **기능**
+    - 찜하기 , 리뷰쓰기 , 리뷰수정 , 후보 등록하기 , 주변 다른 숙소
+
+<br>
+
+## 5. 개발 기간 및 작업 관리
+
+### 프로젝트 기간
+
+- 전체 기간 : 2023-12-04 ~ 2024-01-29
+- 기획 / UI  : 2023-12-04 ~ 2024-01-05
+- 기능 구현 : 2024-01-05 ~ 2024-01-29
 
----
+<br>
 
-### 은영 & 서현
+### 작업 관리
 
-- 투표 만들기
-    - 투표만들기, 투표 만들기 완료페이지
-- 투표하기
-    - 투표하기, 투표 페이지에서 일정 추가, 지도보기 기능
+- GitHub Projects와 Issues를 사용하여 진행 상황을 공유했습니다.
+- 주간회의를 진행하고 각자의 작업 상황을 공유했습니다.
+- 노션에는 정해진 컨벤션을 정리하고, 슬랙으로는 전체적인 공지를 확인하고, 디스크드에 깃허브 웹훅을 사용해 PR의 생명주기를 단축시켰습니다. 
 
-- 여행지 후보 등록
-- 장소 검색, 후보 장소 메모작성, 나의 찜 가져오기, 전체 지역 필터 기능
+<br>
 
-- 여행 스페이스 만들기
-    - 여행 날짜 정하기, 여행지 정하기, 완료 페이지
-- 일정 관리
-    - 일정 유무에 따라 보여지는 일정 탭 화면, 지도 확대 기능, 일정 편집 기능, 투표에서 불러오기, 루트 최적화, 장소 검색, 찜목록 검색
+## 6. 신경 쓴 부분
 
----
+- React-Query
+    - 의존적 쿼리 키 : 쿼리 키를 사용해서 데이터 가져오기 요청을 최적화했습니다. 쿼리 키가 변경될 때 마다 새롭게 데이터를 업데이트를 할 수 있어 불필요한 재요청을 방지할 수 있습니다.
+    - 로딩, 에러 처리 : 데이터가 도착하기 전 상태를 자동으로 감지하여 수동으로 코드를 적용하지 않았습니다. 또한 에러를 자동으로 감지하기 때문에 에러 바운더리를 정해 컴포넌트 렌더링 최적화를 위해 노력했습니다.
+- Proxy
+    - 프록시 서버를 사용하여 개발 환경 및 배포 환경에서 발생하는 CORS 문제를 해결했습니다.
+    - 보안과 개발자 경험을 향상시키기 위해 노력했습니다.
 
-### 정민 & 상원
+<br>
 
-- gnb
-- 홈화면
-- 검색
-- 상세페이지
-    - 후보장소 등록 기능, 투표만들기 기능, 상품 검색 기능, 찜하기
+## 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>
 
-- 리뷰
-- 마이페이지
-- 인증