Feature/#324 - 새로고침 시 다크모드 깜빡임 해결 (#338)

packages/frontend/src/components/layouts/Sidebar.tsx

@@ -1,13 +1,12 @@
-import { useEffect, useState } from 'react';
+import { useContext, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import logoCharacter from '/logoCharacter.png';
 import logoTitle from '/logoTitle.png';
 import { Alarm } from './alarm';
 import { MenuList } from './MenuList';
 import { Search } from './search';
-import { useGetUserTheme } from '@/apis/queries/user/useGetUserTheme';
-import { usePatchUserTheme } from '@/apis/queries/user/usePatchUserTheme';
 import { BOTTOM_MENU_ITEMS, TOP_MENU_ITEMS } from '@/constants/menuItems';
+import { ThemeContext } from '@/contexts/themeContext';
 import { useOutsideClick } from '@/hooks/useOutsideClick';
 import { type MenuSection } from '@/types/menu';
 import { cn } from '@/utils/cn';
@@ -22,16 +21,7 @@ export const Sidebar = () => {
     alarm: false,
   });
 
-  const { data: theme } = useGetUserTheme();
-  const { mutate } = usePatchUserTheme();
-
-  useEffect(() => {
-    if (theme === 'light') {
-      document.body.classList.remove('dark');
-      return;
-    }
-    document.body.classList.add('dark');
-  }, [theme]);
+  const { theme, changeTheme } = useContext(ThemeContext);
 
   const ref = useOutsideClick(() => {
     setShowTabs({ search: false, alarm: false });
@@ -47,22 +37,16 @@ export const Sidebar = () => {
     if (tabKey) {
       setShowTabs((prev) =>
         Object.keys(prev).reduce(
-          (acc, key) => ({
-            ...acc,
-            [key]: key === tabKey,
-          }),
+          (acc, key) => ({ ...acc, [key]: key === tabKey }),
           {} as Record<TabKey, boolean>,
         ),
       );
+      return;
     }
 
     if (item.text === '다크모드') {
-      if (theme === 'dark') {
-        mutate({ theme: 'light' });
-      }
-      if (theme === 'light') {
-        mutate({ theme: 'dark' });
-      }
+      const newTheme = theme === 'dark' ? 'light' : 'dark';
+      changeTheme(newTheme);
     }
   };
 

packages/frontend/src/contexts/themeContext.ts

@@ -0,0 +1,12 @@
+import { createContext } from 'react';
+import { GetUserTheme } from '@/apis/queries/user';
+
+interface ThemeContextType {
+  theme: GetUserTheme['theme'];
+  changeTheme: (newTheme: GetUserTheme['theme']) => void;
+}
+
+export const ThemeContext = createContext<ThemeContextType>({
+  theme: 'light',
+  changeTheme: () => {},
+});

packages/frontend/src/contexts/themeProvider.tsx

@@ -0,0 +1,40 @@
+import { useState } from 'react';
+import { Outlet } from 'react-router-dom';
+import { ThemeContext } from './themeContext';
+import { useGetLoginStatus } from '@/apis/queries/auth';
+import {
+  GetUserTheme,
+  useGetUserTheme,
+  usePatchUserTheme,
+} from '@/apis/queries/user';
+
+export const ThemeProvider = () => {
+  const { data: loginStatus } = useGetLoginStatus();
+  const { data: userTheme } = useGetUserTheme();
+  const { mutate: updateTheme } = usePatchUserTheme();
+
+  const isAuthenticated = loginStatus?.message === 'Authenticated';
+  const initialTheme = isAuthenticated
+    ? userTheme
+    : localStorage.getItem('theme');
+  const [theme, setTheme] = useState<GetUserTheme['theme']>(
+    initialTheme as GetUserTheme['theme'],
+  );
+
+  document.body.classList.toggle('dark', theme === 'dark');
+
+  const changeTheme = (newTheme: GetUserTheme['theme']) => {
+    localStorage.setItem('theme', newTheme);
+    setTheme(newTheme);
+
+    if (isAuthenticated) {
+      updateTheme({ theme: newTheme });
+    }
+  };
+
+  return (
+    <ThemeContext.Provider value={{ theme, changeTheme }}>
+      <Outlet />
+    </ThemeContext.Provider>
+  );
+};

packages/frontend/src/pages/my-page/StockInfo.tsx

@@ -32,7 +32,7 @@ export const StockInfo = ({ loginStatus }: StockInfoProps) => {
           <article className="grid grid-cols-2 gap-5">
             {data?.userStocks.map((stock) => (
               <section
-                className="display-bold14 text-dark-gray flex cursor-pointer justify-between rounded bg-[#FAFAFA] p-10 transition-all duration-300 hover:scale-105"
+                className="display-bold14 text-dark-gray bg-extra-light-gray flex cursor-pointer justify-between rounded p-10 transition-all duration-300 hover:scale-105"
                 onClick={() => navigate(`/stocks/${stock.stockId}`)}
               >
                 <p>{stock.name}</p>

packages/frontend/src/pages/stock-detail/hooks/useChart.ts

@@ -1,11 +1,11 @@
 import { createChart, type IChartApi } from 'lightweight-charts';
-import { useEffect, useRef, RefObject } from 'react';
+import { useEffect, useRef, RefObject, useContext } from 'react';
 import {
   PriceSchema,
   StockTimeSeriesResponse,
   VolumeSchema,
 } from '@/apis/queries/stocks';
-import { useGetUserTheme } from '@/apis/queries/user';
+import { ThemeContext } from '@/contexts/themeContext';
 import { darkTheme, lightTheme } from '@/styles/theme';
 import {
   createCandlestickOptions,
@@ -43,7 +43,7 @@ export const useChart = ({
   const volumeSeries = useRef<ReturnType<IChartApi['addHistogramSeries']>>();
   const containerInstance = containerRef.current;
 
-  const { data: theme } = useGetUserTheme();
+  const { theme } = useContext(ThemeContext);
   const graphTheme = theme === 'light' ? lightTheme : darkTheme;
 
   useEffect(() => {

packages/frontend/src/routes/index.tsx

@@ -1,33 +1,39 @@
 import { createBrowserRouter } from 'react-router-dom';
 import { Layout } from '@/components/layouts';
+import { ThemeProvider } from '@/contexts/themeProvider';
 import { Login } from '@/pages/login';
 import { MyPage } from '@/pages/my-page';
 import { StockDetail } from '@/pages/stock-detail';
 import { Stocks } from '@/pages/stocks';
 
 export const router = createBrowserRouter([
   {
-    element: <Layout />,
+    element: <ThemeProvider />,
     children: [
       {
-        path: '/',
-        element: <Stocks />,
-      },
-      {
-        path: '/stocks',
-        element: <Stocks />,
-      },
-      {
-        path: 'stocks/:stockId',
-        element: <StockDetail />,
-      },
-      {
-        path: '/my-page',
-        element: <MyPage />,
-      },
-      {
-        path: '/login',
-        element: <Login />,
+        element: <Layout />,
+        children: [
+          {
+            path: '/',
+            element: <Stocks />,
+          },
+          {
+            path: '/stocks',
+            element: <Stocks />,
+          },
+          {
+            path: 'stocks/:stockId',
+            element: <StockDetail />,
+          },
+          {
+            path: '/my-page',
+            element: <MyPage />,
+          },
+          {
+            path: '/login',
+            element: <Login />,
+          },
+        ],
       },
     ],
   },