From 39e966bd21056c3348668d745a30c327bc385861 Mon Sep 17 00:00:00 2001 From: jjangminii Date: Wed, 1 Jul 2026 03:02:15 +0900 Subject: [PATCH 1/8] =?UTF-8?q?feat(ui):=20Checkbox=20=EA=B3=B5=ED=86=B5?= =?UTF-8?q?=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84=20?= =?UTF-8?q?(#53)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 제어 컴포넌트 방식의 Checkbox를 구현하고 Storybook 스토리 및 패키지 export를 추가했습니다. Co-Authored-By: Claude Sonnet 4.6 --- .../components/checkbox/Checkbox.stories.tsx | 60 ++++++++++++++++++ .../src/components/checkbox/Checkbox.tsx | 61 +++++++++++++++++++ .../src/components/index.ts | 1 + 3 files changed, 122 insertions(+) create mode 100644 packages/timo-design-system/src/components/checkbox/Checkbox.stories.tsx create mode 100644 packages/timo-design-system/src/components/checkbox/Checkbox.tsx diff --git a/packages/timo-design-system/src/components/checkbox/Checkbox.stories.tsx b/packages/timo-design-system/src/components/checkbox/Checkbox.stories.tsx new file mode 100644 index 00000000..64a0351f --- /dev/null +++ b/packages/timo-design-system/src/components/checkbox/Checkbox.stories.tsx @@ -0,0 +1,60 @@ +import { useState } from "react"; + +import { Checkbox } from "./Checkbox"; + +import type { Meta, StoryObj } from "@storybook/react"; + +const meta: Meta = { + title: "Components/Checkbox", + component: Checkbox, + tags: ["autodocs"], + argTypes: { + checked: { control: "boolean" }, + disabled: { control: "boolean" }, + onChange: { action: "changed" }, + }, + args: { + checked: false, + disabled: false, + }, +}; + +export default meta; +type Story = StoryObj; + +const PlaygroundCheckbox = (args: React.ComponentProps) => { + const [checked, setChecked] = useState(args.checked); + return ( + { + setChecked(value); + args.onChange?.(value); + }} + /> + ); +}; + +export const Playground: Story = { + render: (args) => , +}; + +export const AllStates: Story = { + render: () => ( +
+
+ {}} /> +

Unchecked

+
+
+ {}} /> +

Checked

+
+
+ {}} /> +

Disabled

+
+
+ ), +}; diff --git a/packages/timo-design-system/src/components/checkbox/Checkbox.tsx b/packages/timo-design-system/src/components/checkbox/Checkbox.tsx new file mode 100644 index 00000000..a143d255 --- /dev/null +++ b/packages/timo-design-system/src/components/checkbox/Checkbox.tsx @@ -0,0 +1,61 @@ +import { cn } from "../../lib/cn"; + +export interface CheckboxProps { + checked: boolean; + onChange: (checked: boolean) => void; + disabled?: boolean; + className?: string; +} + +export const Checkbox = ({ + checked, + onChange, + disabled = false, + className, +}: CheckboxProps) => { + return ( + + ); +}; diff --git a/packages/timo-design-system/src/components/index.ts b/packages/timo-design-system/src/components/index.ts index ef907737..2b1a886c 100644 --- a/packages/timo-design-system/src/components/index.ts +++ b/packages/timo-design-system/src/components/index.ts @@ -1,2 +1,3 @@ +export { Checkbox } from "./checkbox/Checkbox"; export { Color } from "./color/Color"; export { Typography } from "./typography/Typography"; From c3cc6e8efe56828f2111bf45ed66ff2358b4bd9d Mon Sep 17 00:00:00 2001 From: jjangminii Date: Wed, 1 Jul 2026 16:02:46 +0900 Subject: [PATCH 2/8] =?UTF-8?q?fix(ui):=20Checkbox=20=EC=8A=A4=ED=83=80?= =?UTF-8?q?=EC=9D=BC=20=EC=88=98=EC=A0=95=20=EB=B0=8F=20Storybook=20?= =?UTF-8?q?=EC=9D=B8=ED=84=B0=EB=9E=99=EC=85=98=20=EC=98=A4=EB=A5=98=20?= =?UTF-8?q?=EC=88=98=EC=A0=95=20(#53)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit disabled 색상을 timo-blue-100으로 수정하고 언체크 상태 배경색을 제거했습니다. Storybook 액션 핸들러를 제거하여 Playground 클릭 시 상태 변환이 정상 동작하도록 수정했습니다. Co-Authored-By: Claude Sonnet 4.6 --- .../src/components/checkbox/Checkbox.stories.tsx | 13 ++----------- .../src/components/checkbox/Checkbox.tsx | 4 ++-- 2 files changed, 4 insertions(+), 13 deletions(-) diff --git a/packages/timo-design-system/src/components/checkbox/Checkbox.stories.tsx b/packages/timo-design-system/src/components/checkbox/Checkbox.stories.tsx index 64a0351f..1703f585 100644 --- a/packages/timo-design-system/src/components/checkbox/Checkbox.stories.tsx +++ b/packages/timo-design-system/src/components/checkbox/Checkbox.stories.tsx @@ -11,11 +11,11 @@ const meta: Meta = { argTypes: { checked: { control: "boolean" }, disabled: { control: "boolean" }, - onChange: { action: "changed" }, }, args: { checked: false, disabled: false, + onChange: () => {}, }, }; @@ -24,16 +24,7 @@ type Story = StoryObj; const PlaygroundCheckbox = (args: React.ComponentProps) => { const [checked, setChecked] = useState(args.checked); - return ( - { - setChecked(value); - args.onChange?.(value); - }} - /> - ); + return ; }; export const Playground: Story = { diff --git a/packages/timo-design-system/src/components/checkbox/Checkbox.tsx b/packages/timo-design-system/src/components/checkbox/Checkbox.tsx index a143d255..963b96cb 100644 --- a/packages/timo-design-system/src/components/checkbox/Checkbox.tsx +++ b/packages/timo-design-system/src/components/checkbox/Checkbox.tsx @@ -31,9 +31,9 @@ export const Checkbox = ({ {(checked || disabled) && ( From c98a5039554b3461ba908004bf8ab0e162a1fbde Mon Sep 17 00:00:00 2001 From: jjangminii Date: Wed, 1 Jul 2026 16:16:24 +0900 Subject: [PATCH 3/8] =?UTF-8?q?fix(ui):=20Checkbox=20disabled=20=EC=B2=B4?= =?UTF-8?q?=ED=81=AC=EB=A7=88=ED=81=AC=20=EC=83=89=EC=83=81=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=20(#53)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit disabled 상태에서도 체크마크 색상을 timo-yellow-300으로 통일했습니다. Co-Authored-By: Claude Sonnet 4.6 --- .../timo-design-system/src/components/checkbox/Checkbox.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/timo-design-system/src/components/checkbox/Checkbox.tsx b/packages/timo-design-system/src/components/checkbox/Checkbox.tsx index 963b96cb..fb210696 100644 --- a/packages/timo-design-system/src/components/checkbox/Checkbox.tsx +++ b/packages/timo-design-system/src/components/checkbox/Checkbox.tsx @@ -44,7 +44,7 @@ export const Checkbox = ({ overflow="visible" fill="none" aria-hidden="true" - className={cn(disabled ? "text-white" : "text-timo-yellow-300")} + className="text-timo-yellow-300" > Date: Wed, 1 Jul 2026 17:11:15 +0900 Subject: [PATCH 4/8] =?UTF-8?q?feat(ui):=20Checkbox=20=EC=A0=91=EA=B7=BC?= =?UTF-8?q?=EC=84=B1=20=EA=B0=9C=EC=84=A0=20=E2=80=94=20htmlFor/id=20?= =?UTF-8?q?=EC=97=B0=EA=B2=B0=20=EB=B0=8F=20=ED=82=A4=EB=B3=B4=EB=93=9C=20?= =?UTF-8?q?=ED=8F=AC=EC=BB=A4=EC=8A=A4=20=ED=91=9C=EC=8B=9C=20(#53)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit useId()로 label과 input을 explicit하게 연결하고, peer-focus-visible 패턴으로 키보드 탭 시 포커스 링을 표시했습니다. Co-Authored-By: Claude Sonnet 4.6 --- .../src/components/checkbox/Checkbox.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/timo-design-system/src/components/checkbox/Checkbox.tsx b/packages/timo-design-system/src/components/checkbox/Checkbox.tsx index fb210696..227a9727 100644 --- a/packages/timo-design-system/src/components/checkbox/Checkbox.tsx +++ b/packages/timo-design-system/src/components/checkbox/Checkbox.tsx @@ -1,3 +1,5 @@ +import { useId } from "react"; + import { cn } from "../../lib/cn"; export interface CheckboxProps { @@ -13,8 +15,10 @@ export const Checkbox = ({ disabled = false, className, }: CheckboxProps) => { + const id = useId(); return (