Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
students
Today KU
Commits
1597a87c
Commit
1597a87c
authored
Oct 31, 2021
by
Kim, Subin
Browse files
Merge remote-tracking branch 'origin/kimpen'
parents
3e9a1b16
bf272410
Changes
14
Hide whitespace changes
Inline
Side-by-side
client/src/components/AdminScheduleItem.js
View file @
1597a87c
...
...
@@ -9,7 +9,7 @@ const AdminScheduleItem = ({}) => {
<
div
className
=
"
d-flex justify-content-between
"
>
<
h3
>
sadsad
<
/h3
>
<
div
className
=
"
fs-5
"
>
<
Link
to
=
"
/admin/edit
"
><
i
className
=
"
bi bi-pencil-square text-dark me-
1
"
data
-
bs
-
dismiss
=
"
modal
"
><
/i></
Link
>
<
Link
to
=
"
/admin/edit
"
><
i
className
=
"
bi bi-pencil-square text-dark me-
2
"
data
-
bs
-
dismiss
=
"
modal
"
><
/i></
Link
>
<
i
className
=
"
bi bi-trash
"
><
/i
>
<
/div
>
<
/div
>
...
...
client/src/components/Buttons/buttons.module.scss
View file @
1597a87c
...
...
@@ -2,12 +2,14 @@
top
:
10px
;
right
:
10px
;
&
:hover
{
&
.icon
{
color
:
#fff
}
}
&
.icon
{
color
:
crimson
;
&
:hover
,
:active
{
color
:
#fff
;
}
}
}
...
...
client/src/components/Calendar/AdminMonthly.js
0 → 100644
View file @
1597a87c
import
{
useState
,
useEffect
,
useRef
}
from
"
react
"
;
import
CalendarBtn
from
"
../Buttons/CalendarBtn.js
"
;
import
DatePickerModal
from
"
../Modal/DatePickerModal.js
"
;
import
ScheduleModal
from
"
../Modal/ScheduleModal.js
"
;
import
moment
from
'
moment
'
;
import
FullCalendar
from
'
@fullcalendar/react
'
;
import
dayGridPlugin
from
'
@fullcalendar/daygrid
'
;
import
interactionPlugin
from
"
@fullcalendar/interaction
"
;
import
bootstrapPlugin
from
'
@fullcalendar/bootstrap
'
;
import
'
@fortawesome/fontawesome-free/css/all.css
'
;
const
AdminMonthly
=
()
=>
{
const
[
initialDate
,
setInitialDate
]
=
useState
(
moment
().
format
(
'
YYYY-MM-DD
'
))
const
[
changeDate
,
setChangeDate
]
=
useState
(
moment
().
format
(
'
YYYY-MM-DD
'
))
const
[
pickerShow
,
setPickerShow
]
=
useState
(
false
)
const
[
dateShow
,
setDateShow
]
=
useState
({
date
:
moment
().
format
(
'
YYYY-MM-DD
'
),
show
:
false
})
const
calendarRef
=
useRef
(
null
)
const
calenIconRef
=
useRef
(
null
)
let
calendar
=
null
useEffect
(()
=>
{
if
(
calendarRef
&&
calendarRef
.
current
)
{
calendar
=
calendarRef
.
current
.
getApi
()
}
})
useEffect
(()
=>
{
if
(
calenIconRef
&&
calenIconRef
.
current
)
{
calenIconRef
.
current
.
addEventListener
(
'
click
'
,
()
=>
{
calendar
.
today
()
let
date
=
moment
(
calendar
.
getDate
()).
format
(
'
YYYY-MM-DD
'
)
setChangeDate
(
date
)
})
}
return
()
=>
{
if
(
calenIconRef
&&
calenIconRef
.
current
)
{
calenIconRef
.
current
.
removeEventListener
(
'
click
'
,
()
=>
{
calendar
.
today
()
let
date
=
moment
(
calendar
.
getDate
()).
format
(
'
YYYY-MM-DD
'
)
setChangeDate
(
date
)
})
}
}
},
[
calenIconRef
.
current
])
useEffect
(()
=>
{
calendar
.
gotoDate
(
changeDate
)
},
[
changeDate
])
return
(
<>
<
div
ref
=
{
calenIconRef
}
className
=
"
position-absolute
"
style
=
{{
top
:
"
7px
"
,
left
:
"
7px
"
}}
>
<
CalendarBtn
date
=
{
moment
(
initialDate
).
format
(
'
DD
'
)}
/
>
<
/div
>
<
FullCalendar
ref
=
{
calendarRef
}
plugins
=
{[
dayGridPlugin
,
interactionPlugin
,
bootstrapPlugin
]}
initialView
=
"
dayGridMonth
"
initialDate
=
{
initialDate
}
headerToolbar
=
{{
start
:
'
prev
'
,
center
:
'
myCustomButton
'
,
end
:
'
next
'
}}
dayHeaderContent
=
{(
date
)
=>
{
const
weekList
=
[
"
일
"
,
"
월
"
,
"
화
"
,
"
수
"
,
"
목
"
,
"
금
"
,
"
토
"
]
return
weekList
[
date
.
dow
]
}}
validRange
=
{{
start
:
moment
(
initialDate
).
subtract
(
3
,
'
years
'
).
format
(
'
YYYY-MM[-01]
'
),
end
:
moment
(
initialDate
).
add
(
3
,
'
years
'
).
add
(
1
,
'
months
'
).
format
(
'
YYYY-MM[-01]
'
)
}}
customButtons
=
{{
myCustomButton
:
{
text
:
moment
(
changeDate
).
format
(
'
YYYY.MM
'
),
click
:
()
=>
{
setPickerShow
(
true
)
return
<
button
className
=
"
btn btn-primary
"
type
=
"
button
"
data
-
bs
-
toggle
=
"
offcanvas
"
data
-
bs
-
target
=
"
#datePicker
"
aria
-
controls
=
"
datePicker
"
/>
}
},
prev
:
{
icon
:
"
fa-chevron-left
"
,
click
:
()
=>
{
calendar
.
prev
()
let
date
=
moment
(
calendar
.
getDate
()).
format
(
'
YYYY-MM-DD
'
)
setChangeDate
(
date
)
}
},
next
:
{
icon
:
"
fa-chevron-right
"
,
click
:
()
=>
{
calendar
.
next
()
let
date
=
moment
(
calendar
.
getDate
()).
format
(
'
YYYY-MM-DD
'
)
setChangeDate
(
date
)
}
}
}}
dateClick
=
{({
dateStr
})
=>
{
console
.
log
(
"
dateStr==
"
,
dateStr
)
setDateShow
({
...
dateShow
,
date
:
dateStr
,
show
:
true
})
return
<
button
type
=
"
button
"
className
=
"
btn btn-primary
"
data
-
bs
-
toggle
=
"
modal
"
data
-
bs
-
target
=
"
#scheduleModal
"
><
/button
>
}}
timeZone
=
"
local
"
themeSystem
=
'
bootstrap
'
height
=
'
78vh
'
/>
<
DatePickerModal
initialDate
=
{
initialDate
}
changeDate
=
{
changeDate
}
setChangeDate
=
{
setChangeDate
}
pickerShow
=
{
pickerShow
}
setPickerShow
=
{
setPickerShow
}
/
>
<
ScheduleModal
dateShow
=
{
dateShow
}
setDateShow
=
{
setDateShow
}
/
>
<
/
>
)
}
export
default
AdminMonthly
\ No newline at end of file
client/src/components/Calendar/CustomView.js
0 → 100644
View file @
1597a87c
import
KUSchedule
from
"
../Schedule/KUSchedule.js
"
;
import
ScheduleList
from
"
../Schedule/ScheduleList.js
"
;
import
{
createPlugin
}
from
'
@fullcalendar/react
'
;
const
CustomView
=
()
=>
{
return
(
<
div
className
=
'
fc-custom-view border-top border-dark pt-2
'
>
<
KUSchedule
/>
<
ScheduleList
/>
<
/div
>
)
}
export
default
createPlugin
({
views
:
{
custom
:
CustomView
}
})
\ No newline at end of file
client/src/components/Calendar/DateView.js
0 → 100644
View file @
1597a87c
import
{
useEffect
,
useRef
}
from
"
react
"
;
import
{
useHistory
,
useParams
}
from
"
react-router-dom
"
;
import
moment
from
'
moment
'
;
import
FullCalendar
from
'
@fullcalendar/react
'
;
import
dayGridPlugin
from
'
@fullcalendar/daygrid
'
;
import
bootstrapPlugin
from
'
@fullcalendar/bootstrap
'
;
import
'
@fortawesome/fontawesome-free/css/all.css
'
;
import
customViewPlugin
from
"
./CustomView.js
"
;
const
DateView
=
({
})
=>
{
const
calendarRef
=
useRef
(
null
)
const
{
date
}
=
useParams
()
const
history
=
useHistory
()
let
calendar
=
null
useEffect
(()
=>
{
if
(
calendarRef
&&
calendarRef
.
current
)
{
calendar
=
calendarRef
.
current
.
getApi
()
}
})
return
(
<
FullCalendar
ref
=
{
calendarRef
}
plugins
=
{[
bootstrapPlugin
,
customViewPlugin
]}
initialView
=
"
custom
"
headerToolbar
=
{{
start
:
'
prev
'
,
center
:
'
myCustomButton
'
,
end
:
'
next
'
}}
customButtons
=
{{
myCustomButton
:
{
text
:
moment
(
date
).
format
(
"
MM.DD
"
),
click
:
()
=>
history
.
push
(
"
/home
"
)
},
prev
:
{
icon
:
"
fa-chevron-left
"
,
click
:
()
=>
{
calendar
.
prev
()
let
date
=
moment
(
calendar
.
getDate
()).
format
(
'
YYYY-MM-DD
'
)
history
.
push
(
`/schedule/
${
date
}
`
)
}
},
next
:
{
icon
:
"
fa-chevron-right
"
,
click
:
()
=>
{
calendar
.
next
()
let
date
=
moment
(
calendar
.
getDate
()).
format
(
'
YYYY-MM-DD
'
)
history
.
push
(
`/schedule/
${
date
}
`
)
}
}
}}
timeZone
=
"
local
"
themeSystem
=
'
bootstrap
'
/>
)
}
export
default
DateView
\ No newline at end of file
client/src/components/Calendar/Monthly.js
View file @
1597a87c
...
...
@@ -13,8 +13,8 @@ const Monthly = () => {
const
[
initialDate
,
setInitialDate
]
=
useState
(
moment
().
format
(
'
YYYY-MM-DD
'
))
const
[
changeDate
,
setChangeDate
]
=
useState
(
moment
().
format
(
'
YYYY-MM-DD
'
))
const
[
show
,
setShow
]
=
useState
(
false
)
const
calenIconRef
=
useRef
(
null
)
const
calendarRef
=
useRef
(
null
)
const
calenIconRef
=
useRef
(
null
)
let
calendar
=
null
const
history
=
useHistory
();
...
...
@@ -99,7 +99,7 @@ const Monthly = () => {
timeZone
=
"
local
"
themeSystem
=
'
bootstrap
'
// eventLimit="true"
height
=
'
7
5
vh
'
height
=
'
7
8
vh
'
/>
<
DatePickerModal
initialDate
=
{
initialDate
}
changeDate
=
{
changeDate
}
setChangeDate
=
{
setChangeDate
}
show
=
{
show
}
setShow
=
{
setShow
}
/
>
<
/
>
...
...
client/src/components/Modal/ScheduleModal.js
View file @
1597a87c
import
Item
from
"
../AdminScheduleItem.js
"
;
import
moment
from
'
moment
'
;
import
styles
from
"
./modal.module.scss
"
;
const
ScheduleModal
=
()
=>
{
const
ScheduleModal
=
(
{
dateShow
,
setDateShow
}
)
=>
{
return
(
<
div
className
=
"
modal
"
id
=
"
scheduleModal
"
data
-
bs
-
backdrop
=
"
static
"
data
-
bs
-
keyboard
=
"
false
"
tabIndex
=
"
-1
"
aria
-
labelledby
=
"
scheduleModalLabel
"
aria
-
hidden
=
"
true
"
>
<
div
className
=
"
modal-dialog modal-sm modal-dialog-centered modal-dialog-scrollable
"
>
<
div
className
=
"
modal-content
"
>
<
div
className
=
{
`modal-header
${
styles
.
header
}
`
}
>
<
h5
className
=
"
modal-title mx-auto
"
id
=
"
scheduleModalLabel
"
>
Modal
title
<
/h5
>
<
button
type
=
"
button
"
className
=
{
`btn-close btn-close-white ms-0
${
styles
.
closeBtn
}
`
}
data
-
bs
-
dismiss
=
"
modal
"
aria
-
label
=
"
Close
"
><
/button
>
<
/div
>
<
div
className
=
{
`modal-body text-dark
${
styles
.
body
}
`
}
>
<
Item
/>
<
p
className
=
"
mb-0
"
>
선택한
날짜에
일정이
없습니다
.
<
/p
>
<>
{
dateShow
.
show
?
<
div
className
=
"
modal-backdrop fade show
"
><
/div> : null
}
<
div
className
=
{
"
modal
"
+
(
dateShow
.
show
?
"
d-block
"
:
"
d-none
"
)}
id
=
"
scheduleModal
"
data
-
bs
-
backdrop
=
"
static
"
data
-
bs
-
keyboard
=
"
false
"
tabIndex
=
"
-1
"
aria
-
labelledby
=
"
scheduleModalLabel
"
aria
-
hidden
=
"
true
"
>
<
div
className
=
"
modal-dialog modal-sm modal-dialog-centered modal-dialog-scrollable
"
>
<
div
className
=
"
modal-content
"
>
<
div
className
=
{
`modal-header
${
styles
.
header
}
`
}
>
<
h5
className
=
"
modal-title text-white mx-auto
"
id
=
"
scheduleModalLabel
"
>
{
moment
(
dateShow
.
date
).
format
(
"
MM.DD
"
)}
<
/h5
>
<
button
type
=
"
button
"
className
=
{
`btn-close btn-close-white ms-0
${
styles
.
closeBtn
}
`
}
data
-
bs
-
dismiss
=
"
modal
"
aria
-
label
=
"
Close
"
onClick
=
{()
=>
setDateShow
({
...
dateShow
,
show
:
false
})}
><
/button
>
<
/div
>
<
div
className
=
{
`modal-body text-dark
${
styles
.
body
}
`
}
>
<
Item
/>
<
p
className
=
"
text-center mb-0
"
>
선택한
날짜에
일정이
없습니다
.
<
/p
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/
div
>
<
/
>
)
}
...
...
client/src/components/Schedule/KUSchedule.js
View file @
1597a87c
...
...
@@ -3,7 +3,7 @@ import styles from "./schedule.module.scss";
const
KUSchedule
=
({
title
=
"
복수전공 신청
"
})
=>
{
return
(
<
div
className
=
"
card w-75 rounded-0 border-dark mx-auto
"
>
<
div
className
=
{
`card-header rounded-0 p
x
-1
${
styles
.
header
}
`
}
>
<
div
className
=
{
`card-header rounded-0 p-1
${
styles
.
header
}
`
}
>
<
img
className
=
{
styles
.
ku_tiger
}
src
=
{
process
.
env
.
PUBLIC_URL
+
'
/ku-tiger(bgX).png
'
}
alt
=
"
어흥이
"
/>
<
/div
>
<
div
className
=
"
card-body text-center pb-2
"
>
...
...
client/src/components/Schedule/ScheduleList.js
View file @
1597a87c
...
...
@@ -4,7 +4,7 @@ import styles from "./schedule.module.scss";
const
ScheduleList
=
()
=>
{
return
(
<
div
className
=
{
styles
.
list
}
>
<
div
className
=
{
`
accordion accordion-flush
`
}
id
=
"
scheduleList
"
>
<
div
className
=
"
accordion accordion-flush
"
id
=
"
scheduleList
"
>
<
Item
/>
<
Item
/>
<
Item
/>
...
...
client/src/components/Schedule/schedule.module.scss
View file @
1597a87c
.list
{
height
:
6
0
vh
;
height
:
4
6vh
;
overflow-y
:
auto
;
padding-bottom
:
4vh
;
}
.activeBtn
{
...
...
@@ -65,8 +64,8 @@
.header
{
background-color
:
crimson
;
&
.ku_tiger
{
width
:
4
6
px
;
height
:
3
5
px
;
width
:
4
2
px
;
height
:
3
0
px
;
}
}
...
...
client/src/pages/Admin/AdminPage.js
View file @
1597a87c
import
CalendarBtn
from
"
../../components/Buttons/CalendarBtn.js
"
;
import
Monthly
from
"
../../components/Calendar/AdminMonthly.js
"
;
import
Footer
from
"
../../components/Footer.js
"
;
import
styles
from
"
./admin.module.scss
"
;
const
AdminPage
=
()
=>
{
return
(
<>
<
p
className
=
{
`position-absolute user-select-none
${
styles
.
status
}
`
}
>
관리자님
,
환영합니다
.
|
<
span
className
=
{
styles
.
cursor
}
>
로그아웃
<
/span></
p
>
<
div
className
=
"
position-absolute
"
style
=
{{
top
:
"
7px
"
,
left
:
"
7px
"
}
}
>
<
CalendarBtn
date
=
"
2021-09-28
"
/>
<
div
className
=
{
styles
.
body
}
>
<
Monthly
/>
<
/div
>
<
Footer
pathname
=
"
admin/edit
"
/>
<
/
>
)
}
...
...
client/src/pages/Admin/admin.module.scss
View file @
1597a87c
...
...
@@ -9,4 +9,8 @@
color
:
crimson
;
}
}
}
.body
{
padding-top
:
4em
;
}
\ No newline at end of file
client/src/pages/SchedulePage.js
View file @
1597a87c
import
Menu
from
"
../components/Menu/Menu.js
"
;
import
HomeBtn
from
"
../components/Buttons/HomeBtn.js
"
;
import
ScheduleModal
from
"
../components/Modal/ScheduleModal.js
"
;
import
KUSchedule
from
"
../components/Schedule/KUSchedule.js
"
;
import
ScheduleList
from
"
../components//Schedule/ScheduleList.js
"
;
import
DateView
from
"
../components/Calendar/DateView.js
"
;
import
Footer
from
"
../components/Footer.js
"
;
const
SchedulePage
=
()
=>
{
...
...
@@ -10,11 +8,7 @@ const SchedulePage = () => {
<>
<
Menu
/>
<
HomeBtn
/>
<
button
type
=
"
button
"
className
=
"
btn btn-primary
"
data
-
bs
-
toggle
=
"
modal
"
data
-
bs
-
target
=
"
#scheduleModal
"
>
<
ScheduleModal
/>
<
/button
>
<
KUSchedule
/>
<
ScheduleList
/>
<
DateView
/>
<
Footer
pathname
=
"
schedule/edit
"
/>
<
/
>
)
...
...
client/src/scss/custom.scss
View file @
1597a87c
...
...
@@ -71,7 +71,7 @@ button {
}
.fc
{
marg
in-top
:
1em
;
padd
in
g
-top
:
1em
;
&
a
{
text-decoration
:
none
;
...
...
@@ -135,4 +135,8 @@ button {
&
td
.fc-day-sun
:not
(
.fc-day-other
)
{
color
:
#FF0000
;
}
&
.fc-dayGridDay-view
{
display
:
none
;
}
}
\ No newline at end of file
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment