[FE] FEAT: topNav 다크모드 토글 추가 #1649

frontend/src/Cabinet/components/AdminInfo/Chart/CoinUseLineChart.tsx

@@ -15,6 +15,7 @@ const CoinUseLineChart = ({
   if (totalCoinUseData === undefined) {
     return null;
   }
+
   const formattedData = [
     {
       id: "issuedCoin",
@@ -39,7 +40,7 @@ const CoinUseLineChart = ({
     (data) => data.id === coinToggleType
   );
 
-  const yMin = Math.min(...filteredData[0].data.map((d) => d.y));
+  const yMin = 0;
   const yMax = Math.max(...filteredData[0].data.map((d) => d.y));
 
   // NOTE : y축 scale을 log로 표현하기 위해 Y scale을 설정

frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.container.tsx

@@ -1,4 +1,6 @@
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
+import { useRecoilState } from "recoil";
+import { displayStyleState } from "@/Cabinet/recoil/atoms";
 import DisplayStyleCard from "@/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard";
 import {
   DisplayStyleToggleType,
@@ -7,80 +9,53 @@ import {
 
 // 로컬스토리지의 display-style-toggle 값에 따라 DisplayStyleType 반환
 export const getInitialDisplayStyle = (
-  savedDisplayStyleToggle: DisplayStyleToggleType,
+  displayStyleToggle: DisplayStyleToggleType,
   darkModeQuery: MediaQueryList
-) => {
-  // 라이트 / 다크 버튼
-  if (savedDisplayStyleToggle === DisplayStyleToggleType.LIGHT)
+): DisplayStyleType => {
+  //라이트 / 다크 버튼
+  if (displayStyleToggle === DisplayStyleToggleType.LIGHT) {
     return DisplayStyleType.LIGHT;
-  else if (savedDisplayStyleToggle === DisplayStyleToggleType.DARK)
-    return DisplayStyleType.DARK;
-  // 디바이스 버튼
-  if (darkModeQuery.matches) {
+  } else if (displayStyleToggle === DisplayStyleToggleType.DARK) {
     return DisplayStyleType.DARK;
+    // 디바이스 버튼
+  } else {
+    return darkModeQuery.matches
+      ? DisplayStyleType.DARK
+      : DisplayStyleType.LIGHT;
   }
-  return DisplayStyleType.LIGHT;
 };
 
 const DisplayStyleCardContainer = () => {
-  const savedDisplayStyleToggle =
-    (localStorage.getItem("display-style-toggle") as DisplayStyleToggleType) ||
-    DisplayStyleToggleType.DEVICE;
-  var darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)");
-  const initialDisplayStyle = getInitialDisplayStyle(
-    savedDisplayStyleToggle,
-    darkModeQuery
-  );
-  const [darkMode, setDarkMode] = useState<DisplayStyleType>(
-    initialDisplayStyle as DisplayStyleType
-  );
-  const [toggleType, setToggleType] = useState<DisplayStyleToggleType>(
-    savedDisplayStyleToggle
-  );
-
-  const setColorsAndLocalStorage = (toggleType: DisplayStyleToggleType) => {
-    setToggleType(toggleType);
-    localStorage.setItem("display-style-toggle", toggleType);
-  };
+  const darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)");
+  const [toggleType, setToggleType] = useRecoilState(displayStyleState);
 
-  const handleDisplayStyleButtonClick = (displayStyleToggleType: string) => {
-    if (toggleType === displayStyleToggleType) return;
-    setToggleType(
-      displayStyleToggleType as React.SetStateAction<DisplayStyleToggleType>
-    );
-    setColorsAndLocalStorage(displayStyleToggleType as DisplayStyleToggleType);
+  const handleButtonClick = (key: DisplayStyleToggleType) => {
+    if (toggleType === key) return;
+    setToggleType(key);
+    localStorage.setItem("display-style-toggle", key);
   };
 
   useEffect(() => {
-    darkModeQuery.addEventListener("change", (event) =>
-      setDarkMode(
-        event.matches ? DisplayStyleType.DARK : DisplayStyleType.LIGHT
-      )
-    );
-  }, []);
-
-  useEffect(() => {
-    document.body.setAttribute("display-style", darkMode);
-  }, [darkMode]);
-
-  useEffect(() => {
-    if (toggleType === DisplayStyleToggleType.LIGHT) {
-      setDarkMode(DisplayStyleType.LIGHT);
-    } else if (toggleType === DisplayStyleToggleType.DARK) {
-      setDarkMode(DisplayStyleType.DARK);
-    } else {
-      setDarkMode(
-        darkModeQuery.matches ? DisplayStyleType.DARK : DisplayStyleType.LIGHT
-      );
-    }
+    const applyDisplayStyle = () => {
+      const newDarkMode = getInitialDisplayStyle(toggleType, darkModeQuery);
+      document.body.setAttribute("display-style", newDarkMode);
+    };
+
+    applyDisplayStyle();
+
+    const handleSystemThemeChange = () => {
+      if (toggleType === DisplayStyleToggleType.DEVICE) {
+        applyDisplayStyle();
+      }
+    };
+
+    darkModeQuery.addEventListener("change", handleSystemThemeChange);
+    return () => {
+      darkModeQuery.removeEventListener("change", handleSystemThemeChange);
+    };
   }, [toggleType]);
 
-  return (
-    <DisplayStyleCard
-      displayStyleToggle={toggleType}
-      handleDisplayStyleButtonClick={handleDisplayStyleButtonClick}
-    />
-  );
+  return <DisplayStyleCard handleButtonClick={handleButtonClick} />;
 };
 
 export default DisplayStyleCardContainer;

frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.tsx

@@ -1,22 +1,24 @@
+import React from "react";
+import { useRecoilState } from "recoil";
 import styled from "styled-components";
+import { displayStyleState } from "@/Cabinet/recoil/atoms";
 import Card from "@/Cabinet/components/Card/Card";
 import { CardContentWrapper } from "@/Cabinet/components/Card/CardStyles";
 import { ReactComponent as MonitorMobileIcon } from "@/Cabinet/assets/images/monitorMobile.svg";
 import { ReactComponent as MoonIcon } from "@/Cabinet/assets/images/moon.svg";
 import { ReactComponent as SunIcon } from "@/Cabinet/assets/images/sun.svg";
 import { DisplayStyleToggleType } from "@/Cabinet/types/enum/displayStyle.type.enum";
 
-interface DisplayStyleProps {
-  displayStyleToggle: DisplayStyleToggleType;
-  handleDisplayStyleButtonClick: (DisplayStyleToggleType: string) => void;
-}
-
 interface IToggleItemSeparated {
   name: string;
-  key: string;
+  key: DisplayStyleToggleType;
   icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
 }
 
+interface DisplayStyleCardProps {
+  handleButtonClick: (key: DisplayStyleToggleType) => void;
+}
+
 const toggleList: IToggleItemSeparated[] = [
   {
     name: "라이트",
@@ -35,42 +37,39 @@ const toggleList: IToggleItemSeparated[] = [
   },
 ];
 
-const DisplayStyleCard = ({
-  displayStyleToggle,
-  handleDisplayStyleButtonClick,
-}: DisplayStyleProps) => {
+const DisplayStyleCard: React.FC<DisplayStyleCardProps> = ({
+  handleButtonClick,
+}) => {
+  const [displayStyleToggle] = useRecoilState(displayStyleState);
+
   return (
-    <>
-      <DisplayStyleCardWrapper>
-        <Card
-          title={"화면 스타일"}
-          gridArea={"displayStyle"}
-          width={"350px"}
-          height={"183px"}
-        >
-          <>
-            <CardContentWrapper>
-              <ButtonsWrapperStyled>
-                {toggleList.map((item) => {
-                  const DisplayStyleIcon = item.icon;
-                  return (
-                    <ButtonStyled
-                      key={item.key}
-                      id={`${item.key}`}
-                      isClicked={displayStyleToggle === item.key}
-                      onClick={() => handleDisplayStyleButtonClick(item.key)}
-                    >
-                      {DisplayStyleIcon && <DisplayStyleIcon />}
-                      {item.name}
-                    </ButtonStyled>
-                  );
-                })}
-              </ButtonsWrapperStyled>
-            </CardContentWrapper>
-          </>
-        </Card>
-      </DisplayStyleCardWrapper>
-    </>
+    <DisplayStyleCardWrapper>
+      <Card
+        title={"화면 스타일"}
+        gridArea={"displayStyle"}
+        width={"350px"}
+        height={"183px"}
+      >
+        <CardContentWrapper>
+          <ButtonsWrapperStyled>
+            {toggleList.map((item) => {
+              const DisplayStyleIcon = item.icon;
+              return (
+                <ButtonStyled
+                  key={item.key}
+                  id={`${item.key}`}
+                  isClicked={displayStyleToggle === item.key}
+                  onClick={() => handleButtonClick(item.key)}
+                >
+                  <DisplayStyleIcon />
+                  {item.name}
+                </ButtonStyled>
+              );
+            })}
+          </ButtonsWrapperStyled>
+        </CardContentWrapper>
+      </Card>
+    </DisplayStyleCardWrapper>
   );
 };