김지은 11 months ago
parent
commit
af942b57c2
  1. 57
      src/assets/css/custom.css
  2. 75
      src/views/control/setting/ControlReservation.js
  3. 644
      src/views/control/setting/steps/ReserveStep1.js

57
src/assets/css/custom.css

@ -847,20 +847,32 @@ background-size: 75% auto;
.modal-video{display:flex;align-items: center;justify-content: center;}
.modal-video>.modal-content{height:90vh;}
.uam-reservation{min-width:1200px}
.uam-reservation{min-width:1200px;}
.uam-reservation .nav-link{transition:0.3s ease;-webkit-transition:0.3s ease;}
.uam-reservation .nav-link{border:0px;background-color:#242b3d}
.uam-reservation .nav-link.active span{font-weight:500}
.uam-reservation-header{display:flex;width:100%;align-items:center;justify-content:space-between;}
.uam-reservation-header h5{font-weight:500;}
.uam-reservation-header .step{display:flex;}
.uam-reservation-header .step li{font-size:0.875rem}
.uam-reservation-header > div{width:100%}
.uam-reservation-header .step{display:flex;width:100%;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid rgba(255,255,255,0.1)}
.uam-reservation-header .step li{font-size:0.875rem;display:flex;align-items:center;}
.uam-reservation-header .step li + li{margin-left:0.5rem}
.uam-reservation-header .step .num-icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius: 0.357rem;background:#10163A;margin-right:10px;}
.uam-reservation-header .step .ti{font-size:1rem}
.uam-reservation-header .step .line{width:14px;color: rgba(255,255,255,0.4);margin:0 0.3rem 0 0.5rem}
.uam-reservation-tab-list{display:flex;}
.uam-reservation-tab-list .list{display: flex;justify-content:center;align-items:center;flex:1;background-color:#242b3d;padding:0.5rem;font-size:0.875rem;text-align:center;border-radius: 0.357rem;cursor:pointer;border:1px solid #404656;}
.uam-reservation-tab-list .list + .list{margin-left:0.5rem}
.uam-reservation-header .step .active-step .num-icon{background:#7367f0;font-weight:500;}
.uam-reservation-header .step .active-step .ti{font-weight:500;}
.active-step{color:rgba(255,255,255,0.8);font-weight:500;}
.inactive-step{color:rgba(255,255,255,0.4);}
.list.active {background-color: #7367f0;border-color:#7367f0;color:#fff;font-weight:500;}
.finish.active{background-color: #ff9f43;border-color:#ff9f43;color: #fff;}
.step-wrap{margin-top:1rem;border-radius: 0.357rem;}
.step-box{padding:1rem;background-color:#242b3d;}
.step-box{padding:1rem;background-color:#242b3d;border-radius: 0.357rem;}
.step-box + .step-box{margin-top:1rem}
.step-box-ti{border-bottom:1px solid #404656;padding-bottom:0.5rem;margin-bottom:1rem;display:flex;align-items:center;justify-content: space-between;}
.step-box-ti h5{font-weight:500;font-size:1rem}
@ -884,15 +896,10 @@ background-size: 75% auto;
.step-wrap .passengers .btn-icon svg{margin-top:4px;}
.step-wrap .finish-btn{text-align:right;margin-top:1rem;}
.active-step{color:rgba(255,255,255,0.8);font-weight:500;}
.inactive-step{color:rgba(255,255,255,0.4);}
.list.active {background-color: #7367f0;border-color:#7367f0;color:#fff;font-weight:500;}
.finish.active{background-color: #ff9f43;border-color:#ff9f43;color: #fff;}
.step-reservation .uam-reservation-tab-list .btn{margin-left:1rem}
.step-box{padding:1rem;background-color:#242b3d;}
.step-reservation-header{text-align:center;}
.step-reservation-header .place{margin:0.5rem 0;}
.step-reservation-header .place{margin:1rem 0;}
.step-reservation-header .place span{font-size:1.5rem;font-weight:500;color:#fff}
.step-reservation-header .arrow svg{width:22px;margin-top:-2px;margin-left:8px;margin-right:8px}
@ -902,6 +909,7 @@ background-size: 75% auto;
.fsm-ti .btn-wrap button + button{margin-left:0.5rem}
.fsm-box .list-input label{font-size:0.875rem}
.reservation-date{margin-left:1.5rem;margin-right:1.5rem}
.reservation-date .box{display:flex!important;flex-direction: column;align-items:center;justify-content:center;background:#404656;border:2px solid #404656;border-radius: 0.1rem;padding:0.5rem;cursor:pointer;min-height:80px}
.reservation-date .box.active{border-color: #7367f0;}
.reservation-date .box.active span{color:#fff;}
@ -909,16 +917,33 @@ background-size: 75% auto;
.reservation-date .box .state{font-size:1.25rem;font-weight:400;}
.reservation-date .box .rate{font-size:0.875rem;margin-left:4px}
.reservation-date .slick-slide{margin-left:1rem;max-width: 144px;}
.reservation-date .slick-next{ right: -30px;}
.reservation-date .slick-prev{left: -30px;}
.reservation-table table{width:100%;margin:1rem auto}
.reservation-table table tr th, .reservation-table table tr td{vertical-align:middle;}
.reservation-table table tr th, .reservation-table table tr td{vertical-align:middle;text-align:center}
.reservation-table table thead{background:#343d55;font-size:1rem;}
.reservation-table table thead tr th{padding:0.8rem 0.4rem;font-weight:500;}
.reservation-table table thead tr th{padding:0.8rem 0.4rem;font-weight:500;;}
.reservation-table table tbody tr td{padding:0.8rem 0;}
.reservation-table table tbody tr td:nth-child(4) .amount{border-left:0;border-right:0}
.reservation-table table tbody tr td .amount{border:1px solid #404656;width:100%;height:80px;display:flex;flex-direction:column;justify-content:center;align-items:center;margin:0px auto;line-height:1.2;}
.reservation-table table tbody tr td .amount{border:1px solid #404656;width:100%;height:60px;display:flex;flex-direction:column;justify-content:center;align-items:center;margin:0px auto;line-height:1.2;}
.reservation-table table tbody tr td .rate{font-size:0.875rem;font-weight:400;margin-left:4px}
.reservation-table .state{font-size:1.25rem;font-weight:400}
.reservation-table .state{font-size:1.125rem;font-weight:400}
.reservation-table .flight span{display:block;}
.reservation-table .seat{display:block;font-size:0.875rem;margin-top:6px;font-weight:400;}
.reservation-table .alltime .start, .reservation-table .alltime .arrive{font-size:1.25rem;font-weight:400;color:#ddd;}
.reservation-table .seat{display:block;font-size:0.75rem;font-weight:400;}
.reservation-table .alltime .start, .reservation-table .alltime .arrive{font-size:1.25rem;font-weight:400;color:#ddd;padding:0 0.7rem;}
.reservation-table .alltime{display:flex;align-items: center;justify-content: center;width:100%;position: relative;}
.reservation-table .alltime .time{position:absolute;left:50%;transform: translateX(-50%);top:-10px;font-size:0.75rem}
.reservation-table .alltime .plus{position:absolute;left:50%;transform: translateX(-50%);bottom:-10px;font-size:0.75rem}
.reservation-table .alltime .line{display:inline-block;width:55%;height:1px;background:#b4b7bd;position: relative;}
.reservation-table .alltime .line::before{content:'';display:block;width:7px;height:7px;border-radius:100%;background:#b4b7bd;position:absolute;left:0;top:-3px;}
.reservation-table .alltime .line::after{content:'';display:block;width:7px;height:7px;border-radius:100%;background:#b4b7bd;position:absolute;right:0;top:-3px;}
.uam-reservation-quick{min-width:1200px}
.uam-reservation-quick .modal-title{width:100%}
.uam-reservation-quick .uam-reservation-tab-list .btn{margin-left:1rem}
.uam-reservation-btn{display:flex;justify-content:space-between;margin-top:1rem}
.uam-reservation-btn button{min-width:120px}
.test{background:red}

75
src/views/control/setting/ControlReservation.js

@ -1,4 +1,4 @@
import { useRef, useState } from 'react';
import { useState } from 'react';
import {
Badge,
Button,
@ -9,9 +9,7 @@ import {
ModalBody,
Nav,
NavItem,
NavLink,
Row,
Col
NavLink
} from 'reactstrap';
import {
Step1,
@ -24,7 +22,7 @@ import {
ReserveStep4
} from './steps';
import { CustomMainLayout } from '../../../components/layout/CustomMainLayout';
import { ArrowRight } from 'react-feather';
import { ChevronRight } from 'react-feather';
export default function ControlReservation({ modal, handler }) {
const [activeTab, setActiveTab] = useState(1);
@ -40,9 +38,6 @@ export default function ControlReservation({ modal, handler }) {
}
return (
<CustomMainLayout title={titleName}>
<Row>
<Col sm='12'>dd</Col>
</Row>
<div className='uam-reservation'>
<div>
{search ? (
@ -51,15 +46,30 @@ export default function ControlReservation({ modal, handler }) {
<div>
<ul className='step'>
<li className={getStepColorClass(1, step)}>
항공교통 조회
<span className='num-icon'>1</span>
<span className='ti'>항공교통 조회</span>
</li>
<li className='line'>
<ChevronRight />
</li>
<li className={getStepColorClass(2, step)}>
항공교통 선택
<span className='num-icon'>2</span>
<span className='ti'>항공교통 선택</span>
</li>
<li className='line'>
<ChevronRight />
</li>
<li className={getStepColorClass(3, step)}>
탑승정보 입력
<span className='num-icon'>3</span>
<span className='ti'>탑승정보 입력</span>
</li>
<li className='line'>
<ChevronRight />
</li>
<li className={getStepColorClass(4, step)}>
<span className='num-icon'>4</span>
<span className='ti'>결제</span>
</li>
<li className={getStepColorClass(4, step)}> 결제</li>
</ul>
</div>
</div>
@ -71,10 +81,31 @@ export default function ControlReservation({ modal, handler }) {
) : (
<div className='uam-reservation-header'>
<ul className='step'>
<li className={getStepColorClass(1, step)}> 항공교통 조회</li>
<li className={getStepColorClass(2, step)}> 항공교통 선택</li>
<li className={getStepColorClass(3, step)}> 탑승정보 입력</li>
<li className={getStepColorClass(4, step)}> 결제</li>
<li className={getStepColorClass(1, step)}>
<span className='num-icon'>1</span>
<span className='ti'>항공교통 조회</span>
</li>
<li className='line'>
<ChevronRight />
</li>
<li className={getStepColorClass(2, step)}>
<span className='num-icon'>2</span>
<span className='ti'>항공교통 선택</span>
</li>
<li className='line'>
<ChevronRight />
</li>
<li className={getStepColorClass(3, step)}>
<span className='num-icon'>3</span>
<span className='ti'>탑승정보 입력</span>
</li>
<li className='line'>
<ChevronRight />
</li>
<li className={getStepColorClass(4, step)}>
<span className='num-icon'>4</span>
<span className='ti'>결제</span>
</li>
</ul>
</div>
)}
@ -160,9 +191,10 @@ export default function ControlReservation({ modal, handler }) {
{reserveStep === 3 && <ReserveStep3 />}
{reserveStep === 4 && <ReserveStep4 />}
{reserveStep !== 4 ? (
<div>
<div className='uam-reservation-btn'>
<div>
<button
<Button
color='danger'
onClick={() => {
if (reserveStep === 1) {
setIsChoise(false);
@ -175,17 +207,18 @@ export default function ControlReservation({ modal, handler }) {
}}
>
취소
</button>
</Button>
</div>
<div>
<button
<Button
color='primary'
onClick={() => {
setReserveStep(reserveStep + 1);
setStep(step + 1);
}}
>
{reserveStep === 3 ? '결제하기' : '다음'}
</button>
</Button>
</div>
</div>
) : (

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

@ -4,8 +4,16 @@ 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';
import {
Badge,
Button,
Modal,
ModalHeader,
ModalBody,
ModalFooter,
Alert
} from 'reactstrap';
import { ArrowRight, XCircle, X } from 'react-feather';
export default function ReserveStep1() {
const settings = {
@ -15,17 +23,135 @@ export default function ReserveStep1() {
slidesToShow: 7,
slidesToScroll: 1
};
const [centeredModal, setCenteredModal] = useState(false);
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>
<Button>수정</Button>
<div
className='list'
onClick={() => setCenteredModal(!centeredModal)}
>
고양 킨텍스
</div>
<div
className='list'
onClick={() => setCenteredModal(!centeredModal)}
>
여의도 공원
</div>
<div
className='list'
onClick={() => setCenteredModal(!centeredModal)}
>
2023. 10. 22() ~ 2023. 11. 01()
</div>
<div
className='list'
onClick={() => setCenteredModal(!centeredModal)}
>
성인 1, 소아 1, 유아 1
</div>
<Button onClick={() => setCenteredModal(!centeredModal)}>수정</Button>
</div>
<Modal
isOpen={centeredModal}
toggle={() => setCenteredModal(!centeredModal)}
className='modal-dialog-centered uam-reservation-quick'
>
<ModalHeader>
<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>
<Button>수정</Button>
</div>
</ModalHeader>
<ModalBody>
<div className='step-wrap'>
<div className='step-box'>
<div className='step-box-ti'>
<h5>출발지 선택</h5>
{/*
step-wrap이 닫히거나 변경? 추후에... 다시 상의..
modal사용시 quick box 커스텀 어려움
modal 제거 하드코딩 ? 추후 상의
현재는 그냥 기획서상 화면만 구현 */}
<Button
className='btn-icon'
color='primary'
onClick={() => setCenteredModal(!centeredModal)}
>
<X size={16} />
</Button>
</div>
<div className='step-box-city'>
<ul className='step-box-city-list'>
<li className='step-city-ti'>아라뱃길</li>
<li>
<ul>
<li>드론시험 인증센터</li>
<li>계양 신도시</li>
</ul>
</li>
</ul>
<ul className='step-box-city-list'>
<li className='step-city-ti'>한강</li>
<li>
<ul>
<li>고양 킨텍스</li>
<li>김포공항</li>
<li>여의도 공원</li>
</ul>
</li>
</ul>
<ul className='step-box-city-list'>
<li className='step-city-ti'>탄천</li>
<li>
<ul>
<li>잠실한강공원</li>
<li>수서역</li>
</ul>
</li>
</ul>
</div>
</div>
<div className='step-box'>
<div className='step-box-ti'>
<h5>최근 조회하신 여정</h5>
</div>
<div className='search-box-city'>
<div className='search-city'>
<div>
<span>드론시험 인증센터</span>
<span className='arrow'>
<ArrowRight />
</span>
<span>계양 신도시</span>
</div>
<div className='delete'>
<XCircle />
</div>
</div>
<div className='search-city'>
<div>
<span>드론시험 인증센터</span>
<span className='arrow'>
<ArrowRight />
</span>
<span>계양 신도시</span>
</div>
<div className='delete'>
<XCircle />
</div>
</div>
</div>
</div>
</div>
</ModalBody>
</Modal>
</div>
<div className='step-box'>
@ -40,327 +166,209 @@ export default function ReserveStep1() {
</span>
<span>여의도 공원</span>
</div>
<div className='reservation-date'>
<Slider {...settings}>
<div className='box'>
<span className='date'>2025.10.23()</span>
<span className='state'>매진</span>
</div>
<div className='box'>
<span className='date'>2025.10.24()</span>
<span className='state'>매진</span>
</div>
<div className='box'>
<span className='date'>2025.10.25()</span>
<span className='state'>매진</span>
</div>
<div className='box active'>
<span className='date'>2025.10.26()</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>
</div>
<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 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>
<th>편명/기종</th>
<th>특가운임</th>
<th>할인운임</th>
<th>정규운임</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>
<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 className='flight'>
<span>3P1003</span>
<span>B737-800</span>
</div>
</td>
<td>
<div className='amount'>
<span className='state'>매진</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>
<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: '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',
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 className='reservation-date'>
<Slider {...settings}>
<div className='box'>
<span className='date'>2025.10.23()</span>
<span className='state'>매진</span>
</div>
<div style={{ flex: 1, textAlign: 'center' }}>
<div>3P1003</div>
<div>B737-800</div>
<div className='box'>
<span className='date'>2025.10.24()</span>
<span className='state'>매진</span>
</div>
<div
style={{
flex: 1,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
height: '50px',
border: '1px solid #F2F2F2',
padding: '5px'
// width: '500px',
}}
>
<div>매진</div>
<div className='box'>
<span className='date'>2025.10.25()</span>
<span className='state'>매진</span>
</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 className='box active'>
<span className='date'>2025.10.26()</span>
<span className='state'>
56,000<span className='rate'>KRW</span>
</span>
</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>잔여9석</span>
</div>
<div className='box'>
<span className='date'>2025.10.27()</span>
<span className='state'>
58,000<span className='rate'>KRW</span>
</span>
</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: '3px'
// width: '500px',
}}
>
<div>매진</div>
<div className='box'>
<span className='date'>2025.10.28()</span>
<span className='state'>-</span>
</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 className='box'>
<span className='date'>2025.10.29()</span>
<span className='state'>
48,000<span className='rate'>KRW</span>
</span>
</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>잔여9석</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>
</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>
<th>편명/기종</th>
<th>특가운임</th>
<th>할인운임</th>
<th>정규운임</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>
<span className='alltime'>
<span className='time'>1시간 5</span>
<span className='start'>12:40</span>
<span className='line'></span>
<span className='arrive'>09:45</span>
<span className='plus'>+ 1 day</span>
</span>
</div>
</td>
<td>
<div className='flight'>
<span>3P1003</span>
<span>B737-800</span>
</div>
</td>
<td>
<div className='amount'>
<span className='state'>매진</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>
<td>
<div className='amount'>
<span className='state'>
76.000<span className='rate'>KRW</span>
</span>
<span className='seat'>잔여 7</span>
</div>
</td>
</tr>
<tr>
<td colspan='5' className='test'>
ddd
</td>
</tr>
<tr>
<td>
<div>
<span className='alltime'>
<span className='time'>1시간 5</span>
<span className='start'>12:40</span>
<span className='line'></span>
<span className='arrive'>09:45</span>
<span className='plus'>+ 1 day</span>
</span>
</div>
</td>
<td>
<div className='flight'>
<span>3P1003</span>
<span>B737-800</span>
</div>
</td>
<td>
<div className='amount'>
<span className='state'>매진</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>
<td>
<div className='amount'>
<span className='state'>
76.000<span className='rate'>KRW</span>
</span>
<span className='seat'>잔여 7</span>
</div>
</td>
</tr>
<tr>
<td colspan='5' className='test'>
ddd
</td>
</tr>
<tr>
<td>
<div>
<span className='alltime'>
<span className='time'>1시간 5</span>
<span className='start'>12:40</span>
<span className='line'></span>
<span className='arrive'>09:45</span>
<span className='plus'>+ 1 day</span>
</span>
</div>
</td>
<td>
<div className='flight'>
<span>3P1003</span>
<span>B737-800</span>
</div>
</td>
<td>
<div className='amount'>
<span className='state'>매진</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>
<td>
<div className='amount'>
<span className='state'>
76.000<span className='rate'>KRW</span>
</span>
<span className='seat'>잔여 7</span>
</div>
</td>
</tr>
<tr>
<td colspan='5' className='test'>
ddd
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

Loading…
Cancel
Save