Feat: Theme(Dark, Light mode) localStorage, recoil 저장

eunji-0623 · Jul 18, 2024 · 2cca0d9 · 2cca0d9
1 parent 79ac118
commit 2cca0d9
Show file tree

Hide file tree

Showing 8 changed files with 68 additions and 30 deletions.
diff --git a/components/AuthInputBox/AuthInputBox.tsx b/components/AuthInputBox/AuthInputBox.tsx
@@ -34,7 +34,7 @@ export default function AuthInputBox({
       <label htmlFor={name}>{label}</label>
       <input
         id={name}
-        className={`border ${errors[name] ? 'border-var-red2' : ''} py-[16px] px-[20px] rounded-md border-var-gray6`}
+        className={`border ${errors[name] ? 'border-var-red2' : ''} py-[16px] px-[20px] rounded-md border-var-gray6 outline-none dark:bg-var-dark3 dark:border-none`}
         type={isEyeOpen ? 'text' : type}
         placeholder={placeholder}
         {...register(name, validation)}

diff --git a/components/Button/Button.tsx b/components/Button/Button.tsx
@@ -4,6 +4,8 @@ import {
   PrimaryButtonProps,
   SimpleButtonProps,
 } from './Button.types';
+import { useRecoilValue } from 'recoil';
+import { darkModeState } from '@/states/themeState';
 
 const primarySizeClasses = {
   small: 'px-[20px] py-[10px] text-[14px]',
@@ -80,6 +82,8 @@ export function PaginationArrowButton({
   disabled,
   direction,
 }: PaginationButtonProps) {
+  const darkMode = useRecoilValue(darkModeState);
+
   const iconActiveSrc =
     direction === 'prev'
       ? '/icon/arrow_active_left.svg'
@@ -88,20 +92,37 @@ export function PaginationArrowButton({
     direction === 'prev'
       ? '/icon/arrow_inactive_left.svg'
       : '/icon/arrow_inactive_right.svg';
+
+  const darkModeActiveSrc =
+    direction === 'prev'
+      ? '/icon/arrow_inactive_left.svg'
+      : '/icon/arrow_inactive_right.svg';
+  const darkModeInactiveSrc =
+    direction === 'prev'
+      ? '/icon/arrow_active_left.svg'
+      : '/icon/arrow_active_right.svg';
+
   const altText = direction === 'prev' ? '이전 페이지' : '다음 페이지';
 
+  const iconSrc = darkMode
+    ? disabled
+      ? darkModeInactiveSrc
+      : darkModeActiveSrc
+    : disabled
+      ? iconInactiveSrc
+      : iconActiveSrc;
+
   return (
     <button
       onClick={onClick}
       disabled={disabled}
-      className={`w-[55px] h-[55px] flex items-center justify-center bg-white dark:bg-var-dark2 border border-solid ${disabled ? 'border-var-gray3 dark:border-var-gray8' : 'border-var-green2 dark:border-var-gray8'} rounded-2xl m:w-[40px] m:h-[40px]`}
+      className={`w-[55px] h-[55px] flex items-center justify-center bg-white dark:bg-var-dark2 border border-solid ${
+        disabled
+          ? 'border-var-gray3 dark:border-var-gray8'
+          : 'border-var-green2 dark:border-var-gray8'
+      } rounded-2xl m:w-[40px] m:h-[40px]`}
     >
-      <Image
-        src={disabled ? iconInactiveSrc : iconActiveSrc}
-        width={20}
-        height={20}
-        alt={altText}
-      />
+      <Image src={iconSrc} width={20} height={20} alt={altText} />
     </button>
   );
 }

diff --git a/components/PriceFilterBtn/PriceFilterBtn.tsx b/components/PriceFilterBtn/PriceFilterBtn.tsx
@@ -35,7 +35,7 @@ export default function PriceFilterBtn() {
         onClick={() => setShowMenuList((prev) => !prev)}
       >
         <p className="text-[18px] t:text-[12px] m:text-[10px] text-var-green2 dark:text-var-gray2">
-          {isClient ? sortedName : '정렬'}
+          {isClient && !showMenuList ? sortedName || '정렬' : sortedName}
         </p>
         <Image
           src={filterIcon}
@@ -49,9 +49,9 @@ export default function PriceFilterBtn() {
           <div className="relative left-0 bottom-[-8px] z-50 flex w-[147px] t:w-[120px] m:w-[90px] flex-col shadow-lg rounded-[8px] animate-slideDown">
             <button
               className="flex justify-center items-center text-[18px] m:text-[14px] border border-solid border-var-gray3 w-[147px] t:w-[120px] m:w-[90px] h-[58px] m:h-[41px] rounded-t-[8px] bg-white dark:bg-var-dark2 dark:border-var-dark4 hover:bg-var-gray2 dark:hover:bg-var-dark3"
-              onClick={() => changeSelectedSort('', '기본 정렬')}
+              onClick={() => changeSelectedSort('', '최신 순')}
             >
-              기본 정렬
+              최신 순
             </button>
             <button
               className="flex justify-center items-center text-[18px] m:text-[14px] border border-solid border-var-gray3 w-[147px] t:w-[120px] m:w-[90px] h-[58px] m:h-[41px] bg-white dark:bg-var-dark2 dark:border-var-dark4 hover:bg-var-gray2 dark:hover:bg-var-dark3"

diff --git a/components/Theme/Theme.tsx b/components/Theme/Theme.tsx
@@ -0,0 +1,6 @@
+import useDarkMode from '@/hooks/useDarkMode';
+
+export default function Theme() {
+  useDarkMode();
+  return null;
+}
diff --git a/hooks/useDarkMode.ts b/hooks/useDarkMode.ts
@@ -0,0 +1,25 @@
+import { useEffect } from 'react';
+import { useRecoilState } from 'recoil';
+import { darkModeState } from '@/states/themeState';
+
+export default function useDarkMode() {
+  const [darkMode, setDarkMode] = useRecoilState(darkModeState);
+
+  useEffect(() => {
+    const storedDarkMode = localStorage.getItem('darkMode');
+    if (storedDarkMode !== null) {
+      setDarkMode(storedDarkMode === 'true');
+    }
+  }, [setDarkMode]);
+
+  useEffect(() => {
+    localStorage.setItem('darkMode', darkMode.toString());
+    if (darkMode) {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+  }, [darkMode]);
+
+  return [darkMode, setDarkMode] as const;
+}
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,7 +1,7 @@
 import '@/styles/globals.css';
 import '@/styles/calendar.css';
 import type { AppProps } from 'next/app';
-import { RecoilRoot, useRecoilValue } from 'recoil';
+import { RecoilRoot } from 'recoil';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import Popup from '@/components/Popup/Popup';
 import Layout from '@/components/Layout/Layout';
@@ -11,24 +11,10 @@ import Spinner from '@/components/Spinner/Spinner';
 import { useEffect, useState } from 'react';
 import { useRouter } from 'next/router';
 import SidenNavigationMobile from '@/components/SideNavigation/SideNavigationMobile';
-import { darkModeState } from '@/states/themeState';
+import Theme from '@/components/Theme/Theme';
 
 const queryClient = new QueryClient();
 
-function DarkModeEffect() {
-  const darkMode = useRecoilValue(darkModeState);
-
-  useEffect(() => {
-    if (darkMode) {
-      document.documentElement.classList.add('dark');
-    } else {
-      document.documentElement.classList.remove('dark');
-    }
-  }, [darkMode]);
-
-  return null;
-}
-
 export default function App({ Component, pageProps }: AppProps) {
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const router = useRouter();
@@ -65,11 +51,11 @@ export default function App({ Component, pageProps }: AppProps) {
 
   return (
     <RecoilRoot>
-      <DarkModeEffect />
       {isLoading ? (
         <Spinner />
       ) : (
         <QueryClientProvider client={queryClient}>
+          <Theme />
           {childContent}
           <Popup />
           <Modal />

diff --git a/pages/login.tsx b/pages/login.tsx
@@ -89,7 +89,7 @@ export default function LoginPage() {
       </form>
 
       {/* 회원가입페이지 리다이렉트 */}
-      <div className="text-var-gray8 text-[16px]">
+      <div className="text-var-gray8 text-[16px] dark:text-var-gray2">
         회원이 아니신가요?
         <Link href="/signup" className="underline ml-[5px]">
           회원가입하기

diff --git a/pages/signup.tsx b/pages/signup.tsx
@@ -131,7 +131,7 @@ export default function SingupPage() {
       </form>
 
       {/* 로그인페이지 리다이렉트 */}
-      <div className="text-var-gray8 text-[16px]">
+      <div className="text-var-gray8 text-[16px] dark:text-var-gray2">
         회원이신가요?
         <Link href="/login" className="underline ml-[5px]">
           로그인하기