[FE] FEAT: 가독성을 위해 displayStyleToggle 을 toggleType 으로 변경 #1649

innovationacademy-kr · Dec 19, 2024 · 6d0b837 · 6d0b837
1 parent fb0c171
commit 6d0b837
Showing 1 changed file with 8 additions and 9 deletions.
diff --git a/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx b/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx
@@ -17,8 +17,7 @@ import {
 } from "@/Cabinet/types/enum/displayStyle.type.enum";
 
 const DarkModeToggleSwitch = ({ id }: { id: string }) => {
-  const [displayStyleToggle, setDisplayStyleToggle] =
-    useRecoilState(displayStyleState);
+  const [toggleType, setToggleType] = useRecoilState(displayStyleState);
   const darkModeQuery = isDeviceDarkMode();
   const [displayStyleType, setDisplayStyleType] = useState<DisplayStyleType>(
     () => {
@@ -32,47 +31,47 @@ const DarkModeToggleSwitch = ({ id }: { id: string }) => {
   const isDarkMode = displayStyleType === DisplayStyleType.DARK;
 
   useEffect(() => {
-    setDisplayStyleToggle(getDisplayStyleFromLocalStorage());
+    setToggleType(getDisplayStyleFromLocalStorage());
   }, []);
 
   useEffect(() => {
     const updateDisplayStyleType = () => {
       const newDisplayStyleType = getInitialDisplayStyle(
-        displayStyleToggle,
+        toggleType,
         darkModeQuery
       );
       setDisplayStyleType(newDisplayStyleType);
     };
 
     updateDisplayStyleType();
-    if (displayStyleToggle === DisplayStyleToggleType.DEVICE) {
+    if (toggleType === DisplayStyleToggleType.DEVICE) {
       darkModeQuery.addEventListener("change", updateDisplayStyleType);
       return () => {
         darkModeQuery.removeEventListener("change", updateDisplayStyleType);
       };
     }
-  }, [displayStyleToggle]);
+  }, [toggleType]);
 
   useEffect(() => {
     updateBodyDisplayStyle(displayStyleType);
   }, [displayStyleType]);
 
   const handleToggleChange = useCallback(() => {
     let newToggleType;
-    if (displayStyleToggle === DisplayStyleToggleType.DEVICE) {
+    if (toggleType === DisplayStyleToggleType.DEVICE) {
       newToggleType =
         displayStyleType === DisplayStyleType.LIGHT
           ? DisplayStyleToggleType.DARK
           : DisplayStyleToggleType.LIGHT;
     } else {
       newToggleType =
-        displayStyleToggle === DisplayStyleToggleType.LIGHT
+        toggleType === DisplayStyleToggleType.LIGHT
           ? DisplayStyleToggleType.DARK
           : DisplayStyleToggleType.LIGHT;
     }
 
     updateLocalStorageDisplayStyleToggle(newToggleType);
-    setDisplayStyleToggle(newToggleType);
+    setToggleType(newToggleType);
   }, [displayStyleType]);
 
   return (