레이아웃정리-eun

src/assets/css/custom.css

@@ -847,12 +847,10 @@ background-size: 75% auto;
 .modal-video{display:flex;align-items: center;justify-content: center;}
 .modal-video>.modal-content{height:90vh;}
 
-.modal-uam-reservation{min-width:1200px}
+.uam-reservation{min-width:1200px}
-.modal-uam-reservation .modal-title{width:100%;}
+.uam-reservation .nav-link{transition:0.3s ease;-webkit-transition:0.3s ease;}
-.modal-uam-reservation .modal-body{padding:1.4rem}
+.uam-reservation .nav-link{border:0px;background-color:#242b3d}
-.modal-uam-reservation .nav-link{transition:0.3s ease;-webkit-transition:0.3s ease;}
+.uam-reservation .nav-link.active span{font-weight:500}
-.modal-uam-reservation .nav-link{border:0px;background-color:#242b3d}
-.modal-uam-reservation .nav-link.active span{font-weight:500}
 .uam-reservation-header{display:flex;width:100%;align-items:center;justify-content:space-between;}
 .uam-reservation-header h5{font-weight:500;}
 .uam-reservation-header .step{display:flex;}

src/views/control/setting/ControlReservation.js

@@ -21,6 +21,7 @@ import {
   ReserveStep3,
   ReserveStep4
 } from './steps';
+import { CustomMainLayout } from '../../../components/layout/CustomMainLayout';
 
 export default function ControlReservation({ modal, handler }) {
   const [activeTab, setActiveTab] = useState(1);
@@ -29,42 +30,40 @@ export default function ControlReservation({ modal, handler }) {
   const [isChoise, setIsChoise] = useState(false);
   const [search, setSearch] = useState(false);
   const [reserveStep, setReserveStep] = useState(1);
+  const titleName = '도심항공교통(UAM) 예약';
 
   function getStepColorClass(stepNumber, currentStep) {
     return stepNumber === currentStep ? 'active-step' : 'inactive-step';
   }
   return (
-    <div className='vertically-centered-modal'>
+    <CustomMainLayout title={titleName}>
-      {/* <Modal
+      <div className='uam-reservation'>
-        isOpen={modal}
+        <div>
-        toggle={handler}
-        className='modal-dialog-centered modal-lg modal-uam-reservation'
-      > */}
-      {/* <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(1, step)}>
-                <li className={getStepColorClass(2, step)}>➁ 항공교통 선택</li>
+                      ➀ 항공교통 조회
-                <li className={getStepColorClass(3, step)}>➂ 탑승정보 입력</li>
+                    </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>
               <ul className='step'>
                 <li className={getStepColorClass(1, step)}>➀ 항공교통 조회</li>
                 <li className={getStepColorClass(2, step)}>➁ 항공교통 선택</li>
@@ -73,8 +72,8 @@ export default function ControlReservation({ modal, handler }) {
               </ul>
             </div>
           )}
-      {/* </ModalHeader> */}
+        </div>
-      {/* <ModalBody> */}
+        <div>
           {!search ? (
             <div>
               <div>
@@ -192,8 +191,8 @@ export default function ControlReservation({ modal, handler }) {
               )}
             </>
           )}
-      {/* </ModalBody> */}
-      {/* </Modal> */}
         </div>
+      </div>
+    </CustomMainLayout>
   );
 }