대관신청확인페이지 css

server/client/debug.log

+[1104/214338.288:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3)

server/client/src/Components/Menu.js

@@ -3,7 +3,6 @@ import React, { useState, useEffect } from 'react';
 import { Link, Redirect } from 'react-router-dom';
 import styled from 'styled-components';
 import { Navbar, Nav, NavLink } from 'react-bootstrap';
-import axios from 'axios';
 
 const MENU = styled(Navbar)`
     background-color: #7B031D;

server/client/src/Pages/ACheckPage.js

@@ -2,10 +2,31 @@ import React, { useState, useEffect } from 'react';
 import Menu from '../Components/Menu';
 import axios from 'axios';
 import { Link, Redirect } from 'react-router-dom';
+import { Container, Table } from 'react-bootstrap';
+import styled from 'styled-components';
+
+const Ta = styled(Table)`
+  & th, & td {
+    padding: 0;
+    vertical-align: middle;
+  };
+
+  & tr {
+    display: d-flex;
+    width: 50px;
+  };
+
+  & td {
+    align-items: center;
+    width: 70px;
+  };
+  
+`
 
 function ACheck(props) {
   const [state, setState] = useState()
   const [reserve, setReserve] = useState([]);
+
   useEffect(() => {
     getReserve();
   }, [])
@@ -66,16 +87,17 @@ function ACheck(props) {
   return (
     <div>
       <Menu />
-      <div className="">
-        <table className="table">
-          <thead>
+      <Container fluid>
+        <Ta responsive="lg">
+          <thead className="thead-light">
+            
             <tr>
               <th>대표자</th>
               <th>날짜</th>
               <th>시간</th>
               <th>강의실</th>
-              <th>사용인원</th>
-              <th>승인여부</th>
+              <th>사용 인원</th>
+              <th>승인 여부</th>
             </tr>
           </thead>
           <tbody>
@@ -89,10 +111,10 @@ function ACheck(props) {
                     <td>{reserve.room}</td>
                     <td>{reserve.num}</td>
                     <td>
-                      <button onClick={() => admit(index)} className="btn btn-primary">
+                      <button onClick={() => admit(index)} className="btn btn-primary btn-sm">
                         승인
                     </button>
-                      <button onClick={() => remove(index)} className="btn btn-danger">
+                      <button onClick={() => remove(index)} className="btn btn-danger btn-sm">
                         거절
                     </button>
                     </td>
@@ -100,9 +122,8 @@ function ACheck(props) {
                 )
               })) : <div>최근 대관 신청 내역이 없습니다.</div>}
           </tbody>
-        </table>
-
-      </div>
+        </Ta>
+      </Container>
     </div>
   )
 }

server/client/src/Pages/CheckPage.js

 import React, { useState, useEffect } from 'react';
 import Menu from '../Components/Menu';
 import axios from 'axios';
+import Table from 'react-bootstrap/Table'
+import { Container } from 'react-bootstrap';
+import styled from 'styled-components';
+
+const Ta = styled(Table)`
+margin-top: 0.5em;
+
+  & th, & td {
+    padding: 0;
+    vertical-align: middle;
+    font-size: 0.9rem;
+    margin-left : auto; margin-right : auto;
+    border-spacing: initial;
+  };
+
+  & tr {
+    display: d-flex;
+    width: 150px;
+  };
+
+  & td {
+    align-items: center;
+    margin: 10px;
+  };
+
+`
 
 function Check(props) {
     const [reserve, setReserve] = useState([]);
@@ -38,29 +64,29 @@ function Check(props) {
     return (
         <div>
             <Menu />
-            <div className="">
-                <table className="table">
-                    <thead>
+            <Container fluid>
+                <Ta responsive="lg ml-2rem">
+                    <thead className="thead-light">
                         <tr>
-                            <th>날짜</th>
-                            <th>시간</th>
-                            <th>강의실</th>
-                            <th>사용인원</th>
-                            <th>승인여부</th>
-                            <th>예약취소</th>
+                            <th className="text-center">날짜</th>
+                            <th className="text-center">시간</th>
+                            <th className="text-center">강의실</th>
+                            <th className="text-center">사용인원</th>
+                            {/* <th>승인여부</th> */}
+                            <th className="text-center">예약취소</th>
                         </tr>
                     </thead>
                     <tbody>
                         {reserve.map((reserve, index) => {
                             return (
                                 <tr key={index}>
-                                    <td>{reserve.date}</td>
-                                    <td>{reserve.starttime}시~{(Number(reserve.starttime) + reserve.usetime)}시</td>
-                                    <td>{reserve.room}</td>
-                                    <td>{reserve.num}</td>
-                                    <td>{reserve.check ? (reserve.approve ? "사용가능" : "사용불가") : "승인대기중"}</td>
-                                    <td>
-                                        <button onClick={() => remove(index)} className="btn btn-danger">
+                                    <td className="text-center">{reserve.date}</td>
+                                    <td className="text-center">{reserve.starttime}시~{(Number(reserve.starttime) + reserve.usetime)}시</td>
+                                    <td className="text-center">{reserve.room}</td>
+                                    <td className="text-center">{reserve.num}</td>
+                                    {/* <td>{reserve.check ? (reserve.approve ? "사용가능" : "사용불가") : "승인대기중"}</td> */}
+                                    <td className="text-center">
+                                        <button onClick={() => remove(index)} className="btn btn-danger btn-sm">
                                             취소
                                         </button>
                                     </td>
@@ -68,9 +94,8 @@ function Check(props) {
                             )
                         })}
                     </tbody>
-                </table>
-
-            </div>
+                </Ta>
+            </Container>
         </div>
     )
 }

server/client/src/Pages/NoticePage.js

@@ -6,11 +6,24 @@ import { Container, Row, Col, Card, Accordion, Button } from 'react-bootstrap';
 
 function Notice() {
     const [notices, setNotices] = useState([]);
+    const [user, setUser] = useState({ role: "" })
 
     useEffect(() => {
+        acheck();
         getNotice();
     }, []);
 
+    function acheck() {
+        axios.get(`/users/${localStorage.getItem('_id')}`)
+            .then(res => {
+                if (res.data.role == "admin") {
+                    setUser(res.data)
+                }
+            }).catch(err => {
+                alert(err.error)
+            });
+    }
+
     function dateForm(day) {
         const post_day = new Date(day);
         let year = post_day.getFullYear();
@@ -38,16 +51,30 @@ function Notice() {
     }
     return (
         <div>
+            <style type="text/css">
+                {`
+    .hidden {
+        display: block;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+    }
+    `}
+            </style>
             <Menu />
             <Container fluid>
                 <Row className="justify-content-center vw-100 vh-90">
                     <Col md={7}>
-                        <h2 className="p-3 border-bottom">공지사항 <Link to="/write">글 작성</Link></h2>
+                        <div className="px-3 pt-3 mb-3 border-bottom d-flex justify-content-between align-items-end">
+                            <h2>공지사항</h2>
+                            {user.role === "admin" ? (
+                                <Link to="/write">글 작성</Link>) : null}
+                        </div>
                         <Accordion>
                             {notices.map((notice, index) =>
                                 <Card>
                                     <Card.Header>
-                                        <Accordion.Toggle as={Button} variant="link" eventKey={index + 1}>{notice.notice_title} <span className="text-right">{dateForm(notice.post_date)}</span></Accordion.Toggle>
+                                        <Accordion.Toggle as={Button} variant="link hidden" eventKey={index + 1}>{notice.notice_title} <span className="text-right">{dateForm(notice.post_date)}</span></Accordion.Toggle>
                                     </Card.Header>
                                     <Accordion.Collapse eventKey={index + 1}>
                                         <Card.Body>{notice.notice_content}</Card.Body>

server/client/src/Pages/SignupPage.js

@@ -72,7 +72,6 @@ function Signup() {
                                 }).then(res => {
                                     if (res.status === 404) return alert(res.data.error)
                                     alert("회원가입이 완료되었습니다!")
-
                                     setState(true);
                                 })
                                     .catch(err => {