feature : Playing 상태의 Hook 변경감지

Author: WoongyuChoi

src/App.tsx

@@ -5,19 +5,22 @@ import { BrowserRouter, Route, Routes } from "react-router-dom";
 import Home from ".";
 import "./App.css";
 import ChartProvider from "./provider/ChartProvider";
+import UsePlayingProvider from "./provider/UsePlayingProvider";
 
 function App() {
   const [queryClient] = useState(() => new QueryClient());
   return (
     <QueryClientProvider client={queryClient}>
-      <ChartProvider>
-        <BrowserRouter>
-          <SpeedInsights />
-          <Routes>
-            <Route path="/" element={<Home />} />
-          </Routes>
-        </BrowserRouter>
-      </ChartProvider>
+      <UsePlayingProvider>
+        <ChartProvider>
+          <BrowserRouter>
+            <SpeedInsights />
+            <Routes>
+              <Route path="/" element={<Home />} />
+            </Routes>
+          </BrowserRouter>
+        </ChartProvider>
+      </UsePlayingProvider>
     </QueryClientProvider>
   );
 }

src/common/Loading.tsx

@@ -1,19 +1,18 @@
 import { useEffect, useState } from "react";
 import Lottie from "react-lottie-player";
 import LoadingLottie from "../assets/lottie/loading.json";
+import { usePlaying } from "../hook/usePlayingContext";
 
 export default function Loading() {
   const [mounted, setMounted] = useState(false);
-  const [isPlaying, setIsPlaying] = useState(true);
+  const { isPlaying, toggleIsPlaying } = usePlaying();
 
   useEffect(() => setMounted(true), []);
 
   if (!mounted) {
     return null;
   }
 
-  const togglePlay = () => setIsPlaying((prev) => !prev); // 재생/정지 토글 함수
-
   return (
     <div
       style={{
@@ -24,7 +23,7 @@ export default function Loading() {
         marginTop: "5px",
         cursor: "pointer",
       }}
-      onClick={togglePlay}
+      onClick={toggleIsPlaying}
     >
       <p
         style={{

src/hook/useDynamicData.tsx

@@ -1,22 +1,24 @@
 import { useQuery } from "@tanstack/react-query";
 import { useEffect, useRef, useState } from "react";
+import { usePlaying } from "./usePlayingContext";
 
 const useDynamicData = (
   initialData: any,
   updateDataFn: (data: any) => any,
   queryKey: string
 ) => {
-  const [isVisible, setIsVisible] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
+  const [isVisible, setIsVisible] = useState(false);
   const [firstLoad, setFirstLoad] = useState(true);
+  const { isPlaying } = usePlaying();
 
   const { data: data, refetch } = useQuery({
     queryKey: [queryKey],
     queryFn: () => {
       return Promise.resolve(updateDataFn(initialData));
     },
-    refetchInterval: isVisible ? 5000 : false, // 차트가 보일 때만 갱신
-    enabled: isVisible && !firstLoad, // 초기에는 비활성화
+    refetchInterval: isVisible && isPlaying ? 5000 : false, // 차트가 보일 때만 갱신
+    enabled: isVisible && isPlaying && !firstLoad, // 초기에는 비활성화
     initialData: initialData, // 초기 데이터 설정
   });
 
@@ -45,7 +47,7 @@ const useDynamicData = (
     return () => {
       observer.disconnect();
     };
-  }, [refetch]);
+  }, [isPlaying, refetch]);
 
   useEffect(() => {
     if (isVisible) {

src/hook/usePlayingContext.tsx

@@ -0,0 +1,18 @@
+import { createContext, useContext } from "react";
+
+interface usePlayingContextProps {
+  isPlaying: boolean;
+  toggleIsPlaying: () => void;
+}
+
+export const usePlayingContext = createContext<
+  usePlayingContextProps | undefined
+>(undefined);
+
+export const usePlaying = () => {
+  const context = useContext(usePlayingContext);
+  if (!context) {
+    throw new Error("usePlaying must be used within a UsePlayingProvider");
+  }
+  return context;
+};

src/provider/UsePlayingProvider.tsx

@@ -0,0 +1,18 @@
+import { useState } from "react";
+import { usePlayingContext } from "../hook/usePlayingContext";
+
+const UsePlayingProvider = ({ children }: { children: React.ReactNode }) => {
+  const [isPlaying, setIsPlaying] = useState(true);
+
+  const toggleIsPlaying = () => {
+    setIsPlaying((prev) => !prev);
+  };
+
+  return (
+    <usePlayingContext.Provider value={{ isPlaying, toggleIsPlaying }}>
+      <>{children}</>
+    </usePlayingContext.Provider>
+  );
+};
+
+export default UsePlayingProvider;