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
f3271b71
Commit
f3271b71
authored
Nov 12, 2021
by
Kim, Subin
Browse files
TodoList 완성
parent
448f0334
Changes
6
Hide whitespace changes
Inline
Side-by-side
client/src/components/Calendar/Weekly.js
View file @
f3271b71
...
...
@@ -27,13 +27,13 @@ const Weekly = () => {
const
[
error
,
setError
]
=
useState
(
""
)
const
calendarRef
=
useRef
(
null
)
let
calendar
=
null
useEffect
(()
=>
{
if
(
calendarRef
&&
calendarRef
.
current
)
{
calendar
=
calendarRef
.
current
.
getApi
()
}
})
useEffect
(()
=>
{
setChooseDate
(
date
)
getTodoList
(
date
)
...
...
client/src/components/Form/form.module.scss
View file @
f3271b71
...
...
@@ -44,4 +44,10 @@
&
:focus
{
border-color
:
crimson
;
}
}
.list
{
height
:
60vh
;
overflow-y
:
auto
;
padding-bottom
:
4em
;
}
\ No newline at end of file
client/src/components/Modal/TodoModal.js
View file @
f3271b71
...
...
@@ -5,30 +5,32 @@ import catchErrors from "../../utils/catchErrors";
import
moment
from
"
moment
"
;
import
styles
from
"
./modal.module.scss
"
;
const
TodoModal
=
({
curDate
,
selectTodo
=
""
})
=>
{
const
TodoModal
=
({
curDate
,
selectTodo
,
clicked
,
setClicked
})
=>
{
const
{
user
}
=
useAuth
()
const
[
todo
,
setTodo
]
=
useState
({
todoTitle
:
""
,
todoDate
:
moment
(
curDate
).
format
(
"
YYYY-MM-DD
"
)
})
const
[
error
,
setError
]
=
useState
(
""
)
;
const
[
error
,
setError
]
=
useState
(
""
)
useEffect
(()
=>
{
setTodo
({
...
todo
,
todoDate
:
curDate
})
},
[
c
urDate
])
if
(
clicked
)
setTodo
({
...
todo
,
...
selectTodo
})
},
[
c
licked
])
useEffect
(()
=>
{
if
(
selectTodo
)
{
console
.
log
(
"
selectTodo 값 변경으로 실행
"
)
setTodo
({
...
todo
,
...
selectTodo
})
}
},
[
selectTodo
])
setTodo
({
...
todo
,
todoDate
:
curDate
})
},
[
curDate
])
const
handleChange
=
(
e
)
=>
{
const
{
name
,
value
}
=
e
.
target
setTodo
({
...
todo
,
[
name
]:
value
})
}
function
handleClick
()
{
setTodo
({
todoTitle
:
""
,
todoDate
:
""
})
setClicked
(
false
)
}
async
function
handleSubmit
()
{
try
{
setError
(
""
)
...
...
@@ -39,6 +41,7 @@ const TodoModal = ({ curDate, selectTodo = "" }) => {
await
todoApi
.
submit
(
todo
,
user
.
id
)
alert
(
"
해당 할일이 성공적으로 등록되었습니다.
"
)
}
setClicked
(
false
)
window
.
location
.
reload
()
}
catch
(
error
)
{
catchErrors
(
error
,
setError
)
...
...
@@ -60,13 +63,13 @@ const TodoModal = ({ curDate, selectTodo = "" }) => {
<
div
className
=
"
d-flex justify-content-between mt-4
"
>
<
label
className
=
"
col-2 col-form-label ms-2
"
>
날짜
<
/label
>
<
div
className
=
"
col-8 d-flex align-items-center
"
>
<
input
type
=
"
date
"
className
=
"
form-control form-control-sm
"
name
=
"
todoDate
"
onChange
=
{
handleChange
}
value
=
{
todo
.
todoDate
}
/
>
<
input
type
=
"
date
"
className
=
{
`
form-control form-control-sm
shadow-none
${
styles
.
dateInput
}
`
}
name
=
"
todoDate
"
onChange
=
{
handleChange
}
value
=
{
todo
.
todoDate
}
/
>
<
/div
>
<
/div
>
<
/div
>
<
div
className
=
"
modal-footer bg-white p-1
"
>
<
button
type
=
"
button
"
className
=
"
btn btn-secondary btn-sm
"
data
-
bs
-
dismiss
=
"
modal
"
onClick
=
{
()
=>
setTodo
({
todoTitle
:
""
,
todoDate
:
""
})
}
>
취소
<
/button
>
data
-
bs
-
dismiss
=
"
modal
"
onClick
=
{
handleClick
}
>
취소
<
/button
>
<
button
type
=
"
button
"
className
=
"
btn btn-crimson btn-sm
"
onClick
=
{
handleSubmit
}
>
{
selectTodo
?
"
수정
"
:
"
확인
"
}
<
/button
>
<
/div
>
<
/div
>
...
...
client/src/components/Modal/modal.module.scss
View file @
f3271b71
...
...
@@ -19,6 +19,14 @@
}
}
.dateInput
{
font-size
:
0
.75rem
;
&
:focus
{
border-color
:
crimson
;
}
}
.cursor
{
cursor
:
pointer
;
}
\ No newline at end of file
client/src/components/TodoList.js
View file @
f3271b71
...
...
@@ -13,7 +13,8 @@ const TodoList = () => {
const
{
date
}
=
useParams
()
const
[
todoList
,
setTodoList
]
=
useState
([])
const
[
selectTodo
,
setSelectTodo
]
=
useState
(
null
)
const
[
error
,
setError
]
=
useState
(
""
);
const
[
clicked
,
setClicked
]
=
useState
(
false
)
const
[
error
,
setError
]
=
useState
(
""
)
useEffect
(()
=>
{
getAll
()
...
...
@@ -29,12 +30,26 @@ const TodoList = () => {
}
}
async
function
checkFn
(
e
,
todoId
)
{
try
{
setError
(
""
)
const
check_v
=
e
.
target
.
value
===
"
true
"
?
true
:
false
await
todoApi
.
edit
({
id
:
todoId
,
done
:
check_v
},
user
.
id
)
alert
(
"
해당 변경사항이 정상적으로 저장되었습니다.
"
)
window
.
location
.
reload
()
// getAll()
// getTodoList()
}
catch
(
error
)
{
catchErrors
(
error
,
setError
)
}
}
async
function
delayTodo
()
{
try
{
setError
(
""
)
const
nextDate
=
moment
(
date
).
add
(
1
,
'
day
'
).
format
(
"
YYYY-MM-DD
"
)
await
todoApi
.
edit
({
id
:
selectTodo
.
id
,
todoDate
:
nextDate
},
user
.
id
)
getAll
()
window
.
location
.
reload
()
}
catch
(
error
)
{
catchErrors
(
error
,
setError
)
}
...
...
@@ -45,28 +60,32 @@ const TodoList = () => {
setError
(
""
)
await
todoApi
.
remove
(
todoId
,
user
.
id
)
alert
(
"
해당 할일이 성공적으로 삭제되었습니다.
"
)
getAll
()
window
.
location
.
reload
()
}
catch
(
error
)
{
catchErrors
(
error
,
setError
)
}
}
return
(
<
div
className
=
{
"
mt-3
"
+
(
todoList
.
length
?
"
d-flex flex-column
"
:
"
d-block
"
)}
>
{
todoList
.
length
!==
0
?
todoList
.
map
((
todo
,
idx
)
=>
<
div
className
=
"
d-flex
"
>
<
div
className
=
"
d-flex align-items-center
"
style
=
{{
width
:
"
75%
"
}}
>
<
input
className
=
{
`form-check-input rounded-0 shadow-none mt-0 me-2
${
styles
.
checkBox
}
`
}
type
=
"
checkbox
"
checked
=
{
todo
.
done
}
/
>
<
label
className
=
"
form-check-label fs-5 pe-2 text-nowrap
"
style
=
{{
overflow
:
"
hidden
"
,
textOverflow
:
"
ellipsis
"
}}
>
{
todo
.
todoTitle
}
<
/label
>
<
/div
>
<
div
className
=
"
d-flex justify-content-between
"
style
=
{{
cursor
:
"
pointer
"
,
width
:
"
25%
"
}}
>
<
i
className
=
"
bi bi-arrow-right fs-5
"
data
-
bs
-
toggle
=
"
modal
"
data
-
bs
-
target
=
"
#postmodal
"
onClick
=
{()
=>
setSelectTodo
(
todo
)}
><
/i
>
<
i
className
=
"
bi bi-pencil-square fs-5
"
data
-
bs
-
toggle
=
"
modal
"
data
-
bs
-
target
=
"
#todomodal
"
onClick
=
{()
=>
setSelectTodo
(
todo
)}
><
/i
>
<
i
className
=
"
bi bi-trash fs-5
"
onClick
=
{()
=>
delTodo
(
todo
.
id
)}
><
/i
>
<
/div
>
<
/div>
)
: <p className="text-center">등록된 할일이 없습니다.</
p
>
}
<
TodoPostModal
handleClick
=
{
delayTodo
}
/
>
<
TodoModal
curDate
=
{
date
}
selectTodo
=
{
selectTodo
}
/
>
<
div
className
=
{
`mt-3
${
styles
.
list
}
`
}
>
<
div
className
=
{
todoList
.
length
?
"
d-flex flex-column
"
:
"
d-block
"
}
>
{
todoList
.
length
!==
0
?
todoList
.
map
((
todo
,
idx
)
=>
<
div
key
=
{
idx
}
className
=
"
d-flex mb-1
"
>
<
div
className
=
"
d-flex align-items-center
"
style
=
{{
width
:
"
75%
"
}}
>
<
div
className
=
"
col d-flex align-items-center
"
>
<
input
className
=
{
`form-check-input rounded-0 shadow-none mt-0
${
styles
.
checkBox
}
`
}
type
=
"
checkbox
"
id
=
{
"
todoCheck
"
+
idx
}
value
=
{
todo
.
done
}
checked
=
{
todo
.
done
}
onClick
=
{(
e
)
=>
checkFn
(
e
,
todo
.
id
)}
/
>
<
/div
>
<
label
className
=
"
col-11 form-check-label fs-5 pe-1 text-nowrap
"
style
=
{{
overflow
:
"
hidden
"
,
textOverflow
:
"
ellipsis
"
}}
>
{
todo
.
todoTitle
}
<
/label
>
<
/div
>
<
div
className
=
"
d-flex justify-content-between
"
style
=
{{
cursor
:
"
pointer
"
,
width
:
"
25%
"
}}
>
<
i
className
=
"
bi bi-arrow-right fs-5
"
data
-
bs
-
toggle
=
"
modal
"
data
-
bs
-
target
=
"
#postmodal
"
onClick
=
{()
=>
setSelectTodo
(
todo
)}
><
/i
>
<
i
className
=
"
bi bi-pencil-square fs-5
"
data
-
bs
-
toggle
=
"
modal
"
data
-
bs
-
target
=
"
#todomodal
"
onClick
=
{()
=>
{
setSelectTodo
(
todo
);
setClicked
(
true
)
}}
><
/i
>
<
i
className
=
"
bi bi-trash fs-5
"
onClick
=
{()
=>
delTodo
(
todo
.
id
)}
><
/i
>
<
/div
>
<
/div>
)
: <p className="text-center">등록된 할일이 없습니다.</
p
>
}
<
TodoPostModal
handleClick
=
{
delayTodo
}
/
>
<
TodoModal
curDate
=
{
date
}
selectTodo
=
{
selectTodo
}
clicked
=
{
clicked
}
setClicked
=
{
setClicked
}
/
>
<
/div
>
<
/div
>
)
}
...
...
server/controllers/todo.controller.js
View file @
f3271b71
...
...
@@ -6,7 +6,6 @@ const { Op } = sequelize
const
findbyDate
=
async
(
req
,
res
)
=>
{
try
{
// Todo 페이지
console
.
log
(
"
Todo 페이지에서의 요청 처리
"
)
const
userId
=
req
.
userId
const
{
date
}
=
req
.
query
const
nonCheck
=
await
Todo
.
findAll
({
where
:
{
[
Op
.
and
]:
[{
done
:
false
},
{
date
:
{
[
Op
.
eq
]:
date
}
},
{
userId
:
userId
}]
},
attributes
:
[
'
id
'
,
[
'
title
'
,
'
todoTitle
'
],
[
'
date
'
,
'
todoDate
'
],
'
done
'
],
order
:
[[
'
updatedAt
'
,
"
DESC
"
]]
})
...
...
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