Skip to content

CheckboxGroup 컴포넌트 구현 #711

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
yolophg wants to merge 1 commit into
base: main
Choose a base branch
from
+1,103 −0
Open

CheckboxGroup 컴포넌트 구현 #711

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
242 changes: 242 additions & 0 deletions src/components/CheckboxGroup/CheckboxGroup.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,242 @@
import type { Meta, StoryObj } from "@storybook/react-vite";
import { useState } from "react";
import { css } from "../../../styled-system/css";
import { CheckboxGroup, CheckboxItem } from "./CheckboxGroup";

export default {
component: CheckboxGroup,
parameters: {
layout: "centered",
design: {
type: "figma",
url: "https://www.figma.com/design/mQ2ETYC6LXGOwVETov3CgO/Dale-UI-Kit?node-id=851-1768",
Copy link
Contributor

@hyoseong1994 hyoseong1994 Jan 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

체크박스 그룹이 아닌 체크박스 피그마로 링크되어있습니다.
https://www.figma.com/design/mQ2ETYC6LXGOwVETov3CgO/Dale-UI-Kit?node-id=6814-1500 로 수정부탁드립니다.

},
},
args: {
name: "fruits",
label: "좋아하는 과일을 선택하세요 (옵션 선택)",
children: (
<>
<CheckboxItem value="apple">사과</CheckboxItem>
<CheckboxItem value="banana">바나나</CheckboxItem>
<CheckboxItem value="orange">오렌지</CheckboxItem>
</>
),
},
argTypes: {
children: {
control: false,
},
},
} satisfies Meta<typeof CheckboxGroup>;

type Story = StoryObj<typeof CheckboxGroup>;

export const Basic: Story = {};

export const WithDefaultValue: Story = {
args: {
defaultValue: ["banana"],
},
};

export const Orientation: Story = {
render: () => {
return (
<div
className={css({ display: "flex", flexDirection: "column", gap: "32" })}
>
Comment on lines +46 to +48
Copy link
Contributor

@hyoseong1994 hyoseong1994 Jan 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

중앙정렬이 들어가도 괜찮다면 VStack 컴포넌트를 사용하는것이 어떨까요?

<CheckboxGroup
name="vertical-orientation"
label="좋아하는 과일을 선택하세요 (옵션 선택)"
orientation="vertical"
defaultValue={["apple"]}
>
<CheckboxItem value="apple">사과</CheckboxItem>
<CheckboxItem value="banana">바나나</CheckboxItem>
<CheckboxItem value="orange">오렌지</CheckboxItem>
</CheckboxGroup>
Comment on lines +49 to +58
Copy link
Contributor

@hyoseong1994 hyoseong1994 Jan 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

default args에 children을 주입하고 있고 여기서 주입하는것과 동일한 형태로 보입니다.

<CheckboxGroup
          name="vertical-orientation"
          label="좋아하는 과일을 선택하세요 (옵션 선택)"
          orientation="vertical"
          defaultValue={["apple"]}
          {...args}
 />

로 변경하면 children을 중복해서 선언하지않아도 되고 option을 변경하였을때 수정도 한번에 되니 유지보수에도 유리할것으로 예상됩니다.


<CheckboxGroup
name="horizontal-orientation"
label="좋아하는 과일을 선택하세요 (옵션 선택)"
orientation="horizontal"
defaultValue={["banana"]}
>
<CheckboxItem value="apple">사과</CheckboxItem>
<CheckboxItem value="banana">바나나</CheckboxItem>
<CheckboxItem value="orange">오렌지</CheckboxItem>
</CheckboxGroup>
</div>
);
},
};

export const GroupDisabled: Story = {
args: {
disabled: true,
defaultValue: ["banana"],
label: "전체 그룹 비활성화",
},
};

export const ItemDisabled: Story = {
render: () => {
return (
<div
className={css({ display: "flex", flexDirection: "column", gap: "32" })}
>
<CheckboxGroup
name="disabled-checked"
label="개별 아이템 비활성화 (선택됨)"
defaultValue={["banana"]}
>
<CheckboxItem value="apple">사과</CheckboxItem>
<CheckboxItem value="banana" disabled>
바나나 (disabled)
</CheckboxItem>
<CheckboxItem value="orange">오렌지</CheckboxItem>
</CheckboxGroup>

<CheckboxGroup
name="disabled-unchecked"
label="개별 아이템 비활성화 (선택 안 됨)"
defaultValue={["apple"]}
>
<CheckboxItem value="apple">사과</CheckboxItem>
<CheckboxItem value="banana" disabled>
바나나 (disabled)
</CheckboxItem>
<CheckboxItem value="orange">오렌지</CheckboxItem>
</CheckboxGroup>
</div>
);
},
};

export const Tones: Story = {
render: () => {
return (
<div
className={css({ display: "flex", flexDirection: "column", gap: "32" })}
>
<CheckboxGroup
name="neutral-tone"
label="중립 색조 (Neutral)"
defaultValue={["apple"]}
tone="neutral"
>
<CheckboxItem value="apple">사과</CheckboxItem>
<CheckboxItem value="banana">바나나</CheckboxItem>
<CheckboxItem value="orange">오렌지</CheckboxItem>
</CheckboxGroup>

<CheckboxGroup
name="brand-tone"
label="브랜드 색조 (Brand)"
defaultValue={["apple"]}
tone="brand"
>
<CheckboxItem value="apple">사과</CheckboxItem>
<CheckboxItem value="banana">바나나</CheckboxItem>
<CheckboxItem value="orange">오렌지</CheckboxItem>
</CheckboxGroup>

<CheckboxGroup
name="danger-tone"
label="위험 색조 (Danger)"
defaultValue={["apple"]}
tone="danger"
>
<CheckboxItem value="apple">사과</CheckboxItem>
<CheckboxItem value="banana">바나나</CheckboxItem>
<CheckboxItem value="orange">오렌지</CheckboxItem>
</CheckboxGroup>

<CheckboxGroup
name="warning-tone"
label="경고 색조 (Warning)"
defaultValue={["apple"]}
tone="warning"
>
<CheckboxItem value="apple">사과</CheckboxItem>
<CheckboxItem value="banana">바나나</CheckboxItem>
<CheckboxItem value="orange">오렌지</CheckboxItem>
</CheckboxGroup>

<CheckboxGroup
name="success-tone"
label="성공 색조 (Success)"
defaultValue={["apple"]}
tone="success"
>
<CheckboxItem value="apple">사과</CheckboxItem>
<CheckboxItem value="banana">바나나</CheckboxItem>
<CheckboxItem value="orange">오렌지</CheckboxItem>
</CheckboxGroup>

<CheckboxGroup
name="info-tone"
label="정보 색조 (Info)"
defaultValue={["apple"]}
tone="info"
>
<CheckboxItem value="apple">사과</CheckboxItem>
<CheckboxItem value="banana">바나나</CheckboxItem>
<CheckboxItem value="orange">오렌지</CheckboxItem>
</CheckboxGroup>
</div>
);
},
};

export const Invalid: Story = {
render: () => {
return (
<div
className={css({ display: "flex", flexDirection: "column", gap: "32" })}
>
<CheckboxGroup
name="invalid-group"
label="에러 상태 체크박스 그룹"
invalid
>
<CheckboxItem value="apple">사과</CheckboxItem>
<CheckboxItem value="banana">바나나</CheckboxItem>
<CheckboxItem value="orange">오렌지</CheckboxItem>
</CheckboxGroup>

<CheckboxGroup name="valid-group" label="정상 체크박스 그룹">
<CheckboxItem value="apple">사과</CheckboxItem>
<CheckboxItem value="banana">바나나</CheckboxItem>
<CheckboxItem value="orange">오렌지</CheckboxItem>
</CheckboxGroup>
</div>
);
},
};

export const Controlled = () => {
const [value, setValue] = useState<string[]>(["apple"]);
return (
<div>
<CheckboxGroup
name="controlled-fruits"
label="제어 컴포넌트 예시"
value={value}
onChange={(newValue) => setValue(newValue)}
>
<CheckboxItem value="apple">사과</CheckboxItem>
<CheckboxItem value="banana">바나나</CheckboxItem>
<CheckboxItem value="orange">오렌지</CheckboxItem>
</CheckboxGroup>
<div className={css({ marginTop: "20" })}>
<p>현재 선택된 값: {value.join(", ")}</p>
<button onClick={() => setValue(["banana"])}>바나나만 선택</button>
<button onClick={() => setValue(["apple", "orange"])}>
사과와 오렌지 선택
</button>
</div>
</div>
);
};
Loading