🎨 TagBadge 리팩터링: 팀 간 UI 일관성을 위한 단일 컴포넌트화

1. 문제 인식

프로젝트를 진행하면서 다른 팀에서 사용하는 ‘태그 뱃지(TagBadge)’ 스타일이 조금씩 달라지는 문제가 생겼다.

예를 들어, best 태그와 author(글쓴이) 태그가 각각 별도로 만들어져 있었고, 스타일이 비슷함에도 불구하고 서로 다른 컴포넌트로 관리되고 있었다.

이런 구조는 다음과 같은 문제를 낳는다.

• 코드 중복 증가
• 유지보수 난이도 상승 (색상, 여백 등 수정 시 여러 곳을 고쳐야 함)
• 디자인 시스템 일관성 붕괴

그래서 이 컴포넌트를 하나로 통합하고, variant prop으로 상태를 구분하도록 리팩터링했다.

---

2. 리팩터링 목표

리팩터링의 핵심은 "하나의 컴포넌트로 다양한 상태를 표현" 하는 것이었다.

구체적인 목표는 다음과 같다.

• variant를 통해 태그 타입(default, author) 구분
• 크기 프리셋(size) 유지
• 선택 상태(selected)는 시각적인 강조 표시 용도로 사용
• 팀 간 재사용성과 유지보수성 향상

---

3. 구현 과정

💡 기존 구조

기존 TagBadge는 단일 색상 체계만 가지고 있었다.

selected ? colorMap.main : colorMap.neutral

즉, 선택 상태만 구분 가능했을 뿐,

‘글쓴이(author)’나 ‘베스트(best)’처럼 별도의 시각적 스타일을 적용할 방법이 없었다.

---

💡 개선 방향

variant prop을 추가하고, 이를 기반으로 색상 매핑을 달리하는 구조로 변경했다.

이렇게 하면 상태별로 완전히 다른 스타일을 가질 수 있으면서도,

공통된 컴포넌트 인터페이스를 유지할 수 있다.

---

4. 최종 코드

import { memo, type ComponentPropsWithoutRef, type ReactNode } from 'react'

type TagBadgeProps = ComponentPropsWithoutRef<'button'> & {
  children: ReactNode
  selected?: boolean
  size?: 'sm' | 'md'
  variant?: 'default' | 'author'
}

// size / color 매핑
const sizeMap = {
  sm: 'h-6 px-2.5 text-[10px]',
  md: 'py-1 px-3 text-xs',
} as const

const colorMap = {
  neutral: 'bg-muted/50 text-muted-foreground hover:bg-muted',
  main: 'bg-primary text-primary-foreground',
  author: 'bg-secondary/20 text-secondary',
} as const

function TagBadgeBase({
  children,
  selected = false,
  size = 'md',
  variant = 'default',
  className,
  ...rest
}: TagBadgeProps) {
  const tone =
    variant === 'author'
      ? colorMap.author
      : selected
      ? colorMap.main
      : colorMap.neutral

  return (
    <buttontype="button"
      data-selected={selected ? '' : undefined}
      data-variant={variant}
      className={[
        'inline-flex items-center justify-center gap-1.5',
        'rounded-[14px] select-none whitespace-nowrap',
        'cursor-pointer',
        tone,
        'transition-colors duration-200',
        sizeMap[size],
        className ?? '',
      ].join(' ')}
      {...rest}
    >
      {children}
    </button>
  )
}

export default memo(TagBadgeBase)

---

5. 사용 예시

<TagBadgeBase>일반 태그</TagBadgeBase>

<TagBadgeBase selected>선택된 태그</TagBadgeBase>

<TagBadgeBase variant="author">글쓴이</TagBadgeBase>

<TagBadgeBase variant="author" size="sm">
  작성자
</TagBadgeBase>

Prop 조합	설명
default	일반적인 중립 태그
selected	강조(활성) 상태 표현
author	글쓴이 전용 스타일

---

6. 리팩터링 효과

리팩터링 이후 다음과 같은 개선이 이루어졌다:

• 💡 variant 기반으로 태그 상태를 명확히 표현
• 🧩 하나의 컴포넌트로 다양한 상황 대응
• 🎨 디자인 토큰과 통일된 색상 체계 유지
• 🧠 팀 간 컴포넌트 중복 제거로 유지보수성 향상

---

7. 마무리

이번 리팩터링의 핵심은 “조건 분기를 JSX가 아닌 스타일 레벨에서 해결하기”였다.

variant를 중심으로 스타일을 관리하면, 새로운 태그 타입이 추가되더라도 구조를 변경할 필요 없이 확장만 하면 된다.