chore: JDS 토큰 Tailwind 테마 시스템에 주입

[ccconac]

💡 작업 내용

• JDS 토큰 Tailwind 테마 시스템에 주입

💡 자세한 설명

피그마 내에서 명시되어 사용되는 토큰 값을 그대로 사용하기 위해, JDS 패키지의 토큰을 import 해 tailwind.config.ts에 매핑하여 사용할 수 있도록 설정했습니다. (JDS 개발 시에는 Emotion을 사용했기 때문에 아래 작업을 진행해 주지 않아도 괜찮았습니다.)

  theme: {
    extend: {
      colors: {
        semantic: theme.color.semantic,
        primitive: theme.colorPrimitive.primitive,
      },
      spacing: {
        ...theme.scheme.semantic.spacing,
        ...theme.scheme.semantic.margin,
      },
      ...
  },

아래와 같이 사용할 수 있습니다. 기본적인 사용법은 TailwindCSS 형식을 따르며, 대부분은 토큰의 값만 차용해 사용한다고 생각하시면 됩니다. 헷갈리실 때는 아래 여러 예시를 확인해 주세요.

bg-semantic-surface-standard, text-primitive-blue-500
p-12, m-lg, gap-24
rounded-6, border-2
opacity-44, opacity-100
font-hero, text-body-lg, leading-title-1
duration-300, ease-bouncy

또한, textStyle을 한 번에 적용해 사용하기 위해 커스텀 플러그인을 추가해 주었습니다. text-semantic-object-normal처럼 사용 가능합니다.

plugins: [
    plugin(({ addUtilities }) => {
      const textStyleUtilities = Object.entries(theme.textStyle).reduce(
        (acc, [key, styleObj]) => {
          const styles: Record<string, string> = {
            fontSize: styleObj.fontSize,
            lineHeight: styleObj.lineHeight,
            fontFamily: styleObj.fontFamily,
            fontWeight: styleObj.fontWeight,
            letterSpacing: styleObj.letterSpacing,
          };

          if (styleObj.paragraphIndent !== '0px') {
            styles.textIndent = styleObj.paragraphIndent;
          }

          acc[`.${key}`] = styles;

          return acc;
        },
        {} as Record<string, Record<string, string>>,
      );

      addUtilities(textStyleUtilities);
    }),
  ],

✅ 셀프 체크리스트

• 머지할 브랜치 확인했나요?
• 이슈는 close 했나요?
• Reviewers, Labels, Projects를 등록했나요?
• 기능이 잘 동작하나요?
• 불필요한 코드는 제거했나요?

closes #5