- 제주패스는 제주 여행의 슈퍼 앱으로 전세계 실시간 최저가 항공, 제주 맛집까지 제주도 여행의 모든 것을 확인할 수 있는 웹 사이트 입니다.
- 저희는 그 중에서도 '항공 페이지'에 집중하여 구현하였습니다.
- 또한 '깨깨오항공', '코팡항공' 등으로 정해놓고 이 기업들을 향해 날아가는 컨셉으로 재미있게 구성해보았습니다!
2022년 8월 1일(월) ~ 2022년 8월 12일(금) : 총 10일
Front-End : 🐥 노정은, 🐶 엄성훈, 🐱 이현주, 🦆 이혜진
Back-end : ⚽️ 손찬규, 🦅 박정용
- (클릭 시 블로그로 이동!)
- 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)에 환경변수를 정의하여 로그인 구현에 사용
| 메인페이지 | ESG페이지 |
|---|---|
|
|
| 항공페이지 | 로그인 |
|---|---|
|
|
| 모달페이지 | 로딩페이지 |
|---|---|
|
|
| 리스트페이지 | 예약결제페이지 |
|---|---|
|
|
-
GitHub : 각 페이지별 branch 관리.
-
Slack : 팀원간의 실시간 소통 창구.
-
Trello : 기능 단위로 카드를 생성, Sprint 단위로 진행했는지와 Stand up 미팅 툴로 활용.
-
Notion : 회의정리 기록, 오늘의 공유/질문 사항, 현재 진행 사항, blocker 공유, 기능 단위 페이지 셍성 후 공유 및 기록.
| 트렐로 | 노션 |
|---|---|
| 깃허브 | 슬랙 |
|
|
|
|
- 이 프로젝트는 제주패스를 참조하여 학습목적으로 만들었습니다.
- 학습용으로 만들었기 때문에 이 코드를 활용하여 이득을 취하거나 무단 배포할 경우 법적으로 문제될 수 있습니다.
- 이 프로젝트에서 사용하고 있는 사진 대부분은 위코드에서 구매한 것이므로 해당 프로젝트 외부인이 사용할 수 없습니다.