> For the complete documentation index, see [llms.txt](https://tech.x2bee.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tech.x2bee.com/dev-guide/pjt-prepare/publish-your-docs/store-front-framewok-next.js/03./2.-checkbox.md).

# 2. Checkbox

이 문서는 로컬 아이콘을 사용하여 체크박스에 아이콘을 적용하는 방법에 대한 가이드입니다.

{% stepper %}
{% step %}

### 1) 로컬 아이콘 준비

checkbox에 사용할 아이콘을 `src/assets/icons/` 폴더에 저장합니다. (폴더 이름은 자유)

<div align="left"><figure><img src="/files/TiBFiSBGH1iF8cIgBnDw" alt="" width="252"><figcaption></figcaption></figure></div>
{% endstep %}

{% step %}

### 2) tailwind.config.js 설정

`tailwind.config.js`에 다음과 같이 backgroundImage를 추가합니다. (경로와 파일명은 프로젝트에 맞게 수정)

{% code title="tailwind.config.js" %}

```
```

{% endcode %}

```js
theme: {
  extend: {
    backgroundImage: {
      'icon-checkbox': "url('~/src/assets/icons/ico_checkbox.svg')",
      'icon-checkbox-on': "url('~/src/assets/icons/ico_checkbox_on.svg')",
      'icon-checkbox-dis': "url('~/src/assets/icons/ico_checkbox_dis.svg')",
    },
  }
}
```

이제 아이콘 이미지를 커스텀 유틸리티 클래스(background-image)로 사용할 수 있습니다.
{% endstep %}

{% step %}

### 3) CSS 파일 분리 및 import

`src/app/globals.css`에 직접 추가해도 되지만 리팩토링을 위해 `src/assets/css/checkbox.css` 파일을 생성하고, `globals.css`에서 import 합니다:

<div align="left"><figure><img src="/files/2CxLM4zWhRVkFn2CLiwR" alt="" width="278"><figcaption></figcaption></figure></div>

```
@import url('../assets/css/checkbox.css');
```

```
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  input {
    @apply appearance-none;
  }
}

@layer components {
  .checkbox {
    @apply mx-2 inline-block h-6 w-6 shrink-0 cursor-pointer bg-icon-checkbox bg-contain bg-center bg-no-repeat align-middle checked:bg-icon-checkbox-on disabled:bg-icon-checkbox-dis;
  }
}
```

설명:

* 기본 Tailwind reset에서 input 태그를 완전히 초기화하지 않으므로 `@apply appearance-none;`로 다시 리셋합니다.
* `.checkbox` 클래스에 앞서 설정한 background-image 유틸리티를 사용합니다.&#x20;

### 5) 컴포넌트 내 사용 예시

React(또는 Next.js) 컴포넌트 예시:

```jsx
const CheckBox = () => {
  return (
    <div className="inline-flex gap-4 rounded-lg border border-gray-400 bg-white p-8">
      <div>
        <input className="checkbox" id="chk1" type="checkbox" />
        <label htmlFor="chk1">label</label>
      </div>
      <div>
        <input className="checkbox" id="chk2" type="checkbox" disabled={true} />
        <label htmlFor="chk2">disabled</label>
      </div>
    </div>
  );
};

export default CheckBox;
```

{% endstep %}

{% step %}

### 6) 결과

#### local icons <a href="#local-icons.1" id="local-icons.1"></a>

checkbox에 사용할 icon을 src/assets/icons/ 폴더에 저장합니다. (폴더 이름은 자유)

<img src="https://blog.kakaocdn.net/dn/NaapR/btsBY2VsgPa/hHX3xKeEVcsTkbzlPKcOfK/img.png" alt="" width="375">

#### config <a href="#config.1" id="config.1"></a>

tailwind.config.js에 다음 코드를 추가합니다.

```
 theme: {
    extend: {
      backgroundImage: {
        'icon-checkbox': "url('~/src/assets/icons/ico_checkbox.svg')",
        'icon-checkbox-on': "url('~/src/assets/icons/ico_checkbox_on.svg')",
        'icon-checkbox-dis': "url('~/src/assets/icons/ico_checkbox_dis.svg')",
      },
```

이제 아이콘 이미지를 custom utility class로 사용할 수 있습니다.

#### css <a href="#css.1" id="css.1"></a>

src/app/globals.css 에 코드를 추가해도 되지만,

refactoring을 위해 src/assets/css/checkbox.css 파일 생성하고,

<div align="left"><img src="https://blog.kakaocdn.net/dn/cpPumY/btsB1JHEwvM/MU0aneh0dLFj6i2BjWpWqk/img.png" alt="" width="375"></div>

src/app/globals.css에서 import 합니다.

`@import url('../assets/css/checkbox.css');`

&#x20;

다시 checkbox.css로 돌아와 위에서 정의한 utility class를 다음과 같이 작성합니다.

그리고 tailwind css 기본 reset css에서 input tag를 완전히 reset 시켜주지 않으므로 여기서 다시 reset 합니다.

```
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  input {
    @apply appearance-none;
  }
}

@layer components {
  .checkbox {
    @apply mx-2 inline-block h-6 w-6 shrink-0 cursor-pointer bg-icon-checkbox bg-contain bg-center bg-no-repeat align-middle checked:bg-icon-checkbox-on disabled:bg-icon-checkbox-dis;
  }
}
```

#### component내에서 사용 예시 <a href="#component-.1" id="component-.1"></a>

```
const CheckBox = () => {
  return (
    <div className="inline-flex gap-4 rounded-lg border border-gray-400 bg-white p-8">
      <div>
        <input className="checkbox" id="chk1" type="checkbox" />
        <label htmlFor="chk1">label</label>
      </div>
      <div>
        <input className="checkbox" id="chk2" type="checkbox" disabled={true} />
        <label htmlFor="chk2">disabled</label>
      </div>
    </div>
  );
};

export default CheckBox;
```

#### 결과 <a href="#id-1" id="id-1"></a>

<img src="https://tech.x2bee.com/download/attachments/196706477/image-20231217-193338.png?version=1&#x26;modificationDate=1702841622953&#x26;cacheVersion=1&#x26;api=v2" alt="" width="375">
{% endstep %}
{% endstepper %}