From 362952088127c44b311d1dc17f55db8e065006be Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?junh=5Feee=28=EC=9D=B4=EC=A4=80=ED=9D=AC=29?=
 <junheee@palnet.co.kr>
Date: Thu, 26 Oct 2023 17:08:48 +0900
Subject: [PATCH] =?UTF-8?q?=EC=A7=80=EC=9D=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/css/custom.css                     |  22 +-
 .../control/setting/steps/ReserveStep1.js     | 563 +++++++-----------
 2 files changed, 225 insertions(+), 360 deletions(-)

diff --git a/src/assets/css/custom.css b/src/assets/css/custom.css
index 99ee06e..e7432b4 100644
--- a/src/assets/css/custom.css
+++ b/src/assets/css/custom.css
@@ -904,7 +904,23 @@ 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 .box{background:#242b3d;border:1px solid #404656;padding:0.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;}
 .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;}
\ No newline at end of file
+.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-table table{width:100%;margin:1rem auto}
+.reservation-table table tr th, .reservation-table table tr td{vertical-align:middle;}
+.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 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 .rate{font-size:0.875rem;font-weight:400;margin-left:4px}
+.reservation-table .state{font-size:1.25rem;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;}
\ No newline at end of file
diff --git a/src/views/control/setting/steps/ReserveStep1.js b/src/views/control/setting/steps/ReserveStep1.js
index b3ec6c8..a862a04 100644
--- a/src/views/control/setting/steps/ReserveStep1.js
+++ b/src/views/control/setting/steps/ReserveStep1.js
@@ -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,423 +107,262 @@ 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'
+            justifyContent: 'center',
+            flexDirection: 'column',
+            alignItems: 'center'
           }}
         >
-          <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>
+          <span style={{ color: '#990033' }}>여정 2</span>
           <div
             style={{
-              flex: 1,
               display: 'flex',
-              justifyContent: 'center',
+              justifyContent: 'space-around',
               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'
+              width: '25%'
             }}
           >
-            <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'
+                fontWeight: 'bold',
+                fontSize: '1.4rem',
+                color: '#000'
               }}
             >
-              <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
+              style={{
+                fontWeight: 'bold',
+                fontSize: '1.7rem',
+                color: '#000'
+              }}
+            >
+              ➔
             </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
+              style={{
+                fontWeight: 'bold',
+                fontSize: '1.4rem',
+                color: '#000'
+              }}
+            >
+              고양 킨텍스
             </div>
           </div>
         </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%'
+            //   justifyContent: 'space-between',
+            flexDirection: 'column',
+            borderBottom: '1px dotted #000'
           }}
         >
           <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'
+              display: 'flex',
+              backgroundColor: '#F2F2F2',
+              marginBottom: '5px',
+              padding: '10px'
             }}
           >
-            고양 킨텍스
-          </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 style={{ flex: 1, textAlign: 'center' }}>
+              출발/도착시간 (비행시간)
             </div>
-          </div>
-          <div style={{ flex: 1, textAlign: 'center' }}>
-            <div>3P1003</div>
-            <div>B737-800</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={{
-              flex: 1,
               display: 'flex',
-              justifyContent: 'center',
               alignItems: 'center',
-              height: '50px',
-              border: '1px solid #F2F2F2',
-              padding: '5px'
-              //   width: '500px',
+              borderBottom: '1px dotted #000',
+              marginBottom: '5px',
+              padding: '10px'
             }}
           >
-            <div>매진</div>
-          </div>
-          <div
-            style={{
-              flex: 1,
-              textAlign: 'center',
-              border: '1px solid #F2F2F2',
-              height: '50px',
-              padding: '5px'
-            }}
-          >
-            <div>
+            <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>
-              <span style={{ fontWeight: 'bold' }}>63,000 </span>
-                <span>KRW</span>
+                <div>
+                  <span style={{ fontWeight: 'bold' }}>76,000 </span>
+                  <span>KRW</span>
+                </div>
+                <span>잔여9석</span>
               </div>
-              <span>잔여7석</span>
             </div>
           </div>
           <div
             style={{
-              flex: 1,
-              textAlign: 'center',
-              border: '1px solid #F2F2F2',
-              height: '50px',
-              padding: '5px'
+              display: 'flex',
+              alignItems: 'center'
             }}
           >
-            <div>
-              <div>
-                <span style={{ fontWeight: 'bold' }}>76,000 </span>
-                <span>KRW</span>
+            <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>
-              <span>잔여9석</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 style={{ flex: 1, textAlign: 'center' }}>
+              <div>3P1003</div>
+              <div>B737-800</div>
             </div>
             <div
               style={{
+                flex: 1,
                 display: 'flex',
-                justifyContent: 'end',
-                marginRight: '40px'
+                justifyContent: 'center',
+                alignItems: 'center',
+                height: '50px',
+                border: '1px solid #F2F2F2',
+                padding: '3px'
+                //   width: '500px',
               }}
             >
-              <span>+1 day</span>
+              <div>매진</div>
             </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>
-          <div
-            style={{
-              flex: 1,
-              textAlign: 'center',
-              border: '1px solid #F2F2F2',
-              height: '50px',
-              padding: '3px'
-            }}
-          >
-            <div>
+            <div
+              style={{
+                flex: 1,
+                textAlign: 'center',
+                border: '1px solid #F2F2F2',
+                height: '50px',
+                padding: '3px'
+              }}
+            >
               <div>
-                <span style={{ fontWeight: 'bold' }}>63,000 </span>
-                <span>KRW</span>
+                <div>
+                  <span style={{ fontWeight: 'bold' }}>63,000 </span>
+                  <span>KRW</span>
+                </div>
+                <span>잔여3석</span>
               </div>
-              <span>잔여3석</span>
             </div>
-          </div>
-          <div
-            style={{
-              flex: 1,
-              textAlign: 'center',
-              border: '1px solid #F2F2F2',
-              height: '50px',
-              padding: '3px'
-            }}
-          >
-            <div>
+            <div
+              style={{
+                flex: 1,
+                textAlign: 'center',
+                border: '1px solid #F2F2F2',
+                height: '50px',
+                padding: '3px'
+              }}
+            >
               <div>
-              <span style={{ fontWeight: 'bold' }}>76,000 </span>
-                <span>KRW</span>
+                <div>
+                  <span style={{ fontWeight: 'bold' }}>76,000 </span>
+                  <span>KRW</span>
+                </div>
+                <span>잔여9석</span>
               </div>
-              <span>잔여9석</span>
             </div>
           </div>
         </div>
       </div>
-
-      </div>
-
     </div>
   );
 }