Merge branch 'master' of http://gitea.palntour.com/pav/pav-home

package-lock.json

@@ -1947,70 +1947,6 @@
         "chalk": "^4.0.0"
       }
     },
-    "@mapbox/geojson-rewind": {
-      "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/@mapbox/geojson-rewind/-/geojson-rewind-0.5.2.tgz",
-      "integrity": "sha512-tJaT+RbYGJYStt7wI3cq4Nl4SXxG8W7JDG5DMJu97V25RnbNg3QtQtf+KD+VLjNpWKYsRvXDNmNrBgEETr1ifA==",
-      "requires": {
-        "get-stream": "^6.0.1",
-        "minimist": "^1.2.6"
-      },
-      "dependencies": {
-        "get-stream": {
-          "version": "6.0.1",
-          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
-          "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg=="
-        },
-        "minimist": {
-          "version": "1.2.8",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
-          "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA=="
-        }
-      }
-    },
-    "@mapbox/jsonlint-lines-primitives": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz",
-      "integrity": "sha512-rY0o9A5ECsTQRVhv7tL/OyDpGAoUB4tTvLiW1DSzQGq4bvTPhNw1VpSNjDJc5GFZ2XuyOtSWSVN05qOtcD71qQ=="
-    },
-    "@mapbox/mapbox-gl-language": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-language/-/mapbox-gl-language-1.0.1.tgz",
-      "integrity": "sha512-gL58ojl7gaWLfbSISoB2QJEfTK3j+NKvPH9og0r+c3bd5BNqhY19Eb4OPfDc5+dGmjW03LhtZBc4n2b7Xn8kjA=="
-    },
-    "@mapbox/mapbox-gl-supported": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-supported/-/mapbox-gl-supported-2.0.1.tgz",
-      "integrity": "sha512-HP6XvfNIzfoMVfyGjBckjiAOQK9WfX0ywdLubuPMPv+Vqf5fj0uCbgBQYpiqcWZT6cbyyRnTSXDheT1ugvF6UQ=="
-    },
-    "@mapbox/point-geometry": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz",
-      "integrity": "sha512-6j56HdLTwWGO0fJPlrZtdU/B13q8Uwmo18Ck2GnGgN9PCFyKTZ3UbXeEdRFh18i9XQ92eH2VdtpJHpBD3aripQ=="
-    },
-    "@mapbox/tiny-sdf": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/@mapbox/tiny-sdf/-/tiny-sdf-2.0.6.tgz",
-      "integrity": "sha512-qMqa27TLw+ZQz5Jk+RcwZGH7BQf5G/TrutJhspsca/3SHwmgKQ1iq+d3Jxz5oysPVYTGP6aXxCo5Lk9Er6YBAA=="
-    },
-    "@mapbox/unitbezier": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.1.tgz",
-      "integrity": "sha512-nMkuDXFv60aBr9soUG5q+GvZYL+2KZHVvsqFCzqnkGEf46U2fvmytHaEVc1/YZbiLn8X+eR3QzX1+dwDO1lxlw=="
-    },
-    "@mapbox/vector-tile": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/@mapbox/vector-tile/-/vector-tile-1.3.1.tgz",
-      "integrity": "sha512-MCEddb8u44/xfQ3oD+Srl/tNcQoqTw3goGk2oLsrFxOTc3dUp+kAnby3PvAeeBYSMSjSPD1nd1AJA6W49WnoUw==",
-      "requires": {
-        "@mapbox/point-geometry": "~0.1.0"
-      }
-    },
-    "@mapbox/whoots-js": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@mapbox/whoots-js/-/whoots-js-3.1.0.tgz",
-      "integrity": "sha512-Es6WcD0nO5l+2BOQS4uLfNPYQaNDfbot3X1XUoloz+x0mPDS3eeORZJl06HXjwBG1fOGwCRnzK88LMdxKRrd6Q=="
-    },
     "@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -3881,14 +3817,6 @@
         "@types/node": "*"
       }
     },
-    "@types/supercluster": {
-      "version": "5.0.3",
-      "resolved": "https://registry.npmjs.org/@types/supercluster/-/supercluster-5.0.3.tgz",
-      "integrity": "sha512-XMSqQEr7YDuNtFwSgaHHOjsbi0ZGL62V9Js4CW45RBuRYlNWSW/KDqN+RFFE7HdHcGhJPtN0klKvw06r9Kg7rg==",
-      "requires": {
-        "@types/geojson": "*"
-      }
-    },
     "@types/tapable": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.8.tgz",
@@ -7511,11 +7439,6 @@
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-3.4.2.tgz",
       "integrity": "sha512-ACUm3L0/jiZTqfzRM3Hi9Q8eZqd6IK37mMWPLz9PJxkLWllYeRf+EHUSHYEtFop2Eqytaq1FizFVh7XfBnXCDQ=="
     },
-    "csscolorparser": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/csscolorparser/-/csscolorparser-1.0.3.tgz",
-      "integrity": "sha512-umPSgYwZkdFoUrH5hIq5kf0wPSXiro51nPw0j2K/c83KflkPSTBGMz6NJvMB+07VlL0y7VPo6QJcDjcgKTTm3w=="
-    },
     "cssdb": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-4.4.0.tgz",
@@ -8698,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",
@@ -10428,11 +10356,6 @@
         "rbush": "^3.0.1"
       }
     },
-    "geojson-vt": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/geojson-vt/-/geojson-vt-3.2.1.tgz",
-      "integrity": "sha512-EvGQQi/zPrDA6zr6BnJD/YhwAkBP8nnJ9emh3EnHQKVMfg/MRVtPbMYdgVy/IaEmn4UfagD2a6fafPDL5hbtwg=="
-    },
     "get-caller-file": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
@@ -10491,11 +10414,6 @@
         "assert-plus": "^1.0.0"
       }
     },
-    "gl-matrix": {
-      "version": "3.4.3",
-      "resolved": "https://registry.npmjs.org/gl-matrix/-/gl-matrix-3.4.3.tgz",
-      "integrity": "sha512-wcCp8vu8FT22BnvKVPjXa/ICBWRq/zjFfdofZy1WSpQZpphblv12/bOQLBC1rMM7SGOFS9ltVmKOHil5+Ml7gA=="
-    },
     "glob": {
       "version": "7.1.7",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz",
@@ -10593,11 +10511,6 @@
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz",
       "integrity": "sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ=="
     },
-    "grid-index": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/grid-index/-/grid-index-1.1.0.tgz",
-      "integrity": "sha512-HZRwumpOGUrHyxO5bqKZL0B0GlUpwtCAzZ42sgxUPniu33R1LSFH5yrIcBCHjkctCAh3mtWKcKd9J4vDDdeVHA=="
-    },
     "growly": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/growly/-/growly-1.3.0.tgz",
@@ -12649,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",
@@ -12759,11 +12680,6 @@
       "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-3.1.2.tgz",
       "integrity": "sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A=="
     },
-    "kdbush": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/kdbush/-/kdbush-4.0.2.tgz",
-      "integrity": "sha512-WbCVYJ27Sz8zi9Q7Q0xHC+05iwkm3Znipc2XTlrnJbsHMYktW4hPhXUE8Ys1engBrvffoSCqbil1JQAa7clRpA=="
-    },
     "killable": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
@@ -13139,35 +13055,6 @@
         "object-visit": "^1.0.0"
       }
     },
-    "mapbox-gl": {
-      "version": "2.15.0",
-      "resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-2.15.0.tgz",
-      "integrity": "sha512-fjv+aYrd5TIHiL7wRa+W7KjtUqKWziJMZUkK5hm8TvJ3OLeNPx4NmW/DgfYhd/jHej8wWL+QJBDbdMMAKvNC0A==",
-      "requires": {
-        "@mapbox/geojson-rewind": "^0.5.2",
-        "@mapbox/jsonlint-lines-primitives": "^2.0.2",
-        "@mapbox/mapbox-gl-supported": "^2.0.1",
-        "@mapbox/point-geometry": "^0.1.0",
-        "@mapbox/tiny-sdf": "^2.0.6",
-        "@mapbox/unitbezier": "^0.0.1",
-        "@mapbox/vector-tile": "^1.3.1",
-        "@mapbox/whoots-js": "^3.1.0",
-        "csscolorparser": "~1.0.3",
-        "earcut": "^2.2.4",
-        "geojson-vt": "^3.2.1",
-        "gl-matrix": "^3.4.3",
-        "grid-index": "^1.1.0",
-        "kdbush": "^4.0.1",
-        "murmurhash-js": "^1.0.0",
-        "pbf": "^3.2.1",
-        "potpack": "^2.0.0",
-        "quickselect": "^2.0.0",
-        "rw": "^1.3.3",
-        "supercluster": "^8.0.0",
-        "tinyqueue": "^2.0.3",
-        "vt-pbf": "^3.1.3"
-      }
-    },
     "marker-clusterer-plus": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/marker-clusterer-plus/-/marker-clusterer-plus-2.1.4.tgz",
@@ -13616,11 +13503,6 @@
       "resolved": "https://registry.npmjs.org/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz",
       "integrity": "sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE="
     },
-    "murmurhash-js": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/murmurhash-js/-/murmurhash-js-1.0.0.tgz",
-      "integrity": "sha512-TvmkNhkv8yct0SVBSy+o8wYzXjE4Zz3PCesbfs8HiCXXdcTuocApFv11UWlNFWKYsP2okqrhb7JNlSm9InBhIw=="
-    },
     "namespace-emitter": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/namespace-emitter/-/namespace-emitter-2.0.1.tgz",
@@ -14495,15 +14377,6 @@
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
       "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw=="
     },
-    "pbf": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/pbf/-/pbf-3.2.1.tgz",
-      "integrity": "sha512-ClrV7pNOn7rtmoQVF4TS1vyU0WhYRnP92fzbfF75jAIwpnzdJXf8iTd4CMEqO4yUenH6NDqLiwjqlh6QgZzgLQ==",
-      "requires": {
-        "ieee754": "^1.1.12",
-        "resolve-protobuf-schema": "^2.1.0"
-      }
-    },
     "pbkdf2": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/pbkdf2/-/pbkdf2-3.1.2.tgz",
@@ -20307,11 +20180,6 @@
         "uniq": "^1.0.1"
       }
     },
-    "potpack": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/potpack/-/potpack-2.0.0.tgz",
-      "integrity": "sha512-Q+/tYsFU9r7xoOJ+y/ZTtdVQwTWfzjbiXBDMM/JKUux3+QPP02iUuIoeBQ+Ot6oEDlC+/PGjB/5A3K7KKb7hcw=="
-    },
     "preact": {
       "version": "10.5.14",
       "resolved": "https://registry.npmjs.org/preact/-/preact-10.5.14.tgz",
@@ -20464,11 +20332,6 @@
       "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.4.tgz",
       "integrity": "sha512-sFPkHQjVKheDNnPvotjQmm3KD3uk1fWKUN7CrpdbwmUx3CrG3QiM8QpTSimvig5vTXmTvjz7+TDvXOI9+4rkcg=="
     },
-    "protocol-buffers-schema": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.6.0.tgz",
-      "integrity": "sha512-TdDRD+/QNdrCGCE7v8340QyuXd4kIWIgapsE2+n/SaGiSSbomYl4TjHlvIoCWRpE7wFt02EpB35VVA2ImcBVqw=="
-    },
     "proxy-addr": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -21273,56 +21136,6 @@
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
-    "react-mapbox-gl": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/react-mapbox-gl/-/react-mapbox-gl-5.1.1.tgz",
-      "integrity": "sha512-8vGldFQf7pW8T5ZV2OOhwXoaBvfigB2F7dnhzaZ/bD5/KJzP9zprMbn0xMX95W3eqbKzGGHnwyD5DyTTwR6wGw==",
-      "requires": {
-        "@turf/bbox": "4.7.3",
-        "@turf/helpers": "4.7.3",
-        "@types/supercluster": "^5.0.1",
-        "deep-equal": "1.0.1",
-        "supercluster": "^7.0.0"
-      },
-      "dependencies": {
-        "@turf/bbox": {
-          "version": "4.7.3",
-          "resolved": "https://registry.npmjs.org/@turf/bbox/-/bbox-4.7.3.tgz",
-          "integrity": "sha512-78lSzSQuLHq0363sVlmkX9uxBejeWGyZhQBAh7oc1ucnsYsem1m4ynjDXG8/hKP4nG/yUFWPdV9xklezKdvzKw==",
-          "requires": {
-            "@turf/meta": "^4.7.3"
-          }
-        },
-        "@turf/helpers": {
-          "version": "4.7.3",
-          "resolved": "https://registry.npmjs.org/@turf/helpers/-/helpers-4.7.3.tgz",
-          "integrity": "sha512-hk5ANVazb80zK6tjJYAG76oCRTWMQo6SAFu5E1dVnlb2kT3FHLoPcOB9P11duwDafMwywz24KZ+FUorB5e728w=="
-        },
-        "@turf/meta": {
-          "version": "4.7.4",
-          "resolved": "https://registry.npmjs.org/@turf/meta/-/meta-4.7.4.tgz",
-          "integrity": "sha512-cvwz4EI9BjrgRHxmJ3Z3HKxq6k/fj/V95kwNZ8uWNLncCvrb7x1jUBDkQUo1tShnYdZ8eBgA+a2bvJmAM+MJ0A=="
-        },
-        "deep-equal": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.0.1.tgz",
-          "integrity": "sha512-bHtC0iYvWhyaTzvV3CZgPeZQqCOBGyGsVV7v4eevpdkLHfiSrXUdBG+qAuSz4RI70sszvjQ1QSZ98An1yNwpSw=="
-        },
-        "kdbush": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/kdbush/-/kdbush-3.0.0.tgz",
-          "integrity": "sha512-hRkd6/XW4HTsA9vjVpY9tuXJYLSlelnkTmVFu4M9/7MIYQtFcHpbugAU7UbOfjOiVSVYl2fqgBuJ32JUmRo5Ew=="
-        },
-        "supercluster": {
-          "version": "7.1.5",
-          "resolved": "https://registry.npmjs.org/supercluster/-/supercluster-7.1.5.tgz",
-          "integrity": "sha512-EulshI3pGUM66o6ZdH3ReiFcvHpM3vAigyK+vcxdjpJyEbIIrtbmBdY23mGgnI24uXiGFvrGq9Gkum/8U7vJWg==",
-          "requires": {
-            "kdbush": "^3.0.0"
-          }
-        }
-      }
-    },
     "react-onclickoutside": {
       "version": "6.11.2",
       "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.11.2.tgz",
@@ -21956,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",
@@ -22621,14 +22446,6 @@
       "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
       "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
     },
-    "resolve-protobuf-schema": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/resolve-protobuf-schema/-/resolve-protobuf-schema-2.1.0.tgz",
-      "integrity": "sha512-kI5ffTiZWmJaS/huM8wZfEMer1eRd7oJQhDuxeCLe3t7N7mX3z94CN0xPxBQxFYQTSNz9T0i+v6inKqSdK8xrQ==",
-      "requires": {
-        "protocol-buffers-schema": "^3.3.1"
-      }
-    },
     "resolve-url": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
@@ -22983,11 +22800,6 @@
         "aproba": "^1.1.1"
       }
     },
-    "rw": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
-      "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ=="
-    },
     "safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
@@ -23712,6 +23524,11 @@
         "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": {
       "version": "0.4.4",
       "resolved": "https://registry.npmjs.org/smoothscroll-polyfill/-/smoothscroll-polyfill-0.4.4.tgz",
@@ -24243,6 +24060,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",
@@ -24508,14 +24330,6 @@
       "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.10.tgz",
       "integrity": "sha512-m3k+dk7QeJw660eIKRRn3xPF6uuvHs/FFzjX3HQ5ove0qYsiygoAhwn5a3IYKaZPo5LrYD0rfVmtv1gNY1uYwg=="
     },
-    "supercluster": {
-      "version": "8.0.1",
-      "resolved": "https://registry.npmjs.org/supercluster/-/supercluster-8.0.1.tgz",
-      "integrity": "sha512-IiOea5kJ9iqzD2t7QJq/cREyLHTtSmUT6gQsweojg9WH2sYJqZK9SswTu6jrscO6D1G5v5vYZ9ru/eq85lXeZQ==",
-      "requires": {
-        "kdbush": "^4.0.2"
-      }
-    },
     "supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -24900,11 +24714,6 @@
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
       "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ="
     },
-    "threebox-plugin": {
-      "version": "2.2.7",
-      "resolved": "https://registry.npmjs.org/threebox-plugin/-/threebox-plugin-2.2.7.tgz",
-      "integrity": "sha512-H87Nm4w1PfisHPHzavTGXlwIoJpx2+QU57GooQYIhF51lsg+U5A0KGf3Jrv/HWsLCGOwV2BTnv7UTLfpO1EccQ=="
-    },
     "throat": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/throat/-/throat-5.0.0.tgz",
@@ -25643,16 +25452,6 @@
       "resolved": "https://registry.npmjs.org/voc/-/voc-1.2.0.tgz",
       "integrity": "sha512-BOuDjFFYvJdZO6e/N65AlaDItXo2TgyLjeyRYcqgAPkXpp5yTJcvkL2n+syO1r9Qc5g96tfBD2tuiMhYDmaGcA=="
     },
-    "vt-pbf": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/vt-pbf/-/vt-pbf-3.1.3.tgz",
-      "integrity": "sha512-2LzDFzt0mZKZ9IpVF2r69G9bXaP2Q2sArJCmcCgvfTdCCZzSyz4aCLoQyUilu37Ll56tCblIZrXFIjNUpGIlmA==",
-      "requires": {
-        "@mapbox/point-geometry": "0.1.0",
-        "@mapbox/vector-tile": "^1.3.1",
-        "pbf": "^3.2.1"
-      }
-    },
     "w3c-hr-time": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.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",
@@ -103,6 +104,7 @@
     "redux-thunk": "2.3.0",
     "sass": "1.26.8",
     "screenfull": "5.0.2",
+    "slick-carousel": "^1.8.1",
     "sortablejs": "1.12.0",
     "styled-components": "5.1.1",
     "sweetalert2": "10.14.0",

src/@core/layouts/components/menu/vertical-menu/index.js

@@ -10,6 +10,7 @@ import statics from '@src/navigation/statics';
 import system from '@src/navigation/system';
 import analysis from '@src/navigation/analysis';
 import flightPlan from '@src/navigation/flightPlan';
+import reservation from '@src/navigation/reservation';
 
 // ** Third Party Components
 import classnames from 'classnames';
@@ -43,6 +44,8 @@ const Sidebar = props => {
         return analysis;
       case 'flightPlan':
         return flightPlan;
+      case 'reservation':
+        return reservation;
     }
   };
 

src/@core/layouts/components/navbar/NavbarUser.js

@@ -130,6 +130,18 @@ const NavbarUser = props => {
             날씨 정보
           </NavLink>
         </NavItem>
+        <NavItem>
+          <NavLink
+            onClick={e => handlerTopMenu('reservation')}
+            active={topMenuCd === 'reservation'}
+            // active={active === '2'}
+            // onClick={() => {
+            //   toggle('2')
+            // }}
+          >
+            도심항공교통(UAM) 예약
+          </NavLink>
+        </NavItem>
       </Nav>
       {/* <div className='bookmark-wrapper d-flex align-items-center'>
         <NavItem className='d-none d-lg-block'>

src/assets/css/custom.css

@@ -406,9 +406,9 @@ h1.logo span{display:block;color:#f4f4f4;font-weight:bold;letter-spacing:2px;fon
 .tooltip-test{position:absolute;left:500px;top:500px;}
 .tooltip-box{background:#283046;padding:10px;border-radius:6px;position:relative;max-width:150px;word-break: break-all;}
 /* .tooltip-box div{text-align:left;font-size:13px;} */
-.tooltip-ti{border-bottom:1px solid #bbb;padding-bottom:4px;}
+.tooltip-ti{border-bottom:1px solid #bbb;padding-bottom:2px;font-size:0.875rem;color:#f4f4f4}
 /* .tooltip-ti span, .tooltip-txt .ti{color:#f4f4f4;font-weight:400;} */
-.tooltip-txt{color:#f4f4f4;font-weight:400;font-size:12px}
+.tooltip-txt{font-weight:400;font-size:12px;padding-top:4px;word-break: keep-all;}
 .tooltip-txt-list + .tooltip-txt-list{margin-top:4px;}
 .tooltip-box .arrow {position:absolute;bottom:-10px;left:50%;transform: translateX(-50%);display:block;width: 0px;height: 0px;border-top:10px solid #283046;border-bottom:10px solid none;border-right: 10px solid transparent;border-left: 10px solid  transparent;}
 .tooltip-txt-list .ti:before{content:'/';margin:0 2px;}
@@ -846,3 +846,79 @@ 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 .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 .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;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;}
+.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}
+.step-box-city{display:flex;width:100%;}
+.step-box-city-list{flex:1;}
+.step-box-city-list .step-city-ti{background:#283046;border:1px solid #404656;padding:0.8rem 1.7rem;font-weight:500;text-align:center;}
+.step-box-city-list + .step-box-city-list{margin-left:1rem}
+.step-box-city-list ul li{padding:0.8rem 1.7rem;border:1px solid #404656;border-top:none;cursor: pointer;font-size:0.875rem}
+.step-box-city-list ul li:hover{background:#2a3247;transition: 0.3s ease;-webkit-transition: 0.3s ease;}
+.search-box-city{display:flex;width:100%;}
+.search-city{display:flex;flex:1;justify-content:space-between;align-items:center;background:#404656;padding:0.8rem;font-size:0.875rem;border-radius:0.357rem;}
+.search-city + .search-city{margin-left:1rem;}
+.search-city .arrow svg{width:18px;margin-top:-2px;margin-left:4px;margin-right:4px}
+.search-city .delete:hover svg{color:#ea5455;cursor: pointer;transition:0.3s ease;-webkit-transition:0.3s ease;}
+.step-wrap .calendar{display:flex;justify-content:center;}
+.step-wrap .calendar .dayContainer + .dayContainer{box-shadow:none;}
+.step-wrap .passengers ul{display:flex;}
+.step-wrap .passengers ul li{flex:1;}
+.step-wrap .passengers ul li + li{margin-left:1rem;}
+.step-wrap .passengers h6{font-size:0.875rem;font-weight:500;margin-bottom:0.5rem}
+.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 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}
+
+.fsm-box{padding: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 .btn-wrap button + button{margin-left:0.5rem}
+.fsm-box .list-input label{font-size:0.875rem}
+
+.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.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;}

src/navigation/reservation/index.js

@@ -0,0 +1,13 @@
+export default [
+  {
+    id: 'reservation_001',
+    title: '도심항공교통(UAM) 예약',
+    navLink: '#'
+  },
+  {
+    id: 'reservation_001_01',
+    type: 'item',
+    title: '도심항공교통(UAM) 예약',
+    navLink: '/reservation'
+  }
+];

src/router/routes/RouteReservation.js

@@ -0,0 +1,10 @@
+import { lazy } from 'react';
+
+const RouteReservation = [
+  {
+    path: '/reservation',
+    component: lazy(() => import('../../views/reservation/ReservationView'))
+  }
+];
+
+export default RouteReservation;

src/router/routes/index.js

@@ -5,6 +5,7 @@ import RouteBasis from './RouteBasis';
 import RouteDashboard from './RouteDashboard';
 import RouteSystem from './RouteSystem';
 import RouteWeather from './RouteWeather';
+import RouteReservation from './RouteReservation';
 
 // ** Document title
 const TemplateTitle = '%s - Dron Control System';
@@ -20,6 +21,7 @@ const Routes = [
   ...RouteBasis,
   ...RouteSystem,
   ...RouteWeather,
+  ...RouteReservation,
   {
     path: '/home',
     component: lazy(() => import('../../views/Home'))

src/views/control/setting/ControlFsm.js

@@ -0,0 +1,423 @@
+import { useState } from 'react';
+import { Button, Row, Col, FormGroup, Label, Input, Modal, ModalHeader, ModalBody, CustomInput } from 'reactstrap';
+
+export default function ControlFsm({ modal, handler }) {
+  return (
+    <div
+      className='vertically-centered-modal'
+    >
+      <Modal
+        isOpen={modal}
+        toggle={handler}
+        className='modal-dialog-centered modal-lg'
+      >
+        <ModalHeader
+          toggle={handler}
+        >
+          FSM 비행계획서
+        </ModalHeader>
+        <ModalBody className='pal-modal-body'>
+            <div className='fsm-wrap'>
+              <div className='fsm-box'>
+                <div className='fsm-ti'>
+                  <h5>비행계획서 상세정보</h5>
+                  <div className='btn-wrap'>
+                    <Button>CHG</Button>
+                    <Button>CNL</Button>
+                    <Button color='success'>비행계획서 제출</Button>
+                  </div>
+                </div>
+                <Row>
+                  <Col className='list-input' md='3' sm='12'>
+                    <FormGroup>
+                      <Label for=''>서류구분</Label>
+                      <Input
+                        type='select'
+                        name='select'
+                        bsSize='sm'
+                        id=''
+                      >
+                        <option>비행계획서 작성</option>
+                      </Input>
+                    </FormGroup>
+                  </Col>
+                  <Col className='list-input' md='3' sm='12'>
+                    <FormGroup>
+                      <Label for=''>항공기 등록기호</Label>
+                      <Input
+                        type='text'
+                        id=''
+                        bsSize='sm'
+                        placeholder=''
+                        value=''
+                      />
+                    </FormGroup>
+                  </Col>
+                  <Col className='list-input' md='3' sm='12'>
+                    <FormGroup>
+                      <Label for=''>비행계획일자</Label>
+                      <Input
+                        type='text'
+                        id=''
+                        bsSize='sm'
+                        placeholder=''
+                        value=''
+                      />
+                    </FormGroup>
+                  </Col>
+                </Row>
+                <Row>
+                  <Col className='list-input' md='3' sm='12'>
+                    <FormGroup>
+                      <Label for=''>Priority</Label>
+                      <Input
+                        type='select'
+                        name='select'
+                        bsSize='sm'
+                        id=''
+                      >
+                        <option>FF</option>
+                      </Input>
+                    </FormGroup>
+                  </Col>
+                  <Col className='list-input' md='3' sm='12'>
+                    <FormGroup>
+                      <Label for=''>Filing Time</Label>
+                      <Input
+                        type='text'
+                        id=''
+                        bsSize='sm'
+                        placeholder=''
+                        value=''
+                      />
+                    </FormGroup>
+                  </Col>
+                  <Col className='list-input' md='3' sm='12'>
+                    <FormGroup>
+                      <Label for=''>의뢰부서</Label>
+                      <Input
+                        type='text'
+                        id=''
+                        bsSize='sm'
+                        placeholder=''
+                        value=''
+                      />
+                    </FormGroup>
+                  </Col>
+                </Row>
+                <hr/>
+                <Row>
+                  <Col className='list-input' md='3' sm='12'>
+                    <FormGroup>
+                      <Label for=''>Message Type</Label>
+                      <Input
+                        type='text'
+                        bsSize='sm'
+                        id=''
+                      />
+                    </FormGroup>
+                  </Col>
+                  <Col className='list-input' md='3' sm='12'>
+                    <FormGroup>
+                      <Label for=''>Flight Identity(Callsign)</Label>
+                      <Input
+                        type='text'
+                        bsSize='sm'
+                        id=''
+                      />
+                    </FormGroup>
+                  </Col>
+                  <Col className='list-input' md='3' sm='12'>
+                    <FormGroup>
+                      <Label for=''>Flight Rules</Label>
+                      <Input
+                        type='text'
+                        bsSize='sm'
+                        id=''
+                      />
+                    </FormGroup>
+                  </Col>
+                  <Col className='list-input' md='3' sm='12'>
+                    <FormGroup>
+                      <Label for=''>Flight Type</Label>
+                      <Input
+                        type='text'
+                        bsSize='sm'
+                        id=''
+                      />
+                    </FormGroup>
+                  </Col>
+                  <Col className='list-input' md='3' sm='12'>
+                    <FormGroup>
+                      <Label for=''>Number</Label>
+                      <Input
+                        type='text'
+                        bsSize='sm'
+                        id=''
+                      />
+                    </FormGroup>
+                  </Col>
+                  <Col className='list-input' md='3' sm='12'>
+                    <FormGroup>
+                      <Label for=''>Aicrraft Type</Label>
+                      <Input
+                        type='text'
+                        bsSize='sm'
+                        id=''
+                      />
+                    </FormGroup>
+                  </Col>
+                  <Col className='list-input' md='3' sm='12'>
+                    <FormGroup>
+                      <Label for=''>Wake Turb. Cat.</Label>
+                      <Input
+                        type='text'
+                        bsSize='sm'
+                        id=''
+                      />
+                    </FormGroup>
+                  </Col>
+                  <Col className='list-input' md='3' sm='12'>
+                    <FormGroup>
+                      <Label for=''>Equipment</Label>
+                      <Input
+                        type='text'
+                        bsSize='sm'
+                        id=''
+                      />
+                    </FormGroup>
+                  </Col>
+                  <Col className='list-input' md='3' sm='12'>
+                    <FormGroup>
+                      <Label for=''>Departure</Label>
+                      <Input
+                        type='text'
+                        bsSize='sm'
+                        id=''
+                      />
+                    </FormGroup>
+                  </Col>
+                  <Col className='list-input' md='3' sm='12'>
+                    <FormGroup>
+                      <Label for=''>Time</Label>
+                      <Input
+                        type='text'
+                        bsSize='sm'
+                        id=''
+                      />
+                    </FormGroup>
+                  </Col>
+                  <Col className='list-input' md='3' sm='12'>
+                    <FormGroup>
+                      <Label for=''>Cruising Speed</Label>
+                      <Input
+                        type='text'
+                        bsSize='sm'
+                        id=''
+                      />
+                    </FormGroup>
+                  </Col>
+                  <Col className='list-input' md='3' sm='12'>
+                    <FormGroup>
+                      <Label for=''>Flight Level</Label>
+                      <Input
+                        type='text'
+                        bsSize='sm'
+                        id=''
+                      />
+                    </FormGroup>
+                  </Col>
+                  <Col className='list-input' md='12'>
+                    <FormGroup>
+                      <Label for=''>Route</Label>
+                      <Input
+                        type='textarea'
+                        bsSize='sm'
+                        id=''
+                      />
+                    </FormGroup>
+                  </Col>
+                  <Col className='list-input' md='3' sm='12'>
+                    <FormGroup>
+                      <Label for=''>Arrival</Label>
+                      <Input
+                        type='text'
+                        bsSize='sm'
+                        id=''
+                      />
+                    </FormGroup>
+                  </Col>
+                  <Col className='list-input' md='3' sm='12'>
+                    <FormGroup>
+                      <Label for=''>Total EET</Label>
+                      <Input
+                        type='text'
+                        bsSize='sm'
+                        id=''
+                      />
+                    </FormGroup>
+                  </Col>
+                  <Col className='list-input' md='3' sm='12'>
+                    <FormGroup>
+                      <Label for=''>1st ALTN</Label>
+                      <Input
+                        type='text'
+                        bsSize='sm'
+                        id=''
+                      />
+                    </FormGroup>
+                  </Col>
+                  <Col className='list-input' md='3' sm='12'>
+                    <FormGroup>
+                      <Label for=''>2st ALTN</Label>
+                      <Input
+                        type='text'
+                        bsSize='sm'
+                        id=''
+                      />
+                    </FormGroup>
+                  </Col>
+                  <Col className='list-input' md='12'>
+                    <FormGroup>
+                      <Label for=''>Other information</Label>
+                      <Input
+                        type='textarea'
+                        bsSize='sm'
+                        id=''
+                      />
+                    </FormGroup>
+                  </Col>
+                  <Col className='list-input' md='3' sm='12'>
+                    <FormGroup>
+                      <Label for=''>E</Label>
+                      <Input
+                        type='text'
+                        bsSize='sm'
+                        id=''
+                      />
+                    </FormGroup>
+                  </Col>
+                  <Col className='list-input' md='3' sm='12'>
+                    <FormGroup>
+                      <Label for=''>P</Label>
+                      <Input
+                        type='text'
+                        bsSize='sm'
+                        id=''
+                      />
+                    </FormGroup>
+                  </Col>
+                  <Col className='list-input' md='3' sm='12'>
+                    <FormGroup>
+                      <Label for=''>R/</Label>
+                      <div className='checkbox-inline'>
+                       <CustomInput inline type='checkbox' id='exampleCustomCheckbox' label='U' defaultChecked />
+                       <CustomInput inline type='checkbox' id='exampleCustomCheckbox2' label='V' />
+                       <CustomInput inline type='checkbox' id='exampleCustomCheckbox3' label='E' />
+                      </div>
+                    </FormGroup>
+                  </Col>
+                </Row>
+                <Row>
+                  <Col className='list-input' md='6' sm='12'>
+                    <FormGroup>
+                      <Label for=''>S/</Label>
+                      <div className='checkbox-inline'>
+                       <CustomInput inline type='checkbox' id='4' label='P' defaultChecked />
+                       <CustomInput inline type='checkbox' id='5' label='D' />
+                       <CustomInput inline type='checkbox' id='6' label='M' />
+                       <CustomInput inline type='checkbox' id='7' label='J' />
+                      </div>
+                    </FormGroup>
+                  </Col>
+                  <Col className='list-input' md='6' sm='12'>
+                    <FormGroup>
+                      <Label for=''>J/</Label>
+                      <div className='checkbox-inline'>
+                       <CustomInput inline type='checkbox' id='8' label='L' defaultChecked />
+                       <CustomInput inline type='checkbox' id='9' label='F' />
+                       <CustomInput inline type='checkbox' id='10' label='U' />
+                       <CustomInput inline type='checkbox' id='11' label='V' />
+                      </div>
+                    </FormGroup>
+                  </Col>
+                </Row>
+                <Row>
+                  <Col className='list-input' md='3' sm='12'>
+                    <FormGroup>
+                      <Label for=''>D/Number</Label>
+                      <Input
+                        type='text'
+                        bsSize='sm'
+                        id=''
+                      />
+                    </FormGroup>
+                  </Col>
+                  <Col className='list-input' md='3' sm='12'>
+                    <FormGroup>
+                      <Label for=''>Capacity</Label>
+                      <Input
+                        type='text'
+                        bsSize='sm'
+                        id=''
+                      />
+                    </FormGroup>
+                  </Col>
+                  <Col className='list-input' md='3' sm='12'>
+                    <FormGroup>
+                      <Label for=''>Cover</Label>
+                      <Input
+                        type='text'
+                        bsSize='sm'
+                        id=''
+                      />
+                    </FormGroup>
+                  </Col>
+                  <Col className='list-input' md='3' sm='12'>
+                    <FormGroup>
+                      <Label for=''>Colour</Label>
+                      <Input
+                        type='text'
+                        bsSize='sm'
+                        id=''
+                      />
+                    </FormGroup>
+                  </Col>
+                  <Col className='list-input' md='3' sm='12'>
+                    <FormGroup>
+                      <Label for=''>A/</Label>
+                      <Input
+                        type='text'
+                        bsSize='sm'
+                        id=''
+                      />
+                    </FormGroup>
+                  </Col>
+                  <Col className='list-input' md='3' sm='12'>
+                    <FormGroup>
+                      <Label for=''>N/</Label>
+                      <Input
+                        type='text'
+                        bsSize='sm'
+                        id=''
+                      />
+                    </FormGroup>
+                  </Col>
+                  <Col className='list-input' md='3' sm='12'>
+                    <FormGroup>
+                      <Label for=''>C/</Label>
+                      <Input
+                        type='text'
+                        bsSize='sm'
+                        id=''
+                      />
+                    </FormGroup>
+                  </Col>
+                </Row>
+              </div>
+            </div>
+        </ModalBody>
+      </Modal>
+    </div>
+  );
+}

src/views/control/setting/ControlReservation.js

@@ -21,6 +21,7 @@ import {
   ReserveStep3,
   ReserveStep4
 } from './steps';
+import { CustomMainLayout } from '../../../components/layout/CustomMainLayout';
 
 export default function ControlReservation({ modal, handler }) {
   const [activeTab, setActiveTab] = useState(1);
@@ -29,212 +30,75 @@ export default function ControlReservation({ modal, handler }) {
   const [isChoise, setIsChoise] = useState(false);
   const [search, setSearch] = useState(false);
   const [reserveStep, setReserveStep] = useState(1);
+  const titleName = '도심항공교통(UAM) 예약';
 
+  function getStepColorClass(stepNumber, currentStep) {
+    return stepNumber === currentStep ? 'active-step' : 'inactive-step';
+  }
   return (
-    <div
+    <CustomMainLayout title={titleName}>
-      className='vertically-centered-modal'
+      <div className='uam-reservation'>
-      style={{ maxWidth: '95vh', height: '95vh', margin: 0 }}
+        <div>
-    >
-      <Modal
-        isOpen={modal}
-        toggle={handler}
-        className='modal-dialog-centered modal-lg'
-        style={{ margin: '0px auto', maxWidth: '90%', minHeight: '100vh' }}
-      >
-        <ModalHeader
-          toggle={handler}
-          style={{ paddingLeft: search ? '1%' : '45%' }}
-        >
           {search ? (
             reserveStep !== 4 ? (
-              <div
+              <div className='uam-reservation-header'>
-                style={{
+                <div>
-                  display: 'flex',
+                  <ul className='step'>
-                  justifyContent: 'space-between',
+                    <li className={getStepColorClass(1, step)}>
-                  width: '1600px'
-                }}
-              >
-                <h5 style={{ fontWeight: 'bold' }}>도심항공교통(UAM) 예약</h5>
-                <div style={{ display: 'flex', justifyContent: 'center' }}>
-                  <ul style={{ listStyle: 'none' }}>
-                    <li
-                      style={{
-                        float: 'left',
-                        paddingRight: '10px',
-                        fontWeight: 'bold',
-                        color: step === 1 ? '#990033' : '#000'
-                      }}
-                    >
                       ➀ 항공교통 조회
                     </li>
-                    <li
+                    <li className={getStepColorClass(2, step)}>
-                      style={{
+                      ➁ 항공교통 선택
-                        float: 'left',
-                        paddingRight: '10px',
-                        fontWeight: 'bold',
-                        color: step === 2 ? '#990033' : '#000'
-                      }}
-                    >
-                      ➁ 항공교통 선택{' '}
                     </li>
-                    <li
+                    <li className={getStepColorClass(3, step)}>
-                      style={{
+                      ➂ 탑승정보 입력
-                        float: 'left',
-                        paddingRight: '10px',
-                        fontWeight: 'bold',
-                        color: step === 3 ? '#990033' : '#000'
-                      }}
-                    >
-                      ➂ 탑승정보 입력{' '}
-                    </li>
-                    <li
-                      style={{
-                        float: 'left',
-                        paddingRight: '10px',
-                        fontWeight: 'bold',
-                        color: step === 4 ? '#990033' : '#000'
-                      }}
-                    >
-                      ➃ 결제
                     </li>
+                    <li className={getStepColorClass(4, step)}>➃ 결제</li>
                   </ul>
                 </div>
               </div>
             ) : (
-              <div
+              <div className='uam-reservation-header'>
-                style={{
+                <div>결제완료</div>
-                  display: 'flex',
-                  justifyContent: 'space-between',
-                  width: '1600px'
-                }}
-              >
-                <h5 style={{ fontWeight: 'bold' }}>도심항공교통(UAM) 예약</h5>
-                <div style={{ fontWeight: 'bold', color: '#990033' }}>
-                  결제완료
-                </div>
               </div>
             )
           ) : (
-            '도심항공교통(UAM) 예약'
+            <div className='uam-reservation-header'>
-          )}
+              <ul className='step'>
-        </ModalHeader>
+                <li className={getStepColorClass(1, step)}>➀ 항공교통 조회</li>
-        <ModalBody className='pal-modal-body'>
+                <li className={getStepColorClass(2, step)}>➁ 항공교통 선택</li>
-          {!search ? (
+                <li className={getStepColorClass(3, step)}>➂ 탑승정보 입력</li>
-            <div
+                <li className={getStepColorClass(4, step)}>➃ 결제</li>
-              style={{
-                padding: '10px',
-                height: '600px'
-              }}
-            >
-              <div style={{ display: 'flex', justifyContent: 'center' }}>
-                <ul style={{ listStyle: 'none' }}>
-                  <li
-                    style={{
-                      float: 'left',
-                      paddingRight: '10px',
-                      fontWeight: 'bold',
-                      color: step === 1 ? '#990033' : '#000'
-                    }}
-                  >
-                    ➀ 항공교통 조회
-                  </li>
-                  <li
-                    style={{
-                      float: 'left',
-                      paddingRight: '10px',
-                      fontWeight: 'bold',
-                      color: step === 2 ? '#990033' : '#000'
-                    }}
-                  >
-                    ➁ 항공교통 선택{' '}
-                  </li>
-                  <li
-                    style={{
-                      float: 'left',
-                      paddingRight: '10px',
-                      fontWeight: 'bold',
-                      color: step === 3 ? '#990033' : '#000'
-                    }}
-                  >
-                    ➂ 탑승정보 입력{' '}
-                  </li>
-                  <li
-                    style={{
-                      float: 'left',
-                      paddingRight: '10px',
-                      fontWeight: 'bold',
-                      color: step === 4 ? '#990033' : '#000'
-                    }}
-                  >
-                    ➃ 결제
-                  </li>
               </ul>
             </div>
-              <div style={{ marginBottom: '20px' }}>
+          )}
-                <Nav>
+        </div>
-                  <NavItem style={{ border: '1px solid #990033' }}>
+        <div>
+          {!search ? (
+            <div>
+              <div>
+                <Nav justified pills>
+                  <NavItem>
                     <NavLink
                       active={activeTab === 1}
                       onClick={() => setActiveTab(1)}
-                      style={{
-                        backgroundColor: activeTab === 1 ? '#990033' : '#fff',
-                        color: activeTab === 1 ? '#fff' : '#000',
-                        padding: '5px 30px'
-                      }}
                     >
-                      <span
+                      <span>왕복</span>
-                        style={{
-                          fontWeight: activeTab === 1 ? 'bold' : 'normal'
-                        }}
-                        className=''
-                      >
-                        왕복
-                      </span>
                     </NavLink>
                   </NavItem>
-                  <NavItem style={{ border: '1px solid #990033' }}>
+                  <NavItem>
                     <NavLink
                       active={activeTab === 2}
                       onClick={() => setActiveTab(2)}
-                      style={{
-                        backgroundColor: activeTab === 2 ? '#990033' : '#fff',
-                        color: activeTab === 2 ? '#fff' : '#000',
-                        padding: '5px 30px'
-                      }}
-                    >
-                      <span
-                        className=''
-                        style={{
-                          fontWeight: activeTab === 2 ? 'bold' : 'normal'
-                        }}
                     >
-                        편도
+                      <span>편도</span>
-                      </span>
                     </NavLink>
                   </NavItem>
                 </Nav>
               </div>
+              <div className='uam-reservation-tab-list'>
                 <div
-                style={{
+                  className={`list ${airTraficCheck === 1 ? 'active' : ''}`}
-                  display: 'flex',
-                  justifyContent: 'flex-start',
-                  marginBottom: '10px'
-                }}
-              >
-                <div
-                  style={{
-                    width: '15%',
-                    height: '65px',
-                    border: '1px solid #990033',
-                    marginRight: '57px',
-                    backgroundColor: airTraficCheck === 1 ? '#990033' : '#fff',
-                    color: airTraficCheck === 1 ? '#fff' : '#000',
-                    display: 'flex',
-                    alignItems: 'center',
-                    paddingLeft: '100px',
-                    fontWeight: airTraficCheck === 1 ? 'bold' : 'normal',
-                    cursor: 'pointer'
-                  }}
                   onClick={() => {
                     setAirTraficCheck(1);
                   }}
@@ -242,19 +106,7 @@ export default function ControlReservation({ modal, handler }) {
                   출발지
                 </div>
                 <div
-                  style={{
+                  className={`list ${airTraficCheck === 2 ? 'active' : ''}`}
-                    width: '15%',
-                    height: '65px',
-                    border: '1px solid #990033',
-                    marginRight: '57px',
-                    backgroundColor: airTraficCheck === 2 ? '#990033' : '#fff',
-                    color: airTraficCheck === 2 ? '#fff' : '#000',
-                    display: 'flex',
-                    alignItems: 'center',
-                    paddingLeft: '100px',
-                    fontWeight: airTraficCheck === 2 ? 'bold' : 'normal',
-                    cursor: 'pointer'
-                  }}
                   onClick={() => {
                     setAirTraficCheck(2);
                   }}
@@ -262,19 +114,7 @@ export default function ControlReservation({ modal, handler }) {
                   도착지
                 </div>
                 <div
-                  style={{
+                  className={`list ${airTraficCheck === 3 ? 'active' : ''}`}
-                    width: '15%',
-                    height: '65px',
-                    border: '1px solid #990033',
-                    marginRight: '57px',
-                    backgroundColor: airTraficCheck === 3 ? '#990033' : '#fff',
-                    color: airTraficCheck === 3 ? '#fff' : '#000',
-                    display: 'flex',
-                    alignItems: 'center',
-                    paddingLeft: '100px',
-                    fontWeight: airTraficCheck === 3 ? 'bold' : 'normal',
-                    cursor: 'pointer'
-                  }}
                   onClick={() => {
                     setAirTraficCheck(3);
                   }}
@@ -282,19 +122,7 @@ export default function ControlReservation({ modal, handler }) {
                   탑승일
                 </div>
                 <div
-                  style={{
+                  className={`list ${airTraficCheck === 4 ? 'active' : ''}`}
-                    width: '15%',
-                    height: '65px',
-                    border: '1px solid #990033',
-                    marginRight: '57px',
-                    backgroundColor: airTraficCheck === 4 ? '#990033' : '#fff',
-                    color: airTraficCheck === 4 ? '#fff' : '#000',
-                    display: 'flex',
-                    alignItems: 'center',
-                    paddingLeft: '100px',
-                    fontWeight: airTraficCheck === 4 ? 'bold' : 'normal',
-                    cursor: 'pointer'
-                  }}
                   onClick={() => {
                     setAirTraficCheck(4);
                   }}
@@ -302,20 +130,7 @@ export default function ControlReservation({ modal, handler }) {
                   탑승객
                 </div>
                 <div
-                  style={{
+                  className={`list finish ${isChoise ? 'active' : ''}`}
-                    width: '15%',
-                    height: '65px',
-                    border: '1px solid #F2F2F2',
-                    marginRight: '57px',
-                    backgroundColor: isChoise ? '#FEFF00' : '#F2F2F2',
-                    color: isChoise ? '#000' : '#BFBFBF',
-                    display: 'flex',
-                    justifyContent: 'center',
-                    alignItems: 'center',
-                    paddingLeft: '5px',
-                    cursor: 'pointer',
-                    fontWeight: 'bold'
-                  }}
                   onClick={() => {
                     setSearch(true);
                     setStep(2);
@@ -339,20 +154,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);
@@ -369,11 +173,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);
@@ -384,32 +183,16 @@ export default function ControlReservation({ modal, handler }) {
                   </div>
                 </div>
               ) : (
-                <div
-                  style={{
-                    display: 'flex',
-                    justifyContent: 'center',
-                    padding: '5px 35px',
-                    marginBottom: '20px'
-                  }}
-                >
                 <div>
-                    <button
+                  <div>
-                      style={{
+                    <button onClick={handler}>확인</button>
-                        padding: '10px 50px',
-                        backgroundColor: '#990033',
-                        color: '#fff'
-                      }}
-                      onClick={handler}
-                    >
-                      확인
-                    </button>
                   </div>
                 </div>
               )}
             </>
           )}
-        </ModalBody>
-      </Modal>
         </div>
+      </div>
+    </CustomMainLayout>
   );
 }

src/views/control/setting/ControlSetting.js

@@ -4,6 +4,7 @@ import { BiBuildings, BiGridAlt } from 'react-icons/bi';
 import { CgTrees } from 'react-icons/cg';
 import { VscRadioTower } from 'react-icons/vsc';
 import { useDispatch, useSelector } from 'react-redux';
+import { useHistory } from 'react-router-dom';
 import {
   Button,
   InputGroup,
@@ -19,10 +20,12 @@ import {
   sensorClickAction
 } from '../../../modules/control/map/actions/controlMapActions';
 import ControlReservation from './ControlReservation';
+import ControlFsm from './ControlFsm';
 
 const ControlSetting = props => {
   const [modal, setModal] = useState(false);
   const dispatch = useDispatch();
+  const history = useHistory();
 
   const mapControl = useSelector(state => state.controlMapReducer);
 
@@ -34,8 +37,12 @@ const ControlSetting = props => {
     dispatch(areaClickAction(val));
   };
 
-  const handlerModal = () => {
+  // const handlerModal = () => {
-    setModal(!modal);
+  //   setModal(!modal);
+  // };
+
+  const handlerModal = modalName => {
+    setModal(modalName);
   };
 
   return (
@@ -183,17 +190,42 @@ const ControlSetting = props => {
         <div className='layer-content-box'>
           <div className='map-btn'>
             <ButtonGroup>
-              <Button color='primary' onClick={handlerModal}>
+              <Button
+                color='primary'
+                onClick={() => {
+                  history.push('');
+                }}
+              >
                 도심항공교통(UAM) 예약 바로가기
               </Button>
             </ButtonGroup>
           </div>
         </div>
       </div>
-      {modal ? (
+      <div className='layer-content'>
+        <div className='layer-ti'>
+          <h4>FSM 비행계획서 작성</h4>
+        </div>
+        <div className='layer-content-box'>
+          <div className='map-btn'>
+            <ButtonGroup>
+              <Button color='primary' onClick={() => handlerModal('fsm')}>
+                FSM 비행계획서 작성 바로가기
+              </Button>
+            </ButtonGroup>
+          </div>
+        </div>
+      </div>
+      {/* {modal ? (
         <ControlReservation modal={modal} handler={handlerModal} />
       ) : (
         <></>
+      )} */}
+      {modal === 'reservation' && (
+        <ControlReservation modal={true} handler={() => handlerModal(null)} />
+      )}
+      {modal === 'fsm' && (
+        <ControlFsm modal={true} handler={() => handlerModal(null)} />
       )}
     </div>
   );

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

@@ -1,220 +1,154 @@
+import React, { useState, Component } from 'react';
+
+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';
+
 export default function ReserveStep1() {
+  const settings = {
+    dots: false,
+    infinite: true,
+    speed: 500,
+    slidesToShow: 7,
+    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'>고양 킨텍스</div>
-          justifyContent: 'center',
+          <div className='list'>여의도 공원</div>
-          flexDirection: 'column',
+          <div className='list'>2023. 10. 22(목) ~ 2023. 11. 01(목)</div>
-          alignItems: 'center'
+          <div className='list'>성인 1명, 소아 1명, 유아 1명</div>
-        }}
+          <Button>수정</Button>
-      >
+        </div>
-        <span style={{ color: '#990033' }}>여정 1</span>
+      </div>
-        <div
+
-          style={{
+      <div className='step-box'>
-            display: 'flex',
+        <div className='step-reservation-header'>
-            justifyContent: 'space-around',
+          <Badge color='primary' className='badge-glow'>
-            alignItems: 'center',
+            여정 1
-            width: '25%'
+          </Badge>
-          }}
+          <div className='place'>
-        >
+            <span>고양 킨텍스</span>
-          <div
+            <span className='arrow'>
-            style={{
+              <ArrowRight />
-              fontWeight: 'bold',
+            </span>
-              fontSize: '1.4rem',
+            <span>여의도 공원</span>
-              color: '#000'
+          </div>
-            }}
+
-          >
+          <div className='reservation-date'>
-            고양 킨텍스
+            <Slider {...settings}>
-          </div>
+              <div className='box'>
-          <div
+                <span className='date'>2025.10.23(월)</span>
-            style={{
+                <span className='state'>매진</span>
-              fontWeight: 'bold',
+              </div>
-              fontSize: '1.7rem',
+              <div className='box'>
-              color: '#000'
+                <span className='date'>2025.10.24(화)</span>
-            }}
+                <span className='state'>매진</span>
-          >
+              </div>
-            ➔
+              <div className='box'>
-          </div>
+                <span className='date'>2025.10.25(수)</span>
-          <div
+                <span className='state'>매진</span>
-            style={{
+              </div>
-              fontWeight: 'bold',
+              <div className='box active'>
-              fontSize: '1.4rem',
+                <span className='date'>2025.10.26(목)</span>
-              color: '#000'
+                <span className='state'>
-            }}
+                  56,000<span className='rate'>KRW</span>
-          >
+                </span>
-            여의도 공원
+              </div>
-          </div>
+              <div className='box'>
-        </div>
+                <span className='date'>2025.10.27(금)</span>
-      </div>
+                <span className='state'>
-      <div
+                  58,000<span className='rate'>KRW</span>
-        style={{
+                </span>
-          display: 'flex',
+              </div>
-          //   justifyContent: 'space-between',
+              <div className='box'>
-          flexDirection: 'column',
+                <span className='date'>2025.10.28(토)</span>
-          borderBottom: '1px dotted #000',
+                <span className='state'>-</span>
-          marginBottom: '30px'
+              </div>
-        }}
+              <div className='box'>
-      >
+                <span className='date'>2025.10.29(일)</span>
-        <div
+                <span className='state'>
-          style={{
+                  48,000<span className='rate'>KRW</span>
-            display: 'flex',
+                </span>
-            backgroundColor: '#F2F2F2',
+              </div>
-            marginBottom: '5px',
+              <div className='box'>
-            padding: '10px'
+                <span className='date'>2025.10.30(월)</span>
-          }}
+                <span className='state'>
-        >
+                  38,000<span className='rate'>KRW</span>
-          <div style={{ flex: 1, textAlign: 'center' }}>
+                </span>
-            출발/도착시간 (비행시간)
+              </div>
-          </div>
+            </Slider>
-          <div style={{ flex: 1, textAlign: 'center' }}>편명/기종</div>
+          </div>
-          <div style={{ flex: 1, textAlign: 'center' }}>특가운임</div>
+
-          <div style={{ flex: 1, textAlign: 'center' }}>할인운임</div>
+          <div className='reservation-table'>
-          <div style={{ flex: 1, textAlign: 'center' }}>정규운임</div>
+            <table>
-        </div>
+              <colgroup>
-        <div
+                <col width='20%' />
-          style={{
+                <col width='20%' />
-            display: 'flex',
+                <col width='15%' />
-            alignItems: 'center',
+                <col width='15%' />
-            borderBottom: '1px dotted #000',
+                <col width='15%' />
-            marginBottom: '5px',
+              </colgroup>
-            padding: '10px'
+              <thead>
-          }}
+                <tr>
-        >
+                  <th>출발/도착시간(비행시간)</th>
-          <div style={{ flex: 1, textAlign: 'center' }}>
+                  <th>편명/기종</th>
-            <span>1시간 5분</span>
+                  <th>특가운임</th>
-            <div style={{ fontWeight: 'bold' }}>
+                  <th>할인운임</th>
-              08:40----------------------09:45
+                  <th>정규운임</th>
-            </div>
+                </tr>
-          </div>
+              </thead>
-          <div style={{ flex: 1, textAlign: 'center' }}>
+              <tbody>
-            <div>3P1003</div>
+                <tr>
-            <div>B737-800</div>
+                  <td>
-          </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>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'
-              }}
-            >
-              <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 className='alltime'>
-                <span>KRW</span>
+                        <span className='time'>1시간 5분</span>
-              </div>
+                        <span className='start'>08:40</span>
-              <span>잔여3석</span>
+                        <span className='arrive'>09:45</span>
-            </div>
+                      </span>
-          </div>
+                      <span className='plus'>+1 day</span>
-          <div
+                    </div>
-            style={{
+                  </td>
-              flex: 1,
+                  <td>
-              textAlign: 'center',
+                    <div className='flight'>
-              border: '1px solid #F2F2F2',
+                      <span>3P1003</span>
-              height: '50px',
+                      <span>B737-800</span>
-              padding: '3px'
+                    </div>
-            }}
+                  </td>
-          >
+                  <td>
-            <div>
+                    <div className='amount'>
-              <div>
+                      <span className='state'>매진</span>
-              <span style={{ fontWeight: 'bold' }}>76,000 </span>
+                    </div>
-                <span>KRW</span>
+                  </td>
-              </div>
+                  <td>
-              <span>잔여3석</span>
+                    <div className='amount'>
-            </div>
+                      <span className='state'>
-          </div>
+                        76.000<span className='rate'>KRW</span>
-        </div>
+                      </span>
-      </div>
+                      <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',
@@ -429,5 +363,6 @@ export default function ReserveStep1() {
           </div>
         </div>
       </div>
+    </div>
   );
 }

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

@@ -1,250 +1,66 @@
+import { XCircle, ArrowRight } from 'react-feather';
+
 export default function Step1() {
   return (
-    <div
+    <div className='step-wrap'>
-      style={{
+      <div className='step-box'>
-        border: '1px solid #990033',
+      <div className='step-box-ti'>
-        padding: '25px',
+        <h5>출발지 선택</h5>
-        width: '70%'
-      }}
-    >
-      <div
-        style={{
-          display: 'flex',
-          justifyContent: 'space-between',
-          alignItems: 'center',
-          borderBottom: '1px solid #990033',
-          fontSize: '1.2rem'
-        }}
-      >
-        <h5 style={{ fontWeight: 'bold' }}>출발지 선택</h5>
-        <div
-          style={{
-            fontWeight: 'bold',
-            cursor: 'pointer',
-            fontSize: '1.5rem'
-          }}
-        >
-          X
       </div>
-      </div>
+        <div className='step-box-city'>
-      <div style={{ padding: '20px 15px' }}>
+          <ul className='step-box-city-list'>
-        <div
+            <li className='step-city-ti'>아라뱃길</li>
-          style={{
+            <li>
-            display: 'flex',
+              <ul>
-            justifyContent: 'space-around',
+                <li>드론시험 인증센터</li>
-            marginBottom: '20px'
+                <li>계양 신도시</li>
-          }}
-        >
-          <ul
-            style={{
-              width: '30%',
-              border: '1px solid #990033',
-              height: '140px'
-            }}
-          >
-            <li
-              style={{
-                backgroundColor: '#990033',
-                color: '#fff',
-                height: '50px',
-                fontWeight: 'bold',
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center'
-              }}
-            >
-              아라뱃길
-            </li>
-            <li
-              style={{
-                display: 'flex',
-                height: '45px',
-                justifyContent: 'flex-start',
-                alignItems: 'center',
-                borderBottom: '1px solid #990033',
-                padding: '10px',
-                color: 'black'
-              }}
-            >
-              드론시험 인증센터
-            </li>
-            <li
-              style={{
-                display: 'flex',
-                justifyContent: 'flex-start',
-                height: '45px',
-                alignItems: 'center',
-                padding: '10px',
-                color: 'black'
-              }}
-            >
-              계양 신도시
-            </li>
               </ul>
-          <ul
-            style={{
-              width: '30%',
-              border: '1px solid #990033'
-            }}
-          >
-            <li
-              style={{
-                backgroundColor: '#990033',
-                color: '#fff',
-                height: '50px',
-                fontWeight: 'bold',
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center'
-              }}
-            >
-              한강
-            </li>
-            <li
-              style={{
-                display: 'flex',
-                justifyContent: 'flex-start',
-                height: '45px',
-                alignItems: 'center',
-                padding: '10px',
-                borderBottom: '1px solid #990033',
-                color: 'black'
-              }}
-            >
-              고양 킨텍스
-            </li>
-            <li
-              style={{
-                display: 'flex',
-                justifyContent: 'flex-start',
-                height: '45px',
-                alignItems: 'center',
-                padding: '10px',
-                borderBottom: '1px solid #990033',
-                color: 'black'
-              }}
-            >
-              김포공항
-            </li>
-            <li
-              style={{
-                display: 'flex',
-                justifyContent: 'flex-start',
-                height: '45px',
-                alignItems: 'center',
-                padding: '10px',
-                color: 'black'
-              }}
-            >
-              여의도 공원
             </li>
           </ul>
-          <ul
+          <ul className='step-box-city-list'>
-            style={{
+            <li className='step-city-ti'>한강</li>
-              width: '30%',
+            <li>
-              border: '1px solid #990033',
+              <ul>
-              height: '140px'
+                <li>고양 킨텍스</li>
-            }}
+                <li>김포공항</li>
-          >
+                <li>여의도 공원</li>
-            <li
+              </ul>
-              style={{
-                backgroundColor: '#990033',
-                color: '#fff',
-                height: '50px',
-                fontWeight: 'bold',
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center'
-              }}
-            >
-              탄천
-            </li>
-            <li
-              style={{
-                display: 'flex',
-                justifyContent: 'flex-start',
-                height: '45px',
-                alignItems: 'center',
-                padding: '10px',
-                borderBottom: '1px solid #990033',
-                color: 'black'
-              }}
-            >
-              잠실한강공원
             </li>
-            <li
+          </ul>
-              style={{
+          <ul className='step-box-city-list'>
-                display: 'flex',
+            <li className='step-city-ti'>탄천</li>
-                justifyContent: 'flex-start',
+            <li>
-                height: '45px',
+              <ul>
-                alignItems: 'center',
+                <li>잠실한강공원</li>
-                padding: '10px',
+                <li>수서역</li>
-                color: 'black'
+              </ul>
-              }}
-            >
-              수서역
             </li>
           </ul>
         </div>
-        <div style={{ paddingLeft: '15px', paddingRight: '15px' }}>
-          <div style={{ marginBottom: '10px' }}>
-            <span style={{ fontWeight: 'bold', color: '#000' }}>
-              최근 조회하신 여정
-            </span>
       </div>
-          <div
+      <div className='step-box'>
-            style={{
+        <div className='step-box-ti'>
-              display: 'flex',
+          <h5>최근 조회하신 여정</h5>
-              justifyContent: 'space-between'
+        </div>
-            }}
+        <div className='search-box-city'>
-          >
+          <div className='search-city'>
-            <div
+            <div>
-              style={{
+              <span>드론시험 인증센터</span>
-                width: '47.5%',
+              <span className='arrow'><ArrowRight /></span>
-                backgroundColor: '#F2F2F2',
+              <span>계양 신도시</span>
-                display: 'flex',
+            </div>
-                justifyContent: 'space-between',
+            <div className='delete'>
-                padding: '15px'
+              <XCircle />
-              }}
-            >
-              <span style={{ fontWeight: 'bold' }}>
-                {'드론시험 인증센터 -> 계양 신도시'}
-              </span>
-              <div
-                style={{
-                  backgroundColor: '#fff',
-                  borderRadius: '50%',
-                  width: '20px',
-                  textAlign: 'center',
-                  fontWeight: 'bold'
-                }}
-              >
-                X
             </div>
           </div>
-            <div
+          <div className='search-city'>
-              style={{
+            <div>
-                width: '47.5%',
+              <span>드론시험 인증센터</span>
-                backgroundColor: '#F2F2F2',
+              <span className='arrow'><ArrowRight /></span>
-                display: 'flex',
+              <span>계양 신도시</span>
-                justifyContent: 'space-between',
-                padding: '15px'
-              }}
-            >
-              <span style={{ fontWeight: 'bold' }}>
-                {'고양 킨텍스 -> 여의도 공원'}
-              </span>
-              <div
-                style={{
-                  backgroundColor: '#fff',
-                  borderRadius: '50%',
-                  width: '20px',
-                  textAlign: 'center',
-                  fontWeight: 'bold'
-                }}
-              >
-                X
             </div>
+            <div className='delete'>
+              <XCircle />
             </div>
           </div>
         </div>

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

@@ -1,188 +1,37 @@
 export default function Step2() {
   return (
-    <div
+    <div className='step-wrap'>
-      style={{
+      <div className='step-box'>
-        border: '1px solid #990033',
+      <div className='step-box-ti'>
-        padding: '25px',
+        <h5>도착지 선택</h5>
-        width: '70%'
-      }}
-    >
-      <div
-        style={{
-          display: 'flex',
-          justifyContent: 'space-between',
-          alignItems: 'center',
-          borderBottom: '1px solid #990033',
-          fontSize: '1.2rem'
-        }}
-      >
-        <h5 style={{ fontWeight: 'bold' }}>도착지 선택</h5>
-        <div
-          style={{
-            fontWeight: 'bold',
-            cursor: 'pointer',
-            fontSize: '1.5rem'
-          }}
-        >
-          X
       </div>
-      </div>
+        <div className='step-box-city'>
-      <div style={{ padding: '20px 15px' }}>
+          <ul className='step-box-city-list'>
-        <div
+            <li className='step-city-ti'>아라뱃길</li>
-          style={{
+            <li>
-            display: 'flex',
+              <ul>
-            justifyContent: 'space-around',
+                <li>드론시험 인증센터</li>
-            marginBottom: '20px'
+                <li>계양 신도시</li>
-          }}
-        >
-          <ul
-            style={{
-              width: '30%',
-              border: '1px solid #990033',
-              height: '140px'
-            }}
-          >
-            <li
-              style={{
-                backgroundColor: '#990033',
-                color: '#fff',
-                height: '50px',
-                fontWeight: 'bold',
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center'
-              }}
-            >
-              아라뱃길
-            </li>
-            <li
-              style={{
-                display: 'flex',
-                height: '45px',
-                justifyContent: 'flex-start',
-                alignItems: 'center',
-                borderBottom: '1px solid #990033',
-                padding: '10px',
-                color: 'darkgray'
-              }}
-            >
-              드론시험 인증센터
-            </li>
-            <li
-              style={{
-                display: 'flex',
-                justifyContent: 'flex-start',
-                height: '45px',
-                alignItems: 'center',
-                padding: '10px',
-                color: 'darkgray'
-              }}
-            >
-              계양 신도시
-            </li>
               </ul>
-          <ul
-            style={{
-              width: '30%',
-              border: '1px solid #990033'
-            }}
-          >
-            <li
-              style={{
-                backgroundColor: '#990033',
-                color: '#fff',
-                height: '50px',
-                fontWeight: 'bold',
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center'
-              }}
-            >
-              한강
-            </li>
-            <li
-              style={{
-                display: 'flex',
-                justifyContent: 'flex-start',
-                height: '45px',
-                alignItems: 'center',
-                padding: '10px',
-                borderBottom: '1px solid #990033',
-                color: 'darkgray'
-              }}
-            >
-              고양 킨텍스
-            </li>
-            <li
-              style={{
-                display: 'flex',
-                justifyContent: 'flex-start',
-                height: '45px',
-                alignItems: 'center',
-                padding: '10px',
-                borderBottom: '1px solid #990033',
-                color: 'black'
-              }}
-            >
-              김포공항
-            </li>
-            <li
-              style={{
-                display: 'flex',
-                justifyContent: 'flex-start',
-                height: '45px',
-                alignItems: 'center',
-                padding: '10px',
-                color: 'black'
-              }}
-            >
-              여의도 공원
             </li>
           </ul>
-          <ul
+          <ul className='step-box-city-list'>
-            style={{
+            <li className='step-city-ti'>한강</li>
-              width: '30%',
+            <li>
-              border: '1px solid #990033',
+              <ul>
-              height: '140px'
+                <li>고양 킨텍스</li>
-            }}
+                <li>김포공항</li>
-          >
+                <li>여의도 공원</li>
-            <li
+              </ul>
-              style={{
-                backgroundColor: '#990033',
-                color: '#fff',
-                height: '50px',
-                fontWeight: 'bold',
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center'
-              }}
-            >
-              탄천
-            </li>
-            <li
-              style={{
-                display: 'flex',
-                justifyContent: 'flex-start',
-                height: '45px',
-                alignItems: 'center',
-                padding: '10px',
-                borderBottom: '1px solid #990033',
-                color: 'darkgray'
-              }}
-            >
-              잠실한강공원
             </li>
-            <li
+          </ul>
-              style={{
+          <ul className='step-box-city-list'>
-                display: 'flex',
+            <li className='step-city-ti'>탄천</li>
-                justifyContent: 'flex-start',
+            <li>
-                height: '45px',
+              <ul>
-                alignItems: 'center',
+                <li>잠실한강공원</li>
-                padding: '10px',
+                <li>수서역</li>
-                color: 'darkgray'
+              </ul>
-              }}
-            >
-              수서역
             </li>
           </ul>
         </div>

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

@@ -1,57 +1,19 @@
+import '@styles/react/libs/flatpickr/flatpickr.scss';
 import Flatpickr from 'react-flatpickr';
-import 'flatpickr/dist/themes/material_green.css';
+import { Button } from 'reactstrap';
+
+
 export default function Step3() {
   return (
-    <div
+    <div className='step-wrap'>
-      style={{
+      <div className='step-box'>
-        border: '1px solid #990033',
+        <div className='step-box-ti'>
-        padding: '25px',
+          <h5>탑승일 선택</h5>
-        width: '70%'
+          <Button size='sm'>초기화</Button>
-      }}
-    >
-      <div
-        style={{
-          display: 'flex',
-          justifyContent: 'space-between',
-          alignItems: 'center',
-          borderBottom: '1px solid #990033',
-          fontSize: '1.2rem'
-        }}
-      >
-        <h5 style={{ fontWeight: 'bold' }}>탑승일 선택</h5>
-        <div style={{ display: 'flex', alignItems: 'center' }}>
-          <button
-            style={{
-              border: '1px solid #000',
-              padding: '0 10px',
-              fontSize: '1rem'
-            }}
-          >
-            초기화
-          </button>
-          <div
-            style={{
-              fontWeight: 'bold',
-              cursor: 'pointer',
-              fontSize: '1.5rem',
-              marginLeft: '10px'
-            }}
-          >
-            X
-          </div>
-        </div>
         </div>
-      <div style={{ padding: '20px 15px' }}>
+        <div className='calendar'>
-        <div
-          style={{
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center'
-          }}
-        >
           <Flatpickr
             // value={['2023-10-10', '2023-10-10']}
-
             // className='hidden-input'
             id='searchDate'
             options={{

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

@@ -1,185 +1,43 @@
+import NumberInput from '@components/number-input'
+import { Button, Label } from 'reactstrap'
+
 export default function Step4({ setIsChoise }) {
   return (
-    <div
+    <div className='step-wrap'>
-      style={{
+      <div className='step-box'>
-        border: '1px solid #990033',
+        <div className='step-box-ti'>
-        padding: '25px 25px 5px 25px',
+          <h5>탑승객 수 선택</h5>
-        width: '70%'
-      }}
-    >
-      <div
-        style={{
-          display: 'flex',
-          justifyContent: 'space-between',
-          alignItems: 'center',
-          borderBottom: '1px solid #990033',
-          fontSize: '1.2rem'
-        }}
-      >
-        <h5 style={{ fontWeight: 'bold' }}>탑승객 수 선택</h5>
-        <div
-          style={{
-            fontWeight: 'bold',
-            cursor: 'pointer',
-            fontSize: '1.5rem'
-          }}
-        >
-          X
         </div>
+        <div className='passengers'>
+          <ul>
+            <li>
+              <div>
+                <h6>성인 (만 13세 이상)</h6>
+                <div>
+                  <NumberInput size='sm' id='min-max-number-input1' min={0} max={9} />
                 </div>
-      <div style={{ padding: '20px 15px' }}>
-        <div
-          style={{
-            display: 'flex',
-            justifyContent: 'flex-start',
-            alignItems: 'center',
-            marginBottom: '30px'
-          }}
-        >
-          <div style={{ fontWeight: 'bold', width: '300px' }}>
-            성인<span> (만 13세 이상)</span>{' '}
               </div>
-          <div
+            </li>
-            style={{
+            <li>
-              display: 'flex',
+              <div>
-              width: '400px',
+                <h6>소아 (만 2세 ~ 13세 미만)</h6>
-              backgroundColor: '#f2f2f2',
+                <div>
-              padding: '15px',
+                  <NumberInput size='sm' id='min-max-number-input2' min={0} max={9} />
-              justifyContent: 'space-between',
-              alignItems: 'center'
-            }}
-          >
-            <button
-              style={{
-                border: '1px solid #000',
-                padding: '0 10px',
-                fontSize: '1rem',
-                backgroundColor: '#fff'
-              }}
-            >
-              -
-            </button>
-            <span style={{ fontWeight: 'bold' }}>성인 1</span>
-            <button
-              style={{
-                border: '1px solid #000',
-                padding: '0 10px',
-                fontSize: '1rem',
-                backgroundColor: '#fff'
-              }}
-            >
-              +
-            </button>
                 </div>
               </div>
-        <div
+            </li>
-          style={{
+            <li>
-            display: 'flex',
+              <div>
-            justifyContent: 'flex-start',
+                <h6>유아 (만 2세 미만)</h6>
-            alignItems: 'center',
+                <div>
-            marginBottom: '30px'
+                  <NumberInput size='sm' id='min-max-number-input3' min={0} max={9} />
-          }}
-        >
-          <div style={{ fontWeight: 'bold', width: '300px' }}>
-            소아<span> (만 2세 ~ 13세 미만)</span>{' '}
                 </div>
-          <div
-            style={{
-              display: 'flex',
-              width: '400px',
-              backgroundColor: '#f2f2f2',
-              padding: '15px',
-              justifyContent: 'space-between',
-              alignItems: 'center'
-            }}
-          >
-            <button
-              style={{
-                border: '1px solid #000',
-                padding: '0 10px',
-                fontSize: '1rem',
-                backgroundColor: '#fff'
-              }}
-            >
-              -
-            </button>
-            <span style={{ fontWeight: 'bold' }}>소아 0</span>
-            <button
-              style={{
-                border: '1px solid #000',
-                padding: '0 10px',
-                fontSize: '1rem',
-                backgroundColor: '#fff'
-              }}
-            >
-              +
-            </button>
               </div>
-        </div>
+            </li>
-        <div
+          </ul>
-          style={{
-            display: 'flex',
-            justifyContent: 'flex-start',
-            alignItems: 'center',
-            marginBottom: '30px'
-          }}
-        >
-          <div style={{ fontWeight: 'bold', width: '300px' }}>
-            유아<span> (만 2세 미만)</span>{' '}
-          </div>
-          <div
-            style={{
-              display: 'flex',
-              width: '400px',
-              backgroundColor: '#f2f2f2',
-              padding: '15px',
-              justifyContent: 'space-between',
-              alignItems: 'center'
-            }}
-          >
-            <button
-              style={{
-                border: '1px solid #000',
-                padding: '0 10px',
-                fontSize: '1rem',
-                backgroundColor: '#fff'
-              }}
-            >
-              -
-            </button>
-            <span style={{ fontWeight: 'bold' }}>유아 0</span>
-            <button
-              style={{
-                border: '1px solid #000',
-                padding: '0 10px',
-                fontSize: '1rem',
-                backgroundColor: '#fff'
-              }}
-            >
-              +
-            </button>
-          </div>
-        </div>
-        <div
-          style={{ display: 'flex', justifyContent: 'end', alignItems: 'end' }}
-        >
-          <button
-            style={{
-              border: '1px solid #7F7F7F',
-              padding: '0 10px',
-              fontSize: '1rem',
-              backgroundColor: '#7F7F7F',
-              color: '#fff',
-              padding: '10px 50px',
-              fontWeight: 'bold',
-              fontSize: '0.8rem'
-            }}
-            onClick={() => setIsChoise(true)}
-          >
-            선택 완료
-          </button>
         </div>
       </div>
+      <div className='finish-btn'><Button color='success' onClick={() => setIsChoise(true)}>선택 완료</Button></div>
     </div>
   );
 }

src/views/reservation/ReservationView.js

@@ -0,0 +1,6 @@
+import ControlReservation from '../control/setting/ControlReservation';
+import '../../assets/css/custom.css';
+
+export default function ReservationView() {
+  return <ControlReservation />;
+}