랜덤 추천 구현

@@ -1794,11 +1794,21 @@
       "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz",
       "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg=="
     },
+    "@date-io/moment": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/@date-io/moment/-/moment-1.3.5.tgz",
+      "integrity": "sha512-b0JQb10Lie07iW2/9uKCQSrXif262d6zfYBstCLLJUk0JVA+7o/yLDg5p2+GkjgJbmodjHozIXs4Bi34RRhL8Q=="
+    },
     "@fortawesome/fontawesome-common-types": {
       "version": "0.2.28",
       "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.28.tgz",
       "integrity": "sha512-gtis2/5yLdfI6n0ia0jH7NJs5i/Z/8M/ZbQL6jXQhCthEOe5Cr5NcQPhgTvFxNOtURE03/ZqUcEskdn2M+QaBg=="
     },
+    "@fortawesome/fontawesome-free": {
+      "version": "5.13.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.13.1.tgz",
+      "integrity": "sha512-D819f34FLHeBN/4xvw0HR0u7U2G7RqjPSggXqf7LktsxWQ48VAfGwvMrhcVuaZV2fF069c/619RdgCCms0DHhw=="
+    },
     "@fortawesome/fontawesome-svg-core": {
       "version": "1.2.28",
       "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.28.tgz",
@@ -2038,6 +2048,61 @@
         "@types/yargs": "^13.0.0"
       }
     },
+    "@material-ui/core": {
+      "version": "3.9.3",
+      "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-3.9.3.tgz",
+      "integrity": "sha512-REIj62+zEvTgI/C//YL4fZxrCVIySygmpZglsu/Nl5jPqy3CDjZv1F9ubBYorHqmRgeVPh64EghMMWqk4egmfg==",
+      "requires": {
+        "@babel/runtime": "^7.2.0",
+        "@material-ui/system": "^3.0.0-alpha.0",
+        "@material-ui/utils": "^3.0.0-alpha.2",
+        "@types/jss": "^9.5.6",
+        "@types/react-transition-group": "^2.0.8",
+        "brcast": "^3.0.1",
+        "classnames": "^2.2.5",
+        "csstype": "^2.5.2",
+        "debounce": "^1.1.0",
+        "deepmerge": "^3.0.0",
+        "dom-helpers": "^3.2.1",
+        "hoist-non-react-statics": "^3.2.1",
+        "is-plain-object": "^2.0.4",
+        "jss": "^9.8.7",
+        "jss-camel-case": "^6.0.0",
+        "jss-default-unit": "^8.0.2",
+        "jss-global": "^3.0.0",
+        "jss-nested": "^6.0.1",
+        "jss-props-sort": "^6.0.0",
+        "jss-vendor-prefixer": "^7.0.0",
+        "normalize-scroll-left": "^0.1.2",
+        "popper.js": "^1.14.1",
+        "prop-types": "^15.6.0",
+        "react-event-listener": "^0.6.2",
+        "react-transition-group": "^2.2.1",
+        "recompose": "0.28.0 - 0.30.0",
+        "warning": "^4.0.1"
+      }
+    },
+    "@material-ui/system": {
+      "version": "3.0.0-alpha.2",
+      "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-3.0.0-alpha.2.tgz",
+      "integrity": "sha512-odmxQ0peKpP7RQBQ8koly06YhsPzcoVib1vByVPBH4QhwqBXuYoqlCjt02846fYspAqkrWzjxnWUD311EBbxOA==",
+      "requires": {
+        "@babel/runtime": "^7.2.0",
+        "deepmerge": "^3.0.0",
+        "prop-types": "^15.6.0",
+        "warning": "^4.0.1"
+      }
+    },
+    "@material-ui/utils": {
+      "version": "3.0.0-alpha.3",
+      "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-3.0.0-alpha.3.tgz",
+      "integrity": "sha512-rwMdMZptX0DivkqBuC+Jdq7BYTXwqKai5G5ejPpuEDKpWzi1Oxp+LygGw329FrKpuKeiqpcymlqJTjmy+quWng==",
+      "requires": {
+        "@babel/runtime": "^7.2.0",
+        "prop-types": "^15.6.0",
+        "react-is": "^16.6.3"
+      }
+    },
     "@mrmlnc/readdir-enhanced": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
@@ -2393,6 +2458,15 @@
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.4.tgz",
       "integrity": "sha512-8+KAKzEvSUdeo+kmqnKrqgeE+LcA0tjYWFY7RPProVYwnqDjukzO+3b6dLD56rYX5TdWejnEOLJYOIeh4CXKuA=="
     },
+    "@types/jss": {
+      "version": "9.5.8",
+      "resolved": "https://registry.npmjs.org/@types/jss/-/jss-9.5.8.tgz",
+      "integrity": "sha512-bBbHvjhm42UKki+wZpR89j73ykSXg99/bhuKuYYePtpma3ZAnmeGnl0WxXiZhPGsIfzKwCUkpPC0jlrVMBfRxA==",
+      "requires": {
+        "csstype": "^2.0.0",
+        "indefinite-observable": "^1.0.1"
+      }
+    },
     "@types/minimatch": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz",
@@ -2435,6 +2509,22 @@
         "@types/react": "*"
       }
     },
+    "@types/react-text-mask": {
+      "version": "5.4.6",
+      "resolved": "https://registry.npmjs.org/@types/react-text-mask/-/react-text-mask-5.4.6.tgz",
+      "integrity": "sha512-0KkER9oXZY/v1x8aoMTHwANlWnKT5tnmV7Zz+g81gBvcHRtcIHotcpY4KgWRwx0T5JMcsYmEh7wGOz0lwdONew==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
+    "@types/react-transition-group": {
+      "version": "2.9.2",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-2.9.2.tgz",
+      "integrity": "sha512-5Fv2DQNO+GpdPZcxp2x/OQG/H19A01WlmpjVD9cKvVFmoVLOZ9LvBgSWG6pSXIU4og5fgbvGPaCV5+VGkWAEHA==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/stack-utils": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz",
@@ -3731,6 +3821,11 @@
       "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.5.0.tgz",
       "integrity": "sha512-Z93QoXvodoVslA+PWNdk23Hze4RBYIkpb5h8I2HY2Tu2h7A0LpAgLcyrhrSUyo2/Oxm2l1fRZPs1e5hnxnliXA=="
     },
+    "bootstrap-css-only": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/bootstrap-css-only/-/bootstrap-css-only-4.4.1.tgz",
+      "integrity": "sha512-iBgNli7RnedBFwn6sMTQoAZ8WgIwmX4kF1rckfj+pgro5q/Q0DbLtcpfH60XoFnCXzbEJU/khC/B2EQap89mCg=="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -3767,6 +3862,11 @@
         }
       }
     },
+    "brcast": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/brcast/-/brcast-3.0.2.tgz",
+      "integrity": "sha512-f5XwwFCCuvgqP2nMH/hJ74FqnGmb4X3D+NC//HphxJzzhsZvSZa+Hk/syB7j3ZHpPDLMoYU8oBgviRWfNvEfKA=="
+    },
     "brorand": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/brorand/-/brorand-1.1.0.tgz",
@@ -4071,11 +4171,42 @@
         }
       }
     },
+    "change-emitter": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/change-emitter/-/change-emitter-0.1.6.tgz",
+      "integrity": "sha1-6LL+PX8at9aaMhma/5HqaTFAlRU="
+    },
     "chardet": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz",
       "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA=="
     },
+    "chart.js": {
+      "version": "2.9.3",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.9.3.tgz",
+      "integrity": "sha512-+2jlOobSk52c1VU6fzkh3UwqHMdSlgH1xFv9FKMqHiNCpXsGPQa/+81AFa+i3jZ253Mq9aAycPwDjnn1XbRNNw==",
+      "requires": {
+        "chartjs-color": "^2.1.0",
+        "moment": "^2.10.2"
+      }
+    },
+    "chartjs-color": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.4.1.tgz",
+      "integrity": "sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==",
+      "requires": {
+        "chartjs-color-string": "^0.6.0",
+        "color-convert": "^1.9.3"
+      }
+    },
+    "chartjs-color-string": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz",
+      "integrity": "sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==",
+      "requires": {
+        "color-name": "^1.0.0"
+      }
+    },
     "chokidar": {
       "version": "3.4.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.4.0.tgz",
@@ -4260,6 +4391,11 @@
         "shallow-clone": "^0.1.2"
       }
     },
+    "clsx": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz",
+      "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA=="
+    },
     "co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -4758,6 +4894,14 @@
         "source-map": "^0.6.1"
       }
     },
+    "css-vendor": {
+      "version": "0.3.8",
+      "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-0.3.8.tgz",
+      "integrity": "sha1-ZCHP0wNM5mT+dnOXL9ARn8KJQfo=",
+      "requires": {
+        "is-in-browser": "^1.0.2"
+      }
+    },
     "css-what": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-3.2.1.tgz",
@@ -4940,6 +5084,11 @@
         }
       }
     },
+    "debounce": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.0.tgz",
+      "integrity": "sha512-mYtLl1xfZLi1m4RtQYlZgJUNQjl4ZxVnHzIR8nLLgi4q1YT8o/WM+MK/f8yfcc9s5Ir5zRaPZyZU6xs1Syoocg=="
+    },
     "debug": {
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@@ -4983,6 +5132,11 @@
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz",
       "integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ="
     },
+    "deepmerge": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-3.3.0.tgz",
+      "integrity": "sha512-GRQOafGHwMHpjPx9iCvTgpu9NojZ49q794EEL94JVEw6VaeA8XTUyBKvAkOOjBX9oJNiV6G3P+T+tihFjo2TqA=="
+    },
     "default-gateway": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/default-gateway/-/default-gateway-4.2.0.tgz",
@@ -5385,6 +5539,14 @@
       "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
       "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k="
     },
+    "encoding": {
+      "version": "0.1.12",
+      "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz",
+      "integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=",
+      "requires": {
+        "iconv-lite": "~0.4.13"
+      }
+    },
     "end-of-stream": {
       "version": "1.4.4",
       "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
@@ -5965,6 +6127,11 @@
         "strip-eof": "^1.0.0"
       }
     },
+    "exenv": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
+      "integrity": "sha1-KueOhdmJQVhnCwPUe+wfA72Ru50="
+    },
     "exit": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
@@ -6252,6 +6419,35 @@
         "bser": "2.1.1"
       }
     },
+    "fbjs": {
+      "version": "0.8.17",
+      "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.17.tgz",
+      "integrity": "sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=",
+      "requires": {
+        "core-js": "^1.0.0",
+        "isomorphic-fetch": "^2.1.1",
+        "loose-envify": "^1.0.0",
+        "object-assign": "^4.1.0",
+        "promise": "^7.1.1",
+        "setimmediate": "^1.0.5",
+        "ua-parser-js": "^0.7.18"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "1.2.7",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
+          "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY="
+        },
+        "promise": {
+          "version": "7.3.1",
+          "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
+          "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
+          "requires": {
+            "asap": "~2.0.3"
+          }
+        }
+      }
+    },
     "figgy-pudding": {
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.2.tgz",
@@ -6404,6 +6600,23 @@
         }
       }
     },
+    "focus-trap": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-4.0.2.tgz",
+      "integrity": "sha512-HtLjfAK7Hp2qbBtLS6wEznID1mPT+48ZnP2nkHzgjpL4kroYHg0CdqJ5cTXk+UO5znAxF5fRUkhdyfgrhh8Lzw==",
+      "requires": {
+        "tabbable": "^3.1.2",
+        "xtend": "^4.0.1"
+      }
+    },
+    "focus-trap-react": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/focus-trap-react/-/focus-trap-react-6.0.0.tgz",
+      "integrity": "sha512-mvEYxmP75PMx0vOqoIAmJHO/qUEvdTAdz6gLlEZyxxODnuKQdnKea2RWTYxghAPrV+ibiIq2o/GTSgQycnAjcw==",
+      "requires": {
+        "focus-trap": "^4.0.2"
+      }
+    },
     "follow-redirects": {
       "version": "1.11.0",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.11.0.tgz",
@@ -7135,6 +7348,11 @@
       "resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-1.0.0.tgz",
       "integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM="
     },
+    "hyphenate-style-name": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.3.tgz",
+      "integrity": "sha512-EcuixamT82oplpoJ2XU4pDtKGWQ7b00CD9f1ug9IaQ3p1bkHMiKCZ9ut9QDI6qsa6cpUuB+A/I+zLtdNK4n2DQ=="
+    },
     "iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -7218,6 +7436,14 @@
       "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
       "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o="
     },
+    "indefinite-observable": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/indefinite-observable/-/indefinite-observable-1.0.2.tgz",
+      "integrity": "sha512-Mps0898zEduHyPhb7UCgNmfzlqNZknVmaFz5qzr0mm04YQ5FGLhAyK/dJ+NaRxGyR6juQXIxh5Ev0xx+qq0nYA==",
+      "requires": {
+        "symbol-observable": "1.2.0"
+      }
+    },
     "indent-string": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
@@ -7498,6 +7724,11 @@
         "is-extglob": "^2.1.1"
       }
     },
+    "is-in-browser": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz",
+      "integrity": "sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU="
+    },
     "is-number": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
@@ -7624,6 +7855,15 @@
       "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
       "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
     },
+    "isomorphic-fetch": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz",
+      "integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=",
+      "requires": {
+        "node-fetch": "^1.0.1",
+        "whatwg-fetch": ">=0.10.0"
+      }
+    },
     "isstream": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
@@ -8328,6 +8568,75 @@
         "verror": "1.10.0"
       }
     },
+    "jss": {
+      "version": "9.8.7",
+      "resolved": "https://registry.npmjs.org/jss/-/jss-9.8.7.tgz",
+      "integrity": "sha512-awj3XRZYxbrmmrx9LUSj5pXSUfm12m8xzi/VKeqI1ZwWBtQ0kVPTs3vYs32t4rFw83CgFDukA8wKzOE9sMQnoQ==",
+      "requires": {
+        "is-in-browser": "^1.1.3",
+        "symbol-observable": "^1.1.0",
+        "warning": "^3.0.0"
+      },
+      "dependencies": {
+        "warning": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
+          "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
+          "requires": {
+            "loose-envify": "^1.0.0"
+          }
+        }
+      }
+    },
+    "jss-camel-case": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/jss-camel-case/-/jss-camel-case-6.1.0.tgz",
+      "integrity": "sha512-HPF2Q7wmNW1t79mCqSeU2vdd/vFFGpkazwvfHMOhPlMgXrJDzdj9viA2SaHk9ZbD5pfL63a8ylp4++irYbbzMQ==",
+      "requires": {
+        "hyphenate-style-name": "^1.0.2"
+      }
+    },
+    "jss-default-unit": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/jss-default-unit/-/jss-default-unit-8.0.2.tgz",
+      "integrity": "sha512-WxNHrF/18CdoAGw2H0FqOEvJdREXVXLazn7PQYU7V6/BWkCV0GkmWsppNiExdw8dP4TU1ma1dT9zBNJ95feLmg=="
+    },
+    "jss-global": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/jss-global/-/jss-global-3.0.0.tgz",
+      "integrity": "sha512-wxYn7vL+TImyQYGAfdplg7yaxnPQ9RaXY/cIA8hawaVnmmWxDHzBK32u1y+RAvWboa3lW83ya3nVZ/C+jyjZ5Q=="
+    },
+    "jss-nested": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/jss-nested/-/jss-nested-6.0.1.tgz",
+      "integrity": "sha512-rn964TralHOZxoyEgeq3hXY8hyuCElnvQoVrQwKHVmu55VRDd6IqExAx9be5HgK0yN/+hQdgAXQl/GUrBbbSTA==",
+      "requires": {
+        "warning": "^3.0.0"
+      },
+      "dependencies": {
+        "warning": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
+          "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
+          "requires": {
+            "loose-envify": "^1.0.0"
+          }
+        }
+      }
+    },
+    "jss-props-sort": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/jss-props-sort/-/jss-props-sort-6.0.0.tgz",
+      "integrity": "sha512-E89UDcrphmI0LzmvYk25Hp4aE5ZBsXqMWlkFXS0EtPkunJkRr+WXdCNYbXbksIPnKlBenGB9OxzQY+mVc70S+g=="
+    },
+    "jss-vendor-prefixer": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/jss-vendor-prefixer/-/jss-vendor-prefixer-7.0.0.tgz",
+      "integrity": "sha512-Agd+FKmvsI0HLcYXkvy8GYOw3AAASBUpsmIRvVQheps+JWaN892uFOInTr0DRydwaD91vSSUCU4NssschvF7MA==",
+      "requires": {
+        "css-vendor": "^0.3.8"
+      }
+    },
     "jsx-ast-utils": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-2.2.3.tgz",
@@ -8542,6 +8851,11 @@
         "lodash._reinterpolate": "^3.0.0"
       }
     },
+    "lodash.throttle": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+      "integrity": "sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ="
+    },
     "lodash.uniq": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
@@ -8626,6 +8940,19 @@
         "object-visit": "^1.0.0"
       }
     },
+    "material-ui-pickers": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/material-ui-pickers/-/material-ui-pickers-2.2.4.tgz",
+      "integrity": "sha512-QCQh08Ylmnt+o4laW+rPs92QRAcESv3sPXl50YadLm++rAZAXAOh3K8lreGdynCMYFgZfdyu81Oz9xzTlAZNfw==",
+      "requires": {
+        "@types/react-text-mask": "^5.4.3",
+        "clsx": "^1.0.2",
+        "react-event-listener": "^0.6.6",
+        "react-text-mask": "^5.4.3",
+        "react-transition-group": "^2.5.3",
+        "tslib": "^1.9.3"
+      }
+    },
     "md5.js": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
@@ -8636,6 +8963,59 @@
         "safe-buffer": "^5.1.2"
       }
     },
+    "mdbreact": {
+      "version": "4.27.0",
+      "resolved": "https://registry.npmjs.org/mdbreact/-/mdbreact-4.27.0.tgz",
+      "integrity": "sha512-oKmHqZ058Abjni5lnap4Q6iMSw7KQk5EvG5e1bFXZ5wdhdZRT96/DNU7PCFnCIUfO3OdGo/cTsMg0osfadrHng==",
+      "requires": {
+        "@date-io/moment": "1.3.5",
+        "@fortawesome/fontawesome-free": "^5.12.0",
+        "@material-ui/core": "3.9.3",
+        "bootstrap-css-only": "4.4.1",
+        "chart.js": "2.9.3",
+        "classnames": "2.2.6",
+        "focus-trap-react": "^6.0.0",
+        "material-ui-pickers": "2.2.4",
+        "moment": "2.24.0",
+        "perfect-scrollbar": "1.5.0",
+        "popper.js": "^1.16.0",
+        "prop-types": "15.7.2",
+        "raf": "3.4.1",
+        "react": "^16.12.0",
+        "react-chartjs-2": "2.9.0",
+        "react-dom": "^16.12.0",
+        "react-image-lightbox": "5.1.1",
+        "react-numeric-input": "2.2.3",
+        "react-popper": "^1.3.7",
+        "react-router-dom": "^5.1.2",
+        "react-scroll": "1.7.16",
+        "react-toastify": "5.5.0",
+        "react-transition-group": "4.3.0",
+        "sass-loader": "^8.0.2"
+      },
+      "dependencies": {
+        "dom-helpers": {
+          "version": "5.1.4",
+          "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.1.4.tgz",
+          "integrity": "sha512-TjMyeVUvNEnOnhzs6uAn9Ya47GmMo3qq7m+Lr/3ON0Rs5kHvb8I+SQYjLUSYn7qhEm0QjW0yrBkvz9yOrwwz1A==",
+          "requires": {
+            "@babel/runtime": "^7.8.7",
+            "csstype": "^2.6.7"
+          }
+        },
+        "react-transition-group": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.3.0.tgz",
+          "integrity": "sha512-1qRV1ZuVSdxPlPf4O8t7inxUGpdyO5zG9IoNfJxSO0ImU2A1YWkEQvFPuIPZmMLkg5hYs7vv5mMOyfgSkvAwvw==",
+          "requires": {
+            "@babel/runtime": "^7.5.5",
+            "dom-helpers": "^5.0.1",
+            "loose-envify": "^1.4.0",
+            "prop-types": "^15.6.2"
+          }
+        }
+      }
+    },
     "mdn-data": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz",
@@ -8954,6 +9334,11 @@
         }
       }
     },
+    "moment": {
+      "version": "2.24.0",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
+      "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg=="
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
@@ -9056,6 +9441,15 @@
         "tslib": "^1.10.0"
       }
     },
+    "node-fetch": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz",
+      "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==",
+      "requires": {
+        "encoding": "^0.1.11",
+        "is-stream": "^1.0.1"
+      }
+    },
     "node-forge": {
       "version": "0.9.0",
       "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.9.0.tgz",
@@ -9190,6 +9584,11 @@
       "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
       "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI="
     },
+    "normalize-scroll-left": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/normalize-scroll-left/-/normalize-scroll-left-0.1.2.tgz",
+      "integrity": "sha512-F9YMRls0zCF6BFIE2YnXDRpHPpfd91nOIaNdDgrx5YMoPLo8Wqj+6jNXHQsYBavJeXP4ww8HCt0xQAKc5qk2Fg=="
+    },
     "normalize-url": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-1.9.1.tgz",
@@ -9710,6 +10109,11 @@
         "sha.js": "^2.4.8"
       }
     },
+    "perfect-scrollbar": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/perfect-scrollbar/-/perfect-scrollbar-1.5.0.tgz",
+      "integrity": "sha512-NrNHJn5mUGupSiheBTy6x+6SXCFbLlm8fVZh9moIzw/LgqElN5q4ncR4pbCBCYuCJ8Kcl9mYM0NgDxvW+b4LxA=="
+    },
     "performance-now": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
@@ -11028,6 +11432,15 @@
         "whatwg-fetch": "^3.0.0"
       }
     },
+    "react-chartjs-2": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-2.9.0.tgz",
+      "integrity": "sha512-IYwqUUnQRAJ9SNA978vxulHJTcUFTJk2LDVfbAyk0TnJFZZG7+6U/2flsE4MCw6WCbBjTTypy8T82Ch7XrPtRw==",
+      "requires": {
+        "lodash": "^4.17.4",
+        "prop-types": "^15.5.8"
+      }
+    },
     "react-cookies": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/react-cookies/-/react-cookies-0.1.1.tgz",
@@ -11268,6 +11681,25 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.7.tgz",
       "integrity": "sha512-TAv1KJFh3RhqxNvhzxj6LeT5NWklP6rDr2a0jaTfsZ5wSZWHOGeqQyejUp3xxLfPt2UpyJEcVQB/zyPcmonNFA=="
     },
+    "react-event-listener": {
+      "version": "0.6.6",
+      "resolved": "https://registry.npmjs.org/react-event-listener/-/react-event-listener-0.6.6.tgz",
+      "integrity": "sha512-+hCNqfy7o9wvO6UgjqFmBzARJS7qrNoda0VqzvOuioEpoEXKutiKuv92dSz6kP7rYLmyHPyYNLesi5t/aH1gfw==",
+      "requires": {
+        "@babel/runtime": "^7.2.0",
+        "prop-types": "^15.6.0",
+        "warning": "^4.0.1"
+      }
+    },
+    "react-image-lightbox": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/react-image-lightbox/-/react-image-lightbox-5.1.1.tgz",
+      "integrity": "sha512-GprldD8AqpRb2hsOdns3sI7Xeo9hJlcybDxuli4RB+ml1J/GaFaUuRkT/7IrTLv2+4vkR74ahz2LD0HOUHI7wA==",
+      "requires": {
+        "prop-types": "^15.6.2",
+        "react-modal": "^3.8.1"
+      }
+    },
     "react-is": {
       "version": "16.12.0",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.12.0.tgz",
@@ -11278,6 +11710,22 @@
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
+    "react-modal": {
+      "version": "3.11.2",
+      "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.11.2.tgz",
+      "integrity": "sha512-o8gvvCOFaG1T7W6JUvsYjRjMVToLZgLIsi5kdhFIQCtHxDkA47LznX62j+l6YQkpXDbvQegsDyxe/+JJsFQN7w==",
+      "requires": {
+        "exenv": "^1.2.0",
+        "prop-types": "^15.5.10",
+        "react-lifecycles-compat": "^3.0.0",
+        "warning": "^4.0.3"
+      }
+    },
+    "react-numeric-input": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/react-numeric-input/-/react-numeric-input-2.2.3.tgz",
+      "integrity": "sha1-S/WRjD6v7YUagN8euZLZQQArtVI="
+    },
     "react-popper": {
       "version": "1.3.7",
       "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.3.7.tgz",
@@ -11419,11 +11867,61 @@
         }
       }
     },
+    "react-scroll": {
+      "version": "1.7.16",
+      "resolved": "https://registry.npmjs.org/react-scroll/-/react-scroll-1.7.16.tgz",
+      "integrity": "sha512-f4M5AdL+3cw3MJ7c/T0hPMY2iHCeQLDXV13lRanAFQ6JIt9xyAdHCpTH9mLUQt9SQh4pRarD+Qc7KhU6qMx3Yg==",
+      "requires": {
+        "lodash.throttle": "^4.1.1",
+        "prop-types": "^15.5.8"
+      }
+    },
     "react-social-login-buttons": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/react-social-login-buttons/-/react-social-login-buttons-3.1.0.tgz",
       "integrity": "sha512-3BU+MqWI6XibmSotZ1LFKUYSwBBzb/CYdnemizVsaFfMu6MXzfUCcbpekO1eMPQg/AI3ZUdg3zu4E3r62t80nw=="
     },
+    "react-text-mask": {
+      "version": "5.4.3",
+      "resolved": "https://registry.npmjs.org/react-text-mask/-/react-text-mask-5.4.3.tgz",
+      "integrity": "sha1-mR77QpnjDC5sLEbRP2FxaUY+DS0=",
+      "requires": {
+        "prop-types": "^15.5.6"
+      }
+    },
+    "react-toastify": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-5.5.0.tgz",
+      "integrity": "sha512-jsVme7jALIFGRyQsri/g4YTsRuaaGI70T6/ikjwZMB4mwTZaCWqj5NqxhGrRStKlJc5npXKKvKeqTiRGQl78LQ==",
+      "requires": {
+        "@babel/runtime": "^7.4.2",
+        "classnames": "^2.2.6",
+        "prop-types": "^15.7.2",
+        "react-transition-group": "^4"
+      },
+      "dependencies": {
+        "dom-helpers": {
+          "version": "5.1.4",
+          "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.1.4.tgz",
+          "integrity": "sha512-TjMyeVUvNEnOnhzs6uAn9Ya47GmMo3qq7m+Lr/3ON0Rs5kHvb8I+SQYjLUSYn7qhEm0QjW0yrBkvz9yOrwwz1A==",
+          "requires": {
+            "@babel/runtime": "^7.8.7",
+            "csstype": "^2.6.7"
+          }
+        },
+        "react-transition-group": {
+          "version": "4.4.1",
+          "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz",
+          "integrity": "sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==",
+          "requires": {
+            "@babel/runtime": "^7.5.5",
+            "dom-helpers": "^5.0.1",
+            "loose-envify": "^1.4.0",
+            "prop-types": "^15.6.2"
+          }
+        }
+      }
+    },
     "react-transition-group": {
       "version": "2.9.0",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz",
@@ -11548,6 +12046,26 @@
         "util.promisify": "^1.0.0"
       }
     },
+    "recompose": {
+      "version": "0.30.0",
+      "resolved": "https://registry.npmjs.org/recompose/-/recompose-0.30.0.tgz",
+      "integrity": "sha512-ZTrzzUDa9AqUIhRk4KmVFihH0rapdCSMFXjhHbNrjAWxBuUD/guYlyysMnuHjlZC/KRiOKRtB4jf96yYSkKE8w==",
+      "requires": {
+        "@babel/runtime": "^7.0.0",
+        "change-emitter": "^0.1.2",
+        "fbjs": "^0.8.1",
+        "hoist-non-react-statics": "^2.3.1",
+        "react-lifecycles-compat": "^3.0.2",
+        "symbol-observable": "^1.0.4"
+      },
+      "dependencies": {
+        "hoist-non-react-statics": {
+          "version": "2.5.5",
+          "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz",
+          "integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw=="
+        }
+      }
+    },
     "recursive-readdir": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.2.tgz",
@@ -12990,11 +13508,21 @@
         "util.promisify": "~1.0.0"
       }
     },
+    "symbol-observable": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
+      "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ=="
+    },
     "symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
       "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw=="
     },
+    "tabbable": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-3.1.2.tgz",
+      "integrity": "sha512-wjB6puVXTYO0BSFtCmWQubA/KIn7Xvajw0x0l6eJUudMG/EAiJvIUnyNX6xO4NpGrJ16lbD0eUseB9WxW0vlpQ=="
+    },
     "table": {
       "version": "5.4.6",
       "resolved": "https://registry.npmjs.org/table/-/table-5.4.6.tgz",
@@ -13427,6 +13955,11 @@
       "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
       "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c="
     },
+    "ua-parser-js": {
+      "version": "0.7.21",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.21.tgz",
+      "integrity": "sha512-+O8/qh/Qj8CgC6eYBVBykMrNtp5Gebn4dlGD/kKXVkJNDwyrAwSIqwz8CDf+tsAIWVycKcku6gIXJ0qwx/ZXaQ=="
+    },
     "unicode-canonical-property-names-ecmascript": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz",

@@ -14,6 +14,7 @@
     "axios": "^0.19.2",
     "bootstrap": "^4.5.0",
     "http-proxy-middleware": "^1.0.4",
+    "mdbreact": "^4.27.0",
     "react": "^16.13.1",
     "react-app-polyfill": "^1.0.6",
     "react-cookies": "^0.1.1",

@@ -28,6 +28,7 @@ height: 100%;
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>MEALKHU</title>
+   
     <link href="https://fonts.googleapis.com/css?family=Do+Hyeon:400" rel="stylesheet">
     <style>
       #root, .modalClass{font-family: 'Do Hyeon', sans-serif;}

 /*global kakao*/
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, Fragment } from "react";
 import { Input, Button, ButtonGroup } from "reactstrap";
 import { Label, CustomInput, Row, Col, FormGroup } from "reactstrap";
 import appKey from "../config/appKey.json";
@@ -122,7 +122,7 @@ const LandingMap = (props) => {
 
   return (
     <>
-      
+      <hr className="my-2" />
       <Row>
       <Col>
         <span className="font-weight-bold">MEALKHU MAP</span>

@@ -7,7 +7,7 @@ const Loading = (props) => {
             'display':'flex', 'width':'100%', "height":'85%', 'textAlign':'center', 'alignItems':'center'
         }}><span style={{
             'margin': '0 auto'
-        }}><Spinner color="danger" style={{ width: '2rem', height: '2rem', marginRight:'1rem' }}/><h1 style={{'display':'inline'}}>Loading..</h1></span></span>
+}}><Spinner color="danger" style={{ width: '2rem', height: '2rem', marginRight:'1rem' }}/><h1 style={{'display':'inline'}}>{props.value}</h1></span></span>
     );
 }
 

@@ -5,6 +5,9 @@ import * as serviceWorker from './serviceWorker';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import 'react-app-polyfill/ie11';
 
+// import '@fortawesome/fontawesome-free/css/all.min.css'; 
+// import 'bootstrap-css-only/css/bootstrap.min.css'; 
+// import 'mdbreact/dist/css/mdb.css';
 
 ReactDOM.render(
   <React.StrictMode>

@@ -8,7 +8,7 @@ const AboutPage = (props) => {
         <>
             <NavBar/>
             <div style={{'display':'flex', 'width':'100%', "height":'100%', 'textAlign':'center', 'alignItems':'center'}}>
-                <Container style={{}}>
+                <Container>
                     <Jumbotron 
                     style={{'backgroundColor':'#fff'}}
                     >

-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, Fragment } from 'react';
 import NavBar from '../components/NavBar';
 import LandingMap from '../components/LandingMap';
 import { CustomInput } from 'reactstrap';
-import { Container, Row, Col } from "reactstrap";
+import { Container, Row, Col, Button, Jumbotron } from "reactstrap";
 import axios from 'axios';
-
+import Loading from '../components/Loading';
+import MealCard from '../components/MealCard';
 
 const LandingPage = (props) => {
     const [datas, setDatas] = useState([]);
     const [filteredDatas, setFilteredDatas] = useState([]);
+    const [RandomCards, setRandomCards] = useState([]);
     const [isLoading, setIsLoading] = useState(false);
     const [all, setAll] = useState(false);
     const [Kfood, setKfood] = useState(false);
@@ -20,7 +22,7 @@ const LandingPage = (props) => {
     const [fastfood, setFastfood] = useState(false);
     const [cafe, setCafe] = useState(false);
     const [etc, setEtc] = useState(false);
-    
+    const [isRandom, setIsRandom] = useState(0);
    
     useEffect(() => {
         const fetchData = async () => {
@@ -34,8 +36,6 @@ const LandingPage = (props) => {
           fetchData();
     }, []);
 
-    // filtereddatas 처리 + isloading변경
-    
     useEffect(() => {
         setIsLoading(false);
         let result = [];
@@ -82,6 +82,30 @@ const LandingPage = (props) => {
         }
     }, [all]);
 
+    const randomHandler = () => {
+        
+        if(filteredDatas.length === 0) {
+            alert('메뉴를 선택하세요');
+            return ;
+        } 
+        else {
+            console.log(filteredDatas);
+            setIsRandom(1);
+            setTimeout(()=>{
+            let x = getRandomInt(0, filteredDatas.length);
+            let y = getRandomInt(0, filteredDatas.length);
+            setRandomCards([filteredDatas[x], filteredDatas[y]]);    
+            setIsRandom(2);
+        }, 2500);
+        }
+    }
+
+    const getRandomInt = (min, max) => {
+        min = Math.ceil(min);
+        max = Math.floor(max);
+        return Math.floor(Math.random() * (max - min)) + min; //최댓값은 제외, 최솟값은 포함
+      }
+
     return (
         <>
             <NavBar/>
@@ -89,6 +113,30 @@ const LandingPage = (props) => {
                 paddingTop : '1.5rem'
             }}>
             
+            <div style={{'display':'flex', 'width':'100%', "height":'100%'}}>
+                <Container>
+                
+                    <Jumbotron 
+                    style={{
+                        'backgroundColor':'#fff',
+                        'paddingTop': '1.5rem',
+                        'boxShadow': '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'
+                    }}
+                    >  
+                    <Row xs="1" sm="2" md="2"> 
+                        <Col style={{
+                            
+                        }}>
+                        <h3 className="text-center">
+                            <span className="font-weight-bold">랜덤추천 : </span>메뉴를 선택하세요 
+                        </h3>
+                        <span style={{
+                            'paddingLeft' : '0.5rem'
+                        }}>
+                        {/* <Button color="warning">Random!</Button> */}
+                        
+                        </span>
+                        <Container>                        
                         <Row>
                     <Col>
                         <CustomInput type="switch" id="all" label="전체"
@@ -97,7 +145,7 @@ const LandingPage = (props) => {
                         />
                     </Col>
                 </Row>
-                <Row xs="3" sm="3" md="5">
+                <Row xs="3" sm="3" md="4">
                     <Col>
                         <CustomInput type="checkbox" id="Kfood" label="한식" 
                         checked={Kfood}
@@ -153,8 +201,56 @@ const LandingPage = (props) => {
                         onChange={()=>setEtc(!etc)}
                         />
                     </Col>
+                    </Row>
+                    <div style={{
+                            'paddingTop':'1.5rem',
+                            'alignItems':'center'
+                            ,'display':'flex', 'width':'100%', "height":'100%','textAlign':'center'
+                        }}>
+                            <Button onClick={randomHandler} size="lg" style={{
+                                'margin':'0 auto'
+                            }} color="danger">Random!</Button>
+                        </div> 
+                    </Container>
+
                         
+                        </Col>
+                        <Col>
+                        {isRandom === 0 ? ('') : ( (isRandom === 1) ? <span style={{'padding':'1.5rem'}}><Loading value="추첨중.."/></span> :(
+                            <Container>
+                            <Row>
+                                {
+                                    RandomCards.map((data, index)=> (
+                                        <Col>
+                                <MealCard
+                                key = {index}
+                                id = {data.id}
+                                name = {data.name}
+                                address = {data.address}
+                                latitude = {data.latitude}
+                                longitude = {data.longitude}
+                                type = {data.type}
+                                menu = {data.menu}
+                                img = {data.img}
+                                img_source = {data.img_source}
+                                />
+                                </Col>
+                                    ))
+                                }
+
+
+                            </Row>
+</Container>
+                        ) 
+                        
+                        
+                        )}
+                        </Col>
                         </Row>
+                    </Jumbotron>
+                </Container>
+            </div>
+            
             {datas ? <LandingMap
                 datas = {datas}
             /> : 'loading...'}

@@ -3,6 +3,9 @@ import NavBar from '../components/NavBar';
 import MealCard from '../components/MealCard';
 import { CustomInput } from 'reactstrap';
 import { Container, Row, Col } from "reactstrap";
+
+import { Card, CardText, CardBody, CardTitle, } from "reactstrap";
+
 import axios from 'axios';
 import Loading from '../components/Loading';
 
@@ -155,8 +158,9 @@ const MenuPage = (props) => {
                         onChange={()=>setEtc(!etc)}
                         />
                     </Col>
-    
                 </Row>
+
+
             </Container>
 
 
@@ -184,7 +188,7 @@ const MenuPage = (props) => {
                         }
                         </Row>
                 </Container>)
-                : <Loading/>
+                : <Loading value="Loading.."/>
                 }