HomePage.js 4.96 KB
Newer Older
Kim, Subin's avatar
Kim, Subin committed
1
import React, { useState, useEffect, useRef } from 'react';
Kim, Subin's avatar
Kim, Subin committed
2
import Menu from '../Components/Menu';
Kim, Subin's avatar
Kim, Subin committed
3
import Schedule from '../Components/Schedule';
Kim, Subin's avatar
Home    
Kim, Subin committed
4
import styled from 'styled-components';
Kim, Subin's avatar
기간    
Kim, Subin committed
5
6
7
8
9
10
11
12
import moment from 'moment';
import "moment/locale/ko";

moment.locale("ko", {
    week: {
        dow: 1
    }
});
Kim, Subin's avatar
Home    
Kim, Subin committed
13
14
15
16
17
18
19

const Drop = styled.div`
    & button {
        border solid 1px;
    }
`

Kim, Subin's avatar
Kim, Subin committed
20
21
22
const Tab = styled.ul`
    & a, a:hover, a:active {
        color: black;
Kim, Subin's avatar
Home    
Kim, Subin committed
23
24
    }
`
Kim, Subin's avatar
Kim, Subin committed
25
26

function Home() {
Kim, Subin's avatar
기간    
Kim, Subin committed
27
28
    const [show, setShow] = useState(false);
    const [weeks, setWeeks] = useState([]);
Kim, Subin's avatar
Kim, Subin committed
29
30
    const [days, setDays] = useState([]);
    const [sendDate, setSendDate] = useState(null);
Kim, Subin's avatar
기간    
Kim, Subin committed
31
32
33
34
35
36
37

    useEffect(() => {
        Dateform();
    }, []);

    function Dateform() {
        let today = moment();
38
        let weeks = [];
Kim, Subin's avatar
Kim, Subin committed
39
40
41
        let dates = [];
        let sendDates = [];
        
Kim, Subin's avatar
기간    
Kim, Subin committed
42
43
44
45
        for (let i = 0; i < 6; i++) {
            if (i !== 0) {
                today.add(7, 'd');
            }
Kim, Subin's avatar
Kim, Subin committed
46
47
48
49
50
51

            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;
Kim, Subin's avatar
기간    
Kim, Subin committed
52
            weeks.push(week);
Kim, Subin's avatar
Kim, Subin committed
53
54
55

            let sendDate = today.startOf('week').format("YYYY-MM-DD");
            sendDates.push(sendDate);
Kim, Subin's avatar
기간    
Kim, Subin committed
56
57
        };
        setWeeks([...weeks])
Kim, Subin's avatar
Kim, Subin committed
58
        setDays([...sendDates])
Kim, Subin's avatar
기간    
Kim, Subin committed
59
    };
Kim, Subin's avatar
Home    
Kim, Subin committed
60

Kim, Subin's avatar
Kim, Subin committed
61
62
63
64
65
    function choose(e, index) {
        setShow(true)
        setSendDate(days[index])
    }

Kim, Subin's avatar
Kim, Subin committed
66
67
    return (
        <div>
Kim, Subin's avatar
Kim, Subin committed
68
            {console.log(sendDate)}
Kim, Subin's avatar
Kim, Subin committed
69
            <Menu />
Lee Jin Ju's avatar
Lee Jin Ju committed
70
            <div className="container mt-3">
Lee Jin Ju's avatar
Lee Jin Ju committed
71
72
73
74
75
76
77
78
                <h2>대관 현황</h2>
                <p>
                    <strong>대관 가능 시간</strong>
                    <ul>
                        <li>평일: 9 - 22/ 예약가능 시간 이후 폐쇄</li>
                        <li>주말: 이용 불가</li>
                    </ul>
                </p>
Lee Jin Ju's avatar
Lee Jin Ju committed
79
                <Drop className="row dropdown mt-1 mb-2">
Kim, Subin's avatar
Home    
Kim, Subin committed
80
                    <button className="btn btn-lg dropdown-toggle mx-auto col-5" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Kim, Subin's avatar
기간    
Kim, Subin committed
81
                        기간을 선택해주십시오.
Kim, Subin's avatar
Home    
Kim, Subin committed
82
83
                    </button>
                    <div className="dropdown-menu col-5" aria-labelledby="dropdownMenuButton">
Kim, Subin's avatar
기간    
Kim, Subin committed
84
                        {weeks.map((week, index) => (
Kim, Subin's avatar
Kim, Subin committed
85
                            <a className="dropdown-item" id={index} onClick={(e) => choose(e, index)}>{week}</a>
Kim, Subin's avatar
기간    
Kim, Subin committed
86
                        ))}
Kim, Subin's avatar
Home    
Kim, Subin committed
87
88
                    </div>
                </Drop>
Kim, Subin's avatar
Kim, Subin committed
89
                <Tab className="nav nav-tabs nav-justified mt-4" id="myTab" role="tablist" style={show ? {} : { display: "none" }}>
Lee Jin Ju's avatar
Lee Jin Ju committed
90
                    <li className="nav-item">
Kim, Subin's avatar
Kim, Subin committed
91
                        <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>
Lee Jin Ju's avatar
Lee Jin Ju committed
92
93
                    </li>
                    <li className="nav-item">
Kim, Subin's avatar
Kim, Subin committed
94
                        <a className="nav-link" id="9-tab" data-toggle="tab" href="#tab-9" role="tab" aria-controls="9" aria-selected="false"> 9-116 </a>
Lee Jin Ju's avatar
Lee Jin Ju committed
95
96
                    </li>
                    <li className="nav-item">
Kim, Subin's avatar
Kim, Subin committed
97
                        <a className="nav-link" id="25-tab" data-toggle="tab" href="#tab-25" role="tab" aria-controls="25" aria-selected="false"> 25-307 </a>
Lee Jin Ju's avatar
Lee Jin Ju committed
98
                    </li>
Kim, Subin's avatar
Kim, Subin committed
99
100
101
102
                </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}/>
Lee Jin Ju's avatar
Lee Jin Ju committed
103
                    </div>
Kim, Subin's avatar
Kim, Subin committed
104
105
                    <div className="tab-pane fade col-md-11 col-12" id="tab-9" role="tabpanel" aria-labelledby="9-tab">
                        <Schedule day={sendDate}/>
Lee Jin Ju's avatar
Lee Jin Ju committed
106
                    </div>
Kim, Subin's avatar
Kim, Subin committed
107
108
                    <div className="tab-pane fade col-md-11 col-12" id="tab-25" role="tabpanel" aria-labelledby="25-tab">
                        <Schedule day={sendDate}/>
Lee Jin Ju's avatar
Lee Jin Ju committed
109
                    </div>
Kim, Subin's avatar
Kim, Subin committed
110
111
112
113
114
115
116
117
118
119
120
                </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>
Lee Jin Ju's avatar
Lee Jin Ju committed
121
                </div>
Kim, Subin's avatar
Kim, Subin committed
122
123
124
125
126
            </div>
        </div>
    )
}

Lee Jin Ju's avatar
Lee Jin Ju committed
127
export default Home;