refactor: branch관련 context를 store로 리펙토링

packages/view/src/App.tsx

@@ -11,12 +11,13 @@ import { useGlobalData } from "hooks";
 import { RefreshButton } from "components/RefreshButton";
 import type { IDESentEvents } from "types/IDESentEvents";
 import type { RemoteGitHubInfo } from "types/RemoteGitHubInfo";
-import { useLoadingStore } from "store";
+import { useBranchStore, useLoadingStore } from "store";
 
 const App = () => {
   const initRef = useRef<boolean>(false);
 
-  const { filteredData, handleChangeAnalyzedData, handleChangeBranchList } = useGlobalData();
+  const { filteredData, handleChangeAnalyzedData } = useGlobalData();
+  const { handleChangeBranchList } = useBranchStore();
   const { loading, setLoading } = useLoadingStore((state) => state);
 
   const ideAdapter = container.resolve<IDEPort>("IDEAdapter");
@@ -68,9 +69,11 @@ const App = () => {
   return (
     <>
       <div className="header-container">
-        <ThemeSelector />
         <BranchSelector />
-        <RefreshButton />
+        <div className="header-buttons">
+          <ThemeSelector />
+          <RefreshButton />
+        </div>
       </div>
       <div className="top-container">
         <TemporalFilter />

packages/view/src/components/BranchSelector/BranchSelector.tsx

@@ -3,15 +3,14 @@ import FormControl from "@mui/material/FormControl";
 import type { SelectChangeEvent } from "@mui/material/Select";
 import Select from "@mui/material/Select";
 
-import { useGlobalData } from "hooks";
 import { sendFetchAnalyzedDataCommand } from "services";
 import "./BranchSelector.scss";
-import { useLoadingStore } from "store";
+import { useBranchStore, useLoadingStore } from "store";
 
 import { SLICE_LENGTH } from "./BranchSelector.const";
 
 const BranchSelector = () => {
-  const { branchList, selectedBranch, setSelectedBranch } = useGlobalData();
+  const { branchList, selectedBranch, setSelectedBranch } = useBranchStore();
   const { setLoading } = useLoadingStore((state) => state);
 
   const handleChangeSelect = (event: SelectChangeEvent) => {

packages/view/src/components/RefreshButton/RefreshButton.tsx

@@ -4,13 +4,12 @@ import ReplayCircleFilledRoundedIcon from "@mui/icons-material/ReplayCircleFille
 import { IconButton } from "@mui/material";
 
 import { throttle } from "utils";
-import { useGlobalData } from "hooks";
 import "./RefreshButton.scss";
 import { sendRefreshDataCommand } from "services";
-import { useLoadingStore } from "store";
+import { useBranchStore, useLoadingStore } from "store";
 
 const RefreshButton = () => {
-  const { selectedBranch } = useGlobalData();
+  const { selectedBranch } = useBranchStore();
   const { loading, setLoading } = useLoadingStore((state) => state);
 
   const refreshHandler = throttle(() => {

packages/view/src/context/GlobalDataProvider.tsx

@@ -10,16 +10,9 @@ export const GlobalDataProvider = ({ children }: PropsWithChildren) => {
   const [filteredData, setFilteredData] = useState<ClusterNode[]>(data);
   const [selectedData, setSelectedData] = useState<ClusterNode[]>([]);
   const { setLoading } = useLoadingStore((state) => state);
-  const [branchList, setBranchList] = useState<string[]>([]);
-  const [selectedBranch, setSelectedBranch] = useState<string>(branchList?.[0]);
   const [owner, setOwner] = useState<string>("");
   const [repo, setRepo] = useState<string>("");
 
-  const handleChangeBranchList = (branches: { branchList: string[]; head: string | null }) => {
-    setSelectedBranch((prev) => (!prev && branches.head ? branches.head : prev));
-    setBranchList(branches.branchList);
-  };
-
   const handleChangeAnalyzedData = (analyzedData: ClusterNode[]) => {
     setData(analyzedData);
     setFilteredData([...analyzedData.reverse()]);
@@ -34,18 +27,13 @@ export const GlobalDataProvider = ({ children }: PropsWithChildren) => {
       setFilteredData,
       selectedData,
       setSelectedData,
-      branchList,
-      setBranchList,
-      selectedBranch,
-      setSelectedBranch,
       handleChangeAnalyzedData,
-      handleChangeBranchList,
       owner,
       setOwner,
       repo,
       setRepo,
     }),
-    [data, filteredData, selectedData, branchList, selectedBranch, owner, repo]
+    [data, filteredData, selectedData, owner, repo]
   );
 
   return <GlobalDataContext.Provider value={value}>{children}</GlobalDataContext.Provider>;

packages/view/src/hooks/useGlobalData.ts

@@ -1,23 +1,20 @@
 import type { Dispatch, SetStateAction } from "react";
 import { createContext, useContext } from "react";
 
-import type { ClusterNode, IDESentEvents } from "types";
+import type { ClusterNode } from "types";
 
 type GlobalDataState = {
   data: ClusterNode[];
   filteredData: ClusterNode[];
   selectedData: ClusterNode[];
   setFilteredData: Dispatch<SetStateAction<ClusterNode[]>>;
   setSelectedData: Dispatch<SetStateAction<ClusterNode[]>>;
-  branchList: string[];
-  setBranchList: Dispatch<SetStateAction<string[]>>;
-  selectedBranch: string;
-  setSelectedBranch: Dispatch<SetStateAction<string>>;
   owner: string;
   setOwner: Dispatch<SetStateAction<string>>;
   repo: string;
   setRepo: Dispatch<SetStateAction<string>>;
-} & IDESentEvents;
+  handleChangeAnalyzedData: (analyzedData: ClusterNode[]) => void;
+}; // handleChangeBranchList를 임시로 제외 -> 추후 GlobalDataContext를 삭제할 예정
 
 export const GlobalDataContext = createContext<GlobalDataState | undefined>(undefined);
 

packages/view/src/store/branch.ts

@@ -0,0 +1,26 @@
+import { create } from "zustand";
+
+export type BranchListPayload = {
+  branchList: string[];
+  head: string | null;
+};
+
+type BranchStore = {
+  branchList: string[];
+  selectedBranch: string;
+  setBranchList: (branches: string[]) => void;
+  setSelectedBranch: (branch: string) => void;
+  handleChangeBranchList: (branches: BranchListPayload) => void;
+};
+
+export const useBranchStore = create<BranchStore>((set) => ({
+  branchList: [],
+  selectedBranch: "",
+  setBranchList: (branches) => set({ branchList: branches }),
+  setSelectedBranch: (branch) => set({ selectedBranch: branch }),
+  handleChangeBranchList: (branches) =>
+    set((state) => ({
+      branchList: branches.branchList,
+      selectedBranch: !state.selectedBranch && branches.head ? branches.head : state.selectedBranch,
+    })),
+}));

packages/view/src/store/index.ts

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

packages/view/src/types/IDESentEvents.ts

@@ -1,7 +1,8 @@
+import type { BranchListPayload } from "store";
 import type { ClusterNode } from "types";
 
 // triggered by ide response
 export type IDESentEvents = {
   handleChangeAnalyzedData: (analyzedData: ClusterNode[]) => void;
-  handleChangeBranchList: (branches: { branchList: string[]; head: string | null }) => void;
+  handleChangeBranchList: (branches: BranchListPayload) => void;
 };