feat: Heading 컴포넌트 추가

src/components/Common/Typography/Heading/Heading.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Heading from './Heading';
+
+const meta: Meta<typeof Heading> = {
+  title: 'common/Heading',
+  component: Heading,
+  args: {
+    children: '안녕하세요 펀잇입니다.',
+    color: 'default',
+    size: 'body',
+    weight: 'regular',
+    as: 'h1',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

src/components/Common/Typography/Heading/Heading.tsx

@@ -0,0 +1,28 @@
+import cx from 'classnames';
+import type { ElementType } from 'react';
+
+import { typography } from '../typography.css';
+import type { OverridableComponentPropsWithoutRef, TypographyVariants } from '../typography.types';
+
+type HeadingElement = Extract<ElementType, 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>;
+type HeadingProps<T extends HeadingElement> = OverridableComponentPropsWithoutRef<T, TypographyVariants>;
+
+const Heading = <T extends HeadingElement = 'h1'>({
+  children,
+  size = 'body',
+  weight = 'regular',
+  color = 'default',
+  as,
+  className,
+  ...props
+}: HeadingProps<T>) => {
+  const Component = as || 'h1';
+
+  return (
+    <Component className={cx(typography({ color, size, weight }), className)} {...props}>
+      {children}
+    </Component>
+  );
+};
+
+export default Heading;

src/components/Common/Text/Text.stories.tsx → src/components/Common/Typography/Text/Text.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
 import Text from './Text';
-import { sizes } from './text.types';
+import { sizes } from '../typography.types';
 
 const meta: Meta<typeof Text> = {
   title: 'common/Text',

src/components/Common/Typography/Text/Text.tsx

@@ -0,0 +1,28 @@
+import cx from 'classnames';
+import type { ElementType } from 'react';
+
+import { typography } from '../typography.css';
+import type { OverridableComponentPropsWithoutRef, TypographyVariants } from '../typography.types';
+
+export type TextElement = Extract<ElementType, 'p' | 'span'>;
+type TextProps<T extends TextElement> = OverridableComponentPropsWithoutRef<T, TypographyVariants>;
+
+const Text = <T extends TextElement = 'p'>({
+  children,
+  size = 'body',
+  weight = 'regular',
+  color = 'default',
+  as,
+  className,
+  ...props
+}: TextProps<T>) => {
+  const Component = as || 'p';
+
+  return (
+    <Component className={cx(typography({ color, size, weight }), className)} {...props}>
+      {children}
+    </Component>
+  );
+};
+
+export default Text;

src/components/Common/Text/text.css.ts → src/components/Common/Typography/typography.css.ts

@@ -5,7 +5,7 @@ const baseText = style({
   lineHeight: 1.4,
 });
 
-export const text = recipe({
+export const typography = recipe({
   base: baseText,
   variants: {
     color: {
@@ -22,6 +22,7 @@ export const text = recipe({
       caption1: { fontSize: '1.4rem' },
       body: { fontSize: '1.6rem' },
       headline: { fontSize: '1.8rem' },
+      display1: { fontSize: '2.2rem' },
     },
     weight: {
       regular: { fontWeight: 400 },

src/components/Common/Text/text.types.ts → src/components/Common/Typography/typography.types.ts

@@ -1,19 +1,18 @@
 import type { ElementType, ComponentPropsWithoutRef } from 'react';
 
-import type { text } from './text.css';
+import type { typography } from './typography.css';
 
 import type { RecipeVariants } from '@vanilla-extract/recipes';
 
 export const colors = ['default', 'sub', 'info', 'disabled', 'white'] as const;
-export const sizes = ['caption4', 'caption3', 'caption2', 'caption1', 'body', 'headline'] as const;
+export const sizes = ['caption4', 'caption3', 'caption2', 'caption1', 'body', 'headline', 'display1'] as const;
 export const weights = ['regular', 'medium', 'semiBold'] as const;
 
 export type Color = (typeof colors)[number];
 export type Size = (typeof sizes)[number];
 export type Weight = (typeof weights)[number];
 
-export type TextVariants = RecipeVariants<typeof text>;
-
 export type OverridableComponentPropsWithoutRef<T extends ElementType, P = unknown> = P &
   ComponentPropsWithoutRef<T> & { as?: T };
-export type TextElement = Extract<ElementType, 'p' | 'span'>;
+
+export type TypographyVariants = RecipeVariants<typeof typography>;

src/components/Common/index.ts

@@ -24,4 +24,5 @@ export { default as SelectOptionList } from './SelectOptionList/SelectOptionList
 export { default as PageHeader } from './PageHeader/PageHeader';
 export { default as Badge } from './Badge/Badge';
 export { default as WriteButton } from './WriteButton/WriteButton';
-export { default as Text } from './Text/Text';
+export { default as Text } from './Typography/Text/Text';
+export { default as Heading } from './Typography/Heading/Heading';