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

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

Hide file tree

Showing 4 changed files with 13 additions and 5 deletions.
diff --git a/config b/config
diff --git a/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.container.tsx b/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.container.tsx
@@ -2,6 +2,7 @@ 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 {
   DisplayStyleToggleType,
   DisplayStyleType,
@@ -32,7 +33,7 @@ const DisplayStyleCardContainer = () => {
   useEffect(() => {
     const applyDisplayStyle = () => {
       const newDarkMode = getInitialDisplayStyle(toggleType, darkModeQuery);
-      document.body.setAttribute("display-style", newDarkMode);
+      updateBodyDisplayStyle(newDarkMode);
     };
 
     applyDisplayStyle();

diff --git a/frontend/src/Cabinet/components/Card/DisplayStyleCard/displayStyleInitializer.ts b/frontend/src/Cabinet/components/Card/DisplayStyleCard/displayStyleInitializer.ts
@@ -13,6 +13,10 @@ export const getDisplayStyleFromLocalStorage: () => DisplayStyleToggleType =
     );
   };
 
+export const updateBodyDisplayStyle = (style: DisplayStyleType) => {
+  document.body.setAttribute("display-style", style);
+};
+
 (function () {
   const isClient = typeof window !== "undefined";
   if (isClient) {
@@ -31,7 +35,7 @@ export const getDisplayStyleFromLocalStorage: () => DisplayStyleToggleType =
     //   이 코드가 실행중일땐 전역변수가 아직 정의가 안된 상태라 전역변수 대신 hex code 사용
 
     document.addEventListener("DOMContentLoaded", function () {
-      document.body.setAttribute("display-style", colorMode);
+      updateBodyDisplayStyle(colorMode);
     });
   }
 })();
diff --git a/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx b/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx
@@ -3,7 +3,10 @@ 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 { getDisplayStyleFromLocalStorage } from "@/Cabinet/components/Card/DisplayStyleCard/displayStyleInitializer";
+import {
+  getDisplayStyleFromLocalStorage,
+  updateBodyDisplayStyle,
+} 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 {
@@ -49,7 +52,7 @@ const DarkModeToggleSwitch = ({ id }: { id: string }) => {
   }, [displayStyleToggle]);
 
   useEffect(() => {
-    document.body.setAttribute("display-style", displayStyleType);
+    updateBodyDisplayStyle(displayStyleType);
   }, [displayStyleType]);
 
   const handleToggleChange = useCallback(() => {