From 90924d23054f65e1bd8c2930de02b6519fb3080c Mon Sep 17 00:00:00 2001 From: gykoh42 Date: Sun, 30 Jun 2024 12:42:14 +0900 Subject: [PATCH 01/55] =?UTF-8?q?[FE]=20FEAT:=20admin=20TopNavDomainGroup?= =?UTF-8?q?=20=EC=9A=B0=EC=B8=A1=20=EC=83=81=EB=8B=A8=EC=97=90=20toggle=20?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EC=B6=94=EA=B0=80=20#1649?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../TopNavDomainGroup/TopNavDomainGroup.tsx | 27 +++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/frontend/src/Cabinet/components/TopNav/TopNavDomainGroup/TopNavDomainGroup.tsx b/frontend/src/Cabinet/components/TopNav/TopNavDomainGroup/TopNavDomainGroup.tsx index 737ff86ae..727763f50 100644 --- a/frontend/src/Cabinet/components/TopNav/TopNavDomainGroup/TopNavDomainGroup.tsx +++ b/frontend/src/Cabinet/components/TopNav/TopNavDomainGroup/TopNavDomainGroup.tsx @@ -1,6 +1,12 @@ +import { useState } from "react"; import { useLocation, useNavigate } from "react-router-dom"; import styled from "styled-components"; +import ToggleSwitch from "@/Cabinet/components/Common/ToggleSwitch"; import { ReactComponent as CabiLogo } from "@/Cabinet/assets/images/logo.svg"; +import { + DisplayStyleToggleType, + DisplayStyleType, +} from "@/Cabinet/types/enum/displayStyle.type.enum"; import { ReactComponent as PresentationLogo } from "@/Presentation/assets/images/logo.svg"; interface ITopNavDomain { @@ -31,6 +37,12 @@ const domains: ITopNavDomain[] = [ const TopNavDomainGroup = ({ isAdmin = false }: { isAdmin?: boolean }) => { const navigator = useNavigate(); const { pathname } = useLocation(); + const [isDarkMode, setIsDarkMode] = useState(false); + + const handleToggleChange = (checked: boolean) => { + setIsDarkMode(checked); + }; + return ( {domains.map((domain, index) => ( @@ -58,6 +70,15 @@ const TopNavDomainGroup = ({ isAdmin = false }: { isAdmin?: boolean }) => { {index < domains.length - 1 && } ))} + {pathname.includes("/admin") && ( + + + + )} ); }; @@ -127,4 +148,10 @@ const DomainSeparatorStyled = styled.div` background-color: var(--service-man-title-border-btm-color); `; +const ToggleContainerStyled = styled.div` + position: absolute; + right: 10px; + display: flex; + align-items: center; +`; export default TopNavDomainGroup; From 10d7b0a18651e45c800e850f69214f14e206f956 Mon Sep 17 00:00:00 2001 From: gykoh42 Date: Sun, 30 Jun 2024 19:52:00 +0900 Subject: [PATCH 02/55] =?UTF-8?q?[FE]=20FEAT:=20ToggleContainer=20right=20?= =?UTF-8?q?=EC=86=8D=EC=84=B1=20=EC=A1=B0=EC=A0=95=20#1649?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/TopNav/TopNavDomainGroup/TopNavDomainGroup.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/Cabinet/components/TopNav/TopNavDomainGroup/TopNavDomainGroup.tsx b/frontend/src/Cabinet/components/TopNav/TopNavDomainGroup/TopNavDomainGroup.tsx index 727763f50..7ec279557 100644 --- a/frontend/src/Cabinet/components/TopNav/TopNavDomainGroup/TopNavDomainGroup.tsx +++ b/frontend/src/Cabinet/components/TopNav/TopNavDomainGroup/TopNavDomainGroup.tsx @@ -150,7 +150,7 @@ const DomainSeparatorStyled = styled.div` const ToggleContainerStyled = styled.div` position: absolute; - right: 10px; + right: 0px; display: flex; align-items: center; `; From 123f69d7db87df5bc081bebd4f0e362f0d9c885c Mon Sep 17 00:00:00 2001 From: gykoh42 Date: Mon, 1 Jul 2024 00:56:50 +0900 Subject: [PATCH 03/55] =?UTF-8?q?[FE]=20FEAT:=20ToggleSwitch=20=ED=81=B4?= =?UTF-8?q?=EB=A6=AD=EC=8B=9C=20localStorage=20=EA=B0=92=20update=20?= =?UTF-8?q?=ED=95=98=EB=8A=94=20=EB=A1=9C=EC=A7=81=20=EC=B6=94=EA=B0=80=20?= =?UTF-8?q?#1649?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../TopNavDomainGroup/TopNavDomainGroup.tsx | 38 +++++++++---------- 1 file changed, 18 insertions(+), 20 deletions(-) diff --git a/frontend/src/Cabinet/components/TopNav/TopNavDomainGroup/TopNavDomainGroup.tsx b/frontend/src/Cabinet/components/TopNav/TopNavDomainGroup/TopNavDomainGroup.tsx index 7ec279557..abddb4833 100644 --- a/frontend/src/Cabinet/components/TopNav/TopNavDomainGroup/TopNavDomainGroup.tsx +++ b/frontend/src/Cabinet/components/TopNav/TopNavDomainGroup/TopNavDomainGroup.tsx @@ -1,12 +1,8 @@ -import { useState } from "react"; +import { useEffect, useState } from "react"; import { useLocation, useNavigate } from "react-router-dom"; import styled from "styled-components"; import ToggleSwitch from "@/Cabinet/components/Common/ToggleSwitch"; import { ReactComponent as CabiLogo } from "@/Cabinet/assets/images/logo.svg"; -import { - DisplayStyleToggleType, - DisplayStyleType, -} from "@/Cabinet/types/enum/displayStyle.type.enum"; import { ReactComponent as PresentationLogo } from "@/Presentation/assets/images/logo.svg"; interface ITopNavDomain { @@ -37,12 +33,23 @@ const domains: ITopNavDomain[] = [ const TopNavDomainGroup = ({ isAdmin = false }: { isAdmin?: boolean }) => { const navigator = useNavigate(); const { pathname } = useLocation(); - const [isDarkMode, setIsDarkMode] = useState(false); + const [isDarkMode, setIsDarkMode] = useState(() => { + const mode = localStorage.getItem("display-style") || "LIGHT"; + return mode === "DARK"; + }); const handleToggleChange = (checked: boolean) => { setIsDarkMode(checked); + const mode = checked ? "DARK" : "LIGHT"; + localStorage.setItem("display-style", mode); + document.body.setAttribute("display-style", mode); }; + useEffect(() => { + const mode = localStorage.getItem("display-style") || "LIGHT"; + document.body.setAttribute("display-style", mode); + }, []); + return ( {domains.map((domain, index) => ( @@ -103,6 +110,7 @@ const DomainWrapperStyled = styled.div` const DomainContainerStyled = styled.div` display: flex; align-items: center; + cursor: pointer; `; const LogoContainerStyled = styled.div<{ @@ -113,23 +121,13 @@ const LogoContainerStyled = styled.div<{ align-items: center; width: 14px; height: 14px; - cursor: pointer; svg { - .logo_svg__currentPath { - fill: ${(props) => - props.isCabi - ? "var(--sys-main-color);" - : " var(--sys-default-main-color);"}; - } + fill: ${(props) => + props.isCabi ? "var(--sys-main-color)" : "var(--sys-default-main-color)"}; width: 14px; height: 14px; } - - & > svg > path { - transform: ${(props) => - props.domainTitle === "수요지식회" ? "scale(1.08)" : "scale(1)"}; - } `; const DomainTitleStyled = styled.div<{ fontWeight: string }>` @@ -138,7 +136,6 @@ const DomainTitleStyled = styled.div<{ fontWeight: string }>` font-size: 0.875rem; font-weight: ${(props) => props.fontWeight}; margin-left: 4px; - cursor: pointer; `; const DomainSeparatorStyled = styled.div` @@ -150,8 +147,9 @@ const DomainSeparatorStyled = styled.div` const ToggleContainerStyled = styled.div` position: absolute; - right: 0px; + right: 0; display: flex; align-items: center; `; + export default TopNavDomainGroup; From c6cc4ab211a1eee044dc868ba3d08c56993971c2 Mon Sep 17 00:00:00 2001 From: gykoh42 Date: Tue, 2 Jul 2024 15:53:17 +0900 Subject: [PATCH 04/55] =?UTF-8?q?[FE]=20FEAT:=20ToggleSwitch=20=EB=8C=80?= =?UTF-8?q?=EC=8B=A0=20DarkModeToggleSwitch=20=EB=A1=9C=20=EB=8C=80?= =?UTF-8?q?=EC=B2=B4=20#1649?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../TopNav/TopNavDomainGroup/TopNavDomainGroup.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/src/Cabinet/components/TopNav/TopNavDomainGroup/TopNavDomainGroup.tsx b/frontend/src/Cabinet/components/TopNav/TopNavDomainGroup/TopNavDomainGroup.tsx index abddb4833..00821bffc 100644 --- a/frontend/src/Cabinet/components/TopNav/TopNavDomainGroup/TopNavDomainGroup.tsx +++ b/frontend/src/Cabinet/components/TopNav/TopNavDomainGroup/TopNavDomainGroup.tsx @@ -1,7 +1,7 @@ import { useEffect, useState } from "react"; import { useLocation, useNavigate } from "react-router-dom"; import styled from "styled-components"; -import ToggleSwitch from "@/Cabinet/components/Common/ToggleSwitch"; +import DarkModeToggleSwitch from "@/Cabinet/components/Common/DarkModeToggleSwitch"; import { ReactComponent as CabiLogo } from "@/Cabinet/assets/images/logo.svg"; import { ReactComponent as PresentationLogo } from "@/Presentation/assets/images/logo.svg"; @@ -79,7 +79,7 @@ const TopNavDomainGroup = ({ isAdmin = false }: { isAdmin?: boolean }) => { ))} {pathname.includes("/admin") && ( - Date: Tue, 2 Jul 2024 15:53:39 +0900 Subject: [PATCH 05/55] =?UTF-8?q?[FE]=20FEAT:=20DarkModeToggleSwitch=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84=20#1649?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Common/DarkModeToggleSwitch.tsx | 81 +++++++++++++++++++ 1 file changed, 81 insertions(+) create mode 100644 frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx diff --git a/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx b/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx new file mode 100644 index 000000000..780e8cbeb --- /dev/null +++ b/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx @@ -0,0 +1,81 @@ +import React from "react"; +import styled from "styled-components"; +import MoonIcon from "@/Cabinet/assets/images/moon.svg"; +import SunIcon from "@/Cabinet/assets/images/sun.svg"; + +interface ToggleSwitchInterface { + id: string; + onChange?: (checked: boolean) => void; + checked: boolean; + disabled?: boolean; +} + +const DarkModeToggleSwitch = ({ + id, + onChange, + checked = false, + disabled, +}: ToggleSwitchInterface) => { + const handleChange = (event: React.ChangeEvent) => { + const newState = event.target.checked; + if (onChange) onChange(newState); + }; + + return ( + + + + + + + ); +}; + +const ToggleSwitchContainerStyled = styled.div<{ disabled?: boolean }>` + display: inline-block; + position: relative; + margin-right: 10px; + opacity: ${(props) => (props.disabled ? 0.5 : 1)}; +`; + +const InputStyled = styled.input.attrs({ type: "checkbox" })` + opacity: 0; + position: absolute; + width: 0; + height: 0; +`; + +const ToggleSwitchStyled = styled.label<{ + checked: boolean; + disabled?: boolean; +}>` + cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")}; + display: inline-block; + position: relative; + background: ${(props) => + props.checked ? "var(--sys-main-color)" : "var(--line-color)"}; + width: 46px; + height: 24px; + border-radius: 50px; + transition: background-color 0.2s ease; +`; + +const ToggleKnobStyled = styled.span<{ checked: boolean }>` + position: absolute; + top: 50%; + transform: translateY(-50%); + left: ${(props) => (props.checked ? "calc(100% - 19px)" : "3px")}; + width: 16px; + height: 16px; + border-radius: 50%; + background: var(--white-text-with-bg-color); + transition: left 0.2s; +`; + +export default DarkModeToggleSwitch; From dc5c993c47dd05cab961677407b811abc28f3539 Mon Sep 17 00:00:00 2001 From: jnkeniaem Date: Tue, 2 Jul 2024 19:51:30 +0900 Subject: [PATCH 06/55] =?UTF-8?q?[FE]=20REFACT:=20DisplayStyleCard.contain?= =?UTF-8?q?er.tsx=20=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81#1649?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Card/DisplayStyleCard/DisplayStyleCard.container.tsx | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.container.tsx b/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.container.tsx index 472e4251f..5d39ae378 100644 --- a/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.container.tsx +++ b/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.container.tsx @@ -26,7 +26,7 @@ const DisplayStyleCardContainer = () => { const savedDisplayStyleToggle = (localStorage.getItem("display-style-toggle") as DisplayStyleToggleType) || DisplayStyleToggleType.DEVICE; - var darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)"); + const darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)"); const initialDisplayStyle = getInitialDisplayStyle( savedDisplayStyleToggle, darkModeQuery @@ -38,17 +38,12 @@ const DisplayStyleCardContainer = () => { savedDisplayStyleToggle ); - 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 ); - setColorsAndLocalStorage(displayStyleToggleType as DisplayStyleToggleType); + localStorage.setItem("display-style-toggle", displayStyleToggleType); }; useEffect(() => { From 3cbb2c1ef0abb7989df8336486c173177a4b7202 Mon Sep 17 00:00:00 2001 From: gykoh42 Date: Sun, 14 Jul 2024 19:21:35 +0900 Subject: [PATCH 07/55] =?UTF-8?q?[FE]=20FEAT:=20ToggleKnob=20=ED=81=AC?= =?UTF-8?q?=EA=B8=B0=20=EB=B0=8F=20left=20=EC=86=8D=EC=84=B1=20=EC=A1=B0?= =?UTF-8?q?=EC=A0=95=20#1649?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/Cabinet/components/Common/DarkModeToggleSwitch.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx b/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx index 780e8cbeb..a390f02ab 100644 --- a/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx +++ b/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx @@ -70,9 +70,9 @@ const ToggleKnobStyled = styled.span<{ checked: boolean }>` position: absolute; top: 50%; transform: translateY(-50%); - left: ${(props) => (props.checked ? "calc(100% - 19px)" : "3px")}; - width: 16px; - height: 16px; + left: ${(props) => (props.checked ? "calc(100% - 21px)" : "3px")}; + width: 18px; + height: 18px; border-radius: 50%; background: var(--white-text-with-bg-color); transition: left 0.2s; From ff63c151063e3f1bd4aa7e1169eb2b357aa44843 Mon Sep 17 00:00:00 2001 From: gykoh42 Date: Sun, 14 Jul 2024 20:59:12 +0900 Subject: [PATCH 08/55] =?UTF-8?q?[FE]=20FEAT:=20=EB=8B=A4=ED=81=AC?= =?UTF-8?q?=EB=AA=A8=EB=93=9C=20=ED=86=A0=EA=B8=80=EC=9D=84=20=EC=9C=84?= =?UTF-8?q?=ED=95=9C=20moonAdmin.svg=20=EC=B6=94=EA=B0=80=20#1649?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/Cabinet/assets/images/moonAdmin.svg | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 frontend/src/Cabinet/assets/images/moonAdmin.svg diff --git a/frontend/src/Cabinet/assets/images/moonAdmin.svg b/frontend/src/Cabinet/assets/images/moonAdmin.svg new file mode 100644 index 000000000..fac9ef161 --- /dev/null +++ b/frontend/src/Cabinet/assets/images/moonAdmin.svg @@ -0,0 +1,3 @@ + + + From 5ce56b84083208216f3ee371788f31d81c4a3968 Mon Sep 17 00:00:00 2001 From: gykoh42 Date: Sun, 14 Jul 2024 20:59:20 +0900 Subject: [PATCH 09/55] =?UTF-8?q?[FE]=20FEAT:=20=EB=8B=A4=ED=81=AC?= =?UTF-8?q?=EB=AA=A8=EB=93=9C=20=ED=86=A0=EA=B8=80=EC=9D=84=20=EC=9C=84?= =?UTF-8?q?=ED=95=9C=20sunAdmin.svg=20=EC=B6=94=EA=B0=80=20#1649?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/Cabinet/assets/images/sunAdmin.svg | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 frontend/src/Cabinet/assets/images/sunAdmin.svg diff --git a/frontend/src/Cabinet/assets/images/sunAdmin.svg b/frontend/src/Cabinet/assets/images/sunAdmin.svg new file mode 100644 index 000000000..ec27965a5 --- /dev/null +++ b/frontend/src/Cabinet/assets/images/sunAdmin.svg @@ -0,0 +1,4 @@ + + + + From bd01622ffad435c0768dd0078e4a8e2a7332df13 Mon Sep 17 00:00:00 2001 From: gykoh42 Date: Sun, 14 Jul 2024 20:59:52 +0900 Subject: [PATCH 10/55] =?UTF-8?q?[FE]=20FEAT:=20=EB=8B=A4=ED=81=AC?= =?UTF-8?q?=EB=AA=A8=EB=93=9C=20=ED=86=A0=EA=B8=80=EC=97=90=20=EC=95=84?= =?UTF-8?q?=EC=9D=B4=EC=BD=98=20=EC=A0=81=EC=9A=A9=20#1649?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Common/DarkModeToggleSwitch.tsx | 39 ++++++++++++++++++- 1 file changed, 37 insertions(+), 2 deletions(-) diff --git a/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx b/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx index a390f02ab..b1575863e 100644 --- a/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx +++ b/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx @@ -1,7 +1,7 @@ import React from "react"; import styled from "styled-components"; -import MoonIcon from "@/Cabinet/assets/images/moon.svg"; -import SunIcon from "@/Cabinet/assets/images/sun.svg"; +import { ReactComponent as MoonIcon } from "@/Cabinet/assets/images/moonAdmin.svg"; +import { ReactComponent as SunIcon } from "@/Cabinet/assets/images/sunAdmin.svg"; interface ToggleSwitchInterface { id: string; @@ -31,6 +31,12 @@ const DarkModeToggleSwitch = ({ disabled={disabled} /> + + + + + + @@ -78,4 +84,33 @@ const ToggleKnobStyled = styled.span<{ checked: boolean }>` transition: left 0.2s; `; +const SunWrapperStyled = styled.div` + position: absolute; + right: 5px; + top: 50%; + transform: translateY(-50%); + width: 18px; + height: 18px; + + & > svg { + width: 100%; + height: 100%; + } +`; + +const MoonWrapperStyled = styled.div` + position: absolute; + left: 5px; + top: 50%; + transform: translateY(-50%); + width: 16px; + height: 16px; + + & > svg { + width: 100%; + height: 100%; + fill: var(--black-text-color); + } +`; + export default DarkModeToggleSwitch; From 3a4a27bb8dc8091705d813a14766b5359b56c4ee Mon Sep 17 00:00:00 2001 From: gykoh42 Date: Sun, 14 Jul 2024 23:34:15 +0900 Subject: [PATCH 11/55] =?UTF-8?q?[FE]=20FEAT:=20=EB=8B=A4=ED=81=AC?= =?UTF-8?q?=EB=AA=A8=EB=93=9C=20=ED=86=A0=EA=B8=80=EC=97=90=20=EC=95=84?= =?UTF-8?q?=EC=9D=B4=EC=BD=98=20=EC=83=89=EC=83=81=20=EB=B3=80=EA=B2=BD=20?= =?UTF-8?q?#1649?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/Cabinet/assets/images/moonAdmin.svg | 2 +- frontend/src/Cabinet/assets/images/sunAdmin.svg | 4 ++-- .../src/Cabinet/components/Common/DarkModeToggleSwitch.tsx | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/frontend/src/Cabinet/assets/images/moonAdmin.svg b/frontend/src/Cabinet/assets/images/moonAdmin.svg index fac9ef161..3c8a7af6d 100644 --- a/frontend/src/Cabinet/assets/images/moonAdmin.svg +++ b/frontend/src/Cabinet/assets/images/moonAdmin.svg @@ -1,3 +1,3 @@ - + diff --git a/frontend/src/Cabinet/assets/images/sunAdmin.svg b/frontend/src/Cabinet/assets/images/sunAdmin.svg index ec27965a5..6c6c3a549 100644 --- a/frontend/src/Cabinet/assets/images/sunAdmin.svg +++ b/frontend/src/Cabinet/assets/images/sunAdmin.svg @@ -1,4 +1,4 @@ - - + + diff --git a/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx b/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx index b1575863e..e5e2e3ecc 100644 --- a/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx +++ b/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx @@ -109,7 +109,7 @@ const MoonWrapperStyled = styled.div` & > svg { width: 100%; height: 100%; - fill: var(--black-text-color); + fill: var(--ref-gray-900); } `; From c11e56f186cdb234605b29459d676158d53d079f Mon Sep 17 00:00:00 2001 From: Minkyu01 Date: Mon, 15 Jul 2024 01:08:13 +0900 Subject: [PATCH 12/55] =?UTF-8?q?[FE]=20FIX:=20admin=20coin=EA=B7=B8?= =?UTF-8?q?=EB=9E=98=ED=94=84=20=EA=B9=A8=EC=A7=80=EB=8A=94=20=EB=B2=84?= =?UTF-8?q?=EA=B7=B8=20=EC=88=98=EC=A0=95=20#1649?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Cabinet/components/AdminInfo/Chart/CoinUseLineChart.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/frontend/src/Cabinet/components/AdminInfo/Chart/CoinUseLineChart.tsx b/frontend/src/Cabinet/components/AdminInfo/Chart/CoinUseLineChart.tsx index 4860da99c..defcf5812 100644 --- a/frontend/src/Cabinet/components/AdminInfo/Chart/CoinUseLineChart.tsx +++ b/frontend/src/Cabinet/components/AdminInfo/Chart/CoinUseLineChart.tsx @@ -15,6 +15,9 @@ const CoinUseLineChart = ({ if (totalCoinUseData === undefined) { return null; } + + console.log("totalCoinUseData", totalCoinUseData); + const formattedData = [ { id: "issuedCoin", @@ -39,8 +42,9 @@ 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)); + console.log("yMin, YMax", yMin, yMax); // NOTE : y축 scale을 log로 표현하기 위해 Y scale을 설정 // ex) 123 이면 100 ~ 1000 사이의 값이니 10^0 ~ 10^3 사이의 값으로 표현 From 319bb337f00a1ea080a1365bcd3c0be28e5628fb Mon Sep 17 00:00:00 2001 From: gykoh42 Date: Mon, 15 Jul 2024 08:10:07 +0900 Subject: [PATCH 13/55] =?UTF-8?q?[FE]=20FEAT:=20sunAdmin.svg=20=EC=83=89?= =?UTF-8?q?=EC=83=81=20=EB=B3=80=EA=B2=BD=20#1649?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/Cabinet/assets/images/sunAdmin.svg | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/Cabinet/assets/images/sunAdmin.svg b/frontend/src/Cabinet/assets/images/sunAdmin.svg index 6c6c3a549..c3a482e73 100644 --- a/frontend/src/Cabinet/assets/images/sunAdmin.svg +++ b/frontend/src/Cabinet/assets/images/sunAdmin.svg @@ -1,4 +1,4 @@ - - + + From 957002fc9ec40d4ef5f33202ed86e7120b532f4a Mon Sep 17 00:00:00 2001 From: gykoh42 Date: Tue, 16 Jul 2024 14:46:35 +0900 Subject: [PATCH 14/55] =?UTF-8?q?[FE]=20FIX:=20TopNavDomainGroup=20?= =?UTF-8?q?=EC=97=90=20=EC=98=AC=EB=B0=94=EB=A5=B4=EC=A7=80=20=EC=95=8A?= =?UTF-8?q?=EC=9D=80=20=EB=A1=9C=EA=B3=A0=20=EC=83=89=EC=83=81=20=EC=A0=81?= =?UTF-8?q?=EC=9A=A9=EB=90=98=EB=8A=94=20=EB=AC=B8=EC=A0=9C=20=ED=95=B4?= =?UTF-8?q?=EA=B2=B0=20#1649?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../TopNavDomainGroup/TopNavDomainGroup.tsx | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/frontend/src/Cabinet/components/TopNav/TopNavDomainGroup/TopNavDomainGroup.tsx b/frontend/src/Cabinet/components/TopNav/TopNavDomainGroup/TopNavDomainGroup.tsx index 00821bffc..f72e63035 100644 --- a/frontend/src/Cabinet/components/TopNav/TopNavDomainGroup/TopNavDomainGroup.tsx +++ b/frontend/src/Cabinet/components/TopNav/TopNavDomainGroup/TopNavDomainGroup.tsx @@ -110,7 +110,6 @@ const DomainWrapperStyled = styled.div` const DomainContainerStyled = styled.div` display: flex; align-items: center; - cursor: pointer; `; const LogoContainerStyled = styled.div<{ @@ -121,13 +120,23 @@ const LogoContainerStyled = styled.div<{ align-items: center; width: 14px; height: 14px; + cursor: pointer; svg { - fill: ${(props) => - props.isCabi ? "var(--sys-main-color)" : "var(--sys-default-main-color)"}; + .logo_svg__currentPath { + fill: ${(props) => + props.isCabi + ? "var(--sys-main-color);" + : " var(--sys-default-main-color);"}; + } width: 14px; height: 14px; } + + & > svg > path { + transform: ${(props) => + props.domainTitle === "수요지식회" ? "scale(1.08)" : "scale(1)"}; + } `; const DomainTitleStyled = styled.div<{ fontWeight: string }>` @@ -136,6 +145,7 @@ const DomainTitleStyled = styled.div<{ fontWeight: string }>` font-size: 0.875rem; font-weight: ${(props) => props.fontWeight}; margin-left: 4px; + cursor: pointer; `; const DomainSeparatorStyled = styled.div` @@ -144,12 +154,10 @@ const DomainSeparatorStyled = styled.div` margin: 0 8px; background-color: var(--service-man-title-border-btm-color); `; - const ToggleContainerStyled = styled.div` position: absolute; right: 20px; display: flex; align-items: center; `; - export default TopNavDomainGroup; From a63da515e1badefb977253a6142ae0d9c4181595 Mon Sep 17 00:00:00 2001 From: gykoh42 Date: Mon, 22 Jul 2024 14:04:34 +0900 Subject: [PATCH 15/55] =?UTF-8?q?[FE]=20FEAT:=20DisplayStyleCard.container?= =?UTF-8?q?=20=ED=8C=8C=EC=9D=BC=20dev=20=EB=B8=8C=EB=9E=9C=EC=B9=98=20?= =?UTF-8?q?=ED=8C=8C=EC=9D=BC=EB=A1=9C=20=EB=B3=B5=EA=B5=AC=20#1649?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Card/DisplayStyleCard/DisplayStyleCard.container.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.container.tsx b/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.container.tsx index 5d39ae378..472e4251f 100644 --- a/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.container.tsx +++ b/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.container.tsx @@ -26,7 +26,7 @@ const DisplayStyleCardContainer = () => { const savedDisplayStyleToggle = (localStorage.getItem("display-style-toggle") as DisplayStyleToggleType) || DisplayStyleToggleType.DEVICE; - const darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)"); + var darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)"); const initialDisplayStyle = getInitialDisplayStyle( savedDisplayStyleToggle, darkModeQuery @@ -38,12 +38,17 @@ const DisplayStyleCardContainer = () => { savedDisplayStyleToggle ); + 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 ); - localStorage.setItem("display-style-toggle", displayStyleToggleType); + setColorsAndLocalStorage(displayStyleToggleType as DisplayStyleToggleType); }; useEffect(() => { From 22593b5fcaabd03fcc187c262fb82952118d2b58 Mon Sep 17 00:00:00 2001 From: gykoh42 Date: Tue, 23 Jul 2024 05:32:31 +0900 Subject: [PATCH 16/55] =?UTF-8?q?[FE]=20FEAT:=20DarkModeToggleSwitch=20?= =?UTF-8?q?=EC=9D=98=20=EC=B4=88=EA=B8=B0=EA=B0=92=EC=9D=84=20=EA=B8=B0?= =?UTF-8?q?=EA=B8=B0=20=EC=84=A4=EC=A0=95=EA=B0=92=EC=9C=BC=EB=A1=9C=20?= =?UTF-8?q?=EC=A0=81=EC=9A=A9=ED=95=98=EB=8A=94=20=EB=A1=9C=EC=A7=81=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=20#1649?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Common/DarkModeToggleSwitch.tsx | 101 +++++++++++++----- 1 file changed, 77 insertions(+), 24 deletions(-) diff --git a/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx b/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx index e5e2e3ecc..fce8e9aae 100644 --- a/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx +++ b/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx @@ -1,53 +1,109 @@ -import React from "react"; +import React, { useEffect, useState } from "react"; import styled from "styled-components"; import { ReactComponent as MoonIcon } from "@/Cabinet/assets/images/moonAdmin.svg"; import { ReactComponent as SunIcon } from "@/Cabinet/assets/images/sunAdmin.svg"; +import { + DisplayStyleToggleType, + DisplayStyleType, +} from "@/Cabinet/types/enum/displayStyle.type.enum"; interface ToggleSwitchInterface { id: string; - onChange?: (checked: boolean) => void; - checked: boolean; - disabled?: boolean; } -const DarkModeToggleSwitch = ({ - id, - onChange, - checked = false, - disabled, -}: ToggleSwitchInterface) => { +const getInitialDisplayStyle = ( + savedDisplayStyleToggle: DisplayStyleToggleType, + darkModeQuery: MediaQueryList +) => { + if (savedDisplayStyleToggle === DisplayStyleToggleType.LIGHT) + return DisplayStyleType.LIGHT; + else if (savedDisplayStyleToggle === DisplayStyleToggleType.DARK) + return DisplayStyleType.DARK; + + if (darkModeQuery.matches) { + return DisplayStyleType.DARK; + } + return DisplayStyleType.LIGHT; +}; + +const DarkModeToggleSwitch = ({ id }: ToggleSwitchInterface) => { + const savedDisplayStyleToggle = + (localStorage.getItem("display-style-toggle") as DisplayStyleToggleType) || + DisplayStyleToggleType.DEVICE; + const darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)"); + const initialDisplayStyle = getInitialDisplayStyle( + savedDisplayStyleToggle, + darkModeQuery + ); + const [darkMode, setDarkMode] = useState( + initialDisplayStyle as DisplayStyleType + ); + const [toggleType, setToggleType] = useState( + savedDisplayStyleToggle + ); + + const setColorsAndLocalStorage = (toggleType: DisplayStyleToggleType) => { + setToggleType(toggleType); + localStorage.setItem("display-style-toggle", toggleType); + setDarkMode( + toggleType === DisplayStyleToggleType.LIGHT + ? DisplayStyleType.LIGHT + : toggleType === DisplayStyleToggleType.DARK + ? DisplayStyleType.DARK + : darkModeQuery.matches + ? DisplayStyleType.DARK + : DisplayStyleType.LIGHT + ); + }; + const handleChange = (event: React.ChangeEvent) => { - const newState = event.target.checked; - if (onChange) onChange(newState); + const newToggleType = + toggleType === DisplayStyleToggleType.LIGHT + ? DisplayStyleToggleType.DARK + : DisplayStyleToggleType.LIGHT; + setColorsAndLocalStorage(newToggleType); }; + useEffect(() => { + darkModeQuery.addEventListener("change", (event) => + setDarkMode( + event.matches ? DisplayStyleType.DARK : DisplayStyleType.LIGHT + ) + ); + }, []); + + useEffect(() => { + document.body.setAttribute("display-style", darkMode); + }, [darkMode]); + return ( - + - + - + ); }; -const ToggleSwitchContainerStyled = styled.div<{ disabled?: boolean }>` +const ToggleSwitchContainerStyled = styled.div` display: inline-block; position: relative; margin-right: 10px; - opacity: ${(props) => (props.disabled ? 0.5 : 1)}; `; const InputStyled = styled.input.attrs({ type: "checkbox" })` @@ -57,11 +113,8 @@ const InputStyled = styled.input.attrs({ type: "checkbox" })` height: 0; `; -const ToggleSwitchStyled = styled.label<{ - checked: boolean; - disabled?: boolean; -}>` - cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")}; +const ToggleSwitchStyled = styled.label<{ checked: boolean }>` + cursor: pointer; display: inline-block; position: relative; background: ${(props) => From 392abb37e3f812cdfeaad96a73a8c2c4c67852cd Mon Sep 17 00:00:00 2001 From: gykoh42 Date: Tue, 23 Jul 2024 05:35:20 +0900 Subject: [PATCH 17/55] =?UTF-8?q?[FE]=20FEAT:=20TopNavDomainGroup=20?= =?UTF-8?q?=EC=97=90=20=EC=88=98=EC=A0=95=ED=95=9C=20DarkModeToggleSwitch?= =?UTF-8?q?=20=EC=B6=94=EA=B0=80=20#1649?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../TopNavDomainGroup/TopNavDomainGroup.tsx | 35 ++++--------------- 1 file changed, 7 insertions(+), 28 deletions(-) diff --git a/frontend/src/Cabinet/components/TopNav/TopNavDomainGroup/TopNavDomainGroup.tsx b/frontend/src/Cabinet/components/TopNav/TopNavDomainGroup/TopNavDomainGroup.tsx index f72e63035..2f8fe5899 100644 --- a/frontend/src/Cabinet/components/TopNav/TopNavDomainGroup/TopNavDomainGroup.tsx +++ b/frontend/src/Cabinet/components/TopNav/TopNavDomainGroup/TopNavDomainGroup.tsx @@ -33,23 +33,6 @@ const domains: ITopNavDomain[] = [ const TopNavDomainGroup = ({ isAdmin = false }: { isAdmin?: boolean }) => { const navigator = useNavigate(); const { pathname } = useLocation(); - const [isDarkMode, setIsDarkMode] = useState(() => { - const mode = localStorage.getItem("display-style") || "LIGHT"; - return mode === "DARK"; - }); - - const handleToggleChange = (checked: boolean) => { - setIsDarkMode(checked); - const mode = checked ? "DARK" : "LIGHT"; - localStorage.setItem("display-style", mode); - document.body.setAttribute("display-style", mode); - }; - - useEffect(() => { - const mode = localStorage.getItem("display-style") || "LIGHT"; - document.body.setAttribute("display-style", mode); - }, []); - return ( {domains.map((domain, index) => ( @@ -77,15 +60,9 @@ const TopNavDomainGroup = ({ isAdmin = false }: { isAdmin?: boolean }) => { {index < domains.length - 1 && } ))} - {pathname.includes("/admin") && ( - - - - )} + + + ); }; @@ -154,10 +131,12 @@ const DomainSeparatorStyled = styled.div` margin: 0 8px; background-color: var(--service-man-title-border-btm-color); `; -const ToggleContainerStyled = styled.div` + +const ToggleWrapperStyled = styled.div` position: absolute; - right: 20px; + right: 18px; display: flex; align-items: center; `; + export default TopNavDomainGroup; From 35ef96c713cf5c8fe852e3a2829748986ec5b1e7 Mon Sep 17 00:00:00 2001 From: gykoh42 Date: Tue, 23 Jul 2024 05:51:49 +0900 Subject: [PATCH 18/55] =?UTF-8?q?[FE]=20FIX:=20=ED=86=A0=EA=B8=80=20?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=EC=9C=BC=EB=A1=9C=20=ED=99=94=EB=A9=B4=20?= =?UTF-8?q?=EB=AA=A8=EB=93=9C=20=EC=84=A4=EC=A0=95=ED=95=9C=20=EC=83=81?= =?UTF-8?q?=ED=83=9C=EC=97=90=EC=84=9C=20=EA=B8=B0=EA=B8=B0=20=EC=84=A4?= =?UTF-8?q?=EC=A0=95=EC=9C=BC=EB=A1=9C=20=EB=AA=A8=EB=93=9C=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD=EC=8B=9C=20=ED=86=A0=EA=B8=80=20=EB=B2=84=ED=8A=BC?= =?UTF-8?q?=EC=9D=84=20=EB=91=90=EB=B2=88=20=ED=81=B4=EB=A6=AD=ED=95=B4?= =?UTF-8?q?=EC=95=BC=20=EA=B0=92=EC=9D=B4=20=EB=B3=80=EA=B2=BD=EB=90=98?= =?UTF-8?q?=EB=8A=94=20=EB=B2=84=EA=B7=B8=20=ED=95=B4=EA=B2=B0=20#1649?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Common/DarkModeToggleSwitch.tsx | 22 +++++++++++++------ 1 file changed, 15 insertions(+), 7 deletions(-) diff --git a/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx b/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx index fce8e9aae..341104c55 100644 --- a/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx +++ b/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx @@ -58,19 +58,27 @@ const DarkModeToggleSwitch = ({ id }: ToggleSwitchInterface) => { const handleChange = (event: React.ChangeEvent) => { const newToggleType = - toggleType === DisplayStyleToggleType.LIGHT + darkMode === DisplayStyleType.LIGHT ? DisplayStyleToggleType.DARK : DisplayStyleToggleType.LIGHT; setColorsAndLocalStorage(newToggleType); }; useEffect(() => { - darkModeQuery.addEventListener("change", (event) => - setDarkMode( - event.matches ? DisplayStyleType.DARK : DisplayStyleType.LIGHT - ) - ); - }, []); + const darkModeListener = (event: MediaQueryListEvent) => { + const newDisplayStyle = event.matches + ? DisplayStyleType.DARK + : DisplayStyleType.LIGHT; + setDarkMode(newDisplayStyle); + if (toggleType === DisplayStyleToggleType.DEVICE) { + setDarkMode(newDisplayStyle); + } + }; + + darkModeQuery.addEventListener("change", darkModeListener); + + return () => darkModeQuery.removeEventListener("change", darkModeListener); + }, [darkModeQuery, toggleType]); useEffect(() => { document.body.setAttribute("display-style", darkMode); From 03219d35a2d464fbae403affbe108bae9b36b94f Mon Sep 17 00:00:00 2001 From: gykoh42 Date: Thu, 1 Aug 2024 11:51:39 +0900 Subject: [PATCH 19/55] [FE] FEAT: tmp push --- frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx b/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx index 341104c55..7fa78ccd0 100644 --- a/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx +++ b/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx @@ -172,6 +172,6 @@ const MoonWrapperStyled = styled.div` height: 100%; fill: var(--ref-gray-900); } -`; +`; export default DarkModeToggleSwitch; From c420d0ee14dcafff120d3d6e9a018690e6460048 Mon Sep 17 00:00:00 2001 From: gykoh42 Date: Tue, 3 Sep 2024 20:12:05 +0900 Subject: [PATCH 20/55] [FE] Chore: tmp push --- frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx b/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx index 7fa78ccd0..ccccc17b0 100644 --- a/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx +++ b/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx @@ -119,7 +119,7 @@ const InputStyled = styled.input.attrs({ type: "checkbox" })` position: absolute; width: 0; height: 0; -`; +`; const ToggleSwitchStyled = styled.label<{ checked: boolean }>` cursor: pointer; From 1ae685ab935711c23c440172e799d518fd31c18e Mon Sep 17 00:00:00 2001 From: gykoh42 Date: Mon, 9 Sep 2024 14:16:12 +0900 Subject: [PATCH 21/55] =?UTF-8?q?[FE]=20FEAT:=20displayStyleState=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=20#1649?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/Cabinet/recoil/atoms.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/frontend/src/Cabinet/recoil/atoms.ts b/frontend/src/Cabinet/recoil/atoms.ts index dfee2ebb3..a625126c5 100644 --- a/frontend/src/Cabinet/recoil/atoms.ts +++ b/frontend/src/Cabinet/recoil/atoms.ts @@ -19,6 +19,7 @@ import { import { ClubUserDto } from "@/Cabinet/types/dto/lent.dto"; import { UserDto, UserInfo } from "@/Cabinet/types/dto/user.dto"; import CabinetDetailAreaType from "@/Cabinet/types/enum/cabinetDetailArea.type.enum"; +import { DisplayStyleToggleType } from "@/Cabinet/types/enum/displayStyle.type.enum"; const { persistAtom } = recoilPersist(); @@ -208,3 +209,8 @@ export const targetClubUserInfoState = atom({ userName: "", }, }); + +export const displayStyleState = atom({ + key: "displayStyleState", + default: DisplayStyleToggleType.DEVICE, +}); From 05459aae772797412b7f1b32e531754b3c95b251 Mon Sep 17 00:00:00 2001 From: gykoh42 Date: Mon, 9 Sep 2024 14:17:32 +0900 Subject: [PATCH 22/55] =?UTF-8?q?[FE]=20FEAT:=20recoil=EB=A1=9C=20?= =?UTF-8?q?=ED=86=A0=EA=B8=80=20=EC=8A=A4=EC=9C=84=EC=B9=98=EC=99=80=20?= =?UTF-8?q?=ED=94=84=EB=A1=9C=ED=95=84=20=EB=B2=84=ED=8A=BC=20=ED=86=B5?= =?UTF-8?q?=ED=95=A9=20#1649?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../DisplayStyleCard/DisplayStyleCard.tsx | 27 ++-- .../Common/DarkModeToggleSwitch.tsx | 118 ++++++------------ 2 files changed, 57 insertions(+), 88 deletions(-) diff --git a/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.tsx b/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.tsx index f24601027..ed29261c4 100644 --- a/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.tsx +++ b/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.tsx @@ -1,4 +1,7 @@ +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"; @@ -6,11 +9,6 @@ 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; @@ -35,10 +33,15 @@ const toggleList: IToggleItemSeparated[] = [ }, ]; -const DisplayStyleCard = ({ - displayStyleToggle, - handleDisplayStyleButtonClick, -}: DisplayStyleProps) => { +const DisplayStyleCard = () => { + const [displayStyleToggle, setDisplayStyleToggle] = + useRecoilState(displayStyleState); + + const handleButtonClick = (key: DisplayStyleToggleType) => { + localStorage.setItem("display-style-toggle", key); + setDisplayStyleToggle(key); + }; + return ( <> @@ -58,9 +61,11 @@ const DisplayStyleCard = ({ key={item.key} id={`${item.key}`} isClicked={displayStyleToggle === item.key} - onClick={() => handleDisplayStyleButtonClick(item.key)} + onClick={() => + handleButtonClick(item.key as DisplayStyleToggleType) + } > - {DisplayStyleIcon && } + {item.name} ); diff --git a/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx b/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx index ccccc17b0..2184dc70f 100644 --- a/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx +++ b/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx @@ -1,5 +1,7 @@ -import React, { useEffect, useState } from "react"; +import React, { useEffect } from "react"; +import { useRecoilState } from "recoil"; import styled from "styled-components"; +import { displayStyleState } from "@/Cabinet/recoil/atoms"; import { ReactComponent as MoonIcon } from "@/Cabinet/assets/images/moonAdmin.svg"; import { ReactComponent as SunIcon } from "@/Cabinet/assets/images/sunAdmin.svg"; import { @@ -11,98 +13,61 @@ interface ToggleSwitchInterface { id: string; } -const getInitialDisplayStyle = ( - savedDisplayStyleToggle: DisplayStyleToggleType, - darkModeQuery: MediaQueryList -) => { - if (savedDisplayStyleToggle === DisplayStyleToggleType.LIGHT) - return DisplayStyleType.LIGHT; - else if (savedDisplayStyleToggle === DisplayStyleToggleType.DARK) - return DisplayStyleType.DARK; - - if (darkModeQuery.matches) { - return DisplayStyleType.DARK; - } - return DisplayStyleType.LIGHT; -}; - const DarkModeToggleSwitch = ({ id }: ToggleSwitchInterface) => { - const savedDisplayStyleToggle = - (localStorage.getItem("display-style-toggle") as DisplayStyleToggleType) || - DisplayStyleToggleType.DEVICE; + const [displayStyleToggle, setDisplayStyleToggle] = useRecoilState(displayStyleState); const darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)"); - const initialDisplayStyle = getInitialDisplayStyle( - savedDisplayStyleToggle, - darkModeQuery - ); - const [darkMode, setDarkMode] = useState( - initialDisplayStyle as DisplayStyleType - ); - const [toggleType, setToggleType] = useState( - savedDisplayStyleToggle - ); - const setColorsAndLocalStorage = (toggleType: DisplayStyleToggleType) => { - setToggleType(toggleType); - localStorage.setItem("display-style-toggle", toggleType); - setDarkMode( - toggleType === DisplayStyleToggleType.LIGHT - ? DisplayStyleType.LIGHT - : toggleType === DisplayStyleToggleType.DARK - ? DisplayStyleType.DARK - : darkModeQuery.matches - ? DisplayStyleType.DARK - : DisplayStyleType.LIGHT - ); - }; - - const handleChange = (event: React.ChangeEvent) => { - const newToggleType = - darkMode === DisplayStyleType.LIGHT - ? DisplayStyleToggleType.DARK - : DisplayStyleToggleType.LIGHT; - setColorsAndLocalStorage(newToggleType); - }; + useEffect(() => { + const savedDisplayStyle = localStorage.getItem("display-style-toggle") || DisplayStyleToggleType.DEVICE; + setDisplayStyleToggle(savedDisplayStyle as DisplayStyleToggleType); + }, []); useEffect(() => { - const darkModeListener = (event: MediaQueryListEvent) => { - const newDisplayStyle = event.matches - ? DisplayStyleType.DARK - : DisplayStyleType.LIGHT; - setDarkMode(newDisplayStyle); - if (toggleType === DisplayStyleToggleType.DEVICE) { - setDarkMode(newDisplayStyle); + const handleChange = (event: MediaQueryListEvent) => { + if (displayStyleToggle === DisplayStyleToggleType.DEVICE) { + const newDisplayStyle = event.matches + ? DisplayStyleType.DARK + : DisplayStyleType.LIGHT; + setDisplayStyleToggle( + newDisplayStyle === DisplayStyleType.DARK + ? DisplayStyleToggleType.DARK + : DisplayStyleToggleType.LIGHT + ); } }; + darkModeQuery.addEventListener("change", handleChange); + return () => darkModeQuery.removeEventListener("change", handleChange); + }, [darkModeQuery, displayStyleToggle]); - darkModeQuery.addEventListener("change", darkModeListener); - - return () => darkModeQuery.removeEventListener("change", darkModeListener); - }, [darkModeQuery, toggleType]); + const handleToggle = () => { + const newToggleType = + displayStyleToggle === DisplayStyleToggleType.LIGHT + ? DisplayStyleToggleType.DARK + : DisplayStyleToggleType.LIGHT; + localStorage.setItem("display-style-toggle", newToggleType); + setDisplayStyleToggle(newToggleType); + }; - useEffect(() => { - document.body.setAttribute("display-style", darkMode); - }, [darkMode]); + const isChecked = + displayStyleToggle === DisplayStyleToggleType.DARK || + (displayStyleToggle === DisplayStyleToggleType.DEVICE && darkModeQuery.matches); return ( - + - + ); @@ -119,14 +84,13 @@ const InputStyled = styled.input.attrs({ type: "checkbox" })` position: absolute; width: 0; height: 0; -`; +`; 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; @@ -137,7 +101,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%; @@ -172,6 +136,6 @@ const MoonWrapperStyled = styled.div` height: 100%; fill: var(--ref-gray-900); } -`; +`; export default DarkModeToggleSwitch; From e4e88ce900b04aea1a5acdcc8f5c6c194d13c127 Mon Sep 17 00:00:00 2001 From: gykoh42 Date: Tue, 10 Sep 2024 14:25:57 +0900 Subject: [PATCH 23/55] =?UTF-8?q?[FE]=20FEAT:=20DisplayStyleCard=20?= =?UTF-8?q?=EB=B0=8F=20DisplayStyleCard=20container=20=EC=97=90=20props=20?= =?UTF-8?q?=EB=B0=9B=EC=95=84=EC=A7=80=EB=8F=84=EB=A1=9D=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Card/DisplayStyleCard/DisplayStyleCard.container.tsx | 1 - .../Card/DisplayStyleCard/DisplayStyleCard.tsx | 9 ++++++++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.container.tsx b/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.container.tsx index 472e4251f..0bf6e845a 100644 --- a/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.container.tsx +++ b/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.container.tsx @@ -77,7 +77,6 @@ const DisplayStyleCardContainer = () => { return ( ); diff --git a/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.tsx b/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.tsx index ed29261c4..cac4b274e 100644 --- a/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.tsx +++ b/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.tsx @@ -15,6 +15,10 @@ interface IToggleItemSeparated { icon: React.ComponentType>; } +interface DisplayStyleCardProps { + handleDisplayStyleButtonClick: (key: DisplayStyleToggleType) => void; +} + const toggleList: IToggleItemSeparated[] = [ { name: "라이트", @@ -33,13 +37,16 @@ const toggleList: IToggleItemSeparated[] = [ }, ]; -const DisplayStyleCard = () => { +const DisplayStyleCard: React.FC = ({ + handleDisplayStyleButtonClick, +}) => { const [displayStyleToggle, setDisplayStyleToggle] = useRecoilState(displayStyleState); const handleButtonClick = (key: DisplayStyleToggleType) => { localStorage.setItem("display-style-toggle", key); setDisplayStyleToggle(key); + handleDisplayStyleButtonClick(key); }; return ( From 274efd7448cf48cb4e7e56b81c4ee842af450dad Mon Sep 17 00:00:00 2001 From: gykoh42 Date: Tue, 10 Sep 2024 15:00:05 +0900 Subject: [PATCH 24/55] =?UTF-8?q?[FE]=20FEAT:=20useRecoilState=20=EC=A0=81?= =?UTF-8?q?=EC=9A=A9=20#1649?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../DisplayStyleCard.container.tsx | 32 ++++++++----------- .../Common/DarkModeToggleSwitch.tsx | 17 ++++++---- 2 files changed, 25 insertions(+), 24 deletions(-) diff --git a/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.container.tsx b/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.container.tsx index 0bf6e845a..784d42b85 100644 --- 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,20 +25,14 @@ 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( - initialDisplayStyle as DisplayStyleType - ); - const [toggleType, setToggleType] = useState( - savedDisplayStyleToggle - ); + const [darkMode, setDarkMode] = + useState(initialDisplayStyle); const setColorsAndLocalStorage = (toggleType: DisplayStyleToggleType) => { setToggleType(toggleType); @@ -44,19 +40,19 @@ const DisplayStyleCardContainer = () => { }; const handleDisplayStyleButtonClick = (displayStyleToggleType: string) => { - if (toggleType === displayStyleToggleType) return; - setToggleType( - displayStyleToggleType as React.SetStateAction - ); - 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 index 2184dc70f..ca1078171 100644 --- 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 ( @@ -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%; From bba18dceebe1ddd97a8a6749500dcde92ba28bf2 Mon Sep 17 00:00:00 2001 From: gykoh42 Date: Tue, 10 Sep 2024 15:38:36 +0900 Subject: [PATCH 25/55] =?UTF-8?q?[FE]=20FEAT:=20useEffect=20=EC=97=90=20bo?= =?UTF-8?q?dy=20=EB=B6=80=EB=B6=84=20=EB=B0=94=EA=BE=B8=EB=8A=94=20?= =?UTF-8?q?=EB=A1=9C=EC=A7=81=20=EC=B6=94=EA=B0=80=20#1649?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx b/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx index ca1078171..59a331f05 100644 --- a/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx +++ b/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx @@ -38,6 +38,7 @@ const DarkModeToggleSwitch = ({ id }: ToggleSwitchInterface) => { ); } }; + document.body.setAttribute("display-style", displayStyleToggle); darkModeQuery.addEventListener("change", handleChange); return () => darkModeQuery.removeEventListener("change", handleChange); }, [darkModeQuery, displayStyleToggle]); From 0b7e0613879f06052e9f2c1ecaf7ddb3b54827da Mon Sep 17 00:00:00 2001 From: gykoh42 Date: Tue, 24 Sep 2024 23:37:13 +0900 Subject: [PATCH 26/55] =?UTF-8?q?[FE]=20FIX:=20DarkModeToggleSwitch=20?= =?UTF-8?q?=EB=B2=84=EA=B7=B8=20=ED=95=B4=EA=B2=B0=20=EB=B0=8F=20=EC=BD=94?= =?UTF-8?q?=EB=93=9C=20=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81=20#1649?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Common/DarkModeToggleSwitch.tsx | 126 ++++++++++-------- 1 file changed, 68 insertions(+), 58 deletions(-) diff --git a/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx b/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx index 59a331f05..fac848e26 100644 --- a/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx +++ b/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx @@ -1,4 +1,4 @@ -import React, { useEffect } from "react"; +import { useEffect, useState } from "react"; import { useRecoilState } from "recoil"; import styled from "styled-components"; import { displayStyleState } from "@/Cabinet/recoil/atoms"; @@ -9,39 +9,57 @@ import { DisplayStyleType, } from "@/Cabinet/types/enum/displayStyle.type.enum"; -interface ToggleSwitchInterface { - id: string; -} - -const DarkModeToggleSwitch = ({ id }: ToggleSwitchInterface) => { +const DarkModeToggleSwitch = ({ id }: { id: string }) => { const [displayStyleToggle, setDisplayStyleToggle] = useRecoilState(displayStyleState); - const darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)"); + const [displayStyleType, setDisplayStyleType] = useState( + DisplayStyleType.LIGHT + ); useEffect(() => { - const savedDisplayStyle = - localStorage.getItem("display-style-toggle") || - DisplayStyleToggleType.DEVICE; - setDisplayStyleToggle(savedDisplayStyle as DisplayStyleToggleType); - }, []); + const savedToggleType = + (localStorage.getItem( + "display-style-toggle" + ) as DisplayStyleToggleType) || DisplayStyleToggleType.DEVICE; + setDisplayStyleToggle(savedToggleType); + }, [setDisplayStyleToggle]); useEffect(() => { - const handleChange = (event: MediaQueryListEvent) => { + const updateDisplayStyleType = () => { + if (displayStyleToggle === DisplayStyleToggleType.LIGHT) { + setDisplayStyleType(DisplayStyleType.LIGHT); + } else if (displayStyleToggle === DisplayStyleToggleType.DARK) { + setDisplayStyleType(DisplayStyleType.DARK); + } else { + const isSystemDarkMode = + window.matchMedia && + window.matchMedia("(prefers-color-scheme: dark)").matches; + setDisplayStyleType( + isSystemDarkMode ? DisplayStyleType.DARK : DisplayStyleType.LIGHT + ); + } + }; + updateDisplayStyleType(); + + const handleSystemThemeChange = (event: MediaQueryListEvent) => { if (displayStyleToggle === DisplayStyleToggleType.DEVICE) { - const newDisplayStyle = event.matches - ? DisplayStyleType.DARK - : DisplayStyleType.LIGHT; - setDisplayStyleToggle( - newDisplayStyle === DisplayStyleType.DARK - ? DisplayStyleToggleType.DARK - : DisplayStyleToggleType.LIGHT + setDisplayStyleType( + event.matches ? DisplayStyleType.DARK : DisplayStyleType.LIGHT ); } }; - document.body.setAttribute("display-style", displayStyleToggle); - darkModeQuery.addEventListener("change", handleChange); - return () => darkModeQuery.removeEventListener("change", handleChange); - }, [darkModeQuery, displayStyleToggle]); + if (window.matchMedia) { + const darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)"); + darkModeQuery.addEventListener("change", handleSystemThemeChange); + return () => { + darkModeQuery.removeEventListener("change", handleSystemThemeChange); + }; + } + }, [displayStyleToggle]); + + useEffect(() => { + document.body.setAttribute("display-style", displayStyleType); + }, [displayStyleType]); const handleToggle = () => { const newToggleType = @@ -52,62 +70,54 @@ const DarkModeToggleSwitch = ({ id }: ToggleSwitchInterface) => { setDisplayStyleToggle(newToggleType); }; - const isChecked = - displayStyleToggle === DisplayStyleToggleType.DARK || - (displayStyleToggle === DisplayStyleToggleType.DEVICE && - darkModeQuery.matches); + const isDarkMode = displayStyleType === DisplayStyleType.DARK; return ( - - - - - - - + + + + - - + + + + + - + ); }; -const ToggleSwitchContainerStyled = styled.div` +const ToggleSwitchContainer = styled.div` display: inline-block; position: relative; margin-right: 10px; `; -const InputStyled = styled.input.attrs({ type: "checkbox" })` +const CheckboxStyled = styled.input.attrs({ type: "checkbox" })` opacity: 0; position: absolute; width: 0; height: 0; `; -const ToggleSwitchStyled = styled.label<{ checked: boolean }>` +const ToggleSwitchStyled = styled.label<{ isChecked: boolean }>` cursor: pointer; display: inline-block; position: relative; background: ${(props) => - props.checked ? "var(--sys-main-color)" : "var(--line-color)"}; + props.isChecked ? "var(--sys-main-color)" : "var(--line-color)"}; width: 46px; height: 24px; border-radius: 50px; transition: background-color 0.2s ease; `; -const ToggleKnobStyled = styled.span<{ checked: boolean }>` +const ToggleKnobStyled = styled.span<{ isChecked: boolean }>` position: absolute; top: 50%; transform: translateY(-50%); - left: ${(props) => (props.checked ? "calc(100% - 21px)" : "3px")}; + left: ${(props) => (props.isChecked ? "calc(100% - 21px)" : "3px")}; width: 18px; height: 18px; border-radius: 50%; @@ -115,32 +125,32 @@ const ToggleKnobStyled = styled.span<{ checked: boolean }>` transition: left 0.2s; `; -const SunWrapperStyled = styled.div` +const MoonIconWrapper = styled.div` position: absolute; - right: 5px; + left: 5px; top: 50%; transform: translateY(-50%); - width: 18px; - height: 18px; + width: 16px; + height: 16px; & > svg { width: 100%; height: 100%; + fill: var(--ref-gray-900); } `; -const MoonWrapperStyled = styled.div` +const SunIconWrapper = styled.div` position: absolute; - left: 5px; + right: 5px; top: 50%; transform: translateY(-50%); - width: 16px; - height: 16px; + width: 18px; + height: 18px; & > svg { width: 100%; height: 100%; - fill: var(--ref-gray-900); } `; From 6cd7b0a2b5b12fbdd21bf3fc45b4c6d057002747 Mon Sep 17 00:00:00 2001 From: gykoh42 Date: Wed, 25 Sep 2024 15:06:35 +0900 Subject: [PATCH 27/55] =?UTF-8?q?[FE]=20FEAT:=20=EC=BB=A8=EB=B2=A4?= =?UTF-8?q?=EC=85=98=EC=97=90=20=EB=A7=9E=EB=8F=84=EB=A1=9D=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=AA=85=20=EC=88=98=EC=A0=95=20#16?= =?UTF-8?q?49?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/Common/DarkModeToggleSwitch.tsx | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx b/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx index fac848e26..4f67b6775 100644 --- a/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx +++ b/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx @@ -73,22 +73,22 @@ const DarkModeToggleSwitch = ({ id }: { id: string }) => { const isDarkMode = displayStyleType === DisplayStyleType.DARK; return ( - + - + - - + + - + - + ); }; -const ToggleSwitchContainer = styled.div` +const ToggleWrapperStyled = styled.div` display: inline-block; position: relative; margin-right: 10px; @@ -125,7 +125,7 @@ const ToggleKnobStyled = styled.span<{ isChecked: boolean }>` transition: left 0.2s; `; -const MoonIconWrapper = styled.div` +const MoonIconWrapperStyled = styled.div` position: absolute; left: 5px; top: 50%; @@ -140,7 +140,7 @@ const MoonIconWrapper = styled.div` } `; -const SunIconWrapper = styled.div` +const SunIconWrapperStyled = styled.div` position: absolute; right: 5px; top: 50%; From 8a64ec8725baf6915e9ef7f1a3ad23df7ac74a5f Mon Sep 17 00:00:00 2001 From: gykoh42 Date: Wed, 25 Sep 2024 15:09:39 +0900 Subject: [PATCH 28/55] =?UTF-8?q?[FE]=20FEAT:=20toggleType=EC=9D=B4=20DEVI?= =?UTF-8?q?CE=20=EC=9D=BC=EB=95=8C=EB=A7=8C=20darkMode=20=EC=83=81?= =?UTF-8?q?=ED=83=9C=EA=B0=80=20=EC=97=85=EB=8D=B0=EC=9D=B4=ED=8A=B8=20?= =?UTF-8?q?=EB=90=98=EB=8F=84=EB=A1=9D=20=EA=B5=AC=ED=98=84=20#1649?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../DisplayStyleCard.container.tsx | 24 +++++++++++-------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.container.tsx b/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.container.tsx index 784d42b85..5d5daeaff 100644 --- a/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.container.tsx +++ b/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.container.tsx @@ -25,7 +25,7 @@ export const getInitialDisplayStyle = ( }; const DisplayStyleCardContainer = () => { - var darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)"); + const darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)"); const [toggleType, setToggleType] = useRecoilState(displayStyleState); const initialDisplayStyle = getInitialDisplayStyle( toggleType as DisplayStyleToggleType, @@ -42,18 +42,22 @@ const DisplayStyleCardContainer = () => { const handleDisplayStyleButtonClick = (displayStyleToggleType: string) => { const castedToggleType = displayStyleToggleType as DisplayStyleToggleType; if (toggleType === castedToggleType) return; - setToggleType(castedToggleType); setColorsAndLocalStorage(castedToggleType); }; useEffect(() => { - darkModeQuery.addEventListener("change", (event) => { - setDarkMode( - event.matches ? DisplayStyleType.DARK : DisplayStyleType.LIGHT - ); - }); - return () => darkModeQuery.removeEventListener("change", (event) => {}); - }, []); + const handleSystemThemeChange = (event: MediaQueryListEvent) => { + if (toggleType === DisplayStyleToggleType.DEVICE) { + setDarkMode( + event.matches ? DisplayStyleType.DARK : DisplayStyleType.LIGHT + ); + } + }; + darkModeQuery.addEventListener("change", handleSystemThemeChange); + return () => { + darkModeQuery.removeEventListener("change", handleSystemThemeChange); + }; + }, [toggleType]); useEffect(() => { document.body.setAttribute("display-style", darkMode); @@ -69,7 +73,7 @@ const DisplayStyleCardContainer = () => { darkModeQuery.matches ? DisplayStyleType.DARK : DisplayStyleType.LIGHT ); } - }, [toggleType]); + }, [toggleType, darkModeQuery.matches]); return ( Date: Wed, 25 Sep 2024 15:55:20 +0900 Subject: [PATCH 29/55] =?UTF-8?q?[FE]=20FIX:=20=ED=99=94=EB=A9=B4=20?= =?UTF-8?q?=EC=83=88=EB=A1=9C=EA=B3=A0=EC=B9=A8=20=EC=8B=9C=20displayStyle?= =?UTF-8?q?Type=20=EC=9D=98=20=EC=B4=88=EA=B9=83=EA=B0=92=EC=9C=BC?= =?UTF-8?q?=EB=A1=9C=20=EC=9D=B8=ED=95=B4=20=EB=8B=A4=ED=81=AC=20=EB=AA=A8?= =?UTF-8?q?=EB=93=9C=20=ED=86=A0=EA=B8=80=20=EB=85=B8=EB=B8=8C=EA=B0=80=20?= =?UTF-8?q?=EA=B9=9C=EB=B9=A1=EC=9D=B4=EB=8A=94=20=EB=AC=B8=EC=A0=9C=20?= =?UTF-8?q?=ED=95=B4=EA=B2=B0=20#1649?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Common/DarkModeToggleSwitch.tsx | 20 ++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx b/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx index 4f67b6775..969ef5336 100644 --- a/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx +++ b/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx @@ -13,7 +13,25 @@ const DarkModeToggleSwitch = ({ id }: { id: string }) => { const [displayStyleToggle, setDisplayStyleToggle] = useRecoilState(displayStyleState); const [displayStyleType, setDisplayStyleType] = useState( - DisplayStyleType.LIGHT + () => { + const savedToggleType = + (localStorage.getItem( + "display-style-toggle" + ) as DisplayStyleToggleType) || DisplayStyleToggleType.DEVICE; + + if (savedToggleType === DisplayStyleToggleType.LIGHT) { + return DisplayStyleType.LIGHT; + } else if (savedToggleType === DisplayStyleToggleType.DARK) { + return DisplayStyleType.DARK; + } else { + const isSystemDarkMode = + window.matchMedia && + window.matchMedia("(prefers-color-scheme: dark)").matches; + return isSystemDarkMode + ? DisplayStyleType.DARK + : DisplayStyleType.LIGHT; + } + } ); useEffect(() => { From 140aae11cb8ae946154bce7b4d48ab47712af520 Mon Sep 17 00:00:00 2001 From: gykoh42 Date: Wed, 25 Sep 2024 19:48:19 +0900 Subject: [PATCH 30/55] =?UTF-8?q?[FE]=20FEAT:=20=EB=B6=88=ED=95=84?= =?UTF-8?q?=EC=9A=94=ED=95=9C=20=EC=B6=9C=EB=A0=A5=EB=AC=B8=20=EC=82=AD?= =?UTF-8?q?=EC=A0=9C=20#1649?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Cabinet/components/AdminInfo/Chart/CoinUseLineChart.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/frontend/src/Cabinet/components/AdminInfo/Chart/CoinUseLineChart.tsx b/frontend/src/Cabinet/components/AdminInfo/Chart/CoinUseLineChart.tsx index defcf5812..b4a4f9555 100644 --- a/frontend/src/Cabinet/components/AdminInfo/Chart/CoinUseLineChart.tsx +++ b/frontend/src/Cabinet/components/AdminInfo/Chart/CoinUseLineChart.tsx @@ -16,8 +16,6 @@ const CoinUseLineChart = ({ return null; } - console.log("totalCoinUseData", totalCoinUseData); - const formattedData = [ { id: "issuedCoin", @@ -44,7 +42,6 @@ const CoinUseLineChart = ({ const yMin = 0; const yMax = Math.max(...filteredData[0].data.map((d) => d.y)); - console.log("yMin, YMax", yMin, yMax); // NOTE : y축 scale을 log로 표현하기 위해 Y scale을 설정 // ex) 123 이면 100 ~ 1000 사이의 값이니 10^0 ~ 10^3 사이의 값으로 표현 From 1c02d7264b9bc66d6acd45a02e83677a54af2e3b Mon Sep 17 00:00:00 2001 From: gykoh42 Date: Wed, 25 Sep 2024 19:51:09 +0900 Subject: [PATCH 31/55] =?UTF-8?q?[FE]=20REMOVE:=20sunAdmin,=20moonAdmin=20?= =?UTF-8?q?=EC=95=84=EC=9D=B4=EC=BD=98=20=EC=82=AD=EC=A0=9C=20#1649?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/Cabinet/assets/images/moonAdmin.svg | 3 --- frontend/src/Cabinet/assets/images/sunAdmin.svg | 4 ---- 2 files changed, 7 deletions(-) delete mode 100644 frontend/src/Cabinet/assets/images/moonAdmin.svg delete mode 100644 frontend/src/Cabinet/assets/images/sunAdmin.svg diff --git a/frontend/src/Cabinet/assets/images/moonAdmin.svg b/frontend/src/Cabinet/assets/images/moonAdmin.svg deleted file mode 100644 index 3c8a7af6d..000000000 --- a/frontend/src/Cabinet/assets/images/moonAdmin.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/frontend/src/Cabinet/assets/images/sunAdmin.svg b/frontend/src/Cabinet/assets/images/sunAdmin.svg deleted file mode 100644 index c3a482e73..000000000 --- a/frontend/src/Cabinet/assets/images/sunAdmin.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - From c1c17b9eca53a014779691f460f24f04c38d0dc4 Mon Sep 17 00:00:00 2001 From: gykoh42 Date: Wed, 25 Sep 2024 19:52:28 +0900 Subject: [PATCH 32/55] =?UTF-8?q?[FE]=20FEAT:=20=ED=86=A0=EA=B8=80=20?= =?UTF-8?q?=EC=8A=A4=EC=9C=84=EC=B9=98=EC=97=90=20=ED=8F=AC=ED=95=A8?= =?UTF-8?q?=EB=90=9C=20=EC=95=84=EC=9D=B4=EC=BD=98=20=ED=8C=8C=EC=9D=BC?= =?UTF-8?q?=EB=AA=85=20=EB=B3=80=EA=B2=BD=20#1649?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/Cabinet/assets/images/moonIcon.svg | 3 +++ frontend/src/Cabinet/assets/images/sunIcon.svg | 4 ++++ .../src/Cabinet/components/Common/DarkModeToggleSwitch.tsx | 4 ++-- 3 files changed, 9 insertions(+), 2 deletions(-) create mode 100644 frontend/src/Cabinet/assets/images/moonIcon.svg create mode 100644 frontend/src/Cabinet/assets/images/sunIcon.svg diff --git a/frontend/src/Cabinet/assets/images/moonIcon.svg b/frontend/src/Cabinet/assets/images/moonIcon.svg new file mode 100644 index 000000000..3c8a7af6d --- /dev/null +++ b/frontend/src/Cabinet/assets/images/moonIcon.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/Cabinet/assets/images/sunIcon.svg b/frontend/src/Cabinet/assets/images/sunIcon.svg new file mode 100644 index 000000000..c3a482e73 --- /dev/null +++ b/frontend/src/Cabinet/assets/images/sunIcon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx b/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx index 969ef5336..3698a26d9 100644 --- a/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx +++ b/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx @@ -2,8 +2,8 @@ import { useEffect, useState } from "react"; import { useRecoilState } from "recoil"; import styled from "styled-components"; import { displayStyleState } from "@/Cabinet/recoil/atoms"; -import { ReactComponent as MoonIcon } from "@/Cabinet/assets/images/moonAdmin.svg"; -import { ReactComponent as SunIcon } from "@/Cabinet/assets/images/sunAdmin.svg"; +import { ReactComponent as MoonIcon } from "@/Cabinet/assets/images/moonIcon.svg"; +import { ReactComponent as SunIcon } from "@/Cabinet/assets/images/sunIcon.svg"; import { DisplayStyleToggleType, DisplayStyleType, From 56ae50380e2c3baa5620d07d1e9b09a7d843c8c4 Mon Sep 17 00:00:00 2001 From: gykoh42 Date: Wed, 25 Sep 2024 19:56:59 +0900 Subject: [PATCH 33/55] =?UTF-8?q?[FE]=20FEAT:=20=EC=9D=BC=EA=B4=80?= =?UTF-8?q?=EC=84=B1=20=EC=9C=A0=EC=A7=80=EB=A5=BC=20=EC=9C=84=ED=95=B4=20?= =?UTF-8?q?key=20=EA=B0=92=20=EB=AA=85=EC=B9=AD=20=EB=B3=80=EA=B2=BD=20#16?= =?UTF-8?q?49?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/Cabinet/recoil/atoms.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/Cabinet/recoil/atoms.ts b/frontend/src/Cabinet/recoil/atoms.ts index a625126c5..4d2c2160b 100644 --- a/frontend/src/Cabinet/recoil/atoms.ts +++ b/frontend/src/Cabinet/recoil/atoms.ts @@ -211,6 +211,6 @@ export const targetClubUserInfoState = atom({ }); export const displayStyleState = atom({ - key: "displayStyleState", + key: "displayStyle", default: DisplayStyleToggleType.DEVICE, }); From 93da3922448ecad84300e08f8d3eb05d904c6142 Mon Sep 17 00:00:00 2001 From: gykoh42 Date: Wed, 25 Sep 2024 19:59:48 +0900 Subject: [PATCH 34/55] =?UTF-8?q?[FE]=20displayStyleSate=20=EC=9D=98=20?= =?UTF-8?q?=ED=83=80=EC=9E=85=EC=9D=84=20string=20=EC=97=90=EC=84=9C=20Dis?= =?UTF-8?q?playStyleToggleType=20=EC=9C=BC=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= =?UTF-8?q?=20#1649?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/Cabinet/recoil/atoms.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/Cabinet/recoil/atoms.ts b/frontend/src/Cabinet/recoil/atoms.ts index 4d2c2160b..36b28ade6 100644 --- a/frontend/src/Cabinet/recoil/atoms.ts +++ b/frontend/src/Cabinet/recoil/atoms.ts @@ -210,7 +210,7 @@ export const targetClubUserInfoState = atom({ }, }); -export const displayStyleState = atom({ +export const displayStyleState = atom({ key: "displayStyle", default: DisplayStyleToggleType.DEVICE, }); From 8c84ec402c4bb666917b886c4da7dfd3951040d6 Mon Sep 17 00:00:00 2001 From: gykoh42 Date: Wed, 25 Sep 2024 20:41:59 +0900 Subject: [PATCH 35/55] =?UTF-8?q?[FE]=20FEAT:=20=EB=B6=88=ED=95=84?= =?UTF-8?q?=EC=9A=94=ED=95=9C=20import=20=EB=AC=B8=20=EC=82=AD=EC=A0=9C=20?= =?UTF-8?q?#1649?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/TopNav/TopNavDomainGroup/TopNavDomainGroup.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/frontend/src/Cabinet/components/TopNav/TopNavDomainGroup/TopNavDomainGroup.tsx b/frontend/src/Cabinet/components/TopNav/TopNavDomainGroup/TopNavDomainGroup.tsx index 2f8fe5899..600730b67 100644 --- a/frontend/src/Cabinet/components/TopNav/TopNavDomainGroup/TopNavDomainGroup.tsx +++ b/frontend/src/Cabinet/components/TopNav/TopNavDomainGroup/TopNavDomainGroup.tsx @@ -1,4 +1,3 @@ -import { useEffect, useState } from "react"; import { useLocation, useNavigate } from "react-router-dom"; import styled from "styled-components"; import DarkModeToggleSwitch from "@/Cabinet/components/Common/DarkModeToggleSwitch"; From 5b5f2c40d9f5585c84795306106671720a0437c4 Mon Sep 17 00:00:00 2001 From: gykoh42 Date: Wed, 25 Sep 2024 20:50:57 +0900 Subject: [PATCH 36/55] =?UTF-8?q?[FE]=20FEAT:=20IToggleItemSeparated=20?= =?UTF-8?q?=EC=9D=98=20key=20=EA=B0=92=20=EC=88=98=EC=A0=95=EC=97=90=20?= =?UTF-8?q?=EB=94=B0=EB=A5=B8=20=EC=BD=94=EB=93=9C=20=EC=88=98=EC=A0=95=20?= =?UTF-8?q?#1649?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/Card/DisplayStyleCard/DisplayStyleCard.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.tsx b/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.tsx index cac4b274e..405599f5f 100644 --- a/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.tsx +++ b/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.tsx @@ -11,7 +11,7 @@ import { DisplayStyleToggleType } from "@/Cabinet/types/enum/displayStyle.type.e interface IToggleItemSeparated { name: string; - key: string; + key: DisplayStyleToggleType; icon: React.ComponentType>; } @@ -68,9 +68,7 @@ const DisplayStyleCard: React.FC = ({ key={item.key} id={`${item.key}`} isClicked={displayStyleToggle === item.key} - onClick={() => - handleButtonClick(item.key as DisplayStyleToggleType) - } + onClick={() => handleButtonClick(item.key)} > {item.name} From 8ac486d849a66512d30baeb9b166aca6a0b5fcdb Mon Sep 17 00:00:00 2001 From: gykoh42 Date: Wed, 25 Sep 2024 20:54:26 +0900 Subject: [PATCH 37/55] =?UTF-8?q?[FE]=20FEAT:=20toggleType=20=EC=9D=98=20?= =?UTF-8?q?=ED=83=80=EC=9E=85=20=EC=9E=AC=EC=A0=95=EC=9D=98=EC=97=90=20?= =?UTF-8?q?=EB=94=B0=EB=A5=B8=20=EB=B6=88=ED=95=84=EC=9A=94=ED=95=9C=20?= =?UTF-8?q?=EC=BD=94=EB=93=9C=20=EC=82=AD=EC=A0=9C=20#1649?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../DisplayStyleCard/DisplayStyleCard.container.tsx | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.container.tsx b/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.container.tsx index 5d5daeaff..810be458a 100644 --- a/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.container.tsx +++ b/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.container.tsx @@ -27,10 +27,7 @@ export const getInitialDisplayStyle = ( const DisplayStyleCardContainer = () => { const darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)"); const [toggleType, setToggleType] = useRecoilState(displayStyleState); - const initialDisplayStyle = getInitialDisplayStyle( - toggleType as DisplayStyleToggleType, - darkModeQuery - ); + const initialDisplayStyle = getInitialDisplayStyle(toggleType, darkModeQuery); const [darkMode, setDarkMode] = useState(initialDisplayStyle); @@ -39,8 +36,10 @@ const DisplayStyleCardContainer = () => { localStorage.setItem("display-style-toggle", toggleType); }; - const handleDisplayStyleButtonClick = (displayStyleToggleType: string) => { - const castedToggleType = displayStyleToggleType as DisplayStyleToggleType; + const handleDisplayStyleButtonClick = ( + displayStyleToggleType: DisplayStyleToggleType + ) => { + const castedToggleType = displayStyleToggleType; if (toggleType === castedToggleType) return; setColorsAndLocalStorage(castedToggleType); }; @@ -73,7 +72,7 @@ const DisplayStyleCardContainer = () => { darkModeQuery.matches ? DisplayStyleType.DARK : DisplayStyleType.LIGHT ); } - }, [toggleType, darkModeQuery.matches]); + }, [toggleType]); return ( Date: Wed, 25 Sep 2024 22:08:35 +0900 Subject: [PATCH 38/55] =?UTF-8?q?[FE]=20REFACTOR:=20useEffect=20=EC=A4=91?= =?UTF-8?q?=EB=B3=B5=20=EB=A1=9C=EC=A7=81=20=EC=82=AD=EC=A0=9C=20=EB=B0=8F?= =?UTF-8?q?=20=EC=BD=94=EB=93=9C=20=EA=B0=84=EC=86=8C=ED=99=94=20#1649?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../DisplayStyleCard.container.tsx | 75 +++++++------------ .../DisplayStyleCard/DisplayStyleCard.tsx | 71 ++++++++---------- .../Common/DarkModeToggleSwitch.tsx | 54 +++++-------- 3 files changed, 75 insertions(+), 125 deletions(-) diff --git a/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.container.tsx b/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.container.tsx index 810be458a..0a1df44fd 100644 --- a/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.container.tsx +++ b/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.container.tsx @@ -1,4 +1,4 @@ -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"; @@ -9,76 +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 darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)"); const [toggleType, setToggleType] = useRecoilState(displayStyleState); - const initialDisplayStyle = getInitialDisplayStyle(toggleType, darkModeQuery); - const [darkMode, setDarkMode] = - useState(initialDisplayStyle); - - const setColorsAndLocalStorage = (toggleType: DisplayStyleToggleType) => { - setToggleType(toggleType); - localStorage.setItem("display-style-toggle", toggleType); - }; - const handleDisplayStyleButtonClick = ( - displayStyleToggleType: DisplayStyleToggleType - ) => { - const castedToggleType = displayStyleToggleType; - if (toggleType === castedToggleType) return; - setColorsAndLocalStorage(castedToggleType); + const handleButtonClick = (key: DisplayStyleToggleType) => { + if (toggleType === key) return; + setToggleType(key); + localStorage.setItem("display-style-toggle", key); }; useEffect(() => { - const handleSystemThemeChange = (event: MediaQueryListEvent) => { + const applyDisplayStyle = () => { + const newDarkMode = getInitialDisplayStyle(toggleType, darkModeQuery); + document.body.setAttribute("display-style", newDarkMode); + }; + + applyDisplayStyle(); + + const handleSystemThemeChange = () => { if (toggleType === DisplayStyleToggleType.DEVICE) { - setDarkMode( - event.matches ? DisplayStyleType.DARK : DisplayStyleType.LIGHT - ); + applyDisplayStyle(); } }; + darkModeQuery.addEventListener("change", handleSystemThemeChange); return () => { darkModeQuery.removeEventListener("change", handleSystemThemeChange); }; }, [toggleType]); - 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 - ); - } - }, [toggleType]); - - return ( - - ); + return ; }; export default DisplayStyleCardContainer; diff --git a/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.tsx b/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.tsx index 405599f5f..98680b495 100644 --- a/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.tsx +++ b/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.tsx @@ -16,7 +16,7 @@ interface IToggleItemSeparated { } interface DisplayStyleCardProps { - handleDisplayStyleButtonClick: (key: DisplayStyleToggleType) => void; + handleButtonClick: (key: DisplayStyleToggleType) => void; } const toggleList: IToggleItemSeparated[] = [ @@ -38,49 +38,38 @@ const toggleList: IToggleItemSeparated[] = [ ]; const DisplayStyleCard: React.FC = ({ - handleDisplayStyleButtonClick, + handleButtonClick, }) => { - const [displayStyleToggle, setDisplayStyleToggle] = - useRecoilState(displayStyleState); - - const handleButtonClick = (key: DisplayStyleToggleType) => { - localStorage.setItem("display-style-toggle", key); - setDisplayStyleToggle(key); - handleDisplayStyleButtonClick(key); - }; + const [displayStyleToggle] = useRecoilState(displayStyleState); return ( - <> - - - <> - - - {toggleList.map((item) => { - const DisplayStyleIcon = item.icon; - return ( - handleButtonClick(item.key)} - > - - {item.name} - - ); - })} - - - - - - + + + + + {toggleList.map((item) => { + const DisplayStyleIcon = item.icon; + return ( + handleButtonClick(item.key)} + > + + {item.name} + + ); + })} + + + + ); }; diff --git a/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx b/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx index 3698a26d9..84e5d670e 100644 --- a/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx +++ b/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx @@ -2,6 +2,7 @@ import { useEffect, useState } from "react"; import { useRecoilState } from "recoil"; import styled from "styled-components"; import { displayStyleState } from "@/Cabinet/recoil/atoms"; +import { getInitialDisplayStyle } from "@/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.container"; import { ReactComponent as MoonIcon } from "@/Cabinet/assets/images/moonIcon.svg"; import { ReactComponent as SunIcon } from "@/Cabinet/assets/images/sunIcon.svg"; import { @@ -12,6 +13,7 @@ import { const DarkModeToggleSwitch = ({ id }: { id: string }) => { const [displayStyleToggle, setDisplayStyleToggle] = useRecoilState(displayStyleState); + const darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)"); const [displayStyleType, setDisplayStyleType] = useState( () => { const savedToggleType = @@ -19,20 +21,10 @@ const DarkModeToggleSwitch = ({ id }: { id: string }) => { "display-style-toggle" ) as DisplayStyleToggleType) || DisplayStyleToggleType.DEVICE; - if (savedToggleType === DisplayStyleToggleType.LIGHT) { - return DisplayStyleType.LIGHT; - } else if (savedToggleType === DisplayStyleToggleType.DARK) { - return DisplayStyleType.DARK; - } else { - const isSystemDarkMode = - window.matchMedia && - window.matchMedia("(prefers-color-scheme: dark)").matches; - return isSystemDarkMode - ? DisplayStyleType.DARK - : DisplayStyleType.LIGHT; - } + return getInitialDisplayStyle(savedToggleType, darkModeQuery); } ); + const isDarkMode = displayStyleType === DisplayStyleType.DARK; useEffect(() => { const savedToggleType = @@ -44,35 +36,29 @@ const DarkModeToggleSwitch = ({ id }: { id: string }) => { useEffect(() => { const updateDisplayStyleType = () => { - if (displayStyleToggle === DisplayStyleToggleType.LIGHT) { - setDisplayStyleType(DisplayStyleType.LIGHT); - } else if (displayStyleToggle === DisplayStyleToggleType.DARK) { - setDisplayStyleType(DisplayStyleType.DARK); - } else { - const isSystemDarkMode = - window.matchMedia && - window.matchMedia("(prefers-color-scheme: dark)").matches; - setDisplayStyleType( - isSystemDarkMode ? DisplayStyleType.DARK : DisplayStyleType.LIGHT - ); - } + const newDisplayStyleType = getInitialDisplayStyle( + displayStyleToggle, + darkModeQuery + ); + setDisplayStyleType(newDisplayStyleType); }; updateDisplayStyleType(); const handleSystemThemeChange = (event: MediaQueryListEvent) => { if (displayStyleToggle === DisplayStyleToggleType.DEVICE) { - setDisplayStyleType( - event.matches ? DisplayStyleType.DARK : DisplayStyleType.LIGHT + const newDisplayStyleType = getInitialDisplayStyle( + displayStyleToggle, + darkModeQuery ); + setDisplayStyleType(newDisplayStyleType); } }; - if (window.matchMedia) { - const darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)"); - darkModeQuery.addEventListener("change", handleSystemThemeChange); - return () => { - darkModeQuery.removeEventListener("change", handleSystemThemeChange); - }; - } + + darkModeQuery.addEventListener("change", handleSystemThemeChange); + + return () => { + darkModeQuery.removeEventListener("change", handleSystemThemeChange); + }; }, [displayStyleToggle]); useEffect(() => { @@ -88,8 +74,6 @@ const DarkModeToggleSwitch = ({ id }: { id: string }) => { setDisplayStyleToggle(newToggleType); }; - const isDarkMode = displayStyleType === DisplayStyleType.DARK; - return ( From fb6b9cbd040173193f72841889f8d8491a101602 Mon Sep 17 00:00:00 2001 From: gykoh42 Date: Thu, 26 Sep 2024 20:39:06 +0900 Subject: [PATCH 39/55] =?UTF-8?q?[FE]=20FIX:=20AdminSlackNoti=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=EC=97=90=20=EB=8B=A4=ED=81=AC=EB=AA=A8?= =?UTF-8?q?=EB=93=9C=20=EC=A0=81=EC=9A=A9=EC=8B=9C=20=ED=85=8D=EC=8A=A4?= =?UTF-8?q?=ED=8A=B8=20=EC=83=89=EC=83=81=EC=9D=B4=20=ED=9D=B0=EC=83=89?= =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EB=B0=94=EB=80=8C=EC=A7=80=20=EC=95=8A?= =?UTF-8?q?=EB=8A=94=20=EB=B2=84=EA=B7=B8=20=ED=95=B4=EA=B2=B0=20#1649?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/Cabinet/pages/admin/AdminSlackNotiPage.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/src/Cabinet/pages/admin/AdminSlackNotiPage.tsx b/frontend/src/Cabinet/pages/admin/AdminSlackNotiPage.tsx index 4fc40132b..97885d4af 100644 --- a/frontend/src/Cabinet/pages/admin/AdminSlackNotiPage.tsx +++ b/frontend/src/Cabinet/pages/admin/AdminSlackNotiPage.tsx @@ -250,6 +250,7 @@ const FormSubTitleStyled = styled.h3` `; const FormTextareaStyled = styled.textarea` + color: var(--normal-text-color); box-sizing: border-box; width: 100%; min-height: 200px; From c430816031c06e0028890a5979baaf4bd40898f8 Mon Sep 17 00:00:00 2001 From: gykoh42 Date: Thu, 26 Sep 2024 21:25:06 +0900 Subject: [PATCH 40/55] =?UTF-8?q?[FE]=20REFACTOR:=20DarkModeToggleSwitch?= =?UTF-8?q?=20=EC=BD=94=EB=93=9C=20=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81=20?= =?UTF-8?q?#1649?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Common/DarkModeToggleSwitch.tsx | 50 ++++++++----------- 1 file changed, 21 insertions(+), 29 deletions(-) diff --git a/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx b/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx index 84e5d670e..99f99117c 100644 --- a/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx +++ b/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx @@ -1,4 +1,4 @@ -import { useEffect, useState } from "react"; +import { useCallback, useEffect, useState } from "react"; import { useRecoilState } from "recoil"; import styled from "styled-components"; import { displayStyleState } from "@/Cabinet/recoil/atoms"; @@ -10,27 +10,27 @@ import { DisplayStyleType, } from "@/Cabinet/types/enum/displayStyle.type.enum"; +const getSavedToggleType = (): DisplayStyleToggleType => { + return ( + (localStorage.getItem("display-style-toggle") as DisplayStyleToggleType) || + DisplayStyleToggleType.DEVICE + ); +}; + const DarkModeToggleSwitch = ({ id }: { id: string }) => { const [displayStyleToggle, setDisplayStyleToggle] = useRecoilState(displayStyleState); const darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)"); const [displayStyleType, setDisplayStyleType] = useState( () => { - const savedToggleType = - (localStorage.getItem( - "display-style-toggle" - ) as DisplayStyleToggleType) || DisplayStyleToggleType.DEVICE; - + const savedToggleType = getSavedToggleType(); return getInitialDisplayStyle(savedToggleType, darkModeQuery); } ); const isDarkMode = displayStyleType === DisplayStyleType.DARK; useEffect(() => { - const savedToggleType = - (localStorage.getItem( - "display-style-toggle" - ) as DisplayStyleToggleType) || DisplayStyleToggleType.DEVICE; + const savedToggleType = getSavedToggleType(); setDisplayStyleToggle(savedToggleType); }, [setDisplayStyleToggle]); @@ -42,37 +42,29 @@ const DarkModeToggleSwitch = ({ id }: { id: string }) => { ); setDisplayStyleType(newDisplayStyleType); }; - updateDisplayStyleType(); - const handleSystemThemeChange = (event: MediaQueryListEvent) => { - if (displayStyleToggle === DisplayStyleToggleType.DEVICE) { - const newDisplayStyleType = getInitialDisplayStyle( - displayStyleToggle, - darkModeQuery - ); - setDisplayStyleType(newDisplayStyleType); - } - }; - - darkModeQuery.addEventListener("change", handleSystemThemeChange); - - return () => { - darkModeQuery.removeEventListener("change", handleSystemThemeChange); - }; - }, [displayStyleToggle]); + updateDisplayStyleType(); + if (displayStyleToggle === DisplayStyleToggleType.DEVICE) { + darkModeQuery.addEventListener("change", updateDisplayStyleType); + return () => { + darkModeQuery.removeEventListener("change", updateDisplayStyleType); + }; + } + }, [displayStyleToggle, darkModeQuery]); useEffect(() => { document.body.setAttribute("display-style", displayStyleType); }, [displayStyleType]); - const handleToggle = () => { + const handleToggle = useCallback(() => { const newToggleType = displayStyleToggle === DisplayStyleToggleType.LIGHT ? DisplayStyleToggleType.DARK : DisplayStyleToggleType.LIGHT; + localStorage.setItem("display-style-toggle", newToggleType); setDisplayStyleToggle(newToggleType); - }; + }, [displayStyleToggle, setDisplayStyleToggle]); return ( From eb933b5b06d4c86318848b31a1049c451a3763b5 Mon Sep 17 00:00:00 2001 From: gykoh42 Date: Mon, 30 Sep 2024 23:54:49 +0900 Subject: [PATCH 41/55] =?UTF-8?q?[FE]=20FEAT:=20DisplayStyleCard.container?= =?UTF-8?q?=20=EC=97=90=20=EB=B6=88=ED=95=84=EC=9A=94=ED=95=9C=20handleBut?= =?UTF-8?q?tonClick=20props=20=EC=A0=9C=EA=B1=B0=20#1649?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../DisplayStyleCard.container.tsx | 30 +++++++------------ 1 file changed, 10 insertions(+), 20 deletions(-) diff --git a/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.container.tsx b/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.container.tsx index 0a1df44fd..82e806173 100644 --- a/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.container.tsx +++ b/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.container.tsx @@ -1,5 +1,5 @@ import { useEffect } from "react"; -import { useRecoilState } from "recoil"; +import { useRecoilValue } from "recoil"; import { displayStyleState } from "@/Cabinet/recoil/atoms"; import DisplayStyleCard from "@/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard"; import { @@ -12,7 +12,7 @@ export const getInitialDisplayStyle = ( displayStyleToggle: DisplayStyleToggleType, darkModeQuery: MediaQueryList ): DisplayStyleType => { - //라이트 / 다크 버튼 + // 라이트 / 다크 버튼 if (displayStyleToggle === DisplayStyleToggleType.LIGHT) { return DisplayStyleType.LIGHT; } else if (displayStyleToggle === DisplayStyleToggleType.DARK) { @@ -27,13 +27,7 @@ export const getInitialDisplayStyle = ( const DisplayStyleCardContainer = () => { const darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)"); - const [toggleType, setToggleType] = useRecoilState(displayStyleState); - - const handleButtonClick = (key: DisplayStyleToggleType) => { - if (toggleType === key) return; - setToggleType(key); - localStorage.setItem("display-style-toggle", key); - }; + const toggleType = useRecoilValue(displayStyleState); useEffect(() => { const applyDisplayStyle = () => { @@ -43,19 +37,15 @@ const DisplayStyleCardContainer = () => { applyDisplayStyle(); - const handleSystemThemeChange = () => { - if (toggleType === DisplayStyleToggleType.DEVICE) { - applyDisplayStyle(); - } - }; - - darkModeQuery.addEventListener("change", handleSystemThemeChange); - return () => { - darkModeQuery.removeEventListener("change", handleSystemThemeChange); - }; + if (toggleType === DisplayStyleToggleType.DEVICE) { + darkModeQuery.addEventListener("change", applyDisplayStyle); + return () => { + darkModeQuery.removeEventListener("change", applyDisplayStyle); + }; + } }, [toggleType]); - return ; + return ; }; export default DisplayStyleCardContainer; From d9d38adb78fd828f6b010ec165e9548d162478a5 Mon Sep 17 00:00:00 2001 From: gykoh42 Date: Tue, 1 Oct 2024 00:43:10 +0900 Subject: [PATCH 42/55] =?UTF-8?q?[FE]=20FEAT:=20DisplayStyleCard.container?= =?UTF-8?q?=20=EC=97=90=20=EB=B6=88=ED=95=84=EC=9A=94=ED=95=9C=20handleBut?= =?UTF-8?q?tonClick=20props=20=EC=A0=9C=EA=B1=B0=20#1649?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Card/DisplayStyleCard/DisplayStyleCard.tsx | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.tsx b/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.tsx index 98680b495..8c3c31ca2 100644 --- a/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.tsx +++ b/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.tsx @@ -15,10 +15,6 @@ interface IToggleItemSeparated { icon: React.ComponentType>; } -interface DisplayStyleCardProps { - handleButtonClick: (key: DisplayStyleToggleType) => void; -} - const toggleList: IToggleItemSeparated[] = [ { name: "라이트", @@ -37,10 +33,14 @@ const toggleList: IToggleItemSeparated[] = [ }, ]; -const DisplayStyleCard: React.FC = ({ - handleButtonClick, -}) => { - const [displayStyleToggle] = useRecoilState(displayStyleState); +const DisplayStyleCard = () => { + const [toggleType, setToggleType] = useRecoilState(displayStyleState); + + const handleButtonClick = (key: DisplayStyleToggleType) => { + if (toggleType === key) return; + setToggleType(key); + localStorage.setItem("display-style-toggle", key); + }; return ( @@ -58,7 +58,7 @@ const DisplayStyleCard: React.FC = ({ handleButtonClick(item.key)} > From 1fae2440e3c38fe96cc8e9568c1b501c940fd4aa Mon Sep 17 00:00:00 2001 From: gykoh42 Date: Tue, 22 Oct 2024 16:10:47 +0900 Subject: [PATCH 43/55] =?UTF-8?q?[FE]=20FEAT:=20=EB=B6=88=ED=95=84?= =?UTF-8?q?=EC=9A=94=ED=95=9C=20=EC=9D=98=EC=A1=B4=EC=84=B1=20=EC=82=AD?= =?UTF-8?q?=EC=A0=9C=20=EB=B0=8F=20=ED=95=A8=EC=88=98=EB=AA=85=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD=20#1649?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/Common/DarkModeToggleSwitch.tsx | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx b/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx index 99f99117c..d5a847697 100644 --- a/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx +++ b/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx @@ -23,8 +23,7 @@ const DarkModeToggleSwitch = ({ id }: { id: string }) => { const darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)"); const [displayStyleType, setDisplayStyleType] = useState( () => { - const savedToggleType = getSavedToggleType(); - return getInitialDisplayStyle(savedToggleType, darkModeQuery); + return getInitialDisplayStyle(getSavedToggleType(), darkModeQuery); } ); const isDarkMode = displayStyleType === DisplayStyleType.DARK; @@ -32,7 +31,7 @@ const DarkModeToggleSwitch = ({ id }: { id: string }) => { useEffect(() => { const savedToggleType = getSavedToggleType(); setDisplayStyleToggle(savedToggleType); - }, [setDisplayStyleToggle]); + }, [displayStyleToggle]); useEffect(() => { const updateDisplayStyleType = () => { @@ -50,25 +49,28 @@ const DarkModeToggleSwitch = ({ id }: { id: string }) => { darkModeQuery.removeEventListener("change", updateDisplayStyleType); }; } - }, [displayStyleToggle, darkModeQuery]); + }, [displayStyleToggle]); useEffect(() => { document.body.setAttribute("display-style", displayStyleType); }, [displayStyleType]); - const handleToggle = useCallback(() => { + const handleToggleChange = useCallback(() => { const newToggleType = displayStyleToggle === DisplayStyleToggleType.LIGHT ? DisplayStyleToggleType.DARK : DisplayStyleToggleType.LIGHT; - localStorage.setItem("display-style-toggle", newToggleType); setDisplayStyleToggle(newToggleType); - }, [displayStyleToggle, setDisplayStyleToggle]); + }, [displayStyleToggle]); return ( - + From 547fe3705169d03aa2f7eaaf18444aa57c688f17 Mon Sep 17 00:00:00 2001 From: gykoh42 Date: Tue, 22 Oct 2024 16:13:26 +0900 Subject: [PATCH 44/55] =?UTF-8?q?[FE]=20FEAT:=20getSavedToggleType=20?= =?UTF-8?q?=EB=8C=80=EC=8B=A0=20savedDisplayStyleToggle=20=EC=9D=84=20expo?= =?UTF-8?q?rt=20=ED=95=B4=EC=84=9C=20=EC=82=AC=EC=9A=A9=ED=95=98=EB=8F=84?= =?UTF-8?q?=EB=A1=9D=20=EB=B3=80=EA=B2=BD=20#=201649?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../DisplayStyleCard/displayStyleInitializer.ts | 9 ++++----- .../components/Common/DarkModeToggleSwitch.tsx | 16 +++++----------- 2 files changed, 9 insertions(+), 16 deletions(-) diff --git a/frontend/src/Cabinet/components/Card/DisplayStyleCard/displayStyleInitializer.ts b/frontend/src/Cabinet/components/Card/DisplayStyleCard/displayStyleInitializer.ts index 3302a8b48..cf658c23f 100644 --- a/frontend/src/Cabinet/components/Card/DisplayStyleCard/displayStyleInitializer.ts +++ b/frontend/src/Cabinet/components/Card/DisplayStyleCard/displayStyleInitializer.ts @@ -4,14 +4,13 @@ import { DisplayStyleType, } from "@/Cabinet/types/enum/displayStyle.type.enum"; +export const savedDisplayStyleToggle = + (localStorage.getItem("display-style-toggle") as DisplayStyleToggleType) || + DisplayStyleToggleType.DEVICE; + (function () { const isClient = typeof window !== "undefined"; if (isClient) { - const savedDisplayStyleToggle = - (localStorage.getItem( - "display-style-toggle" - ) as DisplayStyleToggleType) || DisplayStyleToggleType.DEVICE; - const darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)"); const colorMode = getInitialDisplayStyle( diff --git a/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx b/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx index d5a847697..4b92a8fa9 100644 --- a/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx +++ b/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx @@ -3,6 +3,7 @@ import { useRecoilState } from "recoil"; import styled from "styled-components"; import { displayStyleState } from "@/Cabinet/recoil/atoms"; import { getInitialDisplayStyle } from "@/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.container"; +import { savedDisplayStyleToggle } 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 { @@ -10,28 +11,21 @@ import { DisplayStyleType, } from "@/Cabinet/types/enum/displayStyle.type.enum"; -const getSavedToggleType = (): DisplayStyleToggleType => { - return ( - (localStorage.getItem("display-style-toggle") as DisplayStyleToggleType) || - DisplayStyleToggleType.DEVICE - ); -}; - const DarkModeToggleSwitch = ({ id }: { id: string }) => { const [displayStyleToggle, setDisplayStyleToggle] = useRecoilState(displayStyleState); const darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)"); const [displayStyleType, setDisplayStyleType] = useState( () => { - return getInitialDisplayStyle(getSavedToggleType(), darkModeQuery); + return getInitialDisplayStyle(savedDisplayStyleToggle, darkModeQuery); } ); + const isDarkMode = displayStyleType === DisplayStyleType.DARK; useEffect(() => { - const savedToggleType = getSavedToggleType(); - setDisplayStyleToggle(savedToggleType); - }, [displayStyleToggle]); + setDisplayStyleToggle(savedDisplayStyleToggle); + }, []); useEffect(() => { const updateDisplayStyleType = () => { From abbdaffe02e4d0833118b1c845ff4bf4d0dd7fc9 Mon Sep 17 00:00:00 2001 From: gykoh42 Date: Tue, 22 Oct 2024 17:37:57 +0900 Subject: [PATCH 45/55] =?UTF-8?q?[FE]=20FIX:=20device=20=EB=AA=A8=EB=93=9C?= =?UTF-8?q?=EC=9D=BC=20=EB=95=8C=20=ED=86=A0=EA=B8=80=EC=9D=84=20=EB=91=90?= =?UTF-8?q?=EB=B2=88=20=ED=81=B4=EB=A6=AD=ED=95=B4=EC=95=BC=20=EB=AA=A8?= =?UTF-8?q?=EB=93=9C=EA=B0=80=20=EB=B0=94=EB=80=8C=EB=8A=94=20=EB=B2=84?= =?UTF-8?q?=EA=B7=B8=20=ED=95=B4=EA=B2=B0=20#1649?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Common/DarkModeToggleSwitch.tsx | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) diff --git a/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx b/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx index 4b92a8fa9..2694a3a42 100644 --- a/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx +++ b/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx @@ -50,13 +50,22 @@ const DarkModeToggleSwitch = ({ id }: { id: string }) => { }, [displayStyleType]); const handleToggleChange = useCallback(() => { - const newToggleType = - displayStyleToggle === DisplayStyleToggleType.LIGHT - ? DisplayStyleToggleType.DARK - : DisplayStyleToggleType.LIGHT; + let newToggleType; + if (displayStyleToggle === DisplayStyleToggleType.DEVICE) { + newToggleType = + displayStyleType === DisplayStyleType.LIGHT + ? DisplayStyleToggleType.DARK + : DisplayStyleToggleType.LIGHT; + } else { + newToggleType = + displayStyleToggle === DisplayStyleToggleType.LIGHT + ? DisplayStyleToggleType.DARK + : DisplayStyleToggleType.LIGHT; + } + localStorage.setItem("display-style-toggle", newToggleType); setDisplayStyleToggle(newToggleType); - }, [displayStyleToggle]); + }, [displayStyleType]); return ( From b1415b8578370f3cea721036db4e3db63dd70104 Mon Sep 17 00:00:00 2001 From: gykoh42 Date: Fri, 25 Oct 2024 16:27:12 +0900 Subject: [PATCH 46/55] =?UTF-8?q?[FE]=20FEAT:=20currentSectionNameState=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=20#1649?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/Cabinet/recoil/atoms.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/frontend/src/Cabinet/recoil/atoms.ts b/frontend/src/Cabinet/recoil/atoms.ts index 36b28ade6..e87eaa663 100644 --- a/frontend/src/Cabinet/recoil/atoms.ts +++ b/frontend/src/Cabinet/recoil/atoms.ts @@ -210,6 +210,11 @@ export const targetClubUserInfoState = atom({ }, }); +export const currentFloorSectionNamesState = atom({ + key: "currentFloorSectionNames", + default: [], +}); + export const displayStyleState = atom({ key: "displayStyle", default: DisplayStyleToggleType.DEVICE, From dfa5d9b0739a3531645f677f9cd06f237208d674 Mon Sep 17 00:00:00 2001 From: gykoh42 Date: Sat, 30 Nov 2024 20:00:48 +0900 Subject: [PATCH 47/55] =?UTF-8?q?[FE]=20Chore:=20=EC=9E=84=EC=8B=9C=20?= =?UTF-8?q?=EC=BB=A4=EB=B0=8B=20#1649?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Cabinet/components/LentLog/LogTable/AdminCabinetLogTable.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/src/Cabinet/components/LentLog/LogTable/AdminCabinetLogTable.tsx b/frontend/src/Cabinet/components/LentLog/LogTable/AdminCabinetLogTable.tsx index f4c09b9c5..f330b294d 100644 --- a/frontend/src/Cabinet/components/LentLog/LogTable/AdminCabinetLogTable.tsx +++ b/frontend/src/Cabinet/components/LentLog/LogTable/AdminCabinetLogTable.tsx @@ -111,3 +111,4 @@ const EmptyLogStyled = styled.div` `; export default AdminCabinetLogTable; + \ No newline at end of file From c21ce67e262391501540665f0ec56cca202e2e1a Mon Sep 17 00:00:00 2001 From: gykoh42 Date: Tue, 17 Dec 2024 19:27:37 +0900 Subject: [PATCH 48/55] =?UTF-8?q?[FE]=20FIX:=20=ED=86=A0=EA=B8=80=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD=20=ED=9B=84=20=EA=B9=8C=EB=B9=84=EC=99=80=20?= =?UTF-8?q?=EC=88=98=EC=A7=80=ED=9A=8C=EB=A5=BC=20=EC=9D=B4=EB=8F=99?= =?UTF-8?q?=ED=95=A0=20=EC=8B=9C=20=ED=86=A0=EA=B8=80=20=EC=A0=81=EC=9A=A9?= =?UTF-8?q?=20=EC=95=88=EB=90=98=EB=8A=94=20=EB=B2=84=EA=B7=B8=20=ED=95=B4?= =?UTF-8?q?=EA=B2=B0=20#1649?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/Cabinet/components/Common/DarkModeToggleSwitch.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx b/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx index 2694a3a42..fa6ce1633 100644 --- a/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx +++ b/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx @@ -22,9 +22,12 @@ const DarkModeToggleSwitch = ({ id }: { id: string }) => { ); const isDarkMode = displayStyleType === DisplayStyleType.DARK; + const toggleType = + (localStorage.getItem("display-style-toggle") as DisplayStyleToggleType) || + DisplayStyleToggleType.DEVICE; useEffect(() => { - setDisplayStyleToggle(savedDisplayStyleToggle); + setDisplayStyleToggle(toggleType); }, []); useEffect(() => { From 35de4cadf7a8355725bbf4d7e16172dd67ab50b7 Mon Sep 17 00:00:00 2001 From: gykoh42 Date: Thu, 19 Dec 2024 14:19:28 +0900 Subject: [PATCH 49/55] =?UTF-8?q?[FE]=20FIX:=20=EC=B4=88=EA=B8=B0=20?= =?UTF-8?q?=EA=B9=9C=EB=B9=A1=EC=9E=84=20=EB=AC=B8=EC=A0=9C=20=ED=95=B4?= =?UTF-8?q?=EA=B2=B0=EC=9D=84=20=EC=9C=84=ED=95=9C=20getDisplayStyleFromLo?= =?UTF-8?q?calStorage=20=ED=95=A8=EC=88=98=20=EB=8F=84=EC=9E=85=20#1649?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../DisplayStyleCard/displayStyleInitializer.ts | 13 +++++++++---- .../components/Common/DarkModeToggleSwitch.tsx | 12 ++++++------ 2 files changed, 15 insertions(+), 10 deletions(-) diff --git a/frontend/src/Cabinet/components/Card/DisplayStyleCard/displayStyleInitializer.ts b/frontend/src/Cabinet/components/Card/DisplayStyleCard/displayStyleInitializer.ts index cf658c23f..c2d63161f 100644 --- a/frontend/src/Cabinet/components/Card/DisplayStyleCard/displayStyleInitializer.ts +++ b/frontend/src/Cabinet/components/Card/DisplayStyleCard/displayStyleInitializer.ts @@ -4,9 +4,14 @@ import { DisplayStyleType, } from "@/Cabinet/types/enum/displayStyle.type.enum"; -export const savedDisplayStyleToggle = - (localStorage.getItem("display-style-toggle") as DisplayStyleToggleType) || - DisplayStyleToggleType.DEVICE; +export const getDisplayStyleFromLocalStorage: () => DisplayStyleToggleType = + () => { + return ( + (localStorage.getItem( + "display-style-toggle" + ) as DisplayStyleToggleType) || DisplayStyleToggleType.DEVICE + ); + }; (function () { const isClient = typeof window !== "undefined"; @@ -14,7 +19,7 @@ export const savedDisplayStyleToggle = const darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)"); const colorMode = getInitialDisplayStyle( - savedDisplayStyleToggle, + getDisplayStyleFromLocalStorage(), darkModeQuery ); diff --git a/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx b/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx index fa6ce1633..725cdb86b 100644 --- a/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx +++ b/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx @@ -3,7 +3,7 @@ import { useRecoilState } from "recoil"; import styled from "styled-components"; import { displayStyleState } from "@/Cabinet/recoil/atoms"; import { getInitialDisplayStyle } from "@/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.container"; -import { savedDisplayStyleToggle } from "@/Cabinet/components/Card/DisplayStyleCard/displayStyleInitializer"; +import { getDisplayStyleFromLocalStorage } 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 { @@ -17,17 +17,17 @@ const DarkModeToggleSwitch = ({ id }: { id: string }) => { const darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)"); const [displayStyleType, setDisplayStyleType] = useState( () => { - return getInitialDisplayStyle(savedDisplayStyleToggle, darkModeQuery); + return getInitialDisplayStyle( + getDisplayStyleFromLocalStorage(), + darkModeQuery + ); } ); const isDarkMode = displayStyleType === DisplayStyleType.DARK; - const toggleType = - (localStorage.getItem("display-style-toggle") as DisplayStyleToggleType) || - DisplayStyleToggleType.DEVICE; useEffect(() => { - setDisplayStyleToggle(toggleType); + setDisplayStyleToggle(getDisplayStyleFromLocalStorage()); }, []); useEffect(() => { From 4301c425b1030665d2b48356673cf23e42a8b02b Mon Sep 17 00:00:00 2001 From: jnkeniaem Date: Thu, 19 Dec 2024 14:23:59 +0900 Subject: [PATCH 50/55] =?UTF-8?q?[FE]=20FIX:=20updateBodyDisplayStyle=20?= =?UTF-8?q?=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 --- config | 2 +- .../Card/DisplayStyleCard/DisplayStyleCard.container.tsx | 3 ++- .../Card/DisplayStyleCard/displayStyleInitializer.ts | 6 +++++- .../src/Cabinet/components/Common/DarkModeToggleSwitch.tsx | 7 +++++-- 4 files changed, 13 insertions(+), 5 deletions(-) diff --git a/config b/config index 36f81ff28..af2375238 160000 --- a/config +++ b/config @@ -1 +1 @@ -Subproject commit 36f81ff2864e6c3a7ef5af1fd752fab31e9b4edc +Subproject commit af23752382cdb750ff865dedcd9d8a238f1b724d diff --git a/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.container.tsx b/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.container.tsx index 82e806173..dd3b12dce 100644 --- a/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.container.tsx +++ b/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.container.tsx @@ -2,6 +2,7 @@ import { useEffect } from "react"; import { useRecoilValue } from "recoil"; import { displayStyleState } from "@/Cabinet/recoil/atoms"; import DisplayStyleCard from "@/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard"; +import { updateBodyDisplayStyle } from "@/Cabinet/components/Card/DisplayStyleCard/displayStyleInitializer"; import { DisplayStyleToggleType, DisplayStyleType, @@ -32,7 +33,7 @@ const DisplayStyleCardContainer = () => { useEffect(() => { const applyDisplayStyle = () => { const newDarkMode = getInitialDisplayStyle(toggleType, darkModeQuery); - document.body.setAttribute("display-style", newDarkMode); + updateBodyDisplayStyle(newDarkMode); }; applyDisplayStyle(); diff --git a/frontend/src/Cabinet/components/Card/DisplayStyleCard/displayStyleInitializer.ts b/frontend/src/Cabinet/components/Card/DisplayStyleCard/displayStyleInitializer.ts index c2d63161f..fbaeb2e90 100644 --- a/frontend/src/Cabinet/components/Card/DisplayStyleCard/displayStyleInitializer.ts +++ b/frontend/src/Cabinet/components/Card/DisplayStyleCard/displayStyleInitializer.ts @@ -13,6 +13,10 @@ export const getDisplayStyleFromLocalStorage: () => DisplayStyleToggleType = ); }; +export const updateBodyDisplayStyle = (style: DisplayStyleType) => { + document.body.setAttribute("display-style", style); +}; + (function () { const isClient = typeof window !== "undefined"; if (isClient) { @@ -31,7 +35,7 @@ export const getDisplayStyleFromLocalStorage: () => DisplayStyleToggleType = // 이 코드가 실행중일땐 전역변수가 아직 정의가 안된 상태라 전역변수 대신 hex code 사용 document.addEventListener("DOMContentLoaded", function () { - document.body.setAttribute("display-style", colorMode); + updateBodyDisplayStyle(colorMode); }); } })(); diff --git a/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx b/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx index 725cdb86b..34e016908 100644 --- a/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx +++ b/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx @@ -3,7 +3,10 @@ import { useRecoilState } from "recoil"; import styled from "styled-components"; import { displayStyleState } from "@/Cabinet/recoil/atoms"; import { getInitialDisplayStyle } from "@/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.container"; -import { getDisplayStyleFromLocalStorage } from "@/Cabinet/components/Card/DisplayStyleCard/displayStyleInitializer"; +import { + getDisplayStyleFromLocalStorage, + 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 { @@ -49,7 +52,7 @@ const DarkModeToggleSwitch = ({ id }: { id: string }) => { }, [displayStyleToggle]); useEffect(() => { - document.body.setAttribute("display-style", displayStyleType); + updateBodyDisplayStyle(displayStyleType); }, [displayStyleType]); const handleToggleChange = useCallback(() => { From 15bba7ae5b27a4c8ff80ac825e794bb7aff0dd5f Mon Sep 17 00:00:00 2001 From: jnkeniaem Date: Thu, 19 Dec 2024 14:29:59 +0900 Subject: [PATCH 51/55] =?UTF-8?q?[FE]=20FIX:=20updateLocalStorageDisplaySt?= =?UTF-8?q?yleToggle=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]); From fb0c17123c8040846e73c996a91914d3210c2efa Mon Sep 17 00:00:00 2001 From: jnkeniaem Date: Thu, 19 Dec 2024 14:42:42 +0900 Subject: [PATCH 52/55] =?UTF-8?q?[FE]=20FIX:=20isDeviceDarkMode=20?= =?UTF-8?q?=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 --- .../Card/DisplayStyleCard/DisplayStyleCard.container.tsx | 7 +++++-- .../Card/DisplayStyleCard/displayStyleInitializer.ts | 6 +++++- .../src/Cabinet/components/Common/DarkModeToggleSwitch.tsx | 3 ++- 3 files changed, 12 insertions(+), 4 deletions(-) diff --git a/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.container.tsx b/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.container.tsx index dd3b12dce..43ca3960e 100644 --- a/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.container.tsx +++ b/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.container.tsx @@ -2,7 +2,10 @@ import { useEffect } from "react"; import { useRecoilValue } from "recoil"; import { displayStyleState } from "@/Cabinet/recoil/atoms"; import DisplayStyleCard from "@/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard"; -import { updateBodyDisplayStyle } from "@/Cabinet/components/Card/DisplayStyleCard/displayStyleInitializer"; +import { + isDeviceDarkMode, + updateBodyDisplayStyle, +} from "@/Cabinet/components/Card/DisplayStyleCard/displayStyleInitializer"; import { DisplayStyleToggleType, DisplayStyleType, @@ -27,7 +30,7 @@ export const getInitialDisplayStyle = ( }; const DisplayStyleCardContainer = () => { - const darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)"); + const darkModeQuery = isDeviceDarkMode(); const toggleType = useRecoilValue(displayStyleState); useEffect(() => { diff --git a/frontend/src/Cabinet/components/Card/DisplayStyleCard/displayStyleInitializer.ts b/frontend/src/Cabinet/components/Card/DisplayStyleCard/displayStyleInitializer.ts index fbaeb2e90..4dd66b8bc 100644 --- a/frontend/src/Cabinet/components/Card/DisplayStyleCard/displayStyleInitializer.ts +++ b/frontend/src/Cabinet/components/Card/DisplayStyleCard/displayStyleInitializer.ts @@ -17,10 +17,14 @@ export const updateBodyDisplayStyle = (style: DisplayStyleType) => { document.body.setAttribute("display-style", style); }; +export const isDeviceDarkMode = () => { + return window.matchMedia("(prefers-color-scheme: dark)"); +}; + (function () { const isClient = typeof window !== "undefined"; if (isClient) { - const darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)"); + const darkModeQuery = isDeviceDarkMode(); const colorMode = getInitialDisplayStyle( getDisplayStyleFromLocalStorage(), diff --git a/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx b/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx index 0fa6145f1..1937b98f4 100644 --- a/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx +++ b/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx @@ -6,6 +6,7 @@ import { updateLocalStorageDisplayStyleToggle } from "@/Cabinet/components/Card/ 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"; @@ -18,7 +19,7 @@ import { const DarkModeToggleSwitch = ({ id }: { id: string }) => { const [displayStyleToggle, setDisplayStyleToggle] = useRecoilState(displayStyleState); - const darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)"); + const darkModeQuery = isDeviceDarkMode(); const [displayStyleType, setDisplayStyleType] = useState( () => { return getInitialDisplayStyle( From 6d0b837ab38df0055452770c20ad6c3290f5ac83 Mon Sep 17 00:00:00 2001 From: gykoh42 Date: Thu, 19 Dec 2024 15:14:40 +0900 Subject: [PATCH 53/55] =?UTF-8?q?[FE]=20FEAT:=20=EA=B0=80=EB=8F=85?= =?UTF-8?q?=EC=84=B1=EC=9D=84=20=EC=9C=84=ED=95=B4=20displayStyleToggle=20?= =?UTF-8?q?=EC=9D=84=20toggleType=20=EC=9C=BC=EB=A1=9C=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD=20#1649?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/Common/DarkModeToggleSwitch.tsx | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx b/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx index 1937b98f4..9c924830c 100644 --- a/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx +++ b/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx @@ -17,8 +17,7 @@ import { } from "@/Cabinet/types/enum/displayStyle.type.enum"; const DarkModeToggleSwitch = ({ id }: { id: string }) => { - const [displayStyleToggle, setDisplayStyleToggle] = - useRecoilState(displayStyleState); + const [toggleType, setToggleType] = useRecoilState(displayStyleState); const darkModeQuery = isDeviceDarkMode(); const [displayStyleType, setDisplayStyleType] = useState( () => { @@ -32,26 +31,26 @@ const DarkModeToggleSwitch = ({ id }: { id: string }) => { const isDarkMode = displayStyleType === DisplayStyleType.DARK; useEffect(() => { - setDisplayStyleToggle(getDisplayStyleFromLocalStorage()); + setToggleType(getDisplayStyleFromLocalStorage()); }, []); useEffect(() => { const updateDisplayStyleType = () => { const newDisplayStyleType = getInitialDisplayStyle( - displayStyleToggle, + toggleType, darkModeQuery ); setDisplayStyleType(newDisplayStyleType); }; updateDisplayStyleType(); - if (displayStyleToggle === DisplayStyleToggleType.DEVICE) { + if (toggleType === DisplayStyleToggleType.DEVICE) { darkModeQuery.addEventListener("change", updateDisplayStyleType); return () => { darkModeQuery.removeEventListener("change", updateDisplayStyleType); }; } - }, [displayStyleToggle]); + }, [toggleType]); useEffect(() => { updateBodyDisplayStyle(displayStyleType); @@ -59,20 +58,20 @@ const DarkModeToggleSwitch = ({ id }: { id: string }) => { const handleToggleChange = useCallback(() => { let newToggleType; - if (displayStyleToggle === DisplayStyleToggleType.DEVICE) { + if (toggleType === DisplayStyleToggleType.DEVICE) { newToggleType = displayStyleType === DisplayStyleType.LIGHT ? DisplayStyleToggleType.DARK : DisplayStyleToggleType.LIGHT; } else { newToggleType = - displayStyleToggle === DisplayStyleToggleType.LIGHT + toggleType === DisplayStyleToggleType.LIGHT ? DisplayStyleToggleType.DARK : DisplayStyleToggleType.LIGHT; } updateLocalStorageDisplayStyleToggle(newToggleType); - setDisplayStyleToggle(newToggleType); + setToggleType(newToggleType); }, [displayStyleType]); return ( From ad9486c28d011b3ce5cf856604ec95c07e5d18f2 Mon Sep 17 00:00:00 2001 From: gykoh42 Date: Thu, 19 Dec 2024 16:58:30 +0900 Subject: [PATCH 54/55] =?UTF-8?q?[FE]=20REFACTOR:=20=EB=B0=98=EB=B3=B5?= =?UTF-8?q?=EB=90=98=EB=8A=94=20=EB=A1=9C=EC=A7=81=20utils=20=ED=8C=8C?= =?UTF-8?q?=EC=9D=BC=EA=B3=BC=20custom=20hook=20=EC=9C=BC=EB=A1=9C=20?= =?UTF-8?q?=EB=B6=84=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)"); +}; From 9038ebd081c6cd12a64c3564d07b2e128c1818a4 Mon Sep 17 00:00:00 2001 From: gykoh42 Date: Thu, 19 Dec 2024 17:27:09 +0900 Subject: [PATCH 55/55] =?UTF-8?q?[FE]=20REFACTOR:=20=EB=B0=98=EB=B3=B5?= =?UTF-8?q?=EB=90=98=EB=8A=94=20=EB=A1=9C=EC=A7=81=20custom=20hook=20?= =?UTF-8?q?=EC=97=90=20=EC=B6=94=EA=B0=80=20#1649?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../DisplayStyleCard/DisplayStyleCard.container.tsx | 10 +++------- .../components/Common/DarkModeToggleSwitch.tsx | 9 ++------- frontend/src/Cabinet/hooks/useDisplayStyleToggle.ts | 13 ++++++++++++- 3 files changed, 17 insertions(+), 15 deletions(-) diff --git a/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.container.tsx b/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.container.tsx index 817940652..cd54e2466 100644 --- a/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.container.tsx +++ b/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.container.tsx @@ -6,6 +6,7 @@ import { DisplayStyleToggleType, DisplayStyleType, } from "@/Cabinet/types/enum/displayStyle.type.enum"; +import useDisplayStyleToggle from "@/Cabinet/hooks/useDisplayStyleToggle"; import { isDeviceDarkMode, updateBodyDisplayStyle, @@ -32,6 +33,7 @@ export const getInitialDisplayStyle = ( const DisplayStyleCardContainer = () => { const darkModeQuery = isDeviceDarkMode(); const toggleType = useRecoilValue(displayStyleState); + const { addDarkModeListener } = useDisplayStyleToggle(); useEffect(() => { const applyDisplayStyle = () => { @@ -40,13 +42,7 @@ const DisplayStyleCardContainer = () => { }; applyDisplayStyle(); - - if (toggleType === DisplayStyleToggleType.DEVICE) { - darkModeQuery.addEventListener("change", applyDisplayStyle); - return () => { - darkModeQuery.removeEventListener("change", applyDisplayStyle); - }; - } + addDarkModeListener(darkModeQuery, applyDisplayStyle); }, [toggleType]); return ; diff --git a/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx b/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx index 9453bb265..5eb8f52c5 100644 --- a/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx +++ b/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx @@ -29,7 +29,7 @@ const DarkModeToggleSwitch = ({ id }: { id: string }) => { ); const isDarkMode = displayStyleType === DisplayStyleType.DARK; - const { updateToggleType } = useDisplayStyleToggle(); + const { updateToggleType, addDarkModeListener } = useDisplayStyleToggle(); useEffect(() => { setToggleType(getDisplayStyleFromLocalStorage()); @@ -45,12 +45,7 @@ const DarkModeToggleSwitch = ({ id }: { id: string }) => { }; updateDisplayStyleType(); - if (toggleType === DisplayStyleToggleType.DEVICE) { - darkModeQuery.addEventListener("change", updateDisplayStyleType); - return () => { - darkModeQuery.removeEventListener("change", updateDisplayStyleType); - }; - } + addDarkModeListener(darkModeQuery, updateDisplayStyleType); }, [toggleType]); useEffect(() => { diff --git a/frontend/src/Cabinet/hooks/useDisplayStyleToggle.ts b/frontend/src/Cabinet/hooks/useDisplayStyleToggle.ts index 3742c4a4e..6d6df1356 100644 --- a/frontend/src/Cabinet/hooks/useDisplayStyleToggle.ts +++ b/frontend/src/Cabinet/hooks/useDisplayStyleToggle.ts @@ -11,7 +11,18 @@ export const useDisplayStyleToggle = () => { updateLocalStorageDisplayStyleToggle(newToggleType); }; - return { updateToggleType }; + const addDarkModeListener = ( + darkModeQuery: MediaQueryList, + callback: () => void + ) => { + if (toggleType === DisplayStyleToggleType.DEVICE) { + darkModeQuery.addEventListener("change", callback); + return () => { + darkModeQuery.removeEventListener("change", callback); + }; + } + }; + return { updateToggleType, addDarkModeListener }; }; export default useDisplayStyleToggle;