스케쥴

server/client/package-lock.json

@@ -1674,6 +1674,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",

server/client/package.json

@@ -6,6 +6,7 @@
     "@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",
     "bootstrap": "^4.5.2",
     "formik": "^2.1.5",
@@ -17,7 +18,6 @@
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.3",
     "styled-components": "^5.2.0",
-    "tui-calendar": "^1.12.14",
     "yup": "^0.29.3"
   },
   "scripts": {

server/client/src/Components/Calendar.js

-import React, { useState, useEffect } from 'react';
-import Calendar from 'tui-calendar';
-import "tui-calendar/dist/tui-calendar.css";
-
-const calendar = new Calendar('#calendar', {
-    defaultView: 'week',
-  //   useCreationPopup: true,
-  //   useDetailPopup: true
-  });
-  
-  calendar.createSchedules([
-      {
-        id: '1',
-        calendarId: 'Major Lecture',
-        title: '자료 구조',
-        category: 'time',
-        start: '2018-11-20T10:30:00',
-        end: '2018-11-20T12:30:00'
-      },
-      {
-        id: '2',
-        calendarId: 'General Lecture',
-        title: '건강과 영양',
-        category: 'time',
-        dueDateClass: '',
-        start: '2018-11-20T14:30:00',
-        end: '2018-11-20T16:30:00',
-        isReadOnly: true // schedule is read-only
-      }
-    ]);
-
-calendar.render();
-    
-export default Calendar
\ No newline at end of file

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 + "15:00:00");
+  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
+      ref={calendarRef}
+      height="100%"
+      calendars={[
+        {
+          id: 'Major Subject',
+          name: '전공 필수',
+          color: '#ffffff',
+          bgColor: '#ff5583',
+          dragBgColor: '#ff5583',
+          borderColor: '#ff5583'
+        },
+        {
+          id: 'Elective Subject',
+          name: '전공 선택',
+          color: '#ffffff',
+          bgColor: '#ffbb3b',
+          dragBgColor: '#ffbb3b',
+          borderColor: '#ffbb3b'
+        },
+        {
+          id: 'General Subject',
+          name: '일반 교양',
+          color: '#ffffff',
+          bgColor: '#03bd9e',
+          dragBgColor: '#03bd9e',
+          borderColor: '#03bd9e'
+        }
+      ]}
+      disableDblClick={false}
+      disableClick={true}
+      isReadOnly={false}
+      // template={
+      //   popupIsAllDay=function {
+      //     return display: "none"
+      //   }
+      // }
+      schedules={[
+        {
+          id: '1',
+          calendarId: 'Major Subject',
+          category: 'time',
+          start: '2020-10-09T11:00:00',
+          end: '2020-10-09T12:00:00'
+        },
+        {
+          id: '2',
+          calendarId: 'Elective Subject',
+          title: '웹 프로그래밍',
+          category: 'time',
+          start: '2020-10-09T10:00:00',
+          end: '2020-10-09T11:00:00'
+        },
+        {
+          id: '3',
+          calendarId: 'General Subject',
+          title: '영양과 건강',
+          category: 'time',
+          start: '2020-10-08T11:00:00',
+          end: '2020-10-08T15:00:00'
+        }
+      ]}
+      scheduleView={['time']}
+      taskView={false}
+      theme={myTheme}
+      timezones={[
+        {
+          timezoneOffset: 540
+        }
+      ]}
+      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 Calendar from '../Components/Calendar';
+import Schedule from '../Components/Schedule';
 import styled from 'styled-components';
 import moment from 'moment';
 import "moment/locale/ko";
@@ -17,15 +17,17 @@ const Drop = styled.div`
     }
 `
 
-const Schedule = styled.div`
-    & ul {
-        list-style-type: none;
+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();
@@ -34,25 +36,38 @@ function Home() {
     function Dateform() {
         let today = moment();
         let weeks = [];
-        let dates = { start: null, end: null };
+        let dates = [];
+        let sendDates = [];
+        
         for (let i = 0; i < 6; i++) {
             if (i !== 0) {
                 today.add(7, 'd');
             }
 
-            dates.start = today.startOf('week').format("MMM Do");
-            dates.end = today.endOf('week').weekday(4).format("MMM Do");
-            const week = dates.start + "  ~  " + dates.end;
+            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>
+            {console.log(sendDate)}
             <Menu />
             <div className="container mt-3">
-
                 <h2>대관 현황</h2>
                 <p>
                     <strong>대관 가능 시간</strong>
@@ -61,43 +76,48 @@ function Home() {
                         <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" href="#" onClick={() => setShow(true)}>{week}</a>
+                            <a className="dropdown-item" id={index} onClick={(e) => choose(e, index)}>{week}</a>
                         ))}
                     </div>
                 </Drop>
-                <ul className="nav nav-tabs nav-justified mt-4" id="myTab" role="tablist">
+                <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="#7" role="tab"> 7-223 </a>
+                        <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="#9" role="tab"> 9-116 </a>
+                        <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="#25" role="tab"> 25-307 </a>
+                        <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>
-                </ul>
-
-                <div className="tab-content" id="myTabContent">
-                    <div className="tab-pane fade show active" id="7" role="tabpanel">
-                        
-                    {/* <Calendar />
-                    <div className="container mt-1 mb-2"></div> */}
-
+                </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" id="9" role="tabpanel" aria-labelledby="9-tab">
+                    <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" id="25" role="tabpanel" aria-labelledby="25-tab">
+                    <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>

server/client/src/Pages/LoginPage.js

@@ -97,7 +97,6 @@ function Login() {
                                 </div>
                             )}
                     </Formik>
-
                 </Log>
             </div>
         </div>