전체적인 GUI 수정 및 추가

client/src/components/Donation.js

@@ -24,6 +24,7 @@ function Donation() {
         color: 'rgb(110, 189, 142)',
         borderColor: 'rgba(195, 195, 195, 0.753)',
         borderRadius: '20px',
+        fontSize: '1em'
     }
 
     const [donateShow, setDonateShow] = useState(false);
@@ -58,7 +59,7 @@ function Donation() {
                     이용하시는데 불편함이 없도록 광고 없이 운영하고 있습니다. <br />
                     서버비용 충당 후 후원금이 남을시 UNICEF 에 기부하겠습니다.
                 </Card.Subtitle>
-                <Row className='my-2 d-flex justify-content-center'>
+                <Row className='py-3 d-flex justify-content-center'>
                     <Button variant='light' style={btnstyled2} onClick={() => setDonateShow(true)}>
                         ♥ 후원하기
                     </Button>
@@ -88,7 +89,7 @@ function Donation() {
                                                     margin: '5px',
                                                     maxWidth: 'fit-content',
                                                     borderWidth: '2px',
-                                                    fontSize: '14px',
+                                                    // fontSize: '14px',
                                                     color: 'black',
                                                     border: 'none',
                                                     whiteSpace: 'nowrap'
@@ -110,7 +111,7 @@ function Donation() {
                     </Modal>
                 </Row>
                 <Row className='d-flex justify-content-center flex-direction-column' style={{ color: 'rgb(109, 110, 109)', flexDirection: 'column', fontSize: '0.8em' }}>
-                    
+
                 </Row>
 
             </Card>

client/src/components/EueSuggest.js

 import React, { useEffect } from 'react'
 import { Row, Card, Col } from 'react-bootstrap';
+import { isLogined } from '../utils/Auth';
 
 function EueSuggest() {
 
@@ -14,7 +15,6 @@ function EueSuggest() {
         borderColor: 'rgb(110, 189, 142)',
         color: '#04AB70'
     }
-    
 
     return (
         <Row className='text-center w-100 my-2'>
@@ -26,7 +26,15 @@ function EueSuggest() {
                     </p>
                 </Card.Title>
                 <Card.Text>
-                    "에어컨을 줄이시면 더 효율적입니다."
+                    {isLogined() ?
+                        <>
+                            에어컨을 줄이시면 더 효율적입니다.
+                        </>
+                        :
+                        <>
+                            로그인 후 사용가능합니다.
+                        </>
+                    }
                 </Card.Text>
 
             </Card>

client/src/components/Loading.js

 import React from 'react'
-import { Spinner, Row, Button } from 'react-bootstrap';
+import { Spinner, Button } from 'react-bootstrap';
 
 function Loading() {
     return (

client/src/components/LoginComp.js

@@ -63,10 +63,10 @@ function LoginComp() {
         <Row className='text-center w-100 my-2'>
             <Card style={cardstyled}>
                 <Card.Title id='impactTitle'>
-                    LOGIN
+                    로그인
                 </Card.Title>
                 <Card.Subtitle style={{ fontWeight: 'lighter' }}>
-                    Log in with your social media account or email address
+                    이메일 또는 소셜미디어로 로그인하세요
                 </Card.Subtitle>
                 <hr />
                 <Card.Text>
@@ -97,7 +97,7 @@ function LoginComp() {
                             <Form.Control type="email" placeholder="Email" onChange={handleChange} required />
                         </FloatingLabel>
                         <Button variant='light' className='mt-3' id='formbtn' type='submit'>
-                            LOGIN
+                            로그인
                         </Button>
                     </Form>
 

client/src/components/MainLayer.js

 import React from 'react'
-import { Button, Image, Row, ButtonGroup, Form, Col } from 'react-bootstrap';
+import { Button, Image, Row, ButtonGroup, Col } from 'react-bootstrap';
 import { Link } from 'react-router-dom';
 import '../App.css'
 import UserInfo from './UserInfo';
 import { kakaoLogout } from '../utils/Oauth';
 import UsingAircon from './UsingAircon';
 import { isLogined, localLogout } from '../utils/Auth';
+import TimeNow from './TimeNow';
 
 
 function MainLayer() {
@@ -40,9 +41,11 @@ function MainLayer() {
                 <Link to='/' className='p-0 m-auto'>
                     <Image src='/images/EUE11.jpg' alt='EUE' style={boxstyled} />
                 </Link>
+
             </Row>
 
             <Row className='m-auto d-flex justify-content-center w-100'>
+                <TimeNow />
                 <UserInfo />
             </Row>
 
@@ -74,6 +77,7 @@ function MainLayer() {
                     }
 
                 </ButtonGroup>
+
             </Row>
             <Row className='m-auto justify-content-center w-100' id='contour'>
                 |

client/src/components/SignupComp.js

-import React, { useEffect, useState } from 'react'
+import React, { useState } from 'react'
 import '../App.css'
 import { Form, Button, Row, Col, Card, Alert, FloatingLabel } from 'react-bootstrap';
 import { LoginWithKakao } from '../utils/Oauth';
@@ -58,10 +58,10 @@ function SignupComp() {
         <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>
@@ -113,7 +113,7 @@ function SignupComp() {
                         </FloatingLabel>
 
                         <Button variant='light' className='mt-3' id='formbtn' type='submit'>
-                            Sign Up
+                            회원가입
                         </Button>
                     </Form>
 

client/src/components/TimeNow.js

 import React from "react";
-import { Row, Card } from "react-bootstrap";
+import { Row, Col } from "react-bootstrap";
 import Clock from "react-live-clock";
 import "../App.css";
 
 function TimeNow() {
   const cardstyled = {
     margin: "auto",
-    padding: "1em",
+    padding: "0.5em",
     display: "flex",
     justifyContent: "center",
     width: "100%",
-    borderWidth: "3px",
-    borderRadius: "20px",
-    borderColor: "rgb(110, 189, 142)",
-    color: "#04AB70",
+    border: 'none',
+    flexDirection: 'column',
+    color: "rgb(70, 70, 70) ",
+    fontWeight: '300'
   };
+
   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={"Asia/Seoul"}
-          />
-        </Card.Text>
-      </Card>
+    <Row className="text-center w-100" style={cardstyled}>
+      <Col className='d-flex justify-content-center'>
+        <Clock format={"Y년 M월 D일"} />
+      </Col>
+      <Col className='d-flex justify-content-center'>
+        <Clock
+          format={"HH : mm : ss"}
+          ticking={true}
+          timezone={"Asia/Seoul"}
+        />
+      </Col>
     </Row>
   );
 }

client/src/components/UserInfo.js

@@ -80,7 +80,7 @@ function UserInfo() {
 
 
     return (
-        <Col className='text-center pt-3 pb-2 px-0'>
+        <Col className='text-center pb-2 px-0'>
             <Card style={cardstyled} id='localName'>
                 <Card.Title>
                     <strong>
@@ -90,7 +90,7 @@ function UserInfo() {
                             </h3>
                             :
                             <h3>
-                                GUEST
+                                손 님
                             </h3>
                         }
                     </strong>

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';
@@ -66,7 +65,6 @@ function GetLocFirst() {
                     </Col>
 
                     <Col md={6} style={col2sty}>
-                        <TimeNow />
                         <EueSuggest />
                         <ChartLine />
                         <ChartDoughnut />

client/src/pages/Home.js

 import React from 'react'
 import { Container, Row, Col } 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';
@@ -43,7 +42,6 @@ function Home() {
                     </Col>
 
                     <Col md={6} style={col2sty}>
-                        <TimeNow />
                         <EueSuggest />
                         <ChartLine />
                         <ChartDoughnut />