From 0d1a6d7a47b462475127c6ce4b271976993beacb Mon Sep 17 00:00:00 2001 From: namdaeun Date: Thu, 14 Nov 2024 16:47:42 +0900 Subject: [PATCH 01/10] =?UTF-8?q?style:=20=EB=9D=BC=EB=94=94=EC=98=A4?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=9E=AC?= =?UTF-8?q?=EC=A0=95=EC=9D=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../RadioButton/RadioButton.style.ts | 46 ++++++++++++++++--- .../component/RadioButton/RadioButton.tsx | 2 +- .../component/RadioButton/RadioGroup.tsx | 4 +- 3 files changed, 43 insertions(+), 9 deletions(-) diff --git a/src/common/component/RadioButton/RadioButton.style.ts b/src/common/component/RadioButton/RadioButton.style.ts index ef38b9402..8de3f103f 100644 --- a/src/common/component/RadioButton/RadioButton.style.ts +++ b/src/common/component/RadioButton/RadioButton.style.ts @@ -11,16 +11,50 @@ export const radioButtonLayoutStyle = css({ }); export const inputStyle = css({ - '& + label': { - cursor: 'pointer', - transition: '0.2s ease-in-out', + position: 'relative', - ...theme.text.body06, - }, + appearance: 'none', + MozAppearance: 'none', + WebkitAppearance: 'none', + + width: '1.5rem', + height: '1.5rem', + + border: `1.5px solid ${theme.colors.gray_400}`, + borderRadius: '50%', - accentColor: theme.colors.key_500, + backgroundColor: theme.colors.gray_100, cursor: 'pointer', + + transition: '0.2s ease-in-out', + + '&:checked': { + borderColor: theme.colors.key_500, + }, + + '&:checked::after': { + position: 'absolute', + top: '50%', + left: '50%', + + width: '0.75rem', + height: '0.75rem', + + margin: '0 auto', + + borderRadius: '50%', + + content: '""', + backgroundColor: theme.colors.key_500, + + transform: 'translate(-50%, -50%)', + }, + + '& + label': { + cursor: 'pointer', + ...theme.text.body06, + }, }); export const labelStyle = css({ diff --git a/src/common/component/RadioButton/RadioButton.tsx b/src/common/component/RadioButton/RadioButton.tsx index 32bf51d58..dc7345304 100644 --- a/src/common/component/RadioButton/RadioButton.tsx +++ b/src/common/component/RadioButton/RadioButton.tsx @@ -11,7 +11,7 @@ export interface RadioButtonProps extends InputHTMLAttributes const RadioButton = ({ label, value, id, checked, ...props }: RadioButtonProps) => { return (
- + diff --git a/src/common/component/RadioButton/RadioGroup.tsx b/src/common/component/RadioButton/RadioGroup.tsx index 27c30abfb..91833ccf3 100644 --- a/src/common/component/RadioButton/RadioGroup.tsx +++ b/src/common/component/RadioButton/RadioGroup.tsx @@ -22,7 +22,7 @@ const RadioGroup = ({ options, onChange, value }: RadioButtonGroupProps) => { }; const renderRadioButton = () => { - return options.map(({ label, value: optionValue, name }, index) => { + return options.map(({ label, name, value: optionValue }, index) => { const id = `${name}-${index}`; return ( @@ -33,7 +33,7 @@ const RadioGroup = ({ options, onChange, value }: RadioButtonGroupProps) => { name={name} value={optionValue} onChange={handleChange} - checked={value === optionValue} + checked={optionValue === value} /> ); }); From 9177f1856e63477945f699d7142df9b3df64c6f2 Mon Sep 17 00:00:00 2001 From: namdaeun Date: Thu, 14 Nov 2024 16:50:20 +0900 Subject: [PATCH 02/10] style: fix radio button style --- src/common/component/RadioButton/RadioButton.style.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/common/component/RadioButton/RadioButton.style.ts b/src/common/component/RadioButton/RadioButton.style.ts index 8de3f103f..c9ac8d113 100644 --- a/src/common/component/RadioButton/RadioButton.style.ts +++ b/src/common/component/RadioButton/RadioButton.style.ts @@ -5,7 +5,7 @@ import { theme } from '@/common/style/theme/theme'; export const radioButtonLayoutStyle = css({ display: 'flex', - gap: '0.4rem', + gap: '0.7rem', cursor: 'pointer', }); @@ -38,8 +38,8 @@ export const inputStyle = css({ top: '50%', left: '50%', - width: '0.75rem', - height: '0.75rem', + width: '0.7rem', + height: '0.7rem', margin: '0 auto', From d183b625a51cf3c390dd47e5d7124d58826cf103 Mon Sep 17 00:00:00 2001 From: namdaeun Date: Thu, 14 Nov 2024 16:50:41 +0900 Subject: [PATCH 03/10] =?UTF-8?q?feat:=20=EC=9D=B8=EC=88=98=EC=9D=B8?= =?UTF-8?q?=EA=B3=84=20=EB=85=B8=ED=8A=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80?= =?UTF-8?q?=EC=97=90=EC=84=9C=20routeNav=20=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/component/RouteNav/RouteNav.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/shared/component/RouteNav/RouteNav.tsx b/src/shared/component/RouteNav/RouteNav.tsx index e269fb60c..58537a5c9 100644 --- a/src/shared/component/RouteNav/RouteNav.tsx +++ b/src/shared/component/RouteNav/RouteNav.tsx @@ -20,7 +20,7 @@ const RouteNav = () => { const isDrivePage = pathname === PATH.DRIVE; const isArchivingPage = pathname === PATH.ARCHIVING; - const isHandoverPage = pathname === PATH.HANDOVER; + const isHandoverPage = pathname === PATH.HANDOVER || pathname === PATH.HANDOVER_NOTE; return (