Todo

client/src/components/Calendar/Weekly.js

 import { useState, useEffect, useRef } from "react";
 import { useHistory, useParams } from "react-router-dom";
 import Date from "./DateSet";
+import todoApi from "../../apis/todo.api";
+import { useAuth } from "../../utils/context";
+import catchErrors from "../../utils/catchErrors";
 import moment from 'moment';
 import FullCalendar, { createPlugin } from '@fullcalendar/react';
 import interactionPlugin from "@fullcalendar/interaction";
 import bootstrapPlugin from '@fullcalendar/bootstrap';
 
 const Weekly = () => {
+    const { user } = useAuth()
     const history = useHistory()
     const { date } = useParams()
+    const [initialDate, setInitialDate] = useState(moment().format("YYYY-MM-DD"))
     const [chooseDate, setChooseDate] = useState(moment(date).format("YYYY-MM-DD"))
     const [week, setWeek] = useState([
         { date: moment(date).day(0).format("YYYY-MM-DD"), rate: "75" },
@@ -19,6 +24,7 @@ const Weekly = () => {
         { date: moment(date).day(5).format("YYYY-MM-DD"), rate: "0" },
         { date: moment(date).day(6).format("YYYY-MM-DD"), rate: "" }
     ])
+    const [error, setError] = useState("")
     const calendarRef = useRef(null)
     let calendar = null
 
@@ -30,6 +36,7 @@ const Weekly = () => {
 
     useEffect(() => {
         setChooseDate(moment(date).format("YYYY-MM-DD"))
+        getTodoList()
         setWeek([
             { date: moment(date).day(0).format("YYYY-MM-DD"), rate: "7" },
             { date: moment(date).day(1).format("YYYY-MM-DD"), rate: "8" },
@@ -41,6 +48,16 @@ const Weekly = () => {
         ])
     }, [date])
 
+    async function getTodoList() {
+        try {
+            setError("")
+            const result = await todoApi.getTodopercent(user.id, moment(date).day(0).format("YYYY-MM-DD"), moment(date).day(6).format("YYYY-MM-DD"))
+            console.log("result==", result)
+        } catch (error) {
+            catchErrors(error, setError)
+        }
+    }
+
     function prev() {
         calendar.prev()
         let date = moment(calendar.getDate()).format('YYYY-MM-DD')
@@ -60,7 +77,7 @@ const Weekly = () => {
 
     const CustomeWeeklyView = ({ dateProfile }) => {
         let current = moment(dateProfile.currentRange.start).format("YYYY-MM-DD")
-        
+
         return (
             <div className="fc-custom-view weekly-view d-flex row-cols-9" style={{ cursor: "pointer" }}>
                 <i className="col bi bi-chevron-left align-self-center" onClick={prev} style={{ fontSize: "2em" }} />
@@ -91,8 +108,8 @@ const Weekly = () => {
             views={{
                 week: {
                     validRange: {
-                        start: moment(chooseDate).subtract(3, 'years').format('YYYY-MM[-01]'),
-                        end: moment(chooseDate).add(3, 'years').add(1, 'months').format('YYYY-MM[-01]')
+                        start: moment(initialDate).subtract(3, 'years').format('YYYY-MM[-01]'),
+                        end: moment(initialDate).add(3, 'years').add(1, 'months').format('YYYY-MM[-01]')
                     },
                     dateIncrement: {
                         days: 7

client/src/components/Menu/Menu.js

@@ -43,7 +43,7 @@ const Menu = () => {
                             <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>
+                                <p className={`form-check-label border-bottom border-2 text-nowrap 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}

client/src/components/TodoList.js

@@ -52,19 +52,19 @@ const TodoList = () => {
   }
 
   return (
-    <div className={"mt-3 " + (todoList.length ? "d-flex" : "d-block")}>
+    <div className={"mt-3 " + (todoList.length ? "d-flex flex-column" : "d-block")}>
       {todoList.length !== 0 ?
-        todoList.map((todo, idx) => <>
+        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 ${styles.checkBox}`} type="checkbox" checked={todo.done} />
-            <label className="form-check-label fs-5 ms-3 pe-2 text-nowrap" style={{ overflow: "hidden", textOverflow: "ellipsis" }}>{todo.todoTitle}</label>
+            <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>
-        </>) : <p className="text-center">등록된 할일이 없습니다.</p>}
+        </div>) : <p className="text-center">등록된 할일이 없습니다.</p>}
       <TodoPostModal handleClick={delayTodo} />
       <TodoModal curDate={date} selectTodo={selectTodo} />
     </div>

server/controllers/todo.controller.js

@@ -41,17 +41,19 @@ const findforPercent = async (req, res) => {
     const userId = req.userId
     const { start, end } = req.query
     if (end) {
-      const { count, rows } = await Todo.findAndCountAll({  where: { [Op.and]: [{ date: { [Op.eq]: start } }, { userId: userId }] } })
+      console.log("week 실행하냐")
+      const findList= await Todo.findAndCountAll({ where: { [Op.and]: [{ userId: userId }, { date: [start, end] }] }, group: ['date'] })
+      console.log("week findList",findList)
     } else {
       let percent = 0
       console.log("findforPercent end 없음")
-      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 }] } })
+      const nonCheck = await Todo.findAndCountAll({ where: { [Op.and]: [{ date: { [Op.eq]: start } }, { userId: userId }, { done: false }] }, order: [['updatedAt', "DESC"]] })
+      const check = await Todo.findAndCountAll({ where: { [Op.and]: [{ date: { [Op.eq]: start } }, { userId: userId }, { done: true }] }, order: [['updatedAt', "DESC"]] })
       let total = nonCheck.count + check.count
       check.rows.forEach(el => nonCheck.rows.push(el.dataValues))
-      console.log("non",nonCheck)
+      console.log("non", nonCheck)
       if (total === 0) percent = 0
-      else percent = Math.round((check.count / total)*100) 
+      else percent = Math.round((check.count / total) * 100)
       return res.json({ percent: percent, list: nonCheck.rows })
     }
   } catch (error) {