feat: Heading 컴포넌트 추가

README.md

@@ -117,6 +117,29 @@ return (
 <Divider />
 ```
 
+## Heading
+
+HTML heading 태그를 사용하는 컴포넌트입니다.
+
+### Props
+
+| props     | value                                 | description                                 |
+| --------- | ------------------------------------- | ------------------------------------------- |
+| children? | ReactNode                             | Heading 컴포넌트의 자식 컴포넌트입니다.     |
+| size?     | `xs`, `sm`, `md`, `lg`, `xl`          | Heading 컴포넌트의 폰트 크기입니다.         |
+| weight?   | `light`, `regular`, `bold`            | Heading 컴포넌트의 폰트 가중치입니다.       |
+| css?      | CSSProp                               | Heading 컴포넌트에 적용할 CSS 스타일입니다. |
+| as?       | `h1` ,`h2`, `h3`<br />(default: `h1`) | Heading 컴포넌트의 HTML 태그입니다.         |
+
+### Example
+
+```jsx
+<Heading>로망오우타해황</Heading>
+<Heading as="h2">로망오우타해황</Heading>
+<Heading as="h3" size="xl" weight='regular'>로망오우타해황</Heading>
+<Heading as="h3" css='color: red;'>로망오우타해황</Heading>
+```
+
 ## Spacing
 
 화면 구역을 나누는 여백 컴포넌트입니다.

src/Heading/Heading.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Heading from './Heading';
+
+const meta: Meta<typeof Heading> = {
+  title: 'Heading',
+  component: Heading,
+  argTypes: {
+    element: {
+      table: { disable: true },
+    },
+    css: {
+      control: { type: 'text' },
+    },
+    as: {
+      description: 'Heading 컴포넌트의 HTML 태그입니다.',
+    },
+  },
+  args: {
+    children: '안녕하세요 펀잇입니다. 로망오우타해황',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Heading>;
+
+export const Default: Story = {};
+
+export const Variant: Story = {
+  render: ({ children }) => (
+    <>
+      <Heading as="h1">{children}</Heading>
+      <Heading as="h2">{children}</Heading>
+      <Heading as="h3">{children}</Heading>
+    </>
+  ),
+};

src/Heading/Heading.tsx

@@ -0,0 +1,51 @@
+import type { ElementType } from 'react';
+import type { RuleSet } from 'styled-components';
+import styled, { css } from 'styled-components';
+
+import type { FontWeightKeys } from '../styles/theme';
+import type { OverridableComponentPropsWithoutRef, Sizes } from '../types';
+
+type HeadingElement = Extract<ElementType, 'h1' | 'h2' | 'h3'>;
+
+interface HeadingStyleProps {
+  element?: HeadingElement;
+  /**
+   * Heading 컴포넌트의 폰트 크기입니다.
+   */
+  size?: Sizes;
+  /**
+   * Heading 컴포넌트의 폰트 가중치입니다.
+   */
+  weight?: FontWeightKeys;
+}
+
+export type HeadingProps<T extends HeadingElement> = OverridableComponentPropsWithoutRef<T, HeadingStyleProps>;
+
+const Heading = <T extends HeadingElement = 'h1'>({ children, size, css, as, ...props }: HeadingProps<T>) => {
+  return (
+    <HeadingContainer as={as} element={as} size={size} css={css} {...props}>
+      {children}
+    </HeadingContainer>
+  );
+};
+
+export default Heading;
+
+type HeadingStyleFunction = (size: HeadingStyleProps['size']) => RuleSet<object>;
+
+const headingSizeStyles: Record<HeadingElement, HeadingStyleFunction> = {
+  h1: (size) => css`
+    font-size: ${({ theme }) => (size ? theme.fontSizes[size] : '3.4rem')};
+  `,
+  h2: (size) => css`
+    font-size: ${({ theme }) => (size ? theme.fontSizes[size] : '2.8rem')};
+  `,
+  h3: (size) => css`
+    font-size: ${({ theme }) => (size ? theme.fontSizes[size] : '2.2rem')};
+  `,
+};
+
+const HeadingContainer = styled.h1<HeadingStyleProps>`
+  ${({ element, size }) => headingSizeStyles[element ?? 'h1'](size)}
+  font-weight: ${({ theme, weight }) => theme.fontWeights[weight ?? 'bold']};
+`;

src/Heading/index.ts

@@ -0,0 +1,5 @@
+import Heading from './Heading';
+
+export type { HeadingProps } from './Heading';
+
+export default Heading;

src/Text/Text.tsx

@@ -1,12 +1,12 @@
 import type { CSSProperties, ElementType } from 'react';
 import styled from 'styled-components';
 
+import type { FontWeightKeys } from '../styles/theme';
 import theme from '../styles/theme';
 import type { Sizes, OverridableComponentPropsWithoutRef } from '../types';
 
 type TextElement = Extract<ElementType, 'p' | 'span'>;
 type TextAligns = 'left' | 'center' | 'right';
-type TextWeights = 'light' | 'regular' | 'bold';
 
 interface TextStyleProps {
   /**
@@ -20,7 +20,7 @@ interface TextStyleProps {
   /**
    * Text 컴포넌트의 폰트 가중치입니다.
    */
-  weight?: TextWeights;
+  weight?: FontWeightKeys;
   /**
    * Text 컴포넌트의 텍스트 높이입니다.
    */

src/styles/theme.ts

@@ -97,6 +97,8 @@ const theme = {
 };
 
 export type ColorKeys = keyof typeof colors;
+export type FontWeightKeys = keyof typeof fontWeights;
+
 export type Theme = typeof theme;
 
 export default theme;