From 9038ebd081c6cd12a64c3564d07b2e128c1818a4 Mon Sep 17 00:00:00 2001
From: gykoh42 <karmakoh42@naver.com>
Date: Thu, 19 Dec 2024 17:27:09 +0900
Subject: [PATCH] =?UTF-8?q?[FE]=20REFACTOR:=20=EB=B0=98=EB=B3=B5=EB=90=98?=
 =?UTF-8?q?=EB=8A=94=20=EB=A1=9C=EC=A7=81=20custom=20hook=20=EC=97=90=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80=20#1649?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../DisplayStyleCard/DisplayStyleCard.container.tsx | 10 +++-------
 .../components/Common/DarkModeToggleSwitch.tsx      |  9 ++-------
 frontend/src/Cabinet/hooks/useDisplayStyleToggle.ts | 13 ++++++++++++-
 3 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.container.tsx b/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.container.tsx
index 817940652..cd54e2466 100644
--- a/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.container.tsx
+++ b/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.container.tsx
@@ -6,6 +6,7 @@ import {
   DisplayStyleToggleType,
   DisplayStyleType,
 } from "@/Cabinet/types/enum/displayStyle.type.enum";
+import useDisplayStyleToggle from "@/Cabinet/hooks/useDisplayStyleToggle";
 import {
   isDeviceDarkMode,
   updateBodyDisplayStyle,
@@ -32,6 +33,7 @@ export const getInitialDisplayStyle = (
 const DisplayStyleCardContainer = () => {
   const darkModeQuery = isDeviceDarkMode();
   const toggleType = useRecoilValue(displayStyleState);
+  const { addDarkModeListener } = useDisplayStyleToggle();
 
   useEffect(() => {
     const applyDisplayStyle = () => {
@@ -40,13 +42,7 @@ const DisplayStyleCardContainer = () => {
     };
 
     applyDisplayStyle();
-
-    if (toggleType === DisplayStyleToggleType.DEVICE) {
-      darkModeQuery.addEventListener("change", applyDisplayStyle);
-      return () => {
-        darkModeQuery.removeEventListener("change", applyDisplayStyle);
-      };
-    }
+    addDarkModeListener(darkModeQuery, applyDisplayStyle);
   }, [toggleType]);
 
   return <DisplayStyleCard />;
diff --git a/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx b/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx
index 9453bb265..5eb8f52c5 100644
--- a/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx
+++ b/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx
@@ -29,7 +29,7 @@ const DarkModeToggleSwitch = ({ id }: { id: string }) => {
   );
 
   const isDarkMode = displayStyleType === DisplayStyleType.DARK;
-  const { updateToggleType } = useDisplayStyleToggle();
+  const { updateToggleType, addDarkModeListener } = useDisplayStyleToggle();
 
   useEffect(() => {
     setToggleType(getDisplayStyleFromLocalStorage());
@@ -45,12 +45,7 @@ const DarkModeToggleSwitch = ({ id }: { id: string }) => {
     };
 
     updateDisplayStyleType();
-    if (toggleType === DisplayStyleToggleType.DEVICE) {
-      darkModeQuery.addEventListener("change", updateDisplayStyleType);
-      return () => {
-        darkModeQuery.removeEventListener("change", updateDisplayStyleType);
-      };
-    }
+    addDarkModeListener(darkModeQuery, updateDisplayStyleType);
   }, [toggleType]);
 
   useEffect(() => {
diff --git a/frontend/src/Cabinet/hooks/useDisplayStyleToggle.ts b/frontend/src/Cabinet/hooks/useDisplayStyleToggle.ts
index 3742c4a4e..6d6df1356 100644
--- a/frontend/src/Cabinet/hooks/useDisplayStyleToggle.ts
+++ b/frontend/src/Cabinet/hooks/useDisplayStyleToggle.ts
@@ -11,7 +11,18 @@ export const useDisplayStyleToggle = () => {
     updateLocalStorageDisplayStyleToggle(newToggleType);
   };
 
-  return { updateToggleType };
+  const addDarkModeListener = (
+    darkModeQuery: MediaQueryList,
+    callback: () => void
+  ) => {
+    if (toggleType === DisplayStyleToggleType.DEVICE) {
+      darkModeQuery.addEventListener("change", callback);
+      return () => {
+        darkModeQuery.removeEventListener("change", callback);
+      };
+    }
+  };
+  return { updateToggleType, addDarkModeListener };
 };
 
 export default useDisplayStyleToggle;