From 7d3b9a1f6bad5d042cb78ea420667a181eaa8c16 Mon Sep 17 00:00:00 2001
From: Jungmin <miniharu.zip@gmail.com>
Date: Fri, 18 Oct 2024 13:19:49 +0900
Subject: [PATCH] WIP

---
 .circleci/config.yml                   | 20 ++++++++++++++---
 src/app/dashboard/components/Todos.tsx | 30 ++++++++++++++++++++------
 2 files changed, 41 insertions(+), 9 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 4d9e978..aebabad 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -1,9 +1,23 @@
 version: 2.1
 orbs:
-  cypress: cypress-io/cypress@3
+  # "cypress-io/cypress@3" installs the latest published
+  # version "s.x.y" of the orb. We recommend you then use
+  # the strict explicit version "cypress-io/cypress@3.x.y"
+  # to lock the version and prevent unexpected CI changes
+  cypress: cypress-io/cypress@3.3.1
+
+jobs:
+  cypress-run:
+    executor:
+      name: cypress/default
+      node-version: "20.6.0"
+    steps:
+      - cypress/install
+      - cypress/run-tests:
+          cypress-command: "npx wait-on@latest http://localhost:3000 && npx cypress run"
+          start-command: "npm run build && npm run start"
 
 workflows:
   build:
     jobs:
-      - "cypress/run":
-          start-command: "npm run start"
+      - cypress-run
diff --git a/src/app/dashboard/components/Todos.tsx b/src/app/dashboard/components/Todos.tsx
index a9793be..d94fba5 100644
--- a/src/app/dashboard/components/Todos.tsx
+++ b/src/app/dashboard/components/Todos.tsx
@@ -3,12 +3,13 @@
 import Image from "next/image";
 import { useRouter } from "next/navigation";
 import { useEffect, useRef, useState } from "react";
+import { useMutation, useQueryClient } from "@tanstack/react-query"; // useQueryClient 추가
 
 import useModal from "@/hook/useModal";
 import CreateNewTodo from "@/components/CreateNewTodo";
 import { getNotes } from "@/api/noteAPI";
-import useTodoStore, { TodoType } from "@/store/todoStore";
-import { deleteTodo } from "@/api/todoAPI";
+import { TodoType } from "@/store/todoStore";
+import { deleteTodo, updateTodo } from "@/api/todoAPI";
 
 import NoteViewer from "./NoteViewer";
 
@@ -65,16 +66,33 @@ export default function Todos({ todo, isGoal = false, isInGoalSection = false }:
   const { Modal, openModal, closeModal } = useModal();
   const [isNoteOpen, setIsNoteOpen] = useState(false);
   const [noteContent, setNoteContent] = useState<NoteType>();
-  const { updateTodo } = useTodoStore();
 
-  const toggleTodoStatus = async (updatedTodo: TodoType) => {
+  const queryClient = useQueryClient();
+
+  const updateTodoMutation = useMutation({
+    mutationFn: (updatedTodo: TodoType) => updateTodo(todo.id, updatedTodo),
+    onSuccess: () => {
+      // 할 일 목록 쿼리 무효화
+      queryClient.invalidateQueries({ queryKey: ["todos", todo.goal.id] });
+    },
+  });
+
+  const toggleTodoStatus = async () => {
     try {
-      updateTodo(todo.id, updatedTodo);
+      await updateTodoMutation.mutateAsync({ ...todo, done: !todo.done });
     } catch (error) {
       console.error("할 일 상태 변경 중 오류 발생:", error);
     }
   };
 
+  // const toggleTodoStatus = async (updatedTodo: TodoType) => {
+  //   try {
+  //     updateTodo(todo.id, updatedTodo);
+  //   } catch (error) {
+  //     console.error("할 일 상태 변경 중 오류 발생:", error);
+  //   }
+  // };
+
   const fetchNoteContent = async () => {
     if (todo.noteId) {
       const response = await getNotes(todo.noteId);
@@ -123,7 +141,7 @@ export default function Todos({ todo, isGoal = false, isInGoalSection = false }:
             width={todo.done === true ? 18 : 24}
             height={todo.done === true ? 18 : 24}
             alt="checkbox-icon"
-            onClick={() => toggleTodoStatus({ ...todo, done: !todo.done })}
+            onClick={() => toggleTodoStatus}
           />
 
           <span className={`text-sm ${todo.done ? "line-through" : ""}`}>{todo.title}</span>