From 7a50181d88fbbb66dac064e8c58b8c8b293b365b Mon Sep 17 00:00:00 2001
From: JANGHYUNn <kimjh2369@gmail.com>
Date: Fri, 27 Oct 2023 10:51:01 +0900
Subject: [PATCH] =?UTF-8?q?=EC=98=88=EC=95=BD=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=EC=83=9D=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                             |   2 +-
 .../components/menu/vertical-menu/index.js    |   3 +
 .../layouts/components/navbar/NavbarUser.js   |  12 +
 src/navigation/reservation/index.js           |  13 +
 src/router/routes/RouteReservation.js         |  10 +
 src/router/routes/index.js                    |   2 +
 .../control/setting/ControlReservation.js     | 272 +++++++++---------
 src/views/control/setting/ControlSetting.js   |  15 +-
 src/views/reservation/ReservationView.js      |   6 +
 9 files changed, 201 insertions(+), 134 deletions(-)
 create mode 100644 src/navigation/reservation/index.js
 create mode 100644 src/router/routes/RouteReservation.js
 create mode 100644 src/views/reservation/ReservationView.js

diff --git a/package-lock.json b/package-lock.json
index 74d8c6e..c7425c8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12784,7 +12784,7 @@
     "load-script": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/load-script/-/load-script-1.0.0.tgz",
-      "integrity": "sha1-BJGTngvuVkPuSUp+PaPSuscMbKQ="
+      "integrity": "sha512-kPEjMFtZvwL9TaZo0uZ2ml+Ye9HUMmPwbYRJ324qF9tqMejwykJ5ggTyvzmrbBeapCAbk98BSbTeovHEEP1uCA=="
     },
     "loader-runner": {
       "version": "2.4.0",
diff --git a/src/@core/layouts/components/menu/vertical-menu/index.js b/src/@core/layouts/components/menu/vertical-menu/index.js
index 24b9d23..3f558bc 100644
--- a/src/@core/layouts/components/menu/vertical-menu/index.js
+++ b/src/@core/layouts/components/menu/vertical-menu/index.js
@@ -10,6 +10,7 @@ import statics from '@src/navigation/statics';
 import system from '@src/navigation/system';
 import analysis from '@src/navigation/analysis';
 import flightPlan from '@src/navigation/flightPlan';
+import reservation from '@src/navigation/reservation';
 
 // ** Third Party Components
 import classnames from 'classnames';
@@ -43,6 +44,8 @@ const Sidebar = props => {
         return analysis;
       case 'flightPlan':
         return flightPlan;
+      case 'reservation':
+        return reservation;
     }
   };
 
diff --git a/src/@core/layouts/components/navbar/NavbarUser.js b/src/@core/layouts/components/navbar/NavbarUser.js
index 9a91312..1b9454f 100644
--- a/src/@core/layouts/components/navbar/NavbarUser.js
+++ b/src/@core/layouts/components/navbar/NavbarUser.js
@@ -130,6 +130,18 @@ const NavbarUser = props => {
             날씨 정보
           </NavLink>
         </NavItem>
+        <NavItem>
+          <NavLink
+            onClick={e => handlerTopMenu('reservation')}
+            active={topMenuCd === 'reservation'}
+            // active={active === '2'}
+            // onClick={() => {
+            //   toggle('2')
+            // }}
+          >
+            도심항공교통(UAM) 예약
+          </NavLink>
+        </NavItem>
       </Nav>
       {/* <div className='bookmark-wrapper d-flex align-items-center'>
         <NavItem className='d-none d-lg-block'>
diff --git a/src/navigation/reservation/index.js b/src/navigation/reservation/index.js
new file mode 100644
index 0000000..c9e39d0
--- /dev/null
+++ b/src/navigation/reservation/index.js
@@ -0,0 +1,13 @@
+export default [
+  {
+    id: 'reservation_001',
+    title: '도심항공교통(UAM) 예약',
+    navLink: '#'
+  },
+  {
+    id: 'reservation_001_01',
+    type: 'item',
+    title: '도심항공교통(UAM) 예약',
+    navLink: '/reservation'
+  }
+];
diff --git a/src/router/routes/RouteReservation.js b/src/router/routes/RouteReservation.js
new file mode 100644
index 0000000..0eec4e7
--- /dev/null
+++ b/src/router/routes/RouteReservation.js
@@ -0,0 +1,10 @@
+import { lazy } from 'react';
+
+const RouteReservation = [
+  {
+    path: '/reservation',
+    component: lazy(() => import('../../views/reservation/ReservationView'))
+  }
+];
+
+export default RouteReservation;
diff --git a/src/router/routes/index.js b/src/router/routes/index.js
index f557a51..bcf1d06 100644
--- a/src/router/routes/index.js
+++ b/src/router/routes/index.js
@@ -5,6 +5,7 @@ import RouteBasis from './RouteBasis';
 import RouteDashboard from './RouteDashboard';
 import RouteSystem from './RouteSystem';
 import RouteWeather from './RouteWeather';
+import RouteReservation from './RouteReservation';
 
 // ** Document title
 const TemplateTitle = '%s - Dron Control System';
@@ -20,6 +21,7 @@ const Routes = [
   ...RouteBasis,
   ...RouteSystem,
   ...RouteWeather,
+  ...RouteReservation,
   {
     path: '/home',
     component: lazy(() => import('../../views/Home'))
diff --git a/src/views/control/setting/ControlReservation.js b/src/views/control/setting/ControlReservation.js
index 665a88d..788ac15 100644
--- a/src/views/control/setting/ControlReservation.js
+++ b/src/views/control/setting/ControlReservation.js
@@ -34,152 +34,166 @@ export default function ControlReservation({ modal, handler }) {
     return stepNumber === currentStep ? 'active-step' : 'inactive-step';
   }
   return (
-    <div
-      className='vertically-centered-modal'
-    >
-      <Modal
+    <div className='vertically-centered-modal'>
+      {/* <Modal
         isOpen={modal}
         toggle={handler}
         className='modal-dialog-centered modal-lg modal-uam-reservation'
-      >
-        <ModalHeader
+      > */}
+      {/* <ModalHeader
           toggle={handler}
-        >
-          {search ? (
-            reserveStep !== 4 ? (
-              <div className='uam-reservation-header'>
-                <h5>도심항공교통(UAM) 예약</h5>
-                <div>
-                  <ul className='step'>
-                    <li className={getStepColorClass(1, step)}>➀ 항공교통 조회</li>
-                    <li className={getStepColorClass(2, step)}>➁ 항공교통 선택</li>
-                    <li className={getStepColorClass(3, step)}>➂ 탑승정보 입력</li>
-                    <li className={getStepColorClass(4, step)}>➃ 결제</li>
-                  </ul>
-                </div>
-              </div>
-            ) : (
-              <div className='uam-reservation-header'>
-                <h4>도심항공교통(UAM) 예약</h4>
-                <div>
-                  결제완료
-                </div>
-              </div>
-            )
-          ) : (
-            <div className='uam-reservation-header'>
-              <h5>도심항공교통(UAM) 예약</h5>
+        > */}
+      {search ? (
+        reserveStep !== 4 ? (
+          <div className='uam-reservation-header'>
+            <h5>도심항공교통(UAM) 예약</h5>
+            <div>
               <ul className='step'>
                 <li className={getStepColorClass(1, step)}>➀ 항공교통 조회</li>
                 <li className={getStepColorClass(2, step)}>➁ 항공교통 선택</li>
                 <li className={getStepColorClass(3, step)}>➂ 탑승정보 입력</li>
                 <li className={getStepColorClass(4, step)}>➃ 결제</li>
               </ul>
-          </div>  
-          )}
-        </ModalHeader>
-        <ModalBody>
-          {!search ? (
+            </div>
+          </div>
+        ) : (
+          <div className='uam-reservation-header'>
+            <h4>도심항공교통(UAM) 예약</h4>
+            <div>결제완료</div>
+          </div>
+        )
+      ) : (
+        <div className='uam-reservation-header'>
+          <h5>도심항공교통(UAM) 예약</h5>
+          <ul className='step'>
+            <li className={getStepColorClass(1, step)}>➀ 항공교통 조회</li>
+            <li className={getStepColorClass(2, step)}>➁ 항공교통 선택</li>
+            <li className={getStepColorClass(3, step)}>➂ 탑승정보 입력</li>
+            <li className={getStepColorClass(4, step)}>➃ 결제</li>
+          </ul>
+        </div>
+      )}
+      {/* </ModalHeader> */}
+      {/* <ModalBody> */}
+      {!search ? (
+        <div>
+          <div>
+            <Nav justified pills>
+              <NavItem>
+                <NavLink
+                  active={activeTab === 1}
+                  onClick={() => setActiveTab(1)}
+                >
+                  <span>왕복</span>
+                </NavLink>
+              </NavItem>
+              <NavItem>
+                <NavLink
+                  active={activeTab === 2}
+                  onClick={() => setActiveTab(2)}
+                >
+                  <span>편도</span>
+                </NavLink>
+              </NavItem>
+            </Nav>
+          </div>
+          <div className='uam-reservation-tab-list'>
+            <div
+              className={`list ${airTraficCheck === 1 ? 'active' : ''}`}
+              onClick={() => {
+                setAirTraficCheck(1);
+              }}
+            >
+              출발지
+            </div>
+            <div
+              className={`list ${airTraficCheck === 2 ? 'active' : ''}`}
+              onClick={() => {
+                setAirTraficCheck(2);
+              }}
+            >
+              도착지
+            </div>
+            <div
+              className={`list ${airTraficCheck === 3 ? 'active' : ''}`}
+              onClick={() => {
+                setAirTraficCheck(3);
+              }}
+            >
+              탑승일
+            </div>
+            <div
+              className={`list ${airTraficCheck === 4 ? 'active' : ''}`}
+              onClick={() => {
+                setAirTraficCheck(4);
+              }}
+            >
+              탑승객
+            </div>
+            <div
+              className={`list finish ${isChoise ? 'active' : ''}`}
+              onClick={() => {
+                setSearch(true);
+                setStep(2);
+              }}
+            >
+              항공교통 조회
+            </div>
+          </div>
+
+          <>
+            {airTraficCheck === 1 && <Step1 />}
+            {airTraficCheck === 2 && <Step2 />}
+            {airTraficCheck === 3 && <Step3 />}
+            {airTraficCheck === 4 && <Step4 setIsChoise={setIsChoise} />}
+          </>
+        </div>
+      ) : (
+        <>
+          {reserveStep === 1 && <ReserveStep1 />}
+          {reserveStep === 2 && <ReserveStep2 />}
+          {reserveStep === 3 && <ReserveStep3 />}
+          {reserveStep === 4 && <ReserveStep4 />}
+          {reserveStep !== 4 ? (
             <div>
               <div>
-                <Nav justified pills>
-                  <NavItem>
-                    <NavLink
-                      active={activeTab === 1}
-                      onClick={() => setActiveTab(1)}
-                    >
-                      <span>
-                        왕복
-                      </span>
-                    </NavLink>
-                  </NavItem>
-                  <NavItem>
-                    <NavLink
-                      active={activeTab === 2}
-                      onClick={() => setActiveTab(2)}
-                    >
-                      <span>
-                        편도
-                      </span>
-                    </NavLink>
-                  </NavItem>
-                </Nav>
+                <button
+                  onClick={() => {
+                    if (reserveStep === 1) {
+                      setIsChoise(false);
+                      setSearch(false);
+                      setAirTraficCheck(1);
+                    } else {
+                      setReserveStep(reserveStep - 1);
+                      setStep(step - 1);
+                    }
+                  }}
+                >
+                  취소
+                </button>
               </div>
-              <div className='uam-reservation-tab-list'>
-                <div className={`list ${airTraficCheck === 1 ? 'active' : ''}`} onClick={() => {setAirTraficCheck(1);}}>
-                  출발지
-                </div>
-                <div className={`list ${airTraficCheck === 2 ? 'active' : ''}`} onClick={() => {setAirTraficCheck(2);}}>
-                  도착지
-                </div>
-                <div className={`list ${airTraficCheck === 3 ? 'active' : ''}`} onClick={() => {setAirTraficCheck(3);}}>
-                  탑승일
-                </div>
-                <div className={`list ${airTraficCheck === 4 ? 'active' : ''}`} onClick={() => {setAirTraficCheck(4);}}>
-                  탑승객
-                </div>
-                <div className={`list finish ${isChoise ? 'active' : ''}`} onClick={() => {setSearch(true); setStep(2);}}>
-                  항공교통 조회
-                </div>
+              <div>
+                <button
+                  onClick={() => {
+                    setReserveStep(reserveStep + 1);
+                    setStep(step + 1);
+                  }}
+                >
+                  {reserveStep === 3 ? '결제하기' : '다음'}
+                </button>
               </div>
-
-              <>
-                {airTraficCheck === 1 && <Step1 />}
-                {airTraficCheck === 2 && <Step2 />}
-                {airTraficCheck === 3 && <Step3 />}
-                {airTraficCheck === 4 && <Step4 setIsChoise={setIsChoise} />}
-              </>
             </div>
           ) : (
-            <>
-              {reserveStep === 1 && <ReserveStep1 />}
-              {reserveStep === 2 && <ReserveStep2 />}
-              {reserveStep === 3 && <ReserveStep3 />}
-              {reserveStep === 4 && <ReserveStep4 />}
-              {reserveStep !== 4 ? (
-                <div>
-                  <div>
-                    <button
-                      onClick={() => {
-                        if (reserveStep === 1) {
-                          setIsChoise(false);
-                          setSearch(false);
-                          setAirTraficCheck(1);
-                        } else {
-                          setReserveStep(reserveStep - 1);
-                          setStep(step - 1);
-                        }
-                      }}
-                    >
-                      취소
-                    </button>
-                  </div>
-                  <div>
-                    <button
-                      onClick={() => {
-                        setReserveStep(reserveStep + 1);
-                        setStep(step + 1);
-                      }}
-                    >
-                      {reserveStep === 3 ? '결제하기' : '다음'}
-                    </button>
-                  </div>
-                </div>
-              ) : (
-                <div>
-                  <div>
-                    <button
-                      onClick={handler}
-                    >
-                      확인
-                    </button>
-                  </div>
-                </div>
-              )}
-            </>
+            <div>
+              <div>
+                <button onClick={handler}>확인</button>
+              </div>
+            </div>
           )}
-        </ModalBody>
-      </Modal>
+        </>
+      )}
+      {/* </ModalBody> */}
+      {/* </Modal> */}
     </div>
   );
 }
diff --git a/src/views/control/setting/ControlSetting.js b/src/views/control/setting/ControlSetting.js
index 28deb54..9c93a29 100644
--- a/src/views/control/setting/ControlSetting.js
+++ b/src/views/control/setting/ControlSetting.js
@@ -4,6 +4,7 @@ import { BiBuildings, BiGridAlt } from 'react-icons/bi';
 import { CgTrees } from 'react-icons/cg';
 import { VscRadioTower } from 'react-icons/vsc';
 import { useDispatch, useSelector } from 'react-redux';
+import { useHistory } from 'react-router-dom';
 import {
   Button,
   InputGroup,
@@ -24,6 +25,7 @@ import ControlFsm from './ControlFsm';
 const ControlSetting = props => {
   const [modal, setModal] = useState(false);
   const dispatch = useDispatch();
+  const history = useHistory();
 
   const mapControl = useSelector(state => state.controlMapReducer);
 
@@ -39,7 +41,7 @@ const ControlSetting = props => {
   //   setModal(!modal);
   // };
 
-  const handlerModal = (modalName) => {
+  const handlerModal = modalName => {
     setModal(modalName);
   };
 
@@ -188,8 +190,13 @@ const ControlSetting = props => {
         <div className='layer-content-box'>
           <div className='map-btn'>
             <ButtonGroup>
-              <Button color='primary' onClick={() => handlerModal('reservation')}>
-              도심항공교통(UAM) 예약 바로가기
+              <Button
+                color='primary'
+                onClick={() => {
+                  history.push('');
+                }}
+              >
+                도심항공교통(UAM) 예약 바로가기
               </Button>
             </ButtonGroup>
           </div>
@@ -203,7 +210,7 @@ const ControlSetting = props => {
           <div className='map-btn'>
             <ButtonGroup>
               <Button color='primary' onClick={() => handlerModal('fsm')}>
-              FSM 비행계획서 작성 바로가기 
+                FSM 비행계획서 작성 바로가기
               </Button>
             </ButtonGroup>
           </div>
diff --git a/src/views/reservation/ReservationView.js b/src/views/reservation/ReservationView.js
new file mode 100644
index 0000000..d90d3f6
--- /dev/null
+++ b/src/views/reservation/ReservationView.js
@@ -0,0 +1,6 @@
+import ControlReservation from '../control/setting/ControlReservation';
+import '../../assets/css/custom.css';
+
+export default function ReservationView() {
+  return <ControlReservation />;
+}