From abe61bb952c984772584d9d2b3ddea02db6ce24c Mon Sep 17 00:00:00 2001 From: wookki Date: Mon, 8 Jan 2024 00:30:05 +0900 Subject: [PATCH 1/7] =?UTF-8?q?design:=20color=20palette=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/globals.css | 1 + src/styles/colorPalette.ts | 1 + 2 files changed, 2 insertions(+) diff --git a/src/app/globals.css b/src/app/globals.css index c0767714..bea0cc27 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -10,6 +10,7 @@ --tertiary: #7A7A7A; --black: #090A0A; --white: #FFF; + --white-100: #F3F5F8; --pink: #F67272; /* -------------- z-index -------------- */ diff --git a/src/styles/colorPalette.ts b/src/styles/colorPalette.ts index f0018b90..b3fe09d8 100644 --- a/src/styles/colorPalette.ts +++ b/src/styles/colorPalette.ts @@ -10,6 +10,7 @@ export const colors = { tertiary: 'var(--tertiary', black: 'var(--black)', white: 'var(--white)', + white100: 'var(--white-100', pink: 'var(--pink)', }; From f6e145eb28524d7757954994094e230cc42acc22 Mon Sep 17 00:00:00 2001 From: wookki Date: Mon, 8 Jan 2024 00:31:10 +0900 Subject: [PATCH 2/7] =?UTF-8?q?feat:=20Radio=20ui=20=EC=A0=9C=EC=9E=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/shared/radio/Radio.tsx | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) create mode 100644 src/components/shared/radio/Radio.tsx diff --git a/src/components/shared/radio/Radio.tsx b/src/components/shared/radio/Radio.tsx new file mode 100644 index 00000000..0d1f3d89 --- /dev/null +++ b/src/components/shared/radio/Radio.tsx @@ -0,0 +1,26 @@ +import { InputHTMLAttributes, forwardRef } from 'react'; + +import classNames from 'classnames/bind'; + +import styles from './Radio.module.scss'; + +interface RadioProps extends InputHTMLAttributes { + type: 'gender' | 'ageGroup' + label: string + value: string | number +} + +const cx = classNames.bind(styles); + +const Radio = forwardRef(({ + type, label, value, +}, ref) => { + return ( + <> + + + + ); +}); + +export default Radio; From 35a452c086ec8e92c86360a68ba6335bddbb8585 Mon Sep 17 00:00:00 2001 From: wookki Date: Mon, 8 Jan 2024 00:31:26 +0900 Subject: [PATCH 3/7] =?UTF-8?q?design:=20Radio=20scss=20=EC=A0=9C=EC=9E=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/shared/radio/Radio.module.scss | 41 +++++++++++++++++++ 1 file changed, 41 insertions(+) create mode 100644 src/components/shared/radio/Radio.module.scss diff --git a/src/components/shared/radio/Radio.module.scss b/src/components/shared/radio/Radio.module.scss new file mode 100644 index 00000000..496cc471 --- /dev/null +++ b/src/components/shared/radio/Radio.module.scss @@ -0,0 +1,41 @@ +input[type="radio"] { + display: none; +} + +label { + display: flex; + align-items: center; + justify-content: center; + width: 100%; +} + +label.gender { + height: 48px; + border-radius: 8px; +} + +input[type="radio"] + label.gender { + border: 1px solid var(--gray-100); + background-color: var(--white); + color: var(--gray-300); +} + +input[type="radio"]:checked + label.gender { + background-color: var(--primary); + color: var(--white); +} + +label.ageGroup { + height: 47px; + border-radius: 30px; +} + +input[type="radio"] + label.ageGroup { + background-color: var(--white-100); + color: var(--gray-300); +} + +input[type="radio"]:checked + label.ageGroup { + background-color: var(--primary); + color: var(--white-100); +} From a79e8e0d6a13728de9fd7d541e2dcb0974b95975 Mon Sep 17 00:00:00 2001 From: wookki Date: Mon, 8 Jan 2024 00:31:44 +0900 Subject: [PATCH 4/7] =?UTF-8?q?test:=20Radio=20=EC=8A=A4=ED=86=A0=EB=A6=AC?= =?UTF-8?q?=EB=B6=81=20=EC=A0=9C=EC=9E=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/shared/radio/Radio.stories.tsx | 32 +++++++++++++++++++ 1 file changed, 32 insertions(+) create mode 100644 src/components/shared/radio/Radio.stories.tsx diff --git a/src/components/shared/radio/Radio.stories.tsx b/src/components/shared/radio/Radio.stories.tsx new file mode 100644 index 00000000..a5861b25 --- /dev/null +++ b/src/components/shared/radio/Radio.stories.tsx @@ -0,0 +1,32 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import Radio from './Radio'; + +const meta = { + title: 'Shared/Radio', + component: Radio, + parameters: { + }, + tags: ['autodocs'], + argTypes: { + }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const gender: Story = { + args: { + type: 'gender', + label: '남성', + value: 'male', + }, +}; + +export const ageGroup: Story = { + args: { + type: 'ageGroup', + label: '10대', + value: '10', + }, +}; From b47a5bd35b5c6d6d59b5eec88d83faf3e70a5d11 Mon Sep 17 00:00:00 2001 From: wookki Date: Mon, 8 Jan 2024 00:34:52 +0900 Subject: [PATCH 5/7] =?UTF-8?q?chore:=20classname=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/shared/radio/Radio.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/shared/radio/Radio.tsx b/src/components/shared/radio/Radio.tsx index 0d1f3d89..25ab4608 100644 --- a/src/components/shared/radio/Radio.tsx +++ b/src/components/shared/radio/Radio.tsx @@ -18,7 +18,7 @@ const Radio = forwardRef(({ return ( <> - + ); }); From 152c4934ff0a505d822dd75ef77b359c013771d0 Mon Sep 17 00:00:00 2001 From: wookki Date: Mon, 8 Jan 2024 00:35:32 +0900 Subject: [PATCH 6/7] =?UTF-8?q?chore:=20=EC=BB=AC=EB=9F=AC=20=ED=8C=94?= =?UTF-8?q?=EB=A0=88=ED=8A=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/colorPalette.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/colorPalette.ts b/src/styles/colorPalette.ts index b3fe09d8..c9129788 100644 --- a/src/styles/colorPalette.ts +++ b/src/styles/colorPalette.ts @@ -10,7 +10,7 @@ export const colors = { tertiary: 'var(--tertiary', black: 'var(--black)', white: 'var(--white)', - white100: 'var(--white-100', + white100: 'var(--white-100)', pink: 'var(--pink)', }; From 1c2d5efe0d01cb9dde711757aae244ac0bb07b55 Mon Sep 17 00:00:00 2001 From: wookki Date: Mon, 8 Jan 2024 01:36:53 +0900 Subject: [PATCH 7/7] =?UTF-8?q?feat:=20Radio=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20additionalInfo=20type=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/shared/radio/Radio.module.scss | 11 +++++++++-- src/components/shared/radio/Radio.stories.tsx | 8 ++++++++ src/components/shared/radio/Radio.tsx | 6 ++++-- 3 files changed, 21 insertions(+), 4 deletions(-) diff --git a/src/components/shared/radio/Radio.module.scss b/src/components/shared/radio/Radio.module.scss index 496cc471..5bb00036 100644 --- a/src/components/shared/radio/Radio.module.scss +++ b/src/components/shared/radio/Radio.module.scss @@ -30,12 +30,19 @@ label.ageGroup { border-radius: 30px; } -input[type="radio"] + label.ageGroup { +label.additionalInfo { + height: 60px; + border-radius: 10px; +} + +input[type="radio"] + label.ageGroup, +input[type="radio"] + label.additionalInfo { background-color: var(--white-100); color: var(--gray-300); } -input[type="radio"]:checked + label.ageGroup { +input[type="radio"]:checked + label.ageGroup, +input[type="radio"]:checked + label.additionalInfo { background-color: var(--primary); color: var(--white-100); } diff --git a/src/components/shared/radio/Radio.stories.tsx b/src/components/shared/radio/Radio.stories.tsx index a5861b25..22aa3bed 100644 --- a/src/components/shared/radio/Radio.stories.tsx +++ b/src/components/shared/radio/Radio.stories.tsx @@ -30,3 +30,11 @@ export const ageGroup: Story = { value: '10', }, }; + +export const additionalInfo: Story = { + args: { + type: 'additionalInfo', + label: '소형', + value: 'mini', + }, +}; diff --git a/src/components/shared/radio/Radio.tsx b/src/components/shared/radio/Radio.tsx index 25ab4608..3bcacfbe 100644 --- a/src/components/shared/radio/Radio.tsx +++ b/src/components/shared/radio/Radio.tsx @@ -5,7 +5,7 @@ import classNames from 'classnames/bind'; import styles from './Radio.module.scss'; interface RadioProps extends InputHTMLAttributes { - type: 'gender' | 'ageGroup' + type: 'gender' | 'ageGroup' | 'additionalInfo' label: string value: string | number } @@ -18,7 +18,9 @@ const Radio = forwardRef(({ return ( <> - + ); });