diff --git a/README.md b/README.md
index a8d5ed6..035f506 100644
--- a/README.md
+++ b/README.md
@@ -117,6 +117,29 @@ return (
```
+## 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`
(default: `h1`) | Heading 컴포넌트의 HTML 태그입니다. |
+
+### Example
+
+```jsx
+로망오우타해황
+로망오우타해황
+로망오우타해황
+로망오우타해황
+```
+
## Spacing
화면 구역을 나누는 여백 컴포넌트입니다.
diff --git a/src/Heading/Heading.stories.tsx b/src/Heading/Heading.stories.tsx
new file mode 100644
index 0000000..b05ce4c
--- /dev/null
+++ b/src/Heading/Heading.stories.tsx
@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Heading from './Heading';
+
+const meta: Meta = {
+ 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;
+
+export const Default: Story = {};
+
+export const Variant: Story = {
+ render: ({ children }) => (
+ <>
+ {children}
+ {children}
+ {children}
+ >
+ ),
+};
diff --git a/src/Heading/Heading.tsx b/src/Heading/Heading.tsx
new file mode 100644
index 0000000..d5c45da
--- /dev/null
+++ b/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;
+
+interface HeadingStyleProps {
+ element?: HeadingElement;
+ /**
+ * Heading 컴포넌트의 폰트 크기입니다.
+ */
+ size?: Sizes;
+ /**
+ * Heading 컴포넌트의 폰트 가중치입니다.
+ */
+ weight?: FontWeightKeys;
+}
+
+export type HeadingProps = OverridableComponentPropsWithoutRef;
+
+const Heading = ({ children, size, css, as, ...props }: HeadingProps) => {
+ return (
+
+ {children}
+
+ );
+};
+
+export default Heading;
+
+type HeadingStyleFunction = (size: HeadingStyleProps['size']) => RuleSet