Skip to content

GitLab

Commit cac25e0d authored by Spark's avatar Spark
Browse files

GUI + doe SGG + EMD

parent c0a4250c
Expand all Show whitespace changes
Inline Side-by-side
client/package-lock.json
View file @ cac25e0d
This diff is collapsed.
client/package.json
View file @ cac25e0d
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
"@testing-library/react": "^11.2.7", "@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3", "@testing-library/user-event": "^12.8.3",
"axios": "^0.21.1", "axios": "^0.21.1",
"bootstrap": "^4.6.0", "bootstrap": "^5.0.2",
"chart.js": "^3.4.0", "chart.js": "^3.4.0",
"moment": "^2.29.1", "moment": "^2.29.1",
"ngx-spinner": "^12.0.0", "ngx-spinner": "^12.0.0",
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
"pg": "^8.6.0", "pg": "^8.6.0",
"pg-hstore": "^2.3.4", "pg-hstore": "^2.3.4",
"react": "^17.0.2", "react": "^17.0.2",
"react-bootstrap": "^1.6.1", "react-bootstrap": "^2.0.0-beta.4",
"react-chartjs-2": "^3.0.3", "react-chartjs-2": "^3.0.3",
"react-copy-to-clipboard": "^5.0.3", "react-copy-to-clipboard": "^5.0.3",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
...@@ -27,6 +27,7 @@ ...@@ -27,6 +27,7 @@
"react-redux": "^7.2.4", "react-redux": "^7.2.4",
"react-router-dom": "^5.2.0", "react-router-dom": "^5.2.0",
"react-scripts": "4.0.3", "react-scripts": "4.0.3",
"react-select": "^4.3.1",
"react-use": "^17.2.4", "react-use": "^17.2.4",
"sass": "^1.35.1", "sass": "^1.35.1",
"sequelize": "^6.6.5", "sequelize": "^6.6.5",
......
client/src/App.js
View file @ cac25e0d
import React from 'react'; import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom'; import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import './App.css'; import './App.css';
import Home from './pages/Home'; 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 LocalCodePage from './pages/LocalCodePage'; import LocalCodePage from './pages/LocalCodePage';
import PrivateRoute from './utils/PrivateRoutes';
import PageNotFound from './components/PageNotFound';
function App() { function App() {
return ( return (
<Router> <Router>
<> <Switch>
<Route exact path='/' component={Home} /> <Route exact path='/' component={Home} />
<Route exact path='/signup' component={SignupPage} /> <Route path='/signup' component={SignupPage} />
<Route exact path='/login' component={LoginPage} /> <Route path='/login' component={LoginPage} />
<Route exact path='/local_code' component={LocalCodePage} />
</> <PrivateRoute path='/local_code'>
<LocalCodePage />
</PrivateRoute>
<Route component={PageNotFound} />
</Switch>
</Router> </Router>
); );
......
client/src/Utils/Auth.js
View file @ cac25e0d
import axios from 'axios'; import axios from 'axios';
import { useState } from 'react';
import Oauth from './Oauth';
export function handleLogin({ userId, role, name, tel, email }) { export function handleLogin({ userId, role, name, tel, email }) {
localStorage.setItem('id', userId) localStorage.setItem('id', userId)
...@@ -17,7 +15,7 @@ export async function handleLogout() { ...@@ -17,7 +15,7 @@ export async function handleLogout() {
} }
export function isLogined() { export function isLogined() {
const userId = localStorage.getItem('id') const userId = localStorage.getItem('nickname')
if (userId) { if (userId) {
return userId return userId
} else { } else {
......
client/src/Utils/Oauth.js
View file @ cac25e0d
import { Spinner, Button, Row, Alert } from 'react-bootstrap';
import Swal from 'sweetalert2' import Swal from 'sweetalert2'
import '../App.css' import '../App.css'
...@@ -86,18 +85,3 @@ export function kakaoLogout() { ...@@ -86,18 +85,3 @@ export function kakaoLogout() {
}) })
}) })
} }
\ No newline at end of file
export function Loading() {
return (
<Row className='d-block'>
<Button id='formbtn' className='d-flex justify-content-center align-items-center m-auto' style={{ width: '200px', height: '200px', flexDirection: 'column' }} disabled>
<Spinner animation="border" role="status">
<span className="sr-only">Loading...</span>
</Spinner>
<br />
Loading...
</Button>
</Row>
)
}
\ No newline at end of file
client/src/Utils/PrivateRoutes.js 0 → 100644
View file @ cac25e0d
import React from 'react';
import { Redirect, Route } from 'react-router-dom';
import { isLogined } from '../utils/Auth';
function PrivateRoute({ path, children }) {
if (isLogined()) {
return (
<Route path={path}>
{children}
</Route>
)
} else {
alert('권한이 없습니다')
return (
<Redirect to='/' />
)
}
}
export default PrivateRoute
// Swal.fire({
// title: '권한이 없습니다.',
// text: ' 로그인을 진행해주세요',
// icon: 'warning',
// confirmButtonText: '확인',
// })
// .then((res) => {
// if (res.isConfirmed) {
// window.location.replace('/')
// }
// else {
// window.location.replace('/')
// }
// })
\ No newline at end of file
client/src/components/Loading.js 0 → 100644
View file @ cac25e0d
import React from 'react'
import { Spinner, Row, Button } from 'react-bootstrap';
function Loading() {
return (
<Button id='formbtn' className='d-flex justify-content-center align-items-center m-auto' style={{ width: '200px', height: '200px', flexDirection: 'column' }} disabled>
<Spinner animation="border" role="status">
<span className="sr-only">Loading...</span>
</Spinner>
<br />
Loading...
</Button>
)
}
export default Loading;
\ No newline at end of file
client/src/components/LocCodeChange.js
View file @ cac25e0d
import React, { useEffect, useState } from 'react' import React, { useEffect, useState } from 'react'
import '../App.css' import '../App.css'
import { Form, Button, Row, Col, Card, DropdownButton, Dropdown, ButtonGroup } from 'react-bootstrap'; import { Form, Button, Row, Col, Card, DropdownButton, Dropdown, ButtonGroup, Collapse, Fade } from 'react-bootstrap';
import axios from 'axios'; import axios from 'axios';
import Swal from 'sweetalert2'
function LocCodeChange() { function LocCodeChange() {
...@@ -20,7 +22,6 @@ function LocCodeChange() { ...@@ -20,7 +22,6 @@ function LocCodeChange() {
const inboxstyled = { const inboxstyled = {
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
maxWidth: '80%',
justifyContent: 'center', justifyContent: 'center',
margin: 'auto', margin: 'auto',
padding: '10px' padding: '10px'
...@@ -28,46 +29,96 @@ function LocCodeChange() { ...@@ -28,46 +29,96 @@ function LocCodeChange() {
const btnstyled2 = { const btnstyled2 = {
background: 'white', background: 'white',
margin: '1px', width: '50%',
maxWidth: 'fit-content',
borderWidth: '2px', borderWidth: '2px',
color: 'rgb(110, 189, 142)', color: 'rgb(110, 189, 142)',
borderColor: 'rgba(195, 195, 195, 0.753)', borderColor: 'rgba(195, 195, 195, 0.753)',
borderRadius: '20px'
} }
const [locCodeShow, setLocCodeShow] = useState(false) const [does, setDoes] = useState([])
const [sggs, setSggs] = useState([])
const [emds, setEmds] = useState([])
const [sggsArray, setSggsArray] = useState([])
const [emdsArray, setEmdsArray] = useState([])
const doeSelect = document.getElementById('select-doe')
const sggSelect = document.getElementById('select-sgg')
const emdSelect = document.getElementById('select-emd')
// console.log(doeSelect.options[doeSelect.selectedIndex].text)
// console.log(sggSelect.options[sggSelect.selectedIndex].text)
// console.log(emdSelect.options[emdSelect.selectedIndex].text)
function handleClickLoc() { function handleClickLoc() {
setLocCodeShow(true); if (doeSelect.options[doeSelect.selectedIndex].text !== '도' && sggSelect.options[sggSelect.selectedIndex].text !== '시군구' && emdSelect.options[emdSelect.selectedIndex].text !== '읍면동') {
const auth = document.getElementById('loc-code') localStorage.setItem('code_doe', doeSelect.value)
auth.style.visibility = 'visible' 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()
}
})
}
}
else {
Swal.fire({
title: '실패',
text: '전부 선택해주세요',
icon: 'error',
customClass: 'swal-wide',
confirmButtonText: '확인'
})
} }
const [does, setDoes] = useState([]) }
const [sggs, setSggs] = useState([])
// const [emds, setEmds] = useState([])
const does_array = []
const sggs_array = []
// const emds_array = []
does.map((doesObj) => does_array.push(doesObj['name_doe']))
sggs.map((sggsObj) => console.log(sggsObj['sgg']))
console.log('does :: ', does)
console.log('does_array:::', does_array)
async function getLocCode() { async function getLocCode() {
const res = await axios.get("http://localhost:4500/api/data/loccode") const res = await axios.get("http://localhost:4500/api/data/loccode")
const local_codes = res.data.locCodes const local_codes = res.data.locCodes
console.log('local_codes::: ', local_codes)
setDoes(local_codes.DOE) setDoes(local_codes.DOE)
setSggs(local_codes.SGG) setSggs(local_codes.SGG)
setEmds(local_codes.EMD)
} }
useEffect(() => { useEffect(() => {
getLocCode() getLocCode()
}, []) }, [])
function selectLocal() {
sggs.map(function (sggvalue) {
if (doeSelect.value == sggvalue['code_doe']) {
setSggsArray(sggvalue['sgg'])
}
})
emds.map(function (emdvalue) {
if (sggSelect.value == emdvalue['code_sgg']) {
setEmdsArray(emdvalue['emd'])
}
})
}
return ( return (
<Row className='text-center w-100 my-2'> <Row className='text-center w-100 my-2'>
<Card style={cardstyled}> <Card style={cardstyled}>
...@@ -81,48 +132,55 @@ function LocCodeChange() { ...@@ -81,48 +132,55 @@ function LocCodeChange() {
<Card.Text> <Card.Text>
<Form style={inboxstyled}> <Form style={inboxstyled}>
<Row className='m-auto w-100 d-flex justify-content-center'> <Row md={12} xs={12} className='m-auto w-100 d-flex justify-content-center' style={{ padding: '0', display: 'flex', justifyContent: 'center', width: '100%' }}>
<Col md={12} xs={12} style={{ padding: '0', display: 'flex', justifyContent: 'center', width: '100%' }}> <Form.Group className='m-auto w-100' style={btnstyled2}>
<Form.Group style={btnstyled2}> <Row className='m-auto pb-3' onChange={selectLocal}>
<Form.Control as='select' aria-label="Floating label select example"> <Col md={4} xs={4} style={{ padding: '2px' }}>
<option>도</option>
{does.map((doe) => ( <Form.Control as='select' size="sm" id='select-doe'>
<option value={`${doe["code_doe"]}`}> <option selected disabled>도</option>
{`${doe["name_doe"]}`}</option> {
))} does.map((doevalue) => (
</Form.Control> <option value={`${doevalue["code_doe"]}`}>
<Form.Control as='select' aria-label="Floating label select example"> {`${doevalue["name_doe"]}`}
<option>시군구</option> </option>
{does.map((doe) => ( ))
<option value={`${doe["code_doe"]}`}> }
{`${doe["name_doe"]}`}</option>
))}
</Form.Control>
<Form.Control as='select' aria-label="Floating label select example">
<option>읍면동</option>
{does.map((doe) => (
<option value={`${doe["code_doe"]}`}>
{`${doe["name_doe"]}`}</option>
))}
</Form.Control> </Form.Control>
</Col>
</Form.Group> <Col md={4} xs={4} style={{ padding: '2px' }}>
<Button variant='light' style={btnstyled2} onClick={!locCodeShow && handleClickLoc}>확인</Button> <Form.Control as='select' size="sm" id='select-sgg'>
<option selected disabled>시군구</option>
{
sggsArray.map((sggvalue) => (
<option value={`${sggvalue["code_sgg"]}`}>
{`${sggvalue["name_sgg"]}`}
</option>
))
}
</Form.Control>
</Col> </Col>
<Col md={6} xs={4} id='loc-code' style={{
margin: '5px', <Col md={4} xs={4} style={{ padding: '2px' }}>
border: 'solid', <Form.Control as='select' size="sm" id='select-emd'>
borderColor: 'rgb(110, 189, 142)', <option selected disabled>읍면동</option>
display: 'flex', {
justifyContent: 'center', emdsArray.map((emdvalue) => (
padding: '2px', <option value={`${emdvalue["code_emd"]}`}>
// visibility: 'hidden', {`${emdvalue["name_emd"]}`}
transition: 'all 2s' </option>
}}> ))
지역코드 }
</Form.Control>
</Col> </Col>
</Row> </Row>
<Button
variant='light' style={btnstyled2} onClick={handleClickLoc}>
확인
</Button>
</Form.Group>
</Row>
</Form> </Form>
</Card.Text> </Card.Text>
......
client/src/components/LocalCode.js
View file @ cac25e0d
...@@ -7,7 +7,10 @@ import { Link } from 'react-router-dom'; ...@@ -7,7 +7,10 @@ import { Link } from 'react-router-dom';
function LocalCode() { function LocalCode() {
const logined = localStorage.getItem('nickname') const nickname = localStorage.getItem('nickname')
const localname_doe = localStorage.getItem('name_doe')
const localname_sgg = localStorage.getItem('name_sgg')
const localname_emd = localStorage.getItem('name_emd')
const cardstyled = { const cardstyled = {
margin: 'auto', margin: 'auto',
...@@ -29,14 +32,13 @@ function LocalCode() { ...@@ -29,14 +32,13 @@ function LocalCode() {
borderColor: 'rgba(195, 195, 195, 0.753)', borderColor: 'rgba(195, 195, 195, 0.753)',
borderRadius: '20px', borderRadius: '20px',
} }
const [localChange, setLocalChange] = useState(false)
const nickname = localStorage.getItem('nickname')
return ( return (
<> <>
<Col className='text-center pt-3 pb-2 px-0'> <Col className='text-center pt-3 pb-2 px-0'>
<Card style={cardstyled} id='localName'> <Card style={cardstyled} id='localName'>
<Card.Title> <Card.Title>
{logined ? {nickname ?
`${nickname}` `${nickname}`
: :
<> <>
...@@ -44,31 +46,24 @@ function LocalCode() { ...@@ -44,31 +46,24 @@ function LocalCode() {
</> </>
}, 환영합니다. }, 환영합니다.
</Card.Title> </Card.Title>
<Row style={{ alignItems: 'center', margin: 'auto', whiteSpace: 'nowrap' }}> <Row style={{ alignItems: 'center', margin: 'auto', whiteSpace: 'nowrap', justifyContent: 'center' }}>
<Card.Subtitle> <Card.Subtitle>
지역코드 {localname_emd ?
`${localname_doe} ${localname_sgg} ${localname_emd}`
:
<>
지역을 입력해 주세요
</>
}
</Card.Subtitle> </Card.Subtitle>
{logined && {nickname &&
<Button variant='light' className='ml-1' style={btnstyled2}> <Button variant='light' className='ml-1 m-auto' style={btnstyled2}>
<Link to='/local_code' style={{ textDecoration: 'none', color: 'rgb(110, 189, 142)' }}> <Link to='/local_code' style={{ textDecoration: 'none', color: 'rgb(110, 189, 142)' }}>
변경 변경
</Link> </Link>
</Button> </Button>
} }
</Row> </Row>
<Modal
show={localChange}
onHide={() => setLocalChange(false)}
>
<Modal.Header className='d-block text-center'>
<Modal.Title>
마이페이지
</Modal.Title>
</Modal.Header>
<Modal.Body>
지역이름 (지역코드)
</Modal.Body>
</Modal>
환경을 향한 노력 <br /> 환경을 향한 노력 <br />
<strong>OOO 일 째</strong> <strong>OOO 일 째</strong>
......
client/src/components/PageNotFound.js 0 → 100644
View file @ cac25e0d
import React, { useEffect } from 'react'
import { Row, Container } from 'react-bootstrap';
import { Redirect } from 'react-router-dom';
import Loading from './Loading';
// const goHome = setTimeout(window.location.replace('/'), 3000);
function PageNotFound() {
useEffect(() => {
setTimeout(window.location.replace('/'), 5000);
}, [])
return (
<Container className='d-flex justify-content-center align-items-center' style={{ flexDirection: 'column', height: '70vh' }} >
<Row style={{marginBottom: '1em', fontSize: '2rem', fontWeight: 'bold' }}>
잘못된 접근 입니다. <br />PAGE NOT FOUND
</Row>
<Row>
<Loading />
</Row>
</Container>
)
}
export default PageNotFound;
\ No newline at end of file
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