diff --git a/src/views/control/setting/ControlReservation.js b/src/views/control/setting/ControlReservation.js index 734e90e..a530f9d 100644 --- a/src/views/control/setting/ControlReservation.js +++ b/src/views/control/setting/ControlReservation.js @@ -1,3 +1,4 @@ +import { useState } from 'react'; import { Badge, Button, @@ -5,10 +6,29 @@ import { InputGroup, Modal, ModalHeader, - ModalBody + ModalBody, + Nav, + NavItem, + NavLink } from 'reactstrap'; +import { + Step1, + Step2, + Step3, + Step4, + ReserveStep1, + ReserveStep2, + ReserveStep3 +} from './steps'; export default function ControlReservation({ modal, handler }) { + const [activeTab, setActiveTab] = useState(1); + const [step, setStep] = useState(1); + const [airTraficCheck, setAirTraficCheck] = useState(1); + const [isChoise, setIsChoise] = useState(false); + const [search, setSearch] = useState(false); + const [reserveStep, setReserveStep] = useState(1); + return (
- 예약 프로세스 + + {search ? ( +
+
도심항공교통(UAM) 예약
+
+
    +
  • + ➀ 항공교통 조회 +
    • +
  • + ➁ 항공교통 선택{' '} +
    • +
  • + ➂ 탑승정보 입력{' '} +
    • +
  • + ➃ 결제 +
    • +
+
+
+ ) : ( + '도심항공교통(UAM) 예약' + )} + -
- 예약프로세스 입니다. 예약프로세스 입니다. 예약프로세스 입니다. - 예약프로세스 입니다. 예약프로세스 입니다. 예약프로세스 입니다. - 예약프로세스 입니다. 예약프로세스 입니다. 예약프로세스 입니다. - 예약프로세스 입니다. 예약프로세스 입니다. 예약프로세스 입니다. - 예약프로세스 입니다. 예약프로세스 입니다. 예약프로세스 입니다. - 예약프로세스 입니다. 예약프로세스 입니다. 예약프로세스 입니다. - 예약프로세스 입니다. 예약프로세스 입니다. 예약프로세스 입니다. - 예약프로세스 입니다. -
+ {!search ? ( +
+
+
    +
  • + ➀ 항공교통 조회 +
    • +
  • + ➁ 항공교통 선택{' '} +
    • +
  • + ➂ 탑승정보 입력{' '} +
    • +
  • + ➃ 결제 +
    • +
+
+
+ +
+
+
{ + setAirTraficCheck(1); + }} + > + 출발지 +
+
{ + setAirTraficCheck(2); + }} + > + 도착지 +
+
{ + setAirTraficCheck(3); + }} + > + 탑승일 +
+
{ + setAirTraficCheck(4); + }} + > + 탑승객 +
+
{ + setSearch(true); + setStep(2); + }} + > + 항공교통 조회 +
+
+ + <> + {airTraficCheck === 1 && } + {airTraficCheck === 2 && } + {airTraficCheck === 3 && } + {airTraficCheck === 4 && } + +
+ ) : ( + <> + {reserveStep === 1 && } + {reserveStep === 2 && } + {reserveStep === 3 && } +
+
+ +
+
+ +
+
+ + )}
diff --git a/src/views/control/setting/steps/ReserveStep1.js b/src/views/control/setting/steps/ReserveStep1.js new file mode 100644 index 0000000..1586538 --- /dev/null +++ b/src/views/control/setting/steps/ReserveStep1.js @@ -0,0 +1,421 @@ +export default function ReserveStep1() { + return ( +
+
+ 여정 1 +
+
+ 고양 킨텍스 +
+
+ ➔ +
+
+ 여의도 공원 +
+
+
+
+
+
+ 출발/도착시간 (비행시간) +
+
편명/기종
+
특가운임
+
할인운임
+
정규운임
+
+
+
+ 2시간 5분 +
+ 08:40----------------------10:45 +
+
+
+
3P1003
+
B737-800
+
+
+
매진
+
+
+
+
+ 63,000 + KRW +
+ 잔여7석 +
+
+
+
+
+ + 76,000{' '} + + KRW +
+ 잔여9석 +
+
+
+
+
+ 2시간 5분 +
+ 10:40----------------------12:45 +
+
+ +1 day +
+
+
+
3P1003
+
B737-800
+
+
+
매진
+
+
+
+
+ 63,000 + KRW +
+ 잔여3석 +
+
+
+
+
+ 76,000 + KRW +
+ 잔여9석 +
+
+
+
+
+ 여정 2 +
+
+ 여의도 공원 +
+
+ ➔ +
+
+ 고양 킨텍스 +
+
+
+
+
+
+ 출발/도착시간 (비행시간) +
+
편명/기종
+
특가운임
+
할인운임
+
정규운임
+
+
+
+ 2시간 5분 +
+ 08:40----------------------10:45 +
+
+
+
3P1003
+
B737-800
+
+
+
매진
+
+
+
+
+ + 63,000{' '} + + KRW +
+ 잔여7석 +
+
+
+
+
+ 76,000 + KRW +
+ 잔여9석 +
+
+
+
+
+ 2시간 5분 +
+ 10:40----------------------12:45 +
+
+ +1 day +
+
+
+
3P1003
+
B737-800
+
+
+
매진
+
+
+
+
+ 63,000 + KRW +
+ 잔여3석 +
+
+
+
+
+ 76,000 + KRW +
+ 잔여9석 +
+
+
+
+
+ ); +} diff --git a/src/views/control/setting/steps/ReserveStep2.js b/src/views/control/setting/steps/ReserveStep2.js new file mode 100644 index 0000000..5982811 --- /dev/null +++ b/src/views/control/setting/steps/ReserveStep2.js @@ -0,0 +1,221 @@ +export default function ReserveStep2() { + return ( +
+
+ 성인 1 +
+
+
+
+
+ 성명 +
+ + + +
+
+ * 탑승자의 성명은 신분증상의 성명과 동일하게 입력하여 주시기 + 바랍니다. +
+
+
+ 신분할인 (여정1) +
+ +
+
+ * 선택한 할인율 적용된 금액은 다음 단계에서 확인 가능합니다. +
+
+
+ 신분할인 (여정2) +
+ +
+
+
+
+
+ 성별 +
+ + 남자 + + + 여자 + +
+
+
+
+
+
+
+
+
+ 예매자 정보 +
+
+ * 반드시 연락 가능한 연락처와 이메일을 입력하십시오. +
+
+
+
+
+
+ 연락처 +
+ + + + +
+
+ * 탑승자의 성명은 신분증상의 성명과 동일하게 입력하여 주시기 + 바랍니다. +
+
+
+
+
+ 이메일 +
+ + @ + +
+
+
+
+
+
+ ); +} diff --git a/src/views/control/setting/steps/ReserveStep3.js b/src/views/control/setting/steps/ReserveStep3.js new file mode 100644 index 0000000..a77a264 --- /dev/null +++ b/src/views/control/setting/steps/ReserveStep3.js @@ -0,0 +1,128 @@ +export default function ReserveStep3() { + return ( +
+
+
+ 결제 정보 +
+
+
+
+ 결제 수단 +
+
+ 신용카드 +
+
+ 카카오페이 +
+
+ 계좌이체 +
+
+
+
+ 결제 카드 +
+
+ +
+
+ +
+
+
+ ); +} diff --git a/src/views/control/setting/steps/Step1.js b/src/views/control/setting/steps/Step1.js new file mode 100644 index 0000000..80f98aa --- /dev/null +++ b/src/views/control/setting/steps/Step1.js @@ -0,0 +1,247 @@ +export default function Step1() { + return ( +
+
+
출발지 선택
+
+ X +
+
+
+
+
    +
  • + 아라뱃길 +
    • +
  • + 드론시험 인증센터 +
    • +
  • + 계양 신도시 +
    • +
+
    +
  • + 한강 +
    • +
  • + 고양 킨텍스 +
    • +
  • + 김포공항 +
    • +
  • + 여의도 공원 +
    • +
+
    +
  • + 도심 +
    • +
  • + 잠실한강공원 +
    • +
  • + 수서역 +
    • +
+
+
+
+ + 최근 조회하신 여정 + +
+
+
+ + {'드론시험 인증센터 -> 계양 신도시 (VVO)'} + +
+ X +
+
+
+ + {'고양 킨텍스 -> 여의도 공원'} + +
+ X +
+
+
+
+
+
+ ); +} diff --git a/src/views/control/setting/steps/Step2.js b/src/views/control/setting/steps/Step2.js new file mode 100644 index 0000000..b801c8f --- /dev/null +++ b/src/views/control/setting/steps/Step2.js @@ -0,0 +1,185 @@ +export default function Step2() { + return ( +
+
+
도착지 선택
+
+ X +
+
+
+
+
    +
  • + 아라뱃길 +
    • +
  • + 드론시험 인증센터 +
    • +
  • + 계양 신도시 +
    • +
+
    +
  • + 한강 +
    • +
  • + 고양 킨텍스 +
    • +
  • + 김포공항 +
    • +
  • + 여의도 공원 +
    • +
+
    +
  • + 도심 +
    • +
  • + 잠실한강공원 +
    • +
  • + 수서역 +
    • +
+
+
+
+ ); +} diff --git a/src/views/control/setting/steps/Step3.js b/src/views/control/setting/steps/Step3.js new file mode 100644 index 0000000..c214e3f --- /dev/null +++ b/src/views/control/setting/steps/Step3.js @@ -0,0 +1,70 @@ +import Flatpickr from 'react-flatpickr'; +import 'flatpickr/dist/themes/material_green.css'; +export default function Step3() { + return ( +
+
+
탑승일 선택
+
+ +
+ X +
+
+
+
+
+ + + +
+
+
+ ); +} diff --git a/src/views/control/setting/steps/Step4.js b/src/views/control/setting/steps/Step4.js new file mode 100644 index 0000000..586e420 --- /dev/null +++ b/src/views/control/setting/steps/Step4.js @@ -0,0 +1,185 @@ +export default function Step4({ setIsChoise }) { + return ( +
+
+
탑승객 수 선택
+
+ X +
+
+
+
+
+ 성인 (만 13세 이상){' '} +
+
+ + 성인 1 + +
+
+
+
+ 소아 (만 2세 ~ 13세 미만){' '} +
+
+ + 소아 0 + +
+
+
+
+ 유아 (만 2세 미만){' '} +
+
+ + 유아 0 + +
+
+
+ +
+
+
+ ); +} diff --git a/src/views/control/setting/steps/index.js b/src/views/control/setting/steps/index.js new file mode 100644 index 0000000..1dce2b5 --- /dev/null +++ b/src/views/control/setting/steps/index.js @@ -0,0 +1,9 @@ +import Step1 from './Step1'; +import Step2 from './Step2'; +import Step3 from './Step3'; +import Step4 from './Step4'; +import ReserveStep1 from './ReserveStep1'; +import ReserveStep2 from './ReserveStep2'; +import ReserveStep3 from './ReserveStep3'; + +export { Step1, Step2, Step3, Step4, ReserveStep1, ReserveStep2, ReserveStep3 };