210721 commit

client/src/Utils/Oauth.js

-import axios from 'axios';
-import { Spinner, Button, Col, Row } from 'react-bootstrap';
-import { useHistory } from 'react-router-dom';
+import { Spinner, Button, Row } from 'react-bootstrap';
 
 
 // export const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=code`;
@@ -65,10 +63,8 @@ export function kakaoLogout() {
 
 
 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>

client/src/components/ChartDoughnut.js

 import React from 'react'
-import { Container, Row, Card, Table, Button } from 'react-bootstrap';
+import {  Row, Card } from 'react-bootstrap';
 import { Doughnut } from 'react-chartjs-2'
 
 function ChartDoughnut() {
@@ -14,15 +14,6 @@ function ChartDoughnut() {
         borderColor: 'rgb(110, 189, 142)',
         color: '#04AB70'
     }
-    const btnstyled = {
-        background: 'rgb(110, 189, 142)',
-        margin: '1px',
-        maxWidth: '100%',
-        borderWidth: '2px',
-        fontSize: '10px',
-        borderColor: 'rgba(195, 195, 195, 0.753)',
-        borderRadius: '20px',
-    }
 
     const options = {
         legend: {

client/src/components/ChartLine.js

 import React from 'react'
-import { Container, Row, Card, Table, Button } from 'react-bootstrap';
+import { Row, Card } from 'react-bootstrap';
 import { Line } from 'react-chartjs-2'
 
 function ChartLine() {
@@ -14,15 +14,7 @@ function ChartLine() {
         borderColor: 'rgb(110, 189, 142)',
         color: '#04AB70'
     }
-    const btnstyled = {
-        background: 'rgb(110, 189, 142)',
-        margin: '1px',
-        maxWidth: '100%',
-        borderWidth: '2px',
-        fontSize: '10px',
-        borderColor: 'rgba(195, 195, 195, 0.753)',
-        borderRadius: '20px',
-    }
+
     const options = {
         legend: {
             display: true, // label 보이기 여부

client/src/components/EueSuggest.js

 import React from 'react'
-import { Container, Row, Card, Table, Button } from 'react-bootstrap';
+import { Row, Card } from 'react-bootstrap';
 
 function EueSuggest() {
     const cardstyled = {
@@ -13,15 +13,6 @@ function EueSuggest() {
         borderColor: 'rgb(110, 189, 142)',
         color: '#04AB70'
     }
-    const btnstyled = {
-        background: 'rgb(110, 189, 142)',
-        margin: '1px',
-        maxWidth: '100%',
-        borderWidth: '2px',
-        fontSize: '10px',
-        borderColor: 'rgba(195, 195, 195, 0.753)',
-        borderRadius: '20px',
-    }
 
     return (
             <Row className='text-center w-100 my-2'>

client/src/components/Footer.js

-import React, { useEffect, useRef, useState } from 'react'
-import { Container, Row, Card, Table, Button, Col, Modal, ModalTitle, Overlay, Tooltip } from 'react-bootstrap';
+import React, { useEffect, useState } from 'react'
+import { Row, Card,  Button, Col, Modal,  } from 'react-bootstrap';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import '../App.css'
 

client/src/components/LocCodeChange.js

 import React from 'react'
 import '../App.css'
-import { Form, Modal, Button, Row, Col, Image, Alert, Card, DropdownButton, Dropdown, ButtonGroup } from 'react-bootstrap';
-import Oauth, { LoginWithKakao } from '../utils/Oauth';
-import { useEffect } from 'react';
-import axios from 'axios';
+import { Form, Button, Row, Col, Card, DropdownButton, Dropdown, ButtonGroup } from 'react-bootstrap';
 import { useState } from 'react';
 
 function LocCodeChange() {
@@ -68,8 +65,7 @@ function LocCodeChange() {
                                         style={btnstyled2}
                                         title='지역코드'
                                         as={ButtonGroup}
-                                        title={` ${localname} `}
-                                    >
+                                        title={` ${localname} `}>
                                         <Dropdown.Item>Action</Dropdown.Item>
                                         <Dropdown.Item>Another action</Dropdown.Item>
                                         <Dropdown.Item>Something else here</Dropdown.Item>

client/src/components/LocalCode.js

 import React, { useState } from 'react'
-import { Container, Row, Card, Table, Button, Col, Modal } from 'react-bootstrap';
+import { Row, Card, Button, Col, Modal } from 'react-bootstrap';
 // import db from "../db/index"
 import '../App.css'
-import { LoginWithKakao } from '../utils/Oauth';
 import { Link } from 'react-router-dom';
 
 

client/src/components/LoginComp.js

 import React from 'react'
 import '../App.css'
-import { Form, Modal, Button, Row, Col, Image, Alert, Card } from 'react-bootstrap';
-import Oauth, { LoginWithKakao } from '../utils/Oauth';
-import { useEffect } from 'react';
-import axios from 'axios';
-import { useState } from 'react';
+import { Form, Button, Row, Col,  Card } from 'react-bootstrap';
+import { LoginWithKakao } from '../utils/Oauth';
 
 function LoginComp() {
 

client/src/components/MainLayer.js

 import React from 'react'
-import { useState } from 'react';
-import { Button, Form, Image, Row, ButtonGroup, Modal, Dropdown, Col } from 'react-bootstrap';
-import { Link, useHistory } from 'react-router-dom';
+import { Button, Image, Row, ButtonGroup, } from 'react-bootstrap';
+import { Link } from 'react-router-dom';
 import '../App.css'
-import LoginComp from './LoginComp';
 import LocalCode from '../components/LocalCode';
-// import { isOauthChecked } from './../utils/Auth';
 import { kakaoLogout } from '../utils/Oauth';
 
 
 function MainLayer() {
-    const history = useHistory()
 
     const boxstyled = {
         border: 'solid',

client/src/components/SignupComp.js

-import React, { useEffect, useState } from 'react'
+import React, { useState } from 'react'
 import '../App.css'
-import { Form, Modal, Button, Row, Col, Image, DropdownButton, ButtonGroup, Dropdown, Card } from 'react-bootstrap';
-// import { KAKAO_AUTH_URL } from '../components/Oauth';
-// import { handleLogin } from '../utils/Auth';
-// import { isOauth } from '../utils/Auth';
+import { Form,  Button, Row, Col, Card } from 'react-bootstrap';
 import { LoginWithKakao } from '../utils/Oauth';
 
 function SignupComp() {
 
-    const noticestyled = {
-        display: 'flex',
-        justifyContent: 'center',
-        color: 'gray',
-        margin: 'auto',
-        fontSize: '0.8em',
-        visibility: 'hidden',
-    }
-
     const cardstyled = {
         margin: 'auto',
         padding: '1em',
@@ -39,24 +27,14 @@ function SignupComp() {
         padding: '1rem'
     }
 
-    const aftershow = {
-        display: 'none'
-    }
-
     const initValues = {
-        email: ''
+        email: '',
+        name: ''
     }
 
     const [formValues, setFormValues] = useState(initValues)
-    const [formError, setFormError] = useState({})
     const [validated, setValidated] = useState(false)
 
-    function submitForm() {
-        console.log('formValues', formValues);
-        console.log(!formValues['username']);
-        console.log('Error', formError)
-    }
-
     function handleChange(event) {
         const { name, value } = event.target
         setFormValues({ ...formValues, [name]: value })
@@ -78,11 +56,8 @@ function SignupComp() {
         // setFormError(validate(formValues))
         // setIsSubmit(true)
     }
-
-
-
     const [emailSubm, setEmailSubm] = useState(false)
-    
+
     function handleClickSubm() {
         // setEmailSubm(true);
         const subm = document.getElementById("subm-mailSent");
@@ -90,9 +65,9 @@ function SignupComp() {
         // const aftermail = document.getElementById('AftermailSent');
         // aftermail.style.display = ''
     }
-    
-  
-    console.log(emailSubm);
+
+
+    // console.log(emailSubm);
 
 
     return (
@@ -109,7 +84,21 @@ function SignupComp() {
                 <Card.Text>
                     <Form style={inboxstyled}
                         onSubmit={handleSubmit}>
-                        <Form.Group controlId="userEmail" className='mb-1'>
+                        <Form.Group controlId="userEmail">
+                            <Row className='m-auto mb-1 d-flex justify-content-center'>
+                                <Form.Control
+                                    type="text"
+                                    name="name"
+                                    placeholder="Name"
+                                    value={formValues.name}
+                                    onChange={handleChange}
+                                    // readOnly={emailSubm}
+                                    required
+                                />
+                            </Row>
+                            <Row>
+                                <p></p>
+                            </Row>
                             <Row className='m-auto d-flex justify-content-center'>
                                 <Form.Control
                                     type="email"
@@ -121,6 +110,7 @@ function SignupComp() {
                                     required
                                 />
                             </Row>
+
                         </Form.Group>
 
 

client/src/components/TimeNow.js

-import React, { Component } from 'react';
-import { Jumbotron, Container, Row, Card } from 'react-bootstrap';
+import React from 'react';
+import { Row, Card } from 'react-bootstrap';
 import Clock from 'react-live-clock'
 import '../App.css'
 

client/src/pages/Home.js

-import React, { useState, useEffect } from 'react'
-import { Container, Row, Col, Button } from 'react-bootstrap';
+import React from 'react'
+import { Container, Row, Col } from 'react-bootstrap';
 import MainLayer from '../components/MainLayer';
 import TimeNow from './../components/TimeNow';
 import '../App.css'
@@ -7,7 +7,7 @@ import EueSuggest from '../components/EueSuggest';
 import ChartLine from '../components/ChartLine';
 import ChartDoughnut from '../components/ChartDoughnut';
 import Footer from './../components/Footer';
-import db from '../db/index'
+import axios from 'axios';
 
 
 function Home() {
@@ -32,8 +32,12 @@ function Home() {
         padding: '0'
     }
 
-    console.log(db.user.findAll())
-
+    axios({
+        method: 'get',
+        url: 'localhost:4500/loccode/doe'
+    }).then((res) => {
+        console.log(res)
+    })
 
 
 

client/src/pages/LocalCodePage.js

-import React, { useState, useEffect } from 'react'
-import { Container, Row, Col, Button } from 'react-bootstrap';
+import React from 'react'
+import { Container, Row, Col } from 'react-bootstrap';
 import MainLayer from '../components/MainLayer';
 import '../App.css'
 import LocCodeChange from '../components/LocCodeChange';

client/src/pages/LoginPage.js

-import React, { useState, useEffect } from 'react'
-import { Container, Row, Col, Button } from 'react-bootstrap';
+import React from 'react'
+import { Container, Row, Col } from 'react-bootstrap';
 import MainLayer from '../components/MainLayer';
 import '../App.css'
 import LoginComp from '../components/LoginComp';

client/src/pages/SignupPage.js

-import React, { useState, useEffect } from 'react'
-import { Container, Row, Col, Button } from 'react-bootstrap';
+import React from 'react'
+import { Container, Row, Col } from 'react-bootstrap';
 import MainLayer from '../components/MainLayer';
 import '../App.css'
 import SignupComp from '../components/SignupComp';

server/package.json

@@ -18,9 +18,7 @@
   },
   "homepage": "https://github.com/dorakang612/EUE#readme",
   "dependencies": {
-    "@babel/core": "^7.11.6",
-    "@babel/node": "^7.10.5",
-    "@babel/preset-env": "^7.11.5",
+    "@babel/cli": "^7.14.5",
     "body-parser": "^1.19.0",
     "cookie-parser": "^1.4.5",
     "dotenv": "^8.2.0",
@@ -37,6 +35,9 @@
     "sequelize": "^6.6.5"
   },
   "devDependencies": {
+    "@babel/core": "^7.14.6",
+    "@babel/node": "^7.14.7",
+    "@babel/preset-env": "^7.14.7",
     "nodemon": "^2.0.4"
   }
 }