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