From 107619004a6fe211f834cc5dcba265cbc2fd8620 Mon Sep 17 00:00:00 2001
From: Jungmin <miniharu.zip@gmail.com>
Date: Thu, 24 Oct 2024 23:52:10 +0900
Subject: [PATCH] =?UTF-8?q?reactor:=20=EC=A3=BC=EC=84=9D=20=EC=A0=9C?=
 =?UTF-8?q?=EA=B1=B0=20=EB=B0=8F=20=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- todoStore로 전역에서 관리
- 토큰 유효 시간을 하루로 늘리고 HTTPS에서만 쿠키를 전송하고, 크로스사이트 공격을 방지하는 SameSite 옵션 추가
---
 src/api/authAPI.ts                          |  17 ---
 src/api/goalAPI.ts                          |   9 --
 src/api/noteAPI.ts                          |   3 -
 src/api/todoAPI.ts                          |   6 -
 src/app/(auth)/components/LoginForm.tsx     |   6 +-
 src/app/(auth)/components/LoginPrompt.tsx   |   5 +-
 src/app/(auth)/components/SignupPrompt.tsx  |   5 +-
 src/app/Provider.tsx                        |  11 +-
 src/app/dashboard/components/NoteItem.tsx   |   4 +-
 src/app/dashboard/components/NoteViewer.tsx |   4 +-
 src/app/dashboard/components/Sidebar.tsx    |  62 +++++------
 src/app/dashboard/components/TodoCard.tsx   |  75 ++++---------
 src/app/dashboard/components/TodoItem.tsx   |  43 ++++----
 src/app/dashboard/goal/[goalId]/page.tsx    |  20 ++--
 src/app/dashboard/note/[noteId]/page.tsx    |  85 +--------------
 src/app/dashboard/notes/[noteId]/page.tsx   |   3 +-
 src/app/dashboard/page.tsx                  |  10 +-
 src/app/dashboard/todoboard/page.tsx        |   6 +-
 src/app/layout.tsx                          |   9 +-
 src/components/CreateNewTodo.tsx            |  40 +++----
 src/components/EditGoalTitleModal.tsx       |   4 +
 src/components/LinkUpload.tsx               |   2 +-
 src/components/WhoRU.tsx                    |  25 -----
 src/lib/api.ts                              |   2 +-
 src/store/todoStore.ts                      | 115 ++------------------
 src/utils/AnimatedText.tsx                  |   2 +-
 src/utils/authUtils.ts                      |   3 +-
 27 files changed, 146 insertions(+), 430 deletions(-)
 delete mode 100644 src/api/authAPI.ts
 delete mode 100644 src/components/WhoRU.tsx

diff --git a/src/api/authAPI.ts b/src/api/authAPI.ts
deleted file mode 100644
index b6384c2..0000000
--- a/src/api/authAPI.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import api from "@/lib/api";
-
-export type SignupData = {
-  email: string;
-  nickname: string;
-  password: string;
-};
-
-export const postUser = async (data: SignupData) => {
-  const response = await api.post(`/user`, {
-    email: data.email,
-    name: data.nickname,
-    password: data.password,
-  });
-
-  return response.data;
-};
diff --git a/src/api/goalAPI.ts b/src/api/goalAPI.ts
index 14e334c..612cf0c 100644
--- a/src/api/goalAPI.ts
+++ b/src/api/goalAPI.ts
@@ -13,19 +13,13 @@ export interface ErrorType {
   };
 }
 
-// 목표 목록 가져오기 (GET)
 // 모든 목표를 가져오는 함수
 export const getGoals = async () => {
   try {
     const response = await api.get(`/goals`);
-    //  console.log(response);
     return response.data;
   } catch (error) {
     console.error("Goals fetch error:", error);
-    // const axiosError = error as AxiosError<ErrorType>;
-    // toast.error(
-    //   axiosError.response?.data?.message || axiosError.message || "목표 목록을 가져오는 중 오류가 발생했습니다.",
-    // );
   }
 };
 
@@ -44,12 +38,9 @@ export const PostGoal = async (title: string) => {
 export const getGoal = async (id: number) => {
   try {
     const response = await api.get(`/goals/${id}`);
-    //console.log(response.data);
     return response.data;
   } catch (error) {
     console.error("Goal fetch error:", error);
-    //  const axiosError = error as AxiosError<ErrorType>;
-    // toast.error(axiosError.response?.data?.message || axiosError.message || "목표를 가져오는 중 오류가 발생했습니다.");
   }
 };
 
diff --git a/src/api/noteAPI.ts b/src/api/noteAPI.ts
index 27bf8eb..37a126a 100644
--- a/src/api/noteAPI.ts
+++ b/src/api/noteAPI.ts
@@ -81,11 +81,8 @@ export async function patchNotes(noteId: number, title: string, content: string,
 export default async function deleteNote(noteId: number) {
   try {
     const response = await api.delete(`notes/${noteId}`);
-    console.log(response);
-    console.log(response.data);
     return response.data;
   } catch (e) {
     const error = e as ErrorType;
-    console.log(error);
   }
 }
diff --git a/src/api/todoAPI.ts b/src/api/todoAPI.ts
index fc455c2..385de8c 100644
--- a/src/api/todoAPI.ts
+++ b/src/api/todoAPI.ts
@@ -44,7 +44,6 @@ export const getTodos = async (id: number, done?: boolean, size?: number) => {
     const response = await api.get(
       `/todos?goalId=${id}&${done ? `done=${done}&` : done === false ? "done=false&" : ""}${size ? `size=${size}` : "size=27"}`,
     );
-    //console.log(response.data);
     return response.data;
   } catch (error) {
     const axiosError = error as AxiosError<ErrorType>;
@@ -60,7 +59,6 @@ export const postFile = async (file: File) => {
     const response = await api.post(`/files`, formData, {
       headers: { "Content-Type": "multipart/form-data" },
     });
-    console.log(response.data);
     return response.data;
   } catch (error) {
     const axiosError = error as AxiosError<ErrorType>;
@@ -76,10 +74,7 @@ export const createTodo = async (
 ): Promise<TodoType> => {
   try {
     const payload = { title, goalId, fileUrl, linkUrl };
-    console.log(title, goalId);
-    console.log("😲");
     const response = await api.post<TodoType>(`/todos`, payload);
-    console.log(response);
     return response.data;
   } catch (error) {
     console.log(error);
@@ -92,7 +87,6 @@ export const createTodo = async (
 export const updateTodo = async (todoId: number, updates: Partial<TodoType>): Promise<TodoType> => {
   try {
     const response = await api.patch<TodoType>(`/todos/${todoId}`, updates);
-    console.log();
     return response.data;
   } catch (error) {
     const axiosError = error as AxiosError<ErrorType>;
diff --git a/src/app/(auth)/components/LoginForm.tsx b/src/app/(auth)/components/LoginForm.tsx
index f3c4fef..d115dd0 100644
--- a/src/app/(auth)/components/LoginForm.tsx
+++ b/src/app/(auth)/components/LoginForm.tsx
@@ -38,7 +38,7 @@ export default function LoginForm() {
         setLoginError("로그인에 실패했습니다. 다시 시도해 주세요.");
       }
     } catch (error) {
-      const axiosError = error as AxiosError; 
+      const axiosError = error as AxiosError;
       console.error("로그인 중 오류 발생:", axiosError);
       setLoginError("로그인 실패했습니다. 다시 시도해 주세요.");
     }
@@ -56,12 +56,11 @@ export default function LoginForm() {
         aria-required="true"
         required
         className={`w-full rounded-tl-md rounded-tr-md border px-[10px] py-3 text-sm placeholder-slate-400 hover:bg-slate-50 focus:z-50 focus:outline-none focus:ring-1 focus:ring-blue-300 sm:px-4 sm:text-base ${
-          errors.email ? "border-red-500 focus:ring-red-50" : "border-slate-300"
+          errors.email ? "border-red-50 focus:ring-red-50" : "border-slate-300"
         }`}
         {...register("email")}
         onBlur={() => trigger("email")}
       />
-      {errors.email && <small className="text-sm text-red-50">{errors.email.message}</small>}
       <label htmlFor="password" className="sr-only">
         비밀번호
       </label>
@@ -76,6 +75,7 @@ export default function LoginForm() {
         }`}
         onBlur={() => trigger("password")}
       />
+      {errors.email && <small className="text-sm text-red-50">{errors.email.message}</small>}
       {errors.password && <small className="mb-5 text-sm text-red-50">{errors.password.message}</small>}
       {loginError && <small className="mb-5 text-sm text-red-50">{loginError}</small>}
       <button
diff --git a/src/app/(auth)/components/LoginPrompt.tsx b/src/app/(auth)/components/LoginPrompt.tsx
index 1af9ff2..f1cdae4 100644
--- a/src/app/(auth)/components/LoginPrompt.tsx
+++ b/src/app/(auth)/components/LoginPrompt.tsx
@@ -1,11 +1,12 @@
+import AnimatedText from "@/utils/AnimatedText";
 import Link from "next/link";
 
 export default function LoginPrompt() {
   return (
     <div className="mb-6 flex justify-center gap-x-1 text-xs sm:gap-x-[10px] sm:text-sm">
       <p>이미 아이디가 있으신가요?</p>
-      <Link href="/login" className="font-bold underline hover:text-slate-500">
-        <p>로그인</p>
+      <Link href="/login">
+        <AnimatedText text="로그인" />
       </Link>
     </div>
   );
diff --git a/src/app/(auth)/components/SignupPrompt.tsx b/src/app/(auth)/components/SignupPrompt.tsx
index 467cdc0..c97d7e7 100644
--- a/src/app/(auth)/components/SignupPrompt.tsx
+++ b/src/app/(auth)/components/SignupPrompt.tsx
@@ -1,11 +1,12 @@
+import AnimatedText from "@/utils/AnimatedText";
 import Link from "next/link";
 
 export default function SignupPrompt() {
   return (
     <div className="mb-6 flex justify-center gap-x-1 text-xs sm:gap-x-[10px] sm:text-sm">
       <p>처음이신가요?</p>
-      <Link href="/signup" className="font-bold underline hover:text-slate-500">
-        <p>회원가입</p>
+      <Link href="/signup">
+        <AnimatedText text="회원가입" />
       </Link>
     </div>
   );
diff --git a/src/app/Provider.tsx b/src/app/Provider.tsx
index c49df33..e33f7b2 100644
--- a/src/app/Provider.tsx
+++ b/src/app/Provider.tsx
@@ -1,9 +1,18 @@
 "use client";
 
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { SpeedInsights } from "@vercel/speed-insights/next";
+
+import ToastProvider from "@/components/ToastProvider";
 
 export default function Provider({ children }: { children: React.ReactNode }) {
   const queryClient = new QueryClient();
 
-  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
+  return (
+    <QueryClientProvider client={queryClient}>
+      <SpeedInsights />
+      <ToastProvider />
+      {children}
+    </QueryClientProvider>
+  );
 }
diff --git a/src/app/dashboard/components/NoteItem.tsx b/src/app/dashboard/components/NoteItem.tsx
index e6166a3..fd273bf 100644
--- a/src/app/dashboard/components/NoteItem.tsx
+++ b/src/app/dashboard/components/NoteItem.tsx
@@ -3,8 +3,8 @@ import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import { toast } from "react-toastify";
 
-import { NoteType } from "@/app/Types/TodoGoalType";
 import deleteNote, { getNote } from "@/api/noteAPI";
+import { NoteType } from "@/app/types/todoGoalType";
 
 import NoteViewer from "./NoteViewer";
 
@@ -17,8 +17,6 @@ export default function NoteItem({ note }: { note: NoteType }) {
   const loadNoteItemData = async () => {
     const response = await getNote(note.id);
     if (response) {
-      console.log(isNoteOpen);
-      console.log(noteContent);
       setNoteContent(response.data);
     }
   };
diff --git a/src/app/dashboard/components/NoteViewer.tsx b/src/app/dashboard/components/NoteViewer.tsx
index c5b2a86..4f8ee43 100644
--- a/src/app/dashboard/components/NoteViewer.tsx
+++ b/src/app/dashboard/components/NoteViewer.tsx
@@ -1,7 +1,7 @@
 import Image from "next/image";
 import { Dispatch, SetStateAction } from "react";
 
-import { NoteType } from "@/app/Types/TodoGoalType";
+import { NoteType } from "@/app/types/todoGoalType";
 
 type NoteViewerProps = {
   isNoteOpen: boolean;
@@ -21,8 +21,6 @@ export default function NoteViewer({ isNoteOpen, setIsNoteOpen, noteContent }: N
     window.open(url, "_blank", `width=${windowWidth},height=${windowHeight},left=${windowLeft},top=${windowTop}`);
   };
 
-  //console.log(noteContent);
-
   return (
     <div className="relative">
       {isNoteOpen && (
diff --git a/src/app/dashboard/components/Sidebar.tsx b/src/app/dashboard/components/Sidebar.tsx
index 2bfd66b..baa3310 100644
--- a/src/app/dashboard/components/Sidebar.tsx
+++ b/src/app/dashboard/components/Sidebar.tsx
@@ -13,7 +13,7 @@ import AnimatedText from "@/utils/AnimatedText";
 import { useGoalStore } from "@/store/goalStore";
 import { useAuthStore } from "@/store/authStore";
 import CreateNewTodo from "@/components/CreateNewTodo";
-import { GoalType } from "@/app/Types/TodoGoalType";
+import { GoalType } from "@/app/types/todoGoalType";
 
 interface GoalsPage {
   goals: GoalType[];
@@ -32,53 +32,49 @@ export default function SideBar() {
   const inputRef = useRef<HTMLInputElement | null>(null);
   const [isOpen, setIsOpen] = useState(false);
   const router = useRouter();
-  const { user } = useAuthStore(); // 쿼리 클라이언트 인스턴스 생성
+  const { user } = useAuthStore();
 
   const queryClient = useQueryClient();
 
   const handleLogout = async () => {
     const success = await logout();
-
-    if (success) {
-      router.push("/");
-    } else {
-      toast.error("로그아웃에 실패했습니다.");
-    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+    success ? router.push("/") : toast.error("로그아웃에 실패했습니다.");
   };
 
-  // Sidebar에서 새 목표를 추가하는 부분
+  // 새 목표 추가
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
-    if (goalInput.trim()) {
-      const newGoal: GoalType = await addGoal(goalInput); // 새 목표 추가
+    if (!goalInput.trim()) {
+      toast.warn("목표를 입력해 주세요.");
+      return setInputVisible(false);
+    }
+
+    if (goalInput.length > 20) {
+      toast.warn("목표는 20자 이내로 입력해 주세요.");
+      return;
+    }
+
+    try {
+      const newGoal: GoalType = await addGoal(goalInput);
       setGoalInput("");
       setInputVisible(false);
 
-      // 무한 스크롤 데이터를 업데이트
+      // 새로운 목표 추가 후 쿼리 데이터 업데이트
       queryClient.setQueryData<GoalsData>(["goals"], (oldData) => {
         if (!oldData) return { pages: [{ goals: [newGoal], nextCursor: null }], pageParams: [undefined] };
 
-        const newPages = oldData.pages.map((page, index) => {
-          if (index === 0) {
-            return {
-              ...page,
-              goals: [newGoal, ...page.goals],
-            };
-          }
-          return page;
-        });
-
-        return {
-          ...oldData,
-          pages: newPages,
-        };
+        const newPages = oldData.pages.map((page, index) =>
+          index === 0 ? { ...page, goals: [newGoal, ...page.goals] } : page,
+        );
+
+        return { ...oldData, pages: newPages };
       });
 
       queryClient.invalidateQueries({ queryKey: ["goals"] });
-    } else {
-      toast.warn("목표를 입력해 주세요.");
-      setInputVisible(false);
+    } catch (error) {
+      toast.error("새로운 목표가 추가되지 않았습니다.");
     }
   };
 
@@ -88,9 +84,7 @@ export default function SideBar() {
   }, [refreshGoals]);
 
   useEffect(() => {
-    if (inputVisible && inputRef.current) {
-      inputRef.current.focus();
-    }
+    if (inputVisible && inputRef.current) inputRef.current.focus();
   }, [inputVisible]);
 
   // 스켈레톤 UI 컴포넌트
@@ -99,7 +93,7 @@ export default function SideBar() {
       {Array(5)
         .fill("")
         .map((_, index) => (
-          <li key={index} className="h-6 w-[231px] animate-pulse rounded bg-gray-200"></li>
+          <li key={index} className="h-6 w-[231px] animate-pulse rounded bg-slate-200"></li>
         ))}
     </ul>
   );
@@ -171,7 +165,7 @@ export default function SideBar() {
               ) : (
                 <ul className="flex flex-col gap-4">
                   {goals.map((goal) => (
-                    <li key={goal.id} className="max-w-[231px] overflow-hidden text-ellipsis whitespace-nowrap">
+                    <li key={goal.id} className="max-w-[231px] truncate">
                       <Link href={`/dashboard/goal/${goal.id}`}>・{goal.title}</Link>
                     </li>
                   ))}
diff --git a/src/app/dashboard/components/TodoCard.tsx b/src/app/dashboard/components/TodoCard.tsx
index bb0443c..9a1563c 100644
--- a/src/app/dashboard/components/TodoCard.tsx
+++ b/src/app/dashboard/components/TodoCard.tsx
@@ -7,11 +7,12 @@ import { useRouter } from "next/navigation";
 import { getGoal } from "@/api/goalAPI";
 import useModal from "@/hook/useModal";
 import CreateNewTodo from "@/components/CreateNewTodo";
-import { GoalType, TodoType } from "@/app/Types/TodoGoalType";
-import { deleteTodo, getTodos, toggleTodo } from "@/api/todoAPI";
+import { getTodos } from "@/api/todoAPI";
+import { GoalType, TodoType } from "@/app/types/todoGoalType";
 
 import ProgressBar from "./ProgressBar";
 import TodoItem from "./TodoItem";
+import { useTodoStore } from "@/store/todoStore";
 
 export type TodoCardProps = {
   id: number;
@@ -19,71 +20,38 @@ export type TodoCardProps = {
 
 export default function TodoCard({ id }: TodoCardProps) {
   const router = useRouter();
+  const { isUpdated } = useTodoStore();
   const [goal, setGoal] = useState<GoalType | null>(null);
   const [selectedGoal, setSelectedGoal] = useState<GoalType>();
   const [progressPercentage, setProgressPercentage] = useState(0);
-  const [hasMoreThanFiveTodos, setHasMoreThanFiveTodos] = useState(true);
+  const [hasMoreThanFiveTodos, setHasMoreThanFiveTodos] = useState(false);
   const [completedTodos, setCompletedTodos] = useState<TodoType[]>([]);
   const [activeTodos, setAcitveTodos] = useState<TodoType[]>([]);
   const { Modal, openModal, closeModal } = useModal();
 
   const loadTodoCardData = async () => {
     const goalResponse = await getGoal(id);
-    const todoResponse = await getTodos(id);
+    const activeResponse = await getTodos(id, false, 5);
+    const completedResponse = await getTodos(id, true, 5);
 
-    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)
-      : [];
+    if (goalResponse && activeResponse && completedResponse) {
+      setGoal(goalResponse);
+      setSelectedGoal(goalResponse);
+      setAcitveTodos(activeResponse.todos);
+      setCompletedTodos(completedResponse.todos);
 
-    setGoal(goalResponse);
-    setSelectedGoal(goalResponse);
-    setAcitveTodos(activeResponse);
-    setCompletedTodos(completedResponse);
+      const totalTodoCount = activeResponse.totalCount + completedResponse.totalCount;
+      setProgressPercentage(Math.round((completedResponse.totalCount / totalTodoCount) * 100));
 
-    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);
+      if (activeResponse.totalCount >= 5 || completedResponse.totalCount >= 5) setHasMoreThanFiveTodos(true);
+      else setHasMoreThanFiveTodos(false);
     }
   };
 
   useEffect(() => {
     loadTodoCardData();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [isUpdated]);
 
   return (
     <div className="h-auto min-h-[231px] w-full select-none rounded-2xl bg-blue-50 p-6">
@@ -114,8 +82,8 @@ export default function TodoCard({ id }: TodoCardProps) {
                   todo={todo}
                   isTodoCardRelated={false}
                   inTodoCard
-                  toggleTodoStatus={toggleTodoStatus}
-                  deleteTodo={handleDeleteTodo}
+                  // toggleTodoStatus={toggleTodoStatus}
+                  //deleteTodo={handleDeleteTodo}
                 />
               ))
             ) : (
@@ -133,8 +101,8 @@ export default function TodoCard({ id }: TodoCardProps) {
                   todo={todo}
                   isTodoCardRelated={false}
                   inTodoCard
-                  toggleTodoStatus={toggleTodoStatus}
-                  deleteTodo={handleDeleteTodo}
+                  //  toggleTodoStatus={toggleTodoStatus}
+                  //deleteTodo={handleDeleteTodo}
                 />
               ))
             ) : (
@@ -143,7 +111,6 @@ export default function TodoCard({ id }: TodoCardProps) {
           </ul>
         </div>
       </div>
-
       {hasMoreThanFiveTodos && (
         <div className="mt-4 flex justify-center">
           <button
diff --git a/src/app/dashboard/components/TodoItem.tsx b/src/app/dashboard/components/TodoItem.tsx
index b705911..7d75830 100644
--- a/src/app/dashboard/components/TodoItem.tsx
+++ b/src/app/dashboard/components/TodoItem.tsx
@@ -6,48 +6,48 @@ import { useEffect, useRef, useState } from "react";
 
 import useModal from "@/hook/useModal";
 import CreateNewTodo from "@/components/CreateNewTodo";
-import { NoteType, TodoType } from "@/app/Types/TodoGoalType";
 import { getNotes } from "@/api/noteAPI";
+import { NoteType, TodoType } from "@/app/types/todoGoalType";
+import { deleteTodo, toggleTodo } from "@/api/todoAPI";
 
 import NoteViewer from "./NoteViewer";
+import { useTodoStore } from "@/store/todoStore";
 
 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,
-  toggleTodoStatus,
-  deleteTodo,
-}: TodoProps) {
+export default function TodoItem({ todo, isTodoCardRelated = true, inTodoCard }: TodoProps) {
   const router = useRouter();
   const { Modal, openModal, closeModal } = useModal();
   const dropdownRef = useRef<HTMLDivElement | null>(null);
   const [isDropdownOpen, setDropdownOpen] = useState(false);
   const [isNoteOpen, setIsNoteOpen] = useState(false);
   const [noteContent, setNoteContent] = useState<NoteType>();
+  const { updateTodos } = useTodoStore();
 
   const loadNoteContent = async () => {
     if (todo.noteId) {
       const response = await getNotes(todo.noteId);
       if (response) {
-        console.log("🖐️🖐️🖐️🖐️🖐️🖐️🖐️🖐️");
-        console.log(response);
         setNoteContent(response);
       }
     }
   };
 
-  const handleDelete = async () => {
-    if (deleteTodo) {
-      await deleteTodo(todo.id);
-    }
+  // 할 일 상태 토글
+  const toggleTodoStatus = async (todo: TodoType) => {
+    const updatedTodo = { ...todo, done: !todo.done };
+    const response = await toggleTodo(todo.id, updatedTodo);
+
+    if (response) updateTodos();
+  };
+
+  const handleDeleteTodo = async () => {
+    await deleteTodo(todo.id);
+    updateTodos();
   };
 
   useEffect(() => {
@@ -82,13 +82,10 @@ export default function TodoItem({
             height={todo.done === true ? 18 : 24}
             alt="checkbox-icon"
             onClick={() => {
-              if (toggleTodoStatus) {
-                toggleTodoStatus(todo);
-              }
+              toggleTodoStatus(todo);
             }}
           />
-
-          <span className={`text-sm ${todo.done ? "line-through" : ""}`}>{todo.title}</span>
+          <span className={`text-sm ${todo.done ? "line-through" : ""}truncate`}>{todo.title}</span>
         </li>
         {isTodoCardRelated && (
           <div className="flex items-center gap-2">
@@ -172,7 +169,7 @@ export default function TodoItem({
               >
                 수정하기
               </p>
-              <p className="cursor-pointer p-3 hover:bg-slate-200" onClick={handleDelete}>
+              <p className="cursor-pointer p-3 hover:bg-slate-200" onClick={handleDeleteTodo}>
                 삭제하기
               </p>
             </div>
@@ -180,7 +177,7 @@ export default function TodoItem({
         </div>
       </ul>
       <Modal name="EDIT_TODO" title="할 일 수정">
-        <CreateNewTodo closeCreateNewTodo={closeModal} todo={todo} selectedGoalId={todo.goal.id} isEditing={true} />
+        <CreateNewTodo closeCreateNewTodo={closeModal} todo={todo} selectedGoalId={todo.goal?.id} isEditing={true} />
       </Modal>
       <NoteViewer isNoteOpen={isNoteOpen} setIsNoteOpen={setIsNoteOpen} noteContent={noteContent} />
     </div>
diff --git a/src/app/dashboard/goal/[goalId]/page.tsx b/src/app/dashboard/goal/[goalId]/page.tsx
index b4455f5..a4d283a 100644
--- a/src/app/dashboard/goal/[goalId]/page.tsx
+++ b/src/app/dashboard/goal/[goalId]/page.tsx
@@ -10,27 +10,30 @@ import { getTodos } from "@/api/todoAPI";
 import useModal from "@/hook/useModal";
 import CreateNewTodo from "@/components/CreateNewTodo";
 import EditGoalTitleModal from "@/components/EditGoalTitleModal";
-import { GoalType, TodoType } from "@/app/Types/TodoGoalType";
+import { GoalType, TodoType } from "@/app/types/todoGoalType";
+import { useGoalStore } from "@/store/goalStore";
 
 import ProgressBar from "../../components/ProgressBar";
 import TodoItem from "../../components/TodoItem";
+import { useTodoStore } from "@/store/todoStore";
 
 type GoalPageProps = {
   params: { goalId: string; title: string };
 };
 
 export default function GoalPage({ params }: GoalPageProps) {
-  const { goalId, title } = params;
-  console.log(title);
+  const { goalId } = params;
+
   const router = useRouter();
   const { Modal, openModal, closeModal } = useModal();
-
+  const { isUpdated } = useTodoStore();
   const [goal, setGoal] = useState<GoalType | null>(null);
   const [todos, setTodos] = useState<TodoType[]>([]);
   const [progressPercentage, setProgressPercentage] = useState(0);
   const [isOpen, setIsOpen] = useState(false);
   const [selectedTodo, setSelectedTodo] = useState<TodoType | undefined>(undefined);
   const dropdownRef = useRef<HTMLDivElement | null>(null);
+  const { refreshGoals } = useGoalStore();
 
   // 할 일 데이터 가져오기
   const loadGoalData = async () => {
@@ -52,7 +55,7 @@ export default function GoalPage({ params }: GoalPageProps) {
       const response = await deleteGoal(goal?.id as number);
       if (response) {
         toast.success("목표가 삭제되었습니다.");
-        // await refreshGoals(); // 사이드바의 목표 상태를 업데이트
+        await refreshGoals(); // 사이드바의 목표 상태를 업데이트
         router.push("/");
       }
     } catch (error) {
@@ -80,7 +83,8 @@ export default function GoalPage({ params }: GoalPageProps) {
 
   useEffect(() => {
     loadGoalData();
-  }, [progressPercentage]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [progressPercentage, isUpdated]);
 
   // 외부 클릭 시 드롭다운 닫기
   useEffect(() => {
@@ -97,10 +101,6 @@ export default function GoalPage({ params }: GoalPageProps) {
     };
   }, [isOpen]);
 
-  // if (isTodosLoading) {
-  //   return <LoadingScreen />;
-  // }
-
   return (
     <div className="mt-[51px] h-auto min-h-[calc(100vh)] w-full select-none bg-slate-100 lg:mt-0 lg:h-screen">
       <div className="mx-auto w-[343px] p-6 sm:w-full 2xl:w-[1200px]">
diff --git a/src/app/dashboard/note/[noteId]/page.tsx b/src/app/dashboard/note/[noteId]/page.tsx
index 3d401bc..5a92505 100644
--- a/src/app/dashboard/note/[noteId]/page.tsx
+++ b/src/app/dashboard/note/[noteId]/page.tsx
@@ -8,7 +8,7 @@ import useModal from "@/hook/useModal";
 import { getNote, patchNotes, postNotes } from "@/api/noteAPI";
 import { getTodos } from "@/api/todoAPI";
 import UploadLinkModal from "@/components/UploadLinkModal";
-import { NoteType, TodoType } from "@/app/Types/TodoGoalType";
+import { NoteType, TodoType } from "@/app/types/todoGoalType";
 
 export default function NotePage() {
   const router = useRouter();
@@ -26,7 +26,6 @@ export default function NotePage() {
   const loadNoteData = async () => {
     const todoResponse = await getTodos(goalId);
     const selectedTodo = todoResponse.todos.find((todo: TodoType) => todo.id === todoId);
-    console.log(selectedTodo);
     setTodo(selectedTodo);
 
     const noteResponse = await getNote(selectedTodo.noteId);
@@ -56,84 +55,18 @@ export default function NotePage() {
     loadNoteData();
   }, []);
 
-  // 노트와 할 일 가져오는 함수
-  // const fetchNote = async () => {
-  //   const todoResponse = await getTodos(goalId);
-  //   const findTodo = todoResponse.todos.find((todo: TodoType) => todo.id === todoId);
-  //   setTodo(findTodo);
-
-  //   if (findTodo?.noteId) {
-  //     const noteResponse = await getNotes(findTodo.noteId);
-  //     return noteResponse; // 노트 데이터 반환
-  //   }
-
-  //   return null; // 노트가 없을 경우 null 반환
-  // };
-
-  // // React Query를 사용하여 노트 데이터를 가져옴
-  // const {
-  //   data: noteData,
-  //   isLoading,
-  //   isError,
-  // } = useQuery({
-  //   queryKey: ["note", todoId], // 고유 쿼리 키 설정
-  //   queryFn: fetchNote,
-  //   enabled: !!todoId, // todoId가 존재할 때만 쿼리 실행
-  // });
-
-  // noteData가 변경되면 상태 업데이트
-  // useEffect(() => {
-  //   if (noteData) {
-  //     setNote(noteData);
-  //     setTitle(noteData.title);
-  //     setContent(noteData.content);
-  //     setLink(noteData.linkUrl);
-  //   }
-  // }, [noteData]);
-
-  // 제출 처리
-  // const handleSubmit = async (type: string) => {
-  //   if (type === "create") {
-  //     const response = await postNotes(todoId, title, content, link ? link : null);
-  //     if (response) {
-  //       setNote(response);
-  //       router.push(`/dashboard/goal/${goalId}`);
-  //       toast.success("작성완료");
-  //     }
-  //   } else {
-  //     const response = await patchNotes(Number(note?.id), title, content, link ? link : null);
-  //     if (response) {
-  //       setNote(response.data);
-  //       router.push(`/dashboard/goal/${goalId}`);
-  //       toast.success("수정완료");
-  //     }
-  //   }
-  // };
-
   const handleTitleChange = (e: ChangeEvent<HTMLInputElement>) => {
     const value = e.target.value;
 
     if (value.length <= 30) setTitle(value);
   };
 
-  // 임시저장
   const saveDraft = () => {
     const tempData = { title, content, link };
     localStorage.setItem(`note${todoId}`, JSON.stringify(tempData));
     toast.success("임시 저장이 완료되었습니다.");
   };
 
-  // const autoSaveDraft = () => {
-  //   const intervalId = setInterval(
-  //     () => {
-  //       saveDraft();
-  //     },
-  //     5 * 60 * 1000,
-  //   ); // 5분마다 저장
-
-  //   return () => clearInterval(intervalId);
-  // };
-
   const loadSavedDraft = () => {
     const savedNote = localStorage.getItem(`note${todoId}`);
     if (savedNote) {
@@ -142,24 +75,12 @@ export default function NotePage() {
       setContent(content || "");
       setLink(link || "");
       localStorage.removeItem(`note${todoId}`);
-      toast.success("임시 저장된 노트를 불러왔습니다.");
+      toast.success("임시 저장된 내용을 불러왔습니다.");
     } else {
-      toast.info("임시 저장된 노트가 없습니다.");
+      toast.info("임시 저장된 내용이 없습니다.");
     }
   };
 
-  // useEffect(() => {
-  //   autoSaveDraft();
-  // }, []);
-
-  // if (isError) {
-  //   return <p>노트를 불러오는 데 오류가 발생했습니다.</p>;
-  // }
-
-  // if (isLoading) {
-  //   return <LoadingScreen />;
-  // }
-
   return (
     <div className="flex">
       <form className="mt-[51px] h-[calc(100vh-51px)] w-full bg-white lg:mt-0 lg:h-screen">
diff --git a/src/app/dashboard/notes/[noteId]/page.tsx b/src/app/dashboard/notes/[noteId]/page.tsx
index f3396f3..77c1bfa 100644
--- a/src/app/dashboard/notes/[noteId]/page.tsx
+++ b/src/app/dashboard/notes/[noteId]/page.tsx
@@ -6,7 +6,7 @@ import Image from "next/image";
 import Link from "next/link";
 
 import { getNotes } from "@/api/noteAPI";
-import { NoteType } from "@/app/Types/TodoGoalType";
+import { NoteType } from "@/app/types/todoGoalType";
 
 import NoteItem from "../../components/NoteItem";
 
@@ -17,7 +17,6 @@ export default function NotesPage() {
 
   const loadNotesData = async () => {
     const response = await getNotes(goalId);
-    console.log(response);
 
     if (response) {
       setNotes(response.notes);
diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
index d856038..7c585c5 100644
--- a/src/app/dashboard/page.tsx
+++ b/src/app/dashboard/page.tsx
@@ -11,13 +11,15 @@ import LoadingScreen from "@/components/LoadingScreen";
 import { getInfinityScrollGoals } from "@/api/goalAPI";
 import { getAllTodos } from "@/api/todoAPI";
 
-import { GoalType, TodoType } from "../Types/TodoGoalType";
+import { GoalType, TodoType } from "../types/todoGoalType";
 
 import TodoCard from "./components/TodoCard";
 import ProgressTracker from "./components/ProgressTracker";
 import TodoItem from "./components/TodoItem";
+import { useTodoStore } from "@/store/todoStore";
 
 export default function DashboardPage() {
+  const { isUpdated } = useTodoStore();
   const [recentTodos, setRecentTodos] = useState<TodoType[]>([]);
   const [progressPercentage, setProgressPercentage] = useState(0);
   const [completionRatio, setCompletionRatio] = useState(0);
@@ -31,7 +33,7 @@ export default function DashboardPage() {
     isFetchingNextPage,
     isLoading: isGoalsLoading,
   } = useInfiniteQuery({
-    queryKey: ["goals"],
+    queryKey: ["infiniteGoals"],
     queryFn: async ({ pageParam }) => {
       const response = await getInfinityScrollGoals({ cursor: pageParam, size: 3, sortOrder: "oldest" });
       return response;
@@ -56,6 +58,7 @@ export default function DashboardPage() {
   // 정렬 및 최근 할 일 설정
   const loadDashboardData = async () => {
     const todosResponse = await getAllTodos();
+
     if (todosResponse) {
       const todoTotalCount = todosResponse.totalCount;
       const doneTodos = todosResponse.todos.filter((todo: TodoType) => todo.done === true);
@@ -70,11 +73,10 @@ export default function DashboardPage() {
   useEffect(() => {
     loadDashboardData();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [isUpdated]);
 
   // 로딩 상태 처리
   if (isGoalsLoading) {
-    console.log("여기 들리니?");
     return <LoadingScreen />;
   }
 
diff --git a/src/app/dashboard/todoboard/page.tsx b/src/app/dashboard/todoboard/page.tsx
index 5bba9f8..2afdb49 100644
--- a/src/app/dashboard/todoboard/page.tsx
+++ b/src/app/dashboard/todoboard/page.tsx
@@ -5,15 +5,17 @@ import { useEffect, useState } from "react";
 import CreateNewTodo from "@/components/CreateNewTodo";
 import useModal from "@/hook/useModal";
 import { getAllTodos } from "@/api/todoAPI";
-import { TodoType } from "@/app/Types/TodoGoalType";
+import { TodoType } from "@/app/types/todoGoalType";
 
 import TodoItem from "../components/TodoItem";
+import { useTodoStore } from "@/store/todoStore";
 
 type StatusType = "All" | "Todo" | "Done";
 
 const statuses: StatusType[] = ["All", "Todo", "Done"];
 
 export default function TodoboardPage() {
+  const { isUpdated } = useTodoStore();
   const [todos, setTodos] = useState<TodoType[]>([]);
   const [status, setStatus] = useState<StatusType>("All");
   const { Modal, openModal, closeModal } = useModal();
@@ -25,7 +27,7 @@ export default function TodoboardPage() {
 
   useEffect(() => {
     loadTodoboardData();
-  }, []);
+  }, [isUpdated]);
 
   const renderTodos = () => {
     switch (status) {
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 8b96fa0..49fcc1c 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,12 +1,9 @@
-import { SpeedInsights } from "@vercel/speed-insights/next";
 import { ReactNode } from "react";
 import type { Metadata } from "next";
 import localFont from "next/font/local";
 import "./globals.css";
 import "react-toastify/dist/ReactToastify.css";
 
-import ToastProvider from "@/components/ToastProvider";
-
 import Provider from "./Provider";
 
 const pretendard = localFont({
@@ -29,11 +26,7 @@ export default function RootLayout({
   return (
     <html lang="ko">
       <body className={`${pretendard.variable} font-pretendard`}>
-        <Provider>
-          <SpeedInsights />
-          <ToastProvider />
-          {children}
-        </Provider>
+        <Provider>{children}</Provider>
       </body>
     </html>
   );
diff --git a/src/components/CreateNewTodo.tsx b/src/components/CreateNewTodo.tsx
index caf98da..4720013 100644
--- a/src/components/CreateNewTodo.tsx
+++ b/src/components/CreateNewTodo.tsx
@@ -4,10 +4,11 @@ import Image from "next/image";
 
 import { createTodo, postFile, updateTodo } from "@/api/todoAPI";
 import useModal from "@/hook/useModal";
-import { GoalType, InitialTodoType, TodoType } from "@/app/Types/TodoGoalType";
+import { GoalType, InitialTodoType, TodoType } from "@/app/types/todoGoalType";
 import { getGoals } from "@/api/goalAPI";
 
 import LinkUpload from "./LinkUpload";
+import { useTodoStore } from "@/store/todoStore";
 
 type CreateNewTodoProps = {
   closeCreateNewTodo: () => void;
@@ -18,16 +19,16 @@ type CreateNewTodoProps = {
 };
 
 export default function CreateNewTodo({ closeCreateNewTodo, todo, isEditing, selectedGoalId }: CreateNewTodoProps) {
-  console.log(selectedGoalId);
   const titleRef = useRef<HTMLInputElement>(null);
   const fileInputRef = useRef<HTMLInputElement | null>(null);
+  const { updateTodos } = useTodoStore();
   const { Modal, openModal, closeModal } = useModal();
   const [fileUploaded, setFileUploaded] = useState(false);
   const [fileName, setFileName] = useState("");
   const [fileUrl, setFileUrl] = useState("");
   const [isGoalListOpen, setIsGoalListOpen] = useState(false);
   const [goalList, setGoalList] = useState<GoalType[]>([]);
-  const [goalTitle, setGoalTitle] = useState<number | null>(selectedGoalId as number);
+  const [goalId, setGoalId] = useState<number>(selectedGoalId ?? todo?.goal?.id ?? 0);
   const [initialTodo, setInitialTodo] = useState<InitialTodoType>({
     title: todo?.title || "",
     linkUrl: todo?.linkUrl || "",
@@ -64,13 +65,9 @@ export default function CreateNewTodo({ closeCreateNewTodo, todo, isEditing, sel
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
-    // 모달이 확인으로 닫히는 이벤트를 받아서
-    // 할 일 목록이 변경됐으니
-    // 1. 서버에서 새로받기
-    // 2. 할일목록 수정 또는 추가를 클라이언트 쪽에서 콜백 데이터를 넘겨받아 새로업데이트
     const todoPayload = {
       title: initialTodo.title,
-      goalId: selectedGoalId || initialTodo.goalId,
+      goalId: goalId,
       fileUrl: fileUrl || null,
       linkUrl: initialTodo.linkUrl || null,
     };
@@ -88,6 +85,7 @@ export default function CreateNewTodo({ closeCreateNewTodo, todo, isEditing, sel
         ); // 새로 생성할 경우
         toast.success("할 일이 생성되었습니다.");
       }
+      updateTodos();
       closeCreateNewTodo(); // 모달 닫기
     } catch (error) {
       console.error(error);
@@ -101,32 +99,29 @@ export default function CreateNewTodo({ closeCreateNewTodo, todo, isEditing, sel
 
   useEffect(() => {
     if (todo) {
-      // 데이터를 먼저 초기화
       setInitialTodo({
         title: todo.title || "",
         linkUrl: todo.linkUrl || "",
         goalId: todo.goal?.id || 0,
       });
 
-      // 파일 URL 처리
       if (todo.fileUrl) {
         setFileUrl(todo.fileUrl);
         setFileUploaded(true);
       } else {
-        setFileUrl(""); // 파일 URL이 없을 경우 빈 값 처리
+        setFileUrl("");
         setFileUploaded(false);
       }
     } else {
-      // todo가 없을 때 초기화
       setInitialTodo({
         title: "",
         linkUrl: "",
-        goalId: 0,
+        goalId: selectedGoalId || 0,
       });
-      setFileUrl(""); // 파일 URL 초기화
-      setFileUploaded(false); // 파일 업로드 상태 초기화
+      setFileUrl("");
+      setFileUploaded(false);
     }
-  }, [todo]);
+  }, [todo, selectedGoalId]);
 
   useEffect(() => {
     if (titleRef.current) {
@@ -222,10 +217,8 @@ export default function CreateNewTodo({ closeCreateNewTodo, todo, isEditing, sel
             onClick={() => setIsGoalListOpen((prev) => !prev)}
             className="flex w-full cursor-pointer justify-between rounded-xl bg-slate-50 px-[20px] py-3"
           >
-            <p className={`${initialTodo.goalId || selectedGoalId ? "text-black" : "text-slate-400"}`}>
-              {initialTodo.goalId || selectedGoalId
-                ? goalList.find((goal) => goal.id === initialTodo.goalId || selectedGoalId)?.title
-                : "목표를 선택해주세요"}
+            <p className={`${goalId ? "text-black" : "text-slate-400"}`}>
+              {goalId ? goalList.find((goal) => goal.id === goalId)?.title : "목표를 선택해주세요"}
             </p>
             <Image alt="arrowdown-icon" width={24} height={24} src="/modal-arrowdown.svg" />
           </div>
@@ -239,10 +232,7 @@ export default function CreateNewTodo({ closeCreateNewTodo, todo, isEditing, sel
                       key={goal.id}
                       className="cursor-pointer p-3 hover:bg-blue-100"
                       onClick={() => {
-                        console.log(`목표 선택: ${selectedGoalId}`); // 디버깅 로그 추가
-                        console.log(`목표 선택: ${goal.id}`); // 디버깅 로그 추가
-                        console.log(`목표 선택: ${goal.title}`); // 디버깅 로그 추가
-                        setGoalTitle(goal.id);
+                        setGoalId(goal.id);
                         setInitialTodo({ ...initialTodo, goalId: goal.id });
                         setIsGoalListOpen(false);
                       }}
@@ -262,7 +252,7 @@ export default function CreateNewTodo({ closeCreateNewTodo, todo, isEditing, sel
         <button
           type="submit"
           className="mb-6 mt-4 flex h-[50px] w-full items-center justify-center rounded-xl border bg-blue-400 py-3 text-base text-white hover:bg-blue-500 disabled:bg-blue-200"
-          disabled={initialTodo.title === "" || goalTitle === null}
+          disabled={initialTodo.title === "" || goalId === 0}
         >
           {isEditing ? "수정" : "생성"}하기
         </button>
diff --git a/src/components/EditGoalTitleModal.tsx b/src/components/EditGoalTitleModal.tsx
index c1f7120..aa57d5f 100644
--- a/src/components/EditGoalTitleModal.tsx
+++ b/src/components/EditGoalTitleModal.tsx
@@ -6,6 +6,7 @@ import { AxiosError } from "axios";
 
 import { useGoalStore, GoalType } from "@/store/goalStore";
 import { ErrorType } from "@/api/goalAPI";
+import { useTodoStore } from "@/store/todoStore";
 
 export type EditGoalTitleModalProps = {
   closeEditTitle: () => void;
@@ -13,6 +14,7 @@ export type EditGoalTitleModalProps = {
 };
 
 export default function EditGoalTitleModal({ closeEditTitle, goals }: EditGoalTitleModalProps) {
+  const { updateTodos } = useTodoStore();
   const [title, setTitle] = useState("");
   const { updateGoal } = useGoalStore();
 
@@ -21,7 +23,9 @@ export default function EditGoalTitleModal({ closeEditTitle, goals }: EditGoalTi
 
     try {
       await updateGoal(goals.id, title);
+      updateTodos();
       closeEditTitle();
+      toast.success("목표 제목이 수정되었습니다");
     } catch (error) {
       const axiosError = error as AxiosError<ErrorType>;
       toast.error(axiosError.message);
diff --git a/src/components/LinkUpload.tsx b/src/components/LinkUpload.tsx
index 7610e09..edbe7f5 100644
--- a/src/components/LinkUpload.tsx
+++ b/src/components/LinkUpload.tsx
@@ -2,7 +2,7 @@
 
 import { useState } from "react";
 
-import { InitialTodoType } from "@/app/Types/TodoGoalType";
+import { InitialTodoType } from "@/app/types/todoGoalType";
 
 type LinkUploadProps = {
   closeSecond: () => void;
diff --git a/src/components/WhoRU.tsx b/src/components/WhoRU.tsx
deleted file mode 100644
index 144049a..0000000
--- a/src/components/WhoRU.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-"use client";
-
-import { IoCloseOutline } from "react-icons/io5";
-import React, { ReactNode } from "react";
-
-type ModalProps = {
-  children: ReactNode;
-  type: "first" | "second";
-};
-
-export default function WhoRU({ children }: ModalProps) {
-  const handleClose = () => {};
-
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center">
-      <div className="fixed inset-0 bg-black bg-opacity-5" onClick={handleClose} />
-      <div className="relative z-50 w-full max-w-lg rounded-xl bg-white p-6">
-        {children}
-        <button onClick={handleClose} className="absolute right-5 top-6 text-2xl text-slate-500 hover:text-slate-800">
-          <IoCloseOutline />
-        </button>
-      </div>
-    </div>
-  );
-}
diff --git a/src/lib/api.ts b/src/lib/api.ts
index 73161f6..8faac82 100644
--- a/src/lib/api.ts
+++ b/src/lib/api.ts
@@ -3,7 +3,7 @@ import axios from "axios";
 import { useAuthStore } from "@/store/authStore";
 
 const api = axios.create({
-  baseURL: process.env.NEXT_PUBLIC_API_URL, // 여기에 실제 API 기본 URL을 설정하세요
+  baseURL: process.env.NEXT_PUBLIC_API_URL,
 });
 
 api.interceptors.request.use(
diff --git a/src/store/todoStore.ts b/src/store/todoStore.ts
index f6afafc..12cb7f7 100644
--- a/src/store/todoStore.ts
+++ b/src/store/todoStore.ts
@@ -1,114 +1,15 @@
 import { create } from "zustand";
 
-import { createTodo, getAllTodos, getTodos, updateTodo } from "@/api/todoAPI";
-
-export type TodoType = {
-  noteId?: number | null;
-  done: boolean;
-  linkUrl?: string | null;
-  fileUrl?: string | null;
-  title: string;
-  id: number;
-  goal: GoalType;
-  userId: number;
-  teamId: string;
-  updatedAt: string;
-  createdAt: string;
-};
-
-export type GoalType = {
-  id: number;
-  teamId: string;
-  title: string;
-  userId: number;
-  createdAt: string;
-  updatedAt: string;
-};
-
-// Todo 상태 정의
-export type TodoState = {
-  todos: TodoType[];
-  fetchTodos: () => Promise<void>; // 모든 할 일을 가져오는 메서드
-  fetchTodosByGoal: (goalId: number) => Promise<void>; // 특정 목표의 할 일을 가져오는 메서드
-  setTodos: (todos: TodoType[]) => void; // setTodos 추가
-  addTodo: (title: string, goalId: number, fileUrl?: string | null, linkUrl?: string | null) => Promise<TodoType>;
-  updateTodo: (todoId: number, updates: Partial<TodoType>) => Promise<TodoType>;
-  refreshTodos: () => Promise<void>;
-  toggleTodo: (id: number) => void; // id를 받아서 toggle하도록 수정
+type TodoState = {
+  isUpdated: boolean;
+  updateTodos: () => void;
 };
 
+// Zustand 스토어 생성
 export const useTodoStore = create<TodoState>((set) => ({
-  todos: [],
-  fetchTodos: async () => {
-    try {
-      const response = await getAllTodos();
-      const todos = response.todos; // todos 속성에서 배열을 가져옴
-      console.log(todos);
-      if (Array.isArray(todos)) {
-        set({ todos });
-      } else {
-        console.error("fetchTodos에서 반환된 값이 배열이 아닙니다.", todos);
-      }
-    } catch (error) {
-      console.error("모든 할 일 가져오는 중 오류 발생:", error);
-    }
-  },
-  fetchTodosByGoal: async (goalId: number) => {
-    try {
-      const todos = await getTodos(goalId); // 목표에 해당하는 할 일 가져오기
-      if (Array.isArray(todos)) {
-        set({ todos });
-      } else {
-        console.error(`fetchTodosByGoal에서 반환된 값이 배열이 아닙니다.`, todos);
-      }
-    } catch (error) {
-      console.error(`목표 ID ${goalId}의 할 일 가져오는 중 오류 발생:`, error);
-    }
-  },
-  setTodos: (todos: TodoType[]) => {
-    if (Array.isArray(todos)) {
-      set({ todos }); // todos가 배열이면 상태 업데이트
-    } else {
-      console.error("setTodos에 전달된 값이 배열이 아닙니다.", todos);
-    }
-  },
-  addTodo: async (
-    title: string,
-    goalId: number,
-    fileUrl?: string | null,
-    linkUrl?: string | null,
-  ): Promise<TodoType> => {
-    const response = await createTodo(title, goalId, fileUrl, linkUrl);
-    const newTodo: TodoType = response;
-
-    set((state) => ({
-      todos: [...state.todos, newTodo], // 새 할 일을 배열의 끝에 추가
-    }));
-    return newTodo;
-  },
-
-  updateTodo: async (todoId: number, updates: Partial<TodoType>): Promise<TodoType> => {
-    const response = await updateTodo(todoId, updates); // PatchGoal 호출
-    const updatedTodo: TodoType = response; // 응답의 data에서 GoalType 추출
-
-    set((state) => ({
-      todos: state.todos.map((todo) => (todo.id === todoId ? { ...todo, ...updatedTodo } : todo)),
-    }));
-
-    return updatedTodo;
-  },
-
-  refreshTodos: async () => {
-    const todoListResponse = await getAllTodos();
-    const todoList = todoListResponse?.todos || []; // 할 일 목록을 가져옴
-    set({ todos: todoList }); // 상태 업데이트
-  },
-
-  toggleTodo: (id: number) => {
+  isUpdated: false, // 초기값
+  updateTodos: () =>
     set((state) => ({
-      todos: state.todos.map(
-        (t) => (t.id === id ? { ...t, done: !t.done } : t), // 현재 todo의 done 상태를 반전
-      ),
-    }));
-  },
+      isUpdated: !state.isUpdated, // 상태 업데이트
+    })),
 }));
diff --git a/src/utils/AnimatedText.tsx b/src/utils/AnimatedText.tsx
index eed4bb7..73b28f8 100644
--- a/src/utils/AnimatedText.tsx
+++ b/src/utils/AnimatedText.tsx
@@ -37,7 +37,7 @@ const AnimatedText = ({ text, onClick }: AnimatedTextProps) => {
 
   return (
     <button
-      className="text-3 text-slate-400 hover:underline"
+      className="text-3 font-semibold text-slate-400 hover:underline"
       ref={textRef}
       onClick={onClick}
       onMouseEnter={handleMouseEnter}
diff --git a/src/utils/authUtils.ts b/src/utils/authUtils.ts
index f798cb1..ab85dad 100644
--- a/src/utils/authUtils.ts
+++ b/src/utils/authUtils.ts
@@ -1,11 +1,10 @@
 import api from "@/lib/api";
 import { useAuthStore } from "@/store/authStore";
 
-// 로그인 할 때, 바디에 받아서
 export const login = async (email: string, password: string) => {
   try {
     const { data } = await api.post("/auth/login", { email, password });
-    document.cookie = `accessToken=${data.accessToken}; path=/; max-age=3600`;
+    document.cookie = `accessToken=${data.accessToken}; path=/; max-age=86400; secure; SameSite=Strict`;
     localStorage.setItem("refreshToken", data.refreshToken);
     useAuthStore.getState().setUser(data.user);
     useAuthStore.getState().setIsAuthenticated(true);