Skip to content

GitLab

Commit cf553154 authored by Spark's avatar Spark
Browse files

footer 추가, editNickname

parent ecaf9de8
Hide whitespace changes
Inline Side-by-side
client/src/App.css
View file @ cf553154
......@@ -2,12 +2,32 @@
body {
font-family: "Noto Sans KR", sans-serif !important;
width: 100%;
min-height: 100vh;
margin: 0;
display: flex;
}
#root {
width: 100%;
min-height: 100%;
}
#footer{
position: relative;
bottom: 1em;
padding-top: 2em;
}
.form-check-input{
cursor: pointer;
box-shadow: none !important;
}
.form-check-input:checked {
background-color: #04AB70 !important;
}
border: none;
}
#btnlink {
color: white !important;
......@@ -56,7 +76,6 @@ body {
width: 50%;
height: 6em;
object-fit: cover;
}
#socialLink {
......@@ -70,6 +89,7 @@ body {
width: fit-content;
}
@media (max-width: 767.98px) {
body {
padding: 30px;
......@@ -99,15 +119,16 @@ body {
padding-left: 50px;
padding-right: 50px;
margin: auto;
}
.container-fluid {
max-width: 1000px !important;
min-height: 90%;
}
.container-fluid .row #stickyy {
position: sticky !important;
position: -webkit-sticky;
top: 40px;
width: fit-content;
height: fit-content;
......
client/src/App.js
View file @ cf553154
......@@ -7,6 +7,7 @@ import LoginPage from './pages/LoginPage';
import LocalCodePage from './pages/LocalCodePage';
import PrivateRoute from './utils/PrivateRoutes';
import PageNotFound from './components/PageNotFound';
import Footer from './components/Footer';
function App() {
......@@ -17,6 +18,7 @@ function App() {
<Route exact path='/' component={Home} />
<Route path='/signup' component={SignupPage} />
<Route path='/login' component={LoginPage} />
<Route path='/loc' component={LocalCodePage} />
<PrivateRoute path='/local_code'>
<LocalCodePage />
......@@ -24,6 +26,7 @@ function App() {
<Route component={PageNotFound} />
</Switch>
<Footer />
</Router>
);
......
client/src/components/Donation.js 0 → 100644
View file @ cf553154
import React, { useEffect, useState } from 'react'
import { Row, Card, Button, Col, Modal, } from 'react-bootstrap';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import '../App.css'
function Donation() {
const cardstyled = {
margin: 'auto',
padding: '1em',
display: 'flex',
justifyContent: 'center',
width: '100%',
borderWidth: '3px',
borderRadius: '20px',
borderColor: 'rgb(110, 189, 142)',
color: '#04AB70'
}
const btnstyled2 = {
background: 'white',
margin: '1px',
maxWidth: 'fit-content',
borderWidth: '2px',
color: 'rgb(110, 189, 142)',
borderColor: 'rgba(195, 195, 195, 0.753)',
borderRadius: '20px',
}
const [donateShow, setDonateShow] = useState(false);
const [isCopyshow, setCopyShow] = useState(false);
const HandleClose = () => setDonateShow(false);
function clickAndTwoSec() {
return new Promise((resolve) => setTimeout(resolve, 2000))
}
useEffect(() => {
if (isCopyshow) {
clickAndTwoSec().then(() => {
setCopyShow(false);
});
}
}, [isCopyshow]);
// isCopyshow 가 바뀔 때만 effect를 재실행한다.
const handleClick = () => setCopyShow(true);
return (
<Row className='text-center w-100 my-2'>
<Card style={cardstyled}>
<Card.Title>
<p>
서버비용 후원하기
</p>
</Card.Title>
<Card.Subtitle>
이용하시는데 불편함이 없도록 광고 없이 운영하고 있습니다. <br />
서버비용 충당 후 후원금이 남을시 UNICEF 에 기부하겠습니다.
</Card.Subtitle>
<Row className='my-2 d-flex justify-content-center'>
<Button variant='light' style={btnstyled2} onClick={() => setDonateShow(true)}>
♥ 후원하기
</Button>
<Modal
size='md'
show={donateShow}
onHide={HandleClose}
style={{ top: '80px', left: '1vw' }}
>
<Modal.Header className='d-flex justify-content-center'>
<Modal.Title>
♥ Thank you for Donation ♥
</Modal.Title>
</Modal.Header>
<Modal.Body>
<Col className='d-flex justify-content-center text-center' style={{ flexDirection: 'column' }}>
<Card style={{ color: 'rgb(109, 110, 109)', paddingTop: '10px' }}>
카카오뱅크
<CopyToClipboard text={'박상호 3333-16-7299769'}>
<p className='m-auto' style={btnstyled2} >
박상호 3333-16-7299769
<Button variant='light'
disabled={isCopyshow}
onClick={!isCopyshow ? handleClick : null}
style={{
background: 'lightgray',
margin: '5px',
maxWidth: 'fit-content',
borderWidth: '2px',
fontSize: '14px',
color: 'black',
border: 'none',
whiteSpace: 'nowrap'
}}>
{isCopyshow ? '복사 성공!' : '복사'}
</Button>
</p>
</CopyToClipboard>
</Card>
</Col>
</Modal.Body>
<Modal.Footer>
<Button variant='light' style={btnstyled2} onClick={HandleClose}>
닫기
</Button>
</Modal.Footer>
</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>
</Row>
)
}
export default Donation;
\ No newline at end of file
client/src/components/Footer.js
View file @ cf553154
import React, { useEffect, useState } from 'react'
import { Row, Card, Button, Col, Modal, } from 'react-bootstrap';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import React from 'react'
import '../App.css'
import { Container, Row, Col } from 'react-bootstrap';
function Footer() {
const cardstyled = {
margin: 'auto',
padding: '1em',
display: 'flex',
justifyContent: 'center',
width: '100%',
borderWidth: '3px',
borderRadius: '20px',
borderColor: 'rgb(110, 189, 142)',
color: '#04AB70'
}
const btnstyled2 = {
background: 'white',
margin: '1px',
maxWidth: 'fit-content',
borderWidth: '2px',
color: 'rgb(110, 189, 142)',
borderColor: 'rgba(195, 195, 195, 0.753)',
borderRadius: '20px',
}
const [donateShow, setDonateShow] = useState(false);
const [isCopyshow, setCopyShow] = useState(false);
const HandleClose = () => setDonateShow(false);
function clickAndTwoSec() {
return new Promise((resolve) => setTimeout(resolve, 2000))
}
useEffect(() => {
if (isCopyshow) {
clickAndTwoSec().then(() => {
setCopyShow(false);
});
}
}, [isCopyshow]);
// isCopyshow 가 바뀔 때만 effect를 재실행한다.
const handleClick = () => setCopyShow(true);
function Footer() {
return (
<Row className='text-center w-100 my-2'>
<Card style={cardstyled}>
<Card.Title>
<p>
서버비용 후원하기
</p>
</Card.Title>
<Card.Subtitle>
이용하시는데 불편함이 없도록 광고 없이 운영하고 있습니다. <br />
서버비용 충당 후 후원금이 남을시 UNICEF 에 기부하겠습니다.
</Card.Subtitle>
<Row className='my-2 d-flex justify-content-center'>
<Button variant='light' style={btnstyled2} onClick={() => setDonateShow(true)}>
♥ 후원하기
</Button>
<Modal
size='md'
show={donateShow}
onHide={HandleClose}
style={{ top: '80px', left: '1vw' }}
>
<Modal.Header className='d-flex justify-content-center'>
<Modal.Title>
♥ Thank you for Donation ♥
</Modal.Title>
</Modal.Header>
<Modal.Body>
<Col className='d-flex justify-content-center text-center' style={{ flexDirection: 'column' }}>
<Card style={{ color: 'rgb(109, 110, 109)', paddingTop: '10px' }}>
카카오뱅크
<CopyToClipboard text={'박상호 3333-16-7299769'}>
<p className='m-auto' style={btnstyled2} >
박상호 3333-16-7299769
<Button variant='light'
disabled={isCopyshow}
onClick={!isCopyshow ? handleClick : null}
style={{
background: 'lightgray',
margin: '5px',
maxWidth: 'fit-content',
borderWidth: '2px',
fontSize: '14px',
color: 'black',
border: 'none',
whiteSpace: 'nowrap'
}}>
{isCopyshow ? '복사 성공!' : '복사'}
</Button>
</p>
</CopyToClipboard>
</Card>
</Col>
</Modal.Body>
<Modal.Footer>
<Button variant='light' style={btnstyled2} onClick={HandleClose}>
닫기
</Button>
</Modal.Footer>
</Modal>
</Row>
<Row className='d-flex justify-content-center flex-direction-column' style={{ color: 'rgb(109, 110, 109)', flexDirection: 'column', fontSize: '0.8em' }}>
<Col>
<a href='https://www.notion.so/EUE-047f1812c6c24096a528dfd3330c227d' style={{ color: 'rgb(110, 189, 142)' }}>TEAM EUE </a> : 안강민, 박상호, 박예은
</Col>
<Col>
© 2021 TEAM EUE. All rights reserved
</Col>
</Row>
</Card>
</Row>
<Container className='m-auto d-flex justify-content-center' id='footer'>
<Row className='m-auto d-flex justify-content-center text-center w-100'
style={{ fontSize: '0.8em' }}>
<hr />
<Col style={{ display: 'flex', color: 'gray', fontWeight: '300', alignItems: 'center', justifyContent: 'center' }}>
© 2021 TEAM EUE. All rights reserved
</Col>
<Col>
<a href='https://www.notion.so/EUE-047f1812c6c24096a528dfd3330c227d'
style={{ color: '#04AB70', textDecoration: 'none', fontWeight: '300' }}>
<strong>
TEAM EUE
</strong>
</a> <br />안강민, 박상호, 박예은
</Col>
</Row>
</Container >
)
}
......
client/src/components/LocCodeChange.js
View file @ cf553154
......@@ -45,6 +45,7 @@ function LocCodeChange() {
const sggSelect = document.getElementById('select-sgg')
const emdSelect = document.getElementById('select-emd')
function handleClickLoc() {
if (doeSelect.options[doeSelect.selectedIndex].text !== '도' && sggSelect.options[sggSelect.selectedIndex].text !== '시군구' && emdSelect.options[emdSelect.selectedIndex].text !== '읍면동') {
localStorage.setItem('code_doe', doeSelect.value)
......@@ -170,16 +171,14 @@ function LocCodeChange() {
</Form.Group>
</Row>
</Form>
<Row className='d-flex justify-content-center'>
<Button
variant='light' style={btnstyled2} onClick={handleClickLoc}>
확인
</Button>
</Row>
</Card.Text>
<Row className='d-flex justify-content-center'>
<Button
variant='light' style={btnstyled2} onClick={handleClickLoc}>
확인
</Button>
</Row>
</Card>
</Row>
)
}
......
client/src/components/MainLayer.js
View file @ cf553154
......@@ -4,6 +4,7 @@ import { Link } from 'react-router-dom';
import '../App.css'
import UserInfo from './UserInfo';
import { kakaoLogout } from '../utils/Oauth';
import axios from 'axios';
function MainLayer() {
......@@ -13,10 +14,8 @@ function MainLayer() {
color: 'rgba(195, 195, 195, 0.753)',
borderRadius: '20px',
borderWidth: '3px',
marginBottom: '1em',
width: '100%',
backgroundSize: 'contain',
margin: 'auto',
textDecorationColor: 'none'
}
......@@ -45,21 +44,17 @@ function MainLayer() {
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'>
<Link to='/' className=' m-auto'>
<Row className='d-flex align-items-center m-auto w-100 p-0'>
<Link to='/' className='p-0 m-auto'>
<Image src='/images/EUE11.jpg' alt='EUE' style={boxstyled} />
</Link>
</Row>
......@@ -73,7 +68,7 @@ function MainLayer() {
key='checkbox' className="d-flex justify-content-center w-100" style={{ flexDirection: 'row-reverse' }}>
<Form.Check
type='switch'
id='aircondition-checkbox'
id='airconditioner'
label='에어컨 사용중'
onChange={aircondiCheck}
checked={airUsing}
......
client/src/components/UserInfo.js
View file @ cf553154
......@@ -40,7 +40,6 @@ function UserInfo() {
}
return (
<Row>
<Col className='text-center pt-3 pb-2 px-0'>
<Card style={cardstyled} id='localName'>
<Card.Title>
......@@ -95,7 +94,6 @@ function UserInfo() {
}
</Card>
</Col>
</Row>
)
}
export default UserInfo;
\ No newline at end of file
client/src/pages/Home.js
View file @ cf553154
......@@ -6,8 +6,9 @@ import '../App.css'
import EueSuggest from '../components/EueSuggest';
import ChartLine from '../components/ChartLine';
import ChartDoughnut from '../components/ChartDoughnut';
import Footer from './../components/Footer';
import Donation from '../components/Donation';
import axios from 'axios';
import Footer from '../components/Footer';
function Home() {
......@@ -41,24 +42,26 @@ function Home() {
return (
<Container fluid className='m-auto d-flex justify-content-center position-relative'>
<Row style={constyled} className='m-auto'>
<Col xs={12} md={6} className='d-flex justify-content-center' id='stickyy'>
<Row style={col1sty} className='m-auto'>
<MainLayer />
</Row>
</Col>
<Col md={6} style={col2sty}>
{/* <TimeNow /> */}
<EueSuggest />
<ChartLine />
<ChartDoughnut />
<Footer />
</Col>
</Row>
</Container>
<Container className='m-auto d-flex position-relative'
style={{ flexDirection: 'column' }} fluid>
<Row className='d-flex'>
<Row style={constyled} className='m-auto'>
<Col xs={12} md={6} className='d-flex justify-content-center' id='stickyy'>
<Row style={col1sty} className='m-auto'>
<MainLayer />
</Row>
</Col>
<Col md={6} style={col2sty}>
{/* <TimeNow /> */}
<EueSuggest />
<ChartLine />
<ChartDoughnut />
<Donation />
</Col>
</Row>
</Row>
</Container>
);
}
......
client/src/pages/LocalCodePage.js
View file @ cf553154
......@@ -28,20 +28,22 @@ function SignupPage() {
return (
<Container fluid className='m-auto d-flex justify-content-center position-relative'>
<Row style={constyled} className='m-auto'>
<Col xs={12} md={6} className='d-flex justify-content-center' id='stickyy'>
<Row style={col1sty} className='m-auto'>
<MainLayer />
</Row>
</Col>
<Col md={6} style={col2sty}>
<Container className='m-auto d-flex position-relative'
style={{ flexDirection: 'column' }} fluid>
<Row className='d-flex'>
<Row style={constyled} className='m-auto'>
<Col xs={12} md={6} className='d-flex justify-content-center' id='stickyy'>
<Row style={col1sty} className='m-auto'>
<MainLayer />
</Row>
</Col>
<Col md={6} style={col2sty}>
<LocCodeChange />
</Col>
</Col>
</Row>
</Row>
</Container>
);
}
......
client/src/pages/LoginPage.js
View file @ cf553154
......@@ -3,6 +3,7 @@ import { Container, Row, Col } from 'react-bootstrap';
import MainLayer from '../components/MainLayer';
import '../App.css'
import LoginComp from '../components/LoginComp';
import Footer from './../components/Footer';
function SignupPage() {
const constyled = {
......@@ -28,18 +29,20 @@ function SignupPage() {
return (
<Container fluid className='m-auto d-flex justify-content-center position-relative'>
<Row style={constyled} className='m-auto'>
<Col xs={12} md={6} className='d-flex justify-content-center' id='stickyy'>
<Row style={col1sty} className='m-auto'>
<MainLayer />
</Row>
</Col>
<Col md={6} style={col2sty}>
<Container className='m-auto d-flex position-relative'
style={{ flexDirection: 'column' }} fluid>
<Row className='d-flex'>
<Row style={constyled} className='m-auto'>
<Col xs={12} md={6} className='d-flex justify-content-center' id='stickyy'>
<Row style={col1sty} className='m-auto'>
<MainLayer />
</Row>
</Col>
<Col md={6} style={col2sty}>
<LoginComp />
</Col>
</Col>
</Row>
</Row>
</Container>
......
client/src/pages/SignupPage.js
View file @ cf553154
......@@ -3,6 +3,7 @@ import { Container, Row, Col } from 'react-bootstrap';
import MainLayer from '../components/MainLayer';
import '../App.css'
import SignupComp from '../components/SignupComp';
import Footer from './../components/Footer';
function SignupPage() {
const constyled = {
......@@ -28,17 +29,20 @@ function SignupPage() {
return (
<Container fluid className='m-auto d-flex justify-content-center position-relative'>
<Row style={constyled} className='m-auto'>
<Col xs={12} md={6} className='d-flex justify-content-center' id='stickyy'>
<Row style={col1sty} className='m-auto'>
<MainLayer />
</Row>
</Col>
<Col md={6} style={col2sty}>
<SignupComp />
</Col>
<Container className='m-auto d-flex position-relative'
style={{ flexDirection: 'column' }} fluid>
<Row className='d-flex'>
<Row style={constyled} className='m-auto'>
<Col xs={12} md={6} className='d-flex justify-content-center' id='stickyy'>
<Row style={col1sty} className='m-auto'>
<MainLayer />
</Row>
</Col>
<Col md={6} style={col2sty}>
<SignupComp />
</Col>
</Row>
</Row>
</Container>
......
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