Merge remote-tracking branch 'origin/kimpen' into hyj

server/app.js

-const createError = require('http-errors');
+// const createError = require('http-errors');
 const express = require('express');
 const path = require('path');
 const cookieParser = require('cookie-parser');
 const logger = require('morgan');
+const port = 3030;
+require('dotenv').config();
 
 const indexRouter = require('./routes/index');
 const usersRouter = require('./routes/users');
 const loginRouter = require('./routes/login');
 const reservesRouter = require('./routes/reserves');
 const noticeRouter = require('./routes/notices');
-
 const connect = require('./schemas');
 
 const app = express();
-const port = 3030;
-
-require('dotenv').config();
 connect();
 
-
-app.listen(port, () => console.log(port));
-
 // view engine setup
 // app.set('views', path.join(__dirname, 'views'));
 // app.set('view engine', 'pug');
@@ -28,7 +23,7 @@ app.listen(port, () => console.log(port));
 app.use(logger('dev'));
 app.use(express.json());
 app.use(express.urlencoded({ extended: false }));
-app.use(cookieParser());
+app.use(cookieParser(process.env.JWT_SECRET));
 app.use(express.static(path.join(__dirname, 'public')));
 
 app.use('/', indexRouter);
@@ -37,6 +32,7 @@ app.use('/login', loginRouter);
 app.use('/reserves', reservesRouter);
 app.use('/notices', noticeRouter);
 
+app.listen(port, () => console.log(port));
 
 // catch 404 and forward to error handler
 app.use(function(req, res, next) {

server/client/package-lock.json

@@ -67,6 +67,13 @@
         "@babel/types": "^7.11.5",
         "jsesc": "^2.5.1",
         "source-map": "^0.5.0"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.5.7",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
+        }
       }
     },
     "@babel/helper-annotate-as-pure": {
@@ -1686,6 +1693,14 @@
       "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-7.2.1.tgz",
       "integrity": "sha512-oZ0Ib5I4Z2pUEcoo95cT1cr6slco9WY7yiPpG+RGNkj8YcYgJnM7pXmYmorNOReh8MIGcKSqXyeGjxnr8YiZbA=="
     },
+    "@toast-ui/react-calendar": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@toast-ui/react-calendar/-/react-calendar-1.0.5.tgz",
+      "integrity": "sha512-eG4BtdF5LvIHEyTlwZbWnLlL+GScLiWktRNV0A3L73oBFfJ5BQUNC/TRR13wfaJjXIvWYdV80ZYD75q7ilWznw==",
+      "requires": {
+        "tui-calendar": "^1.12.5"
+      }
+    },
     "@types/babel__core": {
       "version": "7.1.9",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.1.9.tgz",
@@ -8802,48 +8817,10 @@
         "minimist": "^1.2.5"
       }
     },
-    "mongodb": {
-      "version": "3.6.2",
-      "resolved": "https://registry.npmjs.org/mongodb/-/mongodb-3.6.2.tgz",
-      "integrity": "sha512-sSZOb04w3HcnrrXC82NEh/YGCmBuRgR+C1hZgmmv4L6dBz4BkRse6Y8/q/neXer9i95fKUBbFi4KgeceXmbsOA==",
-      "requires": {
-        "bl": "^2.2.1",
-        "bson": "^1.1.4",
-        "denque": "^1.4.1",
-        "require_optional": "^1.0.1",
-        "safe-buffer": "^5.1.2",
-        "saslprep": "^1.0.0"
-      }
-    },
-    "mongoose": {
-      "version": "5.10.6",
-      "resolved": "https://registry.npmjs.org/mongoose/-/mongoose-5.10.6.tgz",
-      "integrity": "sha512-p32oja2ydzFMS0K4P7G408Kagju6Qz/LmiAFAcP6BqnIi1McLTd6VZ3+ZQtQmaHM7w8iNupLLambCrsPKNJpYw==",
-      "requires": {
-        "bson": "^1.1.4",
-        "kareem": "2.3.1",
-        "mongodb": "3.6.2",
-        "mongoose-legacy-pluralize": "1.0.2",
-        "mpath": "0.7.0",
-        "mquery": "3.2.2",
-        "ms": "2.1.2",
-        "regexp-clone": "1.0.0",
-        "safe-buffer": "5.2.1",
-        "sift": "7.0.1",
-        "sliced": "1.0.1"
-      },
-      "dependencies": {
-        "safe-buffer": {
-          "version": "5.2.1",
-          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
-          "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ=="
-        }
-      }
-    },
-    "mongoose-legacy-pluralize": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/mongoose-legacy-pluralize/-/mongoose-legacy-pluralize-1.0.2.tgz",
-      "integrity": "sha512-Yo/7qQU4/EyIS8YDFSeenIvXxZN+ld7YdV9LqFVQJzTLye8unujAWPZ4NWKfFA+RNjh+wvTWKY9Z3E5XM6ZZiQ=="
+    "moment": {
+      "version": "2.29.0",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.0.tgz",
+      "integrity": "sha512-z6IJ5HXYiuxvFTI6eiQ9dm77uE0gyy1yXNApVHqTcnIKfY9tIwEjlzsZ6u1LQXvVgKeTnv9Xm7NDvJ7lso3MtA=="
     },
     "move-concurrently": {
       "version": "1.0.1",
@@ -13597,6 +13574,44 @@
       "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",
       "integrity": "sha1-oVe6QC2iTpv5V/mqadUk7tQpAaY="
     },
+    "tui-calendar": {
+      "version": "1.12.14",
+      "resolved": "https://registry.npmjs.org/tui-calendar/-/tui-calendar-1.12.14.tgz",
+      "integrity": "sha512-wJuRBxw+1Yq1NG1Fb1fs2beDlFFmnObaBusXcRTyIH+j3ICzo+g7ic/KI+4mQ3WBgEuBRNkwSUejmaua6qFPTg==",
+      "requires": {
+        "tui-code-snippet": "^1.5.0",
+        "tui-date-picker": "^4.0.2",
+        "tui-time-picker": "^2.0.1"
+      }
+    },
+    "tui-code-snippet": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/tui-code-snippet/-/tui-code-snippet-1.5.2.tgz",
+      "integrity": "sha512-6UqTlQaaC1KLcmC0HAoq5dtl1G4Fib+R+NC7pmaV7kiIlZ7JqKhUmnOoGRcreAyzd81UTK/vCvhrw9QJskpCFQ=="
+    },
+    "tui-date-picker": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/tui-date-picker/-/tui-date-picker-4.1.0.tgz",
+      "integrity": "sha512-ls/8yGuWe9MPa9SzL5iQiuyVpmDCdcJgyfg5O73U0sw+ba6Y1NLOuyRDrSFaT4tKg5jm3zeLD98I9jhYCT7P/g==",
+      "requires": {
+        "tui-time-picker": "^2.0.3"
+      }
+    },
+    "tui-time-picker": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tui-time-picker/-/tui-time-picker-2.0.3.tgz",
+      "integrity": "sha512-S9pkPyAhixYMYsWIA/acaLBuoFBJGohWl9sQyWzSupqEYY4s+QNStl3kJ76Q29VkTl51+LrXm+0SJ1inP0Sheg==",
+      "requires": {
+        "tui-code-snippet": "^2.2.0"
+      },
+      "dependencies": {
+        "tui-code-snippet": {
+          "version": "2.3.2",
+          "resolved": "https://registry.npmjs.org/tui-code-snippet/-/tui-code-snippet-2.3.2.tgz",
+          "integrity": "sha512-6jGbM/m7A2L59lJSripwMVp87awrWgJXezlLV8GuAha3s0k01E4+MndoU5WlXd4dauVRgzHhKguTVslx/jMehw=="
+        }
+      }
+    },
     "tunnel-agent": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",

server/client/package.json

@@ -6,12 +6,13 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
+    "@toast-ui/react-calendar": "^1.0.5",
     "axios": "^0.20.0",
     "bcrypt": "^5.0.0",
     "bootstrap": "^4.5.3",
     "formik": "^2.1.5",
     "jquery": "^3.5.1",
-    "mongoose": "^5.10.6",
+    "moment": "^2.29.0",
     "popper.js": "^1.16.1",
     "react": "^16.13.1",
     "react-bootstrap": "^1.4.0",
@@ -25,7 +26,8 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "proxy": "http://localhost:3030"
   },
   "eslintConfig": {
     "extends": "react-app"

server/client/src/Components/Schedule.js

+import React, { useState, useEffect, useRef } from 'react';
+import Calendar from '@toast-ui/react-calendar';
+import "tui-calendar/dist/tui-calendar.css";
+import "tui-date-picker/dist/tui-date-picker.css";
+import "tui-time-picker/dist/tui-time-picker.css";
+  
+function Cal(calledday) {
+  const calendarRef = useRef();
+  const [day, setDay] = useState(calledday);
+  const [myTheme, setMyTheme] = useState({
+    'common.dayname.color': '#333',
+    'common.today.color': '#333',
+    // 'common.creationGuide.color': 'white',
+    'common.creationGuide.backgroundColor': 'gray',
+    // Theme object to extends default dark theme.
+  });
+
+  useEffect(() => {
+    // const cal = calendarRef.current.getInstance();
+    // cal.setDate(new Date(day));
+    // cal.changeView('week', false);
+    // cal.today(new Date(day));
+
+    // calendar.on('clickSchedule', function (event) {
+    //   const schedule = event.schedule;
+
+    //   if (lastClickSchedule) {
+    //     calendar.updateSchedule(lastClickSchedule.id, lastClickSchedule.calendarId, {
+    //       isFocused: false,
+    //     });
+    //   }
+    //   calendar.updateSchedule(schedule.id, schedule.calendarId, {
+    //     isFocused: true,
+    //   });
+
+    //   lastClickSchedule = schedule;
+    //   // open detail view
+
+    //   return (console.log(isFocused))
+    // });
+
+  }, [day])
+
+  return (
+    <Calendar
+      height="100%"
+      calendars={[
+        {
+          id: 'Subject',
+          bgColor: '#a9a9a9',
+          borderColor: '#a9a9a9',
+          isReadOnly: 'true'
+        }
+      ]}
+      
+      view="week"
+      disableDblClick={false}
+      disableClick={true}
+      isReadOnly={false}
+            // template={
+      //   popupIsAllDay=function {
+      //     return display: "none"
+      //   }
+      // }
+      schedules={[
+        {
+          id: '1',
+          calendarId: 'Subject',
+          category: 'time',
+          start: '2020-10-05T11:00:00',
+          end: '2020-10-05T12:00:00',
+        },
+        {
+          id: '2',
+          calendarId: 'Subject',
+          category: 'time',
+          start: '2020-10-09T10:00:00',
+          end: '2020-10-09T11:00:00',
+        },
+        {
+          id: '3',
+          calendarId: 'Subject',
+          category: 'time',
+          start: '2020-10-08T11:00:00',
+          end: '2020-10-08T15:00:00',
+        }
+      ]}
+      scheduleView={['time']}
+      taskView={false}
+      theme={myTheme}
+      timezones={[
+        {
+          timezoneOffset: 540,
+          displayLabel: 'GMT+09:00',
+          tooltip: 'Seoul'
+        },
+      ]}
+      useDetailPopup
+      useCreationPopup
+      view={"week"}
+      week={{
+        workweek: true,
+        hourStart: 8,
+        hourEnd: 23
+      }}
+    />
+  )
+}
+
+export default Cal
\ No newline at end of file

server/client/src/Pages/HomePage.js

-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import Menu from '../Components/Menu';
-import { Link, Redirect } from 'react-router-dom';
+import Schedule from '../Components/Schedule';
+import styled from 'styled-components';
+import moment from 'moment';
+import "moment/locale/ko";
+
+moment.locale("ko", {
+    week: {
+        dow: 1
+    }
+});
+
+const Drop = styled.div`
+    & button {
+        border solid 1px;
+    }
+`
+
+const Tab = styled.ul`
+    & a, a:hover, a:active {
+        color: black;
+    }
+`
 
 function Home() {
+    const [show, setShow] = useState(false);
+    const [weeks, setWeeks] = useState([]);
+    const [days, setDays] = useState([]);
+    const [sendDate, setSendDate] = useState(null);
+
+    useEffect(() => {
+        Dateform();
+    }, []);
+
+    function Dateform() {
+        let today = moment();
+        let weeks = [];
+        let dates = [];
+        let sendDates = [];
+        
+        for (let i = 0; i < 6; i++) {
+            if (i !== 0) {
+                today.add(7, 'd');
+            }
+
+            let date = { start: null, end: null };
+            date.start = today.startOf('week').format("MMM Do");
+            date.end = today.endOf('week').weekday(4).format("MMM Do");
+            dates.push(date);
+            const week = date.start + "  ~  " + date.end;
+            weeks.push(week);
+
+            let sendDate = today.startOf('week').format("YYYY-MM-DD");
+            sendDates.push(sendDate);
+        };
+        setWeeks([...weeks])
+        setDays([...sendDates])
+    };
+
+    function choose(e, index) {
+        setShow(true)
+        setSendDate(days[index])
+    }
+
     return (
         <div>
             <Menu />
-            <div className="container">
-                home
-                <button><Link to="/login">로그인</Link></button>
-                <button><Link to="/signup">회원가입</Link></button>
+            <div className="container mt-3">
+                <h2>대관 현황</h2>
+                <p>
+                    <strong>대관 가능 시간</strong>
+                    <ul>
+                        <li>평일: 9시 - 22시/ 예약가능 시간 이후 폐쇄</li>
+                        <li>주말: 이용 불가</li>
+                    </ul>
+                </p>
+                <Drop className="row dropdown mt-1 mb-2">
+                    <button className="btn btn-lg dropdown-toggle mx-auto col-5" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                        기간을 선택해주십시오.
+                    </button>
+                    <div className="dropdown-menu col-5" aria-labelledby="dropdownMenuButton">
+                        {weeks.map((week, index) => (
+                            <a className="dropdown-item" id={index} onClick={(e) => choose(e, index)}>{week}</a>
+                        ))}
+                    </div>
+                </Drop>
+                <Tab className="nav nav-tabs nav-justified mt-4" id="myTab" role="tablist" style={show ? {} : { display: "none" }}>
+                    <li className="nav-item">
+                        <a className="nav-link active" id="7-tab" data-toggle="tab" href="#tab-7" role="tab" aria-controls="7" aria-selected="true"> 7-223 </a>
+                    </li>
+                    <li className="nav-item">
+                        <a className="nav-link" id="9-tab" data-toggle="tab" href="#tab-9" role="tab" aria-controls="9" aria-selected="false"> 9-116 </a>
+                    </li>
+                    <li className="nav-item">
+                        <a className="nav-link" id="25-tab" data-toggle="tab" href="#tab-25" role="tab" aria-controls="25" aria-selected="false"> 25-307 </a>
+                    </li>
+                </Tab>
+                <div className="tab-content row justify-content-center" id="myTabContent" style={show ? {} : { display: "none" }}>
+                    <div className="tab-pane fade show active col-md-11 col-12" id="tab-7" role="tabpanel" aria-labelledby="7-tab">
+                        <Schedule day={sendDate}/>
+                    </div>
+                    <div className="tab-pane fade col-md-11 col-12" id="tab-9" role="tabpanel" aria-labelledby="9-tab">
+                        <Schedule day={sendDate}/>
+                    </div>
+                    <div className="tab-pane fade col-md-11 col-12" id="tab-25" role="tabpanel" aria-labelledby="25-tab">
+                        <Schedule day={sendDate}/>
+                    </div>
+                </div>
+                <h3>유의사항</h3>
+                <p>
+                    <ul>
+                        <li>강의실을 대관하는 대표자를 기준으로 최대 주 6시간까지 대관이 가능합니다.</li>
+                        <li>1회 대관시 최대 3시간까지 이용이 가능합니다. (1시간 단위로 대관 가능)</li>
+                        <li><strong style={{ color: "red" }}>대관 시간 이외 강의실을 이용하다 적발될 경우 한달 간 강의실 이용이 불가합니다.</strong></li>
+                    </ul>
+                </p>
+                <div className="bg-white">
+                    <h6>고려대학교 대관시스템</h6>
+                </div>
             </div>
         </div>
     )
 }
 
-export default Home
+export default Home;
\ No newline at end of file

server/client/src/Pages/LoginPage.js

@@ -191,4 +191,4 @@ function Login() {
     )
 }
 
-export default Login
+export default Login;
\ No newline at end of file

server/client/src/Pages/NoticePage.js

@@ -84,4 +84,4 @@ function Notice() {
     )
 }
 
-export default Notice
+export default Notice;
\ No newline at end of file

server/client/src/index.js

 import React from 'react';
 import ReactDOM from 'react-dom';
-import * as serviceWorker from './serviceWorker';
 import { BrowserRouter as Router, Route, Redirect, Switch } from 'react-router-dom';
-// import 'bootstrap';
+import * as serviceWorker from './serviceWorker';
+import 'bootstrap';
 import 'bootstrap/dist/css/bootstrap.css';
 import axios from 'axios';
 import { PrivateRoute } from './Components/PrivateRoute';