Commit 2426975f authored by Spark's avatar Spark
Browse files

전체적인 GUI 수정 및 추가

parent 46c5e1a7
...@@ -24,6 +24,7 @@ function Donation() { ...@@ -24,6 +24,7 @@ function Donation() {
color: 'rgb(110, 189, 142)', color: 'rgb(110, 189, 142)',
borderColor: 'rgba(195, 195, 195, 0.753)', borderColor: 'rgba(195, 195, 195, 0.753)',
borderRadius: '20px', borderRadius: '20px',
fontSize: '1em'
} }
const [donateShow, setDonateShow] = useState(false); const [donateShow, setDonateShow] = useState(false);
...@@ -58,7 +59,7 @@ function Donation() { ...@@ -58,7 +59,7 @@ function Donation() {
이용하시는데 불편함이 없도록 광고 없이 운영하고 있습니다. <br /> 이용하시는데 불편함이 없도록 광고 없이 운영하고 있습니다. <br />
서버비용 충당 후원금이 남을시 UNICEF 기부하겠습니다. 서버비용 충당 후원금이 남을시 UNICEF 기부하겠습니다.
</Card.Subtitle> </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 variant='light' style={btnstyled2} onClick={() => setDonateShow(true)}>
후원하기 후원하기
</Button> </Button>
...@@ -88,7 +89,7 @@ function Donation() { ...@@ -88,7 +89,7 @@ function Donation() {
margin: '5px', margin: '5px',
maxWidth: 'fit-content', maxWidth: 'fit-content',
borderWidth: '2px', borderWidth: '2px',
fontSize: '14px', // fontSize: '14px',
color: 'black', color: 'black',
border: 'none', border: 'none',
whiteSpace: 'nowrap' whiteSpace: 'nowrap'
...@@ -110,7 +111,7 @@ function Donation() { ...@@ -110,7 +111,7 @@ function Donation() {
</Modal> </Modal>
</Row> </Row>
<Row className='d-flex justify-content-center flex-direction-column' style={{ color: 'rgb(109, 110, 109)', flexDirection: 'column', fontSize: '0.8em' }}> <Row className='d-flex justify-content-center flex-direction-column' style={{ color: 'rgb(109, 110, 109)', flexDirection: 'column', fontSize: '0.8em' }}>
</Row> </Row>
</Card> </Card>
......
import React, { useEffect } from 'react' import React, { useEffect } from 'react'
import { Row, Card, Col } from 'react-bootstrap'; import { Row, Card, Col } from 'react-bootstrap';
import { isLogined } from '../utils/Auth';
function EueSuggest() { function EueSuggest() {
...@@ -14,7 +15,6 @@ function EueSuggest() { ...@@ -14,7 +15,6 @@ function EueSuggest() {
borderColor: 'rgb(110, 189, 142)', borderColor: 'rgb(110, 189, 142)',
color: '#04AB70' color: '#04AB70'
} }
return ( return (
<Row className='text-center w-100 my-2'> <Row className='text-center w-100 my-2'>
...@@ -26,7 +26,15 @@ function EueSuggest() { ...@@ -26,7 +26,15 @@ function EueSuggest() {
</p> </p>
</Card.Title> </Card.Title>
<Card.Text> <Card.Text>
"에어컨을 줄이시면 더 효율적입니다." {isLogined() ?
<>
에어컨을 줄이시면 효율적입니다.
</>
:
<>
로그인 사용가능합니다.
</>
}
</Card.Text> </Card.Text>
</Card> </Card>
......
import React from 'react' import React from 'react'
import { Spinner, Row, Button } from 'react-bootstrap'; import { Spinner, Button } from 'react-bootstrap';
function Loading() { function Loading() {
return ( return (
......
...@@ -63,10 +63,10 @@ function LoginComp() { ...@@ -63,10 +63,10 @@ function LoginComp() {
<Row className='text-center w-100 my-2'> <Row className='text-center w-100 my-2'>
<Card style={cardstyled}> <Card style={cardstyled}>
<Card.Title id='impactTitle'> <Card.Title id='impactTitle'>
LOGIN 로그인
</Card.Title> </Card.Title>
<Card.Subtitle style={{ fontWeight: 'lighter' }}> <Card.Subtitle style={{ fontWeight: 'lighter' }}>
Log in with your social media account or email address 이메일 또는 소셜미디어로 로그인하세요
</Card.Subtitle> </Card.Subtitle>
<hr /> <hr />
<Card.Text> <Card.Text>
...@@ -97,7 +97,7 @@ function LoginComp() { ...@@ -97,7 +97,7 @@ function LoginComp() {
<Form.Control type="email" placeholder="Email" onChange={handleChange} required /> <Form.Control type="email" placeholder="Email" onChange={handleChange} required />
</FloatingLabel> </FloatingLabel>
<Button variant='light' className='mt-3' id='formbtn' type='submit'> <Button variant='light' className='mt-3' id='formbtn' type='submit'>
LOGIN 로그인
</Button> </Button>
</Form> </Form>
......
import React from 'react' 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 { Link } from 'react-router-dom';
import '../App.css' import '../App.css'
import UserInfo from './UserInfo'; import UserInfo from './UserInfo';
import { kakaoLogout } from '../utils/Oauth'; import { kakaoLogout } from '../utils/Oauth';
import UsingAircon from './UsingAircon'; import UsingAircon from './UsingAircon';
import { isLogined, localLogout } from '../utils/Auth'; import { isLogined, localLogout } from '../utils/Auth';
import TimeNow from './TimeNow';
function MainLayer() { function MainLayer() {
...@@ -40,9 +41,11 @@ function MainLayer() { ...@@ -40,9 +41,11 @@ function MainLayer() {
<Link to='/' className='p-0 m-auto'> <Link to='/' className='p-0 m-auto'>
<Image src='/images/EUE11.jpg' alt='EUE' style={boxstyled} /> <Image src='/images/EUE11.jpg' alt='EUE' style={boxstyled} />
</Link> </Link>
</Row> </Row>
<Row className='m-auto d-flex justify-content-center w-100'> <Row className='m-auto d-flex justify-content-center w-100'>
<TimeNow />
<UserInfo /> <UserInfo />
</Row> </Row>
...@@ -74,6 +77,7 @@ function MainLayer() { ...@@ -74,6 +77,7 @@ function MainLayer() {
} }
</ButtonGroup> </ButtonGroup>
</Row> </Row>
<Row className='m-auto justify-content-center w-100' id='contour'> <Row className='m-auto justify-content-center w-100' id='contour'>
| |
......
import React, { useEffect, useState } from 'react' import React, { useState } from 'react'
import '../App.css' import '../App.css'
import { Form, Button, Row, Col, Card, Alert, FloatingLabel } from 'react-bootstrap'; import { Form, Button, Row, Col, Card, Alert, FloatingLabel } from 'react-bootstrap';
import { LoginWithKakao } from '../utils/Oauth'; import { LoginWithKakao } from '../utils/Oauth';
...@@ -58,10 +58,10 @@ function SignupComp() { ...@@ -58,10 +58,10 @@ function SignupComp() {
<Row className='text-center w-100 my-2'> <Row className='text-center w-100 my-2'>
<Card style={cardstyled}> <Card style={cardstyled}>
<Card.Title id='impactTitle'> <Card.Title id='impactTitle'>
Create an Account 계정 생성하기
</Card.Title> </Card.Title>
<Card.Subtitle style={{ fontWeight: 'lighter' }}> <Card.Subtitle style={{ fontWeight: 'lighter' }}>
Sign up with your social media account or email address 이메일 또는 소셜미디어로 계정을 생성하세요
</Card.Subtitle> </Card.Subtitle>
<hr /> <hr />
<Card.Text> <Card.Text>
...@@ -113,7 +113,7 @@ function SignupComp() { ...@@ -113,7 +113,7 @@ function SignupComp() {
</FloatingLabel> </FloatingLabel>
<Button variant='light' className='mt-3' id='formbtn' type='submit'> <Button variant='light' className='mt-3' id='formbtn' type='submit'>
Sign Up 회원가입
</Button> </Button>
</Form> </Form>
......
import React from "react"; import React from "react";
import { Row, Card } from "react-bootstrap"; import { Row, Col } from "react-bootstrap";
import Clock from "react-live-clock"; import Clock from "react-live-clock";
import "../App.css"; import "../App.css";
function TimeNow() { function TimeNow() {
const cardstyled = { const cardstyled = {
margin: "auto", margin: "auto",
padding: "1em", padding: "0.5em",
display: "flex", display: "flex",
justifyContent: "center", justifyContent: "center",
width: "100%", width: "100%",
borderWidth: "3px", border: 'none',
borderRadius: "20px", flexDirection: 'column',
borderColor: "rgb(110, 189, 142)", color: "rgb(70, 70, 70) ",
color: "#04AB70", fontWeight: '300'
}; };
return ( return (
<Row className="text-center w-100 my-2"> <Row className="text-center w-100" style={cardstyled}>
<Card style={cardstyled}> <Col className='d-flex justify-content-center'>
<Card.Title> <Clock format={"Y년 M월 D일"} />
<p>현재시각</p> </Col>
</Card.Title> <Col className='d-flex justify-content-center'>
<Card.Text> <Clock
<Clock format={"Y년 M월 D일"} /> format={"HH : mm : ss"}
<br /> ticking={true}
<Clock timezone={"Asia/Seoul"}
format={"HH : mm : ss"} />
ticking={true} </Col>
timezone={"Asia/Seoul"}
/>
</Card.Text>
</Card>
</Row> </Row>
); );
} }
......
...@@ -80,7 +80,7 @@ function UserInfo() { ...@@ -80,7 +80,7 @@ function UserInfo() {
return ( 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 style={cardstyled} id='localName'>
<Card.Title> <Card.Title>
<strong> <strong>
...@@ -90,7 +90,7 @@ function UserInfo() { ...@@ -90,7 +90,7 @@ function UserInfo() {
</h3> </h3>
: :
<h3> <h3>
GUEST
</h3> </h3>
} }
</strong> </strong>
......
import React, { useEffect, useState } from 'react' import React, { useEffect, useState } from 'react'
import { Container, Row, Col, Modal } from 'react-bootstrap'; import { Container, Row, Col, Modal } from 'react-bootstrap';
import MainLayer from '../components/MainLayer'; import MainLayer from '../components/MainLayer';
import TimeNow from './../components/TimeNow';
import '../App.css' import '../App.css'
import EueSuggest from '../components/EueSuggest'; import EueSuggest from '../components/EueSuggest';
import ChartLine from '../components/ChartLine'; import ChartLine from '../components/ChartLine';
...@@ -66,7 +65,6 @@ function GetLocFirst() { ...@@ -66,7 +65,6 @@ function GetLocFirst() {
</Col> </Col>
<Col md={6} style={col2sty}> <Col md={6} style={col2sty}>
<TimeNow />
<EueSuggest /> <EueSuggest />
<ChartLine /> <ChartLine />
<ChartDoughnut /> <ChartDoughnut />
......
import React from 'react' import React from 'react'
import { Container, Row, Col } from 'react-bootstrap'; import { Container, Row, Col } from 'react-bootstrap';
import MainLayer from '../components/MainLayer'; import MainLayer from '../components/MainLayer';
import TimeNow from './../components/TimeNow';
import '../App.css' import '../App.css'
import EueSuggest from '../components/EueSuggest'; import EueSuggest from '../components/EueSuggest';
import ChartLine from '../components/ChartLine'; import ChartLine from '../components/ChartLine';
...@@ -43,7 +42,6 @@ function Home() { ...@@ -43,7 +42,6 @@ function Home() {
</Col> </Col>
<Col md={6} style={col2sty}> <Col md={6} style={col2sty}>
<TimeNow />
<EueSuggest /> <EueSuggest />
<ChartLine /> <ChartLine />
<ChartDoughnut /> <ChartDoughnut />
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment