d

package-lock.json

@@ -8621,6 +8621,11 @@
         }
       }
     },
+    "enquire.js": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/enquire.js/-/enquire.js-2.1.6.tgz",
+      "integrity": "sha512-/KujNpO+PT63F7Hlpu4h3pE3TokKRHN26JYmQpPyjkRD/N57R7bPDNojMXdi7uveAKjYB7yQnartCxZnFWr0Xw=="
+    },
     "enquirer": {
       "version": "2.3.6",
       "resolved": "https://registry.npmjs.org/enquirer/-/enquirer-2.3.6.tgz",
@@ -12557,6 +12562,14 @@
       "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=",
       "dev": true
     },
+    "json2mq": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/json2mq/-/json2mq-0.2.0.tgz",
+      "integrity": "sha512-SzoRg7ux5DWTII9J2qkrZrqV1gt+rTaoufMxEzXbS26Uid0NwaJd123HcoB80TgubEppxxIGdNxCx50fEoEWQA==",
+      "requires": {
+        "string-convert": "^0.2.0"
+      }
+    },
     "json3": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/json3/-/json3-3.3.3.tgz",
@@ -21756,6 +21769,18 @@
         "shepherd.js": "^8.0.0"
       }
     },
+    "react-slick": {
+      "version": "0.29.0",
+      "resolved": "https://registry.npmjs.org/react-slick/-/react-slick-0.29.0.tgz",
+      "integrity": "sha512-TGdOKE+ZkJHHeC4aaoH85m8RnFyWqdqRfAGkhd6dirmATXMZWAxOpTLmw2Ll/jPTQ3eEG7ercFr/sbzdeYCJXA==",
+      "requires": {
+        "classnames": "^2.2.5",
+        "enquire.js": "^2.1.6",
+        "json2mq": "^0.2.0",
+        "lodash.debounce": "^4.0.8",
+        "resize-observer-polyfill": "^1.5.0"
+      }
+    },
     "react-slidedown": {
       "version": "2.4.5",
       "resolved": "https://registry.npmjs.org/react-slidedown/-/react-slidedown-2.4.5.tgz",
@@ -24030,6 +24055,11 @@
       "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
       "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM="
     },
+    "string-convert": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/string-convert/-/string-convert-0.2.1.tgz",
+      "integrity": "sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A=="
+    },
     "string-length": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz",

package.json

@@ -92,6 +92,7 @@
     "react-scroll-up": "1.3.7",
     "react-select": "4.0.2",
     "react-shepherd": "3.3.0",
+    "react-slick": "^0.29.0",
     "react-slidedown": "2.4.5",
     "react-sortablejs": "6.0.0",
     "react-toastify": "7.0.3",

src/assets/css/custom.css

@@ -859,7 +859,7 @@ background-size: 75% auto;
 .uam-reservation-header .step li{font-size:0.875rem}
 .uam-reservation-header .step li + li{margin-left: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;}
+.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}
 .step-wrap{margin-top:1rem;border-radius: 0.357rem;}
 .step-box{padding:1rem;background-color:#242b3d;}
@@ -886,8 +886,15 @@ 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;color:#fff;font-weight:500;}
+.list.active {background-color: #7367f0;border-color:#7367f0;color:#fff;font-weight:500;}
-.finish.active{background-color: #ff9f43;color: #fff;}
+.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 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}
+

src/views/control/setting/ControlReservation.js

@@ -137,20 +137,9 @@ export default function ControlReservation({ modal, handler }) {
               {reserveStep === 3 && <ReserveStep3 />}
               {reserveStep === 4 && <ReserveStep4 />}
               {reserveStep !== 4 ? (
-                <div
+                <div>
-                  style={{
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    padding: '5px 35px',
-                    marginBottom: '20px'
-                  }}
-                >
                   <div>
                     <button
-                      style={{
-                        padding: '10px 50px',
-                        backgroundColor: '#F2F2F2'
-                      }}
                       onClick={() => {
                         if (reserveStep === 1) {
                           setIsChoise(false);
@@ -167,11 +156,6 @@ export default function ControlReservation({ modal, handler }) {
                   </div>
                   <div>
                     <button
-                      style={{
-                        padding: '10px 50px',
-                        backgroundColor: '#990033',
-                        color: '#fff'
-                      }}
                       onClick={() => {
                         setReserveStep(reserveStep + 1);
                         setStep(step + 1);
@@ -182,21 +166,9 @@ export default function ControlReservation({ modal, handler }) {
                   </div>
                 </div>
               ) : (
-                <div
+                <div>
-                  style={{
-                    display: 'flex',
-                    justifyContent: 'center',
-                    padding: '5px 35px',
-                    marginBottom: '20px'
-                  }}
-                >
                   <div>
                     <button
-                      style={{
-                        padding: '10px 50px',
-                        backgroundColor: '#990033',
-                        color: '#fff'
-                      }}
                       onClick={handler}
                     >
                       확인

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

@@ -1,52 +1,73 @@
+import React, { useState, Component } from 'react'
+
+import Slider from "react-slick";
+
+import { Badge, Button } from 'reactstrap';
+import { ArrowRight } from 'react-feather';
+
 export default function ReserveStep1() {
+  const settings = {
+    dots: true,
+    infinite: true,
+    speed: 500,
+    slidesToShow: 1,
+    slidesToScroll: 1
+  };
+
   return (
-    <div style={{ padding: '40px' }}>
+    <div className='step-reservation'>
-      <div
+      <div className='step-box'>
-        style={{
+        <div className='uam-reservation-tab-list'>
-          display: 'flex',
+          <div className='list'>
-          justifyContent: 'center',
-          flexDirection: 'column',
-          alignItems: 'center'
-        }}
-      >
-        <span style={{ color: '#990033' }}>여정 1</span>
-        <div
-          style={{
-            display: 'flex',
-            justifyContent: 'space-around',
-            alignItems: 'center',
-            width: '25%'
-          }}
-        >
-          <div
-            style={{
-              fontWeight: 'bold',
-              fontSize: '1.4rem',
-              color: '#000'
-            }}
-          >
             고양 킨텍스
           </div>
-          <div
+          <div className='list'>
-            style={{
-              fontWeight: 'bold',
-              fontSize: '1.7rem',
-              color: '#000'
-            }}
-          >
-            ➔
-          </div>
-          <div
-            style={{
-              fontWeight: 'bold',
-              fontSize: '1.4rem',
-              color: '#000'
-            }}
-          >
             여의도 공원
           </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>
+          <div className='place'>
+            <span>고양 킨텍스</span>
+            <span className='arrow'><ArrowRight /></span>
+            <span>여의도 공원</span>
+          </div>
+
+          <div>
+          <h2> Single Item</h2>
+            <Slider {...settings}>
+              <div>
+                <h3>1</h3>
+              </div>
+              <div>
+                <h3>2</h3>
+              </div>
+              <div>
+                <h3>3</h3>
+              </div>
+              <div>
+                <h3>4</h3>
+              </div>
+              <div>
+                <h3>5</h3>
+              </div>
+              <div>
+                <h3>6</h3>
+              </div>
+            </Slider>
+          </div>
+        </div>
+
         <div
         style={{
           display: 'flex',
@@ -428,6 +449,9 @@ export default function ReserveStep1() {
           </div>
         </div>
       </div>
+
+      </div>
+
     </div>
   );
 }