fix: nextThemes 설치 및 이용하도록 수정

junseokku · Jun 3, 2024 · c1860cb · c1860cb
1 parent 2fda087
commit c1860cb
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 40 deletions.
diff --git a/app/components/Providers.tsx b/app/components/Providers.tsx
@@ -0,0 +1,12 @@
+'use client';
+
+import { ThemeProvider } from 'next-themes';
+import { PropsWithChildren } from 'react';
+
+export const Providers = ({ children }: PropsWithChildren) => {
+  return (
+    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+      {children}
+    </ThemeProvider>
+  );
+};
diff --git a/app/components/ToggleDarkMode.tsx b/app/components/ToggleDarkMode.tsx
@@ -1,32 +1,18 @@
 'use client';
 
 import { MoonIcon, SunIcon } from '@radix-ui/react-icons';
-import { useState, Dispatch, SetStateAction, useLayoutEffect } from 'react';
-
-const Theme = {
-  Light: 'light',
-  Dark: 'dark',
-  System: 'system',
-} as const;
-
-type ThemeKeys = (typeof Theme)[keyof typeof Theme];
+import { useTheme } from 'next-themes';
 
 /** system일 경우 추가 */
 export const ToggleDarkMode = () => {
-  const [theme, setTheme] = useState<ThemeKeys>('system');
-
-  useDarkModeInitiailizer(setTheme);
+  const { resolvedTheme: theme, setTheme } = useTheme();
 
   const toggleTheme = () => {
     if (theme === 'dark') {
-      document.documentElement.classList.remove('dark');
-      localStorage.setItem('theme', 'light');
       setTheme('light');
       return;
     }
 
-    document.documentElement.classList.add('dark');
-    localStorage.setItem('theme', 'dark');
     setTheme('dark');
   };
 
@@ -43,21 +29,3 @@ export const ToggleDarkMode = () => {
     </button>
   );
 };
-
-const useDarkModeInitiailizer = (
-  setTheme: Dispatch<SetStateAction<ThemeKeys>>,
-) => {
-  // SSR 문제로 다른 곳으로 옮기기
-  useLayoutEffect?.(() => {
-    if (!('theme' in localStorage)) {
-      localStorage.setItem('theme', 'system');
-      return;
-    }
-
-    if (localStorage.theme === 'dark') {
-      document.documentElement.classList.add('dark');
-      setTheme('dark');
-      return;
-    }
-  }, [setTheme]);
-};
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -2,6 +2,7 @@ import './styles/globals.css';
 import type { Metadata } from 'next';
 import { Header } from './components/Header';
 import { pretendard } from './libs/font';
+import { Providers } from './components/Providers';
 export const metadata: Metadata = {
   title: 'Create Next App',
   description: 'Generated by create next app',
@@ -13,14 +14,16 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html>
+    <html suppressContentEditableWarning>
       <body>
-        <div className={`${pretendard.className} flex justify-center`}>
-          <div className="max-md:px-6 max-w-3xl w-full py-8 flex flex-col gap-8">
-            <Header />
-            {children}
+        <Providers>
+          <div className={`${pretendard.className} flex justify-center`}>
+            <div className="max-md:px-6 max-w-3xl w-full py-8 flex flex-col gap-8">
+              <Header />
+              {children}
+            </div>
           </div>
-        </div>
+        </Providers>
       </body>
     </html>
   );

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
     "date-fns": "^2.30.0",
     "next": "13.5.4",
     "next-contentlayer": "^0.3.4",
+    "next-themes": "^0.3.0",
     "react": "^18",
     "react-dom": "^18"
   },