Commit 5d018c92 authored by Ha YeaJin's avatar Ha YeaJin
Browse files

signup page, menu에 회원정보 css 끝 ( notice는 하는중 건들지 말기

parent 57b2d398
...@@ -9,6 +9,10 @@ const Nav = styled.nav` ...@@ -9,6 +9,10 @@ const Nav = styled.nav`
a { a {
color: #ffffff; color: #ffffff;
} }
& .logoutBtn:hover {
text-decoration: underline;
}
` `
function Menu() { function Menu() {
...@@ -49,9 +53,13 @@ function Menu() { ...@@ -49,9 +53,13 @@ function Menu() {
대관 확인/취소</Link> 대관 확인/취소</Link>
</li> </li>
</ul> </ul>
<div> <div className="h-100 mr-3">
<div>{name} 안녕하세요.</div> <div className="text-white text-right font-weight-light"><small>{name} 안녕하세요</small></div>
<button onClick={logout} type="button">로그아웃</button> <div className="text-white text-right font-weight-light"><small>
<Link to={{
pathname: `/change/${localStorage.getItem('_id')}`,
state: { id: localStorage.getItem('_id') },
}}>비밀번호 변경</Link> / <span className="logoutBtn" onClick={logout} >로그아웃</span></small></div>
</div> </div>
</div> </div>
</Nav> </Nav>
......
...@@ -10,10 +10,6 @@ function Home() { ...@@ -10,10 +10,6 @@ function Home() {
home home
<button><Link to="/login">로그인</Link></button> <button><Link to="/login">로그인</Link></button>
<button><Link to="/signup">회원가입</Link></button> <button><Link to="/signup">회원가입</Link></button>
<button><Link to={{
pathname: `/change/${localStorage.getItem('_id')}`,
state: { id: localStorage.getItem('_id') },
}}>비밀번호 수정</Link></button>
</div> </div>
</div> </div>
) )
......
...@@ -109,7 +109,7 @@ function Login() { ...@@ -109,7 +109,7 @@ function Login() {
<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 " + (mobile ? "align-items-center" : "justify-content-center")}> <div className={"d-flex " + (mobile ? "align-items-center" : "justify-content-center")}>
<h1 className="font-weight-bold text-white">고려대학교<br />대관 서비스</h1> <h1 className="font-weight-bold text-white text-center">고려대학교<br/>대관 서비스</h1>
</div> </div>
</div> </div>
</Asd> </Asd>
...@@ -132,7 +132,7 @@ function Login() { ...@@ -132,7 +132,7 @@ function Login() {
if (res.status === 404) return alert(res.data.error) if (res.status === 404) return alert(res.data.error)
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); localStorage.setItem('name', res.data.users.name);
setState(true); setState(true);
}) })
......
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect, useRef } from 'react';
import Menu from '../Components/Menu'; import Menu from '../Components/Menu';
import axios from 'axios'; import axios from 'axios';
import styled from 'styled-components';
function Notice() { function Notice() {
const [notices, setNotices] = useState([]); const [notices, setNotices] = useState([]);
...@@ -9,6 +10,19 @@ function Notice() { ...@@ -9,6 +10,19 @@ function Notice() {
getNotice(); getNotice();
}, []); }, []);
function dateForm(day) {
const post_day = new Date(day);
let year = post_day.getFullYear();
let month = post_day.getMonth() + 1;
let date = post_day.getDate();
month = month < 10 ? '0' + month : month;
date = date < 10 ? '0' + date : date;
const new_date = year + "-" + month + "-" + date;
return new_date
}
function getNotice() { function getNotice() {
axios.get(`/notices`) axios.get(`/notices`)
.then(res => { .then(res => {
...@@ -25,13 +39,32 @@ function Notice() { ...@@ -25,13 +39,32 @@ function Notice() {
return ( return (
<div> <div>
<Menu /> <Menu />
<div className="container"> <div className="container-fluid">
<div className="row"> <div className="row justify-content-center vw-100 vh-90">
<div className="col-12"> <div className="col-md-7 col-12">
{notices.map((notice) => <div>{notice.notice_title}</div>)}
<h2 className="p-3 border-bottom">공지사항</h2>
<div id="accordion w-90 pt-1">
{notices.map((notice, index) =>
<div className="card">
<div className="card-header collapsed card-link w-100 row m-0 p-1" id={"Hnotice_" + index} data-toggle="collapse" href={"#notice_" + index}>
<div>
<div className="col-6 p-0">{notice.notice_title}</div>
<div className="col-3 p-0 text-center">{notice.notice_author}</div>
<div className="col-3 p-0 text-right">{dateForm(notice.post_date)}</div>
</div>
</div>
<div id={"notice_" + index} aria-labelledby={"Hnotice_" + index} className="collapse" data-parent="#accordion">
<div className="card-body">{notice.notice_content}</div>
</div> </div>
</div> </div>
)}
</div>
</div> </div>
</div >
</div >
</div> </div>
) )
} }
......
...@@ -2,8 +2,8 @@ import React from 'react'; ...@@ -2,8 +2,8 @@ import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import * as serviceWorker from './serviceWorker'; import * as serviceWorker from './serviceWorker';
import { BrowserRouter as Router, Route, Redirect, Switch } from 'react-router-dom'; import { BrowserRouter as Router, Route, Redirect, Switch } from 'react-router-dom';
// import 'bootstrap'; import 'bootstrap';
// import 'bootstrap/dist/css/bootstrap.css'; import 'bootstrap/dist/css/bootstrap.css';
import axios from 'axios'; import axios from 'axios';
import { PrivateRoute } from './Components/PrivateRoute'; import { PrivateRoute } from './Components/PrivateRoute';
......
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