refactor(#38): CheckBox 컴포넌트 스타일 수정 및 JSDoc 수정

Author: wkdtnqls0506

src/components/ui/CheckBox/CheckBox.css.ts

@@ -5,26 +5,36 @@ import { semantic } from "@/styles";
 
 export const checkboxWrapper = recipe({
   base: {
-    width: "24px",
-    height: "24px",
+    width: "2.4rem",
+    height: "2.4rem",
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
     cursor: "pointer",
     borderRadius: "4.8px",
-    transition: "background-color 0.2s ease-in-out",
+    transition: "background-color 0.2s ease-in-out, color 0.2s ease-in-out",
   },
   variants: {
     hasBackground: {
-      true: { backgroundColor: semantic.icon.disabled },
-      false: { backgroundColor: "transparent" },
+      true: {
+        backgroundColor: semantic.icon.disabled,
+      },
+      false: {
+        backgroundColor: "transparent",
+      },
     },
     checked: {
-      true: { color: semantic.icon.white },
-      false: { color: semantic.icon.white },
+      true: {},
+      false: {},
     },
   },
   compoundVariants: [
+    {
+      variants: { hasBackground: true, checked: false },
+      style: {
+        color: semantic.icon.white,
+      },
+    },
     {
       variants: { hasBackground: true, checked: true },
       style: {
@@ -47,6 +57,7 @@ export const checkboxWrapper = recipe({
   ],
   defaultVariants: {
     hasBackground: true,
+    checked: false,
   },
 });
 

src/components/ui/CheckBox/CheckBox.tsx

@@ -31,11 +31,15 @@ type CheckBoxProps = {
 
 /**
  * CheckBox UI 컴포넌트
- *
- * @param {boolean} checked - 체크박스의 체크 상태
- * @param {boolean} [hasBackground=true] - 배경색 포함 여부
- * @param {function} onCheckedChange - 체크 상태 변경 콜백
- * @param {string} [className] - 추가 CSS 클래스
+ * @example
+ * ```tsx
+ * <CheckBox
+ *   checked={checked}
+ *   onCheckedChange={setChecked}
+ *   hasBackground={true}       // 기본값이 true 이므로 생략 가능
+ *   className="my-custom-class" // 추가 스타일링이 필요할 때
+ * />
+ * ```
  */
 export const CheckBox = ({
   checked,