From c064740fc828812452a095adc2dabd381c651153 Mon Sep 17 00:00:00 2001
From: YuHyun <puh0128@gmail.com>
Date: Sat, 27 Jan 2024 23:00:38 +0900
Subject: [PATCH 1/3] =?UTF-8?q?feat:=20typography.$semantic=20=EC=83=81?=
 =?UTF-8?q?=EC=88=98=20=ED=83=80=EC=9E=85=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/design-token/typography.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/design-token/typography.ts b/src/design-token/typography.ts
index 4150e60..df2430b 100644
--- a/src/design-token/typography.ts
+++ b/src/design-token/typography.ts
@@ -19,7 +19,7 @@ const $semantic = {
   caption2Regular: "mm-semantic-typography-caption2-regular",
   caption2Bold: "mm-semantic-typography-caption2-bold",
   code: "mm-semantic-typography-code",
-};
+} as const;
 
 const typography = { $semantic };
 export default typography;

From 02ae27291edbceaad74c044fb4564d3f490623a7 Mon Sep 17 00:00:00 2001
From: YuHyun <puh0128@gmail.com>
Date: Sat, 27 Jan 2024 23:01:03 +0900
Subject: [PATCH 2/3] =?UTF-8?q?test:=20typography=20=EC=8A=A4=ED=86=A0?=
 =?UTF-8?q?=EB=A6=AC=20=EC=9E=91=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/design-token/typography.stories.tsx | 66 +++++++++++++++++++++++++
 1 file changed, 66 insertions(+)
 create mode 100644 src/design-token/typography.stories.tsx

diff --git a/src/design-token/typography.stories.tsx b/src/design-token/typography.stories.tsx
new file mode 100644
index 0000000..007fa88
--- /dev/null
+++ b/src/design-token/typography.stories.tsx
@@ -0,0 +1,66 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import typography from "./typography";
+
+const meta: Meta<typeof Text> = {
+  title: "Design Tokens/Typography",
+  component: Text,
+  argTypes: {
+    typography: {
+      control: {
+        type: "radio",
+        // radio label을 mm-semantic-typography-h1에서 h1로 변경
+        labels: Object.fromEntries(
+          Object.entries(typography.$semantic).map(([key, value]) => [
+            value,
+            key,
+          ]),
+        ),
+      },
+      options: Object.values(typography.$semantic),
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Text>;
+
+export const Variants: Story = {
+  args: {
+    typography: typography.$semantic.body1Bold,
+    children: "Git challenge 디자인 시스템",
+  },
+};
+
+export const Overview: Story = {
+  parameters: {
+    controls: { exclude: ["typography", "children"] },
+  },
+  // render: () => {} 처럼 매개변수가 없으면, controls 필터링 기능이 동작하지 않는 문제가 있음
+  // https://github.com/storybookjs/storybook/issues/23343#issuecomment-1627351756
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  render: (_) => (
+    <div style={{ display: "flex", flexDirection: "column", gap: "6px" }}>
+      {Object.entries(typography.$semantic).map(([key, value]) => (
+        <Text typography={value} key={key}>
+          {key}
+        </Text>
+      ))}
+    </div>
+  ),
+};
+
+type TypographySementicKey = keyof typeof typography.$semantic;
+
+interface TextProps<Key extends TypographySementicKey> {
+  typography: (typeof typography.$semantic)[Key];
+  children: string;
+}
+
+function Text<Key extends TypographySementicKey>({
+  typography: className,
+  children,
+}: TextProps<Key>) {
+  return <div className={className}>{children}</div>;
+}

From 7bf8eba337411202926b23cbc12080b29b439fd5 Mon Sep 17 00:00:00 2001
From: YuHyun <puh0128@gmail.com>
Date: Fri, 23 Feb 2024 22:18:40 +0900
Subject: [PATCH 3/3] =?UTF-8?q?docs:=20typography=20=EC=8A=A4=ED=86=A0?=
 =?UTF-8?q?=EB=A6=AC=20docs=20=EC=9E=91=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/design-token/typography.stories.tsx | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/design-token/typography.stories.tsx b/src/design-token/typography.stories.tsx
index 007fa88..2f34898 100644
--- a/src/design-token/typography.stories.tsx
+++ b/src/design-token/typography.stories.tsx
@@ -4,9 +4,10 @@ import typography from "./typography";
 
 const meta: Meta<typeof Text> = {
   title: "Design Tokens/Typography",
+  tags: ["autodocs"],
   component: Text,
   argTypes: {
-    typography: {
+    className: {
       control: {
         type: "radio",
         // radio label을 mm-semantic-typography-h1에서 h1로 변경
@@ -20,6 +21,7 @@ const meta: Meta<typeof Text> = {
       options: Object.values(typography.$semantic),
     },
   },
+  excludeStories: /Text/,
 };
 
 export default meta;
@@ -28,14 +30,14 @@ type Story = StoryObj<typeof Text>;
 
 export const Variants: Story = {
   args: {
-    typography: typography.$semantic.body1Bold,
+    className: typography.$semantic.body1Bold,
     children: "Git challenge 디자인 시스템",
   },
 };
 
 export const Overview: Story = {
   parameters: {
-    controls: { exclude: ["typography", "children"] },
+    controls: { exclude: ["className", "children"] },
   },
   // render: () => {} 처럼 매개변수가 없으면, controls 필터링 기능이 동작하지 않는 문제가 있음
   // https://github.com/storybookjs/storybook/issues/23343#issuecomment-1627351756
@@ -43,7 +45,7 @@ export const Overview: Story = {
   render: (_) => (
     <div style={{ display: "flex", flexDirection: "column", gap: "6px" }}>
       {Object.entries(typography.$semantic).map(([key, value]) => (
-        <Text typography={value} key={key}>
+        <Text className={value} key={key}>
           {key}
         </Text>
       ))}
@@ -53,13 +55,14 @@ export const Overview: Story = {
 
 type TypographySementicKey = keyof typeof typography.$semantic;
 
-interface TextProps<Key extends TypographySementicKey> {
-  typography: (typeof typography.$semantic)[Key];
+export interface TextProps<Key extends TypographySementicKey> {
+  /** className에 typography 토큰을 설정해 적용할 수 있습니다. */
+  className: (typeof typography.$semantic)[Key];
   children: string;
 }
 
-function Text<Key extends TypographySementicKey>({
-  typography: className,
+export function Text<Key extends TypographySementicKey>({
+  className,
   children,
 }: TextProps<Key>) {
   return <div className={className}>{children}</div>;