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;