[FE] FEAT: useRecoilState 적용 #1649

innovationacademy-kr · Sep 10, 2024 · 274efd7 · 274efd7
1 parent e4e88ce
commit 274efd7
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 24 deletions.
diff --git a/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.container.tsx b/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.container.tsx
@@ -1,4 +1,6 @@
 import { useEffect, useState } from "react";
+import { useRecoilState } from "recoil";
+import { displayStyleState } from "@/Cabinet/recoil/atoms";
 import DisplayStyleCard from "@/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard";
 import {
   DisplayStyleToggleType,
@@ -23,40 +25,34 @@ export const getInitialDisplayStyle = (
 };
 
 const DisplayStyleCardContainer = () => {
-  const savedDisplayStyleToggle =
-    (localStorage.getItem("display-style-toggle") as DisplayStyleToggleType) ||
-    DisplayStyleToggleType.DEVICE;
   var darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)");
+  const [toggleType, setToggleType] = useRecoilState(displayStyleState);
   const initialDisplayStyle = getInitialDisplayStyle(
-    savedDisplayStyleToggle,
+    toggleType as DisplayStyleToggleType,
     darkModeQuery
   );
-  const [darkMode, setDarkMode] = useState<DisplayStyleType>(
-    initialDisplayStyle as DisplayStyleType
-  );
-  const [toggleType, setToggleType] = useState<DisplayStyleToggleType>(
-    savedDisplayStyleToggle
-  );
+  const [darkMode, setDarkMode] =
+    useState<DisplayStyleType>(initialDisplayStyle);
 
   const setColorsAndLocalStorage = (toggleType: DisplayStyleToggleType) => {
     setToggleType(toggleType);
     localStorage.setItem("display-style-toggle", toggleType);
   };
 
   const handleDisplayStyleButtonClick = (displayStyleToggleType: string) => {
-    if (toggleType === displayStyleToggleType) return;
-    setToggleType(
-      displayStyleToggleType as React.SetStateAction<DisplayStyleToggleType>
-    );
-    setColorsAndLocalStorage(displayStyleToggleType as DisplayStyleToggleType);
+    const castedToggleType = displayStyleToggleType as DisplayStyleToggleType;
+    if (toggleType === castedToggleType) return;
+    setToggleType(castedToggleType);
+    setColorsAndLocalStorage(castedToggleType);
   };
 
   useEffect(() => {
-    darkModeQuery.addEventListener("change", (event) =>
+    darkModeQuery.addEventListener("change", (event) => {
       setDarkMode(
         event.matches ? DisplayStyleType.DARK : DisplayStyleType.LIGHT
-      )
-    );
+      );
+    });
+    return () => darkModeQuery.removeEventListener("change", (event) => {});
   }, []);
 
   useEffect(() => {

diff --git a/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx b/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx
@@ -14,11 +14,14 @@ interface ToggleSwitchInterface {
 }
 
 const DarkModeToggleSwitch = ({ id }: ToggleSwitchInterface) => {
-  const [displayStyleToggle, setDisplayStyleToggle] = useRecoilState(displayStyleState);
+  const [displayStyleToggle, setDisplayStyleToggle] =
+    useRecoilState(displayStyleState);
   const darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)");
 
   useEffect(() => {
-    const savedDisplayStyle = localStorage.getItem("display-style-toggle") || DisplayStyleToggleType.DEVICE;
+    const savedDisplayStyle =
+      localStorage.getItem("display-style-toggle") ||
+      DisplayStyleToggleType.DEVICE;
     setDisplayStyleToggle(savedDisplayStyle as DisplayStyleToggleType);
   }, []);
 
@@ -50,7 +53,8 @@ const DarkModeToggleSwitch = ({ id }: ToggleSwitchInterface) => {
 
   const isChecked =
     displayStyleToggle === DisplayStyleToggleType.DARK ||
-    (displayStyleToggle === DisplayStyleToggleType.DEVICE && darkModeQuery.matches);
+    (displayStyleToggle === DisplayStyleToggleType.DEVICE &&
+      darkModeQuery.matches);
 
   return (
     <ToggleSwitchContainerStyled>
@@ -89,8 +93,9 @@ const InputStyled = styled.input.attrs({ type: "checkbox" })`
 const ToggleSwitchStyled = styled.label<{ checked: boolean }>`
   cursor: pointer;
   display: inline-block;
-  position:relative;
-  background: ${(props) => props.checked ? "var(--sys-main-color)" : "var(--line-color)"};
+  position: relative;
+  background: ${(props) =>
+    props.checked ? "var(--sys-main-color)" : "var(--line-color)"};
   width: 46px;
   height: 24px;
   border-radius: 50px;
@@ -101,7 +106,7 @@ const ToggleKnobStyled = styled.span<{ checked: boolean }>`
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
-  left: ${(props) => props.checked ? "calc(100% - 21px)" : "3px"};
+  left: ${(props) => (props.checked ? "calc(100% - 21px)" : "3px")};
   width: 18px;
   height: 18px;
   border-radius: 50%;