- 대부분의 여행 관련 플랫폼은 개인 사용자를 대상으로 설계되어 있으며, 여러 사용자가 동시에 협업하여 일정을 계획할 수 있는 기능은 제한적입니다.
- ‘TRIPEER’는 실시간 여행 일정 공유 및 계획 플랫폼으로 소통 가능한 맞춤형 여행 계획을 세울 수 있습니다.
- 여행 전 계획 단계부터 여행 중 실시간 조정에 이르기까지 다양한 기능을 제공함으로써 여행의 효율성과 만족도를 높일 수 있습니다.
- 친구, 가족 또는 동료와 같은 여러 참여자가 함께 여행 계획을 수립, 공유, 수정 및 최적화할 수 있는 서비스를 제공합니다.
- 이 플랫폼은 여행 전 계획 단계부터 여행 중 실시간 조정에 이르기까지 다양한 기능을 제공함으로써 여행의 효율성과 만족도를 높일 수 있습니다.
- 주요 기능으로는 협업툴(실시간 채팅 및 마우스 커서 공유) 형태의 일정 공유, Tour API 기반의 여행지 정보 조회, 사용자 성향 기반의 여행지 추천, 네이버 지도를 활용한 지도 제공, 여행기록을 보관할 다이어리를 제공합니다.
- 여행 계획 앱 특성상 모바일에서의 접근이 필수적이라는 피드백을 반영해 모바일 및 반응형 페이지를 구현했습니다. 특히 모바일에서도 채팅 기능을 원활하게 사용할 수 있도록 모바일 채팅방 UI를 최적화했습니다.
- 사용자가 다른 포털 사이트와 병행 사용해야 하는 번거로움을 개선하기 위해, 여행지 상세 페이지에 별점, 리뷰, 블로그 포스팅 등 추가 정보를 제공했습니다. 또한, 여러 여행지를 비교할 수 있는 찜 목록 페이지를 추가하여 편리한 계획 수립을 돕고자 했습니다.
- 초대 알림의 가시성을 높이기 위해 기존의 이메일 알림을 대체하여, FCM(푸시 알림)을 통해 앱 외부와 내부 모두에서 알림 기능을 지원하도록 개선했습니다.
- 사진 앨범의 오용 가능성을 줄이기 위해 단체 앨범 기능을 삭제하고, 대신 여행지 리뷰 작성 시 사진 첨부가 가능하도록 수정했습니다.
- 명시적 타입을 사용해 코드의 가독성을 높이고 팀원 간 협업의 안정성을 강화했습니다.
- SSR의 장점을 활용하기 어려운 프로젝트 특성상, SPA 특성을 살리기 위해 React로 전환하여 클라이언트 환경에 최적화된 앱을 구현했습니다.
- 서버 데이터를 캐싱하여 반복적인 비동기 호출을 줄이고 서버 부하를 경감했습니다.
-
협업 중 코드 리뷰를 적극 활용해 코드 품질을 높이고 최적화를 지속했습니다.
| 분류 | 기능 | 내용 |
|---|---|---|
| 로그인 및 랜딩페이지 | 랜딩페이지 | - 트리피어 서비스에 대한 소개 및 로그인 페이지를 보여줍니다. |
| 로그인 | - 소셜 및 트리피어 자체 로그인을 제공합니다. | |
| 홈 | 여행지 검색 | - 가고싶은 여행지를 검색하거나 추천 여행지 정보를 제공합니다. |
| 여행지 상세 페이지 | - 특정 여행지에 관한 사진, 리뷰, 지도, 블로그 포스팅을 제공합니다. | |
| 지역 필터링 | - 지역별 및 카테고리별 검색 필터링 기능을 제공합니다. | |
| 일정계획 | 일정 계획 생성 | - 여러 사용자들과 여행 계획을 세우기 위한 플랜을 생성합니다. |
| 채팅 기능 | - 실시간 채팅 및 실시간 멤버별 온라인 여부 조회가 가능합니다. - 데스크탑의 경우, 백틱(``)을 이용해 마우스 커서 공유 및 채팅이 가능합니다. |
|
| 지도 기능 | - 지역별 및 카테고리별 검색 필터링 기능을 제공합니다. - AI기반 실시간 여행지 추천 기능을 제공합니다. - 기상청 API를 활용한 선택 지역의 날씨 정보를 제공합니다. - 유저별 상호작용 가능한 여행지 목록 추가기능을 제공합니다. - 여행지 선택 시 세부정보 및 지도정보를 제공합니다. |
|
| 일정 기능 | - 추가된 여행지 목록, 카테고리별, 검색어별 필터링 기능을 제공합니다. - 유저간의 상호작용 가능한 일차별 여행지 드래그 앤 드랍 기능을 제공합니다. - 여행지 간 소요 시간 계산, 교통수단별 최단거리 계산 기능을 제공합니다. - 여행지 상세 경로 및 교통 수단에 따른 상세정보를 제공합니다. |
|
| 지난여행 | 지난 여행 조회 | -다녀온 여행 정보에 대한 열람 기능을 제공합니다. |
| 지난 여행 상세 조회 | -일차별 여행 경로, 지도, 리뷰작성기능을 제공합니다. | |
| 찜 목록 | 찜 몰록 조회 | -즐겨찾기한 여행지 기반 지역별 및 카테고리별 필터링을 제공합니다. |
| 마이페이지 | 내 정보 수정 | -닉네임, 프로필 사진, 여행 스타일 변경이 가능합니다. - 공지사항 열람, 초대 링크, 알림 설정, 로그아웃 설정이 가능합니다. |
| 알림 | 외부 알림 | -브라우저 알림(데스크탑), 어플리케이션 알림(모바일)을 제공합니다. - 단체 그룹방 초대, 일정 시작, 종료 시 알림 기능을 제공합니다. |
| 내부 알림 | - 단체 그룹방 초대, 일정 시작, 종료 시 알림 기능을 제공합니다. |
📦src
┣ 📂assets
┃ ┣ 📂airplane
┃ ┣ 📂auth
┃ ┣ 📂banner
┃ ┣ 📂button
┃ ┣ 📂category
┃ ┣ 📂error
┃ ┣ 📂logo
┃ ┣ 📂nav
┃ ┣ 📂rating
┃ ┣ 📂region
┃ ┣ 📂styleChip
┃ ┣ 📂toggle
┃ ┣ 📂trip
┃ ┗ 📂weather
┣ 📂components
┃ ┣ 📂admin
┃ ┣ 📂alarm
┃ ┣ 📂Card
┃ ┣ 📂controller
┃ ┣ 📂empty
┃ ┣ 📂error
┃ ┣ 📂loading
┃ ┣ 📂nav
┃ ┣ 📂search
┃ ┗ 📂slider
┣ 📂data
┣ 📂features
┃ ┣ 📂about
┃ ┣ 📂admin
┃ ┣ 📂auth
┃ ┣ 📂cart
┃ ┣ 📂contact
┃ ┣ 📂diary
┃ ┣ 📂diaryDetail
┃ ┣ 📂img
┃ ┣ 📂landing
┃ ┣ 📂mypage
┃ ┣ 📂plan
┃ ┣ 📂planDetail
┃ ┣ 📂privacy
┃ ┣ 📂redirect
┃ ┣ 📂register
┃ ┗ 📂spot
┣ 📂fonts
┣ 📂hooks
┣ 📂layout
┣ 📂store
┣ 📂types
┣ 📂utils
┣ 📜App.tsx
┣ 📜index.css
┣ 📜main.tsx
┗ 📜vite-env.d.ts
| FrontEnd |
Language | HTML5, CSS3, TypeScript, node.js(v20.15.1), JavaScripte(ES6+)
Library | React.js(v18.3.1), Zustand(v4.5.4), ReactQuery(v5.51.23), vite(v5.3.4), eslint(v8.57.0), Yjs(v13.6.18), prettier(v3.3.3), Axios(v1.7.4), swiper(v11.1.9), react-router-dom(v6.26.0)
- 실제 서비스 접근 링크
- 웹사이트: 트리피어 사이트 링크
- 앱 스토어 링크:
- iOS 앱: App Store 링크
- 안드로이드 앱: Google Play 링크
- 주요 화면 스크린샷 또는 서비스의 주요 UI 소개
| 역할 | 이름 | 역할 |
| FrontEnd | 부수환 |
- Yjs 연결을 통한 데이터 실시간 동기화 - 페이지 구현(사이트 자체 회원가입, 로그인 페이지, 일정 계획(채팅, 맵, 스케쥴), 찜목록, 마이 페이지, 장소 디테일 페이지 등) - 공통 컴포넌트, 커스텀 훅 개발(공통 모달, 드래그 모달, 맵 적용 커스텀 훅, 무한 스크롤 커스텀 훅, 공통 알림 컴포넌트 등) - 프론트엔드 웹 FCM 알림 기능 - 모바일 앱 배포 |
| 현지혜 |
- UI/UX 설계 및 로고제작 - 실시간 데이터 동기화 - 페이지 구현(랜딩 페이지, 일정계획 맵, 다이어리 페이지 등) - 프로젝트 기획 및 일정 관리 - 모바일 앱 배포 |
|
| 이해건 |
- 실시간 동기화 데이터 관리 - 페이지 구현(홈, 회원등록, 플랜스케쥴 페이지 등) - 모바일 앱 제작 밑 배포(구글 플레이스토어, 애플 앱스토어) - 모바일 FCM 알림 기능 |
|
| BackEnd | 양건우 |
- 서비스 전체 인프라 관리 - 파이썬 라이브러리를 활용한 추천로직 구현 - ydoc관리를 위한 express서버 구현 - 지난 여행 관련 api 구현 |
| 손동천 |
- 소셜 로그인(구글, 네이버, 카카오, 애플) 구현, 유저 회원정보 관리 - 민감정보 암호화 - 여행 계획 관련 서비스 관리 - 최적경로탐색 기능 설계 및 구현 - 서비스 에러 핸들링 커스텀 |
|
| 김회창 |
- FCM 알림 기능 구현 |
|