From 2627d4ec8c6e802846c81bc339ba5a51c0cbfe10 Mon Sep 17 00:00:00 2001 From: aken-you Date: Sun, 28 Sep 2025 01:29:47 +0900 Subject: [PATCH 1/8] =?UTF-8?q?chore:=20@radix-ui/react-radio-group=20?= =?UTF-8?q?=EC=84=A4=EC=B9=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + yarn.lock | 56 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 57 insertions(+) diff --git a/package.json b/package.json index d0ae9f0f..110b87bc 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "@radix-ui/react-dialog": "^1.1.10", "@radix-ui/react-dropdown-menu": "^2.1.15", "@radix-ui/react-progress": "^1.1.7", + "@radix-ui/react-radio-group": "^1.3.8", "@radix-ui/react-slot": "^1.2.2", "@radix-ui/react-switch": "^1.2.4", "@radix-ui/react-toggle": "^1.1.9", diff --git a/yarn.lock b/yarn.lock index fb80f80e..713ffc5d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3024,6 +3024,34 @@ __metadata: languageName: node linkType: hard +"@radix-ui/react-radio-group@npm:^1.3.8": + version: 1.3.8 + resolution: "@radix-ui/react-radio-group@npm:1.3.8" + dependencies: + "@radix-ui/primitive": "npm:1.1.3" + "@radix-ui/react-compose-refs": "npm:1.1.2" + "@radix-ui/react-context": "npm:1.1.2" + "@radix-ui/react-direction": "npm:1.1.1" + "@radix-ui/react-presence": "npm:1.1.5" + "@radix-ui/react-primitive": "npm:2.1.3" + "@radix-ui/react-roving-focus": "npm:1.1.11" + "@radix-ui/react-use-controllable-state": "npm:1.2.2" + "@radix-ui/react-use-previous": "npm:1.1.1" + "@radix-ui/react-use-size": "npm:1.1.1" + peerDependencies: + "@types/react": "*" + "@types/react-dom": "*" + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + checksum: 10c0/23af8e8b833da1fc4aa4e67c3607dedee4fc5b39278d2e2b820bec7f7b3c0891b006a8a35c57ba436ddf18735bbd8dad9a598d14632a328753a875fde447975c + languageName: node + linkType: hard + "@radix-ui/react-roving-focus@npm:1.1.10": version: 1.1.10 resolution: "@radix-ui/react-roving-focus@npm:1.1.10" @@ -3051,6 +3079,33 @@ __metadata: languageName: node linkType: hard +"@radix-ui/react-roving-focus@npm:1.1.11": + version: 1.1.11 + resolution: "@radix-ui/react-roving-focus@npm:1.1.11" + dependencies: + "@radix-ui/primitive": "npm:1.1.3" + "@radix-ui/react-collection": "npm:1.1.7" + "@radix-ui/react-compose-refs": "npm:1.1.2" + "@radix-ui/react-context": "npm:1.1.2" + "@radix-ui/react-direction": "npm:1.1.1" + "@radix-ui/react-id": "npm:1.1.1" + "@radix-ui/react-primitive": "npm:2.1.3" + "@radix-ui/react-use-callback-ref": "npm:1.1.1" + "@radix-ui/react-use-controllable-state": "npm:1.2.2" + peerDependencies: + "@types/react": "*" + "@types/react-dom": "*" + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + checksum: 10c0/2cd43339c36e89a3bf1db8aab34b939113dfbde56bf3a33df2d74757c78c9489b847b1962f1e2441c67e41817d120cb6177943e0f655f47bc1ff8e44fd55b1a2 + languageName: node + linkType: hard + "@radix-ui/react-slot@npm:1.2.0": version: 1.2.0 resolution: "@radix-ui/react-slot@npm:1.2.0" @@ -10753,6 +10808,7 @@ __metadata: "@radix-ui/react-dialog": "npm:^1.1.10" "@radix-ui/react-dropdown-menu": "npm:^2.1.15" "@radix-ui/react-progress": "npm:^1.1.7" + "@radix-ui/react-radio-group": "npm:^1.3.8" "@radix-ui/react-slot": "npm:^1.2.2" "@radix-ui/react-switch": "npm:^1.2.4" "@radix-ui/react-toggle": "npm:^1.1.9" From f10f9bedf5802f330d117732ec0e4e23d2de8dc3 Mon Sep 17 00:00:00 2001 From: aken-you Date: Sun, 28 Sep 2025 01:53:07 +0900 Subject: [PATCH 2/8] =?UTF-8?q?feat:=20Radio=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/ui/radio/index.tsx | 53 +++++++++++++++++++++++++++++++++++ 1 file changed, 53 insertions(+) create mode 100644 src/shared/ui/radio/index.tsx diff --git a/src/shared/ui/radio/index.tsx b/src/shared/ui/radio/index.tsx new file mode 100644 index 00000000..fc8987d3 --- /dev/null +++ b/src/shared/ui/radio/index.tsx @@ -0,0 +1,53 @@ +'use client'; + +import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'; +import { cva } from 'class-variance-authority'; +import * as React from 'react'; +import { cn } from '@/shared/shadcn/lib/utils'; + +function RadioGroup({ + className, + ...props +}: React.ComponentProps) { + return ( + + ); +} + +const radioGroupItemVariants = cva( + 'border-border-default hover:bg-fill-neutral-subtle-hover disabled:border-border-disabled disabled:bg-icon-disabled data-[state=checked]:border-border-success rounded-full border-2 bg-white data-[state=checked]:border-4', + { + variants: { + size: { + medium: 'h-[16px] w-[16px]', + large: 'h-[20px] w-[20px]', + }, + }, + defaultVariants: { + size: 'large', + }, + }, +); + +function RadioGroupItem({ + size = 'large', + className, + ...props +}: { size: 'medium' | 'large' } & React.ComponentProps< + typeof RadioGroupPrimitive.RadioGroupItem +>) { + return ( + + + + ); +} + +export { RadioGroup, RadioGroupItem }; From f3d09fa8cc45babdc8fa5b94a0054e3686a13ade Mon Sep 17 00:00:00 2001 From: aken-you Date: Sun, 28 Sep 2025 01:53:22 +0900 Subject: [PATCH 3/8] =?UTF-8?q?feat:=20Radio=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EC=8A=A4=ED=86=A0=EB=A6=AC=EB=B6=81=20=EC=83=9D?= =?UTF-8?q?=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/stories/ui/radio.stories.tsx | 46 ++++++++++++++++++++++++++++++++ 1 file changed, 46 insertions(+) create mode 100644 src/stories/ui/radio.stories.tsx diff --git a/src/stories/ui/radio.stories.tsx b/src/stories/ui/radio.stories.tsx new file mode 100644 index 00000000..f9be2fe9 --- /dev/null +++ b/src/stories/ui/radio.stories.tsx @@ -0,0 +1,46 @@ +import { Meta, StoryObj } from '@storybook/react'; +import { useState } from 'react'; +import Button from '@/shared/ui/button'; +import { RadioGroup, RadioGroupItem } from '@/shared/ui/radio'; + +const meta: Meta = { + component: RadioGroup, + tags: ['autodocs'], +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + render: () => { + const [state, setState] = useState('default'); + + return ( +
+ +
+ setState('first')} + /> + +
+
+ setState('second')} + /> + + +
+ + + +
+ ); + }, +}; From 5ed3e602e2e4f58bb334db64c2d093c9c8fd4aad Mon Sep 17 00:00:00 2001 From: aken-you Date: Sun, 28 Sep 2025 01:54:39 +0900 Subject: [PATCH 4/8] =?UTF-8?q?fix:=20RadioGroupItem=EC=9D=98=20size=20?= =?UTF-8?q?=ED=83=80=EC=9E=85=EC=9D=84=20=EC=98=B5=EC=85=94=EB=84=90?= =?UTF-8?q?=EB=A1=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/ui/radio/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/shared/ui/radio/index.tsx b/src/shared/ui/radio/index.tsx index fc8987d3..4fb00dc1 100644 --- a/src/shared/ui/radio/index.tsx +++ b/src/shared/ui/radio/index.tsx @@ -37,7 +37,7 @@ function RadioGroupItem({ size = 'large', className, ...props -}: { size: 'medium' | 'large' } & React.ComponentProps< +}: { size?: 'medium' | 'large' } & React.ComponentProps< typeof RadioGroupPrimitive.RadioGroupItem >) { return ( From a87dff6e40b3107cc40a3132646b514ac2e453fd Mon Sep 17 00:00:00 2001 From: aken-you Date: Sun, 28 Sep 2025 01:56:22 +0900 Subject: [PATCH 5/8] =?UTF-8?q?refactor:=20radio=20=EC=8A=A4=ED=86=A0?= =?UTF-8?q?=EB=A6=AC=EB=B6=81=20=EC=98=A4=ED=83=80=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/stories/ui/radio.stories.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/stories/ui/radio.stories.tsx b/src/stories/ui/radio.stories.tsx index f9be2fe9..1e93dabf 100644 --- a/src/stories/ui/radio.stories.tsx +++ b/src/stories/ui/radio.stories.tsx @@ -13,11 +13,11 @@ type Story = StoryObj; export const Default: Story = { render: () => { - const [state, setState] = useState('default'); + const [state, setState] = useState<'first' | 'second'>('first'); return (
- +
Date: Sun, 28 Sep 2025 02:01:21 +0900 Subject: [PATCH 6/8] =?UTF-8?q?feat:=20RadioGroup=20=EC=8A=A4=ED=86=A0?= =?UTF-8?q?=EB=A6=AC=EB=B6=81=20=EC=84=A4=EB=AA=85=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/stories/ui/radio.stories.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/stories/ui/radio.stories.tsx b/src/stories/ui/radio.stories.tsx index 1e93dabf..3ba7d98b 100644 --- a/src/stories/ui/radio.stories.tsx +++ b/src/stories/ui/radio.stories.tsx @@ -5,6 +5,13 @@ import { RadioGroup, RadioGroupItem } from '@/shared/ui/radio'; const meta: Meta = { component: RadioGroup, + parameters: { + docs: { + description: { + story: 'RadioGroupItem 컴포넌트의 id와 label의 htmlFor을 맞춰주세요.', + }, + }, + }, tags: ['autodocs'], }; From e878c28404722a3dbb354f66be93f2e234641fb9 Mon Sep 17 00:00:00 2001 From: aken-you Date: Sun, 28 Sep 2025 02:08:47 +0900 Subject: [PATCH 7/8] =?UTF-8?q?refactor:=20=EC=8A=A4=ED=86=A0=EB=A6=AC?= =?UTF-8?q?=EB=B6=81=20RadioGroup=EC=9D=98=20onValueChange=20=EC=82=AC?= =?UTF-8?q?=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/stories/ui/radio.stories.tsx | 18 +++++++----------- 1 file changed, 7 insertions(+), 11 deletions(-) diff --git a/src/stories/ui/radio.stories.tsx b/src/stories/ui/radio.stories.tsx index 3ba7d98b..5c91f1c4 100644 --- a/src/stories/ui/radio.stories.tsx +++ b/src/stories/ui/radio.stories.tsx @@ -24,21 +24,17 @@ export const Default: Story = { return (
- + setState(value)} + >
- setState('first')} - /> +
- setState('second')} - /> +
From 8d76b4d2c481e1bd084f0ad3a51845c4c31837aa Mon Sep 17 00:00:00 2001 From: aken-you Date: Sun, 28 Sep 2025 23:02:55 +0900 Subject: [PATCH 8/8] =?UTF-8?q?refactor:=20RadioGroup=EC=9D=98=20grid=20?= =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/ui/radio/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/shared/ui/radio/index.tsx b/src/shared/ui/radio/index.tsx index 4fb00dc1..54db934e 100644 --- a/src/shared/ui/radio/index.tsx +++ b/src/shared/ui/radio/index.tsx @@ -12,7 +12,7 @@ function RadioGroup({ return ( );