TBAG

2024 트래블 이노베이션 아이디어 공모전 대상 수상작

Overview

TBAG은 한국의 영화, 드라마, 아이돌 등 K-콘텐츠로 불리는 한국의 문화 콘텐츠를 소개하고, 관련된 장소들을 지도에서 한눈에 확인할 수 있으며,

해당 장소들을 여행 일정에 등록해 여행 일정을 관리할 수 있는 서비스입니다.

Features

• 구글, 카카오 소셜 로그인을 통한 회원가입 및 로그인
• K-콘텐츠 소개 페이지 및 필터별 조회
• 장소, 작품, 연예인 별 관련 장소 검색
• 장소 상세 정보(주소, 웹사이트, 연락처, 운영 일정 등) 및 추천 장소 목록 확인
• 여행 일정 생성 및 장소 등록
• 여행 경로 최적화
• 히스토리 조회
• 프로필 페이지
• 언어 선택 (한국어, 영어)

Tech Stack

• Frontend
  • SPA 개발: React 18
  • 라우팅: react-router-dom 6
  • 스타일링: TailwindCSS
  • 정적 타입 관리: TypeScript
  • 빌드: Vite
  • UI: shadcn/ui (with @radix-ui)
  • API 요청: Axios
  • 전역 상태 관리: Zustand
  • 서버 상태 관리: React Query v5
  • 폼 상태 관리 + 유효성 검증: React Hook Form + zod
  • 지도: Naver Maps API
  • 국제화: react-i18next
  • UI 테스트: Storybook 8
  • 배포: vercel-cli
• Backend
  • 서버 프레임워크: Spring Boot 2.7.10, Spring Data JPA
  • 데이터베이스: MySQL
  • 언어: Java 11
  • ETC: AWS, Redis, Kakao/Google OAuth
  • API: Google Places API, Google Map Distance Matrix API, TMDB API, Spotify API, DeepL Translation API

Period & Role

2024.05.01 - 2024.07.08

• 05.01-06.03 기획 및 디자인 (이주원(기획 및 디자인), 최선우(기획 및 디자인))
• 06.04-07.08 개발 (김가경(BE), 홍창기(FE))

Preview

소셜 로그인 및 회원가입	메인 바텀시트	장소 상세 바텀시트
지도 및 마커 필터	연예인 검색	장소 검색
콘텐츠 및 상세 정보	히스토리	여행 일정
여행 경로 최적화	콘텐츠 필터
언어 선택 및 국제화	다른 국제화 적용 모습