display the route air condition result

@@ -58,7 +58,7 @@ const getPosition = (lat, lon) => {
       console.log(error.response);
       console.log(error.response);
     });
     });
 };
 };
-/* GET airCondition listing. */
+/* GET route airCondition listing. */
 router.get("/route", async function (req, res, next) {
 router.get("/route", async function (req, res, next) {
   console.log("출발지:", req.query.departure);
   console.log("출발지:", req.query.departure);
   console.log("도착지:", req.query.arrival);
   console.log("도착지:", req.query.arrival);

@@ -11,7 +11,9 @@ import good from "./gradeIcon/smile.png";
 import bad from "./gradeIcon/angry.png";
 import bad from "./gradeIcon/angry.png";
 import veryBad from "./gradeIcon/devil.png";
 import veryBad from "./gradeIcon/devil.png";
 import next from "./gradeIcon/next.png";
 import next from "./gradeIcon/next.png";
-
+import start from "./gradeIcon/start.png";
+import finish from "./gradeIcon/finish.png";
+import loading from "./gradeIcon/loading.gif";
 /* global kakao */
 /* global kakao */
 
 
 export default class Home extends Component {
 export default class Home extends Component {
@@ -403,6 +405,128 @@ export default class Home extends Component {
       );
       );
     }
     }
     let routeAirCondition = null;
     let routeAirCondition = null;
+    let tempRouteAirCondition = [];
+    if (this.state.buttonClicked != null) {
+      routeAirCondition = <img src={loading} width="300px" heigth="300px" />;
+    }
+    if (this.state.routeInformation != null) {
+      for (let i = 0; i < this.state.routeInformation.length - 1; i++) {
+        tempRouteAirCondition.push(this.state.routeInformation[i]);
+      }
+      let pm10ImageArray = new Array();
+      let pm25ImageArray = new Array();
+      for (let i = 0; i < this.state.routeInformation.length; i++) {
+        let pm10Image = null;
+        let pm25Image = null;
+        switch (this.state.routeInformation[i]["airCondition"].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.routeInformation[i]["airCondition"].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;
+        }
+        pm10ImageArray[i] = pm10Image;
+        pm25ImageArray[i] = pm25Image;
+      }
+      routeAirCondition = (
+        <table>
+          <thead>
+            <tr>
+              <th>
+                <br />
+                경로별 미세먼지 정보
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>
+                <img src={start} width="50px" heigth="30px" /> <br />
+                <h6>
+                  {this.state.departureTitle} <br /> 미세먼지 등급
+                  <br />
+                  {pm10ImageArray[this.state.routeInformation.length - 1]}
+                  <br />
+                  미세먼지 지수 :{" "}
+                  {
+                    this.state.routeInformation[
+                      this.state.routeInformation.length - 1
+                    ]["airCondition"].pm10Value
+                  }
+                  <br />
+                </h6>
+              </td>
+              {tempRouteAirCondition.map((listValue, index) => {
+                if (index != tempRouteAirCondition.length - 1) {
+                  return (
+                    <td key={index}>
+                      <img src={next} width="40px" heigth="25px" />
+                      <h6>
+                        {listValue.instruction}
+                        <br />
+                        소요시간 : {listValue.duration}
+                        <br />
+                        미세먼지 등급
+                        <br />
+                        {pm10ImageArray[index]}
+                        <br />
+                        미세먼지 지수 : <br />
+                        {listValue.airCondition.pm10Value}
+                        <br />
+                      </h6>
+                    </td>
+                  );
+                } else {
+                  return (
+                    <td key={index}>
+                      <img src={finish} width="50px" heigth="30px" />
+                      <br />
+                      <h6>
+                        {listValue.instruction}
+                        <br />
+                        소요시간 : {listValue.duration}
+                        <br />
+                        미세먼지 등급
+                        <br />
+                        {pm10ImageArray[index]}
+                        <br />
+                        미세먼지 지수 : {listValue.airCondition.pm10Value}
+                        <br />
+                      </h6>
+                    </td>
+                  );
+                }
+              })}
+            </tr>
+          </tbody>
+        </table>
+      );
+    }
 
 
     return (
     return (
       <section id="home">
       <section id="home">