로그인 후에 지역정보 입력 페이지로 이동, 로컬 로그아웃 추가, 서버 리다이렉트 링크 수정

client/src/App.js

-import React, { useEffect } from 'react';
+import React from 'react';
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 import './App.css';
 import Home from './pages/Home';
@@ -8,21 +8,28 @@ import EditPage from './pages/EditPage';
 import PrivateRoute from './utils/PrivateRoutes';
 import PageNotFound from './components/PageNotFound';
 import Footer from './components/Footer';
-import { checkCookies } from './utils/CheckDB';
+import GetLocFirst from './pages/GetLocFirst';
 
 
 function App() {
-  useEffect(() => {
-    localStorage.setItem('login', false)
-  }, [checkCookies()])
+
+  const isLs = localStorage.getItem('login')
+
+  function loginDefault() {
+    if (isLs === null) {
+      localStorage.setItem('login', false)
+    }
+  }
 
   return (
     <Router>
+      {loginDefault()}
       <Switch>
         <Route exact path='/' component={Home} />
         <Route path='/signup' component={SignupPage} />
         <Route path='/login' component={LoginPage} />
-
+        <Route path='/first-local-code' component={GetLocFirst} />
+        
         <PrivateRoute path='/edit'>
           <EditPage />
         </PrivateRoute>

client/src/Utils/Auth.js

 import axios from 'axios';
-import { callUserInfo, checkCookies } from './CheckDB';
-
-export function haveLogined() {
-    callUserInfo().then((res) => {
-        if (res && checkCookies()) {
-            return true
-        }
-        else {
-            console.log('object')
-            console.log(res)
-        }
-    })
-}
+import Swal from 'sweetalert2';
 
 export function isOauth(value) {
     const TFoauth = value
@@ -28,6 +16,24 @@ export function isLogined() {
     }
 }
 
-export function logout() {
-    localStorage.setItem('login', false)
-}
+export async function localLogout() {
+    await axios.get('/api/logout')
+        .then(function () {
\ No newline at end of file
+            localStorage.clear();
+            Swal.fire({
+                title: '로그아웃 성공!',
+                text: '🙏 안녕히 가세요 🙏',
+                icon: 'warning',
+                customClass: 'swal-wide',
+                confirmButtonText: '확인',
+            }).then((res) => {
+                if (res.isConfirmed) {
+                    window.location.replace('/')
+                }
+                else {
+                    window.location.replace('/')
+                }
+            })
+        })
+}
+

client/src/Utils/CheckDB.js

@@ -4,7 +4,7 @@ import { Swal } from 'sweetalert2';
 
 export async function callUserInfo() {
     const res = await axios.get("/api/user-info")
-    return res.data.user_info
+    return res.data.contents.user_info
 }
 
 export function checkCookies() {

client/src/Utils/Oauth.js

+import axios from 'axios';
 import Swal from 'sweetalert2'
 import '../App.css'
 
@@ -15,8 +16,6 @@ export function LoginWithKakao() {
         success: function (authObj) {
             console.log(JSON.stringify(authObj))
 
-            console.log('accT ;;', authObj.access_token)
-
             Kakao.API.request({
                 // 현재 로그인한 사용자의 카카오계정 정보 불러오기
                 url: '/v2/user/me',
@@ -25,14 +24,16 @@ export function LoginWithKakao() {
                     property_keys: ["kakao_account.profile", "kakao_account.email"]
                     // 파라미터를 통해 특정 사용자 정보만 지정해서 요청
                 },
-                success: function (response) {
+                success: async function (response) {
                     console.log(response);
                     console.log(response.kakao_account.profile);
 
                     const nickValue = Object.values(response.kakao_account.profile)
-                    localStorage.setItem('nickname', nickValue)
-                    const nickname = localStorage.getItem('nickname')
-                    console.log(nickname)
+
+                    await axios.post('/api/edit-profile', {nick_name: nickValue})
+                        .then((res) => console.log('kakao', res))
+
+                    localStorage.setItem('login', true)
                     Swal.fire({
                         title: '로그인 성공!',
                         text: '🙌 환영합니다 🙌',
@@ -41,10 +42,10 @@ export function LoginWithKakao() {
                         confirmButtonText: '확인',
                     }).then((res) => {
                         if (res.isConfirmed) {
-                            window.location.replace('/' + '?nickname=' + `${nickname}`)
+                            // window.location.replace('/')
                         }
                         else {
-                            window.location.replace('/' + '?nickname=' + `${nickname}`)
+                            // window.location.replace('/')
                         }
                     })
                 }

client/src/components/EueSuggest.js

@@ -15,8 +15,6 @@ function EueSuggest() {
         color: '#04AB70'
     }
     
-    const airUsing = localStorage.getItem('using-aircondition')
-
 
     return (
         <Row className='text-center w-100 my-2'>

client/src/components/LocCodeChange.js

@@ -84,7 +84,6 @@ function LocCodeChange() {
             && emdSelect.options[emdSelect.selectedIndex].text !== '읍면동') {
 
             const saveCodeEmd = emdSelect.value
-            console.log(saveCodeEmd)
 
             await axios.post('/api/edit-profile', { loc_code: saveCodeEmd }) // loccal code 수정
 
@@ -99,10 +98,10 @@ function LocCodeChange() {
                         confirmButtonText: '확인',
                     }).then((res) => {
                         if (res.isConfirmed) {
-                            window.location.reload()
+                            window.location.replace('/')
                         }
                         else {
-                            window.location.reload()
+                            window.location.replace('/')
                         }
                     })
                 }

client/src/components/MainLayer.js

@@ -5,7 +5,7 @@ import '../App.css'
 import UserInfo from './UserInfo';
 import { kakaoLogout } from '../utils/Oauth';
 import UsingAircon from './UsingAircon';
-import { isLogined } from '../utils/Auth';
+import { isLogined, localLogout } from '../utils/Auth';
 
 
 function MainLayer() {
@@ -34,10 +34,7 @@ function MainLayer() {
         color: 'white'
     }
 
-
-
     return (
-        
         <Col>
             <Row className='d-flex align-items-center m-auto w-100 p-0'>
                 <Link to='/' className='p-0 m-auto'>
@@ -49,16 +46,14 @@ function MainLayer() {
                 <UserInfo />
             </Row>
 
-            {isLogined() &&
-                <UsingAircon/>
-            }
+            <UsingAircon />
 
             <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' }}>
 
                     {isLogined() ?
                         //true
-                        <Button variant='light' style={btnstyled} onClick={kakaoLogout}>
+                        <Button variant='light' style={btnstyled} onClick={localLogout}>
                             로그아웃
                         </Button>
                         :

client/src/components/NicknameChange.js

 import axios from 'axios';
-import React, { useEffect, useState } from 'react'
-import { Row, Card, Col, Form, Button, FloatingLabel } from 'react-bootstrap';
+import React, { useState } from 'react'
+import { Row, Card, Form, Button, FloatingLabel } from 'react-bootstrap';
 import Swal from 'sweetalert2';
 
 function NicknameChange() {
@@ -53,12 +53,10 @@ function NicknameChange() {
                         })
                     }
                     else {
-                        console.log('ERROR')
+                        console.log(response.data.msg);
                     }
                 })
         }
-
-        // window.location.reload();
     };
 
     return (
@@ -76,7 +74,7 @@ function NicknameChange() {
                 <Card.Text className='m-0'>
                     <Form style={inboxstyled} onSubmit={handleSubmit}>
                         <FloatingLabel label="Nickname">
-                            <Form.Control type="text" placeholder="닉네임 변경" id='nickname' onChange={handleChange} required/>
+                            <Form.Control type="text" placeholder="닉네임 변경" id='nickname' onChange={handleChange} required />
                         </FloatingLabel>
                         <Button variant='light' className='mt-3' id='formbtn' type='submit'>
                             변 경

client/src/components/TimeNow.js

@@ -5,31 +5,34 @@ import '../App.css'
 
 
 function TimeNow() {
+
     const cardstyled = {
         margin: 'auto',
         padding: '1em',
         display: 'flex',
         justifyContent: 'center',
         width: '100%',
-        borderWidth: '1.5px',
+        borderWidth: '3px',
         borderRadius: '20px',
-        borderColor: '#04AB70',
-        color: 'rgb(110, 189, 142)'
+        borderColor: 'rgb(110, 189, 142)',
+        color: '#04AB70'
     }
-        return (
-                <Row className='text-center w-100 my-2'>
-                    <Card style={cardstyled}>
-                        <Card.Title style={{color:'black'}}>
-                            현재시각
-                        </Card.Title>
-                        <Card.Text>
-                            <Clock format={'Y년 M월 D일'} />
-                            <br/>
-                            <Clock format={'HH : mm : ss'} ticking={true} timezone={"KR"} />
-                        </Card.Text>
-                    </Card>
-                </Row>
-        )
+    return (
+        <Row className='text-center w-100 my-2'>
+            <Card style={cardstyled}>
+                <Card.Title>
+                    <p>
+                        현재시각
+                    </p>
+                </Card.Title>
+                <Card.Text>
+                        <Clock format={'Y년 M월 D일'} />
+                    <br />
+                    <Clock format={'HH : mm : ss'} ticking={true} timezone={"KR"} />
+                </Card.Text>
+            </Card>
+        </Row>
+    )
 }
 
 export default TimeNow;
\ No newline at end of file

client/src/components/UserInfo.js

@@ -2,15 +2,12 @@ import React, { useState, useEffect } from 'react'
 import { Row, Card, Button, Col } from 'react-bootstrap';
 import '../App.css'
 import { Link } from 'react-router-dom';
-import { callUserInfo, checkCookies } from '../utils/CheckDB';
-import axios from 'axios';
+import { callUserInfo } from '../utils/CheckDB';
 import { isLogined } from '../utils/Auth';
 
 
 function UserInfo() {
 
-    const islogin = localStorage.getItem('login')
-
     const cardstyled = {
         margin: 'auto',
         padding: '1em 0.5em 1em 0.5em',
@@ -48,52 +45,40 @@ function UserInfo() {
                 const day = now.getDate(); // 일
 
                 const stDate = new Date(dateStr[0], dateStr[1], dateStr[2]) // 가입 날짜
+
                 const endDate = new Date(year, month, day) // 현재 시간
 
                 const btMs = endDate.getTime() - stDate.getTime() // 주어진 날짜 사이의 경과 시간 (밀리 초)
+
                 const btDay = btMs / (1000 * 60 * 60 * 24) // 초 -> 일
 
                 setCreatedTime(btDay)
             }
-            else {
-                console.log('Not Logined')
-            }
         })
-    }, [checkCookies()])
-
+    }, [])
 
-    const codeInit = {
-        code_doe: '',
-        code_sgg: '',
-        code_emd: ''
-    }
-    const [codeValue, setCodeValue] = useState(codeInit)
+    const [showState, setShowState] = useState('')
+    const [localState, setLocalState] = useState([])
 
     useEffect(() => {
-
         // user-info 에서 loc_code
         callUserInfo().then((res) => {
             if (isLogined()) {
-                console.log(res[0].loc_code)
-                const newCode = res[0].loc_code
-                const newdoe = String(newCode).substring(0, 2)
-                const newsgg = String(newCode).substring(0, 5)
-                const newemd = String(newCode).substring(0,)
-
-                async function CompareCode() {
-                    await axios.get('/api/data/loccode').then((response) => {
-                        console.log(response.data.contents.loc_code)
-                    })
+                const dbloc = res[0].loc_code
+                if (dbloc === null) {
+                    setShowState('지역을 입력해주세요')
+                    const localstyle = document.getElementById('local_state')
+                    localstyle.style.display = 'none'
+                }
+                else {
+                    const localName = res[0].loc_name
+                    setLocalState(localName)
                 }
-                CompareCode()
-
-            }
-            else {
-                console.log(res)
             }
         })
     }, [])
 
+
     return (
         <Col className='text-center pt-3 pb-2 px-0'>
             <Card style={cardstyled} id='localName'>
@@ -117,21 +102,27 @@ function UserInfo() {
                 <Row style={{ alignItems: 'center', margin: 'auto', justifyContent: 'center' }}>
                     <Card.Subtitle>
                         {isLogined() ?
-                            <p className='mb-2'>
-                                ????????
-                                {/* 
-                                {`${localname_doe}`}
-                                <br />
-                                {`${localname_sgg}`}
-                                <br />
-                                {`${localname_emd}`} */}
-                            </p>
+                            <div className='mb-2'>
+                                <div>
+                                    {showState}
+                                </div>
+
+                                <div id='local_state'>
+                                    {`${localState['doe']}`}
+                                    <br />
+                                    {`${localState['sgg']}`}
+                                    <br />
+                                    {`${localState['emd']}`}
+                                </div>
+
+                            </div>
                             :
-                            <p className='mb-2'>
+                            <div className='mb-2'>
                                 로그인 후 이용 가능합니다
-                            </p>
+                            </div>
                         }
                     </Card.Subtitle>
+
                     {isLogined() &&
                         <Button variant='light' className='m-auto d-flex' style={btnstyled2}>
                             <Link to='/edit' className='w-100' style={{ textDecoration: 'none', color: 'rgb(110, 189, 142)' }}>
@@ -141,7 +132,6 @@ function UserInfo() {
                     }
                 </Row>
                 {isLogined() &&
-
                     <Card.Text>
                         <hr />
                         <Row style={{ color: 'black' }}>
@@ -149,7 +139,7 @@ function UserInfo() {
                                 환경을 향한 노력
                             </p>
                             <h3 style={{ fontWeight: '300', color: '#2b90d9', margin: '0' }}>
-                                {createdTime}일차
+                                <strong>{createdTime}</strong> 일차
                             </h3>
 
                         </Row>

client/src/components/UsingAircon.js

 import axios from "axios";
 import React, { useEffect, useState } from "react";
 import { Form } from "react-bootstrap";
-import { callUserInfo } from "../utils/CheckDB";
+import { callUserInfo, checkCookies } from "../utils/CheckDB";
 import { isLogined } from './../utils/Auth';
 
 function UsingAircon() {
 
     const [airUsing, setAirUsing] = useState(false)
 
-    useEffect(() => {
-        callUserInfo().then((res) => {
-            if (isLogined()) {
-                setAirUsing(res[0].using_aircon)
-            }
-            else {
-                console.log(res)
-            }
-        })
-    }, [])
+    // useEffect(() => {
+    //     callUserInfo().then((res) => {
+    //         if (isLogined()) {
+    //             setAirUsing(res.using_aircon)
+    //         }
+    //         else {
+    //             console.log(res)
+    //         }
+    //     })
+    // }, [checkCookies()])
 
-    async function airChange() {
+    function airChange() {
         setAirUsing(!airUsing)
-        await axios.post('/api/edit-profile', { using_aircon: !airUsing })
-            .then(
-                callUserInfo().then((res) => {
-                    if (isLogined()) {
-                        console.log('using_aircon :', res[0].using_aircon)
-                    }
-                    else {
-                        console.log(res)
-                    }
-                })
-            )
-            .catch(function (error) {
-                console.log('err', error);
-            });
+        async function Useair() {
+            const res = await axios.post('/api/edit-profile', { using_aircon: !airUsing })
+            console.log(res)
+        }
+        
+        Useair()
     }
 
+
+    console.log('airUsing', airUsing)
+
     return (
-        <Form
-            key='checkbox' className="d-flex  justify-content-center w-100" style={{ flexDirection: 'row-reverse' }}>
-            <Form.Check
-                type='switch'
-                id='airconditioner'
-                label='에어컨 사용중'
-                onChange={airChange}
-                checked={airUsing}
-            />
-        </Form>
+        <>
+            {isLogined() &&
+                <Form
+                    key='checkbox' className="d-flex justify-content-center w-100" style={{ flexDirection: 'row-reverse' }}>
+                    <Form.Check
+                        type='switch'
+                        id='airconditioner'
+                        label='에어컨 사용중'
+                        onChange={airChange}
+                        checked={airUsing}
+                    />
+                </Form>
+            }
+        </>
     )
 }
 

client/src/pages/GetLocFirst.js

+import React, { useEffect, useState } from 'react'
+import { Container, Row, Col, Modal } from 'react-bootstrap';
+import MainLayer from '../components/MainLayer';
+import TimeNow from './../components/TimeNow';
+import '../App.css'
+import EueSuggest from '../components/EueSuggest';
+import ChartLine from '../components/ChartLine';
+import ChartDoughnut from '../components/ChartDoughnut';
+import Donation from '../components/Donation';
+import LocCodeChange from '../components/LocCodeChange';
+
+function GetLocFirst() {
+    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'
+    }
+
+    useEffect(() => {
+        setTimeout(function () {
+            setShow(true)
+        }, 1500)
+    }, [])
+
+    const [show, setShow] = useState(false)
+
+    return (
+        <Container className='m-auto d-flex position-relative'
+            style={{ flexDirection: 'column' }} fluid>
+            <Row className='d-flex'>
+                <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}>
+                        <TimeNow />
+                        <EueSuggest />
+                        <ChartLine />
+                        <ChartDoughnut />
+                        <Donation />
+                    </Col>
+
+                    <Modal
+                        show={show}
+                        backdrop="static"
+                        style={{ marginTop: '10%' }}>
+                        <Modal.Header className='d-flex justify-content-center top-10'>
+                            <Modal.Title>EUE에 오신걸 환영합니다</Modal.Title>
+                        </Modal.Header>
+                        <Modal.Body className='d-flex justify-content-center top-10'>
+                            <LocCodeChange />
+                        </Modal.Body>
+                    </Modal>
+                </Row>
+            </Row>
+        </Container>
+    );
+}
+
+
+export default GetLocFirst;
\ No newline at end of file

client/src/pages/Home.js

@@ -43,7 +43,7 @@ function Home() {
                     </Col>
 
                     <Col md={6} style={col2sty}>
-                        {/* <TimeNow /> */}
+                        <TimeNow />
                         <EueSuggest />
                         <ChartLine />
                         <ChartDoughnut />

client/src/pages/LoginPage.js

@@ -3,7 +3,6 @@ import { Container, Row, Col } from 'react-bootstrap';
 import MainLayer from '../components/MainLayer';
 import '../App.css'
 import LoginComp from '../components/LoginComp';
-import Footer from './../components/Footer';
 
 function SignupPage() {
     const constyled = {

client/src/pages/SignupPage.js

@@ -3,7 +3,6 @@ import { Container, Row, Col } from 'react-bootstrap';
 import MainLayer from '../components/MainLayer';
 import '../App.css'
 import SignupComp from '../components/SignupComp';
-import Footer from './../components/Footer';
 
 function SignupPage() {
     const constyled = {

server/src/controllers/userController.js

@@ -25,13 +25,10 @@ const postMail = async (email, token) => {
     from: `EUE Auth Supply <${envs.api.nodemailer.user}>`,
     to: email,
     subject: "EUE 사용자 계정 확인용 메일.",
-    html: `<a href="${envs.server.protocol}://${envs.server.host}:${
-      envs.server.port
-    }${routes.base + routes.confirm}?token=${token}">${
-      envs.server.protocol
-    }://${envs.server.host}:${envs.server.port}${
-      routes.base + routes.confirm
-    }?token=${token}</a>`,
+    html: `<a href="${envs.server.protocol}://${envs.server.host}:${envs.server.port
+      }${routes.base + routes.confirm}?token=${token}">${envs.server.protocol
+      }://${envs.server.host}:${envs.server.port}${routes.base + routes.confirm
+      }?token=${token}</a>`,
   };
 
   try {
@@ -127,10 +124,7 @@ export const postLogin = async (req, res) => {
 
 // 로그아웃 요청 처리
 export const getLogout = (req, res) => {
-  res.clearCookie("acs_token").redirect("/api");
-  // .redirect(
-  //   `${envs.client.protocol}://${envs.client.host}:${envs.client.port}`
-  // );
+  res.clearCookie("acs_token")
 };
 
 // 메일로 보낸 토큰의 유효성 검사 및 access 토큰 발행 처리
@@ -158,10 +152,10 @@ export const getConfirm = async (req, res) => {
       subject: "userInfo",
     });
 
-    res.cookie("acs_token", accessT).redirect("/api");
-    // .redirect(
-    //   `${envs.client.protocol}://${envs.client.host}:${envs.client.port}`
-    // );
+    res.cookie("acs_token", accessT)
+      .redirect(
+        "http://localhost:3000/first-local-code"
+      );
   } catch (err) {
     res.json({ msg: resForm.msg.err, contents: { error: err } });
   }
@@ -244,7 +238,7 @@ export const postEditProfile = async (req, res) => {
     let new_nick_name = nick_name ? nick_name : user.nick_name;
     let new_loc_code = loc_code ? Number(loc_code) : Number(user.loc_code);
     let new_using_aircon = using_aircon
-      ? using_aircon === "true"
+      ? using_aircon === 'true'
       : user.using_aircon;
 
     await db.User.update(