|
|
|
@ -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> |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|