Merge pull request #2 from WoongyuChoi/dev

Dev

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,7 +1,7 @@
 export enum SelectedTitle {
-  BAR_CHART_1 = 1,
-  BAR_CHART_2 = 2,
-  WATERFALL_CHART = 3,
-  MIXED_CHART = 4,
-  AREA_CHART = 5,
+  BAR_CHART_1 = "BAR_CHART_1",
+  BAR_CHART_2 = "BAR_CHART_2",
+  WATERFALL_CHART = "WATERFALL_CHART",
+  MIXED_CHART = "MIXED_CHART",
+  AREA_CHART = "AREA_CHART",
 }

src/data/SelectedConstant.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

@@ -3,7 +3,7 @@ import "../Button.css";
 import { SelectedTitle } from "../data/SelectedConstant";
 
 interface ButtonLayoutProps {
-  setSelectedChart: (chart: number) => void;
+  setSelectedChart: (chart: SelectedTitle) => void;
 }
 
 const ButtonLayout = ({ setSelectedChart }: ButtonLayoutProps) => {

src/layout/ButtonLayout.tsx

@@ -1,10 +1,5 @@
 import { Chart } from "chart.js";
-import { useEffect, useRef } from "react";
-import AreaChart from "../chart/AreaChart";
-import BarChartComparison from "../chart/BarChartComparison";
-import BarChartNegative from "../chart/BarChartNegative";
-import MixedChart from "../chart/MixedChart";
-import WaterfallChart from "../chart/WaterfallChart";
+import React, { Suspense, useEffect, useRef } from "react";
 import { SelectedTitle } from "../data/SelectedConstant";
 
 const ChartLayout = ({
@@ -24,20 +19,20 @@ const ChartLayout = ({
     };
   }, []);
 
+  const chartMap = {
+    BAR_CHART_1: React.lazy(() => import("../chart/BarChartComparison")),
+    BAR_CHART_2: React.lazy(() => import("../chart/BarChartNegative")),
+    WATERFALL_CHART: React.lazy(() => import("../chart/WaterfallChart")),
+    MIXED_CHART: React.lazy(() => import("../chart/MixedChart")),
+    AREA_CHART: React.lazy(() => import("../chart/AreaChart")),
+  };
+
   const renderChart = () => {
-    switch (selectedChart) {
-      case SelectedTitle.BAR_CHART_1:
-        return <BarChartComparison chartRef={chartRef} />;
-      case SelectedTitle.BAR_CHART_2:
-        return <BarChartNegative chartRef={chartRef} />;
-      case SelectedTitle.WATERFALL_CHART:
-        return <WaterfallChart chartRef={chartRef} />;
-      case SelectedTitle.MIXED_CHART:
-        return <MixedChart chartRef={chartRef} />;
-      case SelectedTitle.AREA_CHART:
-        return <AreaChart chartRef={chartRef} />;
-      default:
-        return <div>Please select a chart.</div>;
+    if (selectedChart) {
+      const Chart = chartMap[selectedChart];
+      return <Chart chartRef={chartRef} />;
+    } else {
+      return <div>Please select a chart.</div>;
     }
   };
 
@@ -51,7 +46,9 @@ const ChartLayout = ({
         boxShadow: "0px 4px 12px rgba(0, 0, 0, 0.15)",
       }}
     >
-      <>{renderChart()}</>
+      <Suspense fallback={<div>Loading...</div>}>
+        <>{renderChart()}</>
+      </Suspense>
     </div>
   );
 };

src/layout/ChartLayout.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;