login 사용제한 변경

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
+        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: {
@@ -50,7 +60,7 @@ function ChartTemp() {
         maintainAspectRatio: false
     }
     const data = {
-        labels: ['1', '2', '3', '4', '5', '6', '77', '88', '99'],
+        labels: newLabel,
         datasets: [
             {
                 label: '온도',
@@ -67,17 +77,18 @@ function ChartTemp() {
                     'rgba(191,191,191,1)',
                     '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>