Merge branch 'feature/kakaomap_setting' into 'develop'

Feature/kakaomap setting - setting the basic layout of frontend - display the kakao map in main page - display the kakao map in main page - add search location box - create the marker to each map - implement InfoWindow - add display infowindow function for each marker See merge request !3

Merge branch 'feature/kakaomap_setting' into 'develop'
Feature/kakaomap setting - setting the basic layout of frontend - display the kakao map in main page - display the kakao map in main page - add search location box - create the marker to each map - implement InfoWindow - add display infowindow function for each marker See merge request !3
권주희
Commit babaa4e7f4b4f3e0d6ec5e218d2cc449752f6bd1 babaa4e7 2 parents 68f89906 aad9a7f2
Showing 6 changed files with 986 additions and 19 deletions
frontend/package-lock.json
frontend/package.json
frontend/public/index.html
frontend/src/App.css
frontend/src/home.css
frontend/src/home.js
--- a/frontend/package-lock.json
View file @babaa4e
+++ b/frontend/package-lock.json
View file @babaa4e
@@ -1274,6 +1274,24 @@
       "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz",
       "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg=="
     },
+    "@emotion/is-prop-valid": {
+      "version": "0.8.8",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
+      "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
+      "requires": {
+        "@emotion/memoize": "0.7.4"
+      }
+    },
+    "@emotion/memoize": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
+      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw=="
+    },
+    "@emotion/unitless": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
+      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
+    },
     "@hapi/address": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
@@ -1487,6 +1505,25 @@
       "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz",
       "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw=="
     },
+    "@popperjs/core": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.4.0.tgz",
+      "integrity": "sha512-NMrDy6EWh9TPdSRiHmHH2ye1v5U0gBD7pRYwSwJvomx7Bm4GG04vu63dYiVzebLOx2obPpJugew06xVP0Nk7hA=="
+    },
+    "@restart/context": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@restart/context/-/context-2.1.4.tgz",
+      "integrity": "sha512-INJYZQJP7g+IoDUh/475NlGiTeMfwTXUEr3tmRneckHIxNolGOW9CTq83S8cxq0CgJwwcMzMJFchxvlwe7Rk8Q=="
+    },
+    "@restart/hooks": {
+      "version": "0.3.25",
+      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.3.25.tgz",
+      "integrity": "sha512-m2v3N5pxTsIiSH74/sb1yW8D9RxkJidGW+5Mfwn/lHb2QzhZNlaU1su7abSyT9EGf0xS/0waLjrf7/XxQHUk7w==",
+      "requires": {
+        "lodash": "^4.17.15",
+        "lodash-es": "^4.17.15"
+      }
+    },
     "@sheerun/mutationobserver-shim": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/@sheerun/mutationobserver-shim/-/mutationobserver-shim-0.3.3.tgz",
@@ -1702,6 +1739,8 @@
     },
     "@testing-library/jest-dom": {
       "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-4.2.4.tgz",
+      "integrity": "sha512-j31Bn0rQo12fhCWOUWy9fl7wtqkp7In/YP2p5ZFyRuiiB9Qs3g+hS4gAmDWONbAHcRmVooNJ5eOHQDCOmUFXHg==",
       "requires": {
         "@babel/runtime": "^7.5.1",
         "chalk": "^2.4.1",
@@ -1726,6 +1765,8 @@
     },
     "@testing-library/react": {
       "version": "9.5.0",
+      "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-9.5.0.tgz",
+      "integrity": "sha512-di1b+D0p+rfeboHO5W7gTVeZDIK5+maEgstrZbWZSSvxDyfDRkkyBE1AJR5Psd6doNldluXlCWqXriUfqu/9Qg==",
       "requires": {
         "@babel/runtime": "^7.8.4",
         "@testing-library/dom": "^6.15.0",
@@ -1733,7 +1774,9 @@
       }
     },
     "@testing-library/user-event": {
-      "version": "7.2.1"
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-7.2.1.tgz",
+      "integrity": "sha512-oZ0Ib5I4Z2pUEcoo95cT1cr6slco9WY7yiPpG+RGNkj8YcYgJnM7pXmYmorNOReh8MIGcKSqXyeGjxnr8YiZbA=="
     },
     "@types/babel__core": {
       "version": "7.1.7",
@@ -1965,6 +2008,11 @@
         }
       }
     },
+    "@types/warning": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz",
+      "integrity": "sha1-DSUBJorY+ZYrdA04fEZU9fjiPlI="
+    },
     "@types/yargs": {
       "version": "13.0.9",
       "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.9.tgz",
@@ -2818,6 +2866,22 @@
       "resolved": "https://registry.npmjs.org/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.6.tgz",
       "integrity": "sha512-1aGDUfL1qOOIoqk9QKGIo2lANk+C7ko/fqH0uIyC71x3PEGz0uVP8ISgfEsFuG+FKmjHTvFK/nNM8dowpmUxLA=="
     },
+    "babel-plugin-styled-components": {
+      "version": "1.10.7",
+      "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.7.tgz",
+      "integrity": "sha512-MBMHGcIA22996n9hZRf/UJLVVgkEOITuR2SvjHLb5dSTUyR4ZRGn+ngITapes36FI3WLxZHfRhkA1ffHxihOrg==",
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.0.0",
+        "@babel/helper-module-imports": "^7.0.0",
+        "babel-plugin-syntax-jsx": "^6.18.0",
+        "lodash": "^4.17.11"
+      }
+    },
+    "babel-plugin-syntax-jsx": {
+      "version": "6.18.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
+      "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY="
+    },
     "babel-plugin-syntax-object-rest-spread": {
       "version": "6.13.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz",
@@ -3130,6 +3194,11 @@
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
     },
+    "bootstrap": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-3.4.1.tgz",
+      "integrity": "sha512-yN5oZVmRCwe5aKwzRj6736nSmKDX7pLYwsXiCj/EYmo16hODaBiT4En5btW/jhBF/seV+XMx3aYwukYC3A49DA=="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -3417,6 +3486,11 @@
       "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
       "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg=="
     },
+    "camelize": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz",
+      "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs="
+    },
     "caniuse-api": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -3585,6 +3659,11 @@
         }
       }
     },
+    "classnames": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
+      "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
+    },
     "clean-css": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz",
@@ -4052,6 +4131,11 @@
         "postcss": "^7.0.5"
       }
     },
+    "css-color-keywords": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+      "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU="
+    },
     "css-color-names": {
       "version": "0.0.4",
       "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
@@ -4135,6 +4219,23 @@
       "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
       "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w=="
     },
+    "css-to-react-native": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-2.3.2.tgz",
+      "integrity": "sha512-VOFaeZA053BqvvvqIA8c9n0+9vFppVBAHCp6JgFTtTMU3Mzi+XnelJ9XC9ul3BqFzZyQ5N+H0SnwsWT2Ebchxw==",
+      "requires": {
+        "camelize": "^1.0.0",
+        "css-color-keywords": "^1.0.0",
+        "postcss-value-parser": "^3.3.0"
+      },
+      "dependencies": {
+        "postcss-value-parser": {
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
+        }
+      }
+    },
     "css-tree": {
       "version": "1.0.0-alpha.37",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
@@ -4326,6 +4427,11 @@
         }
       }
     },
+    "daum-map-api": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/daum-map-api/-/daum-map-api-1.0.2.tgz",
+      "integrity": "sha1-3hbrEB11Ea5dZC/CZsl/lHmJiqQ="
+    },
     "debug": {
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@@ -4585,6 +4691,15 @@
         "utila": "~0.4"
       }
     },
+    "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"
+      }
+    },
     "dom-serializer": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
@@ -7347,6 +7462,11 @@
       "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
       "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo="
     },
+    "is-what": {
+      "version": "3.8.0",
+      "resolved": "https://registry.npmjs.org/is-what/-/is-what-3.8.0.tgz",
+      "integrity": "sha512-UKeBoQfV8bjlM4pmx1FLDHdxslW/1mTksEs8ReVsilPmUv5cORd4+2/wFcviI3cUjrLybxCjzc8DnodAzJ/Wrg=="
+    },
     "is-windows": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz",
@@ -8258,6 +8378,11 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
       "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
     },
+    "lodash-es": {
+      "version": "4.17.15",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.15.tgz",
+      "integrity": "sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ=="
+    },
     "lodash._reinterpolate": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
@@ -8404,6 +8529,11 @@
         "p-is-promise": "^2.0.0"
       }
     },
+    "memoize-one": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.1.1.tgz",
+      "integrity": "sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA=="
+    },
     "memory-fs": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz",
@@ -8442,6 +8572,14 @@
         }
       }
     },
+    "merge-anything": {
+      "version": "2.4.4",
+      "resolved": "https://registry.npmjs.org/merge-anything/-/merge-anything-2.4.4.tgz",
+      "integrity": "sha512-l5XlriUDJKQT12bH+rVhAHjwIuXWdAIecGwsYjv2LJo+dA1AeRTmeQS+3QBpO6lEthBMDi2IUMpLC1yyRvGlwQ==",
+      "requires": {
+        "is-what": "^3.3.1"
+      }
+    },
     "merge-deep": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/merge-deep/-/merge-deep-3.0.2.tgz",
@@ -10624,6 +10762,15 @@
         "react-is": "^16.8.1"
       }
     },
+    "prop-types-extra": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
+      "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==",
+      "requires": {
+        "react-is": "^16.3.2",
+        "warning": "^4.0.0"
+      }
+    },
     "proxy-addr": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.6.tgz",
@@ -10782,6 +10929,8 @@
     },
     "react": {
       "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-16.13.1.tgz",
+      "integrity": "sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==",
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1",
@@ -10801,6 +10950,26 @@
         "whatwg-fetch": "^3.0.0"
       }
     },
+    "react-bootstrap": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-1.0.1.tgz",
+      "integrity": "sha512-xMHwsvDN7sIv26P9wWiosWjITZije2dRCjEJHVfV2KFoSJY+8uv2zttEw0XMB7xviQcW3zuIGLJXuj8vf6lYEg==",
+      "requires": {
+        "@babel/runtime": "^7.4.2",
+        "@restart/context": "^2.1.4",
+        "@restart/hooks": "^0.3.21",
+        "@types/react": "^16.9.23",
+        "classnames": "^2.2.6",
+        "dom-helpers": "^5.1.2",
+        "invariant": "^2.2.4",
+        "prop-types": "^15.7.2",
+        "prop-types-extra": "^1.1.0",
+        "react-overlays": "^3.1.2",
+        "react-transition-group": "^4.0.0",
+        "uncontrollable": "^7.0.0",
+        "warning": "^4.0.3"
+      }
+    },
     "react-dev-utils": {
       "version": "10.2.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-10.2.1.tgz",
@@ -11033,6 +11202,8 @@
     },
     "react-dom": {
       "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.13.1.tgz",
+      "integrity": "sha512-81PIMmVLnCNLO/fFOQxdQkvEq/+Hfpv24XNJfpyZhTRfO0QcmQIF/PgCa1zCOj2w1hrn12MFLyaJ/G0+Mxtfag==",
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1",
@@ -11050,6 +11221,39 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "react-kakao-maps": {
+      "version": "0.0.13",
+      "resolved": "https://registry.npmjs.org/react-kakao-maps/-/react-kakao-maps-0.0.13.tgz",
+      "integrity": "sha512-1ZHGbdvucFpq3rPSee1UB8cY/61QloQeH2Kh1SMSvIoL2kIUIo1lbF8FnwkHo3zrbpqcS4kIFPvvDB5xs27MdA==",
+      "requires": {
+        "@babel/runtime-corejs3": "^7.6.2",
+        "babel-runtime": "^6.26.0",
+        "react": "^16.9.0",
+        "react-dom": "^16.9.0",
+        "scriptjs": "^2.5.9",
+        "styled-components": "^4.3.2"
+      }
+    },
+    "react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
+    "react-overlays": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-3.2.0.tgz",
+      "integrity": "sha512-YTgCmw6l4uBOYylSnc3V8WLX+A0EoGnzDrqkYz0K7MUKbMBZFpaxLXH4EF9eZbspd+syZHQ5XAABI7n/zak1EA==",
+      "requires": {
+        "@babel/runtime": "^7.4.5",
+        "@popperjs/core": "^2.0.0",
+        "@restart/hooks": "^0.3.12",
+        "@types/warning": "^3.0.0",
+        "dom-helpers": "^5.1.0",
+        "prop-types": "^15.7.2",
+        "uncontrollable": "^7.0.0",
+        "warning": "^4.0.3"
+      }
+    },
     "react-router": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz",
@@ -11098,6 +11302,8 @@
     },
     "react-scripts": {
       "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-3.4.1.tgz",
+      "integrity": "sha512-JpTdi/0Sfd31mZA6Ukx+lq5j1JoKItX7qqEK4OiACjVQletM1P38g49d9/D0yTxp9FrSF+xpJFStkGgKEIRjlQ==",
       "requires": {
         "@babel/core": "7.9.0",
         "@svgr/webpack": "4.3.3",
@@ -11175,6 +11381,17 @@
         }
       }
     },
+    "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"
+      }
+    },
     "read-pkg": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz",
@@ -11752,6 +11969,11 @@
         "ajv-keywords": "^3.4.1"
       }
     },
+    "scriptjs": {
+      "version": "2.5.9",
+      "resolved": "https://registry.npmjs.org/scriptjs/-/scriptjs-2.5.9.tgz",
+      "integrity": "sha512-qGVDoreyYiP1pkQnbnFAUIS5AjenNwwQBdl7zeos9etl+hYKWahjRTfzAZZYBv5xNHx7vNKCmaLDQZ6Fr2AEXg=="
+    },
     "select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -12702,6 +12924,36 @@
         }
       }
     },
+    "styled-components": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-4.4.1.tgz",
+      "integrity": "sha512-RNqj14kYzw++6Sr38n7197xG33ipEOktGElty4I70IKzQF1jzaD1U4xQ+Ny/i03UUhHlC5NWEO+d8olRCDji6g==",
+      "requires": {
+        "@babel/helper-module-imports": "^7.0.0",
+        "@babel/traverse": "^7.0.0",
+        "@emotion/is-prop-valid": "^0.8.1",
+        "@emotion/unitless": "^0.7.0",
+        "babel-plugin-styled-components": ">= 1",
+        "css-to-react-native": "^2.2.2",
+        "memoize-one": "^5.0.0",
+        "merge-anything": "^2.2.4",
+        "prop-types": "^15.5.4",
+        "react-is": "^16.6.0",
+        "stylis": "^3.5.0",
+        "stylis-rule-sheet": "^0.0.10",
+        "supports-color": "^5.5.0"
+      },
+      "dependencies": {
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
     "stylehacks": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz",
@@ -12724,6 +12976,16 @@
         }
       }
     },
+    "stylis": {
+      "version": "3.5.4",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-3.5.4.tgz",
+      "integrity": "sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q=="
+    },
+    "stylis-rule-sheet": {
+      "version": "0.0.10",
+      "resolved": "https://registry.npmjs.org/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz",
+      "integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw=="
+    },
     "supports-color": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
@@ -13232,6 +13494,17 @@
       "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
       "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c="
     },
+    "uncontrollable": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.1.1.tgz",
+      "integrity": "sha512-EcPYhot3uWTS3w00R32R2+vS8Vr53tttrvMj/yA1uYRhf8hbTG2GyugGqWDY0qIskxn0uTTojVd6wPYW9ZEf8Q==",
+      "requires": {
+        "@babel/runtime": "^7.6.3",
+        "@types/react": "^16.9.11",
+        "invariant": "^2.2.4",
+        "react-lifecycles-compat": "^3.0.4"
+      }
+    },
     "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",
@@ -13523,6 +13796,14 @@
         "makeerror": "1.0.x"
       }
     },
+    "warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "watchpack": {
       "version": "1.7.2",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.2.tgz",
--- a/frontend/package.json
View file @babaa4e
+++ b/frontend/package.json
View file @babaa4e
@@ -6,8 +6,12 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "bootstrap": "^3.4.1",
+    "daum-map-api": "^1.0.2",
     "react": "^16.13.1",
+    "react-bootstrap": "^1.0.1",
     "react-dom": "^16.13.1",
+    "react-kakao-maps": "0.0.13",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.1"
   },
--- a/frontend/public/index.html
View file @babaa4e
+++ b/frontend/public/index.html
View file @babaa4e
@@ -10,6 +10,16 @@
       content="Web site created using create-react-app"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <script
+      type="text/javascript"
+      src="//dapi.kakao.com/v2/maps/sdk.js?appkey=61abec34d0855ba1d434ea222263d4a5&libraries=services,clusterer,drawing"
+    ></script>
+    <link
+      rel="stylesheet"
+      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
+      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
+      crossorigin="anonymous"
+    />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@@ -24,7 +34,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>HowsTheWeather</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
--- a/frontend/src/App.css
View file @babaa4e
+++ b/frontend/src/App.css
View file @babaa4e
@@ -15,13 +15,14 @@
 .App-header {
   background-color: #282c34;
-  min-height: 100vh;
+  min-height: 13vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   font-size: calc(10px + 2vmin);
   color: white;
+  font-weight: bold;
 }
 .App-link {
--- a/frontend/src/home.css 0 → 100644
View file @babaa4e
+++ b/frontend/src/home.css 0 → 100644
View file @babaa4e
+.Home {
+  text-align: center;
+}
+
+.Home-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .Home-logo {
+    animation: Home-logo-spin infinite 20s linear;
+  }
+}
+
+.Home-header {
+  background-color: #282c34;
+  min-height: 13vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+  font-weight: bold;
+}
+
+.Home-link {
+  color: #61dafb;
+}
+
+@keyframes Home-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.strong {
+  font-size: calc(10px + 1vmin);
+  font-weight: bold;
+}
+.map_wrap,
+.map_wrap * {
+  margin: 0;
+  padding: 0;
+  font-family: "Malgun Gothic", dotum, "돋움", sans-serif;
+  font-size: 12px;
+}
+.map_wrap a,
+.map_wrap a:hover,
+.map_wrap a:active {
+  color: #000;
+  text-decoration: none;
+}
+.map_wrap {
+  position: relative;
+  width: 100%;
+  height: 500px;
+}
+
+#menu_wrap {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 250px;
+  margin: 10px 0 30px 10px;
+  padding: 5px;
+  overflow-y: auto;
+  background: rgba(53, 53, 53, 0.8);
+  z-index: 1;
+  font-size: 12px;
+  border-radius: 10px;
+}
+.bg_white {
+  background: #fff;
+}
+x #menu_wrap hr {
+  display: block;
+  height: 1px;
+  border: 0;
+  border-top: 2px solid #5f5f5f;
+  margin: 3px 0;
+}
+#menu_wrap .option {
+  text-align: center;
+  color: #ffffff;
+  font-weight: bold;
+}
+#menu_wrap .option p {
+  margin: 10px 0;
+}
+#menu_wrap .option button {
+  margin-left: 5px;
+}
+
+#placesList li {
+  list-style: none;
+}
+#placesList .item {
+  position: relative;
+  border-bottom: 1px solid #888;
+  overflow: hidden;
+  cursor: pointer;
+  min-height: 65px;
+}
+#placesList .item span {
+  display: block;
+  margin-top: 4px;
+}
+#placesList .item h5,
+#placesList .item .info {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+#placesList .item .info {
+  padding: 10px 0 10px 55px;
+  color: #ffffff;
+}
+#placesList .info .gray {
+  color: #eaeaea;
+}
+#placesList .info .jibun {
+  padding-left: 26px;
+  background: url(http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/places_jibun.png)
+    no-repeat;
+}
+#placesList .info .tel {
+  color: #ffbb00;
+  font-weight: bold;
+}
+#placesList .item .markerbg {
+  float: left;
+  position: absolute;
+  width: 36px;
+  height: 37px;
+  margin: 10px 0 0 10px;
+  background: url(http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_number_blue.png)
+    no-repeat;
+}
+#placesList .item .marker_1 {
+  background-position: 0 -10px;
+}
+#placesList .item .marker_2 {
+  background-position: 0 -56px;
+}
+#placesList .item .marker_3 {
+  background-position: 0 -102px;
+}
+#placesList .item .marker_4 {
+  background-position: 0 -148px;
+}
+#placesList .item .marker_5 {
+  background-position: 0 -194px;
+}
+#placesList .item .marker_6 {
+  background-position: 0 -240px;
+}
+#placesList .item .marker_7 {
+  background-position: 0 -286px;
+}
+#placesList .item .marker_8 {
+  background-position: 0 -332px;
+}
+#placesList .item .marker_9 {
+  background-position: 0 -378px;
+}
+#placesList .item .marker_10 {
+  background-position: 0 -423px;
+}
+#placesList .item .marker_11 {
+  background-position: 0 -470px;
+}
+#placesList .item .marker_12 {
+  background-position: 0 -516px;
+}
+#placesList .item .marker_13 {
+  background-position: 0 -562px;
+}
+#placesList .item .marker_14 {
+  background-position: 0 -608px;
+}
+#placesList .item .marker_15 {
+  background-position: 0 -654px;
+}
+#pagination {
+  margin: 10px auto;
+  text-align: center;
+}
+#pagination a {
+  display: inline-block;
+  margin-right: 10px;
+}
+#pagination .on {
+  font-weight: bold;
+  cursor: default;
+  color: #777;
+}
+
+.wraps {
+  position: absolute;
+  left: 0;
+  bottom: 40px;
+  width: 288px;
+  height: 132px;
+  margin-left: -144px;
+  text-align: left;
+  overflow: hidden;
+  font-size: 12px;
+  font-family: "Malgun Gothic", dotum, "돋움", sans-serif;
+  line-height: 1.5;
+}
+.wraps * {
+  padding: 0;
+  margin: 0;
+}
+.wraps .infos {
+  width: 286px;
+  height: 120px;
+  border-radius: 5px;
+  border-bottom: 2px solid #ccc;
+  border-right: 1px solid #ccc;
+  overflow: hidden;
+  background: #fff;
+}
+.wraps .infos:nth-child(1) {
+  border: 0;
+  box-shadow: 0px 1px 2px #888;
+}
+.infos .title {
+  padding: 5px 0 0 10px;
+  height: 30px;
+  background: #eee;
+  border-bottom: 1px solid #ddd;
+  font-size: 18px;
+  font-weight: bold;
+}
+.infos .close {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  color: #888;
+  width: 17px;
+  height: 17px;
+  background: url("http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/overlay_close.png");
+}
+.infos .close:hover {
+  cursor: pointer;
+}
+.infos .body {
+  position: relative;
+  overflow: hidden;
+}
+.infos .desc {
+  position: relative;
+  margin: 13px 0 0 90px;
+  height: 75px;
+}
+.desc .ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.desc .jibun {
+  font-size: 11px;
+  color: #888;
+  margin-top: -2px;
+}
+.infos .img {
+  position: absolute;
+  top: 6px;
+  left: 5px;
+  width: 73px;
+  height: 71px;
+  border: 1px solid #ddd;
+  color: #888;
+  overflow: hidden;
+}
+.infos:after {
+  content: "";
+  position: absolute;
+  margin-left: -12px;
+  left: 50%;
+  bottom: 0;
+  width: 22px;
+  height: 12px;
+  background: url("http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/vertex_white.png");
+}
+.infos .link {
+  color: #5085bb;
+}
+
+#footer {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 100px;
+  background: #ccc;
+}
+
+.left-box {
+  float: left;
+  width: 20%;
+}
+.left-box h5 {
+  font-size: 1rem;
+  font-style: italic;
+  padding-left: 10px;
+}
+.right-box {
+  float: right;
+  width: 80%;
+}
+.right-box h5 {
+  font-size: 1rem;
+  font-style: italic;
+  padding-left: 10px;
+}
+#middle {
+  text-align: center;
+}
+.info-button {
+  border-radius: 4px;
+  background-color: #4641d9;
+  width: 100px;
+  color: white;
+}
--- a/frontend/src/home.js
View file @babaa4e
+++ b/frontend/src/home.js
View file @babaa4e
 import React, { Component } from "react";
 import logo from "./logo.svg";
 import "./App.css";
+import Button from "react-bootstrap/Button";
+import "./home.css";
+import { Map, Marker, MarkerClusterer, Polyline } from "react-kakao-maps";
+import "bootstrap/dist/css/bootstrap.min.css";
+
+/* global kakao */
+
 export default class Home extends Component {
   constructor(props) {
     super(props);
-    this.state = {};
+    this.state = {
+      map: null,
+      markers: [],
+      markers: [],
+      curMarker: new kakao.maps.Marker({
+        position: new kakao.maps.LatLng(37.503716, 127.044844),
+      }),
+      placeSearch: new kakao.maps.services.Places(),
+      infoWindow: new kakao.maps.CustomOverlay({}),
+      region: "은평구청",
+
+      // curAirCondition: null,
+      // routeInformation: null,
+    };
+    this.removeAllChildNods = this.removeAllChildNods.bind(this);
+    this.displayInfowindow = this.displayInfowindow.bind(this);
+  }
+
+  searchPlaces() {
+    var keyword = document.getElementById("keyword").value;
+
+    if (!keyword.replace(/^\s+|\s+$/g, "")) {
+      alert("키워드를 입력해주세요!");
+      return false;
+    }
+    // 장소검색 객체를 통해 키워드로 장소검색을 요청합니다
+    this.state.placeSearch.keywordSearch(
+      keyword,
+      this.placesSearchCB.bind(this)
+    );
+  }
+
+  // 장소검색이 완료됐을 때 호출되는 콜백함수 입니다
+  placesSearchCB(data, status, pagination) {
+    if (status === kakao.maps.services.Status.OK) {
+      // 정상적으로 검색이 완료됐으면
+      // 검색 목록과 마커를 표출합니다
+      this.displayPlaces(data);
+
+      // 페이지 번호를 표출합니다
+      this.displayPagination(pagination);
+    } else if (status === kakao.maps.services.Status.ZERO_RESULT) {
+      alert("검색 결과가 존재하지 않습니다.");
+      return;
+    } else if (status === kakao.maps.services.Status.ERROR) {
+      alert("검색 결과 중 오류가 발생했습니다.");
+      return;
+    }
+  }
+
+  displayPlaces(places) {
+    var listEl = document.getElementById("placesList"),
+      menuEl = document.getElementById("menu_wrap"),
+      fragment = document.createDocumentFragment(),
+      bounds = new kakao.maps.LatLngBounds(),
+      listStr = "";
+
+    // 검색 결과 목록에 추가된 항목들을 제거합니다
+    // 페이지별로 보여주기 때문에 추가한 것 같음.
+    this.removeAllChildNods(listEl);
+
+    // 지도에 표시되고 있는 마커를 제거합니다
+    this.removeMarker();
+
+    for (var i = 0; i < places.length; i++) {
+      // 마커를 생성하고 지도에 표시합니다
+      var placePosition = new kakao.maps.LatLng(places[i].y, places[i].x),
+        marker = this.addMarker(placePosition, i),
+        itemEl = this.getListItem(i, places[i]); // 검색 결과 항목 Element를 생성합니다
+
+      // 검색된 장소 위치를 기준으로 지도 범위를 재설정하기위해
+      // LatLngBounds 객체에 좌표를 추가합니다
+      bounds.extend(placePosition);
+
+      // 마커와 검색결과 항목에 mouseover 했을때
+      // 해당 장소에 인포윈도우에 장소명을 표시합니다
+      // mouseout 했을 때는 인포윈도우를 닫습니다
+      ((marker, title) => {
+        kakao.maps.event.addListener(marker, "click", () => {
+          this.displayInfowindow(marker, title);
+        });
+        kakao.maps.event.addListener(marker, "mouseover", () => {
+          this.displayInfowindow(marker, title);
+        });
+
+        itemEl.onmouseover = () => {
+          this.displayInfowindow(marker, title);
+        };
+      })(marker, places[i].place_name);
+      // 함수를 조건문처럼 사용하여 해당 함수가 true일때 marker,places[i].place_name함수가 불리워짐.
+
+      fragment.appendChild(itemEl);
+    }
+
+    // 검색결과 항목들을 검색결과 목록 Elemnet에 추가합니다
+    listEl.appendChild(fragment);
+    menuEl.scrollTop = 0;
+
+    // 검색된 장소 위치를 기준으로 지도 범위를 재설정합니다
+    this.state.map.setBounds(bounds);
+  }
+  // 커스텀 오버레이를 닫기 위해 호출되는 함수입니다
+  closeOverlay() {
+    this.state.infoWindow.setMap(null);
+  }
+
+  getListItem(index, places) {
+    var el = document.createElement("li"),
+      itemStr =
+        '<span class="markerbg marker_' +
+        (index + 1) +
+        '"></span>' +
+        '<div class="info">' +
+        "   <h5>" +
+        places.place_name +
+        "</h5>";
+
+    if (places.road_address_name) {
+      itemStr +=
+        "    <span>" +
+        places.road_address_name +
+        "</span>" +
+        '   <span class="jibun gray">' +
+        places.address_name +
+        "</span>";
+    } else {
+      itemStr += "    <span>" + places.address_name + "</span>";
+    }
+
+    itemStr += '  <span class="tel">' + places.phone + "</span>" + "</div>";
+
+    el.innerHTML = itemStr;
+    el.className = "item";
+
+    return el;
+  }
+
+  addMarker(position, idx, title) {
+    var imageSrc =
+        "http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_number_blue.png", // 마커 이미지 url, 스프라이트 이미지를 씁니다
+      imageSize = new kakao.maps.Size(36, 37), // 마커 이미지의 크기
+      imgOptions = {
+        spriteSize: new kakao.maps.Size(36, 691), // 스프라이트 이미지의 크기
+        spriteOrigin: new kakao.maps.Point(0, idx * 46 + 10), // 스프라이트 이미지 중 사용할 영역의 좌상단 좌표
+        offset: new kakao.maps.Point(13, 37), // 마커 좌표에 일치시킬 이미지 내에서의 좌표
+      },
+      markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize, imgOptions),
+      marker = new kakao.maps.Marker({
+        position: position, // 마커의 위치
+        image: markerImage,
+      });
+
+    marker.setMap(this.state.map); // 지도 위에 마커를 표출합니다
+    this.setState({ curMarker: marker });
+    this.state.markers.push(marker); // 배열에 생성된 마커를 추가합니다
+
+    return marker;
+  }
+
+  // 지도 위에 표시되고 있는 마커를 모두 제거합니다
+  removeMarker() {
+    for (var i = 0; i < this.state.markers.length; i++) {
+      this.state.markers[i].setMap(null);
+    }
+    this.setState({
+      markers: [],
+    });
+  }
+
+  // 검색결과 목록 하단에 페이지번호를 표시는 함수입니다
+  displayPagination(pagination) {
+    var paginationEl = document.getElementById("pagination"),
+      fragment = document.createDocumentFragment(),
+      i;
+
+    // 기존에 추가된 페이지번호를 삭제합니다
+    while (paginationEl.hasChildNodes()) {
+      paginationEl.removeChild(paginationEl.lastChild);
+    }
+
+    for (i = 1; i <= pagination.last; i++) {
+      var el = document.createElement("a");
+      el.href = "#";
+      el.innerHTML = i;
+
+      if (i === pagination.current) {
+        el.className = "on";
+      } else {
+        el.onclick = (function (i) {
+          return function () {
+            pagination.gotoPage(i);
+          };
+        })(i);
+      }
+
+      fragment.appendChild(el);
+    }
+    paginationEl.appendChild(fragment);
+  }
+
+  removeAllChildNods(el) {
+    while (el.hasChildNodes()) {
+      el.removeChild(el.lastChild);
+    }
+  }
+
+  // 검색결과 목록 또는 마커를 클릭했을 때 호출되는 함수입니다
+  // 인포윈도우에 장소명을 표시합니다
+  displayInfowindow(marker, title) {
+    console.log(marker);
+
+    let content = document.createElement("div");
+    content.className = "wraps";
+
+    let info = document.createElement("div");
+    info.className = "infos";
+
+    let titles = document.createElement("div");
+    titles.className = "title";
+    titles.innerHTML = title;
+
+    let close = document.createElement("div");
+    close.className = "close";
+    close.onclick = () => {
+      this.state.infoWindow.setMap(null);
+    };
+
+    let body = document.createElement("div");
+    body.className = "body";
+    let desc = document.createElement("div");
+    let list = document.createElement("list");
+    let second = document.createElement("LI");
+    let br = document.createElement("div");
+    br.innerHTML += "<br>";
+    let second_ = document.createElement("LI");
+
+    let getMise = document.createElement("Button");
+    getMise.innerHTML = "미세먼지 정보";
+    getMise.className = "info-button";
+    getMise.onclick = () => {
+      let position = marker.getPosition();
+      console.log(marker.getPosition());
+      console.log(position["Ga"]);
+    };
+    let setDepart = document.createElement("Button");
+    setDepart.innerHTML = "출발지로 설정하기";
+    setDepart.onclick = () => {
+      this.setState({
+        departure: marker.getPosition(),
+        departureTitle: title,
+      });
+    };
+    setDepart.className = "info-button";
+    let setArrive = document.createElement("Button");
+    setArrive.innerHTML = "도착지로 설정하기";
+    setArrive.onclick = () => {
+      this.setState({
+        arrival: marker.getPosition(),
+        arrivalTitle: title,
+      });
+    };
+    setArrive.className = "info-button";
+    second.appendChild(getMise);
+    second.appendChild(br);
+    second_.appendChild(setDepart);
+    second_.appendChild(setArrive);
+
+    list.appendChild(second);
+    list.appendChild(second_);
+    desc.appendChild(list);
+    body.appendChild(desc);
+    titles.appendChild(close);
+    info.appendChild(titles);
+    info.appendChild(body);
+    content.appendChild(info);
+
+    this.state.infoWindow.setContent(content);
+    this.state.infoWindow.setPosition(marker.getPosition());
+    this.state.infoWindow.setMap(this.state.map);
+  }
+
+  componentDidMount() {
+    // 컴포넌트가 만들어지고, render 함수가 호출된 이후에 호출되는 메소
+    // AJAX나 타이머를 생성하는 코드를 작성하는 파트이다.
+    let el = document.getElementById("map");
+    this.setState({
+      map: new kakao.maps.Map(el, {
+        //map option 설정
+        center: new kakao.maps.LatLng(37.503716, 127.044844),
+        level: 3,
+      }),
+    });
+    this.searchPlaces();
+    // marker.setMap(map);
   }
   render() {
+    let currentAirCondition = null;
+    let routeAirCondition = null;
+
     return (
-      <div className="App">
+      <section id="home">
-        <header className="App-header">
+        <div className="cover">
-          <img src={logo} className="App-logo" alt="logo" />
+          <div className="Home-header">How's the Weather?!</div>
-          <p>
+        </div>
-            Edit <code>src/App.js</code> and save to reload.
+        <div className="map_wrap">
-          </p>
+          <div
-          <a
+            id="map"
-            className="App-link"
+            style={{
-            href="https://reactjs.org"
+              width: "1000px",
-            target="_blank"
+              height: "600px",
-            rel="noopener noreferrer"
+              align: "middle",
-          >
+            }}
-            Learn React
+          ></div>
-          </a>
+          <div id="menu_wrap" className="bg_white">
-        </header>
+            <div className="option">
+              지역 검색 :{" "}
+              <input
+                type="text"
+                value={this.state.region}
+                id="keyword"
+                size="15"
+                onChange={(e) => this.setState({ region: e.target.value })}
+              />
+              <Button variant="light" type="submit" onClick={this.searchPlaces}>
+                검색하기
+              </Button>
+            </div>
+            <ul id="placesList"></ul>
+            <div id="pagination"></div>
+          </div>
+          <ul id="placesList"></ul>
+          <div id="pagination"></div>
+        </div>
+        <div id="footer">
+          <div className="left-box">
+            <h5> 현재위치 : {this.state.region} </h5>
+            <br />
+            <div id="middle">{currentAirCondition}</div>
+          </div>
+          <div className="right-box">
+            <h5>
+              출발지 : {this.state.departureTitle} <br />
+              도착지 : {this.state.arrivalTitle} <br />
+              <Button variant="secondary" onClick={this.getRouteAirCondition}>
+                {" "}
+                경로별 미세먼지 정보 알아보기{" "}
+              </Button>{" "}
+              <br /> <br />
+            </h5>
+            <div id="middle">{routeAirCondition}</div>
+          </div>
         </div>
+      </section>
     );
   }
 }