Skip to content

GitLab

Commit f3f8e564 authored by Spark's avatar Spark Committed by KangMin An
Browse files

layout

parent 66bb6a58
Hide whitespace changes
Inline Side-by-side
client/src/components/EueSuggest.js 0 → 100644
View file @ f3f8e564
import React from 'react'
import { Container, Row, Card, Table, Button } from 'react-bootstrap';
function EueSuggest() {
const fontstyl = {
fontSize: '0.5em',
margin: 'auto',
padding: '1em',
display: 'flex',
justifyContent: 'center',
width: '100%',
borderWidth: '2px',
borderColor: 'rgba(195, 195, 195, 0.753)',
color: 'rgb(110, 189, 142)'
}
const btnstyled = {
background: 'rgb(110, 189, 142)',
margin: '1px',
maxWidth: '100%',
borderWidth: '2px',
fontSize: '10px',
borderColor: 'rgba(195, 195, 195, 0.753)',
borderRadius: '20px',
}
return (
<>
<Row className='text-center w-100 my-2'>
<Card style={fontstyl}>
<Card.Title>
EUE 제안
</Card.Title>
<Card.Text>
"에어컨을 줄이시면 더 효율적입니다."
</Card.Text>
</Card>
</Row>
</>
)
}
export default EueSuggest;
\ No newline at end of file
client/src/components/Footer.js 0 → 100644
View file @ f3f8e564
import React from 'react'
import { Container, Row, Card, Table, Button } from 'react-bootstrap';
import { Bar } from 'react-chartjs-2'
function Footer() {
const fontstyl = {
fontSize: '0.5em',
margin: 'auto',
padding: '1em',
display: 'flex',
justifyContent: 'center',
width: '100%',
borderWidth: '2px',
borderColor: 'rgba(195, 195, 195, 0.753)',
color: 'rgb(110, 189, 142)'
}
const btnstyled = {
background: 'rgb(110, 189, 142)',
margin: '1px',
maxWidth: '100%',
borderWidth: '2px',
fontSize: '10px',
borderColor: 'rgba(195, 195, 195, 0.753)',
borderRadius: '20px',
}
const options = {
legend: {
display: true, // label 보이기 여부
},
scales: {
yAxes: [{
ticks: {
min: 0, // y축 스케일에 대한 최소값 설정
stepSize: 1, // y축 그리드 한 칸당 수치
}
}]
},
// false : 사용자 정의 크기에 따라 그래프 크기가 결정됨.
// true : 크기가 알아서 결정됨.
maintainAspectRatio: false
}
const data = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
datasets: [
{
label: '온도',
fill: false,
lineTension: 0.1,
backgroundColor: 'rgba(75,192,192,0.4)',
borderColor: 'rgba(75,192,192,1)',
borderCapStyle: 'butt',
borderDash: [2,10], //점선
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgba(75,192,192,1)',
pointBackgroundColor: '#fff',
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: 'rgba(75,192,192,1)',
pointHoverBorderColor: 'rgba(220,220,220,1)',
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [-10, -2, 13, 18, 22, 25, 31, 28, 25, 18, 6, -8]
}
]
};
return (
<>
<Row className='text-center w-100 my-2'>
<Card style={fontstyl}>
<Bar
data={data}
options={options}
height={300}
/>
</Card>
</Row>
</>
)
}
export default Footer;
\ No newline at end of file
client/src/components/MainLayer.js 0 → 100644
View file @ f3f8e564
import React from 'react'
import { useState } from 'react';
import { Button, Form, Image, Row, ButtonGroup, Modal, Dropdown, Col } from 'react-bootstrap';
import { Link } from 'react-router-dom';
import '../App.css'
function MainLayer() {
const boxstyled = {
border: 'solid',
color: 'rgba(195, 195, 195, 0.753)',
borderRadius: '20px',
marginBottom: '1em',
width: '100%',
backgroundSize: 'contain',
margin: 'auto'
}
const btnstyled = {
background: 'rgb(110, 189, 142)',
margin: '1px',
display: 'flex',
justifyContent: 'center',
maxWidth: '100%',
borderWidth: '2px',
fontSize: '10px',
borderColor: 'rgba(195, 195, 195, 0.753)',
borderRadius: '20px',
}
const loginstyled = {
margin: 'auto',
padding: '2px',
diplay: 'flex',
justifyContent: 'center',
borderRadius: '20px'
}
const titlesty = {
display: 'flex',
justifyContent: 'center',
background: 'rgb(110, 189, 142)',
text: 'center'
}
const [logshow, setLogshow] = useState(false);
const [signshow, setSignshow] = useState(false);
return (
<>
<Row className='d-flex align-items-center m-auto w-100'>
<Col className='m-auto '>
<Link to='/' className=' m-auto'>
<Image src='/images/EUE11.jpg' alt='EUE' style={boxstyled} />
</Link>
</Col>
<Dropdown className='d-sm-block d-md-none' style={{ fontSize: '1em' }}>
<Dropdown.Toggle style={btnstyled} id="dropdown-basic">
</Dropdown.Toggle>
<Dropdown.Menu className='z-index-10'>
<Dropdown.Item href="#/action-1">
<Button className='w-100 m-auto' style={btnstyled} onClick={() => setLogshow(true)}>
LOGIN
</Button>
<Modal
size="sm"
show={logshow}
onHide={() => setLogshow(false)}
aria-labelledby="example-modal-sizes-title-sm"
>
<Modal.Header className='d-flex justify-content-center'>
<Modal.Title id="example-modal-sizes-title-sm">
LOGIN
</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form style={loginstyled}>
<Form.Group controlId="formBasicEmail">
<Form.Control type="email" placeholder="Enter email" />
</Form.Group>
<Form.Group controlId="formBasicPassword">
<Form.Control type="password" placeholder="Password" />
</Form.Group>
<Button variant="maingreen" type="submit">
Submit
</Button>
</Form>
</Modal.Body>
</Modal>
</Dropdown.Item>
<Dropdown.Item href="#/action-2">
<Button className='w-100 m-auto' style={btnstyled} onClick={() => setSignshow(true)}>SIGN UP</Button>
<Modal
size="md"
show={signshow}
onHide={() => setSignshow(false)}
aria-labelledby="example-modal-sizes-title-sm"
>
<Modal.Header className='d-flex justify-content-center'>
<Modal.Title id="example-modal-sizes-title-sm">
Sign Up
</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form style={loginstyled}>
<Form.Group controlId="formBasicEmail">
<Form.Control type="email" placeholder="Enter email" />
</Form.Group>
<Form.Group controlId="formBasicPassword">
<Form.Control type="password" placeholder="Password" />
<Form.Text>8글자 이상 적어주세요.</Form.Text>
</Form.Group>
<Form.Group controlId="formBasicPassword">
<Form.Control type="password" placeholder="Password Check" />
</Form.Group>
<Button variant="maingreen" type="submit">
Submit
</Button>
</Form>
</Modal.Body>
</Modal>
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</Row>
<Row className='d-none d-md-flex justify-content-center align-items-center my-3 mx-auto w-100'>
<ButtonGroup vertical className='m-auto' style={{ width: '100%' }}>
<Button style={btnstyled} onClick={() => setLogshow(true)}>LOGIN</Button>
<Modal
size="sm"
show={logshow}
onHide={() => setLogshow(false)}
aria-labelledby="example-modal-sizes-title-sm"
>
<Modal.Header className='d-flex justify-content-center'>
<Modal.Title id="example-modal-sizes-title-sm">
LOGIN
</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form style={loginstyled}>
<Form.Group controlId="formBasicEmail">
<Form.Control type="email" placeholder="Enter email" />
</Form.Group>
<Form.Group controlId="formBasicPassword">
<Form.Control type="password" placeholder="Password" />
</Form.Group>
<Button variant="maingreen" type="submit">
Submit
</Button>
</Form>
</Modal.Body>
</Modal>
<Button style={btnstyled} onClick={() => setSignshow(true)}>SIGN UP</Button>
<Modal
size="md"
show={signshow}
onHide={() => setSignshow(false)}
aria-labelledby="example-modal-sizes-title-sm"
>
<Modal.Header className='d-flex justify-content-center'>
<Modal.Title id="example-modal-sizes-title-sm">
Sign Up
</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form style={loginstyled}>
<Form.Group controlId="formBasicEmail">
<Form.Control type="email" placeholder="Enter email" />
</Form.Group>
<Form.Group controlId="formBasicPassword">
<Form.Control type="password" placeholder="Password" />
<Form.Text>8글자 이상 적어주세요.</Form.Text>
</Form.Group>
<Form.Group controlId="formBasicPassword">
<Form.Control type="password" placeholder="Password Check" />
</Form.Group>
<Button variant="maingreen" type="submit">
Submit
</Button>
</Form>
</Modal.Body>
</Modal>
</ButtonGroup>
</Row>
</>
);
}
export default MainLayer
\ No newline at end of file
client/src/components/TimeNow.js 0 → 100644
View file @ f3f8e564
import React, { Component } from 'react';
import { Jumbotron, Container, Row, Card } from 'react-bootstrap';
import Clock from 'react-live-clock'
function TimeNow() {
const fontstyl = {
fontSize: '0.5em',
margin: 'auto',
padding: '1em',
display: 'flex',
justifyContent: 'center',
width: '100%',
borderWidth: '2px',
borderColor: 'rgba(195, 195, 195, 0.753)',
color: 'rgb(110, 189, 142)'
}
return (
<>
<Row className='text-center w-100 my-2'>
<Card style={fontstyl}>
<Card.Title>
현재시각
</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/Trydays.js 0 → 100644
View file @ f3f8e564
import React from 'react'
import { Container, Row, Card, Table, Button } from 'react-bootstrap';
function Trydays() {
const fontstyl = {
fontSize: '0.5em',
margin: 'auto',
padding: '1em',
display: 'flex',
justifyContent: 'center',
width: '100%',
borderWidth: '2px',
borderColor: 'rgba(195, 195, 195, 0.753)',
color: 'rgb(110, 189, 142)'
}
const btnstyled = {
background: 'rgb(110, 189, 142)',
margin: '1px',
maxWidth: '100%',
borderWidth: '2px',
fontSize: '10px',
borderColor: 'rgba(195, 195, 195, 0.753)',
borderRadius: '20px',
}
return (
<>
<Row className='text-center w-100 my-2'>
<Card style={fontstyl}>
<Card.Title>
유저아이디
</Card.Title>
<Card.Subtitle>
지역
울릉면
지역코드
<Button style={btnstyled}>
변경
</Button>
</Card.Subtitle>
<Card.Text>
환경을 향한 노력 ㅁㅁㅁ일 째 입니다.
</Card.Text>
</Card>
</Row>
</>
)
}
export default Trydays;
\ No newline at end of file
client/src/index.tsx → client/src/index.js
View file @ f3f8e564
......@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import 'bootstrap/dist/css/bootstrap.min.css';
ReactDOM.render(
<React.StrictMode>
......
client/src/logo.svg deleted 100644 → 0
View file @ 66bb6a58
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
\ No newline at end of file
client/src/pages/Home.js 0 → 100644
View file @ f3f8e564
import React from 'react'
import { Container, Row, Col, Button, ButtonGroup, Image, Form, Media } from 'react-bootstrap';
import MainLayer from '../components/MainLayer';
import TimeNow from './../components/TimeNow';
import '../App.css'
import Trydays from './../components/Trydays';
import EueSuggest from '../components/EueSuggest';
import ChartLine from '../components/ChartLine';
import ChartDoughnut from '../components/ChartDoughnut';
import Footer from './../components/Footer';
function Home2() {
const constyled = {
display: 'flex',
justifyContent: 'space-evenly',
width: '100%',
position: 'relative'
}
const col1sty = {
width: '280px',
display: 'flex',
justifyContent: 'start',
alignItems: 'center',
}
const col2sty = {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'column',
padding: '0'
}
return (
<Container fluid className='d-flex justify-content-center position-relative'>
<Row style={constyled}>
<Col xs={12} md={4} className='d-flex justify-content-center ' style={{
zIndex: '10', border: 'solid', borderWidth: '1px', borderColor: 'rgba(195, 195, 195, 0.753)',
borderRadius: '10px', padding: '15px', boxShadow: '0.5px 0.5px gray', margin: '5px', boxSizing:'border-box', height: 'auto', maxHeight: '270px'
}} id='stickyy'>
<Row style={col1sty} className='m-auto'>
<MainLayer />
</Row>
</Col>
<Col md={6} style={col2sty}>
<Row style={constyled} className='d-flex mb-2 w-100'>
<TimeNow />
<Trydays />
<EueSuggest/>
<ChartLine/>
<ChartDoughnut/>
<Footer/>
</Row>
</Col>
</Row>
</Container>
);
}
export default Home2;
\ No newline at end of file
client/src/react-app-env.d.ts deleted 100644 → 0
View file @ 66bb6a58
/// <reference types="react-scripts" />
client/src/reportWebVitals.ts → client/src/reportWebVitals.js
View file @ f3f8e564
import { ReportHandler } from 'web-vitals';
const reportWebVitals = (onPerfEntry?: ReportHandler) => {
const reportWebVitals = onPerfEntry => {
if (onPerfEntry && onPerfEntry instanceof Function) {
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
getCLS(onPerfEntry);
......
client/src/scss/custom.scss 0 → 100644
View file @ f3f8e564
@import "~bootstrap/scss/functions";
$primary: #6FCBFE;
$secondary: #F1D8BA;
$info: #DBEBF8;
$warning: #F2B705;
$GrayishSkyBlue: #739DB6;
$MinDarkBlue: #59b7e3;
$Gray: #adb5bd;
$LotusSky: #E3F0FC;
$LightGray: #e0e0e0;
$maingreen: rgb(110, 189, 142);
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
$custom-colors: (
"GrayishSkyBlue": $GrayishSkyBlue,
"MinDarkBlue": $MinDarkBlue,
"Gray": $Gray,
"LotusSky": $LotusSky,
"LightGray": $LightGray
);
$theme-colors: map-merge($theme-colors, $custom-colors);
@import '~bootstrap/scss/bootstrap.scss';
.card-header {
background-color: $info !important;
color: $GrayishSkyBlue;
}
.btn-primary:hover {
background-color: $secondary !important;
border-color: $secondary !important;
}
.btn-Gray:hover {
background-color: $secondary !important;
border-color: $secondary !important;
}
.dropdown-item:hover {
background-color: $GrayishSkyBlue !important;
color: #fff !important;
}
.page-link:focus {
box-shadow: none;
}
// @import '~bootstrap-icons/font/bootstrap-icons';
// @media screen and (max-width: 768px) {
// .table > :not(caption) > * > * {
// border-bottom-width: 0;
// }
// }
\ No newline at end of file
client/tsconfig.json deleted 100644 → 0
View file @ 66bb6a58
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": [
"src"
]
}
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