✈️ 프로젝트 소개

취뽀 FREEPASS 웹 사이트

🐥 프론트, 백엔드 깃허브

팀 프로젝트 프론트엔드 GitHub
팀 프로젝트 백엔드 GitHub

✈️ JEJUPASS 웹 싸이트를 모티브한 팀 프로젝트

• 제주패스는 제주 여행의 슈퍼 앱으로 전세계 실시간 최저가 항공, 제주 맛집까지 제주도 여행의 모든 것을 확인할 수 있는 웹 사이트 입니다.
• 저희는 그 중에서도 '항공 페이지'에 집중하여 구현하였습니다.
• 또한 '깨깨오항공', '코팡항공' 등으로 정해놓고 이 기업들을 향해 날아가는 컨셉으로 재미있게 구성해보았습니다!

📅 작업기간

2022년 8월 1일(월) ~ 2022년 8월 12일(금) : 총 10일

👥 우리 팀 일원!

Front-End : 🐥 노정은, 🐶 엄성훈, 🐱 이현주, 🦆 이혜진
Back-end : ⚽️ 손찬규, 🦅 박정용

📅 Front-End 사용한 기술 스택

👩🏻‍💻 FRONTEND 각 담당페이지

🐥 노정은님, 🐶 엄성훈님, 🐱 이현주님, 🦆 이혜진님

• (클릭 시 블로그로 이동!)
• Navigation Bar 🐱
• Footer 🐱
• 회원가입, 로그인 페이지 🐱 / 카카오 로그인 (OAuth2.0)
• 메인 페이지 🐱 / Swiper(Carousel)
• 지도 페이지 🐶 / 카카오 맵 API
• ESG 페이지 🐶 / Ant Design(Pull Page)
• 항공 메인 페이지 🐶 / Swiper(Carousel), Ant Design(Carousel)
• 항공 모달 (항공권 옵션 선택) (query parameter) 🐥 / DatePicker, React Modal, React font awesome
• 항공권 리스트 페이지 (query parameter) 🦆, 🐥
• 항공권 예약 및 결제 페이지 (navigate state 전달) 🐶
• 로딩 페이지 🐥 / React Spinner, React icon

📅 구현기능

• 카카오 맵 API를 이용해서 backEnd와 통신해서 data로 화면에 렌더링
  
• 모달창에서 선택된 항공권 리스트를 화면에 렌더링
  
• react swiper, anti design 라이브러리를 사용해서 mock data로 화면 렌더링
  
• fetch로 backEnd와 통신하여 항공 모달 도시 검색기능 구현
  
• query parameter, navigate, location로 항공 모달에서 항공 리스트 data로 데이터 전송
  
• 항공 리스트 페이지 query parameter로 필터링 가능
  
• 항공 모달 5개의 tap menu안에 각각 4개의 tap menu 기능
  
• OAuth 2.0을 이용한 소셜 로그인 구현
  
• git, 오픈소스에 올리면 안되는 값들을 외부파일 (.env)에 환경변수를 정의하여 로그인 구현에 사용
  

🎥 각 페이지별 View

유튜브 데모 영상

메인페이지	ESG페이지

항공페이지	로그인

모달페이지	로딩페이지

리스트페이지	예약결제페이지

💫 프로젝트 협업 Tool

• GitHub : 각 페이지별 branch 관리.

• Slack : 팀원간의 실시간 소통 창구.

• Trello : 기능 단위로 카드를 생성, Sprint 단위로 진행했는지와 Stand up 미팅 툴로 활용.

• Notion : 회의정리 기록, 오늘의 공유/질문 사항, 현재 진행 사항, blocker 공유, 기능 단위 페이지 셍성 후 공유 및 기록.

트렐로	노션
깃허브	슬랙

✈️ 회고록

• 🐥 노정은님 회고록(1) - 기능 구현에 대한 회고
  
• 🐥 노정은님 회고록(2) - 팀 프로젝트에 대한 회고
  

Reference

• 이 프로젝트는 제주패스를 참조하여 학습목적으로 만들었습니다.
• 학습용으로 만들었기 때문에 이 코드를 활용하여 이득을 취하거나 무단 배포할 경우 법적으로 문제될 수 있습니다.
• 이 프로젝트에서 사용하고 있는 사진 대부분은 위코드에서 구매한 것이므로 해당 프로젝트 외부인이 사용할 수 없습니다.