From 15bba7ae5b27a4c8ff80ac825e794bb7aff0dd5f Mon Sep 17 00:00:00 2001
From: jnkeniaem <jeanne.kim9@gmail.com>
Date: Thu, 19 Dec 2024 14:29:59 +0900
Subject: [PATCH] =?UTF-8?q?[FE]=20FIX:=20updateLocalStorageDisplayStyleTog?=
 =?UTF-8?q?gle=20=EC=83=9D=EC=84=B1=20&=20=EC=A0=81=EC=9A=A9=20#1649?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Card/DisplayStyleCard/DisplayStyleCard.tsx | 8 +++++++-
 .../Cabinet/components/Common/DarkModeToggleSwitch.tsx    | 3 ++-
 2 files changed, 9 insertions(+), 2 deletions(-)

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]);