김장현
11 months ago
9 changed files with 1810 additions and 17 deletions
@ -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> |
||||
); |
||||
} |
@ -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> |
||||
); |
||||
} |
@ -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> |
||||
); |
||||
} |
@ -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> |
||||
); |
||||
} |
@ -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> |
||||
); |
||||
} |
@ -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> |
||||
); |
||||
} |
@ -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> |
||||
); |
||||
} |
@ -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 }; |
Loading…
Reference in new issue