docs(component-docs): tsconfig configuration

daangn · Oct 8, 2024 · f9491f4 · f9491f4
1 parent 68b92ed
commit f9491f4
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 3 deletions.
diff --git a/component-docs/src/pages/get-started/installation/vite.mdx b/component-docs/src/pages/get-started/installation/vite.mdx
@@ -2,6 +2,7 @@ import { Steps, Tabs } from 'nextra/components'
 
 import SeedDesignConfiguration from "@/src/templates/seed-design-configuration.mdx"
 import Installation from "@/src/templates/get-started-installation.mdx"
+import TsconfigConfiguration from "@/src/templates/tsconfig-configuration.mdx"
 
 # 설치
 
@@ -21,7 +22,7 @@ Seed Design의 컬러 토큰은 `<html />` 태그의 `data-seed`, `data-seed-sca
 
 <Tabs items={['auto', 'light only', 'dark only']}>
   <Tabs.Tab>
-    ```html copy
+    ```html copy filename="index.html" {2-4,7}
     <html
       data-seed
       data-seed-scale-color="light"
@@ -35,7 +36,7 @@ Seed Design의 컬러 토큰은 `<html />` 태그의 `data-seed`, `data-seed-sca
     ```
   </Tabs.Tab>
   <Tabs.Tab>
-    ```html copy
+    ```html copy filename="index.html" {2-4,7}
     <html
       data-seed="light-only"
       data-seed-scale-color="light"
@@ -49,7 +50,7 @@ Seed Design의 컬러 토큰은 `<html />` 태그의 `data-seed`, `data-seed-sca
     ```
   </Tabs.Tab>
   <Tabs.Tab>
-    ```html copy
+    ```html copy filename="index.html" {2-4,7}
     <html
       data-seed="dark-only"
       data-seed-scale-color="dark"
@@ -80,4 +81,8 @@ import "@seed-design/stylesheet/token.css";
 npx @seed-design/cli@latest add box-button
 ```
 
+### tsconfig.json 설정하기
+
+<TsconfigConfiguration />
+
 </Steps>
diff --git a/component-docs/src/templates/tsconfig-configuration.mdx b/component-docs/src/templates/tsconfig-configuration.mdx
@@ -0,0 +1,12 @@
+```json filename="tsconfig.json" copy {4-8}
+{
+  "compilerOptions": {
+    // your options
+    "paths": {
+      "seed-design/ui/*": [
+        "./seed-design/ui/*"
+      ]
+    }
+  }
+}
+```