edit routes

client/src/components/EueSuggest.js

@@ -14,6 +14,7 @@ function EueSuggest() {
         borderColor: 'rgb(110, 189, 142)',
         color: '#04AB70'
     }
+    
     const airUsing = localStorage.getItem('using-aircondition')
 
 

client/src/components/LocCodeChange.js

@@ -22,9 +22,11 @@ function LocCodeChange() {
     const inboxstyled = {
         display: 'flex',
         flexDirection: 'column',
+        maxWidth: '80%',
         justifyContent: 'center',
         margin: 'auto',
-        padding: '10px'
+        padding: '0.5em',
+        color: 'black'
     }
 
     const btnstyled2 = {
@@ -117,10 +119,10 @@ function LocCodeChange() {
         <Row className='text-center w-100 my-2'>
             <Card style={cardstyled}>
                 <Card.Title id='impactTitle'>
-                    Local Code
+                    지역 코드
                 </Card.Title>
                 <Card.Subtitle style={{ fontWeight: 'lighter' }}>
-                    Please select a your region
+                    본인의 지역을 선택해주세요
                 </Card.Subtitle>
                 <hr />
                 <Card.Text className='m-0'>

client/src/components/LoginComp.js

 import React, { useState } from 'react';
 import '../App.css'
-import { Form, Button, Row, Col, Card, Alert } from 'react-bootstrap';
+import { Form, Button, Row, Col, Card, Alert, FloatingLabel } from 'react-bootstrap';
 import { LoginWithKakao } from '../utils/Oauth';
 
 function LoginComp() {
@@ -23,7 +23,8 @@ function LoginComp() {
         maxWidth: '80%',
         justifyContent: 'center',
         margin: 'auto',
-        padding: '10px'
+        padding: '0.5em',
+        color: 'black'
     }
 
     const [emailSentAlert, setEmailSentAlert] = useState(false)
@@ -34,7 +35,7 @@ function LoginComp() {
     function CheckEmailSend() {
         localStorage.setItem('login_email_Address', emailAddress)
         const emailIs = localStorage.getItem('login_email_Address').split('@')[1]
-        if(emailIs) {
+        if (emailIs) {
             setAlertShow(true)
             setEmailSentAlert(false)
         }
@@ -89,9 +90,13 @@ function LoginComp() {
                     </Row>
 
                     <Form style={inboxstyled}>
-                        <Form.Group controlId="formBasicEmail">
+                        <FloatingLabel
+                            controlId="floatingInput"
+                            label="Email"
+                        >
                             <Form.Control type="email" placeholder="Email" onChange={handleChange} />
-                        </Form.Group>
+
+                        </FloatingLabel>
                         <Button variant='light' className='mt-3' id='formbtn' onClick={CheckEmailSend}>
                             LOGIN
                         </Button>

client/src/components/NicknameChange.js

+import React, { useEffect } from 'react'
+import { Row, Card, Col, Form, Button, FloatingLabel } from 'react-bootstrap';
+
+function NicknameChange() {
+
+    const cardstyled = {
+        margin: 'auto',
+        padding: '1em',
+        display: 'flex',
+        justifyContent: 'center',
+        width: '100%',
+        borderWidth: '3px',
+        borderRadius: '20px',
+        borderColor: 'rgb(110, 189, 142)',
+        color: '#04AB70'
+    }
+
+    const inboxstyled = {
+        display: 'flex',
+        flexDirection: 'column',
+        maxWidth: '80%',
+        justifyContent: 'center',
+        margin: 'auto',
+        padding: '0.5em',
+        color: 'black'
+    }
+
+    const exNick = localStorage.getItem('nickname')
+    console.log(exNick)
+
+    function handleChange ({ target: { value } }) {
+        localStorage.setItem('nickname', value)
+    }
+
+    function handleSubmit(event) {
+        event.preventDefault();
+        window.location.reload();
+    };
+
+
+    return (
+        <Row className='text-center w-100 my-2'>
+            <Card style={cardstyled}>
+                <Card.Title id='impactTitle'>
+                    닉네임 변경
+                </Card.Title>
+                <Card.Subtitle style={{ fontWeight: 'lighter' }}>
+                    새로운 닉네임으로 변경해보세요
+                </Card.Subtitle>
+                <hr />
+                <Card.Text className='m-0'>
+
+                    <Form style={inboxstyled} onSubmit={handleSubmit}>
+                        <FloatingLabel
+                            controlId="floatingInput"
+                            label="Nickname"
+                        >
+                            <Form.Control type="text" placeholder="닉네임 변경" id='nickname' onChange={handleChange} />
+                        </FloatingLabel>
+                        <Button variant='light' className='mt-3' id='formbtn' type='submit'>
+                            변 경
+                        </Button>
+                    </Form>
+
+
+
+                </Card.Text>
+
+            </Card>
+        </Row>
+    )
+}
+
+export default NicknameChange;
\ No newline at end of file

client/src/components/SignupComp.js

 import React, { useState } from 'react'
 import '../App.css'
-import { Form, Button, Row, Col, Card, Alert } from 'react-bootstrap';
+import { Form, Button, Row, Col, Card, Alert, FloatingLabel } from 'react-bootstrap';
 import { LoginWithKakao } from '../utils/Oauth';
 
 function SignupComp() {
@@ -23,7 +23,8 @@ function SignupComp() {
         maxWidth: '80%',
         justifyContent: 'center',
         margin: 'auto',
-        padding: '1rem'
+        padding: '0.5em',
+        color: 'black'
     }
 
     const initValues = {
@@ -125,10 +126,12 @@ function SignupComp() {
                         }
                     </Row>
 
-                    <Form style={inboxstyled}
-                        onSubmit={handleSubmit}>
-                        <Form.Group controlId="username">
-                            <Row className='m-auto mb-1 d-flex justify-content-center'>
+                    <Form style={inboxstyled} onSubmit={handleSubmit}>
+                        <FloatingLabel
+                            controlId="floatingInput"
+                            label="Name"
+                            className='mb-3'
+                        >
                             <Form.Control
                                 type="text"
                                 name="name"
@@ -137,11 +140,11 @@ function SignupComp() {
                                 onChange={handleChange}
                                 required
                             />
-                            </Row>
-                            <Row>
-                                <p></p>
-                            </Row>
-                            <Row className='m-auto d-flex justify-content-center'>
+                        </FloatingLabel>
+                        <FloatingLabel
+                            controlId="floatingInput"
+                            label="Email Address"
+                        >
                             <Form.Control
                                 type="email"
                                 name="email"
@@ -150,10 +153,9 @@ function SignupComp() {
                                 onChange={handleChange}
                                 required
                             />
-                            </Row>
-                        </Form.Group>
+                        </FloatingLabel>
 
-                        <Button variant='light' className='mt-3' id='formbtn' onClick={CheckUserExist}>
+                        <Button variant='light' className='mt-3' id='formbtn' type='submit' onClick={CheckUserExist}>
                             {/* type="submit" */}
                             Sign Up
                         </Button>

client/src/pages/Home.js

@@ -8,7 +8,6 @@ import ChartLine from '../components/ChartLine';
 import ChartDoughnut from '../components/ChartDoughnut';
 import Donation from '../components/Donation';
 import axios from 'axios';
-import Footer from '../components/Footer';
 
 
 function Home() {
@@ -33,12 +32,8 @@ function Home() {
         padding: '0'
     }
 
-    axios({
-        method: 'get',
-        url: 'localhost:4500/loccode/doe'
-    }).then((res) => {
-        console.log(res)
-    })
+    const getusername = axios.get(`/api/user`)
+    console.log(getusername)
 
 
     return (

client/src/pages/LocalCodePage.js

@@ -3,6 +3,7 @@ import { Container, Row, Col } from 'react-bootstrap';
 import MainLayer from '../components/MainLayer';
 import '../App.css'
 import LocCodeChange from '../components/LocCodeChange';
+import NicknameChange from '../components/NicknameChange';
 
 function SignupPage() {
     const constyled = {
@@ -39,6 +40,7 @@ function SignupPage() {
                     </Col>
 
                     <Col md={6} style={col2sty}>
+                        <NicknameChange />
                         <LocCodeChange />
                     </Col>
                 </Row>

client/src/routes.js

@@ -4,3 +4,11 @@ export const routes = {
   login: 'login',
   localcode: '/local_code',
 }
+
+
+// post, put { body }
+// email :
+// nick_name :
+// using_aircon :
+// created_at :
+// loc_code