TRIPICK

📖목차

• README
  • 🗓프로젝트 진행 기간
  • 📑주제
  • 🎉프로젝트 기획
  • 🔑 주요 기능
  • [📜 사용 기술](#-사용 기술)
  • 🖥 서비스 화면
  • 🏗️ 아키텍쳐
  • 🛠 기술 스택
  • 📂 파일 구조
  • 📝 설계 문서
    • ERD
    • API
    • FIGMA
  • 💻 구동 방법
  • 💾 결과물
    • UCC
  • ❤ 팀원 소개
    • 프론트
    • 백

---

🗓 프로젝트 진행 기간

2023.08.14 ~ 2023.10.06 (약 7주)

---

📑 주제

빅데이터(날씨, 환율, 물가지수, 범죄율)을 기반으로 여행지 추천 서비스

---

🎉 프로젝트 기획

---

🔑 주요 기능

📜 사용 기술

빅데이터

백엔드

프론트엔드

---

🖥 서비스 화면

메인 페이지

날짜 선택 페이지

여행 추천 페이지

여행지 비교 페이지

마이페이지

기록페이지

---

🏗️ 아키텍쳐

---

🛠 기술 스택

백엔드

• 웹

  Language | java 11

  Framework | Spring Boot 2.7

  Build Tool | gradle 8.2.1

  Database | mariaDB 10.11.0

• 추천

  Language | python==3.11.4

  Database | mongodb== 7.0.1, pymongo==4.5.0

  Data Processing | scikit-learn==1.3.0, bayesian-optimization==1.4.3

  Framework | fastapi==0.103.1

프론트엔드

Language | Javascript

Framework | react 18.2.0

Engine | Node.js 18.16.1

Library | zustand 4.4.1, css-loader 6.8.1, styled-components 6.0.4

인프라

Infra | docker 24.0.6, docker-compose 2.21.0, nginx 1.18.0 (Ubuntu)

CI/CD | jenkins 2.414.1

SSL certification | certbot 0.40.0

---

📂 파일 구조

프론트 프로젝트 구조

📦 src
│  ├─ 📂 api
│  ├─ 📂asset
│  │  └─ 📂images
│  ├─ 📂components
│  │  ├─ 📂common
│  │  ├─ 📂diary
│  │  ├─ 📜index.js
│  │  ├─ 📂landing
│  │  ├─ 📂layout
│  │  ├─ 📂mypage
│  │  ├─ 📂preview
│  │  └─ 📂recommend
│  ├─ 📂hooks
│  ├─ 📂pages
│  │  ├─ 📂cart
│  │  ├─ 📂common
│  │  ├─ 📂detail
│  │  ├─ 📂diary
│  │  ├─ 📜index.js
│  │  ├─ 📂landing
│  │  ├─ 📂mbti
│  │  ├─ 📂mypage
│  │  └─ 📂recommend
│  ├─ 📂style
│  └─ 📂utils
│     ├─ index.js
│     ├─ utilsApi.js
│     └─ utilsConstant.js
│  ├─ 📜App.js
└─ └─ 📜index.js

백엔드 프로젝트 구조

📦tripick
 └─ 📂mz
   ├─ 📂common
   │  ├─ 📂config
   │  ├─ 📂entity
   │  ├─ 📂error
   │  ├─ 📂jwt
   │  └─ 📂response
   ├─ 📂member
   │  ├─ 📂controller
   │  ├─ 📂dto
   │  │  ├─ 📂request
   │  │  └─ 📂response
   │  ├─ 📂entity
   │  ├─ 📂mapper
   │  ├─ 📂repository
   │  └─ 📂service
   │     └─ 📂implement
   ├─ 📂record
   │  ├─ 📂controller
   │  ├─ 📂dto
   │  │  ├─ 📂request
   │  │  └─ 📂response
   │  ├─ 📂entity
   │  ├─ 📂mapper
   │  ├─ 📂repository
   │  └─ 📂service
   │     └─ 📂implement
   ├─ 📂trip
   │  ├─ 📂controller
   │  ├─ 📂dto
   │  │  ├─ 📂request
   │  │  └─ 📂response
   │  ├─ 📂entity
   │  ├─ 📂mapper
   │  ├─ 📂repository
   │  └─ 📂service
   │     └─ 📂implement
   └─ 📜TripickApplication.java

📦FASTAPI
└─📂app
  ├─📜dp.py
  ├─📜dummy.py
  ├─📜main.py
  └─📜recommendation.py
📂Dockerfile
📜requirements.txt

---

📝 설계 문서

ERD

ERD

API

API 문서

FIGMA

FIGMA

https://www.figma.com/file/n5esjnbJmX1crDIYgQNJS9/Travel?type=design&node-id=103-445&mode=design&t=PsNE2mWlgEcwdAqN-0

## 💻 구동 방법

1. Clone Project

git clone https://lab.ssafy.com/s09-bigdata-recom-sub2/S09P22A305.git

2. change path to /front_temp/frontend

npm i

3. create .env file

# .env.dev
REACT_APP_GA_ENV_TYPE=DEV
REACT_APP_NODE_ENV=DEV
REACT_APP_BASE_URL=http://localhost:3000 
REACT_APP_KAKAO_REST_API_KEY={YOUR_KAKAO_REST_API_KEY}
REACT_APP_GOOGLE_REST_API_KEY={YOUR_GOOGLE_REST_API_KEY}

# .env.prd
REACT_APP_GA_ENV_TYPE=PRD
REACT_APP_NODE_ENV=PRD
REACT_APP_KAKAO_REST_API_KEY={YOUR_KAKAO_REST_API_KEY}
REACT_APP_GOOGLE_REST_API_KEY={YOUR_GOOGLE_REST_API_KEY}

4.frontend start

npm start

5. change path to /server/spring/src/main/resources

create env.yml

MARIADB_DATABASE_URL: {YOUR_MARIADB_DATABASE_URL}
DATABASE_USERNAME: {YOUR_MARIADB_DATABASE_USERNAME}
DATABASE_PASSWORD: {YOUR_MARIADB_DATABASE_PASSWORD}
MONGODB_DATABASE_URL: {YOUR_MONGODB_DATABASE_URL}
MONGODB_DATABASE_NAME: {YOUR_MONGODB_DATABASE_NAME}
MONGODB_PORT: {YOUR_MONGODB_DATABASE_PORT}
S3_BUCKET: {YOUR_S3_BUCKET}
S3_ACCESS_KEY: {YOUR_S3_ACCESS_KEY}
S3_SECRET_KEY: {YOUR_S3_SECRET_KEY}
JWT_SECRET_KEY: {YOUR_JWT_SECRET_KEY}
KAKAO_CLIENT_ID: {YOUR_KAKAO_CLIENT_ID}
KAKAO_CLIENT_SECRET: {YOUR_KAKAO_CLIENT_SECRET}
KAKAO_REDIRECT_URI: {YOUR_KAKAO_REDIRECT_URI}
GOOGLE_CLIENT_ID: {YOUR_GOOGLE_CLIENT_ID}
GOOGLE_CLIENT_SECRET: {YOUR_GOOGLE_CLIENT_SECRET}
GOOGLE_REDIRECT_URI: {YOUR_GOOGLE_REDIRECT_URI}\

6. Run TripickApplicaiton

7. change path to /server/fastAPI

pip install -r requirements.txt

change path to /server/fastAPI/app

uvicorn main:app --reload

---

💾 결과물

UCC

https://youtu.be/Z7xU5HUj5xw

---

❤ 팀원 소개

Frontend

권현수	이예슬

Backend

박성준	오유정	이해준	허성백