🛫 Pick&Packer 🛬

합리적인 항공권 결정과 여행 물품 현지 거래를 위한 웹 서비스

✨ 프로젝트 진행 기간

• 2023.02 ~ 2023.04

🎨 기획 배경

코로나19가 완화됨에 따라 해외여행 수요가 급증하고 있다. 해외 여행을 계획하는 데 가장 중요한 것은 항공권이다. 기존 항공권 예매 사이트에서 불편한 점을 찾을 수 있었다.

불편한 점

• 항공권 가격의 과거 데이터를 제공하지 않아 지금 보고 있는 항공권 가격이 합리적인지 알 수 없다.
• 여러 개의 항공권을 한 눈에 비교할 수 없다.
• 찜한 항공권의 가격이 원하는 가격에 도달했는지 확인하는 과정이 귀찮다.
• 대부분 항공권 예약 사이트에선 인기 여행지로 도시만 추천한다.

🧸 주요 기능

• 항공권 가격 추이를 시각적으로 볼 수 있다.
• 여러 개의 항공권을 선택해 한 눈에 비교할 수 있다.
• 원하는 가격에 도달하면 찜한거 알림을 받을 수 있다.
• 관광지 기준으로 주변 공항을 지도에 표시한다.
• 여행 물품을 구매/대여할 수 있다.

🌎 Pick 서비스 - 메인 페이지

지도 & 여행지 서비스

• 각 나라의 공항 위치와 상세 정보를 제공.

인기 여행지

• 대류별 인기 여행지를 제공.
• 여행지 클릭시, 지도 해당 여행지가 확대 되고, 상세 정보를 제공.
• 주변의 가까운 공항 정보와 위치 제공.

항공권 검색

• 편도/왕복으로 검색 지원.
• 출발지/도착지 선택, 날짜 선택, 검색조건(경유조건, 가격조건) 설정 후 검색 지원.

항공권 검색 결과

• 실제와 동일한 항공권 마크와 색상으로 항공권 구별.

• 항공권을 5개까지 비교할 수 있는 기능 지원.

• 항공권 조회 결과 리스트 정렬 기능 지원.

  • 금액 낮은 순
  • 변동폭 큰 순
  • 출발시간 빠른 순
  • 소요시간 낮은 순

• 무한 스크롤로 조회 결과 제공.

항공권 상세

• 각 항공권의 상세정보와 가격 변화의 추이 정보를 제공.
• 비교하기에 넣은 항공권에 대해 가격 비교와 추이 비교를 그래프로 지원.
• 찜하기 기능 & 알림 기능 지원.

편도 검색 결과

왕복 검색 결과

---

🛒 Pack 서비스

여행 물품 거래 서비스

• 살게요/팔게요

  • 여행물품 중고 거래 서비스 제공.

• 빌려주세요/빌려드려요

  • 여행 물품 대여 서비스 제공.

• 모든 카테고리 조회 결과를 무한 스크롤 형태로 제공.

• 제목을 기준으로 도시와 물품으로 검색 기능 제공.

• 게시물 등록/수정 기능

  • 해당 물품에 관련된 사진을 여러장 기입 가능.

---

🪂 사용자 서비스 페이지

로그인/회원가입

• 아이디 및 닉네임 중복 검사 체크
• 로그인 시, 희망 가격을 정해놓은 찜한 항공권 알림 지원.

마이페이지

• 찜한 항공권에 대해 희망 가격 설정 할 수 있는 기능 지원.
• 희망 가격 이하의 항공권이 올라올 시, 알림 서비스 지원.
• pack 서비스에 대한 찜한 목록 제공.

채팅

• 판매자와 구매자의 실시간 채팅 제공.
• 새로운 메세지에 대한 알림과 과거 대화 내용 기록.
• 사진(여러개) 전송 가능.
• 구매완료를 등록 가능.

---

🛫 Co-work tool 🛬

🖥 개발환경

• 형상관리 : Gitlab
• 이슈관리 : Jira
• 커뮤니케이션 : Mattermost, Notion
• 디자인 : Figma

🛠 기타 편의 툴

• Postman
• Termius

✨ Front End Stack ✨

• IDE : Visual Studio Code
• language
  • node js 18.13.0
• formatter
  • eslint 8.32.0
  • prettier 2.8.3
• Library
  • react 18.2.0
  • react-dom 18.2.0
  • router
    • react-router-dom 6.9.0
  • state management tool
    • react-redux 8.0.5
    • reduxjs/toolkit 1.9.3
    • redux-persist 6.0.0
  • http
    • Axios 1.3.4
  • map
    • react-leaflet 4.2.1
  • chart
    • chart.js 4.2.1
  • chat
    • sockjs 0.3.24
    • sockjs-client 1.6.1
    • stompjs 2.3.3
    • stomp/stompjs 7.0.0
  • style
    • styled-components 5.3.9
    • react-icons 4.8.0
  • etc
    • aws-sdk 2.1349.0
    • firebase 9.19.1
    • jwt-decode 3.1.2
    • js-sha256 0.9.0

✨ Back End Stack ✨

• IDE : Intellij IDEA 2020.3
• language : Java openjdk 11.0.15 2022-04-19 LTS
• Springboot 2.7.9
  • Spring Data JPA
  • Spring Data redis
  • Lombok
  • Spring Security
  • Spring Cloud 2021.0.5
  • Spring Cloud Discovery
  • Spring Cloud Config
  • Spring Cloud AWS
  • Logback 7.2
  • Validation
  • Spring Web
  • Spring Websocket
• Build tool : Gradle 7.6
• QueryDsl 1.0.10
• firebase 7.1.1
• jackson
• Micrometer Prometheus
• com.auth0:java-jwt 4.0.0
• okhttp3 4.2.2
• hadoop 3.2.2
• spark 3.2.1

📚 DB

• Mysql 8.0.32-0ubuntu0.20.04.2

🛰 Server

• https TLS 1.0
• Ubuntu 20.0.4
• Nginx 1.18.0
• Docker 20.10.23
• Jenkins Jenkins/jenkins:lts-jdk11(Image tag name)

---

🏰 시스템 아키텍쳐

✨ 기술 특이점

🎯 빅데이터 분산 시스템 구현

• ⚙ 항공권 크롤링

  • Selenium을 통해 G마켓 항공에서 매일 미래 7일치 항공권 데이터를 수집 (1일 약 40만건)

• 🐘 Hadoop

  • 수집한 항공권 데이터를 전처리 및 부하방지를 위해 분산 저장

• 🍧 Spark

  • Python 기반의 PySpark 사용
  • HDFS에 있는 오늘 날짜의 파일에 있는 데이터를 정제해 항공권 정보를 MySQL DB에 저장
  • HDFS에 있는 과거 파일을 모두 읽어 항공권의 과거 가격 정보를 연산

🎯 MSA 설계

• 배포

  • 서비스별 배포가 가능.(배포시 전체 서비스의 중단이 없음)
  • 특정 서비스의 요구사항만 반영하여, 빠르게 배포 가능.

• 확장

  • 다양하고, 새로운 서비스에 대한 유연한 확장 가능.

• 장애

  • 일부 서비스의 장애가 전체 서비스로 확장될 가능성을 차단. (User service 에 해당하는 장애가 Owner service에 영향을 미치지 ❌)
  • 부분적 장애에 대한 격리 처리 가능.

🎯 redis사용

• redis 캐시 db

  • redis에 채팅방 정보와 채팅 메시지를 저장
  • 채팅에 사용한 Redis Cache Strategy Pattern
  • 변경이 적고 자주 사용되는 정보들(유적지 데이터/ 회원 데이터 조회) 캐시로 저장.

• redis pub/sub

  • STOMP와 Redis의 pub/sub구조를 이용하여 실시간 채팅 기능 구현

• Cache warming

  • write back후 전 날 00시부터의 채팅 메시지를 redis에 데이터를 밀어 넣어둠

• Write-Back

  • 새벽 3시마다 Spring Scheduler와 Jdbctemplate을 이용하여, Redis에 쌓아놨던 데이터들을 db로 bulk insert를 진행

• Look-Aside(Lazy Loading)

  • 클라이언트가 채팅 메시지 읽기 요청 시 Redis에서 먼저 확인
  • 더 과거의 채팅 메시지를 요청 시 DB에서 데이터를 조회하여 Redis에 저장 후, 결과 값 반환
  • 무한스크롤을 구현했기 때문에, 한번에 하루 치의 데이터씩만 Redis에 저장함.

• Redis Sentinel

  • HA를 위해 Auto Failover를 수행할 수 있는 Sentinel을 구성함
  • Redis 서버 3대, Redis Sentinel을 5대 기동

🎯 모니터링

• prometheus & grafana
  • 서버의 metric을 수집하여, 해당 서버의 부하 및 메모리 사용량 등을 시각화

🎯 log분석

• elk
  • logstash : 서버의 로그를 수집
  • elasticsearch : 로그 검색 기능
  • kibana : 로그 데이터 시각화

---

🛫 API 명세

API 명세

---

🐢 화면 설계서

화면 설계서

---

⛺ ER Diagram

[ER Diagram](https://www.erdcloud.com/d/DQ8Lr5CfJQKmjWGvL)

🍀 PickPack 팀의 개발자들을 소개합니다!!

최희수	김승희	이상민	김아린	신현광	허윤회
Leader & Backend	Backend	Backend	Backend	Frontend	Frontend

🐥 팀원 역할