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
2fe326b4
Commit
2fe326b4
authored
Oct 13, 2021
by
Kim, Subin
Browse files
ScheduleForm UI 완성
parent
80e70598
Changes
1
Hide whitespace changes
Inline
Side-by-side
client/src/components/Form/ScheduleForm.js
View file @
2fe326b4
import
{
useState
,
useEffect
}
from
"
react
"
;
import
{
Redirect
}
from
"
react-router-dom
"
;
import
BtnGroup
from
"
../Buttons/BtnGroup.js
"
;
import
catchErrors
from
"
../../utils/catchErrors.js
"
;
import
styles
from
"
./form.module.scss
"
;
const
ScheduleForm
=
()
=>
{
const
[
schedule
,
setSchedule
]
=
useState
({})
const
[
schedule
,
setSchedule
]
=
useState
({
title
:
""
,
startDate
:
""
,
endDate
:
""
,
startTime
:
""
,
endTime
:
""
,
allDay
:
""
,
location
:
""
,
memo
:
""
})
const
[
disabled
,
setDisabled
]
=
useState
(
true
)
const
[
success
,
setSuccess
]
=
useState
(
false
)
const
[
error
,
setError
]
=
useState
(
""
)
useEffect
(()
=>
{
},
[])
let
isMounted
=
true
;
const
checkInfo
=
{
title
:
schedule
.
title
,
startDate
:
schedule
.
startDate
,
endDate
:
schedule
.
endDate
}
if
(
schedule
.
allDay
!==
"
on
"
)
{
checkInfo
.
startTime
=
schedule
.
startTime
checkInfo
.
endTime
=
schedule
.
endTime
}
else
{
delete
checkInfo
.
startTime
delete
checkInfo
.
endTime
}
if
(
isMounted
)
{
const
isSchedule
=
Object
.
values
(
checkInfo
).
every
((
el
)
=>
Boolean
(
el
));
isSchedule
?
setDisabled
(
false
)
:
setDisabled
(
true
);
}
return
()
=>
{
isMounted
=
false
;
};
},
[
schedule
])
function
handleChange
(
e
)
{
const
{
name
,
value
}
=
e
.
target
if
(
name
===
"
allDay
"
)
{
schedule
.
allDay
!==
"
on
"
?
setSchedule
({
...
schedule
,
[
name
]:
value
})
:
setSchedule
({
...
schedule
,
[
name
]:
"
off
"
})
}
else
if
(
name
===
"
startDate
"
)
{
setSchedule
({
...
schedule
,
[
name
]:
value
,
endDate
:
value
})
}
else
if
(
name
===
"
startTime
"
)
{
setSchedule
({
...
schedule
,
[
name
]:
value
,
endTime
:
value
})
}
else
setSchedule
({
...
schedule
,
[
name
]:
value
})
}
async
function
handleSubmit
(
e
)
{
e
.
preventDefault
()
try
{
setError
(
""
)
if
(
schedule
.
allDay
===
"
on
"
)
setSchedule
({
...
schedule
,
startTime
:
'
00:00
'
,
endTime
:
'
23:59
'
})
setSuccess
(
true
)
}
catch
(
error
)
{
catchErrors
(
error
,
setError
)
}
}
}
if
(
success
)
{
alert
(
'
해당 일정이 성공적으로 등록되었습니다.
'
)
return
<
Redirect
to
=
"
/home
"
/>
}
return
(
<
form
className
=
"
pt-5
"
onSubmit
=
{
handleSubmit
}
>
<
input
className
=
{
`form-control form-control-lg shadow-none px-1 mb-5
${
styles
.
textInput
}
`
}
type
=
"
text
"
placeholder
=
"
제목
"
aria
-
label
=
"
title
"
autoFocus
/>
<
input
className
=
{
`form-control form-control-lg shadow-none px-1 mb-5
${
styles
.
textInput
}
`
}
type
=
"
text
"
name
=
"
title
"
placeholder
=
"
제목
"
aria
-
label
=
"
title
"
onChange
=
{
handleChange
}
autoFocus
/>
<
div
className
=
"
d-flex mb-4
"
>
<
label
className
=
"
col col-form-label align-self-center py-0
"
>
시작
<
/label
>
<
div
className
=
"
col-5
"
>
<
input
className
=
{
`form-control shadow-none
${
styles
.
dateInput
}
`
}
type
=
"
date
"
aria
-
label
=
"
startDate
"
/>
<
div
className
=
{
schedule
.
allDay
===
"
on
"
?
"
col-7
"
:
"
col-5
"
}
>
<
input
className
=
{
`form-control shadow-none
${
styles
.
dateInput
}
`
}
type
=
"
date
"
name
=
"
startDate
"
aria
-
label
=
"
startDate
"
onChange
=
{
handleChange
}
/
>
<
/div
>
<
div
className
=
"
col-5
"
>
<
input
className
=
{
`form-control shadow-none
${
styles
.
dateInput
}
`
}
type
=
"
time
"
aria
-
label
=
"
startTime
"
/>
<
div
className
=
{
"
col-5
"
+
(
schedule
.
allDay
===
"
on
"
?
"
d-none
"
:
"
d-block
"
)}
>
<
input
className
=
{
`form-control shadow-none
${
styles
.
dateInput
}
`
}
type
=
"
time
"
name
=
"
startTime
"
aria
-
label
=
"
startTime
"
onChange
=
{
handleChange
}
/
>
<
/div
>
<
/div
>
<
div
className
=
"
d-flex mb-3
"
>
<
label
className
=
"
col col-form-label align-self-center py-0
"
>
종료
<
/label
>
<
div
className
=
"
col-5
"
>
<
input
className
=
{
`form-control shadow-none
${
styles
.
dateInput
}
`
}
type
=
"
date
"
aria
-
label
=
"
endDate
"
/>
<
div
className
=
{
schedule
.
allDay
===
"
on
"
?
"
col-7
"
:
"
col-5
"
}
>
<
input
className
=
{
`form-control shadow-none
${
styles
.
dateInput
}
`
}
type
=
"
date
"
name
=
"
endDate
"
value
=
{
schedule
.
endDate
}
aria
-
label
=
"
endDate
"
onChange
=
{
handleChange
}
/
>
<
/div
>
<
div
className
=
"
col-5
"
>
<
input
className
=
{
`form-control shadow-none
${
styles
.
dateInput
}
`
}
type
=
"
time
"
aria
-
label
=
"
endTime
"
/>
<
div
className
=
{
"
col-5
"
+
(
schedule
.
allDay
===
"
on
"
?
"
d-none
"
:
"
d-block
"
)}
>
<
input
className
=
{
`form-control shadow-none
${
styles
.
dateInput
}
`
}
type
=
"
time
"
name
=
"
endTime
"
value
=
{
schedule
.
endTime
}
aria
-
label
=
"
endTime
"
onChange
=
{
handleChange
}
/
>
<
/div
>
<
/div
>
<
div
className
=
"
d-flex justify-content-end form-check mb-4
"
>
<
input
className
=
{
`form-check-input shadow-none
${
styles
.
checkBox
}
`
}
type
=
"
checkbox
"
value
=
""
id
=
"
allDay
"
/>
<
input
className
=
{
`form-check-input shadow-none
${
styles
.
checkBox
}
`
}
type
=
"
checkbox
"
id
=
"
allDay
"
name
=
"
allDay
"
onChange
=
{
handleChange
}
/
>
<
label
className
=
"
form-check-label ms-2
"
htmlFor
=
"
allDay
"
>
하루
종일
<
/label
>
<
/div
>
<
div
className
=
"
d-flex justify-content-between align-items-center mb-4
"
>
<
i
className
=
"
col bi bi-geo-alt fs-3
"
><
/i
>
<
div
className
=
"
col-10
"
>
<
input
className
=
{
`form-control shadow-none px-1
${
styles
.
textInput
}
`
}
type
=
"
text
"
placeholder
=
"
장소
"
aria
-
label
=
"
location
"
/>
<
input
className
=
{
`form-control shadow-none px-1
${
styles
.
textInput
}
`
}
type
=
"
text
"
name
=
"
location
"
placeholder
=
"
장소
"
aria
-
label
=
"
location
"
onChange
=
{
handleChange
}
/
>
<
/div
>
<
/div
>
<
div
className
=
"
d-flex justify-content-between mb-5
"
>
<
i
className
=
"
col bi bi-journal-text fs-3
"
><
/i
>
<
div
className
=
"
col-10
"
>
<
textarea
className
=
{
`form-control shadow-none
${
styles
.
textArea
}
`
}
rows
=
"
5
"
><
/textarea
>
<
textarea
className
=
{
`form-control shadow-none
${
styles
.
textArea
}
`
}
name
=
"
memo
"
rows
=
"
5
"
onChange
=
{
handleChange
}
><
/textarea
>
<
/div
>
<
/div
>
<
BtnGroup
/>
<
BtnGroup
disabled
=
{
disabled
}
/
>
<
/form
>
)
}
...
...
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