칩

태그, 레이블, 카테고리 등을 표시하는 칩 컴포넌트입니다.

개요

칩은 작고 컴팩트한 요소로 태그, 카테고리, 상태 등을 표현할 때 사용됩니다.

기본 예제

레이블

basic.html

<!-- Default theme (클래스 생략 가능) -->
<div class="chip">
  <i class="icon icon-ellipse"></i>
  레이블
</div>

<!-- 다른 컬러 테마 -->
<div class="chip blue">
  <i class="icon icon-ellipse"></i>
  레이블
</div>

타입

칩은 세 가지 타입을 제공합니다: default (진한 배경), fill (옅은 배경), border (테두리만).

Default 타입 (진한 배경)

레이블

Fill 타입 (옅은 배경)

레이블

Border 타입 (테두리)

레이블

type.html

<!-- Default type (진한 배경 - 클래스 생략) -->
<div class="chip blue">
  <i class="icon icon-ellipse"></i>
  레이블
</div>

<!-- Fill type (옅은 배경) -->
<div class="chip fill blue">
  <i class="icon icon-ellipse"></i>
  레이블
</div>

<!-- Border type (테두리만) -->
<div class="chip border blue">
  <i class="icon icon-ellipse"></i>
  레이블
</div>

크기

칩은 sm (작은)과 md (기본) 크기를 지원합니다.

크기 비교

작은 크기

기본 크기

size.html

<div class="chip sm blue">
  <i class="icon icon-ellipse"></i>
  작은 크기
</div>

<div class="chip blue">
  <i class="icon icon-ellipse"></i>
  기본 크기
</div>

아이콘

칩에 아이콘을 추가하여 시각적 정보를 제공할 수 있습니다.

아이콘 없이

레이블

기본 아이콘 (ellipse)

레이블

커스텀 아이콘

사용자

성공

경고

에러

icon.html

<!-- 아이콘 없이 -->
<div class="chip blue">레이블</div>

<!-- ellipse 아이콘 -->
<div class="chip blue">
  <i class="icon icon-ellipse"></i>
  레이블
</div>

<!-- 커스텀 아이콘 -->
<div class="chip blue">
  <i class="icon icon-user"></i>
  사용자
</div>

둥근 모서리

round 클래스를 추가하여 완전히 둥근 모서리를 만들 수 있습니다.

기본 (약간 각진)

레이블

Round (완전히 둥근)

레이블

round.html

<!-- 기본 (약간 각진 모서리) -->
<div class="chip blue">
  <i class="icon icon-ellipse"></i>
  레이블
</div>

<!-- Round (완전히 둥근 모서리) -->
<div class="chip round blue">
  <i class="icon icon-ellipse"></i>
  레이블
</div>

삭제 버튼

칩에 삭제 버튼을 추가하여 제거 기능을 제공할 수 있습니다.

삭제 버튼 포함

레이블

delete.html

<div class="chip blue">
  <i class="icon icon-ellipse"></i>
  레이블
  <button aria-label="삭제"></button>
</div>

<script>
  // JavaScript로 삭제 기능 구현
  document.querySelectorAll('.chip button').forEach(button => {
    button.addEventListener('click', (e) => {
      e.target.closest('.chip').remove();
    });
  });
</script>

React 컴포넌트

React에서 Chip 컴포넌트를 사용할 수 있습니다.

기본 사용법

레이블

basic.tsx

import { Chip } from 'podo-ui';

function App() {
  return (
    <>
      <Chip theme="blue" icon="icon-ellipse">
        레이블
      </Chip>
      <Chip theme="green" icon="icon-ellipse">
        레이블
      </Chip>
      <Chip theme="orange" icon="icon-ellipse">
        레이블
      </Chip>
    </>
  );
}

삭제 기능 포함

React

TypeScript

Next.js

with-delete.tsx

import { useState } from 'react';
import { Chip } from 'podo-ui';

function TagList() {
  const [tags, setTags] = useState([
    { id: 1, label: 'React' },
    { id: 2, label: 'TypeScript' },
    { id: 3, label: 'Next.js' },
  ]);

  const handleDelete = (id: number) => {
    setTags(tags.filter((tag) => tag.id !== id));
  };

  return (
    <>
      {tags.map((tag) => (
        <Chip
          key={tag.id}
          theme="blue"
          round
          icon="icon-ellipse"
          onDelete={() => handleDelete(tag.id)}
        >
          {tag.label}
        </Chip>
      ))}
    </>
  );
}

다양한 변형

작은 크기

Fill 타입

Border + Round

삭제 가능

variants.tsx

<Chip size="sm" theme="blue" icon="icon-user">
  작은 크기
</Chip>

<Chip theme="green" type="fill" icon="icon-check">
  Fill 타입
</Chip>

<Chip theme="orange" type="border" round>
  Border + Round
</Chip>

<Chip theme="red" icon="icon-warning" onDelete={() => alert('삭제')}>
  삭제 가능
</Chip>

Props

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	칩에 표시될 내용
`theme`	`'default' \| 'blue' \| 'green' \| 'orange' \| 'yellow' \| 'red'`	`'default'`	칩의 색상 테마
`type`	`'default' \| 'fill' \| 'border'`	`'default'`	칩의 스타일 타입 (default, fill, border)
`size`	`'sm' \| 'md'`	`'md'`	칩의 크기
`round`	`boolean`	`false`	완전히 둥근 모서리 적용 여부
`icon`	`string`	-	칩에 표시할 아이콘 클래스명
`onDelete`	`() => void`	-	삭제 버튼 클릭 시 호출되는 함수
`className`	`string`	`''`	추가 CSS 클래스

Podo UI

칩

개요

타입

크기

아이콘

둥근 모서리

삭제 버튼

React 컴포넌트

Props