Commit 99e38a6b authored by KangMin An's avatar KangMin An
Browse files

Merge branch 'who' into premaster

parents 306703ad 15846f6f
...@@ -5,10 +5,11 @@ import Home from './pages/Home'; ...@@ -5,10 +5,11 @@ import Home from './pages/Home';
import SignupPage from './pages/SignupPage'; import SignupPage from './pages/SignupPage';
import LoginPage from './pages/LoginPage'; import LoginPage from './pages/LoginPage';
import EditPage from './pages/EditPage'; import EditPage from './pages/EditPage';
import PrivateRoute from './utils/PrivateRoutes'; import OnlyUser from './utils/OnlyUser';
import PageNotFound from './components/PageNotFound'; import PageNotFound from './components/PageNotFound';
import Footer from './components/Footer'; import Footer from './components/Footer';
import GetLocFirst from './pages/GetLocFirst'; import GetLocFirst from './pages/GetLocFirst';
import { isLogined } from './utils/Auth';
function App() { function App() {
...@@ -19,6 +20,10 @@ function App() { ...@@ -19,6 +20,10 @@ function App() {
if (isLs === null) { if (isLs === null) {
localStorage.setItem('login', false) localStorage.setItem('login', false)
} }
if (isLs === false || isLs === null) {
localStorage.setItem('local-code', '3743011')
}
} }
return ( return (
...@@ -26,13 +31,22 @@ function App() { ...@@ -26,13 +31,22 @@ function App() {
{loginDefault()} {loginDefault()}
<Switch> <Switch>
<Route exact path='/' component={Home} /> <Route exact path='/' component={Home} />
{isLogined() ?
<Route path='/signup' component={PageNotFound} />
:
<Route path='/signup' component={SignupPage} /> <Route path='/signup' component={SignupPage} />
}
{isLogined() ?
<Route path='/login' component={PageNotFound} />
:
<Route path='/login' component={LoginPage} /> <Route path='/login' component={LoginPage} />
}
<Route path='/first-local-code' component={GetLocFirst} /> <Route path='/first-local-code' component={GetLocFirst} />
<PrivateRoute path='/edit'> <OnlyUser path='/edit'>
<EditPage /> <EditPage />
</PrivateRoute> </OnlyUser>
<Route component={PageNotFound} /> <Route component={PageNotFound} />
</Switch> </Switch>
......
...@@ -2,8 +2,18 @@ import axios from 'axios'; ...@@ -2,8 +2,18 @@ import axios from 'axios';
import { Swal } from 'sweetalert2'; import { Swal } from 'sweetalert2';
import { routesClient } from './../routesClient'; 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) => { callUserInfo().then((res) => {
console.log(res)
// if (res['loc_code'] === null) {
res['loc_code'] = 3743011
// }
const outs = axios.get(routesClient.outsideLoc + res['loc_code']) const outs = axios.get(routesClient.outsideLoc + res['loc_code'])
return outs return outs
.then((res) => { .then((res) => {
...@@ -22,11 +32,6 @@ export function getTempEtc() { ...@@ -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() { export function checkCookies() {
const acctoken_cookies = document.cookie.split('=')[1]; const acctoken_cookies = document.cookie.split('=')[1];
......
...@@ -53,6 +53,7 @@ export function AuthWithKakao(isLogin) { ...@@ -53,6 +53,7 @@ export function AuthWithKakao(isLogin) {
) { ) {
// 회원 가입 또는 로그인 성공 // 회원 가입 또는 로그인 성공
localStorage.setItem("login", true); localStorage.setItem("login", true);
localStorage.removeItem('local-code');
Swal.fire({ Swal.fire({
title: isLogin ? "로그인 성공!" : "회원가입 성공!", title: isLogin ? "로그인 성공!" : "회원가입 성공!",
......
import React from 'react'; import React from 'react';
import { Redirect, Route } from 'react-router-dom'; import { Redirect, Route } from 'react-router-dom';
import PageNotFound from '../components/PageNotFound';
import { isLogined } from './Auth'; import { isLogined } from './Auth';
function PrivateRoute({ path, children }) { function OnlyUser({ path, children }) {
if (isLogined()) { if (isLogined()) {
return ( return (
<Route path={path}> <Route path={path}>
...@@ -10,10 +11,12 @@ function PrivateRoute({ path, children }) { ...@@ -10,10 +11,12 @@ function PrivateRoute({ path, children }) {
</Route> </Route>
) )
} else { } else {
alert('권한이 없습니다')
return ( return (
<Redirect to='/' /> <>
<PageNotFound />
{/* <Redirect to='/' /> */}
</>
) )
} }
} }
export default PrivateRoute export default OnlyUser
import React from 'react' import axios from 'axios';
import React, { useState, useEffect } from 'react'
import { Col } from 'react-bootstrap'; import { Col } from 'react-bootstrap';
import { Bar, Line } 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 ChartHumidity() { function ChartHumidity() {
const cardstyled = { const [humi, setHumi] = useState([])
margin: 'auto', const [newLabel, setNewLabel] = useState([])
padding: '1em',
display: 'flex', useEffect(() => {
justifyContent: 'center', if (isLogined()) {
width: '100%', callUserInfo().then((res) => {
borderWidth: '3px', const outs = axios.get(routesClient.outsideLoc + res['loc_code'])
borderRadius: '20px', console.log('>>', outs)
borderColor: 'rgb(110, 189, 142)', })
color: '#04AB70' }
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 = { const options = {
legend: { legend: {
...@@ -34,28 +56,26 @@ function ChartHumidity() { ...@@ -34,28 +56,26 @@ function ChartHumidity() {
maintainAspectRatio: false maintainAspectRatio: false
} }
const data = { const data = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], labels: newLabel,
datasets: [ datasets: [
{ {
label: '습도', label: '습도',
fill: true, data: humi,
lineTension: 0.1, 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)', borderColor: 'rgba(75,192,192,1)',
borderCapStyle: 'butt', borderCapStyle: 'round',
borderDash: [8, 8], //점선 ex [2,10]
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgba(75,192,192,1)', pointBorderColor: 'rgba(75,192,192,1)',
pointBackgroundColor: '#fff', pointBackgroundColor: '#fff',
pointBorderWidth: 6, pointBorderWidth: 5,
pointHoverRadius: 5, pointHoverRadius: 5,
pointHoverBackgroundColor: 'rgba(75,192,192,1)', pointHoverBackgroundColor: 'rgba(75,192,192,1)',
pointHoverBorderColor: 'rgba(220,220,220,1)', pointHoverBorderColor: 'rgba(220,220,220,1)',
pointHoverBorderWidth: 2, pointHoverBorderWidth: 2,
pointRadius: 1, pointRadius: 1,
pointHitRadius: 10, pointHitRadius: 10,
data: [-10, -2, 13, 18, 22, 25, 31, 28, 25, 18, 6, -8]
} }
] ]
}; };
......
import React from 'react' import axios from 'axios';
import { Row, Col } from 'react-bootstrap'; import React, { useEffect, useState } from 'react'
import { Bar, Line } from 'react-chartjs-2' 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() { 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 = { const options = {
legend: { legend: {
display: true, // label 보이기 여부 display: true, // label 보이기 여부
...@@ -21,16 +54,26 @@ function ChartPressure() { ...@@ -21,16 +54,26 @@ function ChartPressure() {
maintainAspectRatio: false maintainAspectRatio: false
} }
const data = { const data = {
labels: ['1', '2', '3', '4', '5', '6', '77', '88', '99'], labels: newLabel,
datasets: [ datasets: [
{ {
label: '기압', label: '기압',
data: [1008, 1007, 1000, 1010, 1080, 1020, 1025, 1080, 1030], data: press,
lineTension: 0.1,
borderWidth: '2', borderWidth: '2',
fill: true, fill: true,
borderColor: 'rgba(75,192,192)', backgroundColor: 'rgba(75,192,192,0.1)',
backgroundColor: 'rgba(75,192,192,0.4)', borderColor: 'rgba(75,192,192,1)',
tension: 0.3 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,
} }
] ]
}; };
......
...@@ -5,6 +5,8 @@ import ChartHumidity from './ChartHumidity'; ...@@ -5,6 +5,8 @@ import ChartHumidity from './ChartHumidity';
import ChartWindSpeed from './ChartWindSpeed'; import ChartWindSpeed from './ChartWindSpeed';
import ChartPressure from './ChartPressure'; import ChartPressure from './ChartPressure';
import '../App.css' import '../App.css'
import { getWeatherOut } from './../utils/CheckDB';
import { isLogined } from './../utils/Auth';
function ChartTabs() { function ChartTabs() {
...@@ -20,10 +22,12 @@ function ChartTabs() { ...@@ -20,10 +22,12 @@ function ChartTabs() {
color: '#04AB70' color: '#04AB70'
} }
const [key, setKey] = useState('temp');
//3743011 default //3743011 default
const [key, setKey] = useState('temp');
return ( return (
<Row className='text-center w-100 my-2'> <Row className='text-center w-100 my-2'>
<Card style={cardstyled}> <Card style={cardstyled}>
......
import React, { useState } from "react"; import React, { useState } from "react";
import { Col } from "react-bootstrap"; import { Col } from "react-bootstrap";
import { Bar } from "react-chartjs-2"; import { Bar } from "react-chartjs-2";
import { callUserInfo } from "../utils/CheckDB"; import { callUserInfo, getWeather } from "../utils/CheckDB";
import { useEffect } from "react"; import { useEffect } from "react";
import axios from "axios"; import axios from "axios";
import { routesClient } from "./../routesClient"; import { routesClient } from "./../routesClient";
import { isLogined } from "./../utils/Auth";
function ChartTemp() { function ChartTemp() {
const [temp, setTemp] = useState([]); const [temp, setTemp] = useState([]);
const [newLabel, setNewLabel] = useState([]);
useEffect(() => { useEffect(() => {
if (isLogined()) {
callUserInfo().then((res) => { callUserInfo().then((res) => {
const outs = axios.get(routesClient.outsideLoc + res["loc_code"]); const outs = axios.get(routesClient.outsideLoc + res["loc_code"]);
return outs.then((res) => { 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 outWeather = res.data.contents.weather_out;
console.log(res.data.contents.weather_out); const Array = [];
let i = 0; const Array2 = [];
// setTemp(res.data.contents.weather_out[0].temp) console.log(outWeather);
const tempArray = []; let i = outWeather.length - 9;
for (i; i < 3; i++) { for (i; i < outWeather.length; i++) {
console.log(i); Array.push(outWeather[i].temp);
console.log(outWeather[i]); Array2.push(outWeather[i].collected_at.split("T")[1].split(".")[0]);
tempArray.push(outWeather[i].temp);
} }
setTemp(tempArray); setTemp(Array);
}); setNewLabel(Array2);
}); });
}
}, []); }, []);
console.log(temp);
const options = { const options = {
legend: { legend: {
display: true, // label 보이기 여부 display: true, // label 보이기 여부
...@@ -50,7 +55,7 @@ function ChartTemp() { ...@@ -50,7 +55,7 @@ function ChartTemp() {
maintainAspectRatio: false, maintainAspectRatio: false,
}; };
const data = { const data = {
labels: ["1", "2", "3", "4", "5", "6", "77", "88", "99"], labels: newLabel,
datasets: [ datasets: [
{ {
label: "온도", label: "온도",
...@@ -68,17 +73,18 @@ function ChartTemp() { ...@@ -68,17 +73,18 @@ function ChartTemp() {
"rgba(191,191,191,1)", "rgba(191,191,191,1)",
"rgba(191,191,191,1)", "rgba(191,191,191,1)",
], ],
backgroundColor: [ backgroundColor: [
"rgba(75,192,192,0.4)", "rgba(75,192,192,0.1)",
"rgba(75,192,192,0.4)", "rgba(75,192,192,0.1)",
"rgba(75,192,192,0.4)", "rgba(75,192,192,0.1)",
"rgba(75,192,192,0.4)", "rgba(75,192,192,0.1)",
"rgba(75,192,192,0.4)", "rgba(75,192,192,0.1)",
"rgba(75,192,192,0.4)", "rgba(75,192,192,0.1)",
"rgba(191,191,191,0.4)", "rgba(191,191,191,0.1)",
"rgba(191,191,191,0.4)", "rgba(191,191,191,0.1)",
"rgba(191,191,191,0.4)", "rgba(191,191,191,0.1)",
], ],
}, },
], ],
......
import React from 'react' import axios from 'axios';
import React, { useState, useEffect } from 'react'
import { Col } from 'react-bootstrap'; 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() { 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 = { const options = {
legend: { legend: {
display: true, // label 보이기 여부 display: true, // label 보이기 여부
...@@ -22,21 +53,33 @@ function ChartWindSpeed() { ...@@ -22,21 +53,33 @@ function ChartWindSpeed() {
maintainAspectRatio: false maintainAspectRatio: false
} }
const data = { const data = {
labels: ['1', '2', '3', '4', '5', '6', '77', '88', '99'], labels: newLabel,
datasets: [ datasets: [
{ {
label: '풍속', label: '풍속',
data: windSpd,
lineTension: 0.1,
borderWidth: '2', 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)', 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 ( return (
<Col id='chartTab'> <Col id='chartTab'>
<Bar <Line
data={data} data={data}
options={options} options={options}
/> />
......
...@@ -66,6 +66,7 @@ function LoginComp() { ...@@ -66,6 +66,7 @@ function LoginComp() {
setMailSend(res.data.contents.mail_sending); setMailSend(res.data.contents.mail_sending);
setAlertShow(true); setAlertShow(true);
localStorage.setItem("login", true); localStorage.setItem("login", true);
localStorage.removeItem('local-code');
} }
return ( return (
......
...@@ -3,7 +3,6 @@ import { Button, Image, Row, ButtonGroup, Col } from 'react-bootstrap'; ...@@ -3,7 +3,6 @@ import { Button, Image, Row, ButtonGroup, Col } from 'react-bootstrap';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import '../App.css' import '../App.css'
import UserInfo from './UserInfo'; import UserInfo from './UserInfo';
import { kakaoLogout } from '../utils/Oauth';
import UsingAircon from './UsingAircon'; import UsingAircon from './UsingAircon';
import { isLogined, localLogout } from '../utils/Auth'; import { isLogined, localLogout } from '../utils/Auth';
import TimeNow from './TimeNow'; import TimeNow from './TimeNow';
...@@ -48,7 +47,6 @@ function MainLayer() { ...@@ -48,7 +47,6 @@ function MainLayer() {
<UserInfo /> <UserInfo />
</Row> </Row>
<UsingAircon />
<Row className='d-flex justify-content-center align-items-center my-2 mx-auto w-100'> <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' }}> <ButtonGroup vertical className='m-auto' style={{ width: '100%', flexDirection: 'column' }}>
...@@ -76,6 +74,8 @@ function MainLayer() { ...@@ -76,6 +74,8 @@ function MainLayer() {
} }
</ButtonGroup> </ButtonGroup>
<UsingAircon />
<TimeNow /> <TimeNow />
</Row> </Row>
......
...@@ -3,8 +3,11 @@ import { Row, Container } from 'react-bootstrap'; ...@@ -3,8 +3,11 @@ import { Row, Container } from 'react-bootstrap';
import Loading from './Loading'; import Loading from './Loading';
function PageNotFound() { function PageNotFound() {
useEffect(() => { useEffect(() => {
setTimeout(window.location.replace('/'), 5000); setTimeout(function () {
window.location.replace('/')
}, 3000);
}, []) }, [])
return ( return (
...@@ -17,7 +20,7 @@ function PageNotFound() { ...@@ -17,7 +20,7 @@ function PageNotFound() {
PAGE NOT FOUND PAGE NOT FOUND
</h1> </h1>
<br /> <br />
<h3 className='d-flex justify-content-center' style={{fontWeight: '300'}}> <h3 className='d-flex justify-content-center' style={{ fontWeight: '300' }}>
잘못된 접근 입니다. 잘못된 접근 입니다.
</h3> </h3>
</Row> </Row>
......
...@@ -5,6 +5,7 @@ import '../App.css' ...@@ -5,6 +5,7 @@ import '../App.css'
import EueSuggest from '../components/EueSuggest'; import EueSuggest from '../components/EueSuggest';
import Donation from '../components/Donation'; import Donation from '../components/Donation';
import ChartTabs from '../components/ChartTabs'; import ChartTabs from '../components/ChartTabs';
import ChartDoughnut from '../components/ChartDoughnut';
function Home() { function Home() {
const constyled = { const constyled = {
...@@ -43,6 +44,7 @@ function Home() { ...@@ -43,6 +44,7 @@ function Home() {
<Col md={6} style={col2sty}> <Col md={6} style={col2sty}>
<EueSuggest /> <EueSuggest />
<ChartTabs /> <ChartTabs />
<ChartDoughnut />
<Donation /> <Donation />
</Col> </Col>
</Row> </Row>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment