[Feature] MultiGroup 컴포넌트 개발

apps/wow-docs/app/page.tsx

@@ -1,19 +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/package.json

@@ -1,6 +1,5 @@
 {
   "name": "codegen",
-  "version": "0.0.0",
   "description": "",
   "main": "index.js",
   "type": "module",

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

@@ -23,6 +23,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

@@ -23,8 +23,7 @@ const meta = {
       },
     },
     disabled: {
-      description:
-        "disabled는 체크박스가 비활성화되어 있는지 여부를 나타냅니다.",
+      description: "체크박스가 비활성화되어 있는지 여부를 나타냅니다.",
       table: {
         type: { summary: "boolean" },
         defaultValue: { summary: "false" },
@@ -34,7 +33,7 @@ const meta = {
       },
     },
     checked: {
-      description: "checked는 외부에서 제어할 활성 상태를 나타냅니다.",
+      description: "외부에서 제어할 활성 상태를 나타냅니다.",
       table: {
         type: { summary: "boolean" },
       },
@@ -51,7 +50,7 @@ const meta = {
       control: false,
     },
     onChange: {
-      description: "외부 활성 상태가 변경될 때 호출될 콜백 함수를 나타냅니다.",
+      description: "외부 활성 상태가 변경될 때 호출되는 함수입니다.",
       table: {
         type: { summary: "() => void" },
         defaultValue: { summary: null },
@@ -61,7 +60,7 @@ const meta = {
       },
     },
     onClick: {
-      description: "체크박스 클릭 시 동작할 이벤트입니다.",
+      description: "체크박스 클릭 시 호출되는 함수입니다.",
       table: {
         type: { summary: "() => void" },
         defaultValue: { summary: null },
@@ -72,7 +71,7 @@ const meta = {
     },
     onKeyDown: {
       description:
-        "체크박스에 포커스 됐을 때 엔터 키 또는 스페이스 바를 눌렀을 때 동작할 이벤트입니다.",
+        "체크박스에 포커스 됐을 때 엔터 키 또는 스페이스 바를 눌렀을 때 호출되는 함수입니다.",
       table: {
         type: { summary: "() => void" },
         defaultValue: { summary: null },
@@ -130,6 +129,15 @@ const meta = {
       },
       control: false,
     },
+    className: {
+      description: "체크박스에 전달하는 커스텀 클래스를 설정합니다.",
+      table: {
+        type: { summary: "string" },
+      },
+      control: {
+        type: "text",
+      },
+    },
   },
 } satisfies Meta<typeof Checkbox>;
 
@@ -140,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",
   },
 };
 
@@ -160,6 +171,7 @@ export const Vertical: Story = {
     checked: true,
     children: "string",
     position: "vertical",
+    value: "checkbox",
   },
 };
 
@@ -168,6 +180,7 @@ export const Horizontal: Story = {
     checked: true,
     children: "string",
     position: "horizontal",
+    value: "checkbox",
   },
 };
 
@@ -178,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,15 +18,16 @@ import { useCheckedState } from "@/hooks";
  * @param {boolean} [defaultChecked=false] 체크박스가 처음에 활성화되어 있는지 여부.
  * @param {boolean} [disabled=false] 체크박스가 비활성화되어 있는지 여부.
  * @param {boolean} [checked] 외부에서 제어할 활성 상태.
- * @param {() => void} [onChange] 외부 활성 상태가 변경될 때 호출될 콜백 함수.
- * @param {() => void} [onClick] 체크박스 클릭 시 동작할 이벤트.
- * @param {() => void} [onKeyDown] 체크박스에 포커스 됐을 때 엔터 키 또는 스페이스 바를 눌렀을 때 동작할 이벤트.
+ * @param {string} value 체크박스 값.
+ * @param {() => void} [onChange] 외부 활성 상태가 변경될 때 호출되는 함수.
+ * @param {() => void} [onClick] 체크박스 클릭 시 호출되는 함수.
+ * @param {() => void} [onKeyDown] 체크박스에 포커스 됐을 때 엔터 키 또는 스페이스 바를 눌렀을 때 호출되는 함수.
  * @param {() => void} [onMouseEnter] 마우스가 체크박스 위로 진입할 때 호출되는 함수.
  * @param {() => void} [onMouseLeave] 마우스가 체크박스에서 벗어날 때 호출되는 함수.
  * @param {"vertical" | "horizontal"} [position="horizontal"] 체크박스와 텍스트의 배치를 설정. 'vertical' 또는 'horizontal' 값을 가집니다.
  * @param {InputHTMLAttributes<HTMLInputElement>} [inputProps] 체크박스의 기본 input 요소에 전달할 추가 속성들.
- * @param {CSSProperties} [style] 체크박스의 커스텀 스타일을 설정합니다.
- * @param {string} [className] 체크박스에 전달하는 커스텀 클래스를 설정합니다.
+ * @param {CSSProperties} [style] 체크박스의 커스텀 스타일.
+ * @param {string} [className] 체크박스에 전달하는 커스텀 클래스.
  * @param {React.ReactNode} [children] 체크박스 오른쪽이나 위쪽에 들어갈 텍스트.
  * @param {ComponentPropsWithoutRef<T>} rest 렌더링된 요소 또는 컴포넌트에 전달할 추가 props.
  * @param {ComponentPropsWithRef<T>["ref"]} ref 렌더링된 요소 또는 컴포넌트에 연결할 ref.
@@ -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