Commit 3a341f06 authored by KangMin An's avatar KangMin An
Browse files

Merge branch 'who' into premaster

parents 7b6f5abb d6e24f8b
......@@ -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;
......
......@@ -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>
);
......
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
......@@ -14,6 +14,7 @@ function EueSuggest() {
borderColor: 'rgb(110, 189, 142)',
color: '#04AB70'
}
const airUsing = localStorage.getItem('using-aircondition')
......
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 >
)
}
......
......@@ -22,9 +22,11 @@ function LocCodeChange() {
const inboxstyled = {
display: 'flex',
flexDirection: 'column',
maxWidth: '80%',
justifyContent: 'center',
margin: 'auto',
padding: '10px'
padding: '0.5em',
color: 'black'
}
const btnstyled2 = {
......@@ -45,6 +47,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)
......@@ -116,10 +119,10 @@ function LocCodeChange() {
<Row className='text-center w-100 my-2'>
<Card style={cardstyled}>
<Card.Title id='impactTitle'>
Local Code
지역 코드
</Card.Title>
<Card.Subtitle style={{ fontWeight: 'lighter' }}>
Please select a your region
본인의 지역을 선택해주세요
</Card.Subtitle>
<hr />
<Card.Text className='m-0'>
......@@ -170,16 +173,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>
)
}
......
import React, { useState } from 'react';
import '../App.css'
import { Form, Button, Row, Col, Card, Alert } from 'react-bootstrap';
import { Form, Button, Row, Col, Card, Alert, FloatingLabel } from 'react-bootstrap';
import { LoginWithKakao } from '../utils/Oauth';
function LoginComp() {
......@@ -23,7 +23,8 @@ function LoginComp() {
maxWidth: '80%',
justifyContent: 'center',
margin: 'auto',
padding: '10px'
padding: '0.5em',
color: 'black'
}
const [emailSentAlert, setEmailSentAlert] = useState(false)
......@@ -34,7 +35,7 @@ function LoginComp() {
function CheckEmailSend() {
localStorage.setItem('login_email_Address', emailAddress)
const emailIs = localStorage.getItem('login_email_Address').split('@')[1]
if(emailIs) {
if (emailIs) {
setAlertShow(true)
setEmailSentAlert(false)
}
......@@ -89,9 +90,13 @@ function LoginComp() {
</Row>
<Form style={inboxstyled}>
<Form.Group controlId="formBasicEmail">
<FloatingLabel
controlId="floatingInput"
label="Email"
>
<Form.Control type="email" placeholder="Email" onChange={handleChange} />
</Form.Group>
</FloatingLabel>
<Button variant='light' className='mt-3' id='formbtn' onClick={CheckEmailSend}>
LOGIN
</Button>
......
......@@ -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}
......
import React, { useEffect } from 'react'
import { Row, Card, Col, Form, Button, FloatingLabel } from 'react-bootstrap';
function NicknameChange() {
const cardstyled = {
margin: 'auto',
padding: '1em',
display: 'flex',
justifyContent: 'center',
width: '100%',
borderWidth: '3px',
borderRadius: '20px',
borderColor: 'rgb(110, 189, 142)',
color: '#04AB70'
}
const inboxstyled = {
display: 'flex',
flexDirection: 'column',
maxWidth: '80%',
justifyContent: 'center',
margin: 'auto',
padding: '0.5em',
color: 'black'
}
const exNick = localStorage.getItem('nickname')
console.log(exNick)
function handleChange ({ target: { value } }) {
localStorage.setItem('nickname', value)
}
function handleSubmit(event) {
event.preventDefault();
window.location.reload();
};
return (
<Row className='text-center w-100 my-2'>
<Card style={cardstyled}>
<Card.Title id='impactTitle'>
닉네임 변경
</Card.Title>
<Card.Subtitle style={{ fontWeight: 'lighter' }}>
새로운 닉네임으로 변경해보세요
</Card.Subtitle>
<hr />
<Card.Text className='m-0'>
<Form style={inboxstyled} onSubmit={handleSubmit}>
<FloatingLabel
controlId="floatingInput"
label="Nickname"
>
<Form.Control type="text" placeholder="닉네임 변경" id='nickname' onChange={handleChange} />
</FloatingLabel>
<Button variant='light' className='mt-3' id='formbtn' type='submit'>
</Button>
</Form>
</Card.Text>
</Card>
</Row>
)
}
export default NicknameChange;
\ No newline at end of file
import React, { useState } from 'react'
import '../App.css'
import { Form, Button, Row, Col, Card, Alert } from 'react-bootstrap';
import { Form, Button, Row, Col, Card, Alert, FloatingLabel } from 'react-bootstrap';
import { LoginWithKakao } from '../utils/Oauth';
function SignupComp() {
......@@ -23,7 +23,8 @@ function SignupComp() {
maxWidth: '80%',
justifyContent: 'center',
margin: 'auto',
padding: '1rem'
padding: '0.5em',
color: 'black'
}
const initValues = {
......@@ -125,35 +126,36 @@ function SignupComp() {
}
</Row>
<Form style={inboxstyled}
onSubmit={handleSubmit}>
<Form.Group controlId="username">
<Row className='m-auto mb-1 d-flex justify-content-center'>
<Form.Control
type="text"
name="name"
placeholder="Name"
value={formValues.name}
onChange={handleChange}
required
/>
</Row>
<Row>
<p></p>
</Row>
<Row className='m-auto d-flex justify-content-center'>
<Form.Control
type="email"
name="email"
placeholder="Email Address"
value={formValues.email}
onChange={handleChange}
required
/>
</Row>
</Form.Group>
<Button variant='light' className='mt-3' id='formbtn' onClick={CheckUserExist}>
<Form style={inboxstyled} onSubmit={handleSubmit}>
<FloatingLabel
controlId="floatingInput"
label="Name"
className='mb-3'
>
<Form.Control
type="text"
name="name"
placeholder="Name"
value={formValues.name}
onChange={handleChange}
required
/>
</FloatingLabel>
<FloatingLabel
controlId="floatingInput"
label="Email Address"
>
<Form.Control
type="email"
name="email"
placeholder="Email Address"
value={formValues.email}
onChange={handleChange}
required
/>
</FloatingLabel>
<Button variant='light' className='mt-3' id='formbtn' type='submit' onClick={CheckUserExist}>
{/* type="submit" */}
Sign Up
</Button>
......
......@@ -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
......@@ -6,7 +6,7 @@ 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';
......@@ -32,33 +32,31 @@ function Home() {
padding: '0'
}
axios({
method: 'get',
url: 'localhost:4500/loccode/doe'
}).then((res) => {
console.log(res)
})
const getusername = axios.get(`/api/user`)
console.log(getusername)
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 />
<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>
</Col>
<Col md={6} style={col2sty}>
{/* <TimeNow /> */}
<EueSuggest />
<ChartLine />
<ChartDoughnut />
<Footer />
</Col>
</Row>
</Container>
</Row>
</Container>
);
}
......
......@@ -3,6 +3,7 @@ import { Container, Row, Col } from 'react-bootstrap';
import MainLayer from '../components/MainLayer';
import '../App.css'
import LocCodeChange from '../components/LocCodeChange';
import NicknameChange from '../components/NicknameChange';
function SignupPage() {
const constyled = {
......@@ -28,20 +29,23 @@ 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}>
<NicknameChange />
<LocCodeChange />
</Col>
</Col>
</Row>
</Row>
</Container>
);
}
......
......@@ -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>
......
......@@ -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>
......
......@@ -4,3 +4,11 @@ export const routes = {
login: 'login',
localcode: '/local_code',
}
// post, put { body }
// email :
// nick_name :
// using_aircon :
// created_at :
// loc_code
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