pav
/
pav-home
9
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

도심항공교통 예약 화면

master
김장현 11 months ago
parent
24182b65a8
commit
a802aed33d
9 changed files with 1810 additions and 17 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 361
      src/views/control/setting/ControlReservation.js
  2. 421
      src/views/control/setting/steps/ReserveStep1.js
  3. 221
      src/views/control/setting/steps/ReserveStep2.js
  4. 128
      src/views/control/setting/steps/ReserveStep3.js
  5. 247
      src/views/control/setting/steps/Step1.js
  6. 185
      src/views/control/setting/steps/Step2.js
  7. 70
      src/views/control/setting/steps/Step3.js
  8. 185
      src/views/control/setting/steps/Step4.js
  9. 9
      src/views/control/setting/steps/index.js

361
src/views/control/setting/ControlReservation.js
Unescape View File

@ -1,3 +1,4 @@
import { useState } from 'react';
import {
Badge,
Button,
@ -5,10 +6,29 @@ import {
InputGroup,
Modal,
ModalHeader,
ModalBody
ModalBody,
Nav,
NavItem,
NavLink
} from 'reactstrap';
import {
Step1,
Step2,
Step3,
Step4,
ReserveStep1,
ReserveStep2,
ReserveStep3
} 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'
@ -20,23 +40,330 @@ export default function ControlReservation({ modal, handler }) {
className='modal-dialog-centered modal-lg'
style={{ margin: '0px auto', maxWidth: '90%', minHeight: '100vh' }}
>
<ModalHeader toggle={handler}>예약 프로세스</ModalHeader>
<ModalHeader
toggle={handler}
style={{ paddingLeft: search ? '1%' : '45%' }}
>
{search ? (
<div
style={{
display: 'flex',
justifyContent: 'space-between',
width: '1600px'
}}
>
<h5 style={{ fontWeight: 'bold' }}>도심항공교통(UAM) 예약</h5>
<div style={{ display: 'flex', justifyContent: 'center' }}>
<ul style={{ listStyle: 'none' }}>
<li
style={{
float: 'left',
paddingRight: '10px',
fontWeight: 'bold',
color: step === 1 ? '#990033' : '#000'
}}
>
➀ 항공교통 조회
</li>
<li
style={{
float: 'left',
paddingRight: '10px',
fontWeight: 'bold',
color: step === 2 ? '#990033' : '#000'
}}
>
➁ 항공교통 선택{' '}
</li>
<li
style={{
float: 'left',
paddingRight: '10px',
fontWeight: 'bold',
color: step === 3 ? '#990033' : '#000'
}}
>
➂ 탑승정보 입력{' '}
</li>
<li
style={{
float: 'left',
paddingRight: '10px',
fontWeight: 'bold',
color: step === 4 ? '#990033' : '#000'
}}
>
➃ 결제
</li>
</ul>
</div>
</div>
) : (
'도심항공교통(UAM) 예약'
)}
</ModalHeader>
<ModalBody className='pal-modal-body'>
<div
style={{
width: '100%',
height: '100%'
}}
>
예약프로세스 입니다. 예약프로세스 입니다. 예약프로세스 입니다.
예약프로세스 입니다. 예약프로세스 입니다. 예약프로세스 입니다.
예약프로세스 입니다. 예약프로세스 입니다. 예약프로세스 입니다.
예약프로세스 입니다. 예약프로세스 입니다. 예약프로세스 입니다.
예약프로세스 입니다. 예약프로세스 입니다. 예약프로세스 입니다.
예약프로세스 입니다. 예약프로세스 입니다. 예약프로세스 입니다.
예약프로세스 입니다. 예약프로세스 입니다. 예약프로세스 입니다.
예약프로세스 입니다.
</div>
{!search ? (
<div
style={{
padding: '10px',
height: '600px'
}}
>
<div style={{ display: 'flex', justifyContent: 'center' }}>
<ul style={{ listStyle: 'none' }}>
<li
style={{
float: 'left',
paddingRight: '10px',
fontWeight: 'bold',
color: step === 1 ? '#990033' : '#000'
}}
>
➀ 항공교통 조회
</li>
<li
style={{
float: 'left',
paddingRight: '10px',
fontWeight: 'bold',
color: step === 2 ? '#990033' : '#000'
}}
>
➁ 항공교통 선택{' '}
</li>
<li
style={{
float: 'left',
paddingRight: '10px',
fontWeight: 'bold',
color: step === 3 ? '#990033' : '#000'
}}
>
➂ 탑승정보 입력{' '}
</li>
<li
style={{
float: 'left',
paddingRight: '10px',
fontWeight: 'bold',
color: step === 4 ? '#990033' : '#000'
}}
>
➃ 결제
</li>
</ul>
</div>
<div style={{ marginBottom: '20px' }}>
<Nav>
<NavItem style={{ border: '1px solid #990033' }}>
<NavLink
active={activeTab === 1}
onClick={() => setActiveTab(1)}
style={{
backgroundColor: activeTab === 1 ? '#990033' : '#fff',
color: activeTab === 1 ? '#fff' : '#000',
padding: '5px 30px'
}}
>
<span
style={{
fontWeight: activeTab === 1 ? 'bold' : 'normal'
}}
className=''
>
왕복
</span>
</NavLink>
</NavItem>
<NavItem style={{ border: '1px solid #990033' }}>
<NavLink
active={activeTab === 2}
onClick={() => setActiveTab(2)}
style={{
backgroundColor: activeTab === 2 ? '#990033' : '#fff',
color: activeTab === 2 ? '#fff' : '#000',
padding: '5px 30px'
}}
>
<span
className=''
style={{
fontWeight: activeTab === 2 ? 'bold' : 'normal'
}}
>
편도
</span>
</NavLink>
</NavItem>
</Nav>
</div>
<div
style={{
display: 'flex',
justifyContent: 'flex-start',
marginBottom: '10px'
}}
>
<div
style={{
width: '15%',
height: '65px',
border: '1px solid #990033',
marginRight: '57px',
backgroundColor: airTraficCheck === 1 ? '#990033' : '#fff',
color: airTraficCheck === 1 ? '#fff' : '#000',
display: 'flex',
alignItems: 'center',
paddingLeft: '5px',
fontWeight: airTraficCheck === 1 ? 'bold' : 'normal',
cursor: 'pointer'
}}
onClick={() => {
setAirTraficCheck(1);
}}
>
출발지
</div>
<div
style={{
width: '15%',
height: '65px',
border: '1px solid #990033',
marginRight: '57px',
backgroundColor: airTraficCheck === 2 ? '#990033' : '#fff',
color: airTraficCheck === 2 ? '#fff' : '#000',
display: 'flex',
alignItems: 'center',
paddingLeft: '5px',
fontWeight: airTraficCheck === 2 ? 'bold' : 'normal',
cursor: 'pointer'
}}
onClick={() => {
setAirTraficCheck(2);
}}
>
도착지
</div>
<div
style={{
width: '15%',
height: '65px',
border: '1px solid #990033',
marginRight: '57px',
backgroundColor: airTraficCheck === 3 ? '#990033' : '#fff',
color: airTraficCheck === 3 ? '#fff' : '#000',
display: 'flex',
alignItems: 'center',
paddingLeft: '5px',
fontWeight: airTraficCheck === 3 ? 'bold' : 'normal',
cursor: 'pointer'
}}
onClick={() => {
setAirTraficCheck(3);
}}
>
탑승일
</div>
<div
style={{
width: '15%',
height: '65px',
border: '1px solid #990033',
marginRight: '57px',
backgroundColor: airTraficCheck === 4 ? '#990033' : '#fff',
color: airTraficCheck === 4 ? '#fff' : '#000',
display: 'flex',
alignItems: 'center',
paddingLeft: '5px',
fontWeight: airTraficCheck === 4 ? 'bold' : 'normal',
cursor: 'pointer'
}}
onClick={() => {
setAirTraficCheck(4);
}}
>
탑승객
</div>
<div
style={{
width: '15%',
height: '65px',
border: '1px solid #F2F2F2',
marginRight: '57px',
backgroundColor: isChoise ? '#FEFF00' : '#F2F2F2',
color: isChoise ? '#000' : '#BFBFBF',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
paddingLeft: '5px',
cursor: 'pointer',
fontWeight: 'bold'
}}
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 />}
<div
style={{
display: 'flex',
justifyContent: 'space-between',
padding: '5px 35px',
marginBottom: '20px'
}}
>
<div>
<button
style={{ padding: '10px 50px', backgroundColor: '#F2F2F2' }}
onClick={() => {
if (reserveStep === 1) {
setIsChoise(false);
setSearch(false);
setAirTraficCheck(1);
} else {
setReserveStep(reserveStep - 1);
setStep(step - 1);
}
}}
>
취소
</button>
</div>
<div>
<button
style={{
padding: '10px 50px',
backgroundColor: '#990033',
color: '#fff'
}}
onClick={() => {
setReserveStep(reserveStep + 1);
setStep(step + 1);
}}
>
다음
</button>
</div>
</div>
</>
)}
</ModalBody>
</Modal>
</div>

421
src/views/control/setting/steps/ReserveStep1.js
Unescape View File

@ -0,0 +1,421 @@
export default function ReserveStep1() {
return (
<div style={{ padding: '40px' }}>
<div
style={{
display: 'flex',
justifyContent: 'center',
flexDirection: 'column',
alignItems: 'center'
}}
>
<span style={{ color: '#990033' }}>여정 1</span>
<div
style={{
display: 'flex',
justifyContent: 'space-around',
alignItems: 'center',
width: '25%'
}}
>
<div
style={{
fontWeight: 'bold',
fontSize: '1.4rem',
color: '#000'
}}
>
고양 킨텍스
</div>
<div
style={{
fontWeight: 'bold',
fontSize: '1.7rem',
color: '#000'
}}
>
➔
</div>
<div
style={{
fontWeight: 'bold',
fontSize: '1.4rem',
color: '#000'
}}
>
여의도 공원
</div>
</div>
</div>
<div
style={{
display: 'flex',
// justifyContent: 'space-between',
flexDirection: 'column',
borderBottom: '1px dotted #000',
marginBottom: '30px'
}}
>
<div
style={{
display: 'flex',
backgroundColor: '#F2F2F2',
marginBottom: '5px'
}}
>
<div style={{ flex: 1, textAlign: 'center' }}>
출발/도착시간 (비행시간)
</div>
<div style={{ flex: 1, textAlign: 'center' }}>편명/기종</div>
<div style={{ flex: 1, textAlign: 'center' }}>특가운임</div>
<div style={{ flex: 1, textAlign: 'center' }}>할인운임</div>
<div style={{ flex: 1, textAlign: 'center' }}>정규운임</div>
</div>
<div
style={{
display: 'flex',
alignItems: 'center',
borderBottom: '1px dotted #000',
marginBottom: '5px'
}}
>
<div style={{ flex: 1, textAlign: 'center' }}>
<span>2시간 5분</span>
<div style={{ fontWeight: 'bold' }}>
08:40----------------------10:45
</div>
</div>
<div style={{ flex: 1, textAlign: 'center' }}>
<div>3P1003</div>
<div>B737-800</div>
</div>
<div
style={{
flex: 1,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
height: '50px',
border: '1px solid #F2F2F2'
// width: '500px',
}}
>
<div>매진</div>
</div>
<div
style={{
flex: 1,
textAlign: 'center',
border: '1px solid #F2F2F2',
height: '50px'
}}
>
<div>
<div>
<span style={{ fontWeight: 'bold' }}>63,000 </span>
<span>KRW</span>
</div>
<span style={{ color: 'red' }}>잔여7석</span>
</div>
</div>
<div
style={{
flex: 1,
textAlign: 'center',
border: '1px solid #F2F2F2',
height: '50px'
}}
>
<div style={{ backgroundColor: '#C00001' }}>
<div>
<span style={{ color: '#fff', fontWeight: 'bold' }}>
76,000{' '}
</span>
<span style={{ color: '#fff' }}>KRW</span>
</div>
<span style={{ color: '#fff' }}>잔여9석</span>
</div>
</div>
</div>
<div
style={{
display: 'flex',
alignItems: 'center'
}}
>
<div style={{ flex: 1, textAlign: 'center' }}>
<span>2시간 5분</span>
<div style={{ fontWeight: 'bold' }}>
10:40----------------------12:45
</div>
<div
style={{
display: 'flex',
justifyContent: 'end',
marginRight: '40px'
}}
>
<span>+1 day</span>
</div>
</div>
<div style={{ flex: 1, textAlign: 'center' }}>
<div>3P1003</div>
<div>B737-800</div>
</div>
<div
style={{
flex: 1,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
height: '50px',
border: '1px solid #F2F2F2'
// width: '500px',
}}
>
<div>매진</div>
</div>
<div
style={{
flex: 1,
textAlign: 'center',
border: '1px solid #F2F2F2',
height: '50px'
}}
>
<div>
<div>
<span style={{ fontWeight: 'bold' }}>63,000 </span>
<span>KRW</span>
</div>
<span>잔여3석</span>
</div>
</div>
<div
style={{
flex: 1,
textAlign: 'center',
border: '1px solid #F2F2F2',
height: '50px'
}}
>
<div>
<div>
<span>76,000 </span>
<span>KRW</span>
</div>
<span>잔여9석</span>
</div>
</div>
</div>
</div>
<div
style={{
display: 'flex',
justifyContent: 'center',
flexDirection: 'column',
alignItems: 'center'
}}
>
<span style={{ color: '#990033' }}>여정 2</span>
<div
style={{
display: 'flex',
justifyContent: 'space-around',
alignItems: 'center',
width: '25%'
}}
>
<div
style={{
fontWeight: 'bold',
fontSize: '1.4rem',
color: '#000'
}}
>
여의도 공원
</div>
<div
style={{
fontWeight: 'bold',
fontSize: '1.7rem',
color: '#000'
}}
>
➔
</div>
<div
style={{
fontWeight: 'bold',
fontSize: '1.4rem',
color: '#000'
}}
>
고양 킨텍스
</div>
</div>
</div>
<div
style={{
display: 'flex',
// justifyContent: 'space-between',
flexDirection: 'column',
borderBottom: '1px dotted #000'
}}
>
<div
style={{
display: 'flex',
backgroundColor: '#F2F2F2',
marginBottom: '5px'
}}
>
<div style={{ flex: 1, textAlign: 'center' }}>
출발/도착시간 (비행시간)
</div>
<div style={{ flex: 1, textAlign: 'center' }}>편명/기종</div>
<div style={{ flex: 1, textAlign: 'center' }}>특가운임</div>
<div style={{ flex: 1, textAlign: 'center' }}>할인운임</div>
<div style={{ flex: 1, textAlign: 'center' }}>정규운임</div>
</div>
<div
style={{
display: 'flex',
alignItems: 'center',
borderBottom: '1px dotted #000',
marginBottom: '5px'
}}
>
<div style={{ flex: 1, textAlign: 'center' }}>
<span>2시간 5분</span>
<div style={{ fontWeight: 'bold' }}>
08:40----------------------10:45
</div>
</div>
<div style={{ flex: 1, textAlign: 'center' }}>
<div>3P1003</div>
<div>B737-800</div>
</div>
<div
style={{
flex: 1,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
height: '50px',
border: '1px solid #F2F2F2'
// width: '500px',
}}
>
<div>매진</div>
</div>
<div
style={{
flex: 1,
textAlign: 'center',
border: '1px solid #F2F2F2',
height: '50px'
}}
>
<div style={{ backgroundColor: '#C00001' }}>
<div>
<span style={{ color: '#fff', fontWeight: 'bold' }}>
63,000{' '}
</span>
<span style={{ color: '#fff' }}>KRW</span>
</div>
<span style={{ color: '#fff' }}>잔여7석</span>
</div>
</div>
<div
style={{
flex: 1,
textAlign: 'center',
border: '1px solid #F2F2F2',
height: '50px'
}}
>
<div>
<div>
<span style={{ fontWeight: 'bold' }}>76,000 </span>
<span>KRW</span>
</div>
<span>잔여9석</span>
</div>
</div>
</div>
<div
style={{
display: 'flex',
alignItems: 'center'
}}
>
<div style={{ flex: 1, textAlign: 'center' }}>
<span>2시간 5분</span>
<div style={{ fontWeight: 'bold' }}>
10:40----------------------12:45
</div>
<div
style={{
display: 'flex',
justifyContent: 'end',
marginRight: '40px'
}}
>
<span>+1 day</span>
</div>
</div>
<div style={{ flex: 1, textAlign: 'center' }}>
<div>3P1003</div>
<div>B737-800</div>
</div>
<div
style={{
flex: 1,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
height: '50px',
border: '1px solid #F2F2F2'
// width: '500px',
}}
>
<div>매진</div>
</div>
<div
style={{
flex: 1,
textAlign: 'center',
border: '1px solid #F2F2F2',
height: '50px'
}}
>
<div>
<div>
<span style={{ fontWeight: 'bold' }}>63,000 </span>
<span>KRW</span>
</div>
<span>잔여3석</span>
</div>
</div>
<div
style={{
flex: 1,
textAlign: 'center',
border: '1px solid #F2F2F2',
height: '50px'
}}
>
<div>
<div>
<span>76,000 </span>
<span>KRW</span>
</div>
<span>잔여9석</span>
</div>
</div>
</div>
</div>
</div>
);
}

221
src/views/control/setting/steps/ReserveStep2.js
Unescape View File

@ -0,0 +1,221 @@
export default function ReserveStep2() {
return (
<div style={{ padding: '40px' }}>
<div
style={{
fontWeight: 'bold',
fontSize: '1.3rem',
borderBottom: '1px solid #000'
}}
>
성인 1
</div>
<div style={{ padding: '10px', marginBottom: '20px' }}>
<div
style={{
display: 'flex',
justifyContent: 'flex-start',
width: '100%'
}}
>
<div
style={{
width: '50%'
}}
>
<div
style={{
borderBottom: '1px dotted #000',
marginBottom: '10px',
height: '100px'
}}
>
<span style={{ fontWeight: 'bold' }}>성명</span>
<div style={{ marginBottom: '10px' }}>
<input value='KIM' style={{ marginRight: '10px' }} />
<input value='YOONSUN' style={{ marginRight: '10px' }} />
<input value='12345678' />
</div>
<div style={{ marginBottom: '10px' }}>
* 탑승자의 성명은 신분증상의 성명과 동일하게 입력하여 주시기
바랍니다.
</div>
</div>
<div
style={{
borderBottom: '1px dotted #000',
marginBottom: '10px',
height: '100px'
}}
>
<span style={{ fontWeight: 'bold' }}>신분할인 (여정1)</span>
<div style={{ marginBottom: '10px' }}>
<select style={{ width: '72%' }}>
<option>성인 (기본운임)</option>
</select>
</div>
<div>
* 선택한 할인율 적용된 금액은 다음 단계에서 확인 가능합니다.
</div>
</div>
<div
style={{
borderBottom: '1px dotted #000',
height: '50px'
}}
>
<span style={{ fontWeight: 'bold' }}>신분할인 (여정2)</span>
<div style={{ marginBottom: '10px' }}>
<select style={{ width: '72%' }}>
<option>성인 (기본운임)</option>
</select>
</div>
</div>
</div>
<div
style={{
width: '50%'
}}
>
<div
style={{
borderBottom: '1px dotted #000',
marginBottom: '10px',
height: '100px'
}}
>
<span style={{ fontWeight: 'bold' }}>성별</span>
<div>
<span style={{ padding: '5px 40px', border: '1px solid #000' }}>
남자
</span>
<span
style={{
padding: '5px 40px',
border: '1px solid #990033',
backgroundColor: '#990033',
color: '#fff'
}}
>
여자
</span>
</div>
</div>
<div
style={{
borderBottom: '1px dotted #000',
marginBottom: '10px',
height: '100px'
}}
></div>
<div
style={{
borderBottom: '1px dotted #000',
height: '50px'
}}
></div>
</div>
</div>
</div>
<div
style={{
display: 'flex',
justifyContent: 'space-between',
borderBottom: '1px solid #000'
}}
>
<div
style={{
fontWeight: 'bold',
fontSize: '1.3rem'
}}
>
예매자 정보
</div>
<div style={{ color: 'red' }}>
* 반드시 연락 가능한 연락처와 이메일을 입력하십시오.
</div>
</div>
<div
style={{
padding: '0 10px 0 10px',
backgroundColor: '#F2F2F2',
borderBottom: '1px dotted #000'
}}
>
<div
style={{
display: 'flex',
justifyContent: 'flex-start',
width: '100%'
}}
>
<div
style={{
width: '50%',
borderRight: '1px solid #000',
marginRight: '10px'
}}
>
<div
style={{
// marginBottom: '10px',
height: '100px'
}}
>
<span style={{ fontWeight: 'bold' }}>연락처</span>
<div style={{ marginBottom: '10px' }}>
<select
disabled
style={{ height: '29px', marginRight: '10px' }}
>
<option>+ 82 (대한민국)</option>
</select>
<select
disabled
style={{ height: '29px', marginRight: '10px' }}
>
<option>010</option>
</select>
<input value='' disabled style={{ marginRight: '10px' }} />
<input value='' disabled />
</div>
<div style={{ marginBottom: '10px' }}>
* 탑승자의 성명은 신분증상의 성명과 동일하게 입력하여 주시기
바랍니다.
</div>
</div>
</div>
<div
style={{
width: '50%'
}}
>
<div
style={{
// marginBottom: '10px',
height: '100px'
}}
>
<span style={{ fontWeight: 'bold' }}>이메일</span>
<div>
<input
value='이메일'
disabled
style={{ marginRight: '10px' }}
/>
@
<select disabled style={{ height: '29px', width: '300px' }}>
<option>선택</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
);
}

128
src/views/control/setting/steps/ReserveStep3.js
Unescape View File

@ -0,0 +1,128 @@
export default function ReserveStep3() {
return (
<div style={{ padding: '40px' }}>
<div
style={{
borderBottom: '1px solid #000'
}}
>
<div
style={{
fontWeight: 'bold',
fontSize: '1.3rem'
}}
>
결제 정보
</div>
</div>
<div
style={{
display: 'flex',
justifyContent: 'flex-start',
padding: '5px'
}}
>
<div
style={{
width: '15%',
height: '50px',
display: 'flex',
justifyContent: 'center',
alignItems: 'center'
}}
>
결제 수단
</div>
<div
style={{
width: '15%',
height: '50px',
display: 'flex',
justifyContent: 'end',
alignItems: 'center',
backgroundColor: '#990033',
color: '#fff',
padding: '5px',
marginRight: '10px'
}}
>
신용카드
</div>
<div
style={{
width: '15%',
height: '50px',
display: 'flex',
justifyContent: 'end',
alignItems: 'center',
padding: '5px',
border: '1px solid #000',
marginRight: '10px'
}}
>
카카오페이
</div>
<div
style={{
width: '15%',
height: '50px',
display: 'flex',
justifyContent: 'end',
alignItems: 'center',
padding: '5px',
border: '1px solid #000'
}}
>
계좌이체
</div>
</div>
<div
style={{
display: 'flex',
justifyContent: 'flex-start',
padding: '5px'
}}
>
<div
style={{
width: '15%',
height: '50px',
display: 'flex',
justifyContent: 'center',
alignItems: 'center'
}}
>
결제 카드
</div>
<div
style={{
width: '15%',
height: '50px',
display: 'flex',
justifyContent: 'start',
alignItems: 'center',
marginRight: '10px'
}}
>
<select style={{ width: '200px' }}>
<option>카드 선택</option>
</select>
</div>
<div
style={{
width: '15%',
height: '50px',
display: 'flex',
justifyContent: 'start',
alignItems: 'center',
marginRight: '10px'
}}
>
<select style={{ width: '200px' }}>
<option>일시불</option>
</select>
</div>
</div>
</div>
);
}

247
src/views/control/setting/steps/Step1.js
Unescape View File

@ -0,0 +1,247 @@
export default function Step1() {
return (
<div
style={{
border: '1px solid #990033',
padding: '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>
</div>
<div style={{ padding: '20px 15px' }}>
<div
style={{
display: 'flex',
justifyContent: 'space-around',
marginBottom: '20px'
}}
>
<ul
style={{
width: '30%',
border: '1px solid #990033',
height: '120px'
}}
>
<li
style={{
backgroundColor: '#990033',
color: '#fff',
height: '50px',
fontWeight: 'bold',
display: 'flex',
justifyContent: 'center',
alignItems: 'center'
}}
>
아라뱃길
</li>
<li
style={{
display: 'flex',
height: '35px',
justifyContent: 'flex-start',
alignItems: 'center',
borderBottom: '1px solid #990033',
padding: '10px'
}}
>
드론시험 인증센터
</li>
<li
style={{
display: 'flex',
justifyContent: 'flex-start',
height: '35px',
alignItems: 'center',
padding: '10px'
}}
>
계양 신도시
</li>
</ul>
<ul
style={{
width: '30%',
border: '1px solid #990033'
}}
>
<li
style={{
backgroundColor: '#990033',
color: '#fff',
height: '50px',
fontWeight: 'bold',
display: 'flex',
justifyContent: 'center',
alignItems: 'center'
}}
>
한강
</li>
<li
style={{
display: 'flex',
justifyContent: 'flex-start',
height: '35px',
alignItems: 'center',
padding: '10px',
borderBottom: '1px solid #990033'
}}
>
고양 킨텍스
</li>
<li
style={{
display: 'flex',
justifyContent: 'flex-start',
height: '35px',
alignItems: 'center',
padding: '10px',
borderBottom: '1px solid #990033'
}}
>
김포공항
</li>
<li
style={{
display: 'flex',
justifyContent: 'flex-start',
height: '35px',
alignItems: 'center',
padding: '10px'
}}
>
여의도 공원
</li>
</ul>
<ul
style={{
width: '30%',
border: '1px solid #990033',
height: '120px'
}}
>
<li
style={{
backgroundColor: '#990033',
color: '#fff',
height: '50px',
fontWeight: 'bold',
display: 'flex',
justifyContent: 'center',
alignItems: 'center'
}}
>
도심
</li>
<li
style={{
display: 'flex',
justifyContent: 'flex-start',
height: '35px',
alignItems: 'center',
padding: '10px',
borderBottom: '1px solid #990033'
}}
>
잠실한강공원
</li>
<li
style={{
display: 'flex',
justifyContent: 'flex-start',
height: '35px',
alignItems: 'center',
padding: '10px'
}}
>
수서역
</li>
</ul>
</div>
<div style={{ paddingLeft: '15px', paddingRight: '15px' }}>
<div style={{ marginBottom: '10px' }}>
<span style={{ fontWeight: 'bold', color: '#000' }}>
최근 조회하신 여정
</span>
</div>
<div
style={{
display: 'flex',
justifyContent: 'space-between'
}}
>
<div
style={{
width: '47.5%',
backgroundColor: '#F2F2F2',
display: 'flex',
justifyContent: 'space-between',
padding: '5px'
}}
>
<span style={{ fontWeight: 'bold' }}>
{'드론시험 인증센터 -> 계양 신도시 (VVO)'}
</span>
<div
style={{
backgroundColor: '#fff',
borderRadius: '50%',
width: '20px',
textAlign: 'center',
fontWeight: 'bold'
}}
>
X
</div>
</div>
<div
style={{
width: '47.5%',
backgroundColor: '#F2F2F2',
display: 'flex',
justifyContent: 'space-between',
padding: '5px'
}}
>
<span style={{ fontWeight: 'bold' }}>
{'고양 킨텍스 -> 여의도 공원'}
</span>
<div
style={{
backgroundColor: '#fff',
borderRadius: '50%',
width: '20px',
textAlign: 'center',
fontWeight: 'bold'
}}
>
X
</div>
</div>
</div>
</div>
</div>
</div>
);
}

185
src/views/control/setting/steps/Step2.js
Unescape View File

@ -0,0 +1,185 @@
export default function Step2() {
return (
<div
style={{
border: '1px solid #990033',
padding: '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>
</div>
<div style={{ padding: '20px 15px' }}>
<div
style={{
display: 'flex',
justifyContent: 'space-around',
marginBottom: '20px'
}}
>
<ul
style={{
width: '30%',
border: '1px solid #990033',
height: '120px'
}}
>
<li
style={{
backgroundColor: '#990033',
color: '#fff',
height: '50px',
fontWeight: 'bold',
display: 'flex',
justifyContent: 'center',
alignItems: 'center'
}}
>
아라뱃길
</li>
<li
style={{
display: 'flex',
height: '35px',
justifyContent: 'flex-start',
alignItems: 'center',
borderBottom: '1px solid #990033',
padding: '10px'
}}
>
드론시험 인증센터
</li>
<li
style={{
display: 'flex',
justifyContent: 'flex-start',
height: '35px',
alignItems: 'center',
padding: '10px'
}}
>
계양 신도시
</li>
</ul>
<ul
style={{
width: '30%',
border: '1px solid #990033'
}}
>
<li
style={{
backgroundColor: '#990033',
color: '#fff',
height: '50px',
fontWeight: 'bold',
display: 'flex',
justifyContent: 'center',
alignItems: 'center'
}}
>
한강
</li>
<li
style={{
display: 'flex',
justifyContent: 'flex-start',
height: '35px',
alignItems: 'center',
padding: '10px',
borderBottom: '1px solid #990033'
}}
>
고양 킨텍스
</li>
<li
style={{
display: 'flex',
justifyContent: 'flex-start',
height: '35px',
alignItems: 'center',
padding: '10px',
borderBottom: '1px solid #990033'
}}
>
김포공항
</li>
<li
style={{
display: 'flex',
justifyContent: 'flex-start',
height: '35px',
alignItems: 'center',
padding: '10px'
}}
>
여의도 공원
</li>
</ul>
<ul
style={{
width: '30%',
border: '1px solid #990033',
height: '120px'
}}
>
<li
style={{
backgroundColor: '#990033',
color: '#fff',
height: '50px',
fontWeight: 'bold',
display: 'flex',
justifyContent: 'center',
alignItems: 'center'
}}
>
도심
</li>
<li
style={{
display: 'flex',
justifyContent: 'flex-start',
height: '35px',
alignItems: 'center',
padding: '10px',
borderBottom: '1px solid #990033'
}}
>
잠실한강공원
</li>
<li
style={{
display: 'flex',
justifyContent: 'flex-start',
height: '35px',
alignItems: 'center',
padding: '10px'
}}
>
수서역
</li>
</ul>
</div>
</div>
</div>
);
}

70
src/views/control/setting/steps/Step3.js
Unescape View File

@ -0,0 +1,70 @@
import Flatpickr from 'react-flatpickr';
import 'flatpickr/dist/themes/material_green.css';
export default function Step3() {
return (
<div
style={{
border: '1px solid #990033',
padding: '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={{ display: 'flex', alignItems: 'center' }}>
<button
style={{
border: '1px solid #000',
padding: '0 10px',
fontSize: '1rem'
}}
>
초기화
</button>
<div
style={{
fontWeight: 'bold',
cursor: 'pointer',
fontSize: '1.5rem',
marginLeft: '10px'
}}
>
X
</div>
</div>
</div>
<div style={{ padding: '20px 15px' }}>
<div
style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center'
}}
>
<Flatpickr
// value={['2023-10-10', '2023-10-10']}
// className='hidden-input'
id='searchDate'
options={{
inline: true,
mode: 'range',
showMonths: 2,
wrap: true
}}
>
<input type='text' data-input style={{ display: 'none' }} />
</Flatpickr>
</div>
</div>
</div>
);
}

185
src/views/control/setting/steps/Step4.js
Unescape View File

@ -0,0 +1,185 @@
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>
</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: '5px',
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: '5px',
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: '5px',
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: '5px 30px',
fontWeight: 'bold',
fontSize: '0.8rem'
}}
onClick={() => setIsChoise(true)}
>
선택 완료
</button>
</div>
</div>
</div>
);
}

9
src/views/control/setting/steps/index.js
Unescape View File

@ -0,0 +1,9 @@
import Step1 from './Step1';
import Step2 from './Step2';
import Step3 from './Step3';
import Step4 from './Step4';
import ReserveStep1 from './ReserveStep1';
import ReserveStep2 from './ReserveStep2';
import ReserveStep3 from './ReserveStep3';
export { Step1, Step2, Step3, Step4, ReserveStep1, ReserveStep2, ReserveStep3 };
Write Preview
Loading…
Cancel
Save