본문으로 건너뛰기

[1.54.0] DS 원자 — Chip (데미지 유형·세대 칩 통합, color/clickable)

· 약 3분
jangsungyu
jangsungyu
Frontend Developer
Claude Code
Claude Code
AI Assistant

작업 일자: 2026-06-28 작업 브랜치: feature/1.54.0-atomic-components-plan

📋 작업 개요​

작업 유형: 디자인 시스템 (원자 컴포넌트 신규 구축) 담당: jsg3121 + Claude

ADR-0010 원자 우선 DS 구축의 라운드 1 #4. 코드베이스의 칩/뱃지를 전수 조사한 뒤, 실제 반복되는 "작은 라벨 칩"만 단일 원자로 통합했다.

🎯 작업 목표​

조사 결과 칩/뱃지는 색 처리 방식이 제각각이었다(동적 chip-type-, 정적 badge-damage-, 하드코딩 sky-400 등). 이를 무리하게 하나로 묶지 않고 역할별로 정리했다.

  • 타입 칩(18종): 이미 Tag 컴포넌트가 담당 → 신규 제작 안 함(중복 방지)
  • 필터 칩(세대/타입/이펙트, 선택 피드백): /moves 등 특정 페이지 한정 → 페이지 필터 컴포넌트로 유지(DS 원자 아님)
  • 데미지 유형·세대 칩: 여러 페이지에서 같은 디자인 반복 → 단일 Chip 원자로 통합

✨ 주요 변경사항​

1. Chip 원자 신규 (3파일 구조)​

src/components/chip/
├── chipStyle.ts        # color × clickable(active/hover) 클래스 조합
├── Chip.component.tsx  # clickable에 따라 button/span 분기
└── Chip.stories.tsx    # color 4종(무색 포함) × clickable × active 렌더

2. color + label로 여러 칩 케이스 포괄​

<Chip label="물리" color="physical" />   // 주황
<Chip label="특수" color="special" />    // 보라
<Chip label="변화" color="status" />     // 초록
<Chip label="1세대" />                   // 기본(무색) 칩
prop동작
colorphysical/special/status(데미지 토큰). 없으면 기본 무색 칩(primary-3)
label표시 텍스트("물리", "1세대" 등) — 모든 문구 포괄

색은 등록된 토큰만 사용한다(데미지 색은 기존 damage-* 토큰 재사용, 하드코딩 없음).

3. clickable로 표시/필터 분기​

  • clickable=false(기본) → 순수 표시, <span>(포커스 안 됨)
  • clickable=true → 클릭 가능, <button>(키보드 포커스·Enter/Space 기본). active로 선택 상태(aria-pressed), hover/focus로 피드백

네이티브 요소를 쓰는 이유는 <span role="button">이 키보드 동작을 직접 구현해야 하기 때문이다(WAI-ARIA Rule 1).

🎨 디자인 변경​

  • grayscale 제외: 기존 필터 칩의 grayscale는 데미지 색 구분을 없애 의미를 손상시키므로, 선택 피드백은 opacity(+ active 시 scale)만 사용.
  • 슬림 터치 타겟 24px 칩으로 확장(ADR-0011): clickable 칩은 h-7(28px). 칩은 작은 라벨이라 슬림한 게 관용적이고, AA(24px) 이상을 충족한다.

🔧 기술적 세부사항​

추가된 파일

  • src/components/chip/chipStyle.ts
  • src/components/chip/Chip.component.tsx
  • src/components/chip/Chip.stories.tsx

수정된 파일

  • .claude/decisions/records/ADR-0011-tab-touch-target-24px.md — 슬림 터치 타겟 24px 예외를 탭에서 탭·칩으로 확장
  • .claude/conventions/guides/styling.md — 터치 타겟 규칙에 칩 포함

검증: TypeScript 타입 에러 없음, ESLint 통과.

📌 참고 사항​

  • 포켓몬 타입 18종 라벨은 Tag 컴포넌트가 담당한다 — Chip과 역할이 다르다.
  • clickable 칩을 그룹(필터)으로 배치할 때는 상위가 항목 간격을 24px 이상 둬야 한다(WCAG 2.5.8 spacing 예외, ADR-0011). 그룹 시맨틱(role 등)도 상위(필터 컴포넌트) 책임이다.
  • 기존 인라인 칩·badge-damage-* 유틸 사용처는 즉시 교체하지 않는다. 원자 구축 후 페이지 개편(2단계)에서 교체한다.
  • 라운드 1 원자(Button·LinkButton·TabItem·Chip) 구축이 이로써 마무리된다.