[Feature] MultiGroup 컴포넌트 개발 (#56)

* Squashed commit of refactor/switch-component

* chore: package.json 수정

* chore: Story 템플릿 수정

* feat: MultiGroup 컴포넌트 구현

* chore: Checkbox 스토리 및 테스트 코드 수정

* chore: Switch 컴포넌트 스토리 및 테스트 수정

* feat: MultiGroup 컴포넌트 빌드 설정 적용

* feat: docs에 MultiGroup 컴포넌트 적용

* comment: jsdoc 추가

* docs: 스토리 코드 문서화 추가

* test: 테스트 코드 작성

* chore: 자잘한 수정사항 반영

* chore: useCheckedState 훅에서 disabled 상태 고려할 수 있도록 로직 개선

* chore: group context 상태 구조 분해 할당으로 가져오도록 수정

* chore: MultiGroup 잘못된 variant 수정

* chore: 상태값 네이밍 변경

* chore: 개별 스위치, 체크박스에는 value default 값 지정

* comment: gap, position 관련 주석 추가

* fix: 머지 에러 해결

apps/wow-docs/app/page.tsx

@@ -1,20 +1,32 @@
 import Checkbox from "wowds-ui/Checkbox";
 import Chip from "wowds-ui/Chip";
+import MultiGroup from "wowds-ui/MultiGroup";
 import RadioButton from "wowds-ui/RadioButton";
 import RadioGroup from "wowds-ui/RadioGroup";
 import Switch from "wowds-ui/Switch";
 
 const Home = () => {
   return (
     <>
-      <Checkbox />
+      <Checkbox value="checkbox" />
       <Chip label="Chip" />
-      <Switch />
-
+      <Switch value="switch" />
       <RadioGroup defaultValue="1학년" name="학년">
         <RadioButton label="1학년" value="1학년" />
         <RadioButton label="2학년" value="2학년" />
       </RadioGroup>
+      <MultiGroup variant="checkbox">
+        <Checkbox children="checkbox1" value="checkbox1" />
+        <Checkbox children="checkbox2" value="checkbox2" />
+        <Checkbox children="checkbox3" value="checkbox3" />
+        <Checkbox children="checkbox4" value="checkbox4" />
+      </MultiGroup>
+      <MultiGroup variant="switch">
+        <Switch label="switch1" value="switch1" />
+        <Switch label="switch2" value="switch2" />
+        <Switch label="switch3" value="switch3" />
+        <Switch label="switch4" value="switch4" />
+      </MultiGroup>
     </>
   );
 };

packages/codegen/templates/Story.tsx.hbs

@@ -19,7 +19,7 @@ const meta = {
   },
   argTypes: {
     props1: {
-      description: "props1은 default 값이 있는 필수적인 속성입니다."",
+      description: "props1은 default 값이 있는 필수적인 속성입니다.",
       table: {
         // type, 필수가 아닐 경우 required 삭제
         type: { summary: "string", required: true },

packages/wow-ui/package.json

@@ -40,6 +40,11 @@
       "require": "./dist/RadioGroup.cjs",
       "import": "./dist/RadioGroup.js"
     },
+    "./MultiGroup": {
+      "types": "./dist/components/MultiGroup/index.d.ts",
+      "require": "./dist/MultiGroup.cjs",
+      "import": "./dist/MultiGroup.js"
+    },
     "./Chip": {
       "types": "./dist/components/Chip/index.d.ts",
       "require": "./dist/Chip.cjs",

packages/wow-ui/rollup.config.js

@@ -24,6 +24,7 @@ export default {
     Switch: "./src/components/Switch",
     RadioButton: "./src/components/RadioGroup/RadioButton",
     RadioGroup: "./src/components/RadioGroup/RadioGroup",
+    MultiGroup: "./src/components/MultiGroup",
     Chip: "./src/components/Chip",
     Checkbox: "./src/components/Checkbox",
     Button: "./src/components/Button",

packages/wow-ui/src/components/Checkbox/Checkbox.stories.tsx

@@ -148,18 +148,21 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {
     defaultChecked: false,
+    value: "checkbox",
   },
 };
 
 export const Checked: Story = {
   args: {
     defaultChecked: true,
+    value: "checkbox",
   },
 };
 
 export const Disabled: Story = {
   args: {
     disabled: true,
+    value: "checkbox",
   },
 };
 
@@ -168,6 +171,7 @@ export const Vertical: Story = {
     checked: true,
     children: "string",
     position: "vertical",
+    value: "checkbox",
   },
 };
 
@@ -176,6 +180,7 @@ export const Horizontal: Story = {
     checked: true,
     children: "string",
     position: "horizontal",
+    value: "checkbox",
   },
 };
 
@@ -186,9 +191,14 @@ const ControlledCheckBox = () => {
     setIsChecked((prev) => !prev);
   };
 
-  return <Checkbox checked={isChecked} onChange={handleChange} />;
+  return (
+    <Checkbox checked={isChecked} value="checkbox" onChange={handleChange} />
+  );
 };
 
 export const ControlledState: Story = {
   render: () => <ControlledCheckBox />,
+  args: {
+    value: "checkbox",
+  },
 };

packages/wow-ui/src/components/Checkbox/Checkbox.test.tsx

@@ -7,7 +7,11 @@ import Checkbox from "./index";
 
 describe("Checkbox component", () => {
   const renderCheckbox = (props: Partial<CheckboxProps> = {}): RenderResult => {
-    return render(<Checkbox {...props}>Text</Checkbox>);
+    return render(
+      <Checkbox value="checkbox" {...props}>
+        Text
+      </Checkbox>
+    );
   };
 
   test("toggles checked state when clicked", async () => {

packages/wow-ui/src/components/Checkbox/index.tsx

@@ -18,6 +18,7 @@ import { useCheckedState } from "@/hooks";
  * @param {boolean} [defaultChecked=false] 체크박스가 처음에 활성화되어 있는지 여부.
  * @param {boolean} [disabled=false] 체크박스가 비활성화되어 있는지 여부.
  * @param {boolean} [checked] 외부에서 제어할 활성 상태.
+ * @param {string} value 체크박스 값.
  * @param {() => void} [onChange] 외부 활성 상태가 변경될 때 호출되는 함수.
  * @param {() => void} [onClick] 체크박스 클릭 시 호출되는 함수.
  * @param {() => void} [onKeyDown] 체크박스에 포커스 됐을 때 엔터 키 또는 스페이스 바를 눌렀을 때 호출되는 함수.
@@ -35,6 +36,7 @@ export interface CheckboxProps extends PropsWithChildren {
   defaultChecked?: boolean;
   disabled?: boolean;
   checked?: boolean;
+  value?: string;
   onChange?: () => void;
   onClick?: () => void;
   onKeyDown?: () => void;
@@ -50,8 +52,9 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
   (
     {
       defaultChecked = false,
-      disabled = false,
+      disabled: disabledProp = false,
       checked: checkedProp,
+      value = "checkbox",
       onClick,
       onChange,
       children,
@@ -68,6 +71,7 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
     const {
       checked,
       pressed,
+      disabled,
       handleClick,
       handleKeyDown,
       handleKeyUp,
@@ -76,7 +80,8 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
     } = useCheckedState({
       defaultChecked,
       checked: checkedProp,
-      disabled,
+      disabled: disabledProp,
+      value,
       onChange,
       onClick,
       onKeyDown,
@@ -112,7 +117,8 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
               type: disabled ? "disabled" : checked ? "checked" : "default",
             })}
             {...inputProps}
-            onClick={handleClick}
+            value={value}
+            onClick={() => handleClick(value)}
           />
           {checked && (
             <styled.span