fix(checkbox): resolve indeterminate state issue

packages/checkbox/src/Checkbox.module.css

@@ -13,17 +13,8 @@
   border: var(--border-width) solid var(--border-color);
   border-radius: var(--border-radius);
   background-color: var(--background-color);
-
 }
 
-.checkbox-input:checked {
-  background-color: var(--checked-color);
-  border-color: var(--checked-color);
-  background-image: var(--background-image);
-  background-size: var(--background-size);
-  background-position: var(--background-position);
-  background-repeat: var(--background-repeat);
-}
 
 .checkbox-input:disabled {
   background-color: var(--disabled-color);
@@ -40,11 +31,18 @@
   opacity: 0.6;
 }
 
-.checkbox-input:indeterminate {
+.checkbox-input:is(:checked, :indeterminate) {
   background-color: var(--checked-color);
   border-color: var(--checked-color);
-  background-image: var(--background-image);
   background-size: var(--background-size);
   background-position: var(--background-position);
   background-repeat: var(--background-repeat);
+}
+
+.checkbox-input:checked {
+  background-image: var(--checked-icon);
+}
+
+.checkbox-input:indeterminate {
+  background-image: var(--indeterminate-icon);
 }

packages/checkbox/src/Checkbox.stories.tsx

@@ -2,7 +2,6 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { useState } from 'react';
 import { Checkbox } from './Checkbox';
 import { useCheckboxGroup } from './hooks/useCheckboxGroup';
-import CheckboxIcon from './images/checkbox-icon.svg';
 
 const meta = {
   title: 'Checkbox',
@@ -75,13 +74,9 @@ export const customStyles: Story = {
     label: 'Custom Styled Checkbox',
     style: {
       padding: '20px',
-      border: '2px solid #007bff',
+      border: '2px solid #f8f',
       borderRadius: '10px',
       backgroundColor: '#f8f9fa',
-      // backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/%3E%3C/svg%3E")`,
-      // backgroundSize: '75%',
-      // backgroundPosition: 'center',
-      // backgroundRepeat: 'no-repeat',
     },
     value: 'test',
     name: 'test',
@@ -166,6 +161,8 @@ export const Indeterminate: Story = {
       updateParentState(newChildChecked);
     };
 
+    console.log('parent indeterminate 확인: ', parentIndeterminate);
+
     return (
       <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
         <Checkbox

packages/checkbox/src/Checkbox.tsx

@@ -10,11 +10,10 @@ import {
 
 import styles from './Checkbox.module.css';
 import {
-  CHECKBOX_SIZES,
-  type CheckboxSize,
-  type CheckboxStyleConfig,
-  DEFAULT_CHECKBOX_STYLE,
-} from './constants/size';
+  type CheckStyleConfig,
+  DEFAULT_CHECK_STYLE,
+} from './constants/checkStyle';
+import { CHECKBOX_SIZES, type CheckboxSize } from './constants/size';
 import { generateId } from './utils/generateId';
 
 // ////////////////////////////////////////////////////////////////////////////////
@@ -32,7 +31,7 @@ export interface CheckboxProps extends ComponentProps<'div'> {
   asChild?: boolean;
   innerRef?: React.RefObject<HTMLDivElement>;
   children?: ReactNode;
-  styleConfig?: Partial<CheckboxStyleConfig>;
+  checkStyleConfig?: Partial<CheckStyleConfig>;
 }
 
 // ////////////////////////////////////////////////////////////////////////////////
@@ -52,7 +51,7 @@ export const Checkbox = ({
   children,
   style: _style,
   innerRef,
-  styleConfig = {},
+  checkStyleConfig = {},
   ...props
 }: CheckboxProps) => {
   const localRef = useRef<HTMLDivElement>(null);
@@ -74,7 +73,7 @@ export const Checkbox = ({
   };
 
   const sizeConfig = CHECKBOX_SIZES[size];
-  const mergedStyleConfig = { ...DEFAULT_CHECKBOX_STYLE, ...styleConfig };
+  const mergedStyleConfig = { ...DEFAULT_CHECK_STYLE, ...checkStyleConfig };
 
   const style = {
     '--checkbox-size': `${sizeConfig.checkboxSize}px`,
@@ -88,7 +87,8 @@ export const Checkbox = ({
     '--checked-color': mergedStyleConfig.checkedColor,
     '--disabled-color': mergedStyleConfig.disabledColor,
     '--hover-color': mergedStyleConfig.hoverColor,
-    '--background-image': mergedStyleConfig.backgroundImage,
+    '--checked-icon': `url(${mergedStyleConfig.checkedIcon})`,
+    '--indeterminate-icon': `url(${mergedStyleConfig.indeterminateIcon})`,
     '--background-size': mergedStyleConfig.backgroundSize,
     '--background-position': mergedStyleConfig.backgroundPosition,
     '--background-repeat': mergedStyleConfig.backgroundRepeat,

packages/checkbox/src/constants/checkStyle.ts

@@ -1,15 +1,19 @@
+import CheckboxIcon from '../images/checkbox-icon.svg';
+import minusIcon from '../images/minus-icon.svg';
+
 export interface CheckStyleConfig {
-  borderRadius?: string | number;
-  borderWidth?: number;
-  borderColor?: string;
-  backgroundColor?: string;
-  checkedColor?: string;
-  disabledColor?: string;
-  hoverColor?: string;
-  backgroundImage?: string;
-  backgroundSize?: string;
-  backgroundPosition?: string;
-  backgroundRepeat?: string;
+  borderRadius: number;
+  borderWidth: number;
+  borderColor: string;
+  backgroundColor: string;
+  checkedColor: string;
+  disabledColor: string;
+  hoverColor: string;
+  checkedIcon: string;
+  indeterminateIcon: string;
+  backgroundSize: string;
+  backgroundPosition: string;
+  backgroundRepeat: string;
 }
 
 export const DEFAULT_CHECK_STYLE: CheckStyleConfig = {
@@ -20,7 +24,8 @@ export const DEFAULT_CHECK_STYLE: CheckStyleConfig = {
   checkedColor: '#3B82F6',
   disabledColor: '#E5E7EB',
   hoverColor: '#F3F4F6',
-  backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/%3E%3C/svg%3E")`,
+  checkedIcon: CheckboxIcon,
+  indeterminateIcon: minusIcon,
   backgroundSize: '100%',
   backgroundPosition: 'center',
   backgroundRepeat: 'no-repeat',