Skip to content

GitLab

You need to sign in or sign up before continuing.
Commit 57b2d398 authored by Ha YeaJin's avatar Ha YeaJin
Browse files

login, signup css 끝. noticePage db 연결

parent f10c71ec
Hide whitespace changes
Inline Side-by-side
server/app.js
View file @ 57b2d398
...@@ -8,6 +8,7 @@ const indexRouter = require('./routes/index'); ...@@ -8,6 +8,7 @@ const indexRouter = require('./routes/index');
const usersRouter = require('./routes/users'); const usersRouter = require('./routes/users');
const loginRouter = require('./routes/login'); const loginRouter = require('./routes/login');
const reserveRouter = require('./routes/reserves'); const reserveRouter = require('./routes/reserves');
const noticeRouter = require('./routes/notices');
const connect = require('./schemas'); const connect = require('./schemas');
const app = express(); const app = express();
...@@ -33,6 +34,7 @@ app.use('/', indexRouter); ...@@ -33,6 +34,7 @@ app.use('/', indexRouter);
app.use('/users', usersRouter); app.use('/users', usersRouter);
app.use('/login', loginRouter); app.use('/login', loginRouter);
app.use('/reserves', reserveRouter); app.use('/reserves', reserveRouter);
app.use('/notices', noticeRouter);
// catch 404 and forward to error handler // catch 404 and forward to error handler
app.use(function(req, res, next) { app.use(function(req, res, next) {
......
server/client/src/Components/Menu.js
View file @ 57b2d398
...@@ -4,7 +4,7 @@ import styled from 'styled-components'; ...@@ -4,7 +4,7 @@ import styled from 'styled-components';
const Nav = styled.nav` const Nav = styled.nav`
background-color: #7B031D; background-color: #7B031D;
max-height : 50px; height: 6vh;
a { a {
color: #ffffff; color: #ffffff;
...@@ -35,6 +35,7 @@ function Menu() { ...@@ -35,6 +35,7 @@ function Menu() {
<Link to="/notice" className="nav-link">공지사항</Link> <Link to="/notice" className="nav-link">공지사항</Link>
</li> </li>
<li className="nav-item"> <li className="nav-item">
{console.log(name)}
<Link to="/home" className="nav-link">대관 현황</Link> <Link to="/home" className="nav-link">대관 현황</Link>
</li> </li>
<li className="nav-item"> <li className="nav-item">
......
server/client/src/Pages/LoginPage.js
View file @ 57b2d398
import React, { useState, useEffect, useRef } from 'react'; import React, { useState, useEffect } from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import { Link, Redirect } from 'react-router-dom'; import { Link, Redirect } from 'react-router-dom';
import { Formik } from 'formik'; import { Formik } from 'formik';
...@@ -18,7 +18,7 @@ const Asd = styled.div` ...@@ -18,7 +18,7 @@ const Asd = styled.div`
&.mobile { &.mobile {
height : 20vh; height : 20vh;
display : flex; display : flex;
padding:0;
} }
& .mob-head { & .mob-head {
...@@ -26,14 +26,13 @@ const Asd = styled.div` ...@@ -26,14 +26,13 @@ const Asd = styled.div`
flex-direction: row; flex-direction: row;
height : 100%; height : 100%;
width: 100%; width: 100%;
justify-content: center; justify-content: space-evenly;
align-content: center;
} }
& .mob-img { & .mob-img {
max-width:100%; max-width: 30vw;
max-height:100%; }
}
` `
const Asdf = styled.div` const Asdf = styled.div`
...@@ -45,7 +44,6 @@ const Asdf = styled.div` ...@@ -45,7 +44,6 @@ const Asdf = styled.div`
&.mob-formik { &.mob-formik {
height : 80vh; height : 80vh;
width: 100%; width: 100%;
padding: 0;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
...@@ -59,12 +57,16 @@ const Asdf = styled.div` ...@@ -59,12 +57,16 @@ const Asdf = styled.div`
} }
& .mobb { & .mobb {
height: 30vh; height: 35vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-around; justify-content: space-around;
} }
& .webb {
flex-direction: column;
}
& .qwer { & .qwer {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
...@@ -77,8 +79,8 @@ const Asdf = styled.div` ...@@ -77,8 +79,8 @@ const Asdf = styled.div`
width: 80%; width: 80%;
justify-content: space-between; justify-content: space-between;
align-content: space-around; align-content: space-around;
display: flex;
flex-direction: column; flex-direction: column;
display: flex;
} }
& .mob-input-form { & .mob-input-form {
...@@ -102,16 +104,16 @@ function Login() { ...@@ -102,16 +104,16 @@ function Login() {
return <Redirect to="/home" />; return <Redirect to="/home" />;
} }
return ( return (
<div className="row vw-100 vh-100"> <div className="row vw-100 vh-100 m-0">
<Asd className={"col-md-4 px-0" + (mobile ? " mobile" : " web")}> <Asd className={"col-md-4 col-12" + (mobile ? " mobile" : " web")}>
<div className={mobile ? " mob-head" : ""}> <div className={mobile ? "mob-head" : ""}>
<img className={mobile ? " mob-img" : "img-fluid"} src={Logo} /> <img className={mobile ? "mob-img" : "img-fluid"} src={Logo} />
<div className="d-flex justify-content-center"> <div className={"d-flex " + (mobile ? "align-items-center" : "justify-content-center")}>
<h1 className="font-weight-bold text-white align-self-center">고려대학교<br />대관 서비스</h1> <h1 className="font-weight-bold text-white">고려대학교<br />대관 서비스</h1>
</div> </div>
</div> </div>
</Asd> </Asd>
<Asdf className={"col-md-8 col-12" + (mobile ? " mob-formik" : " web-formik")}> <Asdf className={"col-md-8 col-12" + (mobile ? " mob-formik p-0" : " web-formik")}>
<Formik <Formik
initialValues={{ id: '', password: '' }} initialValues={{ id: '', password: '' }}
validationSchema={Yup.object({ validationSchema={Yup.object({
...@@ -131,6 +133,7 @@ function Login() { ...@@ -131,6 +133,7 @@ function Login() {
localStorage.setItem('token', res.data.token); localStorage.setItem('token', res.data.token);
localStorage.setItem('id', res.data.users._id); localStorage.setItem('id', res.data.users._id);
localStorage.setItem('name', res.data.users.name);
setState(true); setState(true);
}) })
.catch(err => { .catch(err => {
...@@ -149,10 +152,10 @@ function Login() { ...@@ -149,10 +152,10 @@ function Login() {
getFieldProps, // contain values, handleChange, handleBlur getFieldProps, // contain values, handleChange, handleBlur
isSubmitting, isSubmitting,
}) => ( }) => (
<form onSubmit={handleSubmit} className={mobile ? "w-90 h-50vh" : ""}> <form onSubmit={handleSubmit} className={mobile ? "w-75 h-50vh" : "d-flex webb"}>
<div className={mobile ? "mobb" : "qwer"}> <div className={mobile ? "mobb" : "qwer"}>
<div className={(mobile ? "mob-" : "web-") + "input-form"}> <div className={(mobile ? "mob-" : "web-") + "input-form"}>
<div className={"form-group m-0" + (mobile ? " mb-3" : "")}> <div className={"form-group m-0" + (mobile ? " mb-2" : "")}>
<input <input
className={(touched.id && errors.id ? 'form-control is-invalid' : "form-control")} className={(touched.id && errors.id ? 'form-control is-invalid' : "form-control")}
type="number" type="number"
...@@ -171,17 +174,15 @@ function Login() { ...@@ -171,17 +174,15 @@ function Login() {
/> />
</div> </div>
</div> </div>
<button type="submit" className={"btn btn-dark" + (mobile ? " w-100" : " w-20")} disabled={isSubmitting}> <button type="submit" className={"btn btn-dark" + (mobile ? " w-100" : " w-20")} disabled={isSubmitting}> Login </button>
Login
</button>
<button><Link to="/home">홈</Link></button>
<div></div>
<Link to="/find">비밀번호를 잊으셨나요?</Link>
<div></div>
<Link to="/signup">회원이 아니신가요?</Link>
</div> </div>
<div><Link to="/find">비밀번호를 잊으셨나요?</Link></div>
<div><Link to="/signup">회원이 아니신가요?</Link></div>
</form> </form>
)} )}
</Formik> </Formik>
</Asdf> </Asdf>
</div > </div >
......
server/client/src/Pages/NoticePage.js
View file @ 57b2d398
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import Menu from '../Components/Menu'; import Menu from '../Components/Menu';
import axios from 'axios';
function Notice() { function Notice() {
const [notices, setNotices] = useState([]);
useEffect(() => {
getNotice();
}, []);
function getNotice() {
axios.get(`/notices`)
.then(res => {
if (res.status !== 201) {
alert(res.data.error);
}
console.log(res.data);
setNotices(res.data);
})
.catch(err => {
alert(err.error)
});
}
return ( return (
<div> <div>
<Menu /> <Menu />
<div className="container">notice <div className="container">
<div className="row">
<div className="col-12">
{notices.map((notice) => <div>{notice.notice_title}</div>)}
</div>
</div>
</div> </div>
</div> </div>
) )
......
server/client/src/Pages/SignupPage.js
View file @ 57b2d398
...@@ -4,139 +4,183 @@ import * as Yup from 'yup'; ...@@ -4,139 +4,183 @@ import * as Yup from 'yup';
import axios from 'axios'; import axios from 'axios';
import 'bootstrap/dist/css/bootstrap.css'; import 'bootstrap/dist/css/bootstrap.css';
import { Link, Redirect } from 'react-router-dom'; import { Link, Redirect } from 'react-router-dom';
import styled from 'styled-components';
const Nav = styled.nav`
background-color: #7B031D;
height: 10vh;
a {
color: #ffffff;
}
`
const Wow = styled.div`
height: 90vh;
& #reCheck::after {
content: '비밀번호를 다시 입력하세요';
}
& #reCheck:not(.right) {
content: '비밀번호가 다릅니다.';
color: red;
}
& .asd {
display: flex;
flex-direction: column;
}
`
function Signup() { function Signup() {
const [state, setState] = useState(false); const [state, setState] = useState(false);
const [checkPw, setCheckPw] = useState(true);
if (state) { if (state) {
return <Redirect to="/login" />; return <Redirect to="/login" />;
} }
return ( return (
<div className="d-flex flex-column justify-content-between vh-100"> <div className="vh-100">
<Formik <Nav className="navbar sticky-top navbar-expand-md">
initialValues={{ name: '', id: '', password: '', password2: '', question: '', answer: '' }} <a class="navbar-brand" href="#">회원가입</a>
validationSchema={Yup.object({ </Nav>
name: Yup.string() <div className="container-fluid">
.required('이름을 입력해주세요.'), <Wow className="row justify-content-center rrooww">
id: Yup.string() <div className="col-md-4 col-12 d-flex align-items-center h-100">
.required('학번을 입력해주세요.'), <Formik
password: Yup.string() initialValues={{ name: '', id: '', password: '', password2: '', question: '', answer: '' }}
.required('비밀번호를 입력해주세요.') validationSchema={Yup.object({
.min(8, '8자 이상 입력해주세요.'), name: Yup.string()
password2: Yup.string() .required('이름을 입력해주세요.'),
.required('비밀번호를 다시 입력해주세요.') id: Yup.string()
.min(8, '8자 이상 입력해주세요.') .required('학번을 입력해주세요.'),
.oneOf([Yup.ref("password"), null], '비밀번호가 일치하지 않습니다.'), password: Yup.string()
answer: Yup.string() .required('비밀번호를 입력해주세요.')
.required('답변을 입력해주세요.'), .min(8, '8자 이상 입력해주세요.'),
})} password2: Yup.string()
onSubmit={(values, { setSubmitting }) => { .required('비밀번호를 다시 입력해주세요.')
axios({ .min(8, '8자 이상 입력해주세요.')
method: 'post', .oneOf([Yup.ref("password"), null], '비밀번호가 일치하지 않습니다.'),
url: '/users', answer: Yup.string()
data: values, .required('답변을 입력해주세요.'),
}).then(res => { })}
if (res.status === 404) return alert(res.data.error) onSubmit={(values, { setSubmitting }) => {
alert("회원가입이 완료되었습니다!") axios({
method: 'post',
setState(true); url: '/users',
}) data: values,
.catch(err => { }).then(res => {
alert(err.error) if (res.status === 404) return alert(res.data.error)
}); alert("회원가입이 완료되었습니다!")
setTimeout(() => { setState(true);
setSubmitting(false); })
}, 400); // finish the cycle in handler .catch(err => {
}} alert(err.error)
> });
{({
errors, setTimeout(() => {
touched, setSubmitting(false);
handleSubmit, }, 400); // finish the cycle in handler
getFieldProps, // contain values, handleChange, handleBlur }}
isSubmitting, >
}) => ( {({
<div className="row justify-content-center align-items-center"> errors,
<form onSubmit={handleSubmit} className="col-sm-3"> touched,
<div className="form-group mb-4"> handleSubmit,
<input getFieldProps, // contain values, handleChange, handleBlur
className={(touched.name && errors.name ? 'form-control is-invalid' : "form-control")} isSubmitting,
type="text" }) => (
name="name" < form onSubmit={handleSubmit} className="asd">
{...getFieldProps('name')} {/* col-sm-3 */}
placeholder="이름" />
{touched.name && errors.name ? ( <div className="form-group ">
<div className="invalid-feedback text-left">{errors.name}</div> {/* mb-4 */}
) : null} <div className={touched.name && errors.name ? "text-danger" : ""}>이름을 입력하세요</div>
</div> <input
<div className="form-group mb-4"> className={(touched.name && errors.name ? 'form-control is-invalid' : "form-control")}
<input type="text"
className={(touched.id && errors.id ? 'form-control is-invalid' : "form-control")} name="name"
type="text" {...getFieldProps('name')}
name="id" placeholder="이름" />
{...getFieldProps('id')} </div>
placeholder="학번/교번" <div className="form-group">
/> {/* mb-4 */}
{touched.id && errors.id ? ( <div className={touched.id && errors.id ? "text-danger" : ""}>학번을 입력하세요</div>
<div className="invalid-feedback text-left">{errors.id}</div>
) : null} <input
</div> className={(touched.id && errors.id ? 'form-control is-invalid' : "form-control")}
<div className="form-group mb-4"> type="text"
<input name="id"
className={(touched.password && errors.password ? 'form-control is-invalid' : "form-control")} {...getFieldProps('id')}
type="password" placeholder="학번/교번"
name="password" />
{...getFieldProps('password')} {/* {touched.id && errors.id ? (
placeholder="비밀번호" <div className="invalid-feedback text-left">{errors.id}</div>
/> ) : null} */}
{touched.password && errors.password ? ( </div>
<div className="invalid-feedback text-left">{errors.password}</div> <div className="form-group">
) : null} {/* mb-4 */}
</div> <div className={touched.password && errors.password ? "text-danger" : ""}>비밀번호를 입력하세요(8자리 이상)</div>
<div className="form-group mb-4">
<input <input
className={(touched.password2 && errors.password2 ? 'form-control is-invalid' : "form-control")} className={(touched.password && errors.password ? 'form-control is-invalid' : "form-control")}
type="password" type="password"
name="password2" name="password"
{...getFieldProps('password2')} {...getFieldProps('password')}
placeholder="비밀번호 확인" placeholder="비밀번호"
/> />
{touched.password2 && errors.password2 ? ( {/* {touched.password && errors.password ? (
<div className="invalid-feedback text-left">{errors.password2}</div> <div className="invalid-feedback text-left">{errors.password}</div>
) : null} ) : null} */}
</div> </div>
<div className="form-group mb-4"> <div className="form-group">
<label>본인 확인 질문</label> {/* mb-4 */}
<Field as="select" name="question"> {touched.password2 && errors.password2 ? setCheckPw(false) : null}
<option value="">질문을 선택하세요</option> <div id="reCheck" className={checkPw ? "right" : "err"}></div>
<option value="life">자신의 인생 좌우명은?</option> <input
<option value="school">자신이 다녔던 초등학교의 이름은?</option> className={touched.password2 && errors.password2 ? "form-control is-invalid" : "form-control"}
<option value="place">기억에 남는 추억의 장소는?</option> type="password"
</Field> name="password2"
</div> {...getFieldProps('password2')}
<div className="form-group mb-4"> placeholder="비밀번호 확인"
<input />
className={(touched.answer && errors.answer ? 'form-control is-invalid' : "form-control")}
type="text" </div>
name="answer" <div className="form-group">
{...getFieldProps('answer')} {/* mb-4 */}
placeholder="Input answer" /> <label>본인 확인 질문</label>
{touched.answer && errors.answer ? ( <Field as="select" name="question">
<div className="invalid-feedback text-left">{errors.answer}</div> <option value="">질문을 선택하세요</option>
) : null} <option value="life">자신의 인생 좌우명은?</option>
</div> <option value="school">자신이 다녔던 초등학교의 이름은?</option>
<button type="submit" className="btn btn-dark" disabled={isSubmitting}> <option value="place">기억에 남는 추억의 장소는?</option>
Sign Up </Field>
</button> </div>
<button class="btn btn-light"><Link to="/login">로그인</Link></button> <div className="form-group">
<button class="btn btn-light"><Link to="/">홈</Link></button> {/* mb-4 */}
</form> <div className={touched.answer && errors.answer ? "text-danger" : ""}>답변을 입력해주세요.</div>
</div>
)} <input
</Formik> className={(touched.answer && errors.answer ? 'form-control is-invalid' : "form-control")}
</div> type="text"
name="answer"
{...getFieldProps('answer')}
placeholder="Input answer" />
</div>
<button type="submit" className="btn btn-dark" disabled={isSubmitting}>회원가입</button>
<button class="btn btn-light"><Link to="/login">로그인</Link></button>
<button class="btn btn-light"><Link to="/">홈</Link></button>
</form>
)}
</Formik>
</div>
</Wow>
</div>
</div >
); );
} }
......
server/routes/notices.js 0 → 100644
View file @ 57b2d398
const express = require('express');
const Notice = require('../schemas/notice');
const router = express.Router();
router.get('/', function (req, res, next) {
Notice.find({}).sort({ post_date: -1 })
.then((notices) => {
res.json(notices);
})
.catch((err) => {
console.error(err);
next(err);
});
});
module.exports = router;
\ No newline at end of file
server/schemas/notice.js 0 → 100644
View file @ 57b2d398
const mongoose = require('mongoose');
const { Schema } = mongoose;
const noticeSchema = new Schema({
notice_img: {
type: Array,
},
notice_title: {
type: String,
required: true,
},
notice_author: {
type: String,
// default: "나야나"
required: true,
},
post_date: {
type: Date,
default: Date.now,
required: true,
},
notice_content: {
type: String,
required: true,
},
});
module.exports = mongoose.model('Notice', noticeSchema);
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