display the result of current air information

- display the result of current air information
- add icon

@@ -6,6 +6,12 @@ import "./home.css";
 import { Map, Marker, MarkerClusterer, Polyline } from "react-kakao-maps";
 import { Map, Marker, MarkerClusterer, Polyline } from "react-kakao-maps";
 import "bootstrap/dist/css/bootstrap.min.css";
 import "bootstrap/dist/css/bootstrap.min.css";
 import API from "./API";
 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 */
 /* global kakao */
 
 
 export default class Home extends Component {
 export default class Home extends Component {
@@ -21,6 +27,7 @@ export default class Home extends Component {
       placeSearch: new kakao.maps.services.Places(),
       placeSearch: new kakao.maps.services.Places(),
       infoWindow: new kakao.maps.CustomOverlay({}),
       infoWindow: new kakao.maps.CustomOverlay({}),
       region: "은평구청",
       region: "은평구청",
+      curAirCondition: null,
 
 
       // curAirCondition: null,
       // curAirCondition: null,
       // routeInformation: null,
       // routeInformation: null,
@@ -328,6 +335,52 @@ export default class Home extends Component {
 
 
   render() {
   render() {
     let currentAirCondition = null;
     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;
     let routeAirCondition = null;
 
 
     return (
     return (