refactor: filteredRange zustand store로 변경

packages/view/src/components/TemporalFilter/LineChart.ts

@@ -1,7 +1,7 @@
 import * as d3 from "d3";
 import dayjs from "dayjs";
+import { type DateFilterRange } from "store";
 
-import type { DateFilterRange } from "hooks";
 import "./LineChart.scss";
 
 export type LineChartDatum = {

packages/view/src/components/TemporalFilter/TemporalFilter.tsx

@@ -6,7 +6,7 @@ import BounceLoader from "react-spinners/BounceLoader";
 import { Button } from "@mui/material";
 
 import { useGlobalData } from "hooks";
-import { useLoadingStore } from "store";
+import { useLoadingStore, useFilteredRangeStore } from "store";
 
 import { filterDataByDate, getMinMaxDate, lineChartTimeFormatter, sortBasedOnCommitNode } from "./TemporalFilter.util";
 import "./TemporalFilter.scss";
@@ -18,8 +18,9 @@ import { createBrush, drawBrush, resetBrush } from "./LineChartBrush";
 import { BRUSH_MARGIN, TEMPORAL_FILTER_LINE_CHART_STYLES } from "./LineChart.const";
 
 const TemporalFilter = () => {
-  const { data, filteredData, setFilteredData, filteredRange, setFilteredRange, setSelectedData } = useGlobalData();
+  const { data, filteredData, setFilteredData, setSelectedData } = useGlobalData();
   const { loading } = useLoadingStore((state) => state);
+  const { filteredRange, setFilteredRange } = useFilteredRangeStore();
   const brushGroupRef = useRef<SVGGElement | null>(null);
   const brushRef = useRef<d3.BrushBehavior<unknown>>();
 

packages/view/src/context/GlobalDataProvider.tsx

@@ -1,15 +1,14 @@
 import type { PropsWithChildren } from "react";
 import { useMemo, useState } from "react";
 
-import { GlobalDataContext, type DateFilterRange } from "hooks";
+import { GlobalDataContext } from "hooks";
 import type { ClusterNode } from "types";
 import { useLoadingStore } from "store";
 
 export const GlobalDataProvider = ({ children }: PropsWithChildren) => {
   const [data, setData] = useState<ClusterNode[]>([]);
   const [filteredData, setFilteredData] = useState<ClusterNode[]>(data);
   const [selectedData, setSelectedData] = useState<ClusterNode[]>([]);
-  const [filteredRange, setFilteredRange] = useState<DateFilterRange>(undefined);
   const { setLoading } = useLoadingStore((state) => state);
   const [branchList, setBranchList] = useState<string[]>([]);
   const [selectedBranch, setSelectedBranch] = useState<string>(branchList?.[0]);
@@ -31,8 +30,6 @@ export const GlobalDataProvider = ({ children }: PropsWithChildren) => {
   const value = useMemo(
     () => ({
       data,
-      filteredRange,
-      setFilteredRange,
       filteredData,
       setFilteredData,
       selectedData,
@@ -48,7 +45,7 @@ export const GlobalDataProvider = ({ children }: PropsWithChildren) => {
       repo,
       setRepo,
     }),
-    [data, filteredRange, filteredData, selectedData, branchList, selectedBranch, owner, repo]
+    [data, filteredData, selectedData, branchList, selectedBranch, owner, repo]
   );
 
   return <GlobalDataContext.Provider value={value}>{children}</GlobalDataContext.Provider>;

packages/view/src/hooks/useGlobalData.ts

@@ -3,21 +3,12 @@ import { createContext, useContext } from "react";
 
 import type { ClusterNode, IDESentEvents } from "types";
 
-export type DateFilterRange =
-  | {
-      fromDate: string;
-      toDate: string;
-    }
-  | undefined;
-
 type GlobalDataState = {
   data: ClusterNode[];
-  filteredRange: DateFilterRange;
   filteredData: ClusterNode[];
   selectedData: ClusterNode[];
   setFilteredData: Dispatch<SetStateAction<ClusterNode[]>>;
   setSelectedData: Dispatch<SetStateAction<ClusterNode[]>>;
-  setFilteredRange: Dispatch<SetStateAction<DateFilterRange>>;
   branchList: string[];
   setBranchList: Dispatch<SetStateAction<string[]>>;
   selectedBranch: string;

packages/view/src/store/filteredRange.ts

@@ -0,0 +1,18 @@
+import { create } from "zustand";
+
+export type DateFilterRange =
+  | {
+      fromDate: string;
+      toDate: string;
+    }
+  | undefined;
+
+type FilteredRangeStore = {
+  filteredRange: DateFilterRange;
+  setFilteredRange: (filteredRange: DateFilterRange) => void;
+};
+
+export const useFilteredRangeStore = create<FilteredRangeStore>((set) => ({
+  filteredRange: undefined,
+  setFilteredRange: (filteredRange) => set({ filteredRange }),
+}));

packages/view/src/store/index.ts

@@ -1 +1,2 @@
 export * from "./loading";
+export * from "./filteredRange";