From fb0c17123c8040846e73c996a91914d3210c2efa Mon Sep 17 00:00:00 2001
From: jnkeniaem <jeanne.kim9@gmail.com>
Date: Thu, 19 Dec 2024 14:42:42 +0900
Subject: [PATCH] =?UTF-8?q?[FE]=20FIX:=20isDeviceDarkMode=20=EC=83=9D?=
 =?UTF-8?q?=EC=84=B1=20&=20=EC=A0=81=EC=9A=A9=20#1649?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Card/DisplayStyleCard/DisplayStyleCard.container.tsx   | 7 +++++--
 .../Card/DisplayStyleCard/displayStyleInitializer.ts       | 6 +++++-
 .../src/Cabinet/components/Common/DarkModeToggleSwitch.tsx | 3 ++-
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.container.tsx b/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.container.tsx
index dd3b12dce..43ca3960e 100644
--- a/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.container.tsx
+++ b/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.container.tsx
@@ -2,7 +2,10 @@ import { useEffect } from "react";
 import { useRecoilValue } from "recoil";
 import { displayStyleState } from "@/Cabinet/recoil/atoms";
 import DisplayStyleCard from "@/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard";
-import { updateBodyDisplayStyle } from "@/Cabinet/components/Card/DisplayStyleCard/displayStyleInitializer";
+import {
+  isDeviceDarkMode,
+  updateBodyDisplayStyle,
+} from "@/Cabinet/components/Card/DisplayStyleCard/displayStyleInitializer";
 import {
   DisplayStyleToggleType,
   DisplayStyleType,
@@ -27,7 +30,7 @@ export const getInitialDisplayStyle = (
 };
 
 const DisplayStyleCardContainer = () => {
-  const darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)");
+  const darkModeQuery = isDeviceDarkMode();
   const toggleType = useRecoilValue(displayStyleState);
 
   useEffect(() => {
diff --git a/frontend/src/Cabinet/components/Card/DisplayStyleCard/displayStyleInitializer.ts b/frontend/src/Cabinet/components/Card/DisplayStyleCard/displayStyleInitializer.ts
index fbaeb2e90..4dd66b8bc 100644
--- a/frontend/src/Cabinet/components/Card/DisplayStyleCard/displayStyleInitializer.ts
+++ b/frontend/src/Cabinet/components/Card/DisplayStyleCard/displayStyleInitializer.ts
@@ -17,10 +17,14 @@ export const updateBodyDisplayStyle = (style: DisplayStyleType) => {
   document.body.setAttribute("display-style", style);
 };
 
+export const isDeviceDarkMode = () => {
+  return window.matchMedia("(prefers-color-scheme: dark)");
+};
+
 (function () {
   const isClient = typeof window !== "undefined";
   if (isClient) {
-    const darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const darkModeQuery = isDeviceDarkMode();
 
     const colorMode = getInitialDisplayStyle(
       getDisplayStyleFromLocalStorage(),
diff --git a/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx b/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx
index 0fa6145f1..1937b98f4 100644
--- a/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx
+++ b/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx
@@ -6,6 +6,7 @@ import { updateLocalStorageDisplayStyleToggle } from "@/Cabinet/components/Card/
 import { getInitialDisplayStyle } from "@/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.container";
 import {
   getDisplayStyleFromLocalStorage,
+  isDeviceDarkMode,
   updateBodyDisplayStyle,
 } from "@/Cabinet/components/Card/DisplayStyleCard/displayStyleInitializer";
 import { ReactComponent as MoonIcon } from "@/Cabinet/assets/images/moonIcon.svg";
@@ -18,7 +19,7 @@ import {
 const DarkModeToggleSwitch = ({ id }: { id: string }) => {
   const [displayStyleToggle, setDisplayStyleToggle] =
     useRecoilState(displayStyleState);
-  const darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)");
+  const darkModeQuery = isDeviceDarkMode();
   const [displayStyleType, setDisplayStyleType] = useState<DisplayStyleType>(
     () => {
       return getInitialDisplayStyle(