Tripie ✈️

Table of Content

• Introduction
• Features
• Demo
• Screenshots
• Development Process

Introduction

Description	Techs
Front
State management & data fetching
Build & Deployment
Version Control
Testing
Styling
APIs
Database

Tripie(트리피)는 다음과 같은 기능을 제공합니다.

• 비로그인 : 트리플에서 웹스크래핑한 여행 지역에 대한 팁 (여행 지역, 일정, 장소 및 음식점 정보)
• 로그인 : github 또는 카카오로 로그인 시 챗지피티 기반의 여행 일정을 추천받을 수 있습니다.

Features

Screenshots

랜딩 페이지 : 트리피 서비스에 대한 설명과 링크

• /#Process : 여행 일정 서비스 이용할 떼 지역 > 나라 > 도시 > 기간 > 동행자 > 여행 스타일 순으로 선택 시 예시 여행 일정 흐름을 보여줍니다.

  • 
  • 
  • 
  • 

• /#Sevices : 서비스 중 여행지에 대한 팁을 "도시별 여행 정보"에서 확인할 수 있습니다. 보여질 나라는 랜덤으로 선택됩니다.

  • 

• /#our work : (더미) 업적

  • 

• /#plans : (더미) 구독 시 서비스

  • 

• /#Contacts : 관리자 이메일 연락, 클릭 시 메일을 보낼 수 있습니다.

  • 
  • 

• 여행 정보 페이지 : 트리플 앱에서 스크래핑한 여행 정보와 팁, SEO를 위해 메타태그 설정이 되어 있습니다. (공유 시 해당 og 정보로 공유)

  • /regions :
    • 
  • /regions/대한민국 : 대한민국 선택시
  • /regions/대한민국/location/제주도 ID : 대한민국, 제주도 선택시

여행 정보 상세 페이지

• 여행 정보 상세 페이지 (regions/지역ID/articles/기사ID):
  • 제주 여행 코스 짜는 방법 카드를 클릭하면 해당 게시물 페이지로 이동합니다.
    • 여행 일정에 대한 정보가 포함될 시, 다음과 같이 카드와 지도로 해당 위치에 대한 정보를 확인할 수 있습니다.
  • 여행 정보 상세 페이지 : 여름 제주 인생샷 명소 BEST 7 카드를 클릭하면 해당 게시물 페이지로 이동합니다.
    • 이미지가 여러 개일 경우 캐로솔로 제공됩니다. 버튼과 스크롤로 동작합니다.
• 여행 (식당) 정보 상세 페이지 (regions/지역ID/restaurants/기사ID):
  • 오쇼쿠지도코로 이마킨와 같은 음식점 링크를 타고 가면
    • 해당 장소의 사진과 메뉴 등의 정보,
    • 전화번호나 웹사이트 등의 기본 정보,
    • 팁, 휴무일, 이용 팁, 가는 방법 등의 정보를 보여줍니다.
    • 소셜 리뷰

여행 일정 추천 페이지

• 챗지피티를 활용해 여행 일정을 짜주고 해당 여행 일정을 지도에서 설명과 함께 확인 가능합니다. 퍼널 구조를 활용해 구현했습니다.

  • 네비게이션에서 AI추천 맞춤 일정 클릭 시, 새로운 탭에서 페이지가 열립니다.

• 지역 (region) > 아시아 선택 시 (/trip-planner?trip-plan.step=CONTINENT)

  • 

• 나라 (country) > 싱가포르 선택시 (/trip-planner?trip-plan.step=COUNTRY )

  • 

• 도시 (city) > 전체 선택시 (/trip-planner?trip-plan.step=CITY)

  • 

• 기간 (duration) > (시작: 3/5/2025 12:00:00 PM, 끝: 3/6/2025 11:59:59 PM) 선택 시 (/trip-planner?trip-plan.step=DURATION)

  • 

• 동반 (companion) > 친구와 선택 시 (/trip-planner?trip-plan.step=COMPANION)

  • 

• 여행 테마 (preference) > SNS 핫플레이스, 관광보다 먹방, 여행지 느낌 물씬, 유명 관광지는 필수 선택 시 (/trip-planner?trip-plan.step=PREFERENCE)

  • 

• 선택 로딩 화면 (임시, 수정 예정)

  • 

• 여행 일정

• 여행 일정 (1일)

• 여행 일정 (2일)

• 링크 클릭시 구글 검색결과가 새로운 창으로 열어집니다.

• 👉 해당 여행 일정 보기

  • 비로그인 혹은 만든이의 일정이 아닌 경우, 공유는 가능하나 로그인하고 일정 추천받아보기 혹은 해당 유저의 사용 정보가 나옵니다.

에러 페이지들

• 여행 일정 토큰을 모두 사용했을 경우,
• 500 에러
• 404 에러

Development Process