[FE] FIX: 초기 깜빡임 문제 해결을 위한 getDisplayStyleFromLocalStorage 함수 도입 #1649

innovationacademy-kr · Dec 19, 2024 · 35de4ca · 35de4ca
1 parent 9c57158
commit 35de4ca
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 10 deletions.
diff --git a/frontend/src/Cabinet/components/Card/DisplayStyleCard/displayStyleInitializer.ts b/frontend/src/Cabinet/components/Card/DisplayStyleCard/displayStyleInitializer.ts
@@ -4,17 +4,22 @@ import {
   DisplayStyleType,
 } from "@/Cabinet/types/enum/displayStyle.type.enum";
 
-export const savedDisplayStyleToggle =
-  (localStorage.getItem("display-style-toggle") as DisplayStyleToggleType) ||
-  DisplayStyleToggleType.DEVICE;
+export const getDisplayStyleFromLocalStorage: () => DisplayStyleToggleType =
+  () => {
+    return (
+      (localStorage.getItem(
+        "display-style-toggle"
+      ) as DisplayStyleToggleType) || DisplayStyleToggleType.DEVICE
+    );
+  };
 
 (function () {
   const isClient = typeof window !== "undefined";
   if (isClient) {
     const darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)");
 
     const colorMode = getInitialDisplayStyle(
-      savedDisplayStyleToggle,
+      getDisplayStyleFromLocalStorage(),
       darkModeQuery
     );
 

diff --git a/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx b/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx
@@ -3,7 +3,7 @@ import { useRecoilState } from "recoil";
 import styled from "styled-components";
 import { displayStyleState } from "@/Cabinet/recoil/atoms";
 import { getInitialDisplayStyle } from "@/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.container";
-import { savedDisplayStyleToggle } from "@/Cabinet/components/Card/DisplayStyleCard/displayStyleInitializer";
+import { getDisplayStyleFromLocalStorage } from "@/Cabinet/components/Card/DisplayStyleCard/displayStyleInitializer";
 import { ReactComponent as MoonIcon } from "@/Cabinet/assets/images/moonIcon.svg";
 import { ReactComponent as SunIcon } from "@/Cabinet/assets/images/sunIcon.svg";
 import {
@@ -17,17 +17,17 @@ const DarkModeToggleSwitch = ({ id }: { id: string }) => {
   const darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)");
   const [displayStyleType, setDisplayStyleType] = useState<DisplayStyleType>(
     () => {
-      return getInitialDisplayStyle(savedDisplayStyleToggle, darkModeQuery);
+      return getInitialDisplayStyle(
+        getDisplayStyleFromLocalStorage(),
+        darkModeQuery
+      );
     }
   );
 
   const isDarkMode = displayStyleType === DisplayStyleType.DARK;
-  const toggleType =
-    (localStorage.getItem("display-style-toggle") as DisplayStyleToggleType) ||
-    DisplayStyleToggleType.DEVICE;
 
   useEffect(() => {
-    setDisplayStyleToggle(toggleType);
+    setDisplayStyleToggle(getDisplayStyleFromLocalStorage());
   }, []);
 
   useEffect(() => {