Merge pull request #100 from FinFellows/fix/#99

Fix/#99
FinFellows · Feb 27, 2024 · 80fced7 · 80fced7
2 parents 9f9284b + 5957c3b
commit 80fced7
Show file tree

Hide file tree

Showing 14 changed files with 100 additions and 259 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -30,6 +30,7 @@
     "highlight.js": "^11.9.0",
     "js-cookie": "^3.0.5",
     "next": "14.0.3",
+    "next-themes": "^0.2.1",
     "react": "^18",
     "react-dom": "^18",
     "react-query": "^3.39.3",

diff --git a/src/app/ThemeProvider.tsx b/src/app/ThemeProvider.tsx
@@ -0,0 +1,8 @@
+'use client';
+import { ThemeProvider } from 'next-themes';
+
+const Providers = ({ children }: { children: React.ReactNode }) => {
+  return <ThemeProvider attribute='class'>{children}</ThemeProvider>;
+};
+
+export default Providers;
diff --git a/src/app/globals.css b/src/app/globals.css
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -5,6 +5,7 @@ import Header from '@/components/organisms/header/Header';
 import Chatbot from '@/components/templates/chatbot';
 import QueryProvider from '@/components/queryProvider';
 import Head from 'next/head';
+import NextThemeProvider from './ThemeProvider';
 
 declare global {
   interface Window {
@@ -51,24 +52,27 @@ export default function RootLayout({ children }: { children: React.ReactNode })
           gtag('js', new Date());
           gtag('config', '${GA_ID}', {
             page_path: window.location.pathname,
+            
           });
         `,
           }}
         />
       </Head>
       {/* h-full -> scroll to top */}
       <body className='h-full bg-bg dark:bg-dark-bg'>
-        <QueryProvider>
-          <Header />
-          <main className='mt-100 tablet:mt-110 desktop:mt-200 min-h-screen px-24 tablet:px-0 box-border'>
-            {children}
-          </main>
-          <Chatbot />
-          <footer className='relative  w-full mt-200'>
-            <Footer />
-          </footer>
-          <Chatbot />
-        </QueryProvider>
+        <NextThemeProvider>
+          <QueryProvider>
+            <Header />
+            <main className='mt-100 tablet:mt-110 desktop:mt-200 min-h-screen px-24 tablet:px-0 box-border'>
+              {children}
+            </main>
+            <Chatbot />
+            <footer className='relative w-screen  mt-200'>
+              <Footer />
+            </footer>
+            <Chatbot />
+          </QueryProvider>
+        </NextThemeProvider>
       </body>
     </html>
   );

diff --git a/src/components/atom/header/HeaderSwitch.tsx b/src/components/atom/header/HeaderSwitch.tsx
@@ -3,45 +3,39 @@ import React, { useEffect, useState } from 'react';
 import { cls } from '@/utils/cls';
 import Light from '@/public/icons/light.svg';
 import Dark from '@/public/icons/dark.svg';
+import { useTheme } from 'next-themes';
+import useThemeCheck from '@/hooks/useThemeCheck';
 
-export type THeaderSwitchProps = {
-  darkMode: boolean;
-  setDarkMode: (arg: boolean) => void;
-};
+const HeaderSwitch = ({ ...props }) => {
+  const { isDarkMode, toggleTheme } = useThemeCheck();
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    // 클라이언트에서 마운트되지 않은 경우 UI를 렌더링하지 않음
+    return (
+      <div className='inline-block relative w-67 h-31 rounded-15 transition-colors duration-300 cursor-pointer bg-border02'></div>
+    );
+  }
 
-const HeaderSwitch: React.FC<THeaderSwitchProps & React.HTMLAttributes<HTMLDivElement>> = ({
-  darkMode,
-  setDarkMode,
-  ...props
-}) => {
-  const toggleTheme = () => {
-    console.log('HeaderSwitch 클릭됨');
-    // 이벤트 발생
-    window.dispatchEvent(new Event('darkModeToggle'));
-    const theme = localStorage.getItem('theme');
-    if (theme) {
-      localStorage.setItem('theme', theme === 'dark' ? 'light' : 'dark');
-    } else {
-      localStorage.setItem('theme', 'dark');
-    }
-    setDarkMode(!darkMode);
-  };
   return (
     <div
       onClick={toggleTheme}
       {...props}
       className={cls(
-        'inline-block relative w-67 h-31 rounded-15 transition-colors duration-300 cursor-pointer',
-        darkMode ? 'bg-border02' : ' bg-main',
+        'inline-block relative w-67 h-31 rounded-15 transition-all duration-300 cursor-pointer',
+        isDarkMode ? 'bg-border02' : ' bg-main',
       )}
     >
       <div
         className={cls(
           'absolute bottom-3 left-6 w-25 h-25 rounded-15 duration-300',
-          darkMode ? 'bg-main translate-x-[30px]' : '  bg-secondary translate-x-0',
+          isDarkMode ? 'bg-main translate-x-[30px]' : '  bg-secondary translate-x-0',
         )}
       ></div>
-      {darkMode ? <Dark className='absolute left-6 bottom-3' /> : <Light className='absolute right-6 bottom-3' />}
+      {isDarkMode ? <Dark className='absolute left-6 bottom-3' /> : <Light className='absolute right-6 bottom-3' />}
     </div>
   );
 };

diff --git a/src/components/organisms/header/Header.tsx b/src/components/organisms/header/Header.tsx
@@ -2,7 +2,7 @@
 import Link from 'next/link';
 import Image from 'next/image';
 import logoLight from '@/public/logos/logo_light.png';
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import MenuItem, { menuItems } from './MenuItem';
 import HeaderSwitch from '@/components/atom/header/HeaderSwitch';
 import MobileHeader from './MobileHeader';
@@ -11,30 +11,7 @@ import { usePathname } from 'next/navigation';
 
 const Header = () => {
   const [activeMenu, setActiveMenu] = useState<string | null>(null);
-  const [darkMode, setDarkMode] = useState(false);
   const pathname = usePathname();
-  // darkMode 변경 시 확인 및 초기화
-  useEffect(() => {
-    themeCheck();
-  }, [darkMode]);
-
-  // component mount 할 때 마다 테마 확인
-  useEffect(() => {
-    themeCheck();
-  }, []);
-
-  const themeCheck = () => {
-    if (
-      localStorage.theme === 'dark' ||
-      (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
-    ) {
-      document.documentElement.classList.add('dark');
-      setDarkMode(true);
-    } else {
-      document.documentElement.classList.remove('dark');
-      setDarkMode(false);
-    }
-  };
 
   const handleMenuHover = (menuName: string) => {
     setActiveMenu(menuName);
@@ -80,15 +57,15 @@ const Header = () => {
         </div>
         <div className='flex  items-center'>
           <li className='hidden desktop:flex mr-26'>
-            <HeaderSwitch darkMode={darkMode} setDarkMode={setDarkMode} />
+            <HeaderSwitch />
           </li>
           <li className='mr-12 text-main text-22 pt-10  '>
             <Link href='/mypage' className='text-center '>
               MY
             </Link>
           </li>
           <li className='w-full h-full  flex desktop:hidden '>
-            <MobileHeader darkMode={darkMode} setDarkMode={setDarkMode} />
+            <MobileHeader />
           </li>
         </div>
       </ul>