Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
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
{
useState
,
useEffect
}
from
"
react
"
;
import
{
Redirect
}
from
"
react-router-dom
"
;
import
BtnGroup
from
"
../Buttons/BtnGroup.js
"
;
import
BtnGroup
from
"
../Buttons/BtnGroup.js
"
;
import
catchErrors
from
"
../../utils/catchErrors.js
"
;
import
catchErrors
from
"
../../utils/catchErrors.js
"
;
import
styles
from
"
./form.module.scss
"
;
import
styles
from
"
./form.module.scss
"
;
const
ScheduleForm
=
()
=>
{
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
(
""
)
const
[
error
,
setError
]
=
useState
(
""
)
useEffect
(()
=>
{
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
)
{
async
function
handleSubmit
(
e
)
{
e
.
preventDefault
()
e
.
preventDefault
()
try
{
try
{
setError
(
""
)
setError
(
""
)
if
(
schedule
.
allDay
===
"
on
"
)
setSchedule
({
...
schedule
,
startTime
:
'
00:00
'
,
endTime
:
'
23:59
'
})
setSuccess
(
true
)
}
catch
(
error
)
{
}
catch
(
error
)
{
catchErrors
(
error
,
setError
)
catchErrors
(
error
,
setError
)
}
}
}
}
if
(
success
)
{
alert
(
'
해당 일정이 성공적으로 등록되었습니다.
'
)
return
<
Redirect
to
=
"
/home
"
/>
}
return
(
return
(
<
form
className
=
"
pt-5
"
onSubmit
=
{
handleSubmit
}
>
<
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
"
>
<
div
className
=
"
d-flex mb-4
"
>
<
label
className
=
"
col col-form-label align-self-center py-0
"
>
시작
<
/label
>
<
label
className
=
"
col col-form-label align-self-center py-0
"
>
시작
<
/label
>
<
div
className
=
"
col-5
"
>
<
div
className
=
{
schedule
.
allDay
===
"
on
"
?
"
col-7
"
:
"
col-5
"
}
>
<
input
className
=
{
`form-control shadow-none
${
styles
.
dateInput
}
`
}
type
=
"
date
"
aria
-
label
=
"
startDate
"
/>
<
input
className
=
{
`form-control shadow-none
${
styles
.
dateInput
}
`
}
type
=
"
date
"
name
=
"
startDate
"
aria
-
label
=
"
startDate
"
onChange
=
{
handleChange
}
/
>
<
/div
>
<
/div
>
<
div
className
=
"
col-5
"
>
<
div
className
=
{
"
col-5
"
+
(
schedule
.
allDay
===
"
on
"
?
"
d-none
"
:
"
d-block
"
)}
>
<
input
className
=
{
`form-control shadow-none
${
styles
.
dateInput
}
`
}
type
=
"
time
"
aria
-
label
=
"
startTime
"
/>
<
input
className
=
{
`form-control shadow-none
${
styles
.
dateInput
}
`
}
type
=
"
time
"
name
=
"
startTime
"
aria
-
label
=
"
startTime
"
onChange
=
{
handleChange
}
/
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
div
className
=
"
d-flex mb-3
"
>
<
div
className
=
"
d-flex mb-3
"
>
<
label
className
=
"
col col-form-label align-self-center py-0
"
>
종료
<
/label
>
<
label
className
=
"
col col-form-label align-self-center py-0
"
>
종료
<
/label
>
<
div
className
=
"
col-5
"
>
<
div
className
=
{
schedule
.
allDay
===
"
on
"
?
"
col-7
"
:
"
col-5
"
}
>
<
input
className
=
{
`form-control shadow-none
${
styles
.
dateInput
}
`
}
type
=
"
date
"
aria
-
label
=
"
endDate
"
/>
<
input
className
=
{
`form-control shadow-none
${
styles
.
dateInput
}
`
}
type
=
"
date
"
name
=
"
endDate
"
value
=
{
schedule
.
endDate
}
aria
-
label
=
"
endDate
"
onChange
=
{
handleChange
}
/
>
<
/div
>
<
/div
>
<
div
className
=
"
col-5
"
>
<
div
className
=
{
"
col-5
"
+
(
schedule
.
allDay
===
"
on
"
?
"
d-none
"
:
"
d-block
"
)}
>
<
input
className
=
{
`form-control shadow-none
${
styles
.
dateInput
}
`
}
type
=
"
time
"
aria
-
label
=
"
endTime
"
/>
<
input
className
=
{
`form-control shadow-none
${
styles
.
dateInput
}
`
}
type
=
"
time
"
name
=
"
endTime
"
value
=
{
schedule
.
endTime
}
aria
-
label
=
"
endTime
"
onChange
=
{
handleChange
}
/
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
div
className
=
"
d-flex justify-content-end form-check mb-4
"
>
<
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
>
<
label
className
=
"
form-check-label ms-2
"
htmlFor
=
"
allDay
"
>
하루
종일
<
/label
>
<
/div
>
<
/div
>
<
div
className
=
"
d-flex justify-content-between align-items-center mb-4
"
>
<
div
className
=
"
d-flex justify-content-between align-items-center mb-4
"
>
<
i
className
=
"
col bi bi-geo-alt fs-3
"
><
/i
>
<
i
className
=
"
col bi bi-geo-alt fs-3
"
><
/i
>
<
div
className
=
"
col-10
"
>
<
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
>
<
/div
>
<
div
className
=
"
d-flex justify-content-between mb-5
"
>
<
div
className
=
"
d-flex justify-content-between mb-5
"
>
<
i
className
=
"
col bi bi-journal-text fs-3
"
><
/i
>
<
i
className
=
"
col bi bi-journal-text fs-3
"
><
/i
>
<
div
className
=
"
col-10
"
>
<
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
>
<
/div
>
<
/div
>
<
BtnGroup
/>
<
BtnGroup
disabled
=
{
disabled
}
/
>
<
/form
>
<
/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