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
+
+
+
+
+
+
+
+ 63,000
+ KRW
+
+
잔여7석
+
+
+
+
+
+
+ 76,000{' '}
+
+ KRW
+
+
잔여9석
+
+
+
+
+
+
2시간 5분
+
+ 10:40----------------------12:45
+
+
+ +1 day
+
+
+
+
+
+
+
+ 63,000
+ KRW
+
+
잔여3석
+
+
+
+
+
+ 76,000
+ KRW
+
+
잔여9석
+
+
+
+
+
+
여정 2
+
+
+ 여의도 공원
+
+
+ ➔
+
+
+ 고양 킨텍스
+
+
+
+
+
+
+ 출발/도착시간 (비행시간)
+
+
편명/기종
+
특가운임
+
할인운임
+
정규운임
+
+
+
+
2시간 5분
+
+ 08:40----------------------10:45
+
+
+
+
+
+
+
+
+ 63,000{' '}
+
+ KRW
+
+
잔여7석
+
+
+
+
+
+ 76,000
+ KRW
+
+
잔여9석
+
+
+
+
+
+
2시간 5분
+
+ 10:40----------------------12:45
+
+
+ +1 day
+
+
+
+
+
+
+
+ 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 (
+
+
+
+
+
+ -
+ 아라뱃길
+
+ -
+ 드론시험 인증센터
+
+ -
+ 계양 신도시
+
+
+
+ -
+ 한강
+
+ -
+ 고양 킨텍스
+
+ -
+ 김포공항
+
+ -
+ 여의도 공원
+
+
+
+ -
+ 도심
+
+ -
+ 잠실한강공원
+
+ -
+ 수서역
+
+
+
+
+
+
+ 최근 조회하신 여정
+
+
+
+
+
+ {'드론시험 인증센터 -> 계양 신도시 (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 (
+
+
+
+
+
+ -
+ 아라뱃길
+
+ -
+ 드론시험 인증센터
+
+ -
+ 계양 신도시
+
+
+
+ -
+ 한강
+
+ -
+ 고양 킨텍스
+
+ -
+ 김포공항
+
+ -
+ 여의도 공원
+
+
+
+ -
+ 도심
+
+ -
+ 잠실한강공원
+
+ -
+ 수서역
+
+
+
+
+
+ );
+}
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 (
+
+ );
+}
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 (
+
+
+
+
+
+ 성인 (만 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 };