Merge branch 'who' into premaster

client/src/App.js

@@ -5,20 +5,25 @@ import Home from './pages/Home';
 import SignupPage from './pages/SignupPage';
 import LoginPage from './pages/LoginPage';
 import EditPage from './pages/EditPage';
-import PrivateRoute from './utils/PrivateRoutes';
+import OnlyUser from './utils/OnlyUser';
 import PageNotFound from './components/PageNotFound';
 import Footer from './components/Footer';
 import GetLocFirst from './pages/GetLocFirst';
+import { isLogined } from './utils/Auth';
 
 
 function App() {
-  
+
   const isLs = localStorage.getItem('login')
 
   function loginDefault() {
     if (isLs === null) {
       localStorage.setItem('login', false)
     }
+    if (isLs === false || isLs === null) {
+      localStorage.setItem('local-code', '3743011')
+
+    }
   }
 
   return (
@@ -26,13 +31,22 @@ function App() {
       {loginDefault()}
       <Switch>
         <Route exact path='/' component={Home} />
-        <Route path='/signup' component={SignupPage} />
-        <Route path='/login' component={LoginPage} />
+        {isLogined() ?
+          <Route path='/signup' component={PageNotFound} />
+          :
+          <Route path='/signup' component={SignupPage} />
+        }
+
+        {isLogined() ?
+          <Route path='/login' component={PageNotFound} />
+          :
+          <Route path='/login' component={LoginPage} />
+        }
         <Route path='/first-local-code' component={GetLocFirst} />
 
-        <PrivateRoute path='/edit'>
+        <OnlyUser path='/edit'>
           <EditPage />
-        </PrivateRoute>
+        </OnlyUser>
 
         <Route component={PageNotFound} />
       </Switch>

client/src/Utils/CheckDB.js

@@ -2,8 +2,18 @@ import axios from 'axios';
 import { Swal } from 'sweetalert2';
 import { routesClient } from './../routesClient';
 
-export function getTempEtc() {
+
+export async function callUserInfo() {
+    const res = await axios.get(routesClient.userinfo)
+    return res.data.contents.user_info
+}
+
+export function getWeatherOut() {
     callUserInfo().then((res) => {
+        console.log(res)
+        // if (res['loc_code'] === null) {
+            res['loc_code'] = 3743011
+        // }
         const outs = axios.get(routesClient.outsideLoc + res['loc_code'])
         return outs
             .then((res) => {
@@ -22,11 +32,6 @@ export function getTempEtc() {
             })
     })
 }
-export async function callUserInfo() {
-    const res = await axios.get(routesClient.userinfo)
-    console.log(res.data.contents.user_info)
-    return res.data.contents.user_info
-}
 
 export function checkCookies() {
     const acctoken_cookies = document.cookie.split('=')[1];

client/src/Utils/Oauth.js

@@ -39,10 +39,10 @@ export function AuthWithKakao(isLogin) {
               isLogin
                 ? { email: emailValue, isOAuth: true }
                 : {
-                    email: emailValue,
-                    nick_name: nickValue,
-                    isOAuth: true,
-                  }
+                  email: emailValue,
+                  nick_name: nickValue,
+                  isOAuth: true,
+                }
             )
             .then((res) => {
               console.log("kakao", res);
@@ -53,6 +53,7 @@ export function AuthWithKakao(isLogin) {
               ) {
                 // 회원 가입 또는 로그인 성공
                 localStorage.setItem("login", true);
+                localStorage.removeItem('local-code');
 
                 Swal.fire({
                   title: isLogin ? "로그인 성공!" : "회원가입 성공!",

client/src/Utils/PrivateRoutes.js → client/src/Utils/OnlyUser.js

 import React from 'react';
 import { Redirect, Route } from 'react-router-dom';
+import PageNotFound from '../components/PageNotFound';
 import { isLogined } from './Auth';
 
-function PrivateRoute({ path, children }) {
+function OnlyUser({ path, children }) {
     if (isLogined()) {
         return (
             <Route path={path}>
@@ -10,10 +11,12 @@ function PrivateRoute({ path, children }) {
             </Route>
         )
     } else {
-        alert('권한이 없습니다')
         return (
-            <Redirect to='/' />
+            <>
+                <PageNotFound />
+                {/* <Redirect to='/' /> */}
+            </>
         )
     }
 }
-export default PrivateRoute
+export default OnlyUser

client/src/components/ChartHumidity.js

-import React from 'react'
+import axios from 'axios';
+import React, { useState, useEffect } from 'react'
 import { Col } from 'react-bootstrap';
 import { Bar, Line } from 'react-chartjs-2'
+import { callUserInfo } from '../utils/CheckDB';
+import { routesClient } from './../routesClient';
+import { isLogined } from './../utils/Auth';
 
 function ChartHumidity() {
 
-    const cardstyled = {
-        margin: 'auto',
-        padding: '1em',
-        display: 'flex',
-        justifyContent: 'center',
-        width: '100%',
-        borderWidth: '3px',
-        borderRadius: '20px',
-        borderColor: 'rgb(110, 189, 142)',
-        color: '#04AB70'
-    }
+    const [humi, setHumi] = useState([])
+    const [newLabel, setNewLabel] = useState([])
+
+    useEffect(() => {
+        if (isLogined()) {
+            callUserInfo().then((res) => {
+                const outs = axios.get(routesClient.outsideLoc + res['loc_code'])
+                console.log('>>', outs)
+            })
+        }
+        else {
+            const locDefault = localStorage.getItem('local-code')
+            axios.get(routesClient.outsideLoc + locDefault)
+                .then((res) => {
+                    const outWeather = res.data.contents.weather_out
+                    const Array = []
+                    const Array2 = []
+                    for (let i = 0; i < outWeather.length; i++) {
+                        Array.push(outWeather[i].humi)
+                        Array2.push(outWeather[i].collected_at.split('T')[1].split('.')[0])
+                        // const colHour = outWeather[i].collected_at.split('T')[1].split('.')[0].split(':')[0]
+                        // const colMin = outWeather[i].collected_at.split('T')[1].split('.')[0].split(':')[1]
+                    }
+                    setHumi(Array)
+                    setNewLabel(Array2)
+                })
+        }
+    }, [])
+
 
     const options = {
         legend: {
@@ -34,28 +56,26 @@ function ChartHumidity() {
         maintainAspectRatio: false
     }
     const data = {
-        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+        labels: newLabel,
         datasets: [
             {
                 label: '습도',
-                fill: true,
+                data: humi,
                 lineTension: 0.1,
-                backgroundColor: 'rgba(75,192,192,0.4)',
+                borderWidth: '2',
+                fill: true,
+                backgroundColor: 'rgba(75,192,192,0.1)',
                 borderColor: 'rgba(75,192,192,1)',
-                borderCapStyle: 'butt',
-                borderDash: [8, 8], //점선 ex [2,10]
-                borderDashOffset: 0.0,
-                borderJoinStyle: 'miter',
+                borderCapStyle: 'round',
                 pointBorderColor: 'rgba(75,192,192,1)',
                 pointBackgroundColor: '#fff',
-                pointBorderWidth: 6,
+                pointBorderWidth: 5,
                 pointHoverRadius: 5,
                 pointHoverBackgroundColor: 'rgba(75,192,192,1)',
                 pointHoverBorderColor: 'rgba(220,220,220,1)',
                 pointHoverBorderWidth: 2,
                 pointRadius: 1,
                 pointHitRadius: 10,
-                data: [-10, -2, 13, 18, 22, 25, 31, 28, 25, 18, 6, -8]
             }
         ]
     };

client/src/components/ChartPressure.js

-import React from 'react'
-import { Row, Col } from 'react-bootstrap';
-import { Bar, Line } from 'react-chartjs-2'
+import axios from 'axios';
+import React, { useEffect, useState } from 'react'
+import { Col } from 'react-bootstrap';
+import { Line } from 'react-chartjs-2'
+import { callUserInfo } from '../utils/CheckDB';
+import { isLogined } from './../utils/Auth';
+import { routesClient } from './../routesClient';
 
 function ChartPressure() {
 
+    const [press, setPress] = useState([])
+    const [newLabel, setNewLabel] = useState([])
+
+    useEffect(() => {
+        if (isLogined()) {
+            callUserInfo().then((res) => {
+                const outs = axios.get(routesClient.outsideLoc + res['loc_code'])
+                console.log('>>', outs)
+            })
+        }
+        else {
+            const locDefault = localStorage.getItem('local-code')
+            axios.get(routesClient.outsideLoc + locDefault)
+                .then((res) => {
+                    const outWeather = res.data.contents.weather_out
+                    const Array = []
+                    const Array2 = []
+                    for (let i = 0; i < outWeather.length; i++) {
+                        Array.push(outWeather[i].press)
+                        Array2.push(outWeather[i].collected_at.split('T')[1].split('.')[0])
+                        // const colHour = outWeather[i].collected_at.split('T')[1].split('.')[0].split(':')[0]
+                        // const colMin = outWeather[i].collected_at.split('T')[1].split('.')[0].split(':')[1]
+                    }
+                    setPress(Array)
+                    setNewLabel(Array2)
+                })
+        }
+    }, [])
+
     const options = {
         legend: {
             display: true, // label 보이기 여부
@@ -21,16 +54,26 @@ function ChartPressure() {
         maintainAspectRatio: false
     }
     const data = {
-        labels: ['1', '2', '3', '4', '5', '6', '77', '88', '99'],
+        labels: newLabel,
         datasets: [
             {
                 label: '기압',
-                data: [1008, 1007, 1000, 1010, 1080, 1020, 1025, 1080, 1030],
+                data: press,
+                lineTension: 0.1,
                 borderWidth: '2',
                 fill: true,
-                borderColor: 'rgba(75,192,192)',
-                backgroundColor: 'rgba(75,192,192,0.4)',
-                tension: 0.3
+                backgroundColor: 'rgba(75,192,192,0.1)',
+                borderColor: 'rgba(75,192,192,1)',
+                borderCapStyle: 'round',
+                pointBorderColor: 'rgba(75,192,192,1)',
+                pointBackgroundColor: '#fff',
+                pointBorderWidth: 5,
+                pointHoverRadius: 5,
+                pointHoverBackgroundColor: 'rgba(75,192,192,1)',
+                pointHoverBorderColor: 'rgba(220,220,220,1)',
+                pointHoverBorderWidth: 2,
+                pointRadius: 1,
+                pointHitRadius: 10,
             }
         ]
     };

client/src/components/ChartTabs.js

@@ -5,6 +5,8 @@ import ChartHumidity from './ChartHumidity';
 import ChartWindSpeed from './ChartWindSpeed';
 import ChartPressure from './ChartPressure';
 import '../App.css'
+import { getWeatherOut } from './../utils/CheckDB';
+import { isLogined } from './../utils/Auth';
 
 function ChartTabs() {
 
@@ -20,10 +22,12 @@ function ChartTabs() {
         color: '#04AB70'
     }
 
-    const [key, setKey] = useState('temp');
 
     //3743011 default
 
+
+    const [key, setKey] = useState('temp');
+
     return (
         <Row className='text-center w-100 my-2'>
             <Card style={cardstyled}>

client/src/components/ChartTemp.js

 import React, { useState } from "react";
 import { Col } from "react-bootstrap";
 import { Bar } from "react-chartjs-2";
-import { callUserInfo } from "../utils/CheckDB";
+import { callUserInfo, getWeather } from "../utils/CheckDB";
 import { useEffect } from "react";
 import axios from "axios";
 import { routesClient } from "./../routesClient";
+import { isLogined } from "./../utils/Auth";
 
 function ChartTemp() {
   const [temp, setTemp] = useState([]);
+  const [newLabel, setNewLabel] = useState([]);
 
   useEffect(() => {
-    callUserInfo().then((res) => {
-      const outs = axios.get(routesClient.outsideLoc + res["loc_code"]);
-      return outs.then((res) => {
+    if (isLogined()) {
+      callUserInfo().then((res) => {
+        const outs = axios.get(routesClient.outsideLoc + res["loc_code"]);
+        console.log(">>", outs);
+      });
+    } else {
+      const locDefault = localStorage.getItem("local-code");
+      axios.get(routesClient.outsideLoc + locDefault).then((res) => {
         const outWeather = res.data.contents.weather_out;
-        console.log(res.data.contents.weather_out);
-        let i = 0;
-        // setTemp(res.data.contents.weather_out[0].temp)
-        const tempArray = [];
-        for (i; i < 3; i++) {
-          console.log(i);
-          console.log(outWeather[i]);
-          tempArray.push(outWeather[i].temp);
+        const Array = [];
+        const Array2 = [];
+        console.log(outWeather);
+        let i = outWeather.length - 9;
+        for (i; i < outWeather.length; i++) {
+          Array.push(outWeather[i].temp);
+          Array2.push(outWeather[i].collected_at.split("T")[1].split(".")[0]);
         }
-        setTemp(tempArray);
+        setTemp(Array);
+        setNewLabel(Array2);
       });
-    });
+    }
   }, []);
 
-  console.log(temp);
-
   const options = {
     legend: {
       display: true, // label 보이기 여부
@@ -50,7 +55,7 @@ function ChartTemp() {
     maintainAspectRatio: false,
   };
   const data = {
-    labels: ["1", "2", "3", "4", "5", "6", "77", "88", "99"],
+    labels: newLabel,
     datasets: [
       {
         label: "온도",
@@ -68,17 +73,18 @@ function ChartTemp() {
           "rgba(191,191,191,1)",
           "rgba(191,191,191,1)",
         ],
+
         backgroundColor: [
-          "rgba(75,192,192,0.4)",
-          "rgba(75,192,192,0.4)",
-          "rgba(75,192,192,0.4)",
-          "rgba(75,192,192,0.4)",
-          "rgba(75,192,192,0.4)",
-          "rgba(75,192,192,0.4)",
+          "rgba(75,192,192,0.1)",
+          "rgba(75,192,192,0.1)",
+          "rgba(75,192,192,0.1)",
+          "rgba(75,192,192,0.1)",
+          "rgba(75,192,192,0.1)",
+          "rgba(75,192,192,0.1)",
 
-          "rgba(191,191,191,0.4)",
-          "rgba(191,191,191,0.4)",
-          "rgba(191,191,191,0.4)",
+          "rgba(191,191,191,0.1)",
+          "rgba(191,191,191,0.1)",
+          "rgba(191,191,191,0.1)",
         ],
       },
     ],

client/src/components/ChartWindSpeed.js

-import React from 'react'
+import axios from 'axios';
+import React, { useState, useEffect } from 'react'
 import { Col } from 'react-bootstrap';
-import { Bar } from 'react-chartjs-2'
+import { Bar, Line } from 'react-chartjs-2'
+import { callUserInfo } from '../utils/CheckDB';
+import { routesClient } from './../routesClient';
+import { isLogined } from './../utils/Auth';
 
 function ChartWindSpeed() {
 
+    const [windSpd, setWindSpd] = useState([])
+    const [newLabel, setNewLabel] = useState([])
+
+    useEffect(() => {
+        if (isLogined()) {
+            callUserInfo().then((res) => {
+                const outs = axios.get(routesClient.outsideLoc + res['loc_code'])
+                console.log('>>', outs)
+            })
+        }
+        else {
+            const locDefault = localStorage.getItem('local-code')
+            axios.get(routesClient.outsideLoc + locDefault)
+                .then((res) => {
+                    const outWeather = res.data.contents.weather_out
+                    const Array = []
+                    const Array2 = []
+                    for (let i = 0; i < outWeather.length; i++) {
+                        Array.push(outWeather[i].wind_speed)
+                        Array2.push(outWeather[i].collected_at.split('T')[1].split('.')[0])
+                    }
+                    setWindSpd(Array)
+                    setNewLabel(Array2)
+                })
+        }
+    }, [])
+
     const options = {
         legend: {
             display: true, // label 보이기 여부
@@ -22,21 +53,33 @@ function ChartWindSpeed() {
         maintainAspectRatio: false
     }
     const data = {
-        labels: ['1', '2', '3', '4', '5', '6', '77', '88', '99'],
+        labels: newLabel,
         datasets: [
             {
                 label: '풍속',
+                data: windSpd,
+                lineTension: 0.1,
                 borderWidth: '2',
-                data: [1008, 1007, 1000, 999, 1080, 1020, 1025, 1080, 1030],
+                fill: true,
+                backgroundColor: 'rgba(75,192,192,0.1)',
                 borderColor: 'rgba(75,192,192,1)',
-                backgroundColor: 'rgba(75,192,192,0.4)'
+                borderCapStyle: 'round',
+                pointBorderColor: 'rgba(75,192,192,1)',
+                pointBackgroundColor: '#fff',
+                pointBorderWidth: 5,
+                pointHoverRadius: 5,
+                pointHoverBackgroundColor: 'rgba(75,192,192,1)',
+                pointHoverBorderColor: 'rgba(220,220,220,1)',
+                pointHoverBorderWidth: 2,
+                pointRadius: 1,
+                pointHitRadius: 10,
             }
         ]
     };
 
     return (
         <Col id='chartTab'>
-            <Bar
+            <Line
                 data={data}
                 options={options}
             />

client/src/components/LoginComp.js

@@ -66,6 +66,7 @@ function LoginComp() {
     setMailSend(res.data.contents.mail_sending);
     setAlertShow(true);
     localStorage.setItem("login", true);
+    localStorage.removeItem('local-code');
   }
 
   return (

client/src/components/MainLayer.js

@@ -3,7 +3,6 @@ import { Button, Image, Row, ButtonGroup, Col } from 'react-bootstrap';
 import { Link } from 'react-router-dom';
 import '../App.css'
 import UserInfo from './UserInfo';
-import { kakaoLogout } from '../utils/Oauth';
 import UsingAircon from './UsingAircon';
 import { isLogined, localLogout } from '../utils/Auth';
 import TimeNow from './TimeNow';
@@ -48,7 +47,6 @@ function MainLayer() {
                 <UserInfo />
             </Row>
 
-            <UsingAircon />
 
             <Row className='d-flex justify-content-center align-items-center my-2 mx-auto w-100'>
                 <ButtonGroup vertical className='m-auto' style={{ width: '100%', flexDirection: 'column' }}>
@@ -76,6 +74,8 @@ function MainLayer() {
                     }
 
                 </ButtonGroup>
+                <UsingAircon />
+
                 <TimeNow />
 
             </Row>

client/src/components/PageNotFound.js

@@ -3,8 +3,11 @@ import { Row, Container } from 'react-bootstrap';
 import Loading from './Loading';
 
 function PageNotFound() {
+
     useEffect(() => {
-        setTimeout(window.location.replace('/'), 5000);
+        setTimeout(function () {
+            window.location.replace('/')
+        }, 3000);
     }, [])
 
     return (
@@ -17,7 +20,7 @@ function PageNotFound() {
                     PAGE NOT FOUND
                 </h1>
                 <br />
-                <h3 className='d-flex justify-content-center' style={{fontWeight: '300'}}>
+                <h3 className='d-flex justify-content-center' style={{ fontWeight: '300' }}>
                     잘못된 접근 입니다.
                 </h3>
             </Row>

client/src/pages/Home.js

@@ -5,6 +5,7 @@ import '../App.css'
 import EueSuggest from '../components/EueSuggest';
 import Donation from '../components/Donation';
 import ChartTabs from '../components/ChartTabs';
+import ChartDoughnut from '../components/ChartDoughnut';
 
 function Home() {
     const constyled = {
@@ -43,6 +44,7 @@ function Home() {
                     <Col md={6} style={col2sty}>
                         <EueSuggest />
                         <ChartTabs />
+                        <ChartDoughnut />
                         <Donation />
                     </Col>
                 </Row>