diff --git a/src/components/Checkbox/Checkbox.stories.ts b/src/components/Checkbox/Checkbox.stories.ts index 38730d7b..ac14ccc3 100644 --- a/src/components/Checkbox/Checkbox.stories.ts +++ b/src/components/Checkbox/Checkbox.stories.ts @@ -12,7 +12,7 @@ type Story = StoryObj; export const Primary: Story = { // Add your story args here args: { - labelText: 'label', + children: 'label', checked: false, disabled: false, }, diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx index f238f2e5..aa5f98ef 100644 --- a/src/components/Checkbox/Checkbox.tsx +++ b/src/components/Checkbox/Checkbox.tsx @@ -1,7 +1,8 @@ -import { ChangeEvent } from 'react'; +import { ChangeEvent, useContext } from 'react'; import cx from 'classnames'; import { twMerge } from 'tailwind-merge'; import CheckIcon from '@material-design-icons/svg/outlined/check.svg'; +import { CheckboxContext } from './CheckboxGroup'; import { Text } from '../Text'; @@ -9,7 +10,7 @@ interface Props { /** * 체크박스의 라벨에 들어가는 텍스트입니다. */ - labelText: string; + children: string; /** * 체크박스의 체크 여부입니다. */ @@ -18,16 +19,27 @@ interface Props { * 체크박스 활성화 여부입니다. */ disabled?: boolean; + /** + * 체크 정보가 있는 context(문자열 배열)과 대조하기 위한 키 값입니다. + */ + value: string; /** * 체크 여부 변경 시 호출되는 함수입니다. */ onChange?: (e: ChangeEvent) => void; } -export function Checkbox({ labelText, checked = false, disabled = false, onChange }: Props) { +export function Checkbox({ children, checked = false, disabled = false, value, onChange }: Props) { + const context = useContext(CheckboxContext); + + if (context) { + checked = context.selectedValue.includes(value); + onChange = context.onChange; + } + return ( ); } diff --git a/src/components/Checkbox/CheckboxGroup.stories.tsx b/src/components/Checkbox/CheckboxGroup.stories.tsx new file mode 100644 index 00000000..57100f42 --- /dev/null +++ b/src/components/Checkbox/CheckboxGroup.stories.tsx @@ -0,0 +1,41 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { CheckboxGroup } from './CheckboxGroup'; +import { Checkbox } from './Checkbox'; + +type Component = typeof CheckboxGroup; +const meta: Meta = { + title: 'rookies/CheckboxGroup', + component: CheckboxGroup, +}; + +type Story = StoryObj; + +export const Primary: Story = { + args: { + selectedValue: ['label1', 'label3'], + children: ( + <> + children + children + children + + ), + }, +}; + +export const WithDisabled: Story = { + args: { + selectedValue: ['label1', 'label3'], + children: ( + <> + children + children + + children + + + ), + }, +}; + +export default meta; diff --git a/src/components/Checkbox/CheckboxGroup.tsx b/src/components/Checkbox/CheckboxGroup.tsx new file mode 100644 index 00000000..b8148540 --- /dev/null +++ b/src/components/Checkbox/CheckboxGroup.tsx @@ -0,0 +1,19 @@ +import { ReactNode, ChangeEventHandler, createContext } from 'react'; + +interface Props { + children: ReactNode; + selectedValue: string[]; + onChange?: ChangeEventHandler; +} + +type CheckboxContextType = Omit; + +export const CheckboxContext = createContext(null); + +export function CheckboxGroup({ children, ...restProps }: Props) { + return ( + +
{children}
+
+ ); +} diff --git a/src/components/Checkbox/index.ts b/src/components/Checkbox/index.ts index 8f59e4fb..84ac72d9 100644 --- a/src/components/Checkbox/index.ts +++ b/src/components/Checkbox/index.ts @@ -1 +1,2 @@ export { Checkbox } from './Checkbox'; +export { CheckboxGroup } from './CheckboxGroup';