[FE] FIX: isDeviceDarkMode 생성 & 적용 #1649

innovationacademy-kr · Dec 19, 2024 · fb0c171 · fb0c171
1 parent 15bba7a
commit fb0c171
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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(