|
|
|
@ -1,6 +1,6 @@
|
|
|
|
|
import React, { useState, Component } from 'react' |
|
|
|
|
import React, { useState, Component } from 'react'; |
|
|
|
|
|
|
|
|
|
import Slider from "react-slick"; |
|
|
|
|
import Slider from 'react-slick'; |
|
|
|
|
import 'slick-carousel/slick/slick.css'; |
|
|
|
|
import 'slick-carousel/slick/slick-theme.css'; |
|
|
|
|
|
|
|
|
@ -16,33 +16,28 @@ export default function ReserveStep1() {
|
|
|
|
|
slidesToScroll: 1 |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<div className='step-reservation'> |
|
|
|
|
<div className='step-box'> |
|
|
|
|
<div className='uam-reservation-tab-list'> |
|
|
|
|
<div className='list'> |
|
|
|
|
고양 킨텍스 |
|
|
|
|
</div> |
|
|
|
|
<div className='list'> |
|
|
|
|
여의도 공원 |
|
|
|
|
</div> |
|
|
|
|
<div className='list'> |
|
|
|
|
2023. 10. 22(목) ~ 2023. 11. 01(목) |
|
|
|
|
</div> |
|
|
|
|
<div className='list'> |
|
|
|
|
성인 1명, 소아 1명, 유아 1명 |
|
|
|
|
</div> |
|
|
|
|
<div className='list'>고양 킨텍스</div> |
|
|
|
|
<div className='list'>여의도 공원</div> |
|
|
|
|
<div className='list'>2023. 10. 22(목) ~ 2023. 11. 01(목)</div> |
|
|
|
|
<div className='list'>성인 1명, 소아 1명, 유아 1명</div> |
|
|
|
|
<Button>수정</Button> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div className='step-box'> |
|
|
|
|
<div className='step-reservation-header'> |
|
|
|
|
<Badge color='primary' className='badge-glow'>여정 1</Badge> |
|
|
|
|
<Badge color='primary' className='badge-glow'> |
|
|
|
|
여정 1 |
|
|
|
|
</Badge> |
|
|
|
|
<div className='place'> |
|
|
|
|
<span>고양 킨텍스</span> |
|
|
|
|
<span className='arrow'><ArrowRight /></span> |
|
|
|
|
<span className='arrow'> |
|
|
|
|
<ArrowRight /> |
|
|
|
|
</span> |
|
|
|
|
<span>여의도 공원</span> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
@ -60,13 +55,17 @@ export default function ReserveStep1() {
|
|
|
|
|
<span className='date'>2025.10.25(수)</span> |
|
|
|
|
<span className='state'>매진</span> |
|
|
|
|
</div> |
|
|
|
|
<div className='box'> |
|
|
|
|
<div className='box active'> |
|
|
|
|
<span className='date'>2025.10.26(목)</span> |
|
|
|
|
<span className='state'>56,000<span className='rate'>KRW</span></span> |
|
|
|
|
<span className='state'> |
|
|
|
|
56,000<span className='rate'>KRW</span> |
|
|
|
|
</span> |
|
|
|
|
</div> |
|
|
|
|
<div className='box'> |
|
|
|
|
<span className='date'>2025.10.27(금)</span> |
|
|
|
|
<span className='state'>58,000<span className='rate'>KRW</span></span> |
|
|
|
|
<span className='state'> |
|
|
|
|
58,000<span className='rate'>KRW</span> |
|
|
|
|
</span> |
|
|
|
|
</div> |
|
|
|
|
<div className='box'> |
|
|
|
|
<span className='date'>2025.10.28(토)</span> |
|
|
|
@ -74,17 +73,28 @@ export default function ReserveStep1() {
|
|
|
|
|
</div> |
|
|
|
|
<div className='box'> |
|
|
|
|
<span className='date'>2025.10.29(일)</span> |
|
|
|
|
<span className='state'>48,000<span className='rate'>KRW</span></span> |
|
|
|
|
<span className='state'> |
|
|
|
|
48,000<span className='rate'>KRW</span> |
|
|
|
|
</span> |
|
|
|
|
</div> |
|
|
|
|
<div className='box'> |
|
|
|
|
<span className='date'>2025.10.30(월)</span> |
|
|
|
|
<span className='state'>38,000<span className='rate'>KRW</span></span> |
|
|
|
|
<span className='state'> |
|
|
|
|
38,000<span className='rate'>KRW</span> |
|
|
|
|
</span> |
|
|
|
|
</div> |
|
|
|
|
</Slider> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div> |
|
|
|
|
<div className='reservation-table'> |
|
|
|
|
<table> |
|
|
|
|
<colgroup> |
|
|
|
|
<col width='20%' /> |
|
|
|
|
<col width='20%' /> |
|
|
|
|
<col width='15%' /> |
|
|
|
|
<col width='15%' /> |
|
|
|
|
<col width='15%' /> |
|
|
|
|
</colgroup> |
|
|
|
|
<thead> |
|
|
|
|
<tr> |
|
|
|
|
<th>출발/도착시간(비행시간)</th> |
|
|
|
@ -97,207 +107,48 @@ export default function ReserveStep1() {
|
|
|
|
|
<tbody> |
|
|
|
|
<tr> |
|
|
|
|
<td> |
|
|
|
|
<span>1시간 5분</span> |
|
|
|
|
<div> |
|
|
|
|
<span>08:40</span>- |
|
|
|
|
<span>09:45</span> |
|
|
|
|
<span>+1 day</span> |
|
|
|
|
<span className='alltime'> |
|
|
|
|
<span className='time'>1시간 5분</span> |
|
|
|
|
<span className='start'>08:40</span> |
|
|
|
|
<span className='arrive'>09:45</span> |
|
|
|
|
</span> |
|
|
|
|
<span className='plus'>+1 day</span> |
|
|
|
|
</div> |
|
|
|
|
</td> |
|
|
|
|
<td> |
|
|
|
|
<div> |
|
|
|
|
<div className='flight'> |
|
|
|
|
<span>3P1003</span> |
|
|
|
|
<span>B737-800</span> |
|
|
|
|
</div> |
|
|
|
|
</td> |
|
|
|
|
<td><span>매진</span></td> |
|
|
|
|
<td> |
|
|
|
|
<div> |
|
|
|
|
<span>76.000 KRW</span> |
|
|
|
|
<span>잔여7석</span> |
|
|
|
|
<div className='amount'> |
|
|
|
|
<span className='state'>매진</span> |
|
|
|
|
</div> |
|
|
|
|
</td> |
|
|
|
|
<td> |
|
|
|
|
<div> |
|
|
|
|
<span>76.000 KRW</span> |
|
|
|
|
<span>잔여7석</span> |
|
|
|
|
<div className='amount'> |
|
|
|
|
<span className='state'> |
|
|
|
|
76.000<span className='rate'>KRW</span> |
|
|
|
|
</span> |
|
|
|
|
<span className='seat'>잔여 7석</span> |
|
|
|
|
</div> |
|
|
|
|
</td> |
|
|
|
|
<td> |
|
|
|
|
<div className='amount'> |
|
|
|
|
<span className='state'> |
|
|
|
|
76.000<span className='rate'>KRW</span> |
|
|
|
|
</span> |
|
|
|
|
<span className='seat'>잔여 7석</span> |
|
|
|
|
</div> |
|
|
|
|
</td> |
|
|
|
|
</tr> |
|
|
|
|
</tbody> |
|
|
|
|
</table> |
|
|
|
|
</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', |
|
|
|
|
padding: '10px' |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
<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', |
|
|
|
|
padding: '10px' |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
<div style={{ flex: 1, textAlign: 'center' }}> |
|
|
|
|
<span>1시간 5분</span> |
|
|
|
|
<div style={{ fontWeight: 'bold' }}> |
|
|
|
|
08:40----------------------09: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', |
|
|
|
|
padding: '5px' |
|
|
|
|
// width: '500px',
|
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
<div>매진</div> |
|
|
|
|
</div> |
|
|
|
|
<div |
|
|
|
|
style={{ |
|
|
|
|
flex: 1, |
|
|
|
|
textAlign: 'center', |
|
|
|
|
border: '1px solid #F2F2F2', |
|
|
|
|
height: '50px', |
|
|
|
|
padding: '5px' |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
<div> |
|
|
|
|
<div> |
|
|
|
|
<span style={{ fontWeight: 'bold' }}>63,000 </span> |
|
|
|
|
<span>KRW</span> |
|
|
|
|
</div> |
|
|
|
|
<span>잔여7석</span> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div |
|
|
|
|
style={{ |
|
|
|
|
flex: 1, |
|
|
|
|
textAlign: 'center', |
|
|
|
|
border: '1px solid #F2F2F2', |
|
|
|
|
height: '50px', |
|
|
|
|
padding: '5px' |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
<div> |
|
|
|
|
<div> |
|
|
|
|
<span style={{ fontWeight: 'bold' }}>76,000 </span> |
|
|
|
|
<span>KRW</span> |
|
|
|
|
</div> |
|
|
|
|
<span>잔여7석</span> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div |
|
|
|
|
style={{ |
|
|
|
|
display: 'flex', |
|
|
|
|
alignItems: 'center' |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
<div style={{ flex: 1, textAlign: 'center' }}> |
|
|
|
|
<span>1시간 5분</span> |
|
|
|
|
<div style={{ fontWeight: 'bold' }}> |
|
|
|
|
10:40----------------------11: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', |
|
|
|
|
padding: '5px' |
|
|
|
|
// width: '500px',
|
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
<div>매진</div> |
|
|
|
|
</div> |
|
|
|
|
<div |
|
|
|
|
style={{ |
|
|
|
|
flex: 1, |
|
|
|
|
textAlign: 'center', |
|
|
|
|
border: '1px solid #F2F2F2', |
|
|
|
|
height: '50px', |
|
|
|
|
padding: '3px' |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
<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', |
|
|
|
|
padding: '3px' |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
<div> |
|
|
|
|
<div> |
|
|
|
|
<span style={{ fontWeight: 'bold' }}>76,000 </span> |
|
|
|
|
<span>KRW</span> |
|
|
|
|
</div> |
|
|
|
|
<span>잔여3석</span> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div |
|
|
|
|
style={{ |
|
|
|
|
display: 'flex', |
|
|
|
@ -511,9 +362,7 @@ export default function ReserveStep1() {
|
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|