Merge branch 'who' into premaster

client/src/App.css

@@ -64,6 +64,7 @@ body {
 .form-group .form-control {
   border-radius: 40px;
 }
+
 #formbtn {
   width: 100%;
   border-radius: 40px;

client/src/Utils/Auth.js

 import axios from 'axios';
+import { checkCookies } from './CheckDB';
 
 export function handleLogin({ userId, role, name, tel, email }) {
     localStorage.setItem('id', userId)
@@ -15,7 +16,7 @@ export async function handleLogout() {
 }
 
 export function isLogined() {
-    const userId = localStorage.getItem('nickname')
+    const userId = checkCookies()
     if (userId) {
         return userId
     } else {

client/src/Utils/Cookies.js → client/src/Utils/CheckDB.js

-import React from 'react'
+import axios from 'axios';
 import { Swal } from 'sweetalert2';
 
+
+export async function callUserInfo() {
+    const res = await axios.get("/api/user-info")
+    return res.data.user_info
+}
+
 export function checkCookies() {
     const acctoken_cookies = document.cookie.split('=')[1];
     return acctoken_cookies;
 }
 
-export function deleteCookie (name) {
+export function deleteCookie(name) {
     document.cookie = name + '=; expires=Thu, 01 Jan 1999 00:00:10 GMT;';
     Swal.fire({
         title: '로그아웃 성공!',

client/src/components/LocCodeChange.js

@@ -3,6 +3,7 @@ import '../App.css'
 import { Form, Button, Row, Col, Card } from 'react-bootstrap';
 import axios from 'axios';
 import Swal from 'sweetalert2'
+import { callUserInfo } from '../utils/CheckDB';
 
 
 function LocCodeChange() {
@@ -22,7 +23,7 @@ function LocCodeChange() {
     const inboxstyled = {
         display: 'flex',
         flexDirection: 'column',
-        maxWidth: '80%',
+        maxWidth: '90%',
         justifyContent: 'center',
         margin: 'auto',
         padding: '0.5em',
@@ -47,9 +48,19 @@ function LocCodeChange() {
     const sggSelect = document.getElementById('select-sgg')
     const emdSelect = document.getElementById('select-emd')
 
+    const saveCodeEmd = localStorage.getItem('code_emd')
 
-    function handleClickLoc() {
+    async function handleClickLoc() {
         if (doeSelect.options[doeSelect.selectedIndex].text !== '도' && sggSelect.options[sggSelect.selectedIndex].text !== '시군구' && emdSelect.options[emdSelect.selectedIndex].text !== '읍면동') {
+
+            await axios.post('/api/edit-profile', { loc_code: saveCodeEmd })
+                .then(function (response) {
+                    console.log('loc', response);
+                })
+            callUserInfo().then((res) => {
+                console.log('11', res[0])
+            })
+
             localStorage.setItem('code_doe', doeSelect.value)
             localStorage.setItem('name_doe', doeSelect.options[doeSelect.selectedIndex].text)
             localStorage.setItem('code_sgg', sggSelect.value)
@@ -57,37 +68,38 @@ function LocCodeChange() {
             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: '확인'
-            })
-        }
+            // 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: '확인'
+        //     })
+        // }
 
     }
 
+
     async function getLocCode() {
-        const res = await axios.get("http://localhost:4500/api/data/loccode")
+        const res = await axios.get("/api/data/loccode")
         const local_codes = res.data.locCodes
 
         setDoes(local_codes.DOE)
@@ -107,9 +119,12 @@ function LocCodeChange() {
             }
         })
         emds.map(function (emdvalue) {
-            if (sggSelect.value == emdvalue['code_sgg']) {
+            if (sggSelect.value == emdvalue['code_sgg'] && doeSelect.value == emdvalue['code_doe']) {
                 setEmdsArray(emdvalue['emd'])
             }
+            else {
+                return false
+            }
         })
     }
 
@@ -126,10 +141,10 @@ function LocCodeChange() {
                 </Card.Subtitle>
                 <hr />
                 <Card.Text className='m-0'>
-                    <Form style={inboxstyled}>
+                    <Form style={inboxstyled} onChange={selectLocal}>
                         <Row md={12} xs={12} className='m-auto w-100 d-flex justify-content-center' style={{ padding: '0', display: 'flex', justifyContent: 'center', width: '100%' }}>
                             <Form.Group className='m-auto w-100' style={btnstyled2}>
-                                <Row className='m-auto pb-3' onChange={selectLocal}>
+                                <Row className='m-auto pb-3'>
                                     <Col md={4} xs={4} style={{ padding: '2px' }}>
 
                                         <Form.Control as='select' size="sm" id='select-doe'>

client/src/components/LoginComp.js

@@ -48,9 +48,17 @@ function LoginComp() {
 
     function addressUrl() {
         const afterAt = localStorage.getItem('login_email_Address').split('@')[1]
+        if (afterAt == ('naver.com' || 'gmail.com' || 'daum.net')) {
             const newLink = 'https://www.' + afterAt;
             window.open(newLink);
         }
+        if (afterAt == 'korea.ac.kr' ) {
+            window.open('https://www.gmail.com');
+        }
+        else { 
+            window.open();
+        }
+    }
 
     function handleChange(event) {
         setEmailAddress(event.target.value)
@@ -100,7 +108,6 @@ function LoginComp() {
 
                     <Form style={inboxstyled} onSubmit={handleSubmit}>
                         <FloatingLabel
-                            controlId="floatingInput"
                             label="Email"
                         >
                             <Form.Control type="email" placeholder="Email" onChange={handleChange} />

client/src/components/MainLayer.js

@@ -5,9 +5,8 @@ import '../App.css'
 import UserInfo from './UserInfo';
 import { kakaoLogout } from '../utils/Oauth';
 import axios from 'axios';
-import { Swal } from 'sweetalert2';
-import { deleteCookie } from '../utils/Cookies';
-import { checkCookies } from './../utils/Cookies';
+import { callUserInfo, deleteCookie } from '../utils/CheckDB';
+import { checkCookies } from '../utils/CheckDB';
 
 
 function MainLayer() {
@@ -37,25 +36,39 @@ function MainLayer() {
     }
 
 
-    const logined = localStorage.getItem('nickname')
     const [airUsing, setAirUsing] = useState(false)
 
-    function aircondiCheck() {
-        setAirUsing(!airUsing)
-        localStorage.setItem('using-aircondition', !airUsing);
-    }
-
     useEffect(() => {
-        const airUsingLocal = localStorage.getItem('using-aircondition')
-        if (airUsingLocal === 'true') {
-            return setAirUsing(true)
+        callUserInfo().then((res) => {
+            if (res !== []) {
+                console.log(res[0])
             }
             else {
-            return setAirUsing(false)
+                console.log(res)
             }
-    });
+        })
+    }, [])
 
 
+    async function airChange() {
+        setAirUsing(!airUsing)
+
+        await axios.post('/api/edit-profile', { using_aircon: !airUsing })
+            .then(function (response) {
+                console.log('res', response);
+                callUserInfo().then((res) => {
+                    if (res !== []) {
+                        console.log(res[0])
+                    }
+                    else {
+                        console.log(res)
+                    }
+                })
+            })
+            .catch(function (error) {
+                console.log('err', error);
+            });
+    }
 
 
     return (
@@ -77,7 +90,7 @@ function MainLayer() {
                         type='switch'
                         id='airconditioner'
                         label='에어컨 사용중'
-                        onChange={aircondiCheck}
+                        onChange={airChange}
                         checked={airUsing}
                     />
                 </Form>
@@ -85,9 +98,11 @@ function MainLayer() {
 
             <Row className='d-flex justify-content-center align-items-center my-2 mx-auto w-100'>
                 <ButtonGroup vertical className='m-auto' style={{ width: '100%', flexDirection: 'column' }}>
+
                     {checkCookies() ?
                         //true
-                        <Button variant='light' style={btnstyled} onClick={kakaoLogout || deleteCookie('acs_token')}>
+                        <Button variant='light' style={btnstyled} onClick={kakaoLogout}>
+                            {/*  || deleteCookie('acs_token') */}
                             로그아웃
                         </Button>
                         :
@@ -98,6 +113,7 @@ function MainLayer() {
                             </Link>
                         </Button>
                     }
+
                     {!checkCookies() &&
                         <Button variant='light' style={btnstyled}>
                             <Link to='/signup' id='btnlink'>

client/src/components/NicknameChange.js

-import React, { useEffect } from 'react'
+import axios from 'axios';
+import React, { useEffect, useState } from 'react'
 import { Row, Card, Col, Form, Button, FloatingLabel } from 'react-bootstrap';
+import { callUserInfo } from '../utils/CheckDB';
 
 function NicknameChange() {
 
@@ -25,18 +27,25 @@ function NicknameChange() {
         color: 'black'
     }
 
-    const exNick = localStorage.getItem('nickname')
-    console.log(exNick)
+    const [inputname, setInputname] = useState('')
 
-    function handleChange ({ target: { value } }) {
-        localStorage.setItem('nickname', value)
+    function handleChange({ target: { value } }) {
+        setInputname(value)
     }
+    console.log(inputname)
 
-    function handleSubmit(event) {
+    async function handleSubmit(event) {
         event.preventDefault();
-        window.location.reload();
-    };
+        await axios.post('/api/edit-profile', { nick_name: inputname })
+            .then(function (response) {
+                console.log(response);
+            })
+            callUserInfo().then((res) => {
+                console.log('11', res[0])
+            })
 
+        // window.location.reload();
+    };
 
     return (
         <Row className='text-center w-100 my-2'>
@@ -47,25 +56,19 @@ function NicknameChange() {
                 <Card.Subtitle style={{ fontWeight: 'lighter' }}>
                     새로운 닉네임으로 변경해보세요
                 </Card.Subtitle>
+
                 <hr />
-                <Card.Text className='m-0'>
 
+                <Card.Text className='m-0'>
                     <Form style={inboxstyled} onSubmit={handleSubmit}>
-                        <FloatingLabel
-                            controlId="floatingInput"
-                            label="Nickname"
-                        >
+                        <FloatingLabel 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>
     )

client/src/components/SignupComp.js

-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import '../App.css'
 import { Form, Button, Row, Col, Card, Alert, FloatingLabel } from 'react-bootstrap';
 import { LoginWithKakao } from '../utils/Oauth';
 import axios from 'axios';
+import { callUserInfo } from '../utils/CheckDB';
 
 function SignupComp() {
 
@@ -34,9 +35,6 @@ function SignupComp() {
     }
 
     const [formValues, setFormValues] = useState(initValues)
-    const [validated, setValidated] = useState(false)
-
-    const [emailSubm, setEmailSubm] = useState(false)
 
     const [userExist, setUserExist] = useState(false)
     const [alertShow, setAlertShow] = useState(false)
@@ -45,13 +43,32 @@ function SignupComp() {
         const { name, value } = event.target
         setFormValues({ ...formValues, [name]: value })
     }
-    console.log('???', formValues)
+    // console.log('???', formValues)
 
     async function handleSubmit(event) {
         event.preventDefault();
         await axios.post("/api/signup", formValues)
     }
 
+    const [userInfo, setUserInfo] = useState([])
+
+    function CheckUserExist() {
+        setUserInfo(callUserInfo())
+        setAlertShow(true)
+        if (userInfo) {
+            setUserExist(true)
+            // 기존회원
+        }
+        if (callUserInfo() === undefined) {
+
+            setUserExist(false)
+            // 신규회원
+        }
+    }
+    console.log(callUserInfo())
+    console.log(userExist)
+
+
     return (
 
         <Row className='text-center w-100 my-2'>
@@ -88,7 +105,6 @@ function SignupComp() {
 
                     <Form style={inboxstyled} onSubmit={handleSubmit}>
                         <FloatingLabel
-                            controlId="floatingInput"
                             label="Nickname"
                             className='mb-3'
                         >
@@ -101,7 +117,6 @@ function SignupComp() {
                             />
                         </FloatingLabel>
                         <FloatingLabel
-                            controlId="floatingInput"
                             label="Email Address"
                         >
                             <Form.Control
@@ -113,8 +128,7 @@ function SignupComp() {
                             />
                         </FloatingLabel>
 
-                        <Button variant='light' className='mt-3' id='formbtn' type='submit'>
-                            {/*  onClick={CheckUserExist} */}
+                        <Button variant='light' className='mt-3' id='formbtn' type='submit' onClick={CheckUserExist}>
                             Sign Up
                         </Button>
                     </Form>

client/src/components/UserInfo.js

-import React, { useState } from 'react'
-import { Row, Card, Button, Col, Modal } from 'react-bootstrap';
+import React, { useState, useEffect } from 'react'
+import { Row, Card, Button, Col } from 'react-bootstrap';
 import '../App.css'
 import { Link } from 'react-router-dom';
-import { checkCookies } from './../utils/Cookies';
+import { callUserInfo, checkCookies } from '../utils/CheckDB';
+import axios from 'axios';
 
 
 function UserInfo() {
 
-    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 = {
         margin: 'auto',
         padding: '1em 0.5em 1em 0.5em',
-        // paddingTop: '1em',
-        // paddingBottom: '1em',
         display: 'flex',
         justifyContent: 'center',
         width: '100%',
         borderWidth: '3px',
         borderRadius: '20px',
         borderColor: 'rgba(195, 195, 195, 0.753)',
-        // color: '#04AB70'
+
         color: 'rgb(110, 189, 142)',
 
 
@@ -40,19 +34,61 @@ function UserInfo() {
         width: '50%'
     }
 
+    const localname_doe = localStorage.getItem('name_doe')
+    const localname_sgg = localStorage.getItem('name_sgg')
+    const localname_emd = localStorage.getItem('name_emd')
+    const localcode_emd = localStorage.getItem('code_emd')
+
+    const [userNick, setUserNick] = useState('')
+    const [createdTime, setCreatedTime] = useState('')
+
+
+
+    useEffect(() => {
+        callUserInfo().then((res) => {
+            if (res !== []) {
+                setUserNick(res[0]['nick_name'])
+                const dateStr = res[0]['created_at'].split('T')[0].split('-')
+                console.log(dateStr)
+                const now = new Date();
+
+                const year = now.getFullYear(); // 년
+                const month = now.getMonth() + 1; // 월 0부터 시작
+                const day = now.getDate(); // 일
+
+                const stDate = new Date(dateStr[0], dateStr[1], dateStr[2])
+                console.log(stDate)
+
+                const endDate = new Date(year, month, day)
+                console.log(endDate)
+
+                const btMs = endDate.getTime() - stDate.getTime() // 주어진 날짜 사이의 경과 시간 (밀리 초)
+                console.log(btMs / 1000)
+
+                const btDay = btMs / (1000 * 60 * 60 * 24)
+                console.log(btDay)
+
+                setCreatedTime(btDay)
+            }
+            else {
+                console.log('Not Logined')
+            }
+        })
+    }, [])
+
     return (
         <Col className='text-center pt-3 pb-2 px-0'>
             <Card style={cardstyled} id='localName'>
                 <Card.Title>
                     <strong>
                         {checkCookies() ?
-                                <h2>
-                                    {`${nickname}`}
-                                </h2>
+                            <h3>
+                                {`${userNick}`}
+                            </h3>
                             :
-                                <h2>
+                            <h3>
                                 GUEST
-                                </h2>
+                            </h3>
                         }
                     </strong>
                     <p style={{ fontWeight: '300', margin: '0' }}>
@@ -86,12 +122,20 @@ function UserInfo() {
                     }
                 </Row>
                 {checkCookies() &&
-                        <p className='w-100 justify-content-center m-auto'>
-                            <hr />
 
-                            환경을 향한 노력 <br />
-                            <strong>OOO 일 째</strong>
+                    <Card.Text>
+                        <hr />
+                        <Row style={{ color: 'black' }}>
+                            <p style={{ fontWeight: '300', margin: '0' }}>
+                                환경을 향한 노력
                             </p>
+                            <h3 style={{ fontWeight: '300', color: '#2b90d9',  margin: '0' }}>
+                                {createdTime}일차
+                            </h3>
+
+                        </Row>
+
+                    </Card.Text>
                 }
             </Card>
         </Col>

client/src/pages/Home.js

@@ -7,7 +7,7 @@ import EueSuggest from '../components/EueSuggest';
 import ChartLine from '../components/ChartLine';
 import ChartDoughnut from '../components/ChartDoughnut';
 import Donation from '../components/Donation';
-import axios from 'axios';
+
 
 
 function Home() {
@@ -32,11 +32,6 @@ function Home() {
         padding: '0'
     }
 
-    async function test() {
-        const res = await axios.get("/api/user-info", { withCredentials: true })
-        console.log("@@@@", res)
-    }
-    test()
 
     return (
         <Container className='m-auto d-flex position-relative'