이로울 | 포트폴리오

TechBadge

Interactive UI Explorer

아래에서 각 컴포넌트의 다양한 Variants와 States를 문서화된 형태로 테스트해볼 수 있습니다.

Live Preview

ReactTypeScriptNext.jsTailwindpnpmGraphQLVitest

TechBadge

Stylish badges for technology tags.

Design & Hover Effect

Micro-animations on hover for bullet point color.

Source Code

<TechBadge>Next.js 14</TechBadge>
<TechBadge>Tailwind CSS</TechBadge>
<TechBadge>TypeScript</TechBadge>

Next.js 14Tailwind CSSTypeScript

Live Preview

Implementation

제작 코드

이 컴포넌트가 실제로 어떻게 구현되어 있는지 — 본체 .tsx 파일을 그대로 보여줍니다. variant 매핑·접근성 처리·forwardRef 패턴 등 디테일을 그대로 확인할 수 있어요.

TechBadgetypescript

import { HTMLAttributes, forwardRef } from 'react';
import { cn } from '@/lib/cn';

export interface TechBadgeProps extends HTMLAttributes<HTMLSpanElement> {
  // 나중에 확장할 수 있도록 인터페이스를 남겨둡니다.
}

export const TechBadge = forwardRef<HTMLSpanElement, TechBadgeProps>(
  ({ className, children, ...props }, ref) => {
    return (
      <span
        ref={ref}
        className={cn(
          "group inline-flex cursor-default items-center gap-1.5 rounded-md border border-slate-200 bg-slate-50 px-2.5 py-1 text-xs font-bold tracking-tight text-slate-700 transition-all hover:border-violet-200 hover:bg-violet-50 hover:text-violet-700",
          className
        )}
        {...props}
      >
        <span className="block h-1.5 w-1.5 shrink-0 rounded-full bg-slate-400 transition-colors group-hover:bg-violet-400" />
        {children}
      </span>
    );
  }
);

TechBadge.displayName = 'TechBadge';