9 changed files with 294 additions and 1122 deletions
@ -0,0 +1,55 @@ |
|||||||
|
import { useState } from 'react'; |
||||||
|
import { |
||||||
|
Badge, |
||||||
|
Button, |
||||||
|
Input, |
||||||
|
InputGroup, |
||||||
|
Modal, |
||||||
|
ModalHeader, |
||||||
|
ModalBody, |
||||||
|
Nav, |
||||||
|
NavItem, |
||||||
|
NavLink |
||||||
|
} from 'reactstrap'; |
||||||
|
import { |
||||||
|
Step1, |
||||||
|
Step2, |
||||||
|
Step3, |
||||||
|
Step4, |
||||||
|
ReserveStep1, |
||||||
|
ReserveStep2, |
||||||
|
ReserveStep3, |
||||||
|
ReserveStep4 |
||||||
|
} from './steps'; |
||||||
|
|
||||||
|
export default function ControlReservation({ modal, handler }) { |
||||||
|
const [activeTab, setActiveTab] = useState(1); |
||||||
|
const [step, setStep] = useState(1); |
||||||
|
const [airTraficCheck, setAirTraficCheck] = useState(1); |
||||||
|
const [isChoise, setIsChoise] = useState(false); |
||||||
|
const [search, setSearch] = useState(false); |
||||||
|
const [reserveStep, setReserveStep] = useState(1); |
||||||
|
|
||||||
|
return ( |
||||||
|
<div |
||||||
|
className='vertically-centered-modal' |
||||||
|
style={{ maxWidth: '95vh', height: '95vh', margin: 0 }} |
||||||
|
> |
||||||
|
<Modal |
||||||
|
isOpen={modal} |
||||||
|
toggle={handler} |
||||||
|
className='modal-dialog-centered modal-lg' |
||||||
|
style={{ margin: '0px auto', maxWidth: '90%', minHeight: '100vh' }} |
||||||
|
> |
||||||
|
<ModalHeader |
||||||
|
toggle={handler} |
||||||
|
> |
||||||
|
FSM 비행계획서 작성 |
||||||
|
</ModalHeader> |
||||||
|
<ModalBody className='pal-modal-body'> |
||||||
|
ddd |
||||||
|
</ModalBody> |
||||||
|
</Modal> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
@ -1,185 +1,43 @@ |
|||||||
|
import NumberInput from '@components/number-input' |
||||||
|
import { Button, Label } from 'reactstrap' |
||||||
|
|
||||||
export default function Step4({ setIsChoise }) { |
export default function Step4({ setIsChoise }) { |
||||||
return ( |
return ( |
||||||
<div |
<div className='step-wrap'> |
||||||
style={{ |
<div className='step-box'> |
||||||
border: '1px solid #990033', |
<div className='step-box-ti'> |
||||||
padding: '25px 25px 5px 25px', |
<h5>탑승객 수 선택</h5> |
||||||
width: '70%' |
|
||||||
}} |
|
||||||
> |
|
||||||
<div |
|
||||||
style={{ |
|
||||||
display: 'flex', |
|
||||||
justifyContent: 'space-between', |
|
||||||
alignItems: 'center', |
|
||||||
borderBottom: '1px solid #990033', |
|
||||||
fontSize: '1.2rem' |
|
||||||
}} |
|
||||||
> |
|
||||||
<h5 style={{ fontWeight: 'bold' }}>탑승객 수 선택</h5> |
|
||||||
<div |
|
||||||
style={{ |
|
||||||
fontWeight: 'bold', |
|
||||||
cursor: 'pointer', |
|
||||||
fontSize: '1.5rem' |
|
||||||
}} |
|
||||||
> |
|
||||||
X |
|
||||||
</div> |
</div> |
||||||
</div> |
<div className='passengers'> |
||||||
<div style={{ padding: '20px 15px' }}> |
<ul> |
||||||
<div |
<li> |
||||||
style={{ |
<div> |
||||||
display: 'flex', |
<h6>성인 (만 13세 이상)</h6> |
||||||
justifyContent: 'flex-start', |
<div> |
||||||
alignItems: 'center', |
<NumberInput size='sm' id='min-max-number-input1' min={0} max={9} /> |
||||||
marginBottom: '30px' |
</div> |
||||||
}} |
</div> |
||||||
> |
</li> |
||||||
<div style={{ fontWeight: 'bold', width: '300px' }}> |
<li> |
||||||
성인<span> (만 13세 이상)</span>{' '} |
<div> |
||||||
</div> |
<h6>소아 (만 2세 ~ 13세 미만)</h6> |
||||||
<div |
<div> |
||||||
style={{ |
<NumberInput size='sm' id='min-max-number-input2' min={0} max={9} /> |
||||||
display: 'flex', |
</div> |
||||||
width: '400px', |
</div> |
||||||
backgroundColor: '#f2f2f2', |
</li> |
||||||
padding: '15px', |
<li> |
||||||
justifyContent: 'space-between', |
<div> |
||||||
alignItems: 'center' |
<h6>유아 (만 2세 미만)</h6> |
||||||
}} |
<div> |
||||||
> |
<NumberInput size='sm' id='min-max-number-input3' min={0} max={9} /> |
||||||
<button |
</div> |
||||||
style={{ |
</div> |
||||||
border: '1px solid #000', |
</li> |
||||||
padding: '0 10px', |
</ul> |
||||||
fontSize: '1rem', |
|
||||||
backgroundColor: '#fff' |
|
||||||
}} |
|
||||||
> |
|
||||||
- |
|
||||||
</button> |
|
||||||
<span style={{ fontWeight: 'bold' }}>성인 1</span> |
|
||||||
<button |
|
||||||
style={{ |
|
||||||
border: '1px solid #000', |
|
||||||
padding: '0 10px', |
|
||||||
fontSize: '1rem', |
|
||||||
backgroundColor: '#fff' |
|
||||||
}} |
|
||||||
> |
|
||||||
+ |
|
||||||
</button> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div |
|
||||||
style={{ |
|
||||||
display: 'flex', |
|
||||||
justifyContent: 'flex-start', |
|
||||||
alignItems: 'center', |
|
||||||
marginBottom: '30px' |
|
||||||
}} |
|
||||||
> |
|
||||||
<div style={{ fontWeight: 'bold', width: '300px' }}> |
|
||||||
소아<span> (만 2세 ~ 13세 미만)</span>{' '} |
|
||||||
</div> |
|
||||||
<div |
|
||||||
style={{ |
|
||||||
display: 'flex', |
|
||||||
width: '400px', |
|
||||||
backgroundColor: '#f2f2f2', |
|
||||||
padding: '15px', |
|
||||||
justifyContent: 'space-between', |
|
||||||
alignItems: 'center' |
|
||||||
}} |
|
||||||
> |
|
||||||
<button |
|
||||||
style={{ |
|
||||||
border: '1px solid #000', |
|
||||||
padding: '0 10px', |
|
||||||
fontSize: '1rem', |
|
||||||
backgroundColor: '#fff' |
|
||||||
}} |
|
||||||
> |
|
||||||
- |
|
||||||
</button> |
|
||||||
<span style={{ fontWeight: 'bold' }}>소아 0</span> |
|
||||||
<button |
|
||||||
style={{ |
|
||||||
border: '1px solid #000', |
|
||||||
padding: '0 10px', |
|
||||||
fontSize: '1rem', |
|
||||||
backgroundColor: '#fff' |
|
||||||
}} |
|
||||||
> |
|
||||||
+ |
|
||||||
</button> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div |
|
||||||
style={{ |
|
||||||
display: 'flex', |
|
||||||
justifyContent: 'flex-start', |
|
||||||
alignItems: 'center', |
|
||||||
marginBottom: '30px' |
|
||||||
}} |
|
||||||
> |
|
||||||
<div style={{ fontWeight: 'bold', width: '300px' }}> |
|
||||||
유아<span> (만 2세 미만)</span>{' '} |
|
||||||
</div> |
|
||||||
<div |
|
||||||
style={{ |
|
||||||
display: 'flex', |
|
||||||
width: '400px', |
|
||||||
backgroundColor: '#f2f2f2', |
|
||||||
padding: '15px', |
|
||||||
justifyContent: 'space-between', |
|
||||||
alignItems: 'center' |
|
||||||
}} |
|
||||||
> |
|
||||||
<button |
|
||||||
style={{ |
|
||||||
border: '1px solid #000', |
|
||||||
padding: '0 10px', |
|
||||||
fontSize: '1rem', |
|
||||||
backgroundColor: '#fff' |
|
||||||
}} |
|
||||||
> |
|
||||||
- |
|
||||||
</button> |
|
||||||
<span style={{ fontWeight: 'bold' }}>유아 0</span> |
|
||||||
<button |
|
||||||
style={{ |
|
||||||
border: '1px solid #000', |
|
||||||
padding: '0 10px', |
|
||||||
fontSize: '1rem', |
|
||||||
backgroundColor: '#fff' |
|
||||||
}} |
|
||||||
> |
|
||||||
+ |
|
||||||
</button> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div |
|
||||||
style={{ display: 'flex', justifyContent: 'end', alignItems: 'end' }} |
|
||||||
> |
|
||||||
<button |
|
||||||
style={{ |
|
||||||
border: '1px solid #7F7F7F', |
|
||||||
padding: '0 10px', |
|
||||||
fontSize: '1rem', |
|
||||||
backgroundColor: '#7F7F7F', |
|
||||||
color: '#fff', |
|
||||||
padding: '10px 50px', |
|
||||||
fontWeight: 'bold', |
|
||||||
fontSize: '0.8rem' |
|
||||||
}} |
|
||||||
onClick={() => setIsChoise(true)} |
|
||||||
> |
|
||||||
선택 완료 |
|
||||||
</button> |
|
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
|
<div className='finish-btn'><Button color='success' onClick={() => setIsChoise(true)}>선택 완료</Button></div> |
||||||
</div> |
</div> |
||||||
); |
); |
||||||
} |
} |
||||||
|
|||||||
Loading…
Reference in new issue