[STOCAT] vanilla-extract 타이포그래피 토큰, 3줄 -> 1줄로 줄이기
이 글은 STOCAT 프로젝트에서 디자인 시스템 토큰을 정리하면서 발견한 코드 개선 경험을 기록한 글이다.들어가며STOCAT 프로젝트에 vanilla-extract로 디자인 토큰 체계를 새로 구축하는 작업을 했다.색상 토큰(color.role.css.ts)과 타이포그래피 토큰(typography.css.ts)을 정의하고,기존 컴포넌트들에 순차적으로 적용하는 작업이었다.그런데 적용하다 보니 반복되는 패턴이 눈에 들어왔다.// 이게 7개 파일에 걸쳐, 최대 5군데에서 반복되고 있었다fontSize: vars.typography.body3.fontSize,fontWeight: vars.typography.body3.fontWeight,lineHeight: vars.typography.body3.lineHeig..