From f695e3b6059af330a43be2d6f1fbe55d4e86dda1 Mon Sep 17 00:00:00 2001
From: malangcat <asher@daangn.com>
Date: Sun, 5 Jan 2025 05:38:40 +0900
Subject: [PATCH] docs: update typography docs

---
 docs/components/component-example.tsx         | 26 +++++++++++++++++++
 .../docs/design/foundation/typography.mdx     | 25 ++++++++++++++++--
 2 files changed, 49 insertions(+), 2 deletions(-)

diff --git a/docs/components/component-example.tsx b/docs/components/component-example.tsx
index 5441a46a0..a24988068 100644
--- a/docs/components/component-example.tsx
+++ b/docs/components/component-example.tsx
@@ -7,6 +7,8 @@ import { CodeBlock } from "./code-block";
 
 interface ComponentExampleProps {
   name: string;
+
+  previewOnly?: boolean;
 }
 
 export function ComponentExample(props: ComponentExampleProps) {
@@ -26,6 +28,30 @@ export function ComponentExample(props: ComponentExampleProps) {
     return (Index as Record<string, string>)[name];
   }, [name]);
 
+  if (props.previewOnly) {
+    return (
+      <React.Suspense fallback={null}>
+        <div
+          className="not-prose example-reset"
+          style={{
+            minHeight: "300px",
+            width: "100%",
+            display: "flex",
+            flexDirection: "column",
+            backgroundColor: "var(--seed-v3-color-bg-layer-default)",
+            justifyContent: "center",
+            alignItems: "center",
+            padding: "10px",
+            borderRadius: ".75rem",
+            border: "1px solid var(--seed-v3-color-stroke-neutral)",
+          }}
+        >
+          {Preview}
+        </div>
+      </React.Suspense>
+    );
+  }
+
   return (
     <ErrorBoundary>
       <Tabs items={["미리보기", "코드"]}>
diff --git a/docs/content/docs/design/foundation/typography.mdx b/docs/content/docs/design/foundation/typography.mdx
index 426d0ec59..1f13b13ae 100644
--- a/docs/content/docs/design/foundation/typography.mdx
+++ b/docs/content/docs/design/foundation/typography.mdx
@@ -3,6 +3,8 @@ title: 타이포그래피
 description: 타이포그래피는 콘텐츠를 명확하고 효율적으로 표현하기 위한 디자인 요소입니다.
 ---
 
+<ComponentExample name="text-preview" previewOnly />
+
 ## 폰트 크기
 
 TBD
@@ -24,7 +26,7 @@ SEED 디자인 시스템은 regular, medium, bold 세 가지의 폰트 굵기를
 
 ### Regular
 
-TBD
+일반적인 텍스트에 사용되는 기본 폰트 굵기입니다.
 
 ### Medium
 
@@ -32,10 +34,29 @@ TBD
 
 ### Bold
 
-TBD
+강조하거나 중요한 내용을 표현할 때 사용되는 폰트 굵기입니다.
 
 ### 토큰
 
 ### Font Weight Tokens
 
 <TokenReference groups={["font-weight"]} />
+
+## Text Styles
+
+SEED 디자인 시스템은 위 토큰들을 조합해 사전 정의된 텍스트 스타일을 제공합니다.
+
+각 텍스트 스타일은 의도에 맞게 폰트 크기, 굵기, 줄 간격이 사전 정의되어 있습니다.
+
+<ComponentSpecBlock id="typography" />
+
+## 링크
+
+<Cards>
+  <Card
+    icon={<AtomIcon />}
+    title="React"
+    description="타이포그래피 컴포넌트를 React로 사용하는 방법을 설명합니다."
+    href="/docs/react/components/text"
+  />
+</Cards>
\ No newline at end of file