From ee32440fc8b8da9a689e7e65ad71bd585b03e73e Mon Sep 17 00:00:00 2001 From: Heeyeon Jeong Date: Thu, 7 Sep 2023 20:00:11 +0900 Subject: [PATCH 1/4] =?UTF-8?q?feat:=20ToggleSwitch=20=EA=B3=B5=EC=9A=A9?= =?UTF-8?q?=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=A0=9C=EC=9E=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/_components/common/ToggleSwitch.tsx | 124 ++++++++++++++++++++++++ 1 file changed, 124 insertions(+) create mode 100644 app/_components/common/ToggleSwitch.tsx diff --git a/app/_components/common/ToggleSwitch.tsx b/app/_components/common/ToggleSwitch.tsx new file mode 100644 index 0000000..d55411b --- /dev/null +++ b/app/_components/common/ToggleSwitch.tsx @@ -0,0 +1,124 @@ +import palette from '@/_styles/palette'; +import { Stack, Switch, Typography } from '@mui/material'; +import { usePathname, useRouter, useSearchParams } from 'next/navigation'; +import React, { useState } from 'react'; +import styled from 'styled-components'; + +type ToggleSwitchProps = { + leftOption: { + label: string; + queryParams: string; + value: string; + }; + rightOption: { + label: string; + queryParams: string; + value: string; + }; +}; + +const ToggleSwitch: React.FC = ({ leftOption, rightOption }) => { + const router = useRouter(); + const searchParams = useSearchParams(); + const pathname = usePathname(); + const newParams = new URLSearchParams(searchParams.toString()); + + const [isChecked, setIsChecked] = useState( + searchParams.get(rightOption.queryParams) === rightOption.value, + ); + + const handleSwitchChange = () => { + setIsChecked(!isChecked); + + isChecked + ? newParams.set(leftOption.queryParams, leftOption.value) + : newParams.set(rightOption.queryParams, rightOption.value); + + router.push(`${pathname}?${newParams.toString()}`); + }; + + return ( + + + {leftOption.label} + + + + {rightOption.label} + + + ); +}; + +const Label = styled(Typography)<{ isfocused: boolean }>` + position: absolute; + top: 24%; + z-index: 1; + cursor: pointer; + user-select: none; + font-size: 14px; + color: ${({ isfocused }) => (isfocused ? palette.black : palette.grey_40)}; + font-weight: ${({ isfocused }) => isfocused && 'bold'}; + transition: color 0.3s ease-in-out; +`; + +const LeftLabel = styled(Label)<{ isfocused: boolean }>` + left: 26%; + transform: translateX(-50%); +`; + +const RightLabel = styled(Label)<{ isfocused: boolean }>` + right: 26%; + transform: translateX(50%); +`; + +export default ToggleSwitch; From 284b3b9aa45b2133372e89a6a4253e40aa113e19 Mon Sep 17 00:00:00 2001 From: Heeyeon Jeong Date: Thu, 7 Sep 2023 20:53:02 +0900 Subject: [PATCH 2/4] =?UTF-8?q?feat:=20ToggleSwitch=20=EC=8A=A4=ED=83=80?= =?UTF-8?q?=EC=9D=BC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/_components/common/ToggleSwitch.tsx | 68 ++++++++++++++----------- 1 file changed, 39 insertions(+), 29 deletions(-) diff --git a/app/_components/common/ToggleSwitch.tsx b/app/_components/common/ToggleSwitch.tsx index d55411b..ad5348b 100644 --- a/app/_components/common/ToggleSwitch.tsx +++ b/app/_components/common/ToggleSwitch.tsx @@ -2,7 +2,6 @@ import palette from '@/_styles/palette'; import { Stack, Switch, Typography } from '@mui/material'; import { usePathname, useRouter, useSearchParams } from 'next/navigation'; import React, { useState } from 'react'; -import styled from 'styled-components'; type ToggleSwitchProps = { leftOption: { @@ -17,6 +16,21 @@ type ToggleSwitchProps = { }; }; +const OptionLabelStyle = ({ isFocused }: { isFocused: boolean }) => { + return { + position: 'absolute', + maxHeight: 'calc(100vh - 163px)', + top: '24%', + zIndex: '1', + cursor: 'pointer', + userSelect: 'none', + fontSize: ' 14px', + transition: 'color 0.3s ease-in-out', + fontWeight: isFocused ? 'bold' : 'normal', + color: isFocused ? palette.black : palette.grey_40, + }; +}; + const ToggleSwitch: React.FC = ({ leftOption, rightOption }) => { const router = useRouter(); const searchParams = useSearchParams(); @@ -43,13 +57,22 @@ const ToggleSwitch: React.FC = ({ leftOption, rightOption }) position: 'relative', }} > - {leftOption.label} - + = ({ leftOption, rightOption }) height: 40, padding: 0, display: 'flex', + '&.MuiTypography-root': { + fontSize: 14, + }, '&.MuiSwitch-root': { margin: 0, }, @@ -89,36 +115,20 @@ const ToggleSwitch: React.FC = ({ leftOption, rightOption }) }, }} /> - {rightOption.label} - + ); }; -const Label = styled(Typography)<{ isfocused: boolean }>` - position: absolute; - top: 24%; - z-index: 1; - cursor: pointer; - user-select: none; - font-size: 14px; - color: ${({ isfocused }) => (isfocused ? palette.black : palette.grey_40)}; - font-weight: ${({ isfocused }) => isfocused && 'bold'}; - transition: color 0.3s ease-in-out; -`; - -const LeftLabel = styled(Label)<{ isfocused: boolean }>` - left: 26%; - transform: translateX(-50%); -`; - -const RightLabel = styled(Label)<{ isfocused: boolean }>` - right: 26%; - transform: translateX(50%); -`; - export default ToggleSwitch; From e429bdc24a0a382584c876337ed132c848198e8a Mon Sep 17 00:00:00 2001 From: Heeyeon Jeong Date: Fri, 8 Sep 2023 09:34:56 +0900 Subject: [PATCH 3/4] =?UTF-8?q?feat:=20ToggleSwitch=20=ED=95=A8=EC=88=98?= =?UTF-8?q?=EB=AA=85,=20=EC=A0=88=EB=8C=80=EA=B2=BD=EB=A1=9C=EB=A1=9C=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/_components/common/ToggleSwitch.tsx | 36 ++++++++++++------------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/app/_components/common/ToggleSwitch.tsx b/app/_components/common/ToggleSwitch.tsx index ad5348b..3302fae 100644 --- a/app/_components/common/ToggleSwitch.tsx +++ b/app/_components/common/ToggleSwitch.tsx @@ -1,4 +1,4 @@ -import palette from '@/_styles/palette'; +import palette from '@styles/palette'; import { Stack, Switch, Typography } from '@mui/material'; import { usePathname, useRouter, useSearchParams } from 'next/navigation'; import React, { useState } from 'react'; @@ -16,21 +16,6 @@ type ToggleSwitchProps = { }; }; -const OptionLabelStyle = ({ isFocused }: { isFocused: boolean }) => { - return { - position: 'absolute', - maxHeight: 'calc(100vh - 163px)', - top: '24%', - zIndex: '1', - cursor: 'pointer', - userSelect: 'none', - fontSize: ' 14px', - transition: 'color 0.3s ease-in-out', - fontWeight: isFocused ? 'bold' : 'normal', - color: isFocused ? palette.black : palette.grey_40, - }; -}; - const ToggleSwitch: React.FC = ({ leftOption, rightOption }) => { const router = useRouter(); const searchParams = useSearchParams(); @@ -41,6 +26,21 @@ const ToggleSwitch: React.FC = ({ leftOption, rightOption }) searchParams.get(rightOption.queryParams) === rightOption.value, ); + const getOptionLabelStyle = ({ isFocused }: { isFocused: boolean }) => { + return { + position: 'absolute', + maxHeight: 'calc(100vh - 163px)', + top: '24%', + zIndex: '1', + cursor: 'pointer', + userSelect: 'none', + fontSize: ' 14px', + transition: 'color 0.3s ease-in-out', + fontWeight: isFocused ? 'bold' : 'normal', + color: isFocused ? palette.black : palette.grey_40, + }; + }; + const handleSwitchChange = () => { setIsChecked(!isChecked); @@ -60,7 +60,7 @@ const ToggleSwitch: React.FC = ({ leftOption, rightOption }) = ({ leftOption, rightOption }) Date: Mon, 11 Sep 2023 20:16:17 +0900 Subject: [PATCH 4/4] =?UTF-8?q?fix:=20default=20checked=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 --- app/_components/common/ToggleSwitch.tsx | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/app/_components/common/ToggleSwitch.tsx b/app/_components/common/ToggleSwitch.tsx index 3302fae..5bb2e6f 100644 --- a/app/_components/common/ToggleSwitch.tsx +++ b/app/_components/common/ToggleSwitch.tsx @@ -1,7 +1,7 @@ -import palette from '@styles/palette'; +import palette from '@/_styles/palette'; import { Stack, Switch, Typography } from '@mui/material'; import { usePathname, useRouter, useSearchParams } from 'next/navigation'; -import React, { useState } from 'react'; +import React, { useEffect, useState } from 'react'; type ToggleSwitchProps = { leftOption: { @@ -26,6 +26,13 @@ const ToggleSwitch: React.FC = ({ leftOption, rightOption }) searchParams.get(rightOption.queryParams) === rightOption.value, ); + useEffect(() => { + if (!searchParams.get(rightOption.queryParams)) { + setIsChecked(false); + return; + } + }, [searchParams, rightOption]); + const getOptionLabelStyle = ({ isFocused }: { isFocused: boolean }) => { return { position: 'absolute', @@ -72,7 +79,6 @@ const ToggleSwitch: React.FC = ({ leftOption, rightOption }) {leftOption.label}