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
ff9dad79
Commit
ff9dad79
authored
Oct 31, 2021
by
Kim, Subin
Browse files
Monthly
parent
cf42430e
Changes
9
Hide whitespace changes
Inline
Side-by-side
client/package-lock.json
View file @
ff9dad79
...
@@ -8,15 +8,19 @@
...
@@ -8,15 +8,19 @@
"name": "client",
"name": "client",
"version": "0.1.0",
"version": "0.1.0",
"dependencies": {
"dependencies": {
"@fortawesome/fontawesome-free": "^5.15.4",
"@fullcalendar/bootstrap": "^5.10.0",
"@fullcalendar/daygrid": "^5.10.0",
"@fullcalendar/daygrid": "^5.10.0",
"@fullcalendar/interaction": "^5.10.0",
"@fullcalendar/react": "^5.10.0",
"@fullcalendar/react": "^5.10.0",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^11.2.7",
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3",
"@testing-library/user-event": "^12.8.3",
"axios": "^0.21.4",
"axios": "^0.21.4",
"bootstrap": "^5.1.
1
",
"bootstrap": "^5.1.
3
",
"bootstrap-icons": "^1.5.0",
"bootstrap-icons": "^1.5.0",
"formik": "^2.2.9",
"formik": "^2.2.9",
"moment": "^2.29.1",
"node-sass": "^6.0.1",
"node-sass": "^6.0.1",
"react": "^17.0.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-dom": "^17.0.2",
...
@@ -1824,6 +1828,24 @@
...
@@ -1824,6 +1828,24 @@
"url": "https://github.com/sponsors/sindresorhus"
"url": "https://github.com/sponsors/sindresorhus"
}
}
},
},
"node_modules/@fortawesome/fontawesome-free": {
"version": "5.15.4",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.4.tgz",
"integrity": "sha512-eYm8vijH/hpzr/6/1CJ/V/Eb1xQFW2nnUKArb3z+yUWv7HTwj6M7SP957oMjfZjAHU6qpoNc2wQvIxBLWYa/Jg==",
"hasInstallScript": true,
"engines": {
"node": ">=6"
}
},
"node_modules/@fullcalendar/bootstrap": {
"version": "5.10.0",
"resolved": "https://registry.npmjs.org/@fullcalendar/bootstrap/-/bootstrap-5.10.0.tgz",
"integrity": "sha512-PCuGBWk5a6lj2AOJFy/NX26FVYaYK+MjM3FYyTbai8Zuv1YpwFnHVTM5jziln4rmRu4A3ggIzhe0IPz0j+2tEw==",
"dependencies": {
"@fullcalendar/common": "~5.10.0",
"tslib": "^2.1.0"
}
},
"node_modules/@fullcalendar/common": {
"node_modules/@fullcalendar/common": {
"version": "5.10.0",
"version": "5.10.0",
"resolved": "https://registry.npmjs.org/@fullcalendar/common/-/common-5.10.0.tgz",
"resolved": "https://registry.npmjs.org/@fullcalendar/common/-/common-5.10.0.tgz",
...
@@ -1841,6 +1863,15 @@
...
@@ -1841,6 +1863,15 @@
"tslib": "^2.1.0"
"tslib": "^2.1.0"
}
}
},
},
"node_modules/@fullcalendar/interaction": {
"version": "5.10.0",
"resolved": "https://registry.npmjs.org/@fullcalendar/interaction/-/interaction-5.10.0.tgz",
"integrity": "sha512-zTNaly+4VkcrxxQy5oY0D8hGH+3Dkfm/0GB1dHi/NkP/z/JTACw6CUkFYbM5tynkaDkVIoU2cUXPMFf25sjU8w==",
"dependencies": {
"@fullcalendar/common": "~5.10.0",
"tslib": "^2.1.0"
}
},
"node_modules/@fullcalendar/react": {
"node_modules/@fullcalendar/react": {
"version": "5.10.0",
"version": "5.10.0",
"resolved": "https://registry.npmjs.org/@fullcalendar/react/-/react-5.10.0.tgz",
"resolved": "https://registry.npmjs.org/@fullcalendar/react/-/react-5.10.0.tgz",
...
@@ -5399,15 +5430,15 @@
...
@@ -5399,15 +5430,15 @@
"integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
"integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
},
},
"node_modules/bootstrap": {
"node_modules/bootstrap": {
"version": "5.1.
1
",
"version": "5.1.
3
",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.
1
.tgz",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.
3
.tgz",
"integrity": "sha512-
/jUa4sSuDZWlDLQ1gwQQR8uoYSvLJzDd8m5o6bPKh3asLAMYVZKdRCjb1joUd5WXf0WwCNzd2EjwQQhupou0dA
==",
"integrity": "sha512-
fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q
==",
"funding": {
"funding": {
"type": "opencollective",
"type": "opencollective",
"url": "https://opencollective.com/bootstrap"
"url": "https://opencollective.com/bootstrap"
},
},
"peerDependencies": {
"peerDependencies": {
"@popperjs/core": "^2.10.
1
"
"@popperjs/core": "^2.10.
2
"
}
}
},
},
"node_modules/bootstrap-icons": {
"node_modules/bootstrap-icons": {
...
@@ -14327,6 +14358,14 @@
...
@@ -14327,6 +14358,14 @@
"mkdirp": "bin/cmd.js"
"mkdirp": "bin/cmd.js"
}
}
},
},
"node_modules/moment": {
"version": "2.29.1",
"resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
"integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==",
"engines": {
"node": "*"
}
},
"node_modules/move-concurrently": {
"node_modules/move-concurrently": {
"version": "1.0.1",
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
"resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
...
@@ -24354,6 +24393,20 @@
...
@@ -24354,6 +24393,20 @@
}
}
}
}
},
},
"@fortawesome/fontawesome-free": {
"version": "5.15.4",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.4.tgz",
"integrity": "sha512-eYm8vijH/hpzr/6/1CJ/V/Eb1xQFW2nnUKArb3z+yUWv7HTwj6M7SP957oMjfZjAHU6qpoNc2wQvIxBLWYa/Jg=="
},
"@fullcalendar/bootstrap": {
"version": "5.10.0",
"resolved": "https://registry.npmjs.org/@fullcalendar/bootstrap/-/bootstrap-5.10.0.tgz",
"integrity": "sha512-PCuGBWk5a6lj2AOJFy/NX26FVYaYK+MjM3FYyTbai8Zuv1YpwFnHVTM5jziln4rmRu4A3ggIzhe0IPz0j+2tEw==",
"requires": {
"@fullcalendar/common": "~5.10.0",
"tslib": "^2.1.0"
}
},
"@fullcalendar/common": {
"@fullcalendar/common": {
"version": "5.10.0",
"version": "5.10.0",
"resolved": "https://registry.npmjs.org/@fullcalendar/common/-/common-5.10.0.tgz",
"resolved": "https://registry.npmjs.org/@fullcalendar/common/-/common-5.10.0.tgz",
...
@@ -24371,6 +24424,15 @@
...
@@ -24371,6 +24424,15 @@
"tslib": "^2.1.0"
"tslib": "^2.1.0"
}
}
},
},
"@fullcalendar/interaction": {
"version": "5.10.0",
"resolved": "https://registry.npmjs.org/@fullcalendar/interaction/-/interaction-5.10.0.tgz",
"integrity": "sha512-zTNaly+4VkcrxxQy5oY0D8hGH+3Dkfm/0GB1dHi/NkP/z/JTACw6CUkFYbM5tynkaDkVIoU2cUXPMFf25sjU8w==",
"requires": {
"@fullcalendar/common": "~5.10.0",
"tslib": "^2.1.0"
}
},
"@fullcalendar/react": {
"@fullcalendar/react": {
"version": "5.10.0",
"version": "5.10.0",
"resolved": "https://registry.npmjs.org/@fullcalendar/react/-/react-5.10.0.tgz",
"resolved": "https://registry.npmjs.org/@fullcalendar/react/-/react-5.10.0.tgz",
...
@@ -27099,9 +27161,9 @@
...
@@ -27099,9 +27161,9 @@
"integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
"integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
},
},
"bootstrap": {
"bootstrap": {
"version": "5.1.
1
",
"version": "5.1.
3
",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.
1
.tgz",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.
3
.tgz",
"integrity": "sha512-
/jUa4sSuDZWlDLQ1gwQQR8uoYSvLJzDd8m5o6bPKh3asLAMYVZKdRCjb1joUd5WXf0WwCNzd2EjwQQhupou0dA
==",
"integrity": "sha512-
fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q
==",
"requires": {}
"requires": {}
},
},
"bootstrap-icons": {
"bootstrap-icons": {
...
@@ -33875,6 +33937,11 @@
...
@@ -33875,6 +33937,11 @@
"minimist": "^1.2.5"
"minimist": "^1.2.5"
}
}
},
},
"moment": {
"version": "2.29.1",
"resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
"integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ=="
},
"move-concurrently": {
"move-concurrently": {
"version": "1.0.1",
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
"resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
client/package.json
View file @
ff9dad79
...
@@ -3,15 +3,19 @@
...
@@ -3,15 +3,19 @@
"version"
:
"0.1.0"
,
"version"
:
"0.1.0"
,
"private"
:
true
,
"private"
:
true
,
"dependencies"
:
{
"dependencies"
:
{
"@fortawesome/fontawesome-free"
:
"^5.15.4"
,
"@fullcalendar/bootstrap"
:
"^5.10.0"
,
"@fullcalendar/daygrid"
:
"^5.10.0"
,
"@fullcalendar/daygrid"
:
"^5.10.0"
,
"@fullcalendar/interaction"
:
"^5.10.0"
,
"@fullcalendar/react"
:
"^5.10.0"
,
"@fullcalendar/react"
:
"^5.10.0"
,
"@testing-library/jest-dom"
:
"^5.14.1"
,
"@testing-library/jest-dom"
:
"^5.14.1"
,
"@testing-library/react"
:
"^11.2.7"
,
"@testing-library/react"
:
"^11.2.7"
,
"@testing-library/user-event"
:
"^12.8.3"
,
"@testing-library/user-event"
:
"^12.8.3"
,
"axios"
:
"^0.21.4"
,
"axios"
:
"^0.21.4"
,
"bootstrap"
:
"^5.1.
1
"
,
"bootstrap"
:
"^5.1.
3
"
,
"bootstrap-icons"
:
"^1.5.0"
,
"bootstrap-icons"
:
"^1.5.0"
,
"formik"
:
"^2.2.9"
,
"formik"
:
"^2.2.9"
,
"moment"
:
"^2.29.1"
,
"node-sass"
:
"^6.0.1"
,
"node-sass"
:
"^6.0.1"
,
"react"
:
"^17.0.2"
,
"react"
:
"^17.0.2"
,
"react-dom"
:
"^17.0.2"
,
"react-dom"
:
"^17.0.2"
,
...
...
client/src/components/Buttons/CalendarBtn.js
View file @
ff9dad79
...
@@ -4,7 +4,7 @@ const CalendarBtn = ({ date }) => {
...
@@ -4,7 +4,7 @@ const CalendarBtn = ({ date }) => {
return
(
return
(
<
div
className
=
{
`d-inline-block position-relative text-center
${
styles
.
calendar
}
`
}
>
<
div
className
=
{
`d-inline-block position-relative text-center
${
styles
.
calendar
}
`
}
>
<
strong
className
=
"
position-absolute top-0 text-white
"
>
Today
<
/strong
>
<
strong
className
=
"
position-absolute top-0 text-white
"
>
Today
<
/strong
>
<
span
>
10
<
/span
>
<
span
>
{
date
}
<
/span
>
<
/div
>
<
/div
>
)
)
}
}
...
...
client/src/components/Calendar/Monthly.js
View file @
ff9dad79
import
{
Calendar
}
from
'
@fullcalendar/core
'
;
import
{
useState
,
useEffect
,
useRef
}
from
"
react
"
;
import
{
useHistory
}
from
"
react-router-dom
"
;
import
CalendarBtn
from
"
../Buttons/CalendarBtn.js
"
;
import
DatePickerModal
from
"
../Modal/DatePickerModal.js
"
;
import
moment
from
'
moment
'
;
import
FullCalendar
from
'
@fullcalendar/react
'
;
import
dayGridPlugin
from
'
@fullcalendar/daygrid
'
;
import
dayGridPlugin
from
'
@fullcalendar/daygrid
'
;
import
interactionPlugin
from
"
@fullcalendar/interaction
"
;
import
bootstrapPlugin
from
'
@fullcalendar/bootstrap
'
;
import
'
@fortawesome/fontawesome-free/css/all.css
'
;
const
Monthly
=
()
=>
{
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
)
let
calendar
=
null
const
history
=
useHistory
();
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
(
return
(
<><
/
>
<>
<
div
ref
=
{
calenIconRef
}
className
=
"
position-absolute
"
style
=
{{
top
:
"
9px
"
,
right
:
"
8px
"
}}
>
<
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
:
()
=>
{
setShow
(
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
})
=>
history
.
push
(
`/schedule/
${
dateStr
}
`
)}
timeZone
=
"
local
"
themeSystem
=
'
bootstrap
'
eventLimit
=
"
true
"
height
=
'
75vh
'
/>
<
DatePickerModal
initialDate
=
{
initialDate
}
changeDate
=
{
changeDate
}
setChangeDate
=
{
setChangeDate
}
show
=
{
show
}
setShow
=
{
setShow
}
/
>
<
/
>
)
)
}
}
...
...
client/src/components/Calendar/Weekly.js
0 → 100644
View file @
ff9dad79
import
FullCalendar
from
'
@fullcalendar/react
'
;
import
dayGridPlugin
from
'
@fullcalendar/daygrid
'
;
const
Weekly
=
()
=>
{
return
(
<
FullCalendar
plugins
=
{[
dayGridPlugin
]}
initialView
=
"
dayGridWeek
"
defaultView
=
"
dayGridWeek
"
headerToolbar
=
{{
start
:
'
prev
'
,
center
:
'
title
'
,
end
:
'
next
'
}}
/
>
)
}
export
default
Weekly
\ No newline at end of file
client/src/components/Menu/Menu.js
View file @
ff9dad79
import
{
Link
}
from
"
react-router-dom
"
;
import
{
Link
,
Redirect
}
from
"
react-router-dom
"
;
import
moment
from
"
moment
"
;
import
styles
from
"
./menu.module.scss
"
;
import
styles
from
"
./menu.module.scss
"
;
const
Menu
=
()
=>
{
const
Menu
=
()
=>
{
...
@@ -35,7 +36,7 @@ const Menu = () => {
...
@@ -35,7 +36,7 @@ const Menu = () => {
<
/Link
>
<
/Link
>
<
/div
>
<
/div
>
<
div
className
=
"
d-flex flex-column
"
>
<
div
className
=
"
d-flex flex-column
"
>
<
Link
className
=
"
text-dark text-decoration-none
"
to
=
"
/schedule
"
><
i
className
=
"
bi bi-check
"
><
/i>일정</
Link
>
<
Link
className
=
"
text-dark text-decoration-none
"
to
=
{
`
/schedule
/
${
moment
().
format
(
"
YYYY-MM-DD
"
)}
`
}
><
i
className
=
"
bi bi-check
"
><
/i>일정</
Link
>
<
Link
className
=
"
text-dark text-decoration-none
"
to
=
"
/studyplan
"
><
i
className
=
"
bi bi-check
"
><
/i>학업별 계획</
Link
>
<
Link
className
=
"
text-dark text-decoration-none
"
to
=
"
/studyplan
"
><
i
className
=
"
bi bi-check
"
><
/i>학업별 계획</
Link
>
<
/div
>
<
/div
>
<
p
className
=
{
`position-absolute bottom-0 text-dark
${
styles
.
logout
}
`
}
>
로그아웃
<
/p
>
<
p
className
=
{
`position-absolute bottom-0 text-dark
${
styles
.
logout
}
`
}
>
로그아웃
<
/p
>
...
...
client/src/components/Modal/DatePickerModal.js
0 → 100644
View file @
ff9dad79
import
{
useState
,
useEffect
}
from
"
react
"
;
import
moment
from
'
moment
'
;
const
DatePickerModal
=
({
initialDate
,
changeDate
,
setChangeDate
,
show
,
setShow
})
=>
{
const
[
date
,
setDate
]
=
useState
({
year
:
moment
(
changeDate
).
get
(
'
year
'
),
month
:
moment
(
changeDate
).
get
(
'
month
'
)
+
1
})
const
[
year
,
setYear
]
=
useState
({
start
:
moment
(
initialDate
).
get
(
'
year
'
)
-
3
,
end
:
moment
(
initialDate
).
get
(
'
year
'
)
+
3
})
const
month
=
moment
(
initialDate
).
get
(
'
month
'
)
+
1
useEffect
(()
=>
{
setDate
({
year
:
moment
(
changeDate
).
get
(
'
year
'
),
month
:
moment
(
changeDate
).
get
(
'
month
'
)
+
1
})
},
[
changeDate
])
function
up
(
e
)
{
const
{
id
}
=
e
.
target
if
(
id
===
"
year
"
)
{
if
(
date
[
id
]
<
year
.
end
)
setDate
({
...
date
,
[
id
]:
date
[
id
]
+
1
})
}
else
{
if
(
date
[
id
]
===
12
)
setDate
({
...
date
,
[
id
]:
1
})
else
setDate
({
...
date
,
[
id
]:
date
[
id
]
+
1
})
}
}
function
down
(
e
)
{
const
{
id
}
=
e
.
target
if
(
id
===
"
year
"
)
{
if
(
date
[
id
]
>
year
.
start
)
setDate
({
...
date
,
[
id
]:
date
[
id
]
-
1
})
}
else
{
if
(
date
[
id
]
===
1
)
setDate
({
...
date
,
[
id
]:
12
})
else
setDate
({
...
date
,
[
id
]:
date
[
id
]
-
1
})
}
}
function
cancel
()
{
setDate
({
year
:
moment
(
changeDate
).
get
(
'
year
'
),
month
:
moment
(
changeDate
).
get
(
'
month
'
)
+
1
})
setShow
(
false
)
}
function
handleClick
()
{
if
(
date
.
year
===
year
.
start
)
{
if
(
month
>
date
.
month
)
alert
(
"
선택하신 날짜는 유효하지 않습니다. 다시 선택해주세요.
"
)
else
{
let
dateStr
=
date
.
year
+
"
-
"
+
date
.
month
+
"
-01
"
setChangeDate
(
moment
(
dateStr
).
format
(
"
YYYY-MM-DD
"
))
setShow
(
false
)
}
}
else
if
(
date
.
year
===
year
.
end
)
{
if
(
month
<
date
.
month
)
alert
(
"
선택하신 날짜는 유효하지 않습니다. 다시 선택해주세요.
"
)
else
{
let
dateStr
=
date
.
year
+
"
-
"
+
date
.
month
+
"
-01
"
setChangeDate
(
moment
(
dateStr
).
format
(
"
YYYY-MM-DD
"
))
setShow
(
false
)
}
}
else
{
let
dateStr
=
date
.
year
+
"
-
"
+
date
.
month
+
"
-01
"
setChangeDate
(
moment
(
dateStr
).
format
(
"
YYYY-MM-DD
"
))
setShow
(
false
)
}
}
return
(
<>
{
show
?
<
div
className
=
"
offcanvas-backdrop fade show
"
><
/div> : null
}
<
div
className
=
{
"
offcanvas offcanvas-bottom
"
+
(
show
?
"
visible show
"
:
"
invisiblel
"
)}
tabIndex
=
"
-1
"
id
=
"
datePicker
"
aria
-
labelledby
=
"
datePicker
"
>
<
div
className
=
"
offcanvas-body small py-2
"
>
<
div
className
=
"
d-flex my-3
"
>
<
div
className
=
"
col-6 d-flex flex-column justify-content-between align-items-center fs-4
"
>
<
i
className
=
"
bi bi-caret-up-fill
"
id
=
"
year
"
onClick
=
{
up
}
><
/i
>
{
date
.
year
}
<
i
className
=
"
bi bi-caret-down-fill
"
id
=
"
year
"
onClick
=
{
down
}
><
/i
>
<
/div
>
<
div
className
=
"
col-6 d-flex flex-column justify-content-between align-items-center fs-4
"
>
<
i
className
=
"
bi bi-caret-up-fill
"
id
=
"
month
"
onClick
=
{
up
}
><
/i
>
{
date
.
month
<
10
?
"
0
"
+
date
.
month
:
date
.
month
}
<
i
className
=
"
bi bi-caret-down-fill
"
id
=
"
month
"
onClick
=
{
down
}
><
/i
>
<
/div
>
<
/div
>
<
div
className
=
"
d-flex pt-2 border-top border-dark
"
>
<
div
className
=
"
col-6
"
data
-
bs
-
dismiss
=
"
offcanvas
"
>
<
p
className
=
"
text-center fs-6 py-1 mb-0
"
onClick
=
{
cancel
}
>
취소
<
/p
>
<
/div
>
<
div
className
=
"
col-6
"
data
-
bs
-
dismiss
=
"
offcanvas
"
onClick
=
{
handleClick
}
>
<
p
className
=
"
text-center fs-6 py-1 mb-0
"
>
완료
<
/p
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/
>
)
}
export
default
DatePickerModal
\ No newline at end of file
client/src/pages/HomePage.js
View file @
ff9dad79
import
Menu
from
"
../components/Menu/Menu.js
"
;
import
Menu
from
"
../components/Menu/Menu.js
"
;
import
CalendarBtn
from
"
../components/
Buttons/CalendarBtn
.js
"
;
import
Monthly
from
"
../components/
Calendar/Monthly
.js
"
;
import
Footer
from
"
../components/Footer.js
"
;
import
Footer
from
"
../components/Footer.js
"
;
const
HomePage
=
()
=>
{
const
HomePage
=
()
=>
{
return
(
return
(
<>
<>
<
Menu
/>
<
Menu
/>
<
div
className
=
"
position-absolute
"
style
=
{{
top
:
"
9px
"
,
right
:
"
8px
"
}}
>
<
Monthly
/>
<
CalendarBtn
date
=
"
2021-10-28
"
/>
<
/div
>
<
Footer
pathname
=
"
schedule/edit
"
/>
<
Footer
pathname
=
"
schedule/edit
"
/>
<
/
>
<
/
>
)
)
...
...
client/src/scss/custom.scss
View file @
ff9dad79
...
@@ -64,4 +64,61 @@ button {
...
@@ -64,4 +64,61 @@ button {
#box
{
#box
{
width
:
400px
;
width
:
400px
;
}
}
}
.fc
{
margin-top
:
1em
;
&
a
{
text-decoration
:
none
;
}
&
table
>
*
{
border-style
:
none
;
border-width
:
0
;
}
&
.fc-prev-button
,
&
.fc-next-button
{
background-color
:
#fff
;
border
:
0
;
color
:
#000
;
&
:focus
{
box-shadow
:
none
;
}
}
&
.fc-myCustomButton-button
{
background-color
:
#fff
;
border
:
0
;
color
:
#000
;
font-size
:
1
.4em
;
padding
:
0
;
&
:focus
{
box-shadow
:
none
;
}
}
&
.fc-day-today
{
background-color
:
#fff
!
important
;
&
.fc-daygrid-day-number
{
border-radius
:
13px
;
background-color
:
crimson
;
color
:
#fff
;
}
}
&
.fc-day-other
{
color
:
gray
;
}
&
td
.fc-day-sat
:not
(
.fc-day-other
)
{
color
:
#0000FF
;
}
&
td
.fc-day-sun
:not
(
.fc-day-other
)
{
color
:
#FF0000
;
}
}
}
\ 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