/fastscanner

항공권 검색 서비스 (2020. 02)

Primary LanguageJavaScript

FastScanner

팀명

FastScanner


멤버

이철환(팀장), 김관식, 정다희


주제

SkyScanner api를 활용한 실시간 항공권 예약 서비스


주제 선정 이유

SkyScanner는 항공권에 대한 실시간 데이터를 사용자가 정한 여러 조건에 따라 보여주는 React 기반의 사이트입니다. 사이트 내의 기능을 구현하기 위해 다양한 React기술을 활용할 수 있고, 대용량 데이터 활용과 최적화를 경험하기에 적합하다고 판단했습니다.

또한 기존 SkyScanner에서 사용자에게 더 나은 경험을 제공하기 위해 다양한 UI/UX를 고민해볼 수 있는 요소가 많다고 생각하여 선정했습니다.


MVP

  1. 항공권 검색창 구현
  2. 검색 옵션 구현(경유, 출발 시간대, 총 소요시간)
  3. 검색 결과 및 옵션에 따른 View 구현

플로우차트

플로우차트


일정

일정관리


활용 스펙

주요 스펙

  1. HTML5
  2. CSS3
  3. JavaScript
  4. ReactJS

추가 스펙

  1. styled-components
  2. axios
  3. react-error-boundary
  4. react-dates
  5. moment
  6. react-router
  7. connected-react-router
  8. redux
  9. redux-saga
  10. redux-actions
  11. redux-devtools-extension
  12. uuid
  13. query-string
  14. react-infinite-scroller
  15. react-content-loader
  16. react-scroll
  17. lodash
  18. polished
  19. material-ui

버전관리

GIT, GITHUB


개발사항

  1. 반응형 UI 구현
  2. 항공권 검색창 구현
  3. 검색 옵션 구현(경유, 출발 시간대, 총 소요시간)
  4. 검색 결과 및 옵션에 따른 View 구현
  5. 최저가, 최단시간, 추천순에 따른 필터된 데이터 제공
  6. 데이터 로딩 중 progress bar, content-loader View와 펜딩 데이터 제공
  7. 주소값에 따른 검색 데이터 결과값 노출
  8. 검색 결과 무한 스크롤
  9. 필터링 설정 후 초기화(전체보기) 구현