Skip to content

GitLab

Commit 0f8315a9 authored by Lee Jin Ju's avatar Lee Jin Ju
Browse files

홈페이지이이이이이이이

parent b121facd
Hide whitespace changes
Inline Side-by-side
server/client/package-lock.json
View file @ 0f8315a9
......@@ -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
View file @ 0f8315a9
......@@ -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 deleted 100644 → 0
View file @ b121facd
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 0 → 100644
View file @ 0f8315a9
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
View file @ 0f8315a9
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>
)
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment