[Refactor] Switch 컴포넌트 리팩토링 (#54)

* refactor: useCheckedState 훅 리팩토링

* chore: Checkbox 문서 수정

* refactor: Switch 컴포넌트 리팩토링

* chore: Switch 컴포넌트 변경 사항 반영

* fix: 이벤트 핸들러 label로 이동

* chore: disabled 시 cursor default로 변경

* chore: inputProps, rest 속성 전달 위치 변경

* chore: rest props flex로 이동

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>;
 

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

@@ -18,15 +18,15 @@ 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 {() => 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.

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

@@ -12,8 +12,7 @@ const meta = {
   },
   argTypes: {
     defaultChecked: {
-      description:
-        "defaultChecked는 스위치가 처음에 활성화되어 있는지 여부를 나타냅니다.",
+      description: "스위치가 처음에 활성화되어 있는지 여부를 나타냅니다.",
       table: {
         type: { summary: "boolean" },
         defaultValue: { summary: "false" },
@@ -22,9 +21,8 @@ const meta = {
         type: "boolean",
       },
     },
-    isDisabled: {
-      description:
-        "isDisabled는 스위치가 비활성화되어 있는지 여부를 나타냅니다.",
+    disabled: {
+      description: "스위치가 비활성화되어 있는지 여부를 나타냅니다.",
       table: {
         type: { summary: "boolean" },
         defaultValue: { summary: "false" },
@@ -33,8 +31,8 @@ const meta = {
         type: "boolean",
       },
     },
-    isChecked: {
-      description: "isChecked는 외부에서 제어할 활성 상태를 나타냅니다.",
+    checked: {
+      description: "외부에서 제어할 활성 상태를 나타냅니다.",
       table: {
         type: { summary: "boolean" },
         defaultValue: { summary: "false" },
@@ -54,7 +52,7 @@ const meta = {
       },
     },
     onChange: {
-      description: "외부 활성 상태가 변경될 때 호출될 콜백 함수를 나타냅니다.",
+      description: "외부 활성 상태가 변경될 때 호출되는 함수입니다.",
       table: {
         type: { summary: "() => void" },
         defaultValue: { summary: null },
@@ -64,7 +62,7 @@ const meta = {
       },
     },
     onClick: {
-      description: "스위치 클릭 시 동작할 이벤트입니다.",
+      description: "스위치를 클릭했을 때 호출되는 함수입니다.",
       table: {
         type: { summary: "() => void" },
         defaultValue: { summary: null },
@@ -75,7 +73,7 @@ const meta = {
     },
     onKeyDown: {
       description:
-        "스위치가 포커스됐을 때 엔터 키 또는 스페이스 바를 눌렀을 때 동작할 이벤트입니다.",
+        "스위치가 포커스됐을 때 엔터 키 또는 스페이스 바를 눌렀을 때 호출되는 함수입니다.",
       table: {
         type: { summary: "() => void" },
         defaultValue: { summary: null },
@@ -84,6 +82,52 @@ const meta = {
         type: "function",
       },
     },
+    onMouseEnter: {
+      description: "마우스가 스위치 위로 진입할 때 호출되는 함수입니다.",
+      table: {
+        type: { summary: "() => void" },
+        defaultValue: { summary: null },
+        control: {
+          type: "function",
+        },
+      },
+    },
+    onMouseLeave: {
+      description: "마우스가 스위치에서 벗어날 때 호출되는 함수입니다.",
+      table: {
+        type: { summary: "() => void" },
+        defaultValue: { summary: null },
+        control: {
+          type: "function",
+        },
+      },
+    },
+    inputProps: {
+      description:
+        "스위치의 기본 input 요소에 전달할 추가 속성들을 나타냅니다.",
+      table: {
+        type: { summary: "InputHTMLAttributes<HTMLInputElement>" },
+        defaultValue: { summary: "{}" },
+      },
+      control: false,
+    },
+    style: {
+      description: "스위치의 커스텀 스타일을 설정합니다.",
+      table: {
+        type: { summary: "CSSProperties" },
+        defaultValue: { summary: "{}" },
+      },
+      control: false,
+    },
+    className: {
+      description: "스위치에 전달하는 커스텀 클래스를 설정합니다.",
+      table: {
+        type: { summary: "string" },
+      },
+      control: {
+        type: "text",
+      },
+    },
   },
 } satisfies Meta<typeof Switch>;
 
@@ -103,7 +147,7 @@ export const DefaultChecked: Story = {
 
 export const Disabled: Story = {
   args: {
-    isDisabled: true,
+    disabled: true,
   },
 };
 
@@ -114,13 +158,13 @@ export const WithText: Story = {
 };
 
 const ControlledSwitch = () => {
-  const [isChecked, setIsChecked] = useState(false);
+  const [checked, setChecked] = useState(false);
 
   const handleChange = () => {
-    setIsChecked((prev) => !prev);
+    setChecked((prev) => !prev);
   };
 
-  return <Switch isChecked={isChecked} onChange={handleChange} />;
+  return <Switch checked={checked} onChange={handleChange} />;
 };
 
 export const ControlledState: Story = {

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

@@ -76,7 +76,7 @@ describe("disabled", () => {
   let rendered: RenderResult;
 
   beforeEach(() => {
-    rendered = render(<Switch isDisabled />);
+    rendered = render(<Switch disabled />);
   });
 
   it("should render with attributes aria-disabled to be true", () => {
@@ -155,11 +155,11 @@ describe("external control and events", () => {
   });
 
   it("should toggle external checked state when onClick event fired", async () => {
-    let isChecked = false;
+    let checked = false;
     const handleChange = () => {
-      isChecked = !isChecked;
+      checked = !checked;
     };
-    const rendered = render(<Switch isChecked={isChecked} />);
+    const rendered = render(<Switch checked={checked} />);
     const switchComponent = rendered.getByRole("checkbox");
     switchComponent.onchange = handleChange;