diff --git a/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.tsx b/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.tsx index 257c5da5b..2c447bec6 100644 --- a/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.tsx +++ b/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.tsx @@ -33,13 +33,19 @@ const toggleList: IToggleItemSeparated[] = [ }, ]; +export const updateLocalStorageDisplayStyleToggle = ( + toggleType: DisplayStyleToggleType +) => { + localStorage.setItem("display-style-toggle", toggleType); +}; + const DisplayStyleCard = () => { const [toggleType, setToggleType] = useRecoilState(displayStyleState); const handleButtonClick = (key: DisplayStyleToggleType) => { if (toggleType === key) return; setToggleType(key); - localStorage.setItem("display-style-toggle", key); + updateLocalStorageDisplayStyleToggle(key); }; return ( diff --git a/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx b/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx index 34e016908..0fa6145f1 100644 --- a/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx +++ b/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx @@ -2,6 +2,7 @@ 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, @@ -69,7 +70,7 @@ const DarkModeToggleSwitch = ({ id }: { id: string }) => { : DisplayStyleToggleType.LIGHT; } - localStorage.setItem("display-style-toggle", newToggleType); + updateLocalStorageDisplayStyleToggle(newToggleType); setDisplayStyleToggle(newToggleType); }, [displayStyleType]);