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

전체적인 GUI 수정 및 추가

parent 46c5e1a7
......@@ -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>
......
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>
......
import React from 'react'
import { Spinner, Row, Button } from 'react-bootstrap';
import { Spinner, Button } from 'react-bootstrap';
function Loading() {
return (
......
......@@ -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>
......
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'>
|
......
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>
......
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>
);
}
......
......@@ -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>
......
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 />
......
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 />
......
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