Skip to content

GitLab

Commit 8d02df63 authored by Spark's avatar Spark
Browse files

localStorage => Item { login: Boolean }

parent 1919dcb1
Hide whitespace changes
Inline Side-by-side
client/src/App.css
View file @ 8d02df63
......@@ -74,7 +74,7 @@ body {
}
#logpng {
width: 50%;
width: 100%;
height: 6em;
object-fit: cover;
}
......
client/src/App.js
View file @ 8d02df63
import React from 'react';
import React, { useEffect } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import './App.css';
import Home from './pages/Home';
......@@ -8,9 +8,13 @@ import EditPage from './pages/EditPage';
import PrivateRoute from './utils/PrivateRoutes';
import PageNotFound from './components/PageNotFound';
import Footer from './components/Footer';
import { checkCookies } from './utils/CheckDB';
function App() {
useEffect(() => {
localStorage.setItem('login', false)
}, [checkCookies()])
return (
<Router>
......
client/src/Utils/Auth.js
View file @ 8d02df63
import axios from 'axios';
import { checkCookies } from './CheckDB';
export function handleLogin({ userId, role, name, tel, email }) {
localStorage.setItem('id', userId)
localStorage.setItem('role', role)
localStorage.setItem('name', name)
localStorage.setItem('tel', tel)
localStorage.setItem('email', email)
import { callUserInfo, checkCookies } from './CheckDB';
export function haveLogined() {
callUserInfo().then((res) => {
if (res && checkCookies()) {
return true
}
else {
console.log('object')
console.log(res)
}
})
}
export async function handleLogout() {
localStorage.clear()
await axios.get('/api/auth/logout')
window.location.href = '/'
export function isOauth(value) {
const TFoauth = value
return TFoauth;
}
export function isLogined() {
const userId = checkCookies()
if (userId) {
return userId
} else {
const whetherlogin = localStorage.getItem('login')
if (whetherlogin === 'false') {
return false
}
}
export function isAdmin() {
const role = localStorage.getItem('role')
if (role === 'admin') {
else {
return true
} else {
return false
}
}
export function isOauth(value) {
const TFoauth = value
return TFoauth;
}
// export async function doeCode() {
// const response = await axios.get('http://175.125.254.72:8090/api/data/loccode')
// // console.log('res::', response.data.locCodes)
// const resData = response.data.locCodes
// const doe = resData.DOE
// // console.log('dd', doe) //object
// // console.log('dd::', doe[doe.length-1])
// // console.log('values::', Object.values(doe))
// const doeValue = Object.values(doe)
// // console.log('@@@11', doeValue[0]['code_doe'], typeof(doeValue[0]['code_doe']))
// // console.log('@@@22', doeValue[0]['name_doe'], typeof(doeValue[0]['name_doe']))
// return doeValue
// }
\ No newline at end of file
export function logout() {
localStorage.setItem('login', false)
}
\ No newline at end of file
client/src/components/LocCodeChange.js
View file @ 8d02df63
......@@ -38,97 +38,93 @@ function LocCodeChange() {
borderColor: 'rgba(195, 195, 195, 0.753)',
}
const [does, setDoes] = useState([])
const [sggs, setSggs] = useState([])
const [emds, setEmds] = useState([])
const [sggsArray, setSggsArray] = useState([])
const [emdsArray, setEmdsArray] = useState([])
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')
const saveCodeEmd = localStorage.getItem('code_emd')
async function handleClickLoc() {
if (doeSelect.options[doeSelect.selectedIndex].text !== '도' && sggSelect.options[sggSelect.selectedIndex].text !== '시군구' && emdSelect.options[emdSelect.selectedIndex].text !== '읍면동') {
await axios.post('/api/edit-profile', { loc_code: saveCodeEmd })
.then(function (response) {
console.log('loc', response);
})
callUserInfo().then((res) => {
console.log('11', res[0])
})
// Local code 받아오기
useEffect(() => {
async function getLocCode() {
const res = await axios.get("/api/data/loccode")
const local_codes = res.data.contents.loc_code
localStorage.setItem('code_doe', doeSelect.value)
localStorage.setItem('name_doe', doeSelect.options[doeSelect.selectedIndex].text)
localStorage.setItem('code_sgg', sggSelect.value)
localStorage.setItem('name_sgg', sggSelect.options[sggSelect.selectedIndex].text)
localStorage.setItem('code_emd', emdSelect.value)
localStorage.setItem('name_emd', emdSelect.options[emdSelect.selectedIndex].text)
// if (localStorage.getItem('name_emd')) {
// Swal.fire({
// title: '변경되었습니다.',
// text: '축하드립니다!👏',
// icon: 'success',
// customClass: 'swal-wide',
// confirmButtonText: '확인',
// }).then((res) => {
// if (res.isConfirmed) {
// window.location.reload()
// }
// else {
// window.location.reload()
// }
// })
// }
setDoes(local_codes.DOE)
setSggs(local_codes.SGG)
setEmds(local_codes.EMD)
}
// else {
// Swal.fire({
// title: '실패',
// text: '전부 선택해주세요',
// icon: 'error',
// customClass: 'swal-wide',
// confirmButtonText: '확인'
// })
// }
}
async function getLocCode() {
const res = await axios.get("/api/data/loccode")
const local_codes = res.data.locCodes
setDoes(local_codes.DOE)
setSggs(local_codes.SGG)
setEmds(local_codes.EMD)
}
useEffect(() => {
getLocCode()
}, [])
function selectLocal() {
sggs.map(function (sggvalue) {
if (doeSelect.value == sggvalue['code_doe']) {
if (Number(doeSelect.value) === sggvalue['code_doe']) {
setSggsArray(sggvalue['sgg'])
}
})
emds.map(function (emdvalue) {
if (sggSelect.value == emdvalue['code_sgg'] && doeSelect.value == emdvalue['code_doe']) {
if ((Number(sggSelect.value) === emdvalue['code_sgg'])
&& (Number(doeSelect.value) === emdvalue['code_doe'])) {
setEmdsArray(emdvalue['emd'])
}
else {
return false
}
})
}
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
console.log(saveCodeEmd)
await axios.post('/api/edit-profile', { loc_code: saveCodeEmd }) // loccal code 수정
callUserInfo().then((res) => {
console.log('loc_code', res[0].loc_code)
if (res[0].loc_code) {
Swal.fire({
title: '변경되었습니다.',
text: '축하드립니다!👏',
icon: 'success',
customClass: 'swal-wide',
confirmButtonText: '확인',
}).then((res) => {
if (res.isConfirmed) {
window.location.reload()
}
else {
window.location.reload()
}
})
}
})
}
else {
Swal.fire({
title: '실패',
text: '전부 선택해주세요',
icon: 'error',
customClass: 'swal-wide',
confirmButtonText: '확인'
})
}
}
return (
<Row className='text-center w-100 my-2'>
......@@ -141,13 +137,13 @@ function LocCodeChange() {
</Card.Subtitle>
<hr />
<Card.Text className='m-0'>
<Form style={inboxstyled} onChange={selectLocal}>
<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}>
<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'>
<Form.Control as='select' size="sm" id='select-doe' required>
<option selected disabled>도</option>
{
does.map((doevalue) => (
......@@ -160,7 +156,7 @@ function LocCodeChange() {
</Col>
<Col md={4} xs={4} style={{ padding: '2px' }}>
<Form.Control as='select' size="sm" id='select-sgg'>
<Form.Control as='select' size="sm" id='select-sgg' required>
<option selected disabled>시군구</option>
{
sggsArray.map((sggvalue) => (
......@@ -173,7 +169,7 @@ function LocCodeChange() {
</Col>
<Col md={4} xs={4} style={{ padding: '2px' }}>
<Form.Control as='select' size="sm" id='select-emd'>
<Form.Control as='select' size="sm" id='select-emd' required>
<option selected disabled>읍면동</option>
{
emdsArray.map((emdvalue) => (
......@@ -186,14 +182,12 @@ function LocCodeChange() {
</Col>
</Row>
</Form.Group>
<Button
variant='light' style={btnstyled2} type='submit'>
확인
</Button>
</Row>
</Form>
<Row className='d-flex justify-content-center'>
<Button
variant='light' style={btnstyled2} onClick={handleClickLoc}>
확인
</Button>
</Row>
</Card.Text>
</Card>
</Row>
......
client/src/components/LoginComp.js
View file @ 8d02df63
......@@ -28,34 +28,21 @@ function LoginComp() {
color: 'black'
}
const [emailSentAlert, setEmailSentAlert] = useState(false)
const [alertShow, setAlertShow] = useState(false)
const [emailAddress, setEmailAddress] = useState('')
function CheckEmailSend() {
localStorage.setItem('login_email_Address', emailAddress)
const emailIs = localStorage.getItem('login_email_Address').split('@')[1]
if (emailIs) {
setAlertShow(true)
setEmailSentAlert(false)
}
else {
setAlertShow(true)
setEmailSentAlert(true)
}
}
const [mailSend, setMailSend] = useState(false)
function addressUrl() {
const afterAt = localStorage.getItem('login_email_Address').split('@')[1]
const afterAt = emailAddress.split('@')[1]
if (afterAt == ('naver.com' || 'gmail.com' || 'daum.net')) {
const newLink = 'https://www.' + afterAt;
window.open(newLink);
}
if (afterAt == 'korea.ac.kr' ) {
if (afterAt == 'korea.ac.kr') {
window.open('https://www.gmail.com');
}
else {
else {
window.open();
}
}
......@@ -64,12 +51,13 @@ function LoginComp() {
setEmailAddress(event.target.value)
}
console.log(emailAddress)
async function handleSubmit(event) {
event.preventDefault();
const res = await axios.post("/api/login", { email: emailAddress })
console.log(res)
console.log('mail_sending : ', res.data.contents.mail_sending)
setMailSend(res.data.contents.mail_sending)
setAlertShow(true)
localStorage.setItem('login', true)
}
......@@ -85,7 +73,7 @@ function LoginComp() {
<hr />
<Card.Text>
<Row className='m-auto d-flex justify-content-center' style={{ width: '80%' }}>
{!emailSentAlert ?
{mailSend ?
<Alert show={alertShow} variant={'success'}>
<Col>
😍 이메일 전송이 완료 되었습니다.
......@@ -107,13 +95,10 @@ function LoginComp() {
</Row>
<Form style={inboxstyled} onSubmit={handleSubmit}>
<FloatingLabel
label="Email"
>
<Form.Control type="email" placeholder="Email" onChange={handleChange} />
<FloatingLabel label="Email">
<Form.Control type="email" placeholder="Email" onChange={handleChange} required/>
</FloatingLabel>
<Button variant='light' className='mt-3' id='formbtn' onClick={CheckEmailSend} type='submit'>
<Button variant='light' className='mt-3' id='formbtn' type='submit'>
LOGIN
</Button>
</Form>
......
client/src/components/MainLayer.js
View file @ 8d02df63
import React, { useEffect, useState } from 'react'
import React from 'react'
import { Button, Image, Row, ButtonGroup, Form, Col } from 'react-bootstrap';
import { Link } from 'react-router-dom';
import '../App.css'
import UserInfo from './UserInfo';
import { kakaoLogout } from '../utils/Oauth';
import axios from 'axios';
import { callUserInfo, deleteCookie } from '../utils/CheckDB';
import { checkCookies } from '../utils/CheckDB';
import UsingAircon from './UsingAircon';
import { isLogined } from '../utils/Auth';
function MainLayer() {
......@@ -36,42 +35,9 @@ function MainLayer() {
}
const [airUsing, setAirUsing] = useState(false)
useEffect(() => {
callUserInfo().then((res) => {
if (res !== []) {
console.log(res[0])
}
else {
console.log(res)
}
})
}, [])
async function airChange() {
setAirUsing(!airUsing)
await axios.post('/api/edit-profile', { using_aircon: !airUsing })
.then(function (response) {
console.log('res', response);
callUserInfo().then((res) => {
if (res !== []) {
console.log(res[0])
}
else {
console.log(res)
}
})
})
.catch(function (error) {
console.log('err', error);
});
}
return (
<Col>
<Row className='d-flex align-items-center m-auto w-100 p-0'>
<Link to='/' className='p-0 m-auto'>
......@@ -83,26 +49,16 @@ function MainLayer() {
<UserInfo />
</Row>
{checkCookies() &&
<Form
key='checkbox' className="d-flex justify-content-center w-100" style={{ flexDirection: 'row-reverse' }}>
<Form.Check
type='switch'
id='airconditioner'
label='에어컨 사용중'
onChange={airChange}
checked={airUsing}
/>
</Form>
{isLogined() &&
<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' }}>
{checkCookies() ?
{isLogined() ?
//true
<Button variant='light' style={btnstyled} onClick={kakaoLogout}>
{/* || deleteCookie('acs_token') */}
로그아웃
</Button>
:
......@@ -114,7 +70,7 @@ function MainLayer() {
</Button>
}
{!checkCookies() &&
{!isLogined() &&
<Button variant='light' style={btnstyled}>
<Link to='/signup' id='btnlink'>
회원가입
......
client/src/components/NicknameChange.js
View file @ 8d02df63
import axios from 'axios';
import React, { useEffect, useState } from 'react'
import { Row, Card, Col, Form, Button, FloatingLabel } from 'react-bootstrap';
import { callUserInfo } from '../utils/CheckDB';
import Swal from 'sweetalert2';
function NicknameChange() {
......@@ -32,17 +32,31 @@ function NicknameChange() {
function handleChange({ target: { value } }) {
setInputname(value)
}
console.log(inputname)
async function handleSubmit(event) {
event.preventDefault();
await axios.post('/api/edit-profile', { nick_name: inputname })
.then(function (response) {
console.log(response);
})
callUserInfo().then((res) => {
console.log('11', res[0])
})
if (inputname !== '') {
await axios.post('/api/edit-profile', { nick_name: inputname })
.then(function (response) {
console.log(response.data.msg);
if (response.data.msg === 'OK!') {
Swal.fire({
title: '변경되었습니다.',
text: '축하드립니다!👏',
icon: 'success',
customClass: 'swal-wide',
confirmButtonText: '확인',
}).then(function (response) {
if (response.isConfirmed) {
window.location.reload()
}
})
}
else {
console.log('ERROR')
}
})
}
// window.location.reload();
};
......@@ -62,7 +76,7 @@ function NicknameChange() {
<Card.Text className='m-0'>
<Form style={inboxstyled} onSubmit={handleSubmit}>
<FloatingLabel label="Nickname">
<Form.Control type="text" placeholder="닉네임 변경" id='nickname' onChange={handleChange} />
<Form.Control type="text" placeholder="닉네임 변경" id='nickname' onChange={handleChange} required/>
</FloatingLabel>
<Button variant='light' className='mt-3' id='formbtn' type='submit'>
변 경
......
client/src/components/SignupComp.js
View file @ 8d02df63
......@@ -3,7 +3,6 @@ import '../App.css'
import { Form, Button, Row, Col, Card, Alert, FloatingLabel } from 'react-bootstrap';
import { LoginWithKakao } from '../utils/Oauth';
import axios from 'axios';
import { callUserInfo } from '../utils/CheckDB';
function SignupComp() {
......@@ -43,30 +42,22 @@ function SignupComp() {
const { name, value } = event.target
setFormValues({ ...formValues, [name]: value })
}
// console.log('???', formValues)
async function handleSubmit(event) {
event.preventDefault();
await axios.post("/api/signup", formValues)
}
const [userInfo, setUserInfo] = useState([])
function CheckUserExist() {
setUserInfo(callUserInfo())
const res = await axios.post("/api/signup", formValues)
console.log('existing_user : ', res.data.contents.existing_user)
setUserExist(res.data.contents.existing_user)
setAlertShow(true)
if (userInfo) {
setUserExist(true)
// 기존회원
}
if (callUserInfo() === undefined) {
}
setUserExist(false)
// 신규회원
useEffect(() => {
async function test() {
const res = await axios.get('/api/signup')
console.log(res.contents)
}
}
console.log(callUserInfo())
console.log(userExist)
test()
}, [])
return (
......@@ -128,7 +119,7 @@ function SignupComp() {
/>
</FloatingLabel>
<Button variant='light' className='mt-3' id='formbtn' type='submit' onClick={CheckUserExist}>
<Button variant='light' className='mt-3' id='formbtn' type='submit'>
Sign Up
</Button>
</Form>
......
client/src/components/UserInfo.js
View file @ 8d02df63
......@@ -4,10 +4,13 @@ import '../App.css'
import { Link } from 'react-router-dom';
import { callUserInfo, checkCookies } from '../utils/CheckDB';
import axios from 'axios';
import { isLogined } from '../utils/Auth';
function UserInfo() {
const islogin = localStorage.getItem('login')
const cardstyled = {
margin: 'auto',
padding: '1em 0.5em 1em 0.5em',
......@@ -17,56 +20,38 @@ function UserInfo() {
borderWidth: '3px',
borderRadius: '20px',
borderColor: 'rgba(195, 195, 195, 0.753)',
color: 'rgb(110, 189, 142)',
}
const btnstyled2 = {
background: 'white',
margin: 'auto',
borderWidth: '2px',
// padding: '0',
fontSize: '0.7em',
color: 'rgb(110, 189, 142)',
borderColor: 'rgba(195, 195, 195, 0.753)',
// borderRadius: '20px',
width: '50%'
}
const localname_doe = localStorage.getItem('name_doe')
const localname_sgg = localStorage.getItem('name_sgg')
const localname_emd = localStorage.getItem('name_emd')
const localcode_emd = localStorage.getItem('code_emd')
const [userNick, setUserNick] = useState('')
const [createdTime, setCreatedTime] = useState('')
useEffect(() => {
callUserInfo().then((res) => {
if (res !== []) {
if (isLogined()) {
setUserNick(res[0]['nick_name'])
const dateStr = res[0]['created_at'].split('T')[0].split('-')
console.log(dateStr)
const now = new Date();
const year = now.getFullYear(); // 년
const month = now.getMonth() + 1; // 월 0부터 시작
const day = now.getDate(); // 일
const stDate = new Date(dateStr[0], dateStr[1], dateStr[2])
console.log(stDate)
const endDate = new Date(year, month, day)
console.log(endDate)
const stDate = new Date(dateStr[0], dateStr[1], dateStr[2]) // 가입 날짜
const endDate = new Date(year, month, day) // 현재 시간
const btMs = endDate.getTime() - stDate.getTime() // 주어진 날짜 사이의 경과 시간 (밀리 초)
console.log(btMs / 1000)
const btDay = btMs / (1000 * 60 * 60 * 24)
console.log(btDay)
const btDay = btMs / (1000 * 60 * 60 * 24) // 초 -> 일
setCreatedTime(btDay)
}
......@@ -74,6 +59,39 @@ function UserInfo() {
console.log('Not Logined')
}
})
}, [checkCookies()])
const codeInit = {
code_doe: '',
code_sgg: '',
code_emd: ''
}
const [codeValue, setCodeValue] = useState(codeInit)
useEffect(() => {
// user-info 에서 loc_code
callUserInfo().then((res) => {
if (isLogined()) {
console.log(res[0].loc_code)
const newCode = res[0].loc_code
const newdoe = String(newCode).substring(0, 2)
const newsgg = String(newCode).substring(0, 5)
const newemd = String(newCode).substring(0,)
async function CompareCode() {
await axios.get('/api/data/loccode').then((response) => {
console.log(response.data.contents.loc_code)
})
}
CompareCode()
}
else {
console.log(res)
}
})
}, [])
return (
......@@ -81,7 +99,7 @@ function UserInfo() {
<Card style={cardstyled} id='localName'>
<Card.Title>
<strong>
{checkCookies() ?
{isLogined() ?
<h3>
{`${userNick}`}
</h3>
......@@ -98,14 +116,15 @@ function UserInfo() {
<hr />
<Row style={{ alignItems: 'center', margin: 'auto', justifyContent: 'center' }}>
<Card.Subtitle>
{localname_emd ?
{isLogined() ?
<p className='mb-2'>
????????
{/*
{`${localname_doe}`}
<br />
{`${localname_sgg}`}
<br />
{`${localname_emd}`}
{`${localname_emd}`} */}
</p>
:
<p className='mb-2'>
......@@ -113,7 +132,7 @@ function UserInfo() {
</p>
}
</Card.Subtitle>
{checkCookies() &&
{isLogined() &&
<Button variant='light' className='m-auto d-flex' style={btnstyled2}>
<Link to='/edit' className='w-100' style={{ textDecoration: 'none', color: 'rgb(110, 189, 142)' }}>
변경
......@@ -121,7 +140,7 @@ function UserInfo() {
</Button>
}
</Row>
{checkCookies() &&
{isLogined() &&
<Card.Text>
<hr />
......@@ -129,7 +148,7 @@ function UserInfo() {
<p style={{ fontWeight: '300', margin: '0' }}>
환경을 향한 노력
</p>
<h3 style={{ fontWeight: '300', color: '#2b90d9', margin: '0' }}>
<h3 style={{ fontWeight: '300', color: '#2b90d9', margin: '0' }}>
{createdTime}일차
</h3>
......
client/src/components/UsingAircon.js 0 → 100644
View file @ 8d02df63
import axios from "axios";
import React, { useEffect, useState } from "react";
import { Form } from "react-bootstrap";
import { callUserInfo } from "../utils/CheckDB";
import { isLogined } from './../utils/Auth';
function UsingAircon() {
const [airUsing, setAirUsing] = useState(false)
useEffect(() => {
callUserInfo().then((res) => {
if (isLogined()) {
setAirUsing(res[0].using_aircon)
}
else {
console.log(res)
}
})
}, [])
async function airChange() {
setAirUsing(!airUsing)
await axios.post('/api/edit-profile', { using_aircon: !airUsing })
.then(
callUserInfo().then((res) => {
if (isLogined()) {
console.log('using_aircon :', res[0].using_aircon)
}
else {
console.log(res)
}
})
)
.catch(function (error) {
console.log('err', error);
});
}
return (
<Form
key='checkbox' className="d-flex justify-content-center w-100" style={{ flexDirection: 'row-reverse' }}>
<Form.Check
type='switch'
id='airconditioner'
label='에어컨 사용중'
onChange={airChange}
checked={airUsing}
/>
</Form>
)
}
export default UsingAircon;
\ No newline at end of file
client/src/pages/Home.js
View file @ 8d02df63
......@@ -8,8 +8,6 @@ import ChartLine from '../components/ChartLine';
import ChartDoughnut from '../components/ChartDoughnut';
import Donation from '../components/Donation';
function Home() {
const constyled = {
display: 'flex',
......
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