|
|
@ -21,6 +21,7 @@ import { |
|
|
|
ReserveStep3, |
|
|
|
ReserveStep3, |
|
|
|
ReserveStep4 |
|
|
|
ReserveStep4 |
|
|
|
} from './steps'; |
|
|
|
} from './steps'; |
|
|
|
|
|
|
|
import { CustomMainLayout } from '../../../components/layout/CustomMainLayout'; |
|
|
|
|
|
|
|
|
|
|
|
export default function ControlReservation({ modal, handler }) { |
|
|
|
export default function ControlReservation({ modal, handler }) { |
|
|
|
const [activeTab, setActiveTab] = useState(1); |
|
|
|
const [activeTab, setActiveTab] = useState(1); |
|
|
@ -29,25 +30,40 @@ export default function ControlReservation({ modal, handler }) { |
|
|
|
const [isChoise, setIsChoise] = useState(false); |
|
|
|
const [isChoise, setIsChoise] = useState(false); |
|
|
|
const [search, setSearch] = useState(false); |
|
|
|
const [search, setSearch] = useState(false); |
|
|
|
const [reserveStep, setReserveStep] = useState(1); |
|
|
|
const [reserveStep, setReserveStep] = useState(1); |
|
|
|
|
|
|
|
const titleName = '도심항공교통(UAM) 예약'; |
|
|
|
|
|
|
|
|
|
|
|
function getStepColorClass(stepNumber, currentStep) { |
|
|
|
function getStepColorClass(stepNumber, currentStep) { |
|
|
|
return stepNumber === currentStep ? 'active-step' : 'inactive-step'; |
|
|
|
return stepNumber === currentStep ? 'active-step' : 'inactive-step'; |
|
|
|
} |
|
|
|
} |
|
|
|
return ( |
|
|
|
return ( |
|
|
|
<div className='vertically-centered-modal'> |
|
|
|
<CustomMainLayout title={titleName}> |
|
|
|
{/* <Modal |
|
|
|
<div className='uam-reservation'> |
|
|
|
isOpen={modal} |
|
|
|
<div> |
|
|
|
toggle={handler} |
|
|
|
{search ? ( |
|
|
|
className='modal-dialog-centered modal-lg modal-uam-reservation' |
|
|
|
reserveStep !== 4 ? ( |
|
|
|
> */} |
|
|
|
<div className='uam-reservation-header'> |
|
|
|
{/* <ModalHeader |
|
|
|
<div> |
|
|
|
toggle={handler} |
|
|
|
<ul className='step'> |
|
|
|
> */} |
|
|
|
<li className={getStepColorClass(1, step)}> |
|
|
|
{search ? ( |
|
|
|
➀ 항공교통 조회 |
|
|
|
reserveStep !== 4 ? ( |
|
|
|
</li> |
|
|
|
<div className='uam-reservation-header'> |
|
|
|
<li className={getStepColorClass(2, step)}> |
|
|
|
<h5>도심항공교통(UAM) 예약</h5> |
|
|
|
➁ 항공교통 선택 |
|
|
|
<div> |
|
|
|
</li> |
|
|
|
|
|
|
|
<li className={getStepColorClass(3, step)}> |
|
|
|
|
|
|
|
➂ 탑승정보 입력 |
|
|
|
|
|
|
|
</li> |
|
|
|
|
|
|
|
<li className={getStepColorClass(4, step)}>➃ 결제</li> |
|
|
|
|
|
|
|
</ul> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
) : ( |
|
|
|
|
|
|
|
<div className='uam-reservation-header'> |
|
|
|
|
|
|
|
<div>결제완료</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
) |
|
|
|
|
|
|
|
) : ( |
|
|
|
|
|
|
|
<div className='uam-reservation-header'> |
|
|
|
<ul className='step'> |
|
|
|
<ul className='step'> |
|
|
|
<li className={getStepColorClass(1, step)}>➀ 항공교통 조회</li> |
|
|
|
<li className={getStepColorClass(1, step)}>➀ 항공교통 조회</li> |
|
|
|
<li className={getStepColorClass(2, step)}>➁ 항공교통 선택</li> |
|
|
|
<li className={getStepColorClass(2, step)}>➁ 항공교통 선택</li> |
|
|
@ -55,145 +71,128 @@ export default function ControlReservation({ modal, handler }) { |
|
|
|
<li className={getStepColorClass(4, step)}>➃ 결제</li> |
|
|
|
<li className={getStepColorClass(4, step)}>➃ 결제</li> |
|
|
|
</ul> |
|
|
|
</ul> |
|
|
|
</div> |
|
|
|
</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> |
|
|
|
</div> |
|
|
|
)} |
|
|
|
|
|
|
|
{/* </ModalHeader> */} |
|
|
|
|
|
|
|
{/* <ModalBody> */} |
|
|
|
|
|
|
|
{!search ? ( |
|
|
|
|
|
|
|
<div> |
|
|
|
<div> |
|
|
|
<div> |
|
|
|
{!search ? ( |
|
|
|
<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> |
|
|
|
<div> |
|
|
|
<div> |
|
|
|
<button |
|
|
|
<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={() => { |
|
|
|
onClick={() => { |
|
|
|
if (reserveStep === 1) { |
|
|
|
setAirTraficCheck(1); |
|
|
|
setIsChoise(false); |
|
|
|
|
|
|
|
setSearch(false); |
|
|
|
|
|
|
|
setAirTraficCheck(1); |
|
|
|
|
|
|
|
} else { |
|
|
|
|
|
|
|
setReserveStep(reserveStep - 1); |
|
|
|
|
|
|
|
setStep(step - 1); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}} |
|
|
|
}} |
|
|
|
> |
|
|
|
> |
|
|
|
취소 |
|
|
|
출발지 |
|
|
|
</button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div |
|
|
|
<div> |
|
|
|
className={`list ${airTraficCheck === 2 ? 'active' : ''}`} |
|
|
|
<button |
|
|
|
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={() => { |
|
|
|
onClick={() => { |
|
|
|
setReserveStep(reserveStep + 1); |
|
|
|
setSearch(true); |
|
|
|
setStep(step + 1); |
|
|
|
setStep(2); |
|
|
|
}} |
|
|
|
}} |
|
|
|
> |
|
|
|
> |
|
|
|
{reserveStep === 3 ? '결제하기' : '다음'} |
|
|
|
항공교통 조회 |
|
|
|
</button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<> |
|
|
|
|
|
|
|
{airTraficCheck === 1 && <Step1 />} |
|
|
|
|
|
|
|
{airTraficCheck === 2 && <Step2 />} |
|
|
|
|
|
|
|
{airTraficCheck === 3 && <Step3 />} |
|
|
|
|
|
|
|
{airTraficCheck === 4 && <Step4 setIsChoise={setIsChoise} />} |
|
|
|
|
|
|
|
</> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
) : ( |
|
|
|
) : ( |
|
|
|
<div> |
|
|
|
<> |
|
|
|
<div> |
|
|
|
{reserveStep === 1 && <ReserveStep1 />} |
|
|
|
<button onClick={handler}>확인</button> |
|
|
|
{reserveStep === 2 && <ReserveStep2 />} |
|
|
|
</div> |
|
|
|
{reserveStep === 3 && <ReserveStep3 />} |
|
|
|
</div> |
|
|
|
{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> |
|
|
|
{/* </ModalBody> */} |
|
|
|
</CustomMainLayout> |
|
|
|
{/* </Modal> */} |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
); |
|
|
|
); |
|
|
|
} |
|
|
|
} |
|
|
|