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