Merge branch 'merger' into kangmin

client/src/components/SignupComp.js

+import React, { useState } from 'react'
+import '../App.css'
+import { Form, Button, Row, Col, Card, Alert } from 'react-bootstrap';
+import { LoginWithKakao } from '../utils/Oauth';
+
+function SignupComp() {
+
+    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: '1rem'
+    }
+
+    const initValues = {
+        email: '',
+        name: ''
+    }
+
+    const [formValues, setFormValues] = useState(initValues)
+    const [validated, setValidated] = useState(false)
+
+    function handleChange(event) {
+        const { name, value } = event.target
+        setFormValues({ ...formValues, [name]: value })
+    }
+
+    function handleSubmit(event) {
+        const form = event.currentTarget;
+        console.log('formValues', formValues);
+        console.log('formValues.values', Object.values(formValues)[0].length);
+
+        // console.log(form)
+        // if (Object.values(formValues)[0].length !== 0) { //form.checkValidity() === false
+        //     event.preventDefault();
+        //     event.stopPropagation();
+        // }
+        console.log(validated)
+        setValidated(true);
+        // const form = event.current
+        // setFormError(validate(formValues))
+        // setIsSubmit(true)
+    }
+    const [emailSubm, setEmailSubm] = useState(false)
+
+    function handleClickSubm() {
+        // setEmailSubm(true);
+        const subm = document.getElementById("subm-mailSent");
+        subm.style.visibility = 'visible'
+        // const aftermail = document.getElementById('AftermailSent');
+        // aftermail.style.display = ''
+    }
+
+
+    const [userExist, setUserExist] = useState(false)
+    const [alertShow, setAlertShow] = useState(true)
+
+    function CheckUserExist() {
+        setUserExist(!userExist)
+    }
+
+
+    return (
+
+        <Row className='text-center w-100 my-2'>
+            <Card style={cardstyled}>
+                <Card.Title id='impactTitle'>
+                    Create an Account
+                </Card.Title>
+                <Card.Subtitle style={{ fontWeight: 'lighter' }}>
+                    Sign up with your social media account or email address
+                </Card.Subtitle>
+                <hr />
+                <Card.Text>
+                    <Row className='m-auto d-flex justify-content-center' style={{ width: '80%' }}>
+                        {!userExist ?
+                            <Alert show={alertShow} variant={'success'}>
+                                <Col>
+                                    😊 계정 생성이 완료 되었습니다.
+                                </Col>
+                                <Alert.Link href='/login' style={{ fontSize: '0.8em' }}>
+                                    로그인 하러가기 ➞
+                                </Alert.Link>
+                            </Alert>
+                            :
+                            <Alert show={alertShow} variant={'danger'}>
+                                <Col>
+                                    🤔 이미 존재하는 계정입니다.
+                                </Col>
+                                <Alert.Link href='/login' style={{ fontSize: '0.8em' }}>
+                                    로그인 하러가기 ➞
+                                </Alert.Link>
+                            </Alert>
+                        }
+                        <Button onClick={() => setAlertShow(true)}>보여주고</Button>
+                        <Button onClick={() => setAlertShow(false)}>안보여주고</Button>
+                    </Row>
+                    
+                    <Form style={inboxstyled}
+                        onSubmit={handleSubmit}>
+                        <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}
+                                    required
+                                />
+                            </Row>
+                            <Row>
+                                <p></p>
+                            </Row>
+                            <Row className='m-auto d-flex justify-content-center'>
+                                <Form.Control
+                                    type="email"
+                                    name="email"
+                                    placeholder="Email Address"
+                                    value={formValues.email}
+                                    onChange={handleChange}
+                                    required
+                                />
+                            </Row>
+                        </Form.Group>
+
+                        <Button variant='light' className='mt-2' type="submit" id='formbtn' onClick={CheckUserExist}>
+                            Sign Up
+                        </Button>
+                    </Form>
+
+                    <Row className='d-flex align-items-center m-2'>
+                        <Col>
+                            <hr />
+                        </Col>
+                        OR
+                        <Col>
+                            <hr />
+                        </Col>
+                    </Row>
+
+                    <Row style={{ margin: 'auto', marginBottom: '5px', display: 'flex', justifyContent: 'center' }}>
+                        <a href="#;" onClick={LoginWithKakao} id='socialLink' >
+                            <img src='http://image.kmib.co.kr/online_image/2020/0626/611514110014734788_1.jpg' id='logpng' alt='KAKAO' />
+                        </a>
+                    </Row>
+                </Card.Text>
+            </Card>
+        </Row>
+    )
+}
+
+export default SignupComp;
\ No newline at end of file

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'
 
 
 function TimeNow() {
     const cardstyled = {
-        fontSize: '0.5em',
         margin: 'auto',
         padding: '1em',
         display: 'flex',

client/src/components/Trydays.js

-import React from 'react'
-import { Container, Row, Card, Table, Button } from 'react-bootstrap';
-import '../App.css'
-
-
-function Trydays() {
-    const cardstyled = {
-        fontSize: '0.5em',
-        margin: 'auto',
-        padding: '1em',
-        display: 'flex',
-        justifyContent: 'center',
-        width: '100%',
-        borderWidth: '1.5px',
-        borderRadius: '20px',
-        borderColor: '#04AB70',
-        color: 'rgb(110, 189, 142)'
-    }
-    const btnstyled = {
-        background: 'rgb(110, 189, 142)',
-        margin: '1px',
-        maxWidth: '100%',
-        borderWidth: '2px',
-        fontSize: '10px',
-        borderColor: 'rgba(195, 195, 195, 0.712)',
-        borderRadius: '20px',
-        color: 'white'
-    }
-
-    return (
-            <Row className='text-center w-100 my-2'>
-                <Card style={cardstyled}>
-                    <Card.Title>
-                        유저아이디
-                    </Card.Title>
-                    <Card.Subtitle>
-                        지역
-                        울릉면
-                        지역코드
-                        <Button variant='light' style={btnstyled}>
-                            변경
-                        </Button>
-
-                    </Card.Subtitle>
-                    
-                    <Card.Text>
-                        환경을 향한 노력 ㅁㅁㅁ일 째 입니다.
-                    </Card.Text>
-                </Card>
-            </Row>
-    )
-}
-
-export default Trydays;
\ No newline at end of file

client/src/pages/Home.js

@@ -3,12 +3,11 @@ import { Container, Row, Col } from 'react-bootstrap';
 import MainLayer from '../components/MainLayer';
 import TimeNow from './../components/TimeNow';
 import '../App.css'
-import Trydays from './../components/Trydays';
 import EueSuggest from '../components/EueSuggest';
 import ChartLine from '../components/ChartLine';
 import ChartDoughnut from '../components/ChartDoughnut';
 import Footer from './../components/Footer';
-import { useEffect } from 'react';
+import axios from 'axios';
 
 
 function Home() {
@@ -32,24 +31,29 @@ function Home() {
         flexDirection: 'column',
         padding: '0'
     }
-    useEffect(() => {
-        console.log('마운트 될때마다 실행');
-    }, []);
+
+    axios({
+        method: 'get',
+        url: 'localhost:4500/loccode/doe'
+    }).then((res) => {
+        console.log(res)
+    })
+
 
     return (
-        <Container fluid className='d-flex justify-content-center position-relative'>
-            <Row style={constyled}>
-                <Col xs={12} md={4} className='d-flex justify-content-center' id='stickyy'>
+        <Container fluid className='m-auto d-flex justify-content-center position-relative'>
+            <Row style={constyled} className='m-auto'>
+                <Col xs={12} md={6} className='d-flex justify-content-center' id='stickyy'>
                     <Row style={col1sty} className='m-auto'>
                         <MainLayer />
                     </Row>
-
                 </Col>
+
                 <Col md={6} style={col2sty}>
+
                     <Row style={constyled} className='d-flex mb-2 w-100'>
-                        {/* <KakaoLogin/> */}
+
                         {/* <TimeNow /> */}
-                        <Trydays />
                         <EueSuggest />
                         <ChartLine />
                         <ChartDoughnut />

client/src/pages/LocalCodePage.js

+import React from 'react'
+import { Container, Row, Col } from 'react-bootstrap';
+import MainLayer from '../components/MainLayer';
+import '../App.css'
+import LocCodeChange from '../components/LocCodeChange';
+
+function SignupPage() {
+    const constyled = {
+        display: 'flex',
+        justifyContent: 'space-evenly',
+        width: '100%',
+        position: 'relative'
+    }
+
+    const col1sty = {
+        display: 'flex',
+        justifyContent: 'start',
+        alignItems: 'center'
+    }
+
+    const col2sty = {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        flexDirection: 'column',
+        padding: '0'
+    }
+
+
+    return (
+        <Container fluid className='m-auto d-flex justify-content-center position-relative'>
+            <Row style={constyled} className='m-auto'>
+                <Col xs={12} md={6} className='d-flex justify-content-center' id='stickyy'>
+                    <Row style={col1sty} className='m-auto'>
+                        <MainLayer />
+                    </Row>
+                </Col>
+
+                <Col md={6} style={col2sty}>
+
+                    <Row style={constyled} className='d-flex mb-2 w-100'>
+                        <LocCodeChange />
+                    </Row>
+                </Col>
+            </Row>
+        </Container>
+
+    );
+}
+
+export default SignupPage;
\ No newline at end of file

client/src/pages/LoginPage.js

+import React from 'react'
+import { Container, Row, Col } from 'react-bootstrap';
+import MainLayer from '../components/MainLayer';
+import '../App.css'
+import LoginComp from '../components/LoginComp';
+
+function SignupPage() {
+    const constyled = {
+        display: 'flex',
+        justifyContent: 'space-evenly',
+        width: '100%',
+        position: 'relative'
+    }
+
+    const col1sty = {
+        display: 'flex',
+        justifyContent: 'start',
+        alignItems: 'center'
+    }
+
+    const col2sty = {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        flexDirection: 'column',
+        padding: '0'
+    }
+
+
+    return (
+        <Container fluid className='m-auto d-flex justify-content-center position-relative'>
+            <Row style={constyled} className='m-auto'>
+                <Col xs={12} md={6} className='d-flex justify-content-center' id='stickyy'>
+                    <Row style={col1sty} className='m-auto'>
+                        <MainLayer />
+                    </Row>
+                </Col>
+
+                <Col md={6} style={col2sty}>
+
+                    <Row style={constyled} className='d-flex mb-2 w-100'>
+                        <LoginComp />
+                    </Row>
+                </Col>
+            </Row>
+        </Container>
+
+    );
+}
+
+export default SignupPage;
\ No newline at end of file

client/src/pages/LoginwithSocial.js

-import React from 'react'
-import '../App.css'
-import { Form, Modal, Button, Row, Col, Image, Alert } from 'react-bootstrap';
-import Oauth from '../components/Oauth';
-import { useEffect } from 'react';
-import axios from 'axios';
-import { useState } from 'react';
-
-function LoginwithSocial() {
-
-    const inboxstyled = {
-        display: 'flex',
-        flexDirection: 'column',
-        maxWidth: '100%',
-        justifyContent: 'center',
-        margin: 'auto',
-        padding: '10px'
-
-    }
-
-    function loginWithKakao() {
-        window.Kakao.Auth.authorize({
-          redirectUri: 'http://localhost:3000/oauth'
-        })
-    }
-    const [isLogin, setIsLogin] = useState(false)
-
-    return (
-        <Row className='m-auto'>
-            <Modal.Header className='d-flex justify-content-center w-100'>
-                <Modal.Title id="example-modal-sizes-title-sm">
-                    LOGIN
-                </Modal.Title>
-            </Modal.Header>
-            <Modal.Body>
-                <Form style={inboxstyled}>
-                    <Form.Group controlId="formBasicEmail">
-                        <Form.Control type="email" placeholder="Email" />
-                    </Form.Group>
-
-                    <Form.Group controlId="formBasicPassword">
-                        <Form.Control type="password" placeholder="Password" />
-                    </Form.Group>
-                    <Button variant='light' type="submit" id='formbtn'>
-                        LOGIN
-                    </Button>
-                </Form>
-                <hr />
-                <Row style={{ margin: 'auto', marginBottom: '5px', display: 'flex', justifyContent: 'center' }}>
-                    <a href="#" onClick={loginWithKakao} id='socialLink' >
-                        <img src='/images/Kakao1.jpg' id='logpng' />
-                        KAKAO
-                    </a>
-                    <a href="javascript:loginWithKakao()" id='socialLink' >
-                        <img src='/images/Kakao1.jpg' id='logpng' />
-                        KAKAOHTML
-                    </a>
-                    <a href="javascript:loginWithKakaoPOP()" id='socialLink' >
-                        <img src='/images/Kakao1.jpg' id='logpng' />
-                        KAKAOPOP
-                    </a>
-                    <a as='button' href="javascript:loginWithKakao()" id='socialLink'>
-                        <Image src='/images/google.png' id='logpng' />
-                        GOOGLE
-                    </a>
-                    <a as='button' href="javascript:loginWithKakao()" id='socialLink'>
-                        <Image src='/images/facebook.png' id='logpng' />
-                        FACEBOOK
-                    </a>
-                </Row>
-            </Modal.Body>
-        </Row>
-    )
-}
-
-export default LoginwithSocial;
\ No newline at end of file

client/src/pages/SignUp.js

-import React from 'react'
-import '../App.css'
-import { Form, Modal, Button, Row, Col, Image } from 'react-bootstrap';
-// import { KAKAO_AUTH_URL } from '../components/Oauth';
-
-
-function SignUp() {
-
-    const inboxstyled = {
-        display: 'flex',
-        flexDirection: 'column',
-        maxWidth: '80%',
-        justifyContent: 'center',
-        margin: 'auto',
-        padding: '1rem'
-
-    }
-
-    return (
-        <>
-            <Modal.Header className='d-block text-center'>
-                <Modal.Title>
-                    Create an Account
-                </Modal.Title>
-                <p style={{ color: 'gray', margin: '10px', fontSize: '0.5em' }}>
-                    Sign up with your social media account or email address
-                </p>
-
-            </Modal.Header>
-
-            <Modal.Body>
-                <Form style={inboxstyled}>
-                    <Form.Group controlId="formBasicEmail">
-                        <Form.Control type="email" placeholder="Username" />
-                    </Form.Group>
-                    <Form.Group controlId="formBasicEmail">
-                        <Form.Control type="email" placeholder="Email Address" />
-                    </Form.Group>
-                    <Form.Group controlId="formBasicPassword">
-                        <Form.Control type="password" placeholder="Password" />
-                    </Form.Group>
-                    <Form.Group controlId="formBasicPassword">
-                        <Form.Control type="password2" placeholder="Confirm Password" />
-                    </Form.Group>
-
-                    <Button variant='light' type="submit" className='' id='formbtn'>
-                        Sign Up
-                    </Button>
-                </Form>
-
-                <hr />
-                <Row style={{margin: 'auto', marginBottom: '5px', display: 'flex', justifyContent: 'center' }}>
-                        {/* <a href={KAKAO_AUTH_URL} target='_blank' id='socialLink' >
-                            <Image src='/images/Kakao1.jpg' id='logpng' />
-                            KAKAO
-                        </a> */}
-                        <a href="javascript:loginWithKakao()" id='socialLink'>
-                            <Image src='/images/google.png' id='logpng' />
-                            GOOGLE
-                        </a>
-                        <a href="javascript:loginWithKakao()" id='socialLink'>
-                            <Image src='/images/facebook.png' id='logpng' />
-                            FACEBOOK
-                        </a>
-                </Row>
-            </Modal.Body>
-
-        </>
-    )
-}
-
-export default SignUp;
\ No newline at end of file

client/src/pages/SignupPage.js

+import React from 'react'
+import { Container, Row, Col } from 'react-bootstrap';
+import MainLayer from '../components/MainLayer';
+import '../App.css'
+import SignupComp from '../components/SignupComp';
+
+function SignupPage() {
+    const constyled = {
+        display: 'flex',
+        justifyContent: 'space-evenly',
+        width: '100%',
+        position: 'relative'
+    }
+
+    const col1sty = {
+        display: 'flex',
+        justifyContent: 'start',
+        alignItems: 'center'
+    }
+
+    const col2sty = {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        flexDirection: 'column',
+        padding: '0'
+    }
+
+
+    return (
+        <Container fluid className='m-auto d-flex justify-content-center position-relative'>
+            <Row style={constyled} className='m-auto'>
+                <Col xs={12} md={6} className='d-flex justify-content-center' id='stickyy'>
+                    <Row style={col1sty} className='m-auto'>
+                        <MainLayer />
+                    </Row>
+                </Col>
+
+                <Col md={6} style={col2sty}>
+
+                    <Row style={constyled} className='d-flex mb-2 w-100'>
+                        <SignupComp />
+                    </Row>
+                </Col>
+            </Row>
+        </Container>
+
+    );
+}
+
+export default SignupPage;
\ No newline at end of file