|
|
|
@ -1,19 +1,22 @@
|
|
|
|
|
import React, { useState, Component } from 'react' |
|
|
|
|
|
|
|
|
|
import Slider from "react-slick"; |
|
|
|
|
import 'slick-carousel/slick/slick.css'; |
|
|
|
|
import 'slick-carousel/slick/slick-theme.css'; |
|
|
|
|
|
|
|
|
|
import { Badge, Button } from 'reactstrap'; |
|
|
|
|
import { ArrowRight } from 'react-feather'; |
|
|
|
|
|
|
|
|
|
export default function ReserveStep1() { |
|
|
|
|
const settings = { |
|
|
|
|
dots: true, |
|
|
|
|
dots: false, |
|
|
|
|
infinite: true, |
|
|
|
|
speed: 500, |
|
|
|
|
slidesToShow: 1, |
|
|
|
|
slidesToShow: 7, |
|
|
|
|
slidesToScroll: 1 |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<div className='step-reservation'> |
|
|
|
|
<div className='step-box'> |
|
|
|
@ -43,29 +46,88 @@ export default function ReserveStep1() {
|
|
|
|
|
<span>여의도 공원</span> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div> |
|
|
|
|
<h2> Single Item</h2> |
|
|
|
|
<div className='reservation-date'> |
|
|
|
|
<Slider {...settings}> |
|
|
|
|
<div> |
|
|
|
|
<h3>1</h3> |
|
|
|
|
<div className='box'> |
|
|
|
|
<span className='date'>2025.10.23(월)</span> |
|
|
|
|
<span className='state'>매진</span> |
|
|
|
|
</div> |
|
|
|
|
<div> |
|
|
|
|
<h3>2</h3> |
|
|
|
|
<div className='box'> |
|
|
|
|
<span className='date'>2025.10.24(화)</span> |
|
|
|
|
<span className='state'>매진</span> |
|
|
|
|
</div> |
|
|
|
|
<div> |
|
|
|
|
<h3>3</h3> |
|
|
|
|
<div className='box'> |
|
|
|
|
<span className='date'>2025.10.25(수)</span> |
|
|
|
|
<span className='state'>매진</span> |
|
|
|
|
</div> |
|
|
|
|
<div> |
|
|
|
|
<h3>4</h3> |
|
|
|
|
<div className='box'> |
|
|
|
|
<span className='date'>2025.10.26(목)</span> |
|
|
|
|
<span className='state'>56,000<span className='rate'>KRW</span></span> |
|
|
|
|
</div> |
|
|
|
|
<div> |
|
|
|
|
<h3>5</h3> |
|
|
|
|
<div className='box'> |
|
|
|
|
<span className='date'>2025.10.27(금)</span> |
|
|
|
|
<span className='state'>58,000<span className='rate'>KRW</span></span> |
|
|
|
|
</div> |
|
|
|
|
<div> |
|
|
|
|
<h3>6</h3> |
|
|
|
|
<div className='box'> |
|
|
|
|
<span className='date'>2025.10.28(토)</span> |
|
|
|
|
<span className='state'>-</span> |
|
|
|
|
</div> |
|
|
|
|
<div className='box'> |
|
|
|
|
<span className='date'>2025.10.29(일)</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> |
|
|
|
|
</div> |
|
|
|
|
</Slider> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div> |
|
|
|
|
<table> |
|
|
|
|
<thead> |
|
|
|
|
<tr> |
|
|
|
|
<th>출발/도착시간(비행시간)</th> |
|
|
|
|
<th>편명/기종</th> |
|
|
|
|
<th>특가운임</th> |
|
|
|
|
<th>할인운임</th> |
|
|
|
|
<th>정규운임</th> |
|
|
|
|
</tr> |
|
|
|
|
</thead> |
|
|
|
|
<tbody> |
|
|
|
|
<tr> |
|
|
|
|
<td> |
|
|
|
|
<span>1시간 5분</span> |
|
|
|
|
<div> |
|
|
|
|
<span>08:40</span>- |
|
|
|
|
<span>09:45</span> |
|
|
|
|
<span>+1 day</span> |
|
|
|
|
</div> |
|
|
|
|
</td> |
|
|
|
|
<td> |
|
|
|
|
<div> |
|
|
|
|
<span>3P1003</span> |
|
|
|
|
<span>B737-800</span> |
|
|
|
|
</div> |
|
|
|
|
</td> |
|
|
|
|
<td><span>매진</span></td> |
|
|
|
|
<td> |
|
|
|
|
<div> |
|
|
|
|
<span>76.000 KRW</span> |
|
|
|
|
<span>잔여7석</span> |
|
|
|
|
</div> |
|
|
|
|
</td> |
|
|
|
|
<td> |
|
|
|
|
<div> |
|
|
|
|
<span>76.000 KRW</span> |
|
|
|
|
<span>잔여7석</span> |
|
|
|
|
</div> |
|
|
|
|
</td> |
|
|
|
|
</tr> |
|
|
|
|
</tbody> |
|
|
|
|
</table> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div |
|
|
|
|