Merge pull request #190 from SOPT-36-NINEDOT/refactor/#186/upperTodo

Refactor: 상위 목표 뷰 리팩토링

Author: jisooooooooooo

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;
+};