이걸로 병합하세요

server/client/src/Components/Card.js

+import React, { useState, useContext } from 'react';
+import { Card, Accordion, Col, AccordionContext, useAccordionToggle } from 'react-bootstrap';
+import styled from 'styled-components';
+
+const Text = styled(Card.Body)`
+    & .WRAP {
+        display: inline-block;
+        text-overflow: ellipsis;
+        width: 100%;
+        white-space: initial;
+    }
+`
+
+function Notice({ card_index, title, date, content }) {
+    function ContextAwareToggle({ children, eventKey, callback }) {
+        const currentEventKey = useContext(AccordionContext);
+
+        const decoratedOnClick = useAccordionToggle(
+            eventKey,
+            () => callback && callback(eventKey),
+        );
+
+        const isCurrentEventKey = currentEventKey === eventKey;
+        return (
+            <div
+                className={isCurrentEventKey ? "text-wrap whiteSpace-initial" : "text-truncate"}
+                onClick={decoratedOnClick}
+            >
+                {children}
+            </div>
+        );
+    }
+
+    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
+    }
+
+    return (
+        <Card className="w-100">
+            <Card.Header className="row flex-row py-3">
+                <Col md={10} xs={8} >
+                    <ContextAwareToggle variant="link" eventKey={card_index + 1}>{title}</ContextAwareToggle>
+                </Col>
+                <Col md={2} xs={4} className="p-0" >{dateForm(date)}</Col>
+            </Card.Header>
+            <Accordion.Collapse eventKey={card_index + 1}>
+                <Text>{content.split("\n").map((i, key) => {
+                    return <div key={key}>{i}</div>;
+                })}</Text>
+            </Accordion.Collapse>
+        </Card >
+    )
+}
+
+export default Notice;
\ No newline at end of file

server/client/src/Components/Menu.js

@@ -41,7 +41,7 @@ function Menu() {
     if (state) return <Redirect to="/" />
     return (
         <MENU expand="md" variant="dark">
-            <Navbar.Brand href="#">대관 서비스</Navbar.Brand>
+            <Navbar.Brand as={Link} to="/home">대관 서비스</Navbar.Brand>
             <Navbar.Toggle aria-controls="basic-navbar-nav" />
             <Navbar.Collapse id="basic-navbar-nav">
                 <Nav className="mr-auto">

server/client/src/Pages/ChangePage.js

@@ -4,7 +4,7 @@ import * as Yup from 'yup';
 import axios from 'axios';
 import Menu from '../Components/Menu';
 import { Link, Redirect } from 'react-router-dom';
-import { Container, Button, Col } from 'react-bootstrap';
+import { Container, Button, Navbar, Col } from 'react-bootstrap';
 import styled from 'styled-components';
 
 const Check = styled.div`
@@ -30,7 +30,13 @@ function Change(props) {
   // console.log(props)
   return (
     <div className="">
-      <Menu />
+      {(localStorage.getItem("token") !== null) ? (
+                <Menu />
+            ) : (
+                    <Menu expand="md" variant="dark">
+                        <Navbar.Brand>회원가입</Navbar.Brand>
+                    </Menu>
+                )}
       <Container fluid className="p-0 vh-90">
         <Check className="row justify-content-center m-0">
           <Col md={4} className="pt-5">

server/client/src/Pages/CheckPage.js

 import React, { useState, useEffect } from 'react';
 import Menu from '../Components/Menu';
 import axios from 'axios';
-import 'bootstrap/dist/css/bootstrap.css';
 
 function Check(props) {
     const [reserve, setReserve] = useState([]);

server/client/src/Pages/HomePage.js

@@ -13,7 +13,7 @@ function Home() {
                 <h2>대관 현황</h2>
                 <p>
                     <strong>대관 가능 시간</strong>
-                    <ul>
+                    <ul className="pl-4">
                         <li>평일: 9시 - 22시/ 예약가능 시간 이후 폐쇄</li>
                         <li>주말: 이용 불가</li>
                     </ul>
@@ -29,18 +29,15 @@ function Home() {
                         <Schedule room={key}/>
                     </Tab>
                 </Tabs>
-                <h3>유의사항</h3>
                 <p>
-                    <ul>
+                    <strong>유의사항</strong>
+                    <ul className="pl-4">
                         <li>강의실을 대관하는 대표자를 기준으로 최대 주 6시간까지 대관이 가능합니다.</li>
                         <li>1회 대관시 최대 3시간까지 이용이 가능합니다. (1시간 단위로 대관 가능)</li>
                         <li><strong style={{ color: "red" }}>대관 시간 이외 강의실을 이용하다 적발될 경우 한달 간 강의실 이용이 불가합니다.</strong></li>
                     </ul>
                 </p>
-                <div className="bg-white">
-                    <h6>고려대학교 대관시스템</h6>
-                </div>
-            </Container>
+            </div>
         </div>
     )
 }

server/client/src/Pages/NoticePage.js

@@ -3,12 +3,12 @@ import Menu from '../Components/Menu';
 import axios from 'axios';
 import { Link } from 'react-router-dom';
 import { Container, Row, Col, Card, Accordion, Button } from 'react-bootstrap';
+import CARD from '../Components/Card';
 
 function Notice() {
     const [show, setShow] = useState(false);
     const [notices, setNotices] = useState([]);
     const [user, setUser] = useState({ role: "" })
-    const [a ,setA ] = useState([]);
 
     useEffect(() => {
         acheck();
@@ -26,19 +26,6 @@ function Notice() {
             });
     }
 
-    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() {
         axios.get(`/notices`)
             .then(res => {
@@ -58,22 +45,11 @@ function Notice() {
             <Container fluid>
                 <Row className="justify-content-center vw-100 vh-90">
                     <Col md={7}>
-                        <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>
+                        <h2 className="p-3 border-bottom d-flex justify-content-between">공지사항 {user.role === "admin" ? (
+                            <Button as={Link} to="/write">글 작성</Button>) : null}</h2>
                         <Accordion>
-                            {notices.map((notice, index) =>
-                                <Card>
-                                    <Card.Header className="d-flex justify-content-space-between">
-                                        <Accordion.Toggle as={Button} variant="link" eventKey={index + 1} className={"d-inline-block " + (show ? "text-wrap" : "text-truncate")} onClick={() => setShow(!show)}>{notice.notice_title}</Accordion.Toggle>
-                                        <span className="d-flex align-items-center" style={{ width: "50%" }}>{dateForm(notice.post_date)}</span>
-                                    </Card.Header>
-                                    <Accordion.Collapse eventKey={index + 1}>
-                                        <Card.Body><pre>{notice.notice_content}</pre></Card.Body>
-                                    </Accordion.Collapse>
-                                </Card>)}
+                            {notices.map((notice, index) => <CARD card_index={index} title={notice.notice_title} date={notice.post_date} content={notice.notice_content} />
+                            )}
                         </Accordion>
                     </Col>
                 </Row>

server/client/src/Pages/SignupPage.js

@@ -25,11 +25,6 @@ const Wow = styled.div`
         content: '비밀번호가 일치하지 않습니다.';
         color: red;
     }
-
-    & .asd {
-        display: flex;
-        flex-direction: column;
-    }
 `
 
 function Signup() {
@@ -46,7 +41,7 @@ function Signup() {
             </Menu>
             <Container fluid>
                 <Wow className="row justify-content-center">
-                <Col md={3} xs={11} className="p-0">
+                    <Col md={3} xs={11} className="p-0">
                         <Formik
                             initialValues={{ name: '', id: '', password: '', password2: '', question: '', answer: '' }}
                             validationSchema={Yup.object({
@@ -91,7 +86,7 @@ function Signup() {
                                 getFieldProps,  // contain values, handleChange, handleBlur
                                 isSubmitting,
                             }) => (
-                                    < form onSubmit={handleSubmit} className="asd">
+                                    <form onSubmit={handleSubmit} className="d-flex flex-column pt-3">
                                         <div className="form-group ">
                                             <div className={touched.name && errors.name ? "text-danger" : ""}>이름을 입력하세요</div>
                                             <input
@@ -154,7 +149,7 @@ function Signup() {
                                                 {...getFieldProps('answer')}
                                                 placeholder="Input answer" />
                                         </div>
-                                        <Button type="submit" variant="secondary" disabled={isSubmitting}>회원가입</Button>
+                                        <Button type="submit" variant="secondary" className="mb-2" disabled={isSubmitting}>회원가입</Button>
                                         <Button variant="outline-secondary" as={Link} to="/login">로그인하러 가기</Button>
                                     </form>
                                 )}

server/client/src/Pages/WritePage.js

@@ -3,7 +3,7 @@ import { Link, Redirect } from 'react-router-dom';
 import Menu from '../Components/Menu';
 import * as Yup from 'yup';
 import axios from 'axios';
-import { Container, Row, Col } from 'react-bootstrap';
+import { Container, Row, Col, Button } from 'react-bootstrap';
 import { Field, Formik } from 'formik';
 
 function Write() {
@@ -18,7 +18,7 @@ function Write() {
             <Menu />
             <Container fluid>
                 <Row className="justify-content-center">
-                    <Col md={12} xl={8} style={{ height: "35em" }}>
+                    <Col md={5} xs={11} className="pt-3" >
                         <Formik
                             initialValues={{ title: '', content: '' }}
                             validationSchema={Yup.object({
@@ -52,11 +52,8 @@ function Write() {
                             getFieldProps,  // contain values, handleChange, handleBlur
                             isSubmitting,
                         }) => (
-                                <form onSubmit={handleSubmit} className="asd">
-                                    {/* col-sm-3 */}
-
+                                <form onSubmit={handleSubmit} className="d-flex flex-column">
                                     <div className="form-group">
-                                        {/*  mb-4 */}
                                         <div className={touched.name && errors.name ? "text-danger" : ""}>제목</div>
                                         <input className={(touched.name && errors.name ? 'form-control is-invalid' : "form-control")}
                                             type="text"
@@ -64,16 +61,13 @@ function Write() {
                                             {...getFieldProps('title')}
                                             placeholder="제목" />
                                     </div>
+
                                     <div className="form-group ">
-                                        {/*  mb-4 */}
                                         <div className={touched.name && errors.name ? "text-danger" : ""}>내용</div>
-                                        <input className={(touched.name && errors.name ? 'form-control is-invalid' : "form-control")}
-                                            type="text"
-                                            content="content"
-                                            {...getFieldProps('content')}
-                                            placeholder="내용" />
+                                        <Field as="textarea" rows={8} style={{ "min-width": "100%" }}
+                                        {...getFieldProps('content')} />
                                     </div>
-                                    <button type="submit" className="btn btn-dark" disabled={isSubmitting}>공지 등록</button>
+                                    <Button className="mb-2" variant="dark" type="submit" disabled={isSubmitting}>공지 등록</Button>
                                 </form>
                             )}
                         </Formik>
@@ -83,5 +77,5 @@ function Write() {
         </div>
     )
 }
- 
+
 export default Write

server/routes/reserves.js

@@ -38,8 +38,8 @@ router.post('/', function (req, res, next) {
         const strt = new Date(reserve.start)
         const endt = new Date(reserve.end)
         const reserveArr = reserves.map(item => (
-            (strt >= new Date(item.start) && strt <= new Date(item.end)) ||
-                (endt >= new Date(item.start) && endt <= new Date(item.end)) ?
+            (strt >= new Date(item.start) && strt < new Date(item.end)) ||
+                (endt > new Date(item.start) && endt <= new Date(item.end)) ?
                 "item" :
                 null
         ))