Commit 787d8e4c authored by KangMin An's avatar KangMin An
Browse files

Merge remote-tracking branch 'gitlab/who' into premaster

parents a675d529 368e8dbe
...@@ -34,6 +34,7 @@ ...@@ -34,6 +34,7 @@
"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",
"sweetalert2": "^11.0.19",
"web-vitals": "^1.1.2" "web-vitals": "^1.1.2"
} }
}, },
...@@ -20778,6 +20779,14 @@ ...@@ -20778,6 +20779,14 @@
"boolbase": "~1.0.0" "boolbase": "~1.0.0"
} }
}, },
"node_modules/sweetalert2": {
"version": "11.0.19",
"resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.0.19.tgz",
"integrity": "sha512-fJkiIhvOjDux8Ns08uWNdWPcLql5tpMpiuc78sYLjY9zTBvkj7rvmPHHckdkAZLKVGUmOfy8ckDZ1ElS0lLpjw==",
"funding": {
"url": "https://sweetalert2.github.io/#donations"
}
},
"node_modules/symbol-tree": { "node_modules/symbol-tree": {
"version": "3.2.4", "version": "3.2.4",
"resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz", "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
...@@ -39678,6 +39687,11 @@ ...@@ -39678,6 +39687,11 @@
} }
} }
}, },
"sweetalert2": {
"version": "11.0.19",
"resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.0.19.tgz",
"integrity": "sha512-fJkiIhvOjDux8Ns08uWNdWPcLql5tpMpiuc78sYLjY9zTBvkj7rvmPHHckdkAZLKVGUmOfy8ckDZ1ElS0lLpjw=="
},
"symbol-tree": { "symbol-tree": {
"version": "3.2.4", "version": "3.2.4",
"resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz", "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
...@@ -30,6 +30,7 @@ ...@@ -30,6 +30,7 @@
"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",
"sweetalert2": "^11.0.19",
"web-vitals": "^1.1.2" "web-vitals": "^1.1.2"
}, },
"scripts": { "scripts": {
......
import { Spinner, Button, Row } from 'react-bootstrap'; import { Spinner, Button, Row, Alert } from 'react-bootstrap';
import Swal from 'sweetalert2'
import '../App.css'
// export const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=code`; // export const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=code`;
const { Kakao } = window; const { Kakao } = window;
export function LoginWithKakao() { export function LoginWithKakao() {
//authObj : response.data에 들어가 있는 부분 object 형식 //authObj : response.data에 들어가 있는 부분 object 형식
Kakao.Auth.loginForm({ Kakao.Auth.loginForm({
...@@ -12,7 +14,6 @@ export function LoginWithKakao() { ...@@ -12,7 +14,6 @@ export function LoginWithKakao() {
scope: 'account_email, profile_nickname', scope: 'account_email, profile_nickname',
// 추가 동의 받을 동의 항목 ID 목록, 하나의 문자열에 여러 개의 ID를 쉼표(,)로 구분하여 전달 // 추가 동의 받을 동의 항목 ID 목록, 하나의 문자열에 여러 개의 ID를 쉼표(,)로 구분하여 전달
success: function (authObj) { success: function (authObj) {
alert('로그인 되었습니다. @@@@@@@@@')
console.log(JSON.stringify(authObj)) console.log(JSON.stringify(authObj))
console.log('accT ;;', authObj.access_token) console.log('accT ;;', authObj.access_token)
...@@ -33,14 +34,29 @@ export function LoginWithKakao() { ...@@ -33,14 +34,29 @@ export function LoginWithKakao() {
localStorage.setItem('nickname', nickValue) localStorage.setItem('nickname', nickValue)
const nickname = localStorage.getItem('nickname') const nickname = localStorage.getItem('nickname')
console.log(nickname) console.log(nickname)
window.location.replace('/' + '?nickname=' + `${nickname}`) Swal.fire({
title: '로그인 성공!',
text: '🙌 환영합니다 🙌',
icon: 'success',
customClass: 'swal-wide',
confirmButtonText: '확인',
}).then((res) => {
if (res.isConfirmed) {
window.location.replace('/' + '?nickname=' + `${nickname}`)
}
else {
window.location.replace('/' + '?nickname=' + `${nickname}`)
}
})
} }
}); });
}, },
fail: function (err) { fail: function (err) {
alert(JSON.stringify(err)) alert(JSON.stringify(err))
console.log(JSON.stringify(err))
}, },
}) }
)
} }
export function kakaoLogout() { export function kakaoLogout() {
...@@ -53,9 +69,21 @@ export function kakaoLogout() { ...@@ -53,9 +69,21 @@ export function kakaoLogout() {
} }
Kakao.Auth.logout(function () { Kakao.Auth.logout(function () {
// 로그인 시 발급받은 토큰을 만료시키는 함수 // 로그인 시 발급받은 토큰을 만료시키는 함수
alert('logout ok\naccess token -> ' + Kakao.Auth.getAccessToken())
localStorage.clear(); localStorage.clear();
window.location.replace('/') Swal.fire({
title: '로그아웃 성공!',
text: '🙏 안녕히 가세요 🙏',
icon: 'warning',
customClass: 'swal-wide',
confirmButtonText: '확인',
}).then((res) => {
if (res.isConfirmed) {
window.location.replace('/')
}
else {
window.location.replace('/')
}
})
}) })
} }
......
import React 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 } from 'react-bootstrap';
import { useState } from 'react';
import axios from 'axios'; import axios from 'axios';
// import { doeCode } from '../utils/Auth';
function LocCodeChange() { function LocCodeChange() {
...@@ -28,7 +26,6 @@ function LocCodeChange() { ...@@ -28,7 +26,6 @@ function LocCodeChange() {
padding: '10px' padding: '10px'
} }
const btnstyled2 = { const btnstyled2 = {
background: 'white', background: 'white',
margin: '1px', margin: '1px',
...@@ -47,34 +44,32 @@ function LocCodeChange() { ...@@ -47,34 +44,32 @@ function LocCodeChange() {
auth.style.visibility = 'visible' auth.style.visibility = 'visible'
} }
// console.log(typeof (locCode())) const [does, setDoes] = useState([])
// console.log(locCode()) const [sggs, setSggs] = useState([])
// const [ddoe, setDdoe] = useState([]) // const [emds, setEmds] = useState([])
// async function DoeCode() { const does_array = []
// await doeCode().then((res) => { const sggs_array = []
// // // // for (let i = 0; i < res.length; i++) { // const emds_array = []
// // // console.log(res[0]['code_doe']) does.map((doesObj) => does_array.push(doesObj['name_doe']))
// // // console.log(0, res[0]['name_doe']) sggs.map((sggsObj) => console.log(sggsObj['sgg']))
// ddoe.push(res[0]['name_doe']) console.log('does :: ', does)
// ddoe.push(res[1]['name_doe']) console.log('does_array:::', does_array)
// console.log(ddoe)
// console.log(typeof(ddoe)) async function getLocCode() {
// // // } const res = await axios.get("http://localhost:4500/api/data/loccode")
// }) const local_codes = res.data.locCodes
// } console.log('local_codes::: ', local_codes)
setDoes(local_codes.DOE)
const res = axios.get("localhost:4500/d/loccode"); setSggs(local_codes.SGG)
// const does = res.data["locCodes"]["DOE"] // object }
useEffect(() => {
getLocCode()
}, [])
return ( return (
<Row className='text-center w-100 my-2'> <Row className='text-center w-100 my-2'>
{/* {DoeCode()} */}
{/* {data} */}
asd
<Card style={cardstyled}> <Card style={cardstyled}>
<Card.Title id='impactTitle'> <Card.Title id='impactTitle'>
Local Code Local Code
...@@ -84,22 +79,34 @@ function LocCodeChange() { ...@@ -84,22 +79,34 @@ function LocCodeChange() {
</Card.Subtitle> </Card.Subtitle>
<hr /> <hr />
<Card.Text> <Card.Text>
<Form style={inboxstyled}> <Form style={inboxstyled}>
<Row className='m-auto w-100 d-flex justify-content-center'> <Row className='m-auto w-100 d-flex justify-content-center'>
<Col md={12} xs={12} style={{ padding: '0', display: 'flex', justifyContent: 'center', width: '100%' }}> <Col md={12} xs={12} style={{ padding: '0', display: 'flex', justifyContent: 'center', width: '100%' }}>
{['', '시군구', '읍면동'].map((localname) => ( <Form.Group style={btnstyled2}>
<DropdownButton <Form.Control as='select' aria-label="Floating label select example">
variant='light' <option></option>
style={btnstyled2} {does.map((doe) => (
title='지역코드' <option value={`${doe["code_doe"]}`}>
as={ButtonGroup} {`${doe["name_doe"]}`}</option>
title={` ${localname} `}> ))}
</Form.Control>
<Dropdown.Item></Dropdown.Item> <Form.Control as='select' aria-label="Floating label select example">
<Dropdown.Item>Another action</Dropdown.Item> <option>시군구</option>
<Dropdown.Item>Something else here</Dropdown.Item> {does.map((doe) => (
</DropdownButton> <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.Group>
<Button variant='light' style={btnstyled2} onClick={!locCodeShow && handleClickLoc}>확인</Button> <Button variant='light' style={btnstyled2} onClick={!locCodeShow && handleClickLoc}>확인</Button>
</Col> </Col>
<Col md={6} xs={4} id='loc-code' style={{ <Col md={6} xs={4} id='loc-code' style={{
...@@ -109,8 +116,8 @@ function LocCodeChange() { ...@@ -109,8 +116,8 @@ function LocCodeChange() {
display: 'flex', display: 'flex',
justifyContent: 'center', justifyContent: 'center',
padding: '2px', padding: '2px',
visibility: 'hidden', // visibility: 'hidden',
transition: 'all 4s' transition: 'all 2s'
}}> }}>
지역코드 지역코드
</Col> </Col>
......
...@@ -31,6 +31,22 @@ function LoginComp() { ...@@ -31,6 +31,22 @@ function LoginComp() {
function CheckEmailSend() { function CheckEmailSend() {
setEmailSent(!emailSent) setEmailSent(!emailSent)
}
function addressUrl() {
localStorage.setItem('Email-Address', emailAddress)
const afterAt = localStorage.getItem('Email-Address').split('@')[1]
console.log(afterAt)
const newLink = 'https://www.' + afterAt;
window.open(newLink);
}
const [emailAddress, setEmailAddress] = useState('')
function handleChange(event) {
setEmailAddress(event.target.value)
console.log(emailAddress)
} }
return ( return (
...@@ -50,7 +66,7 @@ function LoginComp() { ...@@ -50,7 +66,7 @@ function LoginComp() {
<Col> <Col>
😍 이메일 전송이 완료 되었습니다. 😍 이메일 전송이 완료 되었습니다.
</Col> </Col>
<Alert.Link href='/' style={{ fontSize: '0.8em' }}> <Alert.Link href="" onClick={addressUrl} target='_blank' style={{ fontSize: '0.8em' }}>
이메일 확인 하러가기 이메일 확인 하러가기
</Alert.Link> </Alert.Link>
</Alert> </Alert>
...@@ -59,6 +75,9 @@ function LoginComp() { ...@@ -59,6 +75,9 @@ function LoginComp() {
<Col> <Col>
😭 이메일을 정확하게 적어주세요. 😭 이메일을 정확하게 적어주세요.
</Col> </Col>
<Alert.Link href="/signup" target='_blank' style={{ fontSize: '0.8em' }}>
회원가입 하러가기
</Alert.Link>
</Alert> </Alert>
} }
<Button onClick={() => setAlertShow(true)}>보여주고</Button> <Button onClick={() => setAlertShow(true)}>보여주고</Button>
...@@ -66,10 +85,10 @@ function LoginComp() { ...@@ -66,10 +85,10 @@ function LoginComp() {
</Row> </Row>
<Form style={inboxstyled}> <Form style={inboxstyled}>
<Form.Group controlId="formBasicEmail"> <Form.Group controlId="formBasicEmail">
<Form.Control type="email" placeholder="Email" /> <Form.Control type="email" placeholder="Email" onChange={handleChange} />
</Form.Group> </Form.Group>
<Button variant='light' id='formbtn' onClick={CheckEmailSend}>
<Button variant='light' type="submit" id='formbtn' onClick={CheckEmailSend}>
LOGIN LOGIN
</Button> </Button>
......
...@@ -38,6 +38,7 @@ function MainLayer() { ...@@ -38,6 +38,7 @@ function MainLayer() {
return ( return (
<> <>
<Row className='d-flex align-items-center m-auto w-100'> <Row className='d-flex align-items-center m-auto w-100'>
<Link to='/' className=' m-auto'> <Link to='/' className=' m-auto'>
<Image src='/images/EUE11.jpg' alt='EUE' style={boxstyled} /> <Image src='/images/EUE11.jpg' alt='EUE' style={boxstyled} />
......
...@@ -109,7 +109,7 @@ function SignupComp() { ...@@ -109,7 +109,7 @@ function SignupComp() {
<Button onClick={() => setAlertShow(true)}>보여주고</Button> <Button onClick={() => setAlertShow(true)}>보여주고</Button>
<Button onClick={() => setAlertShow(false)}>안보여주고</Button> <Button onClick={() => setAlertShow(false)}>안보여주고</Button>
</Row> </Row>
<Form style={inboxstyled} <Form style={inboxstyled}
onSubmit={handleSubmit}> onSubmit={handleSubmit}>
<Form.Group controlId="userEmail"> <Form.Group controlId="userEmail">
...@@ -138,7 +138,8 @@ function SignupComp() { ...@@ -138,7 +138,8 @@ function SignupComp() {
</Row> </Row>
</Form.Group> </Form.Group>
<Button variant='light' className='mt-2' type="submit" id='formbtn' onClick={CheckUserExist}> <Button variant='light' className='mt-2' id='formbtn' onClick={CheckUserExist}>
{/* type="submit" */}
Sign Up Sign Up
</Button> </Button>
</Form> </Form>
......
// # Global Routes
const BASE = "/api";
// # Data Routes
const DATA = "/data";
// Data - Collector
const DATA_INPUT = "/input";
// Data - Consumer
const DATA_USER = "/user";
const DATA_OUTSIDE = "/outside";
// # Local Code Data
const LOCCODE = "/loccode";
// # Auth
const SIGNUP = "/signup";
const LOGIN = "/login";
const CONFIRM = "/confirm";
const EDIT_PROFILE = "/edit-profile";
// # Detail Object
const DETAIL = "/:id";
const routes = {
base: BASE,
data: DATA,
dataInput: DATA_INPUT,
dataUser: DATA_USER,
dataOutside: DATA_OUTSIDE,
locCode: LOCCODE,
signup: SIGNUP,
login: LOGIN,
confirm: CONFIRM,
editProfile: EDIT_PROFILE,
Detail: (id) => {
if (id) {
return `/${id}`;
} else {
return DETAIL;
}
},
};
export default routes;
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
"main": "init.js", "main": "init.js",
"scripts": { "scripts": {
"dev:server": "nodemon --exec babel-node src/init.js --delay 2", "dev:server": "nodemon --exec babel-node src/init.js --delay 2",
"dev:server_window": "nodemon --exec\"npx babel-node src/init.js\" --delay 2", "dev:server_window": "nodemon --exec \"npx babel-node src/init.js\" --delay 2",
"start": "babel-node src/init.js" "start": "babel-node src/init.js"
}, },
"repository": { "repository": {
......
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