.

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 > div{width:100%}
-.uam-reservation-header .step li{font-size:0.875rem}
+.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 .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;}
+.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}

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,
+  NavLink
-  Row,
-  Col
 } 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(1, step)}>
-                <li className={getStepColorClass(2, step)}>➁ 항공교통 선택</li>
+                  <span className='num-icon'>1</span>
-                <li className={getStepColorClass(3, step)}>➂ 탑승정보 입력</li>
+                  <span className='ti'>항공교통 조회</span>
-                <li className={getStepColorClass(4, step)}>➃ 결제</li>
+                </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 className='uam-reservation-btn'>
                   <div>
-                  <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>
               ) : (

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 {
-import { ArrowRight } from 'react-feather';
+  Badge,
+  Button,
+  Modal,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  Alert
+} from 'reactstrap';
+import { ArrowRight, XCircle, X } from 'react-feather';
 
 export default function ReserveStep1() {
   const settings = {
@@ -15,10 +23,44 @@ 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'
+            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>
@@ -26,6 +68,90 @@ export default function ReserveStep1() {
               <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,6 +166,7 @@ export default function ReserveStep1() {
             </span>
             <span>여의도 공원</span>
           </div>
+        </div>
 
         <div className='reservation-date'>
           <Slider {...settings}>
@@ -110,10 +237,11 @@ export default function ReserveStep1() {
                   <div>
                     <span className='alltime'>
                       <span className='time'>1시간 5분</span>
-                        <span className='start'>08:40</span>
+                      <span className='start'>12:40</span>
+                      <span className='line'></span>
                       <span className='arrive'>09:45</span>
-                      </span>
                       <span className='plus'>+ 1 day</span>
+                    </span>
                   </div>
                 </td>
                 <td>
@@ -144,223 +272,103 @@ export default function ReserveStep1() {
                   </div>
                 </td>
               </tr>
-              </tbody>
+              <tr>
-            </table>
+                <td colspan='5' className='test'>
-          </div>
+                  ddd
-        </div>
+                </td>
-
+              </tr>
-        <div
+              <tr>
-          style={{
+                <td>
-            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>
-            <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 className='alltime'>
-                  <span>KRW</span>
+                      <span className='time'>1시간 5분</span>
-                </div>
+                      <span className='start'>12:40</span>
-                <span>잔여9석</span>
+                      <span className='line'></span>
-              </div>
+                      <span className='arrive'>09:45</span>
-            </div>
+                      <span className='plus'>+ 1 day</span>
-          </div>
+                    </span>
-          <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
+                </td>
-                style={{
+                <td>
-                  display: 'flex',
+                  <div className='flight'>
-                  justifyContent: 'end',
+                    <span>3P1003</span>
-                  marginRight: '40px'
+                    <span>B737-800</span>
-                }}
-              >
-                <span>+1 day</span>
                   </div>
+                </td>
+                <td>
+                  <div className='amount'>
+                    <span className='state'>매진</span>
                   </div>
-            <div style={{ flex: 1, textAlign: 'center' }}>
+                </td>
-              <div>3P1003</div>
+                <td>
-              <div>B737-800</div>
+                  <div className='amount'>
+                    <span className='state'>
+                      76.000<span className='rate'>KRW</span>
+                    </span>
+                    <span className='seat'>잔여 7석</span>
                   </div>
-            <div
+                </td>
-              style={{
+                <td>
-                flex: 1,
+                  <div className='amount'>
-                display: 'flex',
+                    <span className='state'>
-                justifyContent: 'center',
+                      76.000<span className='rate'>KRW</span>
-                alignItems: 'center',
+                    </span>
-                height: '50px',
+                    <span className='seat'>잔여 7석</span>
-                border: '1px solid #F2F2F2',
-                padding: '3px'
-                //   width: '500px',
-              }}
-            >
-              <div>매진</div>
                   </div>
-            <div
+                </td>
-              style={{
+              </tr>
-                flex: 1,
+              <tr>
-                textAlign: 'center',
+                <td colspan='5' className='test'>
-                border: '1px solid #F2F2F2',
+                  ddd
-                height: '50px',
+                </td>
-                padding: '3px'
+              </tr>
-              }}
+              <tr>
-            >
+                <td>
-              <div>
                   <div>
-                  <span style={{ fontWeight: 'bold' }}>63,000 </span>
+                    <span className='alltime'>
-                  <span>KRW</span>
+                      <span className='time'>1시간 5분</span>
-                </div>
+                      <span className='start'>12:40</span>
-                <span>잔여3석</span>
+                      <span className='line'></span>
-              </div>
+                      <span className='arrive'>09:45</span>
+                      <span className='plus'>+ 1 day</span>
+                    </span>
                   </div>
-            <div
+                </td>
-              style={{
+                <td>
-                flex: 1,
+                  <div className='flight'>
-                textAlign: 'center',
+                    <span>3P1003</span>
-                border: '1px solid #F2F2F2',
+                    <span>B737-800</span>
-                height: '50px',
-                padding: '3px'
-              }}
-            >
-              <div>
-                <div>
-                  <span style={{ fontWeight: 'bold' }}>76,000 </span>
-                  <span>KRW</span>
                   </div>
-                <span>잔여9석</span>
+                </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>