[FEATRUE] 샘플 컴포넌트 토큰 마이그레이션

[3o14]

목표

새 토큰 시스템이 실제 컴포넌트에 정상 동작하는지 검증합니다.
v1에서 토큰을 우회하던 컴포넌트(Tooltip, Avatar)를 우선 대상으로 합니다.

선행 조건

• [FEATRUE] Style Dictionary 빌드 파이프라인 구축 #222 (VE codegen 빌드 완료)
• [FEATRUE] Semantic 토큰 초안 설계 #221 (Semantic 초안 적용 가능)

대상 컴포넌트 (우선순위)

• Tooltip — hex 직접 사용 → vars.* 참조로 치환
• Avatar — hex 직접 사용 → vars.* 참조로 치환
• Button (여유 있으면) — v1 vars → v2 네이밍으로 마이그레이션

작업 내용

• 기존 하드코딩 색상/간격/반경/transition을 vars.*로 치환

  // Before
  background: '#3B82F6'
  // After
  background: vars.color.blue[500]

• token-types.ts에서 import한 타입을 props에 적용 (해당하는 경우)
• Storybook에서 시각적 반영 확인
• 기존 Prop API 호환성 유지 (breaking change 금지)
• 마이그레이션 전후 diff 스크린샷 저장

DoD

• 샘플 컴포넌트가 vars.* 기반 토큰으로 렌더링됩니다
• Storybook 기준으로 기존 동작이 유지됩니다
• 시각적 회귀가 없습니다 (수동 비교)