|
|
|
@ -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'> |
|
|
|
|
{/* <Modal |
|
|
|
|
isOpen={modal} |
|
|
|
|
toggle={handler} |
|
|
|
|
className='modal-dialog-centered modal-lg modal-uam-reservation' |
|
|
|
|
> */} |
|
|
|
|
{/* <ModalHeader |
|
|
|
|
toggle={handler} |
|
|
|
|
> */} |
|
|
|
|
<CustomMainLayout title={titleName}> |
|
|
|
|
<div className='uam-reservation'> |
|
|
|
|
<div> |
|
|
|
|
{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(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> |
|
|
|
|
<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> */} |
|
|
|
|
{/* <ModalBody> */} |
|
|
|
|
</div> |
|
|
|
|
<div> |
|
|
|
|
{!search ? ( |
|
|
|
|
<div> |
|
|
|
|
<div> |
|
|
|
@ -192,8 +191,8 @@ export default function ControlReservation({ modal, handler }) {
|
|
|
|
|
)} |
|
|
|
|
</> |
|
|
|
|
)} |
|
|
|
|
{/* </ModalBody> */} |
|
|
|
|
{/* </Modal> */} |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</CustomMainLayout> |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|