Skip to content

GitLab

Switch branch/tag
Find file Normal viewHistoryPermalink
HomePage.js 8.82 KB
Newer Older
Kim, Subin's avatar
Pages 추가    
Kim, Subin committed
1
2 
import React, { useState, useEffect } from 'react';
import Menu from '../Components/Menu';
Kim, Subin's avatar
Home    
Kim, Subin committed
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36 
import styled from 'styled-components';

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

const Schedule = styled.div`
    & ul {
        list-style-type: none;
    }

    & .cd-schedule__events {
        width: 100%;

        > ul {
        display: flex;
        flex-wrap: nowrap;
        }
    }

    & .cd-schedule__group {
        flex-basis: 0;
        flex-grow: 1;
    }

    & .cd-schedule__event {
        position: absolute;
        z-index: 3;
        width: calc(100% + 2px); // top position and height will be set using js
        left: -1px;
    }
`
Kim, Subin's avatar
Pages 추가    
Kim, Subin committed
37
38 

function Home() {
Kim, Subin's avatar
Home    
Kim, Subin committed
39
40 
    const [click, setState] = useState();
Kim, Subin's avatar
Pages 추가    
Kim, Subin committed
41
42
43
44 
    return (
        <div>
            <Menu />
            <div className="container">
Kim, Subin's avatar
Home    
Kim, Subin committed
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170 
                <Drop className="row dropdown">
                    <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">
                        <a className="dropdown-item" href="#">10 / 5 ~ 10 / 9</a>
                        <a className="dropdown-item" href="#">10 / 12 ~ 10 / 16</a>
                        <a className="dropdown-item" href="#">10 / 19 ~ 10 / 23</a>
                    </div>
                </Drop>
                <Schedule className="row cd-schedule cd-schedule--loading margin-top-lg margin-bottom-lg js-cd-schedule">
                    <div className="col-1 cd-schedule__timeline">
                        <ul>
                            <li><span>09:00</span></li>
                            <li><span>10:00</span></li>
                            <li><span>11:00</span></li>
                            <li><span>12:00</span></li>
                            <li><span>13:00</span></li>
                            <li><span>14:00</span></li>
                            <li><span>15:00</span></li>
                            <li><span>16:00</span></li>
                            <li><span>17:00</span></li>
                            <li><span>18:00</span></li>
                            <li><span>19:00</span></li>
                            <li><span>20:00</span></li>
                            <li><span>21:00</span></li>
                            <li><span>22:00</span></li>
                        </ul>
                    </div>
                    <div className="col-6 cd-schedule__events">
                        <ul>
                            <li className="cd-schedule__group">
                                <div className="cd-schedule__top-info"><span>월</span></div>
                                <ul>
                                    <li className="cd-schedule__event">
                                        <a data-start="10:00" data-end="12:00" data-content="event-abs-circuit" data-event="event-1" href="#0">
                                            <em className="cd-schedule__name">확률론</em>
                                        </a>
                                    </li>
                                    <li className="cd-schedule__event">
                                        <a data-start="17:00" data-end="18:00" data-content="event-abs-circuit" data-event="event-1" href="#0">
                                            <em className="cd-schedule__name">수치해석학</em>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li className="cd-schedule__group">
                                <div className="cd-schedule__top-info"><span>화</span></div>
                                <ul>
                                    <li className="cd-schedule__event">
                                        <a data-start="11:00" data-end="12:00" data-content="event-abs-circuit" data-event="event-1" href="#0">
                                            <em className="cd-schedule__name">해석학</em>
                                        </a>
                                    </li>
                                    <li className="cd-schedule__event">
                                        <a data-start="16:00" data-end="18:00" data-content="event-abs-circuit" data-event="event-1" href="#0">
                                            <em className="cd-schedule__name">수치해석학</em>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li className="cd-schedule__group">
                                <div className="cd-schedule__top-info"><span>수</span></div>
                                <ul>
                                    <li className="cd-schedule__event">
                                        <a data-start="9:00" data-end="10:00" data-content="event-abs-circuit" data-event="event-1" href="#0">
                                            <em className="cd-schedule__name">산업수학</em>
                                        </a>
                                    </li>
                                    <li className="cd-schedule__event">
                                        <a data-start="18:00" data-end="19:00" data-content="event-abs-circuit" data-event="event-1" href="#0">
                                            <em className="cd-schedule__name">해석학</em>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li className="cd-schedule__group">
                                <div className="cd-schedule__top-info"><span>목</span></div>
                                <ul>
                                    <li className="cd-schedule__event">
                                        <a data-start="9:00" data-end="11:00" data-content="event-abs-circuit" data-event="event-1" href="#0">
                                            <em className="cd-schedule__name">해석학</em>
                                        </a>
                                    </li>
                                    <li className="cd-schedule__event">
                                        <a data-start="11:00" data-end="12:00" data-content="event-abs-circuit" data-event="event-1" href="#0">
                                            <em className="cd-schedule__name">확률론</em>
                                        </a>
                                    </li>
                                    <li className="cd-schedule__event">
                                        <a data-start="16:00" data-end="17:00" data-content="event-abs-circuit" data-event="event-1" href="#0">
                                            <em className="cd-schedule__name">수치해석학</em>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li className="cd-schedule__group">
                                <div className="cd-schedule__top-info"><span>금</span></div>
                                <ul>
                                    <li className="cd-schedule__event">
                                        <a data-start="13:00" data-end="15:00" data-content="event-abs-circuit" data-event="event-1" href="#0">
                                            <em className="cd-schedule__name">산업수학</em>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                    {/* <div class="cd-schedule-modal">
                        <header class="cd-schedule-modal__header">
                            <div class="cd-schedule-modal__content">
                                <span class="cd-schedule-modal__date"></span>
                                <h3 class="cd-schedule-modal__name"></h3>
                            </div>

                            <div class="cd-schedule-modal__header-bg"></div>
                        </header>

                        <div class="cd-schedule-modal__body">
                            <div class="cd-schedule-modal__event-info"></div>
                            <div class="cd-schedule-modal__body-bg"></div>
                        </div>

                        <a href="#0" class="cd-schedule-modal__close text-replace">Close</a>
                    </div> */}
                </Schedule>
Kim, Subin's avatar
Pages 추가    
Kim, Subin committed
171
172
173
174
175
176 
            </div>
        </div>
    )
}

export default Home