Skip to content
BranchesTags

Latest commit

 

History

199 Commits

Folders and files

NameName
Last commit message
Last commit date
backend
backend
 
 
database
database
 
 
docs
docs
 
 
frontend/trip-pick-front
frontend/trip-pick-front
 
 
.gitattributes
.gitattributes
 
 
.gitignore
.gitignore
 
 
README.md
README.md
 
 

Repository files navigation

✈️ Trip Pick (트립 픽)

데이터와 AI 기반 맞춤형 여행 코스 추천 & 협업 플래너 Git의 'Fork' 개념을 도입하여 타인의 여행 계획을 복사하여, 나만의 일정으로 재가공할 수 있는 스마트 여행 플랫폼

1. 프로젝트 소개 (Introduction)

Trip Pick은 '빈 화면에서 시작하는 계획의 막막함'을 해결하기 위해 탄생했습니다. 누군가가 이미 검증한 훌륭한 여행 코스를 **'Fork(복사)'**하여 내 스타일대로 수정하거나, Generative AI에게 내 취향(동행, 스타일, 기간)을 말해주고 단 1분 만에 맞춤형 코스를 제안받을 수 있습니다.

핵심 가치 (Core Values)

  • Plan Fork: 마음에 드는 타인의 일정을 그대로 가져와 내 여행으로 커스터마이징
  • Collaboration: 친구를 초대하여 실시간으로 함께 일정을 편집
  • Data-Driven: 단순히 인기순이 아닌, 실제 사용자들의 Fork/Like 데이터를 기반으로 한 신뢰도 높은 추천
  • AI Itinerary: "친구랑 2박 3일 힐링 여행" 한 마디면 완성되는 나만의 코스

2. 주요 기능 (Key Features)

여행 플래너 (Planner)

  • Drag & Drop: 일정 블록을 드래그하여 손쉽게 순서 및 날짜 변경
  • 실시간 지도 연동: 일정이 변경될 때마다 지도상의 마커와 동선이 실시간 업데이트 (Kakao Maps API)
  • 동시 편집: WebSocket(STOMP)을 활용하여 여러 명의 사용자가 동시에 하나의 플랜 편집

커뮤니티 & 탐색

  • Smart Search: 지역, 태그, 예산 등 복합 조건 필터링
  • Hot Picks: 주간/월간 인기 급상승(Fork+Like) 여행 계획 큐레이션
  • Review & Share: 여행 후기 공유 및 다른 여행자들과의 소통

AI 여행 코스 생성 (New!)

  • 취향 분석: 여행지, 기간, 동행(친구, 연인, 가족 등), 여행 스타일(힐링, 맛집, 액티비티) 입력
  • 자동 생성: GMS 기반 AI가 최적의 동선과 장소를 분석하여 1분 내외로 전체 일정 생성
  • 즉시 편집: 생성된 코스는 플래너 에디터로 즉시 연동되어 자유롭게 수정 가능

3. 기술 스택 (Tech Stack)

Backend

  • Framework: Spring Boot 3.2
  • Language: Java 17
  • Database: MySQL 8.0
  • AI: Spring AI (OpenAI API Integration)
  • Build Tool: Maven
  • ORM: MyBatis
  • API Doc: Swagger UI (SpringDoc)

Frontend

  • Framework: Vue.js 3 (Composition API)
  • Language: TypeScript
  • Build Tool: Vite
  • State Management: Pinia
  • Styling: Tailwind CSS
  • Maps: Kakao Maps SDK

Infrastructure & Tools

  • VCS: Git, GitLab
  • IDE: STS, VS Code

4. 시스템 아키텍처 & 데이터 모델 (Architecture & Data)

🏗️ System Architecture

Trip Pick System은 Spring Boot와 Vue.js를 기반으로, 외부 AI(OpenAI) 및 공공데이터(TourAPI)와 유기적으로 연동됩니다.

System Architecture

💾 ER-Diagram (Entity Relationship)

사용자(User), 여행 계획(Plan), 상세 일정(Place), 그리고 커뮤니티(Review/Hot) 간의 유기적인 관계를 설계했습니다.

ER Diagram

5. 프로젝트 구조 (Project Structure)

TripPick/
├── backend/
│   └── TripPick/           # Spring Boot Backend Project
│       ├── src/main/java/com/trippick/
│       │   ├── controller/   # API 엔드포인트
│       │   ├── service/      # 비즈니스 로직 (AI, Planner 등)
│       │   ├── mapper/       # MyBatis Mapper
│       │   └── ...
│       └── src/main/resources/
│           ├── mappers/      # SQL XML 파일
│           └── application.properties
├── frontend/
│   └── trip-pick-front/    # Vue.js Frontend Project
│       ├── src/
│       │   ├── api/          # Axios API 호출 모듈
│       │   ├── components/   # 재사용 컴포넌트 (Planner, Common 등)
│       │   ├── views/        # 페이지 뷰 (Router 연동)
│       │   └── stores/       # Pinia 상태 관리
├── database/               # DB 스키마 및 더미 데이터 스크립트
└── docs/                   # 기획서, API 명세, 회의록 등

📝 주요 문서

6. 시작하기 (Getting Started)

Prerequisites (필수 요구사항)

  • Java JDK 17 이상
  • Node.js 18 (LTS) 이상
  • MySQL 8.0

Backend Setup

  1. 환경 변수 및 설정 파일 구성 (application.properties)

    backend/TripPick/src/main/resources/application.properties 파일에 아래 필수 정보를 입력해야 합니다.

    # =========================================
# Database Configuration
# =========================================
spring.datasource.url=jdbc:mysql://localhost:3306/trip_pick?serverTimezone=UTC&useUnicode=true&characterEncoding=utf8
spring.datasource.username={DB_ID}
spring.datasource.password={DB_PASSWORD}

# =========================================
# Tour API (공공데이터포털)
# =========================================
# Decoding된 인증키 사용 권장
tour.api.key={TOUR_API_KEY}

# =========================================
# Spring AI Configuration (GMS)
# =========================================
spring.ai.openai.api-key={GMS_API_KEY}
# GMS 지원 모델명 (예: gpt-5-nano, gpt-4o 등)
spring.ai.openai.chat.options.model={MODEL_NAME}

# =========================================
# SQL Data Initialization (Dummy Data)
# =========================================
# 테스트용 더미 데이터 (User 300명, Plan 1000개)
spring.sql.init.mode=always
spring.sql.init.data-locations=classpath:db/data-users.sql,classpath:db/data-plans.sql

  2. 데이터 동기화 (Data Initialization)

    • 프로젝트 최초 실행 시 DataInitializer가 작동하여 공공데이터(지역 코드, 지역 장소 정보)를 동기화합니다.

  3. 프로젝트 실행

    cd backend/TripPick
./mvnw spring-boot:run

Frontend Setup

  1. 환경 변수 설정 (.env)

    frontend/trip-pick-front 폴더 내에 .env 파일을 생성하고 Kakao Map API 키를 입력합니다.

    VITE_KAKAO_MAP_API_KEY={YOUR_KAKAO_JS_KEY}

  2. 패키지 설치

    cd frontend/trip-pick-front
pnpm install

  3. 개발 서버 실행

    pnpm dev

7. 기능 시연 (Feature Showcase)

1️⃣ 플랜 Fork (가져오기)

타인의 일정이 마음에 든다면? 'Fork' 버튼 하나로 내 보관함에 복사해 커스터마이징 하세요. https://drive.google.com/file/d/1Iqi8qiuTx0uUWOC_qIcoh6tAh0xBFwWG/view?usp=drive_link

2️⃣ Drag & Drop 에디터

일정 순서 변경도 드래그 앤 드롭으로 쉽고 직관적으로! 지도가 실시간으로 경로를 보여줍니다. https://drive.google.com/file/d/1i0yXAhApeyQ6LfGmH4l9NnXbNwVjcA7e/view?usp=drive_link)

3️⃣ 스마트 검색 & Hot Picks

#힐링 #맛집 등 태그로 검색하고, 지금 가장 핫한 여행 계획을 메인에서 확인하세요. https://drive.google.com/file/d/1hK8t1R3G-Fm62kFfdUafhzD1uJ2tCcg3/view?usp=drive_link

4️⃣ AI 여행 코스 생성 (AI Itinerary)

여행지, 기간, 스타일만 선택하면 AI가 맞춤형 코스를 1분 만에 제안합니다. https://drive.google.com/file/d/1_5JdXYMKxOwcEzIyVywdKT_iSz_1bkYw/view?usp=drive_link

개발 팀 (Team)

김대원 (Team Leader)

  • Position: Full Stack Developer (Platform & User Experience)
  • Key Contributions:
    • Auth & Security: Spring Security + JWT 기반 인증/인가 시스템, 이메일 본인 인증 및 비밀번호 찾기 등 사용자 생명주기 관리.
    • Interaction & Real-time: WebSocket 기반 전역 실시간 알림(초대/좋아요) 및 여행 계획 동시 편집을 위한 실시간 동기화 구현.
    • UI/UX Design: 웹 서비스 전체 테마(Premium Design) 리뉴얼, 애니메이션 요소 및 반응형(Responsive) 레이아웃 적용.
    • Community & Admin: 여행 후기 게시판(CRUD, 댓글, 태그) 및 관리자 페이지(회원/게시글 관리) 기능 개발.

장현준 (Team Member)

  • Position: Full Stack Developer (Core Logic & Data Engineering)
  • Key Contributions:
    • Architecture: 프로젝트 초기 환경 구축(Vue.js/Spring Boot), DB 스키마 설계 및 Swagger/API 명세서 도입.
    • Planner Logic: 여행 계획 에디터의 Full-Cycle 구현 (UI ↔ API ↔ DB 연동, Drag & Drop, Fork 기능).
    • Data Integration: 한국관광공사 TourAPI 대용량 데이터 동기화 및 동적 검색(지역/타입별) 필터링 구현.
    • Map & AI: KakaoMap 마커 클러스터링 시각화 및 생성형 AI 기반 여행 코스 자동 추천 서비스 개발.

About

No description, website, or topics provided.

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages