add contrast prop to heading component

src/components/Heading/Heading.stories.tsx

@@ -9,7 +9,7 @@ const meta = {
   },
   args: {
     children: "제목",
-    level: 2,
+    level: 1,
   },
 } satisfies Meta<typeof Heading>;
 
@@ -42,7 +42,35 @@ export const Levels: StoryObj<typeof meta> = {
       </div>
     );
   },
-  parameters: {
-    controls: { disable: true },
+  argTypes: {
+    children: {
+      control: false,
+    },
+    level: {
+      control: false,
+    },
+  },
+};
+
+export const Contrasts: StoryObj<typeof meta> = {
+  render: (args) => {
+    return (
+      <div className={vstack({ gap: "6" })}>
+        <Heading {...args} contrast="low">
+          낮은 명암비
+        </Heading>
+        <Heading {...args} contrast="high">
+          높은 명암비
+        </Heading>
+      </div>
+    );
+  },
+  argTypes: {
+    children: {
+      control: false,
+    },
+    contrast: {
+      control: false,
+    },
   },
 };

src/components/Heading/Heading.tsx

@@ -1,30 +1,21 @@
-import { css } from "../../../styled-system/css";
-import type { TextStyle, FontSize, FontWeight } from "../../tokens/typography";
+import { css, cva } from "../../../styled-system/css";
+import type { FontSize, FontWeight } from "../../tokens/typography";
 
 type Level = 1 | 2 | 3 | 4 | 5 | 6;
 
 export interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
   /** 텍스트 */
   children: React.ReactNode | string;
   /** 단계 */
-  level?: Level;
+  level: Level;
   /** 크기 */
   size?: FontSize;
   /** 굵기 */
   weight?: FontWeight;
   /** 명암비 */
-  // contrast?: "low" | "high";
+  contrast?: "low" | "high";
 }
 
-const textStyles: Record<Level, TextStyle> = {
-  1: "4xl",
-  2: "3xl",
-  3: "2xl",
-  4: "xl",
-  5: "lg",
-  6: "md",
-};
-
 /**
  * - `level` 속성을 통해서 `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>` 요소 중 하나를 선택할 수 있습니다.
  * - `level` 속성은 단계 별 기본 텍스트 스타일을 제공합니다.
@@ -35,7 +26,7 @@ export const Heading = ({
   level,
   size,
   weight,
-  // contrast = "low",
+  contrast = "low",
   ...rest
 }: HeadingProps) => {
   if (!level) {
@@ -48,14 +39,33 @@ export const Heading = ({
 
   return (
     <Tag
-      className={css({
-        textStyle: textStyles[level],
-        fontSize: size,
-        fontWeight: weight,
-      })}
+      className={css(
+        style.raw({ level, contrast }),
+        css.raw({
+          fontSize: size,
+          fontWeight: weight,
+        })
+      )}
       {...rest}
     >
       {children}
     </Tag>
   );
 };
+
+const style = cva({
+  variants: {
+    level: {
+      1: { textStyle: "4xl" },
+      2: { textStyle: "3xl" },
+      3: { textStyle: "2xl" },
+      4: { textStyle: "xl" },
+      5: { textStyle: "lg" },
+      6: { textStyle: "md" },
+    },
+    contrast: {
+      low: { color: "text" },
+      high: { color: "text.contrast" },
+    },
+  },
+});