aircon 유지

client/src/App.css

@@ -37,7 +37,7 @@ body {
   color: rgb(129, 129, 129);
   align-items: center;
   justify-content: center;
-  padding: 0.5em;
+  font-weight: 300;
 }
 
 
@@ -87,7 +87,7 @@ body {
   }
 
   #contour {
-    padding: 10px;
+    padding-bottom: 1em;
     color: rgba(195, 195, 195, 0.753);
   }
   

client/src/components/EueSuggest.js

@@ -22,12 +22,14 @@ function EueSuggest() {
             <Card style={cardstyled}>
 
                 <Card.Title>
-                    EUE 제안
+                    <p>
+                        EUE 제안
+                    </p>
                 </Card.Title>
                 <Card.Text>
                     "에어컨을 줄이시면 더 효율적입니다."
                 </Card.Text>
-                
+
             </Card>
         </Row>
     )

client/src/components/Footer.js

 import React, { useEffect, useState } from 'react'
-import { Row, Card,  Button, Col, Modal,  } from 'react-bootstrap';
+import { Row, Card, Button, Col, Modal, } from 'react-bootstrap';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import '../App.css'
 
@@ -50,9 +50,11 @@ function Footer() {
         <Row className='text-center w-100 my-2'>
             <Card style={cardstyled}>
                 <Card.Title>
-                    서버비용 후원하기
+                    <p>
+                        서버비용 후원하기
+                    </p>
                 </Card.Title>
-                <Card.Subtitle style={{fontWeight: 'lighter'}}>
+                <Card.Subtitle>
                     이용하시는데 불편함이 없도록 광고 없이 운영하고 있습니다. <br />
                     서버비용 충당 후 후원금이 남을시 UNICEF 에 기부하겠습니다.
                 </Card.Subtitle>

client/src/components/Loading.js

@@ -4,9 +4,7 @@ import { Spinner, Row, Button } from 'react-bootstrap';
 function Loading() {
     return (
             <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>
-                </Spinner>
+                <Spinner animation="border" role="status"/>
                 <br />
                 Loading...
             </Button>

client/src/components/MainLayer.js

@@ -35,7 +35,6 @@ function MainLayer() {
     }
 
     const logined = localStorage.getItem('nickname')
-
     const [airUsing, setAirUsing] = useState(false)
 
     function aircondiCheck() {
@@ -43,6 +42,20 @@ function MainLayer() {
         localStorage.setItem('using-aircondition', !airUsing);
     }
 
+    useEffect(() => {
+        const airUsingLocal = localStorage.getItem('using-aircondition')
+        if (airUsingLocal === 'true') {
+            console.log('!!', airUsing);
+            console.log(airUsingLocal);
+            return setAirUsing(true)
+        }
+        else {
+            console.log('%%', airUsing);
+            console.log(airUsingLocal);
+            return setAirUsing(false)
+        }
+    });
+
     return (
         <Col>
             <Row className='d-flex align-items-center m-auto w-100'>
@@ -54,15 +67,19 @@ function MainLayer() {
             <Row className='m-auto d-flex justify-content-center w-100'>
                 <UserInfo />
             </Row>
-            <Form
-                key='checkbox' className="d-flex  justify-content-center w-100" style={{ flexDirection: 'row-reverse' }}>
-                <Form.Check
-                    type='switch'
-                    id='aircondition-checkbox'
-                    label='에어컨 사용중'
-                    onChange={aircondiCheck}
-                />
-            </Form>
+
+            {logined &&
+                <Form
+                    key='checkbox' className="d-flex  justify-content-center w-100" style={{ flexDirection: 'row-reverse' }}>
+                    <Form.Check
+                        type='switch'
+                        id='aircondition-checkbox'
+                        label='에어컨 사용중'
+                        onChange={aircondiCheck}
+                        checked={airUsing}
+                    />
+                </Form>
+            }
 
             <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' }}>

client/src/components/PageNotFound.js

 import React, { useEffect } from 'react'
 import { Row, Container } from 'react-bootstrap';
-import { Redirect } from 'react-router-dom';
 import Loading from './Loading';
 
-// const goHome = setTimeout(window.location.replace('/'), 3000);
-
-
 function PageNotFound() {
     useEffect(() => {
         setTimeout(window.location.replace('/'), 5000);
@@ -13,12 +9,19 @@ function PageNotFound() {
 
     return (
         <Container className='d-flex justify-content-center align-items-center' style={{ flexDirection: 'column', height: '70vh' }} >
-            <Row style={{marginBottom: '1em', fontSize: '2rem', fontWeight: 'bold' }}>
-                잘못된 접근 입니다. <br />PAGE NOT FOUND
-            </Row>
             <Row>
                 <Loading />
             </Row>
+            <Row className='m-5'>
+                <h1 className='d-flex justify-content-center'>
+                    PAGE NOT FOUND
+                </h1>
+                <br />
+                <h3 className='d-flex justify-content-center' style={{fontWeight: '300'}}>
+                    잘못된 접근 입니다.
+                </h3>
+            </Row>
+
         </Container>
     )
 }

client/src/components/UserInfo.js

@@ -13,8 +13,9 @@ function UserInfo() {
 
     const cardstyled = {
         margin: 'auto',
-        paddingTop: '1em',
-        paddingBottom: '1em',
+        padding: '1em 0.5em 1em 0.5em',
+        // paddingTop: '1em',
+        // paddingBottom: '1em',
         display: 'flex',
         justifyContent: 'center',
         width: '100%',
@@ -43,22 +44,37 @@ function UserInfo() {
             <Col className='text-center pt-3 pb-2 px-0'>
                 <Card style={cardstyled} id='localName'>
                     <Card.Title>
-                        {nickname ?
-                            `${nickname}`
-                            :
-                            <>
-                                GUEST
-                            </>
-                        }, 환영합니다.
+                        <strong>
+                            {nickname ?
+                                <h2>
+                                    {`${nickname}`}
+                                </h2>
+                                :
+                                <h2>
+                                    GUEST
+                                </h2>
+                            }
+                        </strong>
+                        <p style={{ fontWeight: '300', margin: '0' }}>
+                            환영합니다
+                        </p>
                     </Card.Title>
+                    <hr />
                     <Row style={{ alignItems: 'center', margin: 'auto', justifyContent: 'center' }}>
-                        <Card.Subtitle className='py-3' style={{fontSize: '0.9em'}}>
+                        <Card.Subtitle>
                             {localname_emd ?
-                                `${localname_doe} ${localname_sgg} ${localname_emd}`
+                                <p className='mb-2'>
+
+                                    {`${localname_doe}`}
+                                    <br />
+                                    {`${localname_sgg}`}
+                                    <br />
+                                    {`${localname_emd}`}
+                                </p>
                                 :
-                                <>
-                                    지역을 입력해 주세요
-                                </>
+                                <p className='mb-2'>
+                                    로그인 후 이용 가능합니다
+                                </p>
                             }
                         </Card.Subtitle>
                         {nickname &&
@@ -69,10 +85,14 @@ function UserInfo() {
                             </Button>
                         }
                     </Row>
-                    <hr />
+                    {nickname &&
+                        <p className='w-100 justify-content-center m-auto'>
+                            <hr />
 
-                    환경을 향한 노력 <br />
-                    <strong>OOO 일 째</strong>
+                            환경을 향한 노력 <br />
+                            <strong>OOO 일 째</strong>
+                        </p>
+                    }
                 </Card>
             </Col>
         </Row>

client/src/routes.js

-// # Global Routes
-const BASE = "/api";
-
-// # Data Routes
-const DATA = "/data";
-// Data - Collector
-const DATA_INPUT = "/input";
-// Data - Consumer
-const DATA_USER = "/user";
-const DATA_OUTSIDE = "/outside";
-
-// # Local Code Data
-const LOCCODE = "/loccode";
-
-// # Auth
-const SIGNUP = "/signup";
-const LOGIN = "/login";
-const CONFIRM = "/confirm";
-const EDIT_PROFILE = "/edit-profile";
-
-// # Detail Object
-const DETAIL = "/:id";
-
-const routes = {
-  base: BASE,
-  data: DATA,
-  dataInput: DATA_INPUT,
-  dataUser: DATA_USER,
-  dataOutside: DATA_OUTSIDE,
-  locCode: LOCCODE,
-  signup: SIGNUP,
-  login: LOGIN,
-  confirm: CONFIRM,
-  editProfile: EDIT_PROFILE,
-  Detail: (id) => {
-    if (id) {
-      return `/${id}`;
-    } else {
-      return DETAIL;
-    }
-  },
-};
-
-export default routes;
+export const routes = {
+  home: '/',
+  signup: '/signup',
+  login: 'login',
+  localcode: '/local_code',
+}