홈페이지이이이이이이이

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";
-import styled from 'styled-components';
-
-const cal = styled.div`
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 5px;
-  top: 64px;
-`
-
-// const container = document.getElementById('calendar');
-const options = {
-  defaultView: 'week',
-  taskView: false,
-  week: {
-    workweek: true
-  },
-  useCreationPopup: true,
-  useDetailPopup: true
-};
-
-const calendar = new Calendar('#calendar', options);
-
-calendar.setCalendars([
-  {
-    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'
-  }
-]);
-
-calendar.createSchedules([
-  {
-    id: '1',
-    calendarId: 'Major Subject',
-    title: '자료구조론',
-    category: 'time',             
-    start: '2020-10-05T11:00:00',
-    end: '2020-10-05T12:00:00',
-    isReadOnly : true
-  },
-  {
-    id: '2',
-    calendarId: 'Elective Subject',
-    title: '웹 프로그래밍',
-    category: 'allday',
-    start: '2020-10-5T10:00:00',
-    end: '2020-10-9T11:00:00',
-    isReadOnly : true
-  },
-  {
-    id: '3',
-    calendarId: 'General Subject',
-    title: '영양과 건강',
-    category: 'time',
-    start: '2020-10-8T11:00:00',
-    end: '2020-10-8T15:00:00',
-    isReadOnly : true
-  }
-]);
-
-export default Calendar
\ No newline at end of file

server/client/src/Components/Schedule.js

+import React, { useState, 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() {
+  const [start, setStart] = useState(new Date());
+  const [end, setEnd] = useState(new Date(new Date().setMinutes(start.getMinutes() + 30)));;
+
+  const [myTheme, setMyTheme] = useState({
+    'common.dayname.color': '#333',
+    'common.today.color': '#333',
+    'common.creationGuide.backgroundColor': 'rgba(81, 92, 230, 0.05)',
+  });
+
+  // Calendar.prototype.openCreationPopup = function (schedule) {
+  //   if (this._openCreationPopup) {
+  //     this._openCreationPopup(schedule);
+  //   }
+  // };
+
+  return (
+    <Calendar
+      height="100%"
+      calendars={[
+        {
+          id: 'Subject',
+          bgColor: '#a9a9a9',
+          borderColor: '#a9a9a9',
+          isReadOnly: 'true'
+        }
+      ]}
+      
+      view="week"
+      disableDblClick={false}
+      disableClick={true}
+      isReadOnly={false}
+      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
+      week={{
+        hourStart: 8,
+        hourEnd: 23,
+        workweek: true
+      }}
+    />
+  )
+}
+
+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,16 +17,16 @@ 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([]);
-
+    
     useEffect(() => {
         Dateform();
     }, []);
@@ -38,7 +38,7 @@ function Home() {
         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");
@@ -76,6 +76,36 @@ function Home() {
                         </Drop>
                     </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" id="myTabContent" style={show ? {} : { display: "none" }}>
+                    <div className="tab-pane fade show active" id="tab-7" role="tabpanel" aria-labelledby="7-tab"><Schedule/></div>
+                    <div className="tab-pane fade" id="tab-9" role="tabpanel" aria-labelledby="9-tab">안녕 1과기대<Schedule/></div>
+                    <div className="tab-pane fade" id="tab-25" role="tabpanel" aria-labelledby="25-tab">안녕 농심<Schedule/></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>
     )