diff --git a/package.json b/package.json
index c399c1e..2a12084 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "test": "vitest",
+    "test": "vitest --passWithNoTests",
     "cy:open": "wait-on http://localhost:3000/ && cypress open",
     "cy:run": "npm-run-all --parallel dev cy:open"
   },
diff --git a/src/app/dashboard/components/NoteViewer.tsx b/src/app/dashboard/components/NoteViewer.tsx
index 33e9ad9..c5b2a86 100644
--- a/src/app/dashboard/components/NoteViewer.tsx
+++ b/src/app/dashboard/components/NoteViewer.tsx
@@ -21,7 +21,7 @@ export default function NoteViewer({ isNoteOpen, setIsNoteOpen, noteContent }: N
     window.open(url, "_blank", `width=${windowWidth},height=${windowHeight},left=${windowLeft},top=${windowTop}`);
   };
 
-  console.log(noteContent);
+  //console.log(noteContent);
 
   return (
     <div className="relative">
diff --git a/src/app/dashboard/components/TodoCard.tsx b/src/app/dashboard/components/TodoCard.tsx
index c8a3c23..bb0443c 100644
--- a/src/app/dashboard/components/TodoCard.tsx
+++ b/src/app/dashboard/components/TodoCard.tsx
@@ -8,7 +8,7 @@ import { getGoal } from "@/api/goalAPI";
 import useModal from "@/hook/useModal";
 import CreateNewTodo from "@/components/CreateNewTodo";
 import { GoalType, TodoType } from "@/app/Types/TodoGoalType";
-import { getTodos } from "@/api/todoAPI";
+import { deleteTodo, getTodos, toggleTodo } from "@/api/todoAPI";
 
 import ProgressBar from "./ProgressBar";
 import TodoItem from "./TodoItem";
@@ -30,20 +30,54 @@ export default function TodoCard({ id }: TodoCardProps) {
   const loadTodoCardData = async () => {
     const goalResponse = await getGoal(id);
     const todoResponse = await getTodos(id);
-    //const completedResponse = await getTodos(id, true, 5);
 
-    const activeResponse = Array.isArray(todoResponse) ? todoResponse.filter((todo) => !todo.done) : [];
-    const completedResponse = Array.isArray(todoResponse) ? todoResponse.filter((todo) => todo.done) : [];
-    console.log(activeResponse);
+    const activeResponse = Array.isArray(todoResponse.todos)
+      ? todoResponse.todos.filter((todo: TodoType) => !todo.done)
+      : [];
+    const completedResponse = Array.isArray(todoResponse.todos)
+      ? todoResponse.todos.filter((todo: TodoType) => todo.done)
+      : [];
 
     setGoal(goalResponse);
     setSelectedGoal(goalResponse);
-    setAcitveTodos(activeResponse.todos);
-    setCompletedTodos(completedResponse.todos);
+    setAcitveTodos(activeResponse);
+    setCompletedTodos(completedResponse);
 
-    const totalTaskCount = activeResponse.totalCount + completedResponse.totalCount;
-    setProgressPercentage(Math.round((completedResponse.totalCount / totalTaskCount) * 100));
-    setHasMoreThanFiveTodos(5 < activeResponse.totalCount || 5 < completedResponse.totalCount);
+    const totalTaskCount = activeResponse.length + completedResponse.length;
+    setProgressPercentage(Math.round((completedResponse.length / totalTaskCount) * 100));
+    setHasMoreThanFiveTodos(5 < activeResponse.length || 5 < completedResponse.length);
+  };
+
+  // 할 일 삭제 함수 정의
+  const handleDeleteTodo = async (todoId: number) => {
+    try {
+      await deleteTodo(todoId);
+      loadTodoCardData(); // 삭제 후 할 일 목록 다시 불러오기
+    } catch (error) {
+      console.error("할 일 삭제에 실패했습니다.", error);
+    }
+  };
+
+  // 할 일 상태 토글
+  const toggleTodoStatus = async (todo: TodoType) => {
+    try {
+      const updatedTodo = { ...todo, done: !todo.done };
+      await toggleTodo(todo.id, updatedTodo);
+
+      if (updatedTodo.done) {
+        setCompletedTodos((prev) => [...prev, updatedTodo]);
+        setAcitveTodos((prev) => prev.filter((t) => t.id !== todo.id));
+      } else {
+        setAcitveTodos((prev) => [...prev, updatedTodo]);
+        setCompletedTodos((prev) => prev.filter((t) => t.id !== todo.id));
+      }
+
+      // Progress bar update
+      const totalTaskCount = activeTodos.length + completedTodos.length;
+      setProgressPercentage(Math.round((completedTodos.length / totalTaskCount) * 100));
+    } catch (error) {
+      console.error("할 일 상태 변경에 실패했습니다.", error);
+    }
   };
 
   useEffect(() => {
@@ -74,7 +108,16 @@ export default function TodoCard({ id }: TodoCardProps) {
           <h3 className="mb-3 text-lg font-semibold">To do</h3>
           <ul>
             {activeTodos.length > 0 ? (
-              activeTodos.map((todo) => <TodoItem key={todo.id} todo={todo} isTodoCardRelated={false} inTodoCard />)
+              activeTodos.map((todo) => (
+                <TodoItem
+                  key={todo.id}
+                  todo={todo}
+                  isTodoCardRelated={false}
+                  inTodoCard
+                  toggleTodoStatus={toggleTodoStatus}
+                  deleteTodo={handleDeleteTodo}
+                />
+              ))
             ) : (
               <li className="text-center text-sm text-slate-500">아직 해야할 일이 없어요</li>
             )}
@@ -84,7 +127,16 @@ export default function TodoCard({ id }: TodoCardProps) {
           <h3 className="mb-3 text-lg font-semibold">Done</h3>
           <ul>
             {completedTodos.length > 0 ? (
-              completedTodos.map((todo) => <TodoItem key={todo.id} todo={todo} isTodoCardRelated={false} inTodoCard />)
+              completedTodos.map((todo) => (
+                <TodoItem
+                  key={todo.id}
+                  todo={todo}
+                  isTodoCardRelated={false}
+                  inTodoCard
+                  toggleTodoStatus={toggleTodoStatus}
+                  deleteTodo={handleDeleteTodo}
+                />
+              ))
             ) : (
               <li className="text-center text-sm text-slate-500">아직 다 한 일이 없어요</li>
             )}
diff --git a/src/app/dashboard/components/TodoItem.tsx b/src/app/dashboard/components/TodoItem.tsx
index c47cb23..b705911 100644
--- a/src/app/dashboard/components/TodoItem.tsx
+++ b/src/app/dashboard/components/TodoItem.tsx
@@ -7,7 +7,6 @@ import { useEffect, useRef, useState } from "react";
 import useModal from "@/hook/useModal";
 import CreateNewTodo from "@/components/CreateNewTodo";
 import { NoteType, TodoType } from "@/app/Types/TodoGoalType";
-import { deleteTodo, toggleTodo } from "@/api/todoAPI";
 import { getNotes } from "@/api/noteAPI";
 
 import NoteViewer from "./NoteViewer";
@@ -16,9 +15,17 @@ type TodoProps = {
   todo: TodoType;
   isTodoCardRelated?: boolean;
   inTodoCard?: boolean;
+  toggleTodoStatus?: (todo: TodoType) => Promise<void>;
+  deleteTodo?: (todoId: number) => Promise<void>;
 };
 
-export default function TodoItem({ todo, isTodoCardRelated = true, inTodoCard }: TodoProps) {
+export default function TodoItem({
+  todo,
+  isTodoCardRelated = true,
+  inTodoCard,
+  toggleTodoStatus,
+  deleteTodo,
+}: TodoProps) {
   const router = useRouter();
   const { Modal, openModal, closeModal } = useModal();
   const dropdownRef = useRef<HTMLDivElement | null>(null);
@@ -38,17 +45,8 @@ export default function TodoItem({ todo, isTodoCardRelated = true, inTodoCard }:
   };
 
   const handleDelete = async () => {
-    await deleteTodo(todo.id);
-    // TODO: 삭제 후 새로고침하도록 구현
-  };
-
-  const toggleTodoStatus = async (todo: TodoType) => {
-    try {
-      const updatedTodo = { done: !todo.done };
-      await toggleTodo(todo.id, updatedTodo);
-      // TODO: 토글됐다면 할 일 목록 업데이트
-    } catch (error) {
-      console.error("할 일 상태 변경에 실패했습니다.", error);
+    if (deleteTodo) {
+      await deleteTodo(todo.id);
     }
   };
 
@@ -84,7 +82,9 @@ export default function TodoItem({ todo, isTodoCardRelated = true, inTodoCard }:
             height={todo.done === true ? 18 : 24}
             alt="checkbox-icon"
             onClick={() => {
-              toggleTodoStatus(todo);
+              if (toggleTodoStatus) {
+                toggleTodoStatus(todo);
+              }
             }}
           />
 
diff --git a/src/components/CreateNewTodo.tsx b/src/components/CreateNewTodo.tsx
index 782102f..caf98da 100644
--- a/src/components/CreateNewTodo.tsx
+++ b/src/components/CreateNewTodo.tsx
@@ -72,7 +72,7 @@ export default function CreateNewTodo({ closeCreateNewTodo, todo, isEditing, sel
       title: initialTodo.title,
       goalId: selectedGoalId || initialTodo.goalId,
       fileUrl: fileUrl || null,
-      linkUrl: initialTodo.linkUrl || null, 
+      linkUrl: initialTodo.linkUrl || null,
     };
 
     try {
@@ -88,7 +88,6 @@ export default function CreateNewTodo({ closeCreateNewTodo, todo, isEditing, sel
         ); // 새로 생성할 경우
         toast.success("할 일이 생성되었습니다.");
       }
-      //updateTodos();  // 상태 업데이트
       closeCreateNewTodo(); // 모달 닫기
     } catch (error) {
       console.error(error);
diff --git a/src/components/sum.js b/src/components/sum.js
deleted file mode 100644
index 506a413..0000000
--- a/src/components/sum.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export function sum(a, b) {
-  return a + b;
-}
diff --git a/src/components/sum.test.js b/src/components/sum.test.tsx
similarity index 100%
rename from src/components/sum.test.js
rename to src/components/sum.test.tsx
diff --git a/src/components/sum.ts b/src/components/sum.ts
new file mode 100644
index 0000000..508f35f
--- /dev/null
+++ b/src/components/sum.ts
@@ -0,0 +1,3 @@
+export function sum(a: number, b: number) {
+  return a + b;
+}
diff --git a/vitest.config.ts b/vitest.config.ts
index cd908df..fcd3093 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -12,7 +12,7 @@ export default defineConfig({
     globals: true, // 전역으로 vi, describe, it 등을 사용
     environment: "jsdom", // 브라우저 환경에서의 테스트를 위한 설정
     setupFiles: "./src/setupTests.ts", // 테스트 초기화 파일
-    //  include: ["**/*.test.tsx"], // 포함할 파일 패턴을 명시
+    include: ["**/*.test.tsx"], // 포함할 파일 패턴을 명시
     coverage: {
       provider: "v8",
       reportsDirectory: "./coverage", // 리포트 디렉토리