[Feature] SwitchGroup 컴포넌트 구현

packages/wow-ui/package.json

@@ -21,12 +21,12 @@
   "exports": {
     "./styles.css": "./dist/styles.css",
     "./Box": {
-      "types": "./dist/Box/index.d.ts",
+      "types": "./dist/components/Box/index.d.ts",
       "require": "./dist/Box.cjs",
       "import": "./dist/Box.js"
     },
     "./Button": {
-      "types": "./dist/Button/index.d.ts",
+      "types": "./dist/components/Button/index.d.ts",
       "require": "./dist/Button.cjs",
       "import": "./dist/Button.js"
     },
@@ -36,9 +36,14 @@
       "import": "./dist/Toggle.js"
     },
     "./Switch": {
-      "types": "./dist/Switch/index.d.ts",
+      "types": "./dist/components/Switch/index.d.ts",
       "require": "./dist/Switch.cjs",
       "import": "./dist/Switch.js"
+    },
+    "./SwitchGroup": {
+      "types": "./dist/components/SwitchGroup/index.d.ts",
+      "require": "./dist/SwitchGroup.cjs",
+      "import": "./dist/SwitchGroup.js"
     }
   },
   "keywords": [],

packages/wow-ui/rollup.config.js

@@ -23,6 +23,7 @@ export default {
     Box: "./src/components/Box",
     Button: "./src/components/Button",
     Switch: "./src/components/Switch",
+    SwitchGroup: "./src/components/SwitchGroup",
   },
   output: [
     {

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

@@ -58,19 +58,19 @@ const meta = {
       table: {
         type: { summary: "() => void" },
         defaultValue: { summary: null },
-        control: {
-          type: "function",
-        },
+      },
+      control: {
+        type: "function",
       },
     },
     onClick: {
       description: "스위치 클릭 시 동작할 이벤트입니다.",
       table: {
         type: { summary: "() => void" },
         defaultValue: { summary: null },
-        control: {
-          type: "function",
-        },
+      },
+      control: {
+        type: "function",
       },
     },
     onKeyDown: {
@@ -79,9 +79,9 @@ const meta = {
       table: {
         type: { summary: "() => void" },
         defaultValue: { summary: null },
-        control: {
-          type: "function",
-        },
+      },
+      control: {
+        type: "function",
       },
     },
   },

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

@@ -3,7 +3,7 @@ import fireEvent from "@testing-library/user-event";
 
 import Switch from "@/components/Switch";
 
-describe("toggle", () => {
+describe("switch", () => {
   let rendered: RenderResult;
 
   beforeEach(() => {

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

@@ -3,7 +3,7 @@
 import { cva } from "@styled-system/css";
 import { Flex, styled } from "@styled-system/jsx";
 import type { ComponentPropsWithRef, KeyboardEvent, ReactNode } from "react";
-import { forwardRef, useEffect, useState } from "react";
+import { forwardRef, useEffect, useId, useState } from "react";
 
 /**
  * @template T 렌더링할 요소 또는 컴포넌트 타입
@@ -62,6 +62,8 @@ const Switch = forwardRef(
       isCheckedProp ? isCheckedProp : defaultChecked
     );
 
+    const id = useId();
+
     useEffect(() => {
       if (isCheckedProp !== undefined) {
         setIsChecked(isCheckedProp);
@@ -85,13 +87,13 @@ const Switch = forwardRef(
     return (
       <Flex alignItems="center" gap="0.5rem">
         <styled.label
-          htmlFor="switch"
+          htmlFor={`switch-${id}`}
           className={switchStyle({
             type: isDisabled ? "disabled" : isChecked ? "checked" : "unchecked",
           })}
         >
           <input
-            id="switch"
+            id={`switch-${id}`}
             ref={ref}
             {...rest}
             aria-checked={isChecked}

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

@@ -0,0 +1,95 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+
+import Switch from "@/components/Switch";
+import SwitchGroup from "@/components/SwitchGroup";
+
+const meta = {
+  title: "UI/SwitchGroup",
+  component: SwitchGroup,
+  tags: ["autodocs"],
+  parameters: {
+    componentSubtitle: "스위치 그룹 컴포넌트",
+  },
+  argTypes: {
+    children: {
+      description: "렌더링할 자식 요소를 나타냅니다.",
+      table: {
+        type: { summary: "ReactNode" },
+        defaultValue: { summary: null },
+      },
+      control: {
+        type: "function",
+      },
+      type: {
+        name: "function",
+        required: true,
+      },
+    },
+    value: {
+      description: "value는 외부에서 제어할 활성 상태를 나타냅니다.",
+      table: {
+        type: { summary: "boolean[]" },
+        defaultValue: { summary: null },
+      },
+      control: {
+        type: "array",
+      },
+    },
+    onChange: {
+      description: "외부 활성 상태가 변경될 때 호출될 콜백 함수를 나타냅니다.",
+      table: {
+        type: { summary: "(index: number) => void" },
+        defaultValue: { summary: null },
+      },
+      control: {
+        type: "function",
+      },
+    },
+  },
+} satisfies Meta<typeof SwitchGroup>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    children: (
+      <>
+        <Switch text="Switch 1" />
+        <Switch isDisabled text="Switch 2" />
+        <Switch text="Switch 3" />
+      </>
+    ),
+  },
+};
+
+const ControlledSwitchGroup = () => {
+  const [isCheckedState, setIsCheckedState] = useState<boolean[]>([
+    false,
+    true,
+    false,
+  ]);
+
+  const handleChange = (index: number) => {
+    setIsCheckedState((prev) =>
+      prev.map((prevState, i) => (index === i ? !prevState : prevState))
+    );
+  };
+
+  return (
+    <SwitchGroup value={isCheckedState} onChange={handleChange}>
+      <Switch isDisabled text="Switch 1" />
+      <Switch text="Switch 2" />
+      <Switch text="Switch 3" />
+    </SwitchGroup>
+  );
+};
+
+export const ControlledState: Story = {
+  render: () => <ControlledSwitchGroup />,
+  args: {
+    children: null,
+  },
+};

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

@@ -0,0 +1,110 @@
+import type { RenderResult } from "@testing-library/react";
+import { render, waitFor } from "@testing-library/react";
+import fireEvent from "@testing-library/user-event";
+
+import Switch from "@/components/Switch";
+import SwitchGroup from "@/components/SwitchGroup";
+
+describe("switch group", () => {
+  let rendered: RenderResult;
+
+  beforeEach(() => {
+    rendered = render(
+      <SwitchGroup>
+        <Switch text="Switch 1" />
+        <Switch isDisabled text="Switch 2" />
+        <Switch text="Switch 3" />
+      </SwitchGroup>
+    );
+  });
+
+  it("should render switch components with its own state", () => {
+    const switchComponents = rendered.getAllByRole("checkbox");
+
+    expect(switchComponents[0]).toHaveAttribute("aria-checked", "false");
+    expect(switchComponents[1]).toHaveAttribute("aria-disabled", "true");
+    expect(switchComponents[2]).toHaveAttribute("aria-checked", "false");
+  });
+});
+
+describe("with external value provided", () => {
+  it("should render switch components with external value provided", () => {
+    const rendered = render(
+      <SwitchGroup value={[true, false, true]}>
+        <Switch text="Switch 1" />
+        <Switch text="Switch 2" />
+        <Switch text="Switch 3" />
+      </SwitchGroup>
+    );
+    const switchComponents = rendered.getAllByRole("checkbox");
+
+    expect(switchComponents[0]).toHaveAttribute("aria-checked", "true");
+    expect(switchComponents[1]).toHaveAttribute("aria-checked", "false");
+    expect(switchComponents[2]).toHaveAttribute("aria-checked", "true");
+  });
+
+  it("should render switch components with default unchecked value provided", () => {
+    const rendered = render(
+      <SwitchGroup value={[]}>
+        <Switch text="Switch 1" />
+        <Switch text="Switch 2" />
+        <Switch text="Switch 3" />
+      </SwitchGroup>
+    );
+    const switchComponents = rendered.getAllByRole("checkbox");
+
+    expect(switchComponents[0]).toHaveAttribute("aria-checked", "false");
+    expect(switchComponents[1]).toHaveAttribute("aria-checked", "false");
+    expect(switchComponents[2]).toHaveAttribute("aria-checked", "false");
+  });
+
+  it("should toggle state when onChange event fired", async () => {
+    const checkedStates = [true, false, true];
+    const handleChange = jest.fn((index: number) => {
+      checkedStates[index] = !checkedStates[index];
+    });
+    const rendered = render(
+      <SwitchGroup value={checkedStates} onChange={handleChange}>
+        <Switch text="Switch 1" />
+        <Switch text="Switch 2" />
+        <Switch text="Switch 3" />
+      </SwitchGroup>
+    );
+    const switchComponents = rendered.getAllByRole("checkbox");
+
+    fireEvent.click(switchComponents[0]!);
+    fireEvent.click(switchComponents[1]!);
+    fireEvent.click(switchComponents[2]!);
+
+    await waitFor(() => {
+      expect(checkedStates[0]).toBe(false);
+      expect(checkedStates[1]).toBe(true);
+      expect(checkedStates[2]).toBe(false);
+    });
+  });
+
+  it("should not toggle state when toggle is disabled", async () => {
+    const checkedStates = [true, false, true];
+    const handleChange = jest.fn((index: number) => {
+      checkedStates[index] = !checkedStates[index];
+    });
+    const rendered = render(
+      <SwitchGroup value={checkedStates} onChange={handleChange}>
+        <Switch text="Switch 1" />
+        <Switch isDisabled text="Switch 2" />
+        <Switch text="Switch 3" />
+      </SwitchGroup>
+    );
+    const switchComponents = rendered.getAllByRole("checkbox");
+
+    fireEvent.click(switchComponents[0]!);
+    fireEvent.click(switchComponents[1]!);
+    fireEvent.click(switchComponents[2]!);
+
+    await waitFor(() => {
+      expect(checkedStates[0]).toBe(false);
+      expect(checkedStates[1]).toBe(false);
+      expect(checkedStates[2]).toBe(false);
+    });
+  });
+});