refactor: 목표 추가 시 무한 스크롤도 동작되도록 리팩토링 및 WIP

deipanema · Oct 30, 2024 · f146140 · f146140
1 parent 03a5dbc
commit f146140
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 14 deletions.
diff --git a/src/api/goalAPI.ts b/src/api/goalAPI.ts
@@ -23,7 +23,7 @@ export const getGoals = async () => {
   }
 };
 
-export const PostGoal = async (title: string) => {
+export const postGoal = async (title: string) => {
   try {
     return await api.post(`/goals`, {
       title,
@@ -53,7 +53,7 @@ export const deleteGoal = async (id: number) => {
   }
 };
 
-export const PatchGoal = async (id: number, title: string) => {
+export const patchGoal = async (id: number, title: string) => {
   try {
     const response = await api.patch(`/goals/${id}`, { title });
     return response;

diff --git a/src/app/(auth)/components/LoginForm.tsx b/src/app/(auth)/components/LoginForm.tsx
@@ -8,7 +8,7 @@ import LoadingSpinner from "@/components/LoadingSpinner";
 import { useAuth } from "@/hooks/useAuth";
 
 type FormData = z.infer<typeof schema>;
-
+// TODO: 400코드 에러 메시지
 export default function LoginForm() {
   const { loginMutation } = useAuth();
 

diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
@@ -6,19 +6,17 @@ import { useEffect, useState } from "react";
 import { useInfiniteQuery } from "@tanstack/react-query";
 import { useInView } from "react-intersection-observer";
 
-import { getInfinityScrollGoals } from "@/api/goalAPI";
-import { getAllTodos } from "@/api/todoAPI";
-import { useTodoStore } from "@/store/todoStore";
 import LoadingSpinner from "@/components/LoadingSpinner";
 import LoadingScreen from "@/components/LoadingScreen";
+import { getInfinityScrollGoals } from "@/api/goalAPI";
+import { getAllTodos } from "@/api/todoAPI";
 import { GoalType, TodoType } from "@/type";
 
 import TodoCard from "./components/TodoCard";
 import ProgressTracker from "./components/ProgressTracker";
 import TodoItem from "./components/TodoItem";
 
 export default function DashboardPage() {
-  const { isUpdated } = useTodoStore();
   const [recentTodos, setRecentTodos] = useState<TodoType[]>([]);
   const [progressPercentage, setProgressPercentage] = useState(0);
   const [completionRatio, setCompletionRatio] = useState(0);
@@ -32,7 +30,7 @@ export default function DashboardPage() {
     isFetchingNextPage,
     isLoading: isGoalsLoading,
   } = useInfiniteQuery({
-    queryKey: ["infiniteGoals"],
+    queryKey: ["goals"],
     queryFn: async ({ pageParam }) => {
       const response = await getInfinityScrollGoals({ cursor: pageParam, size: 3, sortOrder: "oldest" });
       return response;
@@ -57,7 +55,6 @@ 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);
@@ -72,7 +69,7 @@ export default function DashboardPage() {
   useEffect(() => {
     loadDashboardData();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isUpdated]);
+  }, []);
 
   // 로딩 상태 처리
   if (isGoalsLoading) {

diff --git a/src/store/goalStore.ts b/src/store/goalStore.ts
@@ -1,6 +1,6 @@
 import { create } from "zustand";
 
-import { getGoals, PatchGoal, PostGoal } from "@/api/goalAPI";
+import { getGoals, patchGoal, postGoal } from "@/api/goalAPI";
 import { GoalType } from "@/type";
 
 export type GoalState = {
@@ -14,7 +14,7 @@ export const useGoalStore = create<GoalState>((set) => ({
   goals: [],
 
   addGoal: async (title: string): Promise<GoalType> => {
-    const response = await PostGoal(title);
+    const response = await postGoal(title);
     const newGoal: GoalType = response?.data;
 
     set((state) => ({
@@ -27,7 +27,7 @@ export const useGoalStore = create<GoalState>((set) => ({
   },
 
   updateGoal: async (id: number, title: string): Promise<GoalType> => {
-    const response = await PatchGoal(id, title); // PatchGoal 호출
+    const response = await patchGoal(id, title); // PatchGoal 호출
     const updatedGoal: GoalType = response?.data; // 응답의 data에서 GoalType 추출
 
     set((state) => ({

diff --git a/src/utils/authUtils.ts b/src/utils/authUtils.ts
@@ -4,7 +4,7 @@ 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=86400; secure; SameSite=Strict`;
+    document.cookie = `accessToken=${data.accessToken}; path=/; max-age=3600; secure; SameSite=Strict`;
     localStorage.setItem("refreshToken", data.refreshToken);
     useAuthStore.getState().setUser(data.user);
     useAuthStore.getState().setIsAuthenticated(true);