WIP

.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/[email protected]"
+  # to lock the version and prevent unexpected CI changes
+  cypress: cypress-io/[email protected]
+
+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

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>