todo menu로 불러옴

client/src/components/Menu/Menu.js

@@ -8,7 +8,7 @@ import styles from "./menu.module.scss";
 
 const Menu = () => {
     const { user, logout } = useAuth();
-    const [todoList, setTodoList] = useState([])
+    const [todoList, setTodoList] = useState({ percent: 0, list: [] })
     const [error, setError] = useState("");
 
     useEffect(() => {
@@ -20,7 +20,7 @@ const Menu = () => {
             setError("")
             const result = await todoApi.getTodopercent(user.id, moment().format("YYYY-MM-DD"))
             console.log("client resList",result)
-            setTodoList(result)
+            setTodoList({...todoList, ...result})
         } catch (error) {
             catchErrors(error, setError)
         }
@@ -36,23 +36,17 @@ const Menu = () => {
                     <button type="button" className={`btn-close btn-close-white btn-lg position-absolute ${styles.close}`} data-bs-toggle="collapse" data-bs-target="#menuContent" aria-controls="menuContent" aria-expanded="true" aria-label="menu"></button>
                     <div className="d-flex flex-column align-items-center text-white py-5" style={{ backgroundColor: "crimson" }}>
                         <h1 className="my-3">{user.name} 님</h1>
-                        <h2 className="my-2">오늘의 목표 95% 달성!</h2>
+                        <h2 className="my-2">오늘의 목표 {todoList.percent}% 달성!</h2>
                     </div>
                     <div className="d-flex flex-column justify-content-between flex-grow-1 py-4 ps-3 text-dark" >
                         <div className="user-select-none w-75 ps-3">
-                            <h2 className="mb-5">To-do</h2>
-                            <div className="d-flex mt-2">
-                                <p className={`form-check-label border-bottom border-2 fs-5 pb-1 me-3 ${styles.title}`}>sdasdsasdasdsadsadsadsadsadsadsadaddad</p>
-                                <input className={`form-check-input rounded-0 border-dark shadow-none mt-1 ${styles.checkBox}`} type="checkbox" id="inlineCheckbox1" value="" aria-label="checkbox" />
-                            </div>
-                            <div className="d-flex">
-                                <p className={`form-check-label border-bottom border-2 fs-5 pb-1 me-3 ${styles.title}`}>sdasdsadad</p>
-                                <input className={`form-check-input rounded-0 border-dark shadow-none mt-1 ${styles.checkBox}`} type="checkbox" id="inlineCheckbox1" value="" aria-label="checkbox" />
-                            </div>
-                            <div className="d-flex">
-                                <p className={`form-check-label border-bottom border-2 fs-5 pb-1 me-3 ${styles.title}`}>sdasdsadad</p>
-                                <input className={`form-check-input rounded-0 border-dark shadow-none mt-1 ${styles.checkBox}`} type="checkbox" id="inlineCheckbox1" value="" aria-label="checkbox" />
+                            <h2 className="mb-4">To-do</h2>
+                            {todoList.list.length!==0 ? todoList.list.map((todo, idx) => {
+                                if (idx <= 2) return <div className="d-flex">
+                                <p className={`form-check-label border-bottom border-2 fs-5 pb-1 me-3 ${styles.title}`}>{todo.title}</p>
+                                <input className={`form-check-input rounded-0 border-dark shadow-none mt-1 ${styles.checkBox}`} type="checkbox" id="inlineCheckbox1" aria-label="checkbox" checked={todo.done} />
                             </div>
+                            }) : null}
                             <Link className="d-flex justify-content-center text-dark text-decoration-none" to={`/todo/${moment().format("YYYY-MM-DD")}`}>
                                 <i className="bi bi-plus-lg me-2"></i>
                                 <p className="mb-0">더보기</p>

server/controllers/todo.controller.js

@@ -43,9 +43,16 @@ const findforPercent = async (req, res) => {
     if (end) {
       const { count, rows } = await Todo.findAndCountAll({  where: { [Op.and]: [{ date: { [Op.eq]: start } }, { userId: userId }] } })
     } else {
+      let percent = 0
       console.log("findforPercent end 없음")
-      const { count, rows } = await Todo.findAndCountAll({  where: { [Op.and]: [{ date: { [Op.eq]: start } }, { userId: userId }] } })
-      doneTodo = await Todo.count({ where: { done: { [Op.eq]: true } } })
+      const nonCheck = await Todo.findAndCountAll({  where: { [Op.and]: [{ date: { [Op.eq]: start } }, { userId: userId }, { done: false }] } })
+      const check = await Todo.findAndCountAll({  where: { [Op.and]: [{ date: { [Op.eq]: start } }, { userId: userId }, { done: true }] } })
+      let total = nonCheck.count + check.count
+      check.rows.forEach(el => nonCheck.rows.push(el.dataValues))
+      console.log("non",nonCheck)
+      if (total === 0) percent = 0
+      else percent = Math.round((check.count / total)*100) 
+      return res.json({ percent: percent, list: nonCheck.rows })
     }
   } catch (error) {
     return res.status(500).send(error.message || "todo 가져오는 중 에러 발생")