Feat(cds): tag 공통 컴포넌트 리디자인 적용

[twossu]

📌 Summary

• [Feat] tag 컴포넌트 리디자인 #241

📚 Tasks

• cds-token에 태그용 서브 컬러 10종 추가
  -Tag 공통 컴포넌트 리디자인

🔍 Describe

기존 Label 컴포넌트는 라벨의 종류가 고정되어 있어 사용자가 선택하는 방식이었습니다. 리디자인 이후 명칭이 Tag로 변경되면서, 컬러, 종류가 고정 타입 대신 사용자가 입력한 태그명(문자열)을 기준으로 자동 매핑되는 방식으로 바뀌었습니다.

tag/tag.css.ts

• TAG_CONTAINER_COLORS 상수를 통해 태그명-컬러 매핑 정의 (pink, red, orange, yellow, green, blue, lightBlue, cyan, magenta, purple, gradient, grey)

tag/tag.tsx

• onRemove prop 추가로 삭제 버튼(ic_delete 아이콘) 조건부 렌더링 지원

lineHeight 스타일 속성

lineHeight: 1을 base에 두지 않고 각 사이즈 variant 안에 개별 기입한 이유는 CSS 우선순위 문제 때문입니다.

Vanilla Extract의 recipe()는 JS 객체 순서가 아니라 생성되는 CSS 규칙 순서로 캐스케이딩이 결정됩니다.
recipe는 항상 base 클래스를 먼저 생성하고, variants 클래스를 그 뒤에 생성하는데, 두 클래스의 specificity가 동일(클래스 선택자 1개)하기 때문에 나중에 정의된 variant가 항상 base를 덮어씁니다.

size.lg / size.sm에 스프레드되는 themeVars.fontStyles.body_m_14 / label_m_12 안에 이미 lineHeight가 포함되어 있어서, base에 lineHeight: 1을 두면 variant의 lineHeight(normal/tight)에 항상 밀리게 됩니다.
따라서 스프레드 이후에 lineHeight: 1을 직접 명시해야 올바르게 적용됩니다!

👀 To Reviewer

라벨에 관한 파일들을 정리하려 했는데 거의 모든 곳에 쓰이고 있고 너무 얽히고 섥혀있어서 열심히 지우다가 포기했습니다....ㅠ
각 태스크 담당일때 교체하면서 스프린트 마지막에 한번더 라벨이 있는지 체크해서 멸종 시키는 것이 어떤 가용?,,, - 우선 엠티 다녀와서 지울 수 있는 라벨들을 최대한 지워볼게요!....(된다면,)

📸 Screenshot

[github-actions]

🎨 Storybook 배포 완료

PR 작성자: @twossu

🔗 배포된 Storybook 보기