Merge branch 'feature/getCurAirInfo' into 'develop'

Feature/get cur air info

- get Current Location's Air Information Using API
   - get Current Location's Air Information Using API
   - install axios
   - allow the CORS error to Backend app
- display the result of current air information
   - display the result of current air information 
   - add icon

See merge request !4

 var createError = require("http-errors");
 var express = require("express");
+var cors = require("cors");
 var path = require("path");
 var cookieParser = require("cookie-parser");
 var logger = require("morgan");
@@ -9,6 +10,7 @@ var usersRouter = require("./routes/users");
 var airConditionRouter = require("./routes/airCondition");
 
 var app = express();
+app.use(cors());
 
 // view engine setup
 app.set("views", path.join(__dirname, "views"));

@@ -4,16 +4,16 @@
  * Module dependencies.
  */
 
-var app = require('../app');
-var debug = require('debug')('backend:server');
-var http = require('http');
+var app = require("../app");
+var debug = require("debug")("backend:server");
+var http = require("http");
 
 /**
  * Get port from environment and store in Express.
  */
 
-var port = normalizePort(process.env.PORT || '3000');
-app.set('port', port);
+var port = normalizePort(process.env.PORT || "3001");
+app.set("port", port);
 
 /**
  * Create HTTP server.
@@ -26,8 +26,8 @@ var server = http.createServer(app);
  */
 
 server.listen(port);
-server.on('error', onError);
-server.on('listening', onListening);
+server.on("error", onError);
+server.on("listening", onListening);
 
 /**
  * Normalize a port into a number, string, or false.
@@ -54,22 +54,20 @@ function normalizePort(val) {
  */
 
 function onError(error) {
-  if (error.syscall !== 'listen') {
+  if (error.syscall !== "listen") {
     throw error;
   }
 
-  var bind = typeof port === 'string'
-    ? 'Pipe ' + port
-    : 'Port ' + port;
+  var bind = typeof port === "string" ? "Pipe " + port : "Port " + port;
 
   // handle specific listen errors with friendly messages
   switch (error.code) {
-    case 'EACCES':
-      console.error(bind + ' requires elevated privileges');
+    case "EACCES":
+      console.error(bind + " requires elevated privileges");
       process.exit(1);
       break;
-    case 'EADDRINUSE':
-      console.error(bind + ' is already in use');
+    case "EADDRINUSE":
+      console.error(bind + " is already in use");
       process.exit(1);
       break;
     default:
@@ -83,8 +81,6 @@ function onError(error) {
 
 function onListening() {
   var addr = server.address();
-  var bind = typeof addr === 'string'
-    ? 'pipe ' + addr
-    : 'port ' + addr.port;
-  debug('Listening on ' + bind);
+  var bind = typeof addr === "string" ? "pipe " + addr : "port " + addr.port;
+  debug("Listening on " + bind);
 }

@@ -228,6 +228,15 @@
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.11.tgz",
       "integrity": "sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg=="
     },
+    "cors": {
+      "version": "2.8.5",
+      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
+      "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
+      "requires": {
+        "object-assign": "^4",
+        "vary": "^1"
+      }
+    },
     "debug": {
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",

@@ -8,6 +8,7 @@
   "dependencies": {
     "axios": "^0.19.2",
     "cookie-parser": "~1.4.3",
+    "cors": "^2.8.5",
     "debug": "~2.6.9",
     "express": "~4.16.0",
     "http-errors": "~1.6.2",

@@ -7,7 +7,7 @@ const googleMapKey = require("./secrets.json").googleAPIKey;
 
 axios.create({
   // TODO : 웹을 AWS에 올릴때, 해당 baseURL이 달라져야할 수 있음
-  baseURL: "http://localhost:3000",
+  baseURL: "http://localhost:3001",
   responseType: "json",
 });
 

@@ -2636,6 +2636,37 @@
       "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.9.1.tgz",
       "integrity": "sha512-wMHVg2EOHaMRxbzgFJ9gtjOOCrI80OHLG14rxi28XwOW8ux6IiEbRCGGGqCtdAIg4FQCbW20k9RsT4y3gJlFug=="
     },
+    "axios": {
+      "version": "0.19.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz",
+      "integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==",
+      "requires": {
+        "follow-redirects": "1.5.10"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
+          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "follow-redirects": {
+          "version": "1.5.10",
+          "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
+          "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
+          "requires": {
+            "debug": "=3.1.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+        }
+      }
+    },
     "axobject-query": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.1.2.tgz",

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "axios": "^0.19.2",
     "bootstrap": "^3.4.1",
     "daum-map-api": "^1.0.2",
     "react": "^16.13.1",

+import axios from "axios";
+
+export default axios.create({
+  baseURL: "http://localhost:3001",
+  responseType: "json",
+});

@@ -5,6 +5,12 @@ 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";
+import API from "./API";
+import veryGood from "./gradeIcon/cool.png";
+import good from "./gradeIcon/smile.png";
+import bad from "./gradeIcon/angry.png";
+import veryBad from "./gradeIcon/devil.png";
+import next from "./gradeIcon/next.png";
 
 /* global kakao */
 
@@ -21,6 +27,7 @@ export default class Home extends Component {
       placeSearch: new kakao.maps.services.Places(),
       infoWindow: new kakao.maps.CustomOverlay({}),
       region: "은평구청",
+      curAirCondition: null,
 
       // curAirCondition: null,
       // routeInformation: null,
@@ -254,6 +261,25 @@ export default class Home extends Component {
       let position = marker.getPosition();
       console.log(marker.getPosition());
       console.log(position["Ga"]);
+      API.get("/airCondition", {
+        params: {
+          latitude: position["Ha"],
+          longitude: position["Ga"],
+        },
+      })
+        .then((response) => {
+          console.log("Success");
+          console.log(response.data);
+          this.setState({
+            curAirCondition: response.data,
+          });
+        })
+        .catch(function (error) {
+          console.log(error);
+        })
+        .finally(function () {
+          // always executed
+        });
     };
     let setDepart = document.createElement("Button");
     setDepart.innerHTML = "출발지로 설정하기";
@@ -309,6 +335,52 @@ export default class Home extends Component {
 
   render() {
     let currentAirCondition = null;
+    if (this.state.curAirCondition != null) {
+      let pm10Image = null;
+      let pm25Image = null;
+      switch (this.state.curAirCondition.pm10Grade) {
+        case "1":
+          pm10Image = <img src={veryGood} width="50px" heigth="100px" />;
+          break;
+        case "2":
+          pm10Image = <img src={good} width="50px" heigth="100px" />;
+          break;
+        case "3":
+          pm10Image = <img src={bad} width="50px" heigth="100px" />;
+          break;
+        case "4":
+          pm10Image = <img src={veryBad} width="50px" heigth="100px" />;
+          break;
+        default:
+          pm10Image = null;
+      }
+      switch (this.state.curAirCondition.pm25Grade) {
+        case "1":
+          pm25Image = <img src={veryGood} width="50px" heigth="100px" />;
+          break;
+        case "2":
+          pm25Image = <img src={good} width="50px" heigth="100px" />;
+          break;
+        case "3":
+          pm25Image = <img src={bad} width="50px" heigth="100px" />;
+          break;
+        case "4":
+          pm25Image = <img src={veryBad} width="50px" heigth="100px" />;
+          break;
+        default:
+          pm25Image = null;
+      }
+      currentAirCondition = (
+        <h5>
+          <br />
+          <br />
+          <br /> 미세먼지 등급 <br /> {pm10Image} <br />
+          미세먼지 지수 : {this.state.curAirCondition.pm10Value} <br />
+          초미세먼지 등급 <br /> {pm25Image} <br />
+          초미세먼지 지수 : {this.state.curAirCondition.pm25Value} <br />{" "}
+        </h5>
+      );
+    }
     let routeAirCondition = null;
 
     return (