Commit f3271b71 authored by Kim, Subin's avatar Kim, Subin
Browse files

TodoList 완성

parent 448f0334
...@@ -45,3 +45,9 @@ ...@@ -45,3 +45,9 @@
border-color: crimson; border-color: crimson;
} }
} }
.list {
height: 60vh;
overflow-y: auto;
padding-bottom: 4em;
}
\ No newline at end of file
...@@ -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 })
}, [curDate]) }, [clicked])
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>
......
...@@ -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
...@@ -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}`}>
<div className={todoList.length ? "d-flex flex-column" : "d-block"}>
{todoList.length !== 0 ? {todoList.length !== 0 ?
todoList.map((todo, idx) => <div className="d-flex"> todoList.map((todo, idx) => <div key={idx} className="d-flex mb-1">
<div className="d-flex align-items-center" style={{ width: "75%" }}> <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} /> <div className="col d-flex align-items-center">
<label className="form-check-label fs-5 pe-2 text-nowrap" style={{ overflow: "hidden", textOverflow: "ellipsis" }}>{todo.todoTitle}</label> <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>
<div className="d-flex justify-content-between" style={{ cursor: "pointer", width: "25%" }}> <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-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-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> <i className="bi bi-trash fs-5" onClick={() => delTodo(todo.id)}></i>
</div> </div>
</div>) : <p className="text-center">등록된 할일이 없습니다.</p>} </div>) : <p className="text-center">등록된 할일이 없습니다.</p>}
<TodoPostModal handleClick={delayTodo} /> <TodoPostModal handleClick={delayTodo} />
<TodoModal curDate={date} selectTodo={selectTodo} /> <TodoModal curDate={date} selectTodo={selectTodo} clicked={clicked} setClicked={setClicked} />
</div>
</div> </div>
) )
} }
......
...@@ -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"]] })
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment