[Refactor]: 상위 목표 뷰 리팩토링

src/api/domain/edit/hook.ts

@@ -22,6 +22,7 @@ export const useUpperGoalIds = (mandalartId: number) => {
   return useQuery({
     queryKey: EDIT_QUERY_KEY.upperGoalIds(mandalartId),
     queryFn: () => getUpperGoalIds(mandalartId),
+    enabled: !!mandalartId,
   });
 };
 
@@ -31,10 +32,13 @@ export const useSubGoals = (
   cycle?: CycleType,
   options?: Omit<UseQueryOptions<BaseResponse<SubGoalsResponse>>, 'queryKey' | 'queryFn'>,
 ) => {
+  const enabled = !!mandalartId && (options?.enabled ?? true);
+
   return useQuery({
     queryKey: EDIT_QUERY_KEY.subGoals(mandalartId, coreGoalId, cycle),
     queryFn: () => getSubGoals(mandalartId, coreGoalId, cycle),
     ...options,
+    enabled,
   });
 };
 
@@ -61,5 +65,6 @@ export const useCoreGoals = (mandalartId: number) => {
   return useQuery({
     queryKey: EDIT_QUERY_KEY.coreGoals(mandalartId),
     queryFn: () => getCoreGoals(mandalartId),
+    enabled: !!mandalartId,
   });
 };

src/api/domain/history/hook/useGetHistory.ts

@@ -8,5 +8,6 @@ export const useGetHistory = (mandalartId: number) => {
   return useQuery<historyResponse>({
     queryKey: QUERY_KEY.HISTORY(mandalartId),
     queryFn: () => getHistory(mandalartId),
+    enabled: !!mandalartId,
   });
 };

src/api/domain/history/hook/useGetStreak.ts

@@ -8,5 +8,6 @@ export const useGetStreak = (mandalartId: number) => {
   return useQuery<StreakResponse>({
     queryKey: QUERY_KEY.STREAK(mandalartId),
     queryFn: () => getStreak(mandalartId),
+    enabled: !!mandalartId,
   });
 };

src/api/domain/lowerTodo/hook/useCoreGoals.ts

@@ -8,5 +8,6 @@ export const useCoreGoals = (mandalartId: number) => {
   return useQuery({
     queryKey: QUERY_KEY.MANDALART_CORE_GOALS(mandalartId),
     queryFn: () => getCoreGoals(mandalartId),
+    enabled: !!mandalartId,
   });
 };

src/api/domain/mandalAll/hook.ts

@@ -11,5 +11,6 @@ export const useMandalAll = (mandalartId: number) => {
   return useQuery({
     queryKey: MANDAL_ALL_KEY.detail(mandalartId),
     queryFn: () => getMandalAll(mandalartId),
+    enabled: !!mandalartId,
   });
 };

src/api/domain/myTodo/hook/useGetRecommendation.ts

@@ -7,5 +7,6 @@ export const useGetRecommendation = (mandalartId: number, date: string) => {
   return useQuery({
     queryKey: [QUERY_KEY.RECOMMENDED_TODO(mandalartId), date],
     queryFn: () => getRecommendation(mandalartId, { date }),
+    enabled: !!mandalartId,
   });
 };

src/api/domain/myTodo/hook/useMyMandal.ts

@@ -19,13 +19,15 @@ export const useGetMandalAll = (mandalartId: number) => {
   return useQuery({
     queryKey: [QUERY_KEY.ENTIRE_GOAL, mandalartId],
     queryFn: () => getMandalAll(mandalartId),
+    enabled: !!mandalartId,
   });
 };
 
 export const useGetMandalCoreGoals = (mandalartId: number) => {
   return useQuery<MandalCoreGoalsResponse>({
     queryKey: [QUERY_KEY.CORE_GOALS, mandalartId],
     queryFn: () => getMandalCoreGoals(mandalartId),
+    enabled: !!mandalartId,
   });
 };
 

src/api/domain/upperTodo/hook.ts

@@ -16,6 +16,7 @@ export const useGetMandalAll = (mandalartId: number) => {
   return useQuery({
     queryKey: [QUERY_KEY.ENTIRE_GOAL, mandalartId],
     queryFn: () => getMandalAll(mandalartId),
+    enabled: !!mandalartId,
   });
 };
 

src/api/domain/upperTodo/index.ts

@@ -15,7 +15,7 @@ export const getMandalAll = async (mandalartId: number) => {
 };
 
 export const getCoreGoalIdPositions = async (mandalartId: number) => {
-  const res = await axiosInstance.get<BaseResponse<{ coreGoalIds: CoreGoalIdPosition[] }>>( // 응답 구조 변경
+  const res = await axiosInstance.get<BaseResponse<{ coreGoalIds: CoreGoalIdPosition[] }>>(
     `/${END_POINT.MANDALART}/${mandalartId}/${END_POINT.CORE_GOAL}/id-positions`,
   );
   return res.data.data;

src/common/hook/useMandalartId.ts

@@ -0,0 +1,30 @@
+import { useEffect, useState } from 'react';
+
+const readMandalartId = () => {
+  if (typeof window === 'undefined') {
+    return 0;
+  }
+  const value = localStorage.getItem('mandalartId');
+  return value ? Number(value) : 0;
+};
+
+export const useMandalartId = () => {
+  const [mandalartId, setMandalartId] = useState(0);
+
+  useEffect(() => {
+    const syncMandalartId = () => setMandalartId(readMandalartId());
+
+    syncMandalartId();
+
+    const handleStorage = (e: StorageEvent) => {
+      if (e.key === 'mandalartId') {
+        syncMandalartId();
+      }
+    };
+
+    window.addEventListener('storage', handleStorage);
+    return () => window.removeEventListener('storage', handleStorage);
+  }, []);
+
+  return mandalartId;
+};

src/page/history/History.tsx

@@ -3,17 +3,17 @@ import { useState } from 'react';
 import * as styles from '@/page/history/History.css';
 import StreakTracker from '@/page/history/StreakTrackerSection/StreakTrackerSection';
 import { useGetHistory } from '@/api/domain/history/hook/useGetHistory';
+import { useMandalartId } from '@/common/hook/useMandalartId';
 import Loading from '@/common/component/Loading/Loading';
 
 const STREAK_BANNER_MESSAGE = '작은 실천을 66일 이어가면 나의 목표에 도달합니다';
 const STREAK_DESCRIPTION_MESSAGE = '하루에 하나라도 실천하면 오늘의 점이 찍혀요!';
 
-const MANDALART_ID = 1;
-
 const History = () => {
   const [selectedDay, setSelectedDay] = useState<number | null>(null);
+  const mandalartId = useMandalartId();
 
-  const { data, isLoading } = useGetHistory(MANDALART_ID);
+  const { data, isLoading } = useGetHistory(mandalartId);
 
   const handleOutsideClick = () => {
     setSelectedDay(null);

src/page/history/StreakTrackerSection/StreakTrackerSection.tsx

@@ -4,10 +4,9 @@ import StreakDetail from '@/page/history/component/StreakDetail/StreakDetail';
 import StreakGrid from '@/page/history/component/StreakGrid/StreakGrid';
 import * as styles from '@/page/history/StreakTrackerSection/StreakTrackerSection.css';
 import { useGetStreak } from '@/api/domain/history/hook/useGetStreak';
+import { useMandalartId } from '@/common/hook/useMandalartId';
 import Loading from '@/common/component/Loading/Loading';
 
-const MANDALART_ID = 1;
-
 type StreakTrackerProps = {
   selectedDay: number | null;
   setSelectedDay: (day: number | null) => void;
@@ -19,7 +18,9 @@ const StreakTracker = ({ selectedDay, setSelectedDay }: StreakTrackerProps) => {
   const isLocked = selectedDay !== null;
   const visibleDay = isLocked ? selectedDay : hoveredDay;
 
-  const { data, isLoading } = useGetStreak(MANDALART_ID);
+  const mandalartId = useMandalartId();
+
+  const { data, isLoading } = useGetStreak(mandalartId);
 
   if (isLoading || !data) {
     return <Loading type="history" />;

src/page/mandal/Mandal.tsx

@@ -5,11 +5,13 @@ import EntireMandal from './component/EntireMandal/EntireMandal';
 import EditBtn from './component/EditBtn/EditBtn';
 
 import { useMandalAll } from '@/api/domain/mandalAll/hook';
+import { useMandalartId } from '@/common/hook/useMandalartId';
 import Mandalart from '@/common/component/Mandalart/Mandalart';
 
 const Mandal = () => {
   const { viewType, handleViewChange } = useMandalView();
-  const { data: mandalartData } = useMandalAll(1);
+  const mandalartId = useMandalartId();
+  const { data: mandalartData } = useMandalAll(mandalartId);
 
   if (!mandalartData) {
     return null;

src/page/todo/entireTodo/Todo.tsx

@@ -18,22 +18,25 @@ const Todo = () => {
   const isValid = trimmed.length > 0;
   const displayedText = useTypingEffect(FULL_TEXT, TYPING_DURATION);
 
-  const { mutate, isPending } = useCreateEntireTodo();
+  const { mutateAsync, isPending } = useCreateEntireTodo();
   const navigate = useNavigate();
 
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     if (!isValid || isPending) {
       return;
     }
 
     const title = trimmed;
-    mutate(
-      { title },
-      {
-        onSuccess: () => navigate(PATH.TODO_UPPER),
-      },
-    );
+    try {
+      const data = await mutateAsync({ title });
+      if (typeof window !== 'undefined') {
+        localStorage.setItem('mandalartId', String(data.id));
+      }
+      navigate(PATH.TODO_UPPER);
+    } catch {
+      alert('목표 생성에 실패했습니다.');
+    }
   };
 
   if (isPending) {

src/page/todo/lowerTodo/LowerTodo.tsx

@@ -23,6 +23,7 @@ import { useDeleteSubGoal } from '@/api/domain/lowerTodo/hook/useDeleteSubGoal';
 import { useAiRecommendSubGoal } from '@/api/domain/lowerTodo/hook/useAiRecommendSubGoal';
 import { completeMandalart } from '@/api/domain/lowerTodo';
 import { postAiRecommendSubGoals } from '@/api/domain/lowerTodo';
+import { useMandalartId } from '@/common/hook/useMandalartId';
 
 interface LowerTodoProps {
   userName?: string;
@@ -49,7 +50,7 @@ const LowerTodo = ({ userName = '김도트' }: LowerTodoProps) => {
     [position: number]: number | null;
   }>({});
 
-  const mandalartId = 1;
+  const mandalartId = useMandalartId();
   const { data: coreGoalsData } = useCoreGoals(mandalartId);
   const { data: overallGoalData } = useOverallGoal(mandalartId);
 

src/page/todo/myTodo/MyTodo.tsx

@@ -8,6 +8,7 @@ import type { MandalartData } from './constant/mock';
 import { DatePicker } from '@/page/todo/myTodo/component/DatePicker';
 import type { TodoItemTypes } from '@/page/todo/myTodo/component/TodoBox/TodoBox.types';
 import { useGetMandalAll } from '@/api/domain/myTodo/hook/useMyMandal';
+import { useMandalartId } from '@/common/hook/useMandalartId';
 
 interface MyTodoProps {
   userName?: string;
@@ -42,7 +43,7 @@ const MyTodo = ({
     initialMyTodos,
   });
 
-  const mandalartId = 1;
+  const mandalartId = useMandalartId();
   const { data } = useGetMandalAll(mandalartId);
 
   return (

src/page/todo/myTodo/component/TodoCheckSection/TodoCheckSection.tsx

@@ -7,6 +7,7 @@ import {
   useGetMandalCoreGoals,
   useGetMandalartSubGoals,
 } from '@/api/domain/myTodo/hook/useMyMandal';
+import { useMandalartId } from '@/common/hook/useMandalartId';
 import { useCheckSubGoal, useUncheckSubGoal } from '@/api/domain/myTodo/hook/useMyMandal';
 import { CycleChip } from '@/page/todo/myTodo/component/CycleChip';
 import { TodoBox } from '@/page/todo/myTodo/component/TodoBox';
@@ -37,9 +38,13 @@ const TodoCheckSection = ({
   onMandalartClick,
   selectedParentId,
 }: TodoCheckSectionProps) => {
-  const mandalartId = 1;
+  const mandalartId = useMandalartId();
   const { data: coreGoalsData } = useGetMandalCoreGoals(mandalartId);
-  const { data: subGoalResponse } = useGetMandalartSubGoals(1, selectedParentId, selectedCycle);
+  const { data: subGoalResponse } = useGetMandalartSubGoals(
+    mandalartId,
+    selectedParentId,
+    selectedCycle,
+  );
 
   const [localSubGoals, setLocalSubGoals] = useState<TodoItemTypes[]>([]);
 

src/page/todo/myTodo/hook/useMyTodo.ts

@@ -7,8 +7,7 @@ import { createDate, formatDateDot } from '@/common/util/format';
 import { useGetRecommendation } from '@/api/domain/myTodo/hook/useGetRecommendation';
 import { usePostRecommendation } from '@/api/domain/myTodo/hook/usePostRecommendation';
 import { useDeleteRecommendation } from '@/api/domain/myTodo/hook/useDeleteRecommendation';
-
-const MANDALART_ID = 1;
+import { useMandalartId } from '@/common/hook/useMandalartId';
 
 const mockSubGoals = Array.from({ length: 8 * 8 }, (_, i) => {
   const parentId = Math.floor(i / 8) + 1;
@@ -36,6 +35,7 @@ const MIN_DATE = createDate(2025, 1, 1);
 const MAX_DATE = createDate(2025, 1, 31);
 
 export const useMyTodo = ({ initialDate = createDate(2025, 7, 18) }: UseMyTodoProps = {}) => {
+  const MANDALART_ID = useMandalartId();
   const [currentDate, setCurrentDate] = useState(initialDate);
   const [selectedCycle, setSelectedCycle] = useState<CycleType>();
   const [selectedParentId, setSelectedParentId] = useState<number>();