feat : checkboxGroup 추가

src/components/Checkbox/Checkbox.stories.ts

@@ -12,7 +12,7 @@ type Story = StoryObj<Component>;
 export const Primary: Story = {
   // Add your story args here
   args: {
-    labelText: 'label',
+    children: 'label',
     checked: false,
     disabled: false,
   },

src/components/Checkbox/Checkbox.tsx

@@ -1,15 +1,16 @@
-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';
 
 interface Props {
   /**
    * 체크박스의 라벨에 들어가는 텍스트입니다.
    */
-  labelText: string;
+  children: string;
   /**
    * 체크박스의 체크 여부입니다.
    */
@@ -18,16 +19,27 @@ interface Props {
    * 체크박스 활성화 여부입니다.
    */
   disabled?: boolean;
+  /**
+   * 체크 정보가 있는 context(문자열 배열)과 대조하기 위한 키 값입니다.
+   */
+  value: string;
   /**
    * 체크 여부 변경 시 호출되는 함수입니다.
    */
   onChange?: (e: ChangeEvent<HTMLInputElement>) => 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 (
     <label className={cx('flex flex-row items-center  gap-2', { 'opacity-[0.3]': disabled })}>
-      <input type="checkbox" className="hidden" checked={checked} onChange={onChange} />
+      <input type="checkbox" className="hidden" checked={checked} value={value} onChange={onChange} />
       <div
         className={cx(
           ' flex h-[20px] w-[20px] items-center justify-center rounded-md border-2 border-border-primary transition-colors duration-200 hover:border-color-system_200 dark:border-border-primary_dark dark:hover:border-color-system_200',
@@ -43,7 +55,7 @@ export function Checkbox({ labelText, checked = false, disabled = false, onChang
           )}
         />
       </div>
-      <Text text={labelText} size="body2" weight="regular" />
+      <Text text={children} size="body2" weight="regular" />
     </label>
   );
 }

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<Component> = {
+  title: 'rookies/CheckboxGroup',
+  component: CheckboxGroup,
+};
+
+type Story = StoryObj<Component>;
+
+export const Primary: Story = {
+  args: {
+    selectedValue: ['label1', 'label3'],
+    children: (
+      <>
+        <Checkbox value="label1">children</Checkbox>
+        <Checkbox value="label2">children</Checkbox>
+        <Checkbox value="label3">children</Checkbox>
+      </>
+    ),
+  },
+};
+
+export const WithDisabled: Story = {
+  args: {
+    selectedValue: ['label1', 'label3'],
+    children: (
+      <>
+        <Checkbox value="label1">children</Checkbox>
+        <Checkbox value="label2">children</Checkbox>
+        <Checkbox value="label3" disabled>
+          children
+        </Checkbox>
+      </>
+    ),
+  },
+};
+
+export default meta;

src/components/Checkbox/CheckboxGroup.tsx

@@ -0,0 +1,19 @@
+import { ReactNode, ChangeEventHandler, createContext } from 'react';
+
+interface Props {
+  children: ReactNode;
+  selectedValue: string[];
+  onChange?: ChangeEventHandler<HTMLInputElement>;
+}
+
+type CheckboxContextType = Omit<Props, 'children'>;
+
+export const CheckboxContext = createContext<CheckboxContextType | null>(null);
+
+export function CheckboxGroup({ children, ...restProps }: Props) {
+  return (
+    <CheckboxContext.Provider value={{ ...restProps }}>
+      <fieldset className="flex flex-col gap-2">{children}</fieldset>
+    </CheckboxContext.Provider>
+  );
+}

src/components/Checkbox/index.ts

@@ -1 +1,2 @@
 export { Checkbox } from './Checkbox';
+export { CheckboxGroup } from './CheckboxGroup';