feature : 상태관리 zustand 방식으로 변경

Author: WoongyuChoi

package-lock.json

@@ -18,7 +18,8 @@
     "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.3.1",
     "react-lottie-player": "^2.1.0",
-    "react-router-dom": "^6.27.0"
+    "react-router-dom": "^6.27.0",
+    "zustand": "^5.0.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.11.1",

package.json

@@ -11,16 +11,16 @@ function App() {
   const [queryClient] = useState(() => new QueryClient());
   return (
     <QueryClientProvider client={queryClient}>
-      <UsePlayingProvider>
-        <ChartProvider>
-          <BrowserRouter>
-            <SpeedInsights />
-            <Routes>
-              <Route path="/" element={<Home />} />
-            </Routes>
-          </BrowserRouter>
-        </ChartProvider>
-      </UsePlayingProvider>
+      {/* <UsePlayingProvider> */}
+      <ChartProvider>
+        <BrowserRouter>
+          <SpeedInsights />
+          <Routes>
+            <Route path="/" element={<Home />} />
+          </Routes>
+        </BrowserRouter>
+      </ChartProvider>
+      {/* </UsePlayingProvider> */}
     </QueryClientProvider>
   );
 }

src/App.tsx

@@ -2,10 +2,12 @@ import { useEffect, useState } from "react";
 import Lottie from "react-lottie-player";
 import LoadingLottie from "../assets/lottie/loading.json";
 import { usePlaying } from "../hook/usePlayingContext";
+import usePlayingStore from "../store/playing";
 
 export default function Loading() {
   const [mounted, setMounted] = useState(false);
-  const { isPlaying, toggleIsPlaying } = usePlaying();
+  // const { isPlaying, toggleIsPlaying } = usePlaying();
+  const { isPlaying, toggleIsPlaying } = usePlayingStore();
 
   useEffect(() => setMounted(true), []);
 

src/common/Loading.tsx

@@ -1,6 +1,7 @@
 import { useQuery } from "@tanstack/react-query";
 import { useEffect, useRef, useState } from "react";
 import { usePlaying } from "./usePlayingContext";
+import usePlayingStore from "../store/playing";
 
 const useDynamicData = (
   initialData: any,
@@ -10,7 +11,8 @@ const useDynamicData = (
   const containerRef = useRef<HTMLDivElement>(null);
   const [isVisible, setIsVisible] = useState(false);
   const [firstLoad, setFirstLoad] = useState(true);
-  const { isPlaying } = usePlaying();
+  // const { isPlaying } = usePlaying();
+  const { isPlaying } = usePlayingStore();
 
   const { data: data, refetch } = useQuery({
     queryKey: [queryKey],

src/hook/useDynamicData.tsx

@@ -0,0 +1,13 @@
+import { create } from "zustand";
+
+interface PlayingState {
+  isPlaying: boolean;
+  toggleIsPlaying: () => void;
+}
+
+const usePlayingStore = create<PlayingState>((set) => ({
+  isPlaying: true,
+  toggleIsPlaying: () => set((state) => ({ isPlaying: !state.isPlaying })),
+}));
+
+export default usePlayingStore;