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 987 additions and 20 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">
-         <header className="App-header">
-           <img src={logo} className="App-logo" alt="logo" />
-           <p>
-             Edit <code>src/App.js</code> and save to reload.
-           </p>
-           <a
-             className="App-link"
-             href="https://reactjs.org"
-             target="_blank"
-             rel="noopener noreferrer"
-           >
-             Learn React
-           </a>
-         </header>
-       </div>
+       <section id="home">
+         <div className="cover">
+           <div className="Home-header">How's the Weather?!</div>
+         </div>
+         <div className="map_wrap">
+           <div
+             id="map"
+             style={{
+               width: "1000px",
+               height: "600px",
+               align: "middle",
+             }}
+           ></div>
+           <div id="menu_wrap" className="bg_white">
+             <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>
     );
   }
 }