From 4301c425b1030665d2b48356673cf23e42a8b02b Mon Sep 17 00:00:00 2001
From: jnkeniaem <jeanne.kim9@gmail.com>
Date: Thu, 19 Dec 2024 14:23:59 +0900
Subject: [PATCH] =?UTF-8?q?[FE]=20FIX:=20updateBodyDisplayStyle=20?=
 =?UTF-8?q?=EC=83=9D=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

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

diff --git a/config b/config
index 36f81ff28..af2375238 160000
--- a/config
+++ b/config
@@ -1 +1 @@
-Subproject commit 36f81ff2864e6c3a7ef5af1fd752fab31e9b4edc
+Subproject commit af23752382cdb750ff865dedcd9d8a238f1b724d
diff --git a/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.container.tsx b/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.container.tsx
index 82e806173..dd3b12dce 100644
--- 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
index c2d63161f..fbaeb2e90 100644
--- 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
index 725cdb86b..34e016908 100644
--- 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(() => {