TodoList 완성

client/src/components/Calendar/Weekly.js

@@ -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

@@ -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

@@ -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 })
-  }, [curDate])
+    if (clicked) setTodo({ ...todo, ...selectTodo })
+  }, [clicked])
 
   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

@@ -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

@@ -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

@@ -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"]] })