⛵️ 함께 할때 더 좋은 여행 일정 서비스 TRIPVOTE

• 배포 URL : https://tripvote.site
• Test ID : [email protected]
• Test PW : 1q2w3e4r!Q

프로젝트 소개

• TRIPVOTE는 일행과 함께 여행일정을 만들어 갈 수 있는 서비스입니다.
• 여행 스페이스를 만들고 투표와 일정을 등록할 수 있습니다.
• 검색을 통해서 장소를 찾고, 투표와 일정에 등록시킬 수 있습니다.
• 일행과 함께 투표에 참여하여 일정을 정해볼 수 있습니다.

기획 및 협업

팀원 구성

남궁종민	박성후	박은영	백상원	정서현	진정민
@NamgungJongMin	@HOOOO98	@SKY-PEY	@Yamyam-code	@JSH99	@JeongMin83

1. 개발 환경

• Front : React(Vite), TypeScript, SCSS
• Back-end : TourAPI, Java Springboot3
• 버전 및 이슈관리 : Github, Github Issues, Github Project
• 협업 툴 : Discord, Notion, Slack
• 서비스 배포 환경 : Vercel, Github Action
• 디자인 : Figma

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 상태에 반영했습니다.

3. 프로젝트 구조

📦src
 ┣ 📂api
 ┣ 📂assets
 ┣ 📂chakra
 ┣ 📂components
 ┣ 📂firebase
 ┣ 📂hooks
 ┣ 📂mocks
 ┣ 📂pages
 ┣ 📂recoil
 ┣ 📂routes
 ┣ 📂sass
 ┣ 📂types
 ┗ 📂utils

4. 역할 분담

남궁종민

• UI
  • 마이페이지 , 로그인 , 회원가입
• 기능
  • 비밀번호 변경 , 재발급 , 회원 가입 , 로그인 , 소셜 로그인 , 회원 탈퇴 , 프로필 변경

박성후

• UI
  • 사이드바 , 알림
• 기능
  • 푸시알림 , 카카오톡 초대

박은영

• UI
  • 투표
• 기능
  • 투표만들기 , 투표하기 , 투표 페이지에서 일정 추가, 지도보기 , 여행지 후보 등록 , 후보 장소 메모작성 , 나의 찜 가져오기, 전체 지역 필터 기능

백상원

• UI
  • gnb , 온보딩 , 장소 검색 , 지도
• 기능
  • 홈페이지 리스팅 , 검색 인기 장소 리스팅 , 장소 검색 지도

정서현

• UI
  • 여행 스페이스
• 기능
  • 여행 날짜 정하기 , 여행지 정하기 , 일정 탭 화면 , 지도 확대 기능 , 일정 편집 기능 , 투표에서 불러오기 , 루트 최적화 , 장소 검색 , 찜목록 검색

진정민

• UI
  • 상세페이지 , 리뷰 , 찜
• 기능
  • 찜하기 , 리뷰쓰기 , 리뷰수정 , 후보 등록하기 , 주변 다른 숙소

5. 개발 기간 및 작업 관리

프로젝트 기간

• 전체 기간 : 2023-12-04 ~ 2024-01-29
• 기획 / UI : 2023-12-04 ~ 2024-01-05
• 기능 구현 : 2024-01-05 ~ 2024-01-29

작업 관리

• GitHub Projects와 Issues를 사용하여 진행 상황을 공유했습니다.
• 주간회의를 진행하고 각자의 작업 상황을 공유했습니다.
• 노션에는 정해진 컨벤션을 정리하고, 슬랙으로는 전체적인 공지를 확인하고, 디스크드에 깃허브 웹훅을 사용해 PR의 생명주기를 단축시켰습니다.

6. 신경 쓴 부분

• React-Query
  • 의존적 쿼리 키 : 쿼리 키를 사용해서 데이터 가져오기 요청을 최적화했습니다. 쿼리 키가 변경될 때 마다 새롭게 데이터를 업데이트를 할 수 있어 불필요한 재요청을 방지할 수 있습니다.
  • 로딩, 에러 처리 : 데이터가 도착하기 전 상태를 자동으로 감지하여 수동으로 코드를 적용하지 않았습니다. 또한 에러를 자동으로 감지하기 때문에 에러 바운더리를 정해 컴포넌트 렌더링 최적화를 위해 노력했습니다.
• Proxy
  • 프록시 서버를 사용하여 개발 환경 및 배포 환경에서 발생하는 CORS 문제를 해결했습니다.
  • 보안과 개발자 경험을 향상시키기 위해 노력했습니다.

7. 시연영상