From 3a93a39e08f7fa06b46dafa2d97959fbd5ee7d62 Mon Sep 17 00:00:00 2001
From: Seungyeon Han <tiffanyhansy@gmail.com>
Date: Sat, 5 Apr 2025 20:32:06 +0900
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=EC=82=AC=EC=9A=A9=EC=9E=90?=
 =?UTF-8?q?=EC=9D=98=20=EB=B8=8C=EB=9D=BC=EC=9A=B0=EC=A0=80=20=EC=84=A4?=
 =?UTF-8?q?=EC=A0=95=EC=97=90=20=EB=94=B0=EB=9D=BC=20=ED=85=8C=EB=A7=88=20?=
 =?UTF-8?q?=EC=9E=90=EB=8F=99=20=EC=84=A4=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/stores/themeStore.ts | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/src/stores/themeStore.ts b/src/stores/themeStore.ts
index 42c597e..b6018dc 100644
--- a/src/stores/themeStore.ts
+++ b/src/stores/themeStore.ts
@@ -4,8 +4,16 @@ import { persist, createJSONStorage } from 'zustand/middleware';
 interface ThemeStore {
   theme: 'light' | 'dark';
   toggleTheme: () => void;
+  applyAutoTheme: () => void;
 }
 
+const getAutoTheme = (): 'light' | 'dark' => {
+  if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+    return 'dark';
+  }
+  return 'light';
+};
+
 const useThemeStore = create(
   persist<ThemeStore>(
     (set, get) => ({
@@ -22,6 +30,12 @@ const useThemeStore = create(
 
           return { theme: newTheme };
         }),
+
+      applyAutoTheme: () => {
+        const autoTheme = getAutoTheme();
+        set({ theme: autoTheme });
+        document.documentElement.classList.toggle('dark', autoTheme === 'dark');
+      },
     }),
     {
       name: 'theme',
@@ -30,4 +44,6 @@ const useThemeStore = create(
   ),
 );
 
+useThemeStore.getState().applyAutoTheme();
+
 export default useThemeStore;

From b3b64d17dc9c00da8ba9fc7ddddb093e0d60f8d1 Mon Sep 17 00:00:00 2001
From: Seungyeon Han <tiffanyhansy@gmail.com>
Date: Sun, 6 Apr 2025 23:12:16 +0900
Subject: [PATCH 2/2] =?UTF-8?q?fix:=20=EC=B5=9C=EC=B4=88=20=EC=A0=91?=
 =?UTF-8?q?=EC=86=8D=20=EC=8B=9C=EC=97=90=EB=A7=8C=20=EB=B8=8C=EB=9D=BC?=
 =?UTF-8?q?=EC=9A=B0=EC=A0=80=20=EB=8B=A4=ED=81=AC=EB=AA=A8=EB=93=9C=20?=
 =?UTF-8?q?=EA=B0=90=EC=A7=80=ED=95=98=EB=8F=84=EB=A1=9D=20=ED=85=8C?=
 =?UTF-8?q?=EB=A7=88=20=EB=A1=9C=EC=A7=81=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/stores/themeStore.ts | 50 +++++++++++++++++-----------------------
 1 file changed, 21 insertions(+), 29 deletions(-)

diff --git a/src/stores/themeStore.ts b/src/stores/themeStore.ts
index b6018dc..2a5b8bc 100644
--- a/src/stores/themeStore.ts
+++ b/src/stores/themeStore.ts
@@ -4,46 +4,38 @@ import { persist, createJSONStorage } from 'zustand/middleware';
 interface ThemeStore {
   theme: 'light' | 'dark';
   toggleTheme: () => void;
-  applyAutoTheme: () => void;
 }
 
 const getAutoTheme = (): 'light' | 'dark' => {
-  if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-    return 'dark';
-  }
-  return 'light';
+  return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+    ? 'dark'
+    : 'light';
 };
 
 const useThemeStore = create(
   persist<ThemeStore>(
-    (set, get) => ({
-      theme: get()?.theme ?? 'light',
-      toggleTheme: () =>
-        set((state) => {
-          const newTheme = state.theme === 'light' ? 'dark' : 'light';
-
-          if (newTheme === 'dark') {
-            document.documentElement.classList.add('dark');
-          } else {
-            document.documentElement.classList.remove('dark');
-          }
-
-          return { theme: newTheme };
-        }),
-
-      applyAutoTheme: () => {
-        const autoTheme = getAutoTheme();
-        set({ theme: autoTheme });
-        document.documentElement.classList.toggle('dark', autoTheme === 'dark');
-      },
-    }),
+    (set, get) => {
+      const applyTheme = (theme: 'light' | 'dark') => {
+        document.documentElement.classList.toggle('dark', theme === 'dark');
+      };
+
+      const initialTheme = get()?.theme ?? getAutoTheme();
+      applyTheme(initialTheme);
+
+      return {
+        theme: initialTheme,
+        toggleTheme: () =>
+          set((state) => {
+            const newTheme = state.theme === 'light' ? 'dark' : 'light';
+            applyTheme(newTheme);
+            return { theme: newTheme };
+          }),
+      };
+    },
     {
       name: 'theme',
       storage: createJSONStorage(() => sessionStorage),
     },
   ),
 );
-
-useThemeStore.getState().applyAutoTheme();
-
 export default useThemeStore;