feat(system): Text에 typography스타일 추가

package.json

@@ -24,7 +24,6 @@
     "react": "^18",
     "react-dom": "^18",
     "tailwind-merge": "^2.4.0",
-    "tailwind-variants": "^0.2.1",
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {

src/app/layout.tsx

@@ -2,7 +2,6 @@ import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
 import { QueryProvider } from '@/lib';
 import './globals.css';
-import QueryProvider from '@/context/QueryProvider/QueryProvider';
 
 const inter = Inter({ subsets: ['latin'] });
 

src/app/page.tsx

@@ -1,3 +1,14 @@
+import { Text } from '@/system/components';
+import { typographyVariant } from '@/system/token/typography';
+
 export default function Home() {
-  return <div>123</div>;
+  return (
+    <>
+      {typographyVariant.map((typo) => (
+        <Text typography={typo} key={typo}>
+          하이하이
+        </Text>
+      ))}
+    </>
+  );
 }

src/system/components/Text/Text.tsx

@@ -1,3 +1,4 @@
+'use-client';
 import { forwardRef } from 'react';
 import { useTextStyles } from './styles/useTextStyles';
 import type { ComponentProps, ElementType } from 'react';
@@ -16,14 +17,7 @@ export const Text = forwardRef<HTMLParagraphElement, TextProps>(function Text(
 ) {
   const textStyle = useTextStyles({ typography, className });
 
-  return (
-    <Component
-      ref={ref}
-      style={{ color, ...style }}
-      {...textStyle.paragraph}
-      {...restProps}
-    />
-  );
+  return <Component ref={ref} style={{ color, ...style }} {...textStyle.paragraph} {...restProps} />;
 });
 
 Text.displayName = 'Text';

src/system/components/Text/styles/typography.ts

@@ -0,0 +1,45 @@
+import { Typography } from '@/system/token/typography/index';
+
+// NOTE: px정보를 typography token에서 직접 가져올 경우 tailwind에서 인식하지 못하는 문제가 있어 임시적으로 값을 넣어놓습니다.
+// FIXME: 추후 수정해야합니다.
+export const fontSize: Record<Typography, `text-[${number}px]`> = {
+  title1: 'text-[36px]',
+  title2: 'text-[28px]',
+  title3: 'text-[24px]',
+  heading1: 'text-[20px]',
+  heading2: 'text-[18px]',
+  body1: 'text-[16px]',
+  body2: 'text-[15px]',
+  label1: 'text-[14px]',
+  label2: 'text-[13px]',
+  caption1: 'text-[12px]',
+  caption2: 'text-[11px]',
+} as const;
+
+export const lineHeight: Record<Typography, `leading-[${number}px]`> = {
+  title1: 'leading-[48px]',
+  title2: 'leading-[38px]',
+  title3: 'leading-[32px]',
+  heading1: 'leading-[28px]',
+  heading2: 'leading-[26px]',
+  body1: 'leading-[24px]',
+  body2: 'leading-[22px]',
+  label1: 'leading-[20px]',
+  label2: 'leading-[18px]',
+  caption1: 'leading-[16px]',
+  caption2: 'leading-[14px]',
+} as const;
+
+export const letterSpacing: Record<Typography, `tracking-[${number}em]`> = {
+  title1: 'tracking-[-0.027em]',
+  title2: 'tracking-[-0.0236em]',
+  title3: 'tracking-[-0.023em]',
+  heading1: 'tracking-[-0.012em]',
+  heading2: 'tracking-[-0.002em]',
+  body1: 'tracking-[0.0057em]',
+  body2: 'tracking-[0.0096em]',
+  label1: 'tracking-[0.0145em]',
+  label2: 'tracking-[0.0194em]',
+  caption1: 'tracking-[0.0252em]',
+  caption2: 'tracking-[0.0311em]',
+} as const;

src/system/components/Text/styles/useTextStyles.ts

@@ -1,5 +1,5 @@
 import { clsx } from 'clsx';
-import { textVariants } from './variants';
+import { paragraphVariants } from './variants';
 import type { Typography } from '@/system/token/typography';
 import type { TextAnatomy } from '../anatomy';
 
@@ -8,15 +8,12 @@ interface Props {
   typography: Typography;
 }
 
-export function useTextStyles({
-  className,
-  typography,
-}: Props): Record<TextAnatomy, { className: string }> {
-  const styleVariants = textVariants({ typography });
+export function useTextStyles({ className, typography }: Props): Record<TextAnatomy, { className: string }> {
+  const paragraphStyle = paragraphVariants({ typography });
 
   return {
     paragraph: {
-      className: clsx(className, styleVariants),
+      className: clsx(className, paragraphStyle),
     },
   };
 }

src/system/components/Text/styles/variants.ts

@@ -1,20 +1,16 @@
 import { typographyVariant } from '@/system/token/typography';
-import { tv } from 'tailwind-variants';
+import { cva } from 'class-variance-authority';
 import type { Typography } from '@/system/token/typography';
+import { fontSize, lineHeight, letterSpacing } from '@/system/components/Text/styles/typography';
 
-export const textVariants = tv({
-  base: 'm-0',
-  slots: {
-    paragraph: [],
-  },
+export const paragraphVariants = cva(['m-0'], {
   variants: {
     typography: typographyVariant.reduce(
       (acc, typography) => {
-        // TODO: fontsize, fontweight, lineheight등 tailwind정보 추가
-        acc[typography] = [];
+        acc[typography] = [fontSize[typography], lineHeight[typography], letterSpacing[typography]];
         return acc;
       },
-      {} as Record<Typography, []>,
+      {} as Record<Typography, string[]>,
     ),
   },
 });

src/system/token/typography/index.ts

@@ -1,38 +1,57 @@
 export const typographyVariant = [
-  'Display1',
-  'Display2',
-  'Title1',
-  'Title2',
-  'Title3',
-  'Heading1',
-  'Heading2',
-  'Headline1',
-  'Headline2',
-  'Body1',
-  'Body2',
-  'Label1',
-  'Label2',
-  'Caption1',
-  'Caption2',
+  'title1',
+  'title2',
+  'title3',
+  'heading1',
+  'heading2',
+  'body1',
+  'body2',
+  'label1',
+  'label2',
+  'caption1',
+  'caption2',
 ] as const;
 
 export type Typography = (typeof typographyVariant)[number];
 
-// TODO: 자간 / 행간 높이 설정
-export const fontSize: Record<Typography, number> = {
-  Display1: 56,
-  Display2: 40,
-  Title1: 36,
-  Title2: 28,
-  Title3: 24,
-  Heading1: 22,
-  Heading2: 20,
-  Headline1: 18,
-  Headline2: 17,
-  Body1: 16,
-  Body2: 15,
-  Label1: 14,
-  Label2: 13,
-  Caption1: 12,
-  Caption2: 11,
+export const fontSize: Record<Typography, `${number}px`> = {
+  title1: '36px',
+  title2: '28px',
+  title3: '24px',
+  heading1: '20px',
+  heading2: '18px',
+  body1: '16px',
+  body2: '15px',
+  label1: '14px',
+  label2: '13px',
+  caption1: '12px',
+  caption2: '11px',
+} as const;
+
+export const lineHeight: Record<Typography, `${number}px`> = {
+  title1: '48px',
+  title2: '38px',
+  title3: '32px',
+  heading1: '28px',
+  heading2: '26px',
+  body1: '24px',
+  body2: '22px',
+  label1: '20px',
+  label2: '18px',
+  caption1: '16px',
+  caption2: '14px',
+} as const;
+
+export const letterSpacing: Record<Typography, `${number}em`> = {
+  title1: '-0.027em',
+  title2: '-0.0236em',
+  title3: '-0.023em',
+  heading1: '-0.012em',
+  heading2: '-0.002em',
+  body1: '0.0057em',
+  body2: '0.0096em',
+  label1: '0.0145em',
+  label2: '0.0194em',
+  caption1: '0.0252em',
+  caption2: '0.0311em',
 } as const;