From ad9486c28d011b3ce5cf856604ec95c07e5d18f2 Mon Sep 17 00:00:00 2001 From: gykoh42 Date: Thu, 19 Dec 2024 16:58:30 +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=20utils=20=ED=8C=8C=EC=9D=BC?= =?UTF-8?q?=EA=B3=BC=20custom=20hook=20=EC=9C=BC=EB=A1=9C=20=EB=B6=84?= =?UTF-8?q?=EB=A6=AC=20#1649?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../DisplayStyleCard.container.tsx | 8 +++---- .../DisplayStyleCard/DisplayStyleCard.tsx | 6 ++--- .../displayStyleInitializer.ts | 22 +++++-------------- .../Common/DarkModeToggleSwitch.tsx | 16 +++++++------- .../Cabinet/hooks/useDisplayStyleToggle.ts | 17 ++++++++++++++ .../src/Cabinet/utils/displayStyleUtils.ts | 21 ++++++++++++++++++ 6 files changed, 58 insertions(+), 32 deletions(-) create mode 100644 frontend/src/Cabinet/hooks/useDisplayStyleToggle.ts create mode 100644 frontend/src/Cabinet/utils/displayStyleUtils.ts diff --git a/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.container.tsx b/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.container.tsx index 43ca3960e..817940652 100644 --- a/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.container.tsx +++ b/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.container.tsx @@ -2,14 +2,14 @@ import { useEffect } from "react"; import { useRecoilValue } from "recoil"; import { displayStyleState } from "@/Cabinet/recoil/atoms"; import DisplayStyleCard from "@/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard"; -import { - isDeviceDarkMode, - updateBodyDisplayStyle, -} from "@/Cabinet/components/Card/DisplayStyleCard/displayStyleInitializer"; import { DisplayStyleToggleType, DisplayStyleType, } from "@/Cabinet/types/enum/displayStyle.type.enum"; +import { + isDeviceDarkMode, + updateBodyDisplayStyle, +} from "@/Cabinet/utils/displayStyleUtils"; // 로컬스토리지의 display-style-toggle 값에 따라 DisplayStyleType 반환 export const getInitialDisplayStyle = ( diff --git a/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.tsx b/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.tsx index 2c447bec6..0c3d1d1f9 100644 --- a/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.tsx +++ b/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.tsx @@ -8,6 +8,7 @@ import { ReactComponent as MonitorMobileIcon } from "@/Cabinet/assets/images/mon 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"; +import useDisplayStyleToggle from "@/Cabinet/hooks/useDisplayStyleToggle"; interface IToggleItemSeparated { name: string; @@ -41,11 +42,10 @@ export const updateLocalStorageDisplayStyleToggle = ( const DisplayStyleCard = () => { const [toggleType, setToggleType] = useRecoilState(displayStyleState); - + const { updateToggleType } = useDisplayStyleToggle(); const handleButtonClick = (key: DisplayStyleToggleType) => { if (toggleType === key) return; - setToggleType(key); - updateLocalStorageDisplayStyleToggle(key); + updateToggleType(key); }; return ( diff --git a/frontend/src/Cabinet/components/Card/DisplayStyleCard/displayStyleInitializer.ts b/frontend/src/Cabinet/components/Card/DisplayStyleCard/displayStyleInitializer.ts index 4dd66b8bc..d4e4b4112 100644 --- a/frontend/src/Cabinet/components/Card/DisplayStyleCard/displayStyleInitializer.ts +++ b/frontend/src/Cabinet/components/Card/DisplayStyleCard/displayStyleInitializer.ts @@ -3,23 +3,11 @@ import { DisplayStyleToggleType, DisplayStyleType, } from "@/Cabinet/types/enum/displayStyle.type.enum"; - -export const getDisplayStyleFromLocalStorage: () => DisplayStyleToggleType = - () => { - return ( - (localStorage.getItem( - "display-style-toggle" - ) as DisplayStyleToggleType) || DisplayStyleToggleType.DEVICE - ); - }; - -export const updateBodyDisplayStyle = (style: DisplayStyleType) => { - document.body.setAttribute("display-style", style); -}; - -export const isDeviceDarkMode = () => { - return window.matchMedia("(prefers-color-scheme: dark)"); -}; +import { + getDisplayStyleFromLocalStorage, + isDeviceDarkMode, + updateBodyDisplayStyle, +} from "@/Cabinet/utils/displayStyleUtils"; (function () { const isClient = typeof window !== "undefined"; diff --git a/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx b/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx index 9c924830c..9453bb265 100644 --- a/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx +++ b/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx @@ -2,19 +2,19 @@ import { useCallback, useEffect, useState } from "react"; import { useRecoilState } from "recoil"; import styled from "styled-components"; import { displayStyleState } from "@/Cabinet/recoil/atoms"; -import { updateLocalStorageDisplayStyleToggle } from "@/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard"; import { getInitialDisplayStyle } from "@/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.container"; -import { - getDisplayStyleFromLocalStorage, - isDeviceDarkMode, - updateBodyDisplayStyle, -} from "@/Cabinet/components/Card/DisplayStyleCard/displayStyleInitializer"; import { ReactComponent as MoonIcon } from "@/Cabinet/assets/images/moonIcon.svg"; import { ReactComponent as SunIcon } from "@/Cabinet/assets/images/sunIcon.svg"; import { DisplayStyleToggleType, DisplayStyleType, } from "@/Cabinet/types/enum/displayStyle.type.enum"; +import useDisplayStyleToggle from "@/Cabinet/hooks/useDisplayStyleToggle"; +import { + getDisplayStyleFromLocalStorage, + isDeviceDarkMode, + updateBodyDisplayStyle, +} from "@/Cabinet/utils/displayStyleUtils"; const DarkModeToggleSwitch = ({ id }: { id: string }) => { const [toggleType, setToggleType] = useRecoilState(displayStyleState); @@ -29,6 +29,7 @@ const DarkModeToggleSwitch = ({ id }: { id: string }) => { ); const isDarkMode = displayStyleType === DisplayStyleType.DARK; + const { updateToggleType } = useDisplayStyleToggle(); useEffect(() => { setToggleType(getDisplayStyleFromLocalStorage()); @@ -70,8 +71,7 @@ const DarkModeToggleSwitch = ({ id }: { id: string }) => { : DisplayStyleToggleType.LIGHT; } - updateLocalStorageDisplayStyleToggle(newToggleType); - setToggleType(newToggleType); + updateToggleType(newToggleType); }, [displayStyleType]); return ( diff --git a/frontend/src/Cabinet/hooks/useDisplayStyleToggle.ts b/frontend/src/Cabinet/hooks/useDisplayStyleToggle.ts new file mode 100644 index 000000000..3742c4a4e --- /dev/null +++ b/frontend/src/Cabinet/hooks/useDisplayStyleToggle.ts @@ -0,0 +1,17 @@ +import { useRecoilState } from "recoil"; +import { displayStyleState } from "@/Cabinet/recoil/atoms"; +import { updateLocalStorageDisplayStyleToggle } from "@/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard"; +import { DisplayStyleToggleType } from "@/Cabinet/types/enum/displayStyle.type.enum"; + +export const useDisplayStyleToggle = () => { + const [toggleType, setToggleType] = useRecoilState(displayStyleState); + + const updateToggleType = (newToggleType: DisplayStyleToggleType) => { + setToggleType(newToggleType); + updateLocalStorageDisplayStyleToggle(newToggleType); + }; + + return { updateToggleType }; +}; + +export default useDisplayStyleToggle; diff --git a/frontend/src/Cabinet/utils/displayStyleUtils.ts b/frontend/src/Cabinet/utils/displayStyleUtils.ts new file mode 100644 index 000000000..04ea15343 --- /dev/null +++ b/frontend/src/Cabinet/utils/displayStyleUtils.ts @@ -0,0 +1,21 @@ +import { + DisplayStyleToggleType, + DisplayStyleType, +} from "@/Cabinet/types/enum/displayStyle.type.enum"; + +export const getDisplayStyleFromLocalStorage: () => DisplayStyleToggleType = + () => { + return ( + (localStorage.getItem( + "display-style-toggle" + ) as DisplayStyleToggleType) || DisplayStyleToggleType.DEVICE + ); + }; + +export const updateBodyDisplayStyle = (style: DisplayStyleType) => { + document.body.setAttribute("display-style", style); +}; + +export const isDeviceDarkMode = () => { + return window.matchMedia("(prefers-color-scheme: dark)"); +};