kyw546 11 months ago
parent
commit
a93275dde0
  1. 5
      package-lock.json
  2. 1
      package.json
  3. 7
      src/assets/css/custom.css
  4. 94
      src/views/control/setting/steps/ReserveStep1.js

5
package-lock.json generated

@ -23524,6 +23524,11 @@
"is-fullwidth-code-point": "^3.0.0" "is-fullwidth-code-point": "^3.0.0"
} }
}, },
"slick-carousel": {
"version": "1.8.1",
"resolved": "https://registry.npmjs.org/slick-carousel/-/slick-carousel-1.8.1.tgz",
"integrity": "sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA=="
},
"smoothscroll-polyfill": { "smoothscroll-polyfill": {
"version": "0.4.4", "version": "0.4.4",
"resolved": "https://registry.npmjs.org/smoothscroll-polyfill/-/smoothscroll-polyfill-0.4.4.tgz", "resolved": "https://registry.npmjs.org/smoothscroll-polyfill/-/smoothscroll-polyfill-0.4.4.tgz",

1
package.json

@ -104,6 +104,7 @@
"redux-thunk": "2.3.0", "redux-thunk": "2.3.0",
"sass": "1.26.8", "sass": "1.26.8",
"screenfull": "5.0.2", "screenfull": "5.0.2",
"slick-carousel": "^1.8.1",
"sortablejs": "1.12.0", "sortablejs": "1.12.0",
"styled-components": "5.1.1", "styled-components": "5.1.1",
"sweetalert2": "10.14.0", "sweetalert2": "10.14.0",

7
src/assets/css/custom.css

@ -902,4 +902,9 @@ background-size: 75% auto;
.fsm-ti{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #404656;padding-bottom:0.5rem;margin-bottom:1rem} .fsm-ti{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #404656;padding-bottom:0.5rem;margin-bottom:1rem}
.fsm-ti h5{font-weight:500} .fsm-ti h5{font-weight:500}
.fsm-ti .btn-wrap button + button{margin-left:0.5rem} .fsm-ti .btn-wrap button + button{margin-left:0.5rem}
.fsm-box .list-input label{font-size:0.875rem} .fsm-box .list-input label{font-size:0.875rem}
.reservation-date .box{background:#242b3d;border:1px solid #404656;padding:0.5rem}
.reservation-date .box .date{display:block;font-size:0.875rem}
.reservation-date .box .state{font-size:1.5rem;}
.reservation-date .slick-slide{margin-left:1rem;max-width: 144px;}

94
src/views/control/setting/steps/ReserveStep1.js

@ -1,19 +1,22 @@
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';
import { Badge, Button } from 'reactstrap'; import { Badge, Button } from 'reactstrap';
import { ArrowRight } from 'react-feather'; import { ArrowRight } from 'react-feather';
export default function ReserveStep1() { export default function ReserveStep1() {
const settings = { const settings = {
dots: true, dots: false,
infinite: true, infinite: true,
speed: 500, speed: 500,
slidesToShow: 1, slidesToShow: 7,
slidesToScroll: 1 slidesToScroll: 1
}; };
return ( return (
<div className='step-reservation'> <div className='step-reservation'>
<div className='step-box'> <div className='step-box'>
@ -43,29 +46,88 @@ export default function ReserveStep1() {
<span>여의도 공원</span> <span>여의도 공원</span>
</div> </div>
<div> <div className='reservation-date'>
<h2> Single Item</h2>
<Slider {...settings}> <Slider {...settings}>
<div> <div className='box'>
<h3>1</h3> <span className='date'>2025.10.23()</span>
<span className='state'>매진</span>
</div> </div>
<div> <div className='box'>
<h3>2</h3> <span className='date'>2025.10.24()</span>
<span className='state'>매진</span>
</div> </div>
<div> <div className='box'>
<h3>3</h3> <span className='date'>2025.10.25()</span>
<span className='state'>매진</span>
</div> </div>
<div> <div className='box'>
<h3>4</h3> <span className='date'>2025.10.26()</span>
<span className='state'>56,000<span className='rate'>KRW</span></span>
</div> </div>
<div> <div className='box'>
<h3>5</h3> <span className='date'>2025.10.27()</span>
<span className='state'>58,000<span className='rate'>KRW</span></span>
</div> </div>
<div> <div className='box'>
<h3>6</h3> <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> </div>
</Slider> </Slider>
</div> </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>
<div <div

Loading…
Cancel
Save