feat: Typography 컴포넌트 추가

src/shared/components/TextField/TextField.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { TEXT_FIELD_VARIANTS } from './TextField.type';
 import { AppLayout } from '@/components';
 import { TextField } from '@/shared/components';
 import { letterSpacingValue, storybookControls, styleToken } from '@/shared/styles';
@@ -18,6 +19,9 @@ const meta: Meta = {
     type: {
       options: ['text', 'password', 'email', 'number', 'tel', 'url'],
     },
+    variant: {
+      options: TEXT_FIELD_VARIANTS,
+    },
   },
   args: {
     as: 'input',

src/shared/components/TextField/TextField.type.ts

@@ -10,4 +10,5 @@ export type FocusProps = {
   outline?: StyleProps['outline'];
 };
 
-export type TextFieldVariant = 'outline' | 'filled' | 'flushed' | 'unstyled';
+export const TEXT_FIELD_VARIANTS = ['outline', 'filled', 'flushed', 'unstyled'] as const;
+export type TextFieldVariant = (typeof TEXT_FIELD_VARIANTS)[number];

src/shared/components/Typography/Typography.stories.tsx

@@ -0,0 +1,57 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Typography, TypographyVariants, typographyVariantStyle } from './Typography';
+import { AppLayout } from '@/components';
+import { VStack } from '@/shared/components';
+import { storybookControls, styleToken } from '@/shared/styles';
+
+const meta: Meta<typeof Typography> = {
+  title: 'Primitive/Typography',
+  component: Typography,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    ...storybookControls.argTypes,
+    variant: {
+      options: ['caption', 'title', 'body', 'subtitle', 'headline', 'display'],
+    },
+  },
+  decorators: [
+    (Story) => (
+      <AppLayout>
+        <Story />
+      </AppLayout>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Typography>;
+
+export const Primary: Story = {
+  args: {
+    variant: 'body',
+    children: 'Hello Typography',
+  },
+};
+
+export const WithVariants: Story = {
+  render: () => (
+    <VStack gap="24px">
+      {Object.entries(TypographyVariants).map(([key, value]) => {
+        const { fontSize, fontWeight, lineHeight, letterSpacing } = typographyVariantStyle[value];
+        return (
+          <VStack>
+            <Typography key={`${key}-name`} variant={value} color={styleToken.color.black}>
+              {value}
+            </Typography>
+            <Typography key={`${key}-style`} variant="caption" color={styleToken.color.gray700}>
+              {fontSize} {fontWeight} {lineHeight} {letterSpacing}
+            </Typography>
+          </VStack>
+        );
+      })}
+    </VStack>
+  ),
+};

src/shared/components/Typography/Typography.tsx

@@ -0,0 +1,71 @@
+import { PropsWithChildren } from 'react';
+import styled from '@emotion/styled';
+import { DefaultStyled, styleToken } from '@/shared/styles';
+import { AsProps, StyleProps } from '@/shared/types';
+
+export enum TypographyVariants {
+  caption = 'caption',
+  title = 'title',
+  body = 'body',
+  subtitle = 'subtitle',
+  headline = 'headline',
+  display = 'display',
+}
+type TypographyVariant = keyof typeof TypographyVariants;
+
+type TypographyProps = PropsWithChildren<
+  StyleProps &
+    AsProps & {
+      variant?: TypographyVariant;
+    }
+>;
+
+export const Typography = ({ as, variant, children, ...restProps }: TypographyProps) => (
+  <Root as="span" variant={variant || 'body'} {...restProps}>
+    {children}
+  </Root>
+);
+
+const Root = styled(DefaultStyled)<TypographyProps>`
+  white-space: pre-wrap;
+  ${({ variant }) => typographyVariantStyle[variant || 'body']};
+`;
+
+export const typographyVariantStyle = {
+  title: {
+    fontSize: styleToken.fontSize.title,
+    fontWeight: styleToken.fontWeight.medium,
+    lineHeight: '1.3rem',
+    letterSpacing: 'normal',
+  },
+  body: {
+    fontSize: styleToken.fontSize.body,
+    fontWeight: styleToken.fontWeight.regular,
+    lineHeight: '1.5rem',
+    letterSpacing: 'normal',
+  },
+  headline: {
+    fontSize: styleToken.fontSize.headline,
+    fontWeight: styleToken.fontWeight.medium,
+    lineHeight: '1.3rem',
+    letterSpacing: '0.05rem',
+  },
+  subtitle: {
+    fontSize: styleToken.fontSize.subtitle,
+    fontWeight: styleToken.fontWeight.regular,
+    lineHeight: '1.6rem',
+    letterSpacing: '0.02rem',
+  },
+  caption: {
+    fontSize: styleToken.fontSize.caption,
+    fontWeight: styleToken.fontWeight.regular,
+    lineHeight: '1.4rem',
+    letterSpacing: '0.01rem',
+  },
+  display: {
+    fontSize: styleToken.fontSize.display,
+    fontWeight: styleToken.fontWeight.medium,
+    lineHeight: '1.2rem',
+    letterSpacing: '0.1rem',
+  },
+} as const;

src/shared/components/Typography/index.ts

@@ -0,0 +1 @@
+export * from './Typography';

src/shared/components/index.ts

@@ -2,3 +2,4 @@ export * from './Box';
 export * from './HStack';
 export * from './VStack';
 export * from './TextField';
+export * from './Typography';

src/shared/styles/styleToken.ts

@@ -1,5 +1,6 @@
 const colors = {
   white: '#fff',
+  black: '#222',
   gray100: '#f5f5f5',
   gray200: '#ecebf1',
   gray300: '#d3d3d3',