Update : Chart 시간 표시 수정. 예측 온도 전달.

client/src/components/ChartTabs.js

@@ -56,14 +56,13 @@ function ChartTabs() {
             let date = new Date(
               new Date(userWeather[i].collected_at).getTime()
             );
+            let hour = date.getHours();
+            let minute = date.getMinutes();
+            let f_date = `${hour < 10 ? `0${hour}` : hour}:${
+              minute < 10 ? `0${minute}` : minute
+            }`;
 
-            tempLabelArray.push(
-              `${date.getHours()}:${
-                date.getMinutes() < 10
-                  ? `0${date.getMinutes()}`
-                  : date.getMinutes()
-              }`
-            );
+            tempLabelArray.push(f_date);
             labelArray.push(`${date.getHours()}:${date.getMinutes()}`);
           }
           for (let j = 0; j < userWeatherPredict.length; j++) {
@@ -71,15 +70,18 @@ function ChartTabs() {
             let date = new Date(
               new Date(userWeatherPredict[j].collected_at).getTime()
             );
-            tempLabelArray.push(
-              `${date.getHours()}:${
-                date.getMinutes() < 10
-                  ? `0${date.getMinutes()}`
-                  : date.getMinutes()
-              }`
-            );
+            let hour = date.getHours();
+            let minute = date.getMinutes();
+            let f_date = `${hour < 10 ? `0${hour}` : hour}:${
+              minute < 10 ? `0${minute}` : minute
+            }`;
+            tempLabelArray.push(f_date);
           }
 
+          console.log(tempLabelArray);
+          console.log(userWeather);
+          console.log(userWeatherPredict);
+
           setTemp(tempArray);
           setHumi(humiArray);
           setPress(pressArray);
@@ -107,23 +109,18 @@ function ChartTabs() {
           windspeedArray.push(outWeather[i].wind_speed);
 
           let date = new Date(new Date(outWeather[i].collected_at).getTime());
-
-          tempLabelArray.push(
-            `${date.getHours()}:${
-              date.getMinutes() < 10
-                ? `0${date.getMinutes()}`
-                : date.getMinutes()
-            }`
-          );
-          labelArray.push(
-            `${date.getHours()}:${
-              date.getMinutes() < 10
-                ? `0${date.getMinutes()}`
-                : date.getMinutes()
-            }`
-          );
+          let hour = date.getHours();
+          let minute = date.getMinutes();
+          let f_date = `${hour < 10 ? `0${hour}` : hour}:${
+            minute < 10 ? `0${minute}` : minute
+          }`;
+
+          tempLabelArray.push(f_date);
+          labelArray.push(f_date);
         }
 
+        console.log(tempLabelArray);
+
         setTemp(tempArray);
         setHumi(humiArray);
         setPress(pressArray);

client/src/components/LocCodeChange.js

-import React, { useEffect, useState } from 'react'
-import '../App.css'
-import { Form, Button, Row, Col, Card } from 'react-bootstrap';
-import axios from 'axios';
-import Swal from 'sweetalert2'
-import { callUserInfo } from '../utils/CheckDB';
-import { routesClient } from '../routesClient';
-
+import React, { useEffect, useState } from "react";
+import "../App.css";
+import { Form, Button, Row, Col, Card } from "react-bootstrap";
+import axios from "axios";
+import Swal from "sweetalert2";
+import { callUserInfo } from "../utils/CheckDB";
+import { routesClient } from "../routesClient";
 
 function LocCodeChange() {
-
   const cardstyled = {
-        margin: 'auto',
-        padding: '1em',
-        display: 'flex',
-        justifyContent: 'center',
-        width: '100%',
-        borderWidth: '3px',
-        borderRadius: '20px',
-        borderColor: 'rgb(110, 189, 142)',
-        color: '#04AB70'
-    }
+    margin: "auto",
+    padding: "1em",
+    display: "flex",
+    justifyContent: "center",
+    width: "100%",
+    borderWidth: "3px",
+    borderRadius: "20px",
+    borderColor: "rgb(110, 189, 142)",
+    color: "#04AB70",
+  };
 
   const inboxstyled = {
-        display: 'flex',
-        flexDirection: 'column',
-        maxWidth: '90%',
-        justifyContent: 'center',
-        margin: 'auto',
-        padding: '0.5em',
-        color: 'black'
-    }
+    display: "flex",
+    flexDirection: "column",
+    maxWidth: "90%",
+    justifyContent: "center",
+    margin: "auto",
+    padding: "0.5em",
+    color: "black",
+  };
 
   const btnstyled2 = {
-        background: 'white',
-        width: '50%',
-        borderWidth: '2px',
-        color: 'rgb(110, 189, 142)',
-        borderColor: 'rgba(195, 195, 195, 0.753)',
-    }
-
-    const [does, setDoes] = useState([]) // DOE
-    const [sggs, setSggs] = useState([]) // SGG
-    const [emds, setEmds] = useState([]) // EMD
-    const [sggsArray, setSggsArray] = useState([]) // DOE 와 SGG 내의 code_doe 같을 때 => sgg 값
-    const [emdsArray, setEmdsArray] = useState([]) // SGG 과 EMD 내의 code_sgg && DOE 와 EMD 내의 code_doe => emd 값
-
-    const doeSelect = document.getElementById('select-doe')
-    const sggSelect = document.getElementById('select-sgg')
-    const emdSelect = document.getElementById('select-emd')
+    background: "white",
+    width: "50%",
+    borderWidth: "2px",
+    color: "rgb(110, 189, 142)",
+    borderColor: "rgba(195, 195, 195, 0.753)",
+  };
+
+  const [does, setDoes] = useState([]); // DOE
+  const [sggs, setSggs] = useState([]); // SGG
+  const [emds, setEmds] = useState([]); // EMD
+  const [sggsArray, setSggsArray] = useState([]); // DOE 와 SGG 내의 code_doe 같을 때 => sgg 값
+  const [emdsArray, setEmdsArray] = useState([]); // SGG 과 EMD 내의 code_sgg && DOE 와 EMD 내의 code_doe => emd 값
+
+  const doeSelect = document.getElementById("select-doe");
+  const sggSelect = document.getElementById("select-sgg");
+  const emdSelect = document.getElementById("select-emd");
 
   // Local code 받아오기
   useEffect(() => {
     async function getLocCode() {
-            const res = await axios.get(routesClient.localdata)
-            const local_codes = res.data.contents.loc_code
+      const res = await axios.get(routesClient.localdata);
+      const local_codes = res.data.contents.loc_code;
 
-            setDoes(local_codes.DOE)
-            setSggs(local_codes.SGG)
-            setEmds(local_codes.EMD)
+      setDoes(local_codes.DOE);
+      setSggs(local_codes.SGG);
+      setEmds(local_codes.EMD);
     }
 
-        getLocCode()
-    }, [])
+    getLocCode();
+  }, []);
 
   function selectLocal() {
     sggs.map(function (sggvalue) {
-            if (Number(doeSelect.value) === sggvalue['code_doe']) {
-                setSggsArray(sggvalue['sgg'])
+      if (Number(doeSelect.value) === sggvalue["code_doe"]) {
+        setSggsArray(sggvalue["sgg"]);
       }
-        })
+    });
     emds.map(function (emdvalue) {
-            if ((Number(sggSelect.value) === emdvalue['code_sgg'])
-                && (Number(doeSelect.value) === emdvalue['code_doe'])) {
-                setEmdsArray(emdvalue['emd'])
+      if (
+        Number(sggSelect.value) === emdvalue["code_sgg"] &&
+        Number(doeSelect.value) === emdvalue["code_doe"]
+      ) {
+        setEmdsArray(emdvalue["emd"]);
       }
-        })
+    });
   }
 
-
   async function handleSubmit(event) {
-        event.preventDefault()
-        if (doeSelect.options[doeSelect.selectedIndex].text !== '도'
-            && sggSelect.options[sggSelect.selectedIndex].text !== '시군구'
-            && emdSelect.options[emdSelect.selectedIndex].text !== '읍면동') {
-
-            const saveCodeEmd = emdSelect.value
+    event.preventDefault();
+    if (
+      doeSelect.options[doeSelect.selectedIndex].text !== "도" &&
+      sggSelect.options[sggSelect.selectedIndex].text !== "시군구" &&
+      emdSelect.options[emdSelect.selectedIndex].text !== "읍면동"
+    ) {
+      const saveCodeEmd = emdSelect.value;
 
-            await axios.post(routesClient.edit, { loc_code: saveCodeEmd }) // loccal code 수정
+      await axios.post(routesClient.edit, { loc_code: saveCodeEmd }); // loccal code 수정
 
       callUserInfo().then((res) => {
-                console.log('loc_code', res[0].loc_code)
+        console.log("loc_code", res[0].loc_code);
         if (res[0].loc_code) {
           Swal.fire({
-                        title: '변경되었습니다.',
-                        text: '축하드립니다!👏',
-                        icon: 'success',
-                        customClass: 'swal-wide',
-                        confirmButtonText: '확인',
+            title: "변경되었습니다.",
+            text: "축하드립니다!👏",
+            icon: "success",
+            customClass: "swal-wide",
+            confirmButtonText: "확인",
           }).then((res) => {
             if (res.isConfirmed) {
-                            window.location.replace('/')
+              window.location.reload();
+            } else {
+              window.location.reload();
             }
-                        else {
-                            window.location.replace('/')
-                        }
-                    })
-                }
-            })
-
-
+          });
         }
-        else {
+      });
+    } else {
       Swal.fire({
-                title: '실패',
-                text: '전부 선택해주세요',
-                icon: 'error',
-                customClass: 'swal-wide',
-                confirmButtonText: '확인'
-            })
+        title: "실패",
+        text: "전부 선택해주세요",
+        icon: "error",
+        customClass: "swal-wide",
+        confirmButtonText: "확인",
+      });
     }
-
   }
 
-
-
-
-
   return (
-        <Row className='text-center w-100 my-2'>
+    <Row className="text-center w-100 my-2">
       <Card style={cardstyled}>
-                <Card.Title id='impactTitle'>
-                    지역 코드
-                </Card.Title>
-                <Card.Subtitle style={{ fontWeight: 'lighter' }}>
+        <Card.Title id="impactTitle">지역 코드</Card.Title>
+        <Card.Subtitle style={{ fontWeight: "lighter" }}>
           본인의 지역을 선택해주세요
         </Card.Subtitle>
         <hr />
-                <Card.Text className='m-0'>
+        <Card.Text className="m-0">
           <Form style={inboxstyled} onSubmit={handleSubmit}>
-                        <Row md={12} xs={12} className='m-auto w-100 d-flex justify-content-center' style={{ padding: '0', display: 'flex', justifyContent: 'center', width: '100%' }}>
-                            <Form.Group className='m-auto w-100' style={btnstyled2} onChange={selectLocal}>
-                                <Row className='m-auto pb-3'>
-                                    <Col md={4} xs={4} style={{ padding: '2px' }}>
-
-                                        <Form.Control as='select' size="sm" id='select-doe' required>
-                                            <option selected disabled>도</option>
-                                            {
-                                                does.map((doevalue) => (
+            <Row
+              md={12}
+              xs={12}
+              className="m-auto w-100 d-flex justify-content-center"
+              style={{
+                padding: "0",
+                display: "flex",
+                justifyContent: "center",
+                width: "100%",
+              }}
+            >
+              <Form.Group
+                className="m-auto w-100"
+                style={btnstyled2}
+                onChange={selectLocal}
+              >
+                <Row className="m-auto pb-3">
+                  <Col md={4} xs={4} style={{ padding: "2px" }}>
+                    <Form.Control
+                      as="select"
+                      size="sm"
+                      id="select-doe"
+                      required
+                    >
+                      <option selected disabled>
+                        도
+                      </option>
+                      {does.map((doevalue) => (
                         <option value={`${doevalue["code_doe"]}`}>
                           {`${doevalue["name_doe"]}`}
                         </option>
-                                                ))
-                                            }
+                      ))}
                     </Form.Control>
                   </Col>
 
-                                    <Col md={4} xs={4} style={{ padding: '2px' }}>
-                                        <Form.Control as='select' size="sm" id='select-sgg' required>
-                                            <option selected disabled>시군구</option>
-                                            {
-                                                sggsArray.map((sggvalue) => (
+                  <Col md={4} xs={4} style={{ padding: "2px" }}>
+                    <Form.Control
+                      as="select"
+                      size="sm"
+                      id="select-sgg"
+                      required
+                    >
+                      <option selected disabled>
+                        시군구
+                      </option>
+                      {sggsArray.map((sggvalue) => (
                         <option value={`${sggvalue["code_sgg"]}`}>
                           {`${sggvalue["name_sgg"]}`}
                         </option>
-                                                ))
-                                            }
+                      ))}
                     </Form.Control>
                   </Col>
 
-                                    <Col md={4} xs={4} style={{ padding: '2px' }}>
-                                        <Form.Control as='select' size="sm" id='select-emd' required>
-                                            <option selected disabled>읍면동</option>
-                                            {
-                                                emdsArray.map((emdvalue) => (
+                  <Col md={4} xs={4} style={{ padding: "2px" }}>
+                    <Form.Control
+                      as="select"
+                      size="sm"
+                      id="select-emd"
+                      required
+                    >
+                      <option selected disabled>
+                        읍면동
+                      </option>
+                      {emdsArray.map((emdvalue) => (
                         <option value={`${emdvalue["code_emd"]}`}>
                           {`${emdvalue["name_emd"]}`}
                         </option>
-                                                ))
-                                            }
+                      ))}
                     </Form.Control>
                   </Col>
                 </Row>
               </Form.Group>
-                            <Button
-                                variant='light' style={btnstyled2} type='submit'>
+              <Button variant="light" style={btnstyled2} type="submit">
                 확인
               </Button>
             </Row>
@@ -191,7 +207,7 @@ function LocCodeChange() {
         </Card.Text>
       </Card>
     </Row>
-    )
+  );
 }
 
 export default LocCodeChange;

server/src/controllers/dataController.js

@@ -156,13 +156,15 @@ export const getUserWeatherData = async (req, res) => {
 
     pyprocess.stdout.on("data", (data) => {
       let weather_predict = [];
-      const str_result = data.toString();
 
-      let temp_predict = str_result.trim();
+      let temp_predict = data.toString();
       temp_predict = temp_predict.replace("]]", "");
       temp_predict = temp_predict.replace("[[", "");
+      temp_predict = temp_predict.trim();
       temp_predict = temp_predict.split(" ");
 
+      temp_predict = temp_predict.filter((val) => val.length > 0);
+
       let date_10m = new Date(weather[weather.length - 1]["collected_at"]);
       date_10m.setMinutes(date_10m.getMinutes() + 10);