Skip to content

GitLab

Commit 7393930d authored by Kim, Subin's avatar Kim, Subin
Browse files

Pages 추가

parent 80f07a63
Hide whitespace changes
Inline Side-by-side
server/client/src/Components/Menu.js 0 → 100644
View file @ 7393930d
import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import styled from 'styled-components';
const Nav = styled.nav`
background-color: #981e1e;
`
function Menu() {
return (
<Nav className="navbar sticky-top navbar-expand-md">
<Link to="/home" className="navbar-brand">대관 서비스</Link>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar" aria-controls="collapsibleNavbar">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="collapsibleNavbar">
<ul className="navbar-nav">
<li className="nav-item">
<Link to="/home" className="nav-link">대관 현황</Link>
</li>
<li className="nav-item">
<Link to="/apply" className="nav-link">대관 신청</Link>
</li>
<li className="nav-item">
<Link to="/check" className="nav-link">대관 확인/취소</Link>
</li>
<li className="nav-item">
<Link to="/notice" className="nav-link">공지사항</Link>
</li>
</ul>
</div>
</Nav>
)
}
export default Menu
\ No newline at end of file
server/client/src/Pages/ApplyPage.js 0 → 100644
View file @ 7393930d
import React, { useState, useEffect } from 'react';
import Menu from '../Components/Menu';
function Apply() {
return (
<div>
<Menu />
<div className="container">apply
</div>
</div>
)
}
export default Apply
\ No newline at end of file
server/client/src/Pages/CheckPage.js 0 → 100644
View file @ 7393930d
import React, { useState, useEffect } from 'react';
import Menu from '../Components/Menu';
function Check() {
return (
<div>
<Menu />
<div className="container">check
</div>
</div>
)
}
export default Check
\ No newline at end of file
server/client/src/Pages/HomePage.js 0 → 100644
View file @ 7393930d
import React, { useState, useEffect } from 'react';
import Menu from '../Components/Menu';
function Home() {
return (
<div>
<Menu />
<div className="container">
home
</div>
</div>
)
}
export default Home
\ No newline at end of file
server/client/src/Pages/Login.js deleted 100644 → 0
View file @ 80f07a63
import React, { } from 'react';
import styled from 'styled-components';
import { Link } from 'react-router-dom';
const Log = styled.div`
background-color: #981e1e;
`
const Logo = styled.div`
background-color: #E76A6A;
`
function Login() {
return (
<div className="container-fluid">
<div className="row">
<Logo className="col-md-5 col-12">
<h2>고려대학교</h2>
<h4>대관 시스템</h4>
</Logo>
<Log className="col-md-7 col-12">
<form encType='multipart/form-data' className="mt-4" style={{ height: "100%" }}>
<div className="form-group">
<label for="title_input">학번</label>
<input className="form-control" id="title_input" name="title" type="text" required />
</div>
<div className="form-group">
<label for="author_input">비밀번호</label>
<input className="form-control" id="author_input" name="author" type="text" required />
</div>
<div className="form-group">
<Link to="/home">
<button className="btn" type="submit">로그인</button>
</Link>
</div>
</form>
</Log>
</div>
</div>
)
}
export default Login
\ No newline at end of file
server/client/src/Pages/LoginPage.js 0 → 100644
View file @ 7393930d
import React, { } from 'react';
import styled from 'styled-components';
import { Link } from 'react-router-dom';
import { Formik } from 'formik';
import * as Yup from 'yup';
const Log = styled.div`
background-color: #981e1e;
`
const Logo = styled.div`
background-color: #E76A6A;
`
function Login() {
return (
<div className="container-fluid">
<div className="row">
<Logo className="col-md-5 col-12">
<h2>고려대학교</h2>
<h4>대관 시스템</h4>
</Logo>
<Log className="col-md-7 col-12">
<Formik
initialValues={{ email: '', password: '' }}
validationSchema={Yup.object({
email: Yup.string()
.email('이메일형식이 유효하지 않습니다.')
.required('이메일을 입력해주세요.'),
password: Yup.string()
.required('비밀번호를 입력해주세요.')
.min(8, '8자 이상 입력해주세요.'),
})}
onSubmit={(values, { setSubmitting }) => {
// axios({
// method: 'post',
// url: '/login',
// data: values,
// }).then(res => {
// if (res.status === 404) return alert(res.data.error)
alert("로그인이 완료되었습니다!")
// localStorage.setItem('token', res.data.token);
// localStorage.setItem('id', res.data.users._id);
// setState(true);
// })
// .catch(err => {
// alert(err.error)
// });
setTimeout(() => {
setSubmitting(false);
}, 400); // finish the cycle in handler
}}
>
{({
errors,
touched,
handleSubmit,
getFieldProps, // contain values, handleChange, handleBlur
isSubmitting,
}) => (
<div className="row justify-content-center align-items-center">
<form onSubmit={handleSubmit} className="col-sm-3">
<div className="form-group mb-4">
<input
className={(touched.email && errors.email ? 'form-control is-invalid' : "form-control")}
type="email"
name="email"
{...getFieldProps('email')}
placeholder="Input Email"
/>
{touched.email && errors.email ? (
<div className="invalid-feedback text-left">{errors.email}</div>
) : null}
</div>
<div className="form-group mb-4">
<input
className={(touched.password && errors.password ? 'form-control is-invalid' : "form-control")}
type="password"
name="password"
{...getFieldProps('password')}
placeholder="Input Password"
/>
{touched.password && errors.password ? (
<div className="invalid-feedback text-left">{errors.password}</div>
) : null}
</div>
<button type="submit" className="btn btn-dark" disabled={isSubmitting}>
Login
</button>
<button>
<Link to="/home">gha</Link></button>
<Link to="/signup">비밀번호를 잊으셨나요?</Link>
<div></div>
<Link to="/signup">회원이 아니신가요?</Link>
</form>
</div>
)}
</Formik>
</Log>
</div>
</div>
)
}
export default Login
\ No newline at end of file
server/client/src/Pages/NoticePage.js 0 → 100644
View file @ 7393930d
import React, { useState, useEffect } from 'react';
import Menu from '../Components/Menu';
function Notice() {
return (
<div>
<Menu />
<div className="container">notice
</div>
</div>
)
}
export default Notice
\ No newline at end of file
server/client/src/Pages/SignupPage.js 0 → 100644
View file @ 7393930d
import React, { useState } from 'react';
import { Formik } from 'formik';
import * as Yup from 'yup';
import axios from 'axios';
import 'bootstrap/dist/css/bootstrap.css';
import { Link, Redirect } from 'react-router-dom';
function Signup() {
// const [state, setState] = useState(false);
// if (state) {
// return <Redirect to="/login" />;
// }
return (
<div className="d-flex flex-column justify-content-between vh-100">
<Formik
initialValues={{ name: '', email: '', password: '', password2: '', address: '', }}
validationSchema={Yup.object({
name: Yup.string()
.required('이름을 입력해주세요.'),
email: Yup.string()
.email('이메일형식이 유효하지 않습니다.')
.required('이메일을 입력해주세요.'),
password: Yup.string()
.required('비밀번호를 입력해주세요.')
.min(8, '8자 이상 입력해주세요.'),
password2: Yup.string()
.required('비밀번호를 다시 입력해주세요.')
.min(8, '8자 이상 입력해주세요.')
.oneOf([Yup.ref("password"), null], '비밀번호가 일치하지 않습니다.'),
address: Yup.string()
.required('주소를 입력해주세요.')
})}
onSubmit={(values, { setSubmitting }) => {
// axios({
// method: 'post',
// url: '/users',
// data: values,
// }).then(res => {
// if (res.status === 404) return alert(res.data.error)
alert("회원가입이 완료되었습니다!")
// setState(true);
// })
// .catch(err => {
// alert(err.error)
// });
setTimeout(() => {
setSubmitting(false);
}, 400); // finish the cycle in handler
}}
>
{({
errors,
touched,
handleSubmit,
getFieldProps, // contain values, handleChange, handleBlur
isSubmitting,
}) => (
<div className="row justify-content-center align-items-center">
<form onSubmit={handleSubmit} className="col-sm-3">
<div className="form-group mb-4">
<input
className={(touched.name && errors.name ? 'form-control is-invalid' : "form-control")}
type="text"
name="name"
{...getFieldProps('name')}
placeholder="Input Name" />
{touched.name && errors.name ? (
<div className="invalid-feedback text-left">{errors.name}</div>
) : null}
</div>
<div className="form-group mb-4">
<input
className={(touched.email && errors.email ? 'form-control is-invalid' : "form-control")}
type="email"
name="email"
{...getFieldProps('email')}
placeholder="Input Email"
/>
{touched.email && errors.email ? (
<div className="invalid-feedback text-left">{errors.email}</div>
) : null}
</div>
<div className="form-group mb-4">
<input
className={(touched.address && errors.address ? 'form-control is-invalid' : "form-control")}
type="text"
name="address"
{...getFieldProps('address')}
placeholder="Input Address" />
{touched.address && errors.address ? (
<div className="invalid-feedback text-left">{errors.address}</div>
) : null}
</div>
<div className="form-group mb-4">
<input
className={(touched.password && errors.password ? 'form-control is-invalid' : "form-control")}
type="password"
name="password"
{...getFieldProps('password')}
placeholder="Input Password"
/>
{touched.password && errors.password ? (
<div className="invalid-feedback text-left">{errors.password}</div>
) : null}
</div>
<div className="form-group mb-4">
<input
className={(touched.password2 && errors.password2 ? 'form-control is-invalid' : "form-control")}
type="password"
name="password2"
{...getFieldProps('password2')}
placeholder="Input Confirm Password"
/>
{touched.password2 && errors.password2 ? (
<div className="invalid-feedback text-left">{errors.password2}</div>
) : null}
</div>
<button type="submit" className="btn btn-dark" disabled={isSubmitting}>
Sign Up
</button>
<button>
<Link to="/">gha</Link></button>
</form>
</div>
)}
</Formik>
</div>
);
}
export default Signup;
\ No newline at end of file
server/client/src/index.js
View file @ 7393930d
...@@ -5,16 +5,29 @@ import * as serviceWorker from './serviceWorker'; ...@@ -5,16 +5,29 @@ import * as serviceWorker from './serviceWorker';
import 'bootstrap'; import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.css'; import 'bootstrap/dist/css/bootstrap.css';
// import Login from './Pages/Login'; import Login from './Pages/LoginPage';
// import Home from './Pages/Home'; import Home from './Pages/HomePage';
import App from './App' import Signup from './Pages/SignupPage';
import Apply from './Pages/ApplyPage';
import Check from './Pages/CheckPage';
import Notice from './Pages/NoticePage';
ReactDOM.render( ReactDOM.render(
<App />, <Router>
<Switch>
<Route exact path="/" component={Login} />
<Route path="/home" component={Home} />
<Route path="/signup" component={Signup} />
<Route path="/apply" component={Apply} />
<Route path="/check" component={Check} />
<Route path="/notice" component={Notice} />
</Switch>
</Router>,
document.getElementById('root') document.getElementById('root')
); );
// ReactDOM.render( // ReactDOM.render(
// <Router> // <Router>
// <Switch> // <Switch>
......
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