김지은
11 months ago
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 }) { |
||||
return ( |
||||
<div |
||||
style={{ |
||||
border: '1px solid #990033', |
||||
padding: '25px 25px 5px 25px', |
||||
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 className='step-wrap'> |
||||
<div className='step-box'> |
||||
<div className='step-box-ti'> |
||||
<h5>탑승객 수 선택</h5> |
||||
</div> |
||||
</div> |
||||
<div style={{ padding: '20px 15px' }}> |
||||
<div |
||||
style={{ |
||||
display: 'flex', |
||||
justifyContent: 'flex-start', |
||||
alignItems: 'center', |
||||
marginBottom: '30px' |
||||
}} |
||||
> |
||||
<div style={{ fontWeight: 'bold', width: '300px' }}> |
||||
성인<span> (만 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' }}>성인 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 className='passengers'> |
||||
<ul> |
||||
<li> |
||||
<div> |
||||
<h6>성인 (만 13세 이상)</h6> |
||||
<div> |
||||
<NumberInput size='sm' id='min-max-number-input1' min={0} max={9} /> |
||||
</div> |
||||
</div> |
||||
</li> |
||||
<li> |
||||
<div> |
||||
<h6>소아 (만 2세 ~ 13세 미만)</h6> |
||||
<div> |
||||
<NumberInput size='sm' id='min-max-number-input2' min={0} max={9} /> |
||||
</div> |
||||
</div> |
||||
</li> |
||||
<li> |
||||
<div> |
||||
<h6>유아 (만 2세 미만)</h6> |
||||
<div> |
||||
<NumberInput size='sm' id='min-max-number-input3' min={0} max={9} /> |
||||
</div> |
||||
</div> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
<div className='finish-btn'><Button color='success' onClick={() => setIsChoise(true)}>선택 완료</Button></div> |
||||
</div> |
||||
); |
||||
} |
||||
|
Loading…
Reference in new issue