[FE] FIX: 토글 버튼으로 화면 모드 설정한 상태에서 기기 설정으로 모드 변경시 토글 버튼을 두번 클릭해야 값이 변경되…

…는 버그 해결 #1649

frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx

@@ -58,19 +58,27 @@ const DarkModeToggleSwitch = ({ id }: ToggleSwitchInterface) => {
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const newToggleType =
-      toggleType === DisplayStyleToggleType.LIGHT
+      darkMode === DisplayStyleType.LIGHT
         ? DisplayStyleToggleType.DARK
         : DisplayStyleToggleType.LIGHT;
     setColorsAndLocalStorage(newToggleType);
   };
 
   useEffect(() => {
-    darkModeQuery.addEventListener("change", (event) =>
-      setDarkMode(
-        event.matches ? DisplayStyleType.DARK : DisplayStyleType.LIGHT
-      )
-    );
-  }, []);
+    const darkModeListener = (event: MediaQueryListEvent) => {
+      const newDisplayStyle = event.matches
+        ? DisplayStyleType.DARK
+        : DisplayStyleType.LIGHT;
+      setDarkMode(newDisplayStyle);
+      if (toggleType === DisplayStyleToggleType.DEVICE) {
+        setDarkMode(newDisplayStyle);
+      }
+    };
+
+    darkModeQuery.addEventListener("change", darkModeListener);
+
+    return () => darkModeQuery.removeEventListener("change", darkModeListener);
+  }, [darkModeQuery, toggleType]);
 
   useEffect(() => {
     document.body.setAttribute("display-style", darkMode);