Skip to content

[CHORE] 디자인 시스템 절대경로(path alias) 설정 #70

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jjangminii merged 1 commit into from
Jul 1, 2026
Merged

[CHORE] 디자인 시스템 절대경로(path alias) 설정 #70

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions packages/timo-design-system/.storybook/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import path from "node:path";

Comment on lines +1 to +2

@coderabbitai coderabbitai Bot Jul 1, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

tsconfig.json paths와 이중 관리되는 alias — vite-tsconfig-paths 플러그인 사용 고려.

tsconfig.json의 paths와 이 파일의 resolve.alias가 동일한 매핑을 각각 수동 관리하고 있어, 향후 새 폴더/별칭 추가 시 두 곳을 동시에 갱신하지 않으면 설정이 어긋날 위험이 있습니다. vite-tsconfig-paths 플러그인을 사용하면 tsconfig.json의 paths를 단일 소스로 삼아 Vite alias를 자동 동기화할 수 있습니다.

참고: https://github.com/aleclarson/vite-tsconfig-paths

♻️ 참고 리팩터링 예시 
-import path from "node:path";
+import tsconfigPaths from "vite-tsconfig-paths";
...
   viteFinal: async (config) => {
-    config.resolve ??= {};
-    config.resolve.alias = {
-      ...config.resolve.alias,
-      "`@components`": path.resolve(__dirname, "../src/components"),
-      "`@tokens`": path.resolve(__dirname, "../src/tokens"),
-      "`@icons`": path.resolve(__dirname, "../src/icons"),
-      "`@lib`": path.resolve(__dirname, "../src/lib"),
-      "`@styles`": path.resolve(__dirname, "../src/styles"),
-      "`@assets`": path.resolve(__dirname, "../src/assets"),
-      "`@guides`": path.resolve(__dirname, "../src/guides"),
-    };
+    config.plugins ??= [];
+    config.plugins.push(tsconfigPaths());
     return config;
   },

참고로 현재 Storybook 버전(8.6.14) 기준 __dirname은 Vite 빌더의 CJS 트랜스파일 컨텍스트에서 정상 동작하지만, Storybook 10부터는 main config가 순수 ESM으로 강제되어 __dirname/__filename이 제거될 예정이니 향후 업그레이드 시 유의하세요.

Also applies to: 20-33

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/timo-design-system/.storybook/main.ts` around lines 1 - 2, The
Storybook Vite config is duplicating TypeScript path aliases in resolve.alias
instead of deriving them from tsconfig.json. Update the main Storybook config to
use the vite-tsconfig-paths plugin so the existing tsconfig paths become the
single source of truth, and remove the manual alias mapping in the Storybook
setup; use the config entry points in the main Storybook config and any related
Vite setup to keep the alias resolution in sync automatically.

import type { StorybookConfig } from "@storybook/react-vite";

const config: StorybookConfig = {
Expand All @@ -15,6 +17,20 @@ const config: StorybookConfig = {
docs: {
autodocs: "tag",
},
viteFinal: async (config) => {

@yumin-kim2 yumin-kim2 Jul 1, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TypeScript랑 Vite는 별개라서 둘 다 따로 alias를 알려줘야하는군요....!!

config.resolve ??= {};
config.resolve.alias = {
...config.resolve.alias,
"@components": path.resolve(__dirname, "../src/components"),
"@tokens": path.resolve(__dirname, "../src/tokens"),
"@icons": path.resolve(__dirname, "../src/icons"),
"@lib": path.resolve(__dirname, "../src/lib"),
"@styles": path.resolve(__dirname, "../src/styles"),
"@assets": path.resolve(__dirname, "../src/assets"),
"@guides": path.resolve(__dirname, "../src/guides"),
};
return config;
},
};

export default config;
3 changes: 2 additions & 1 deletion packages/timo-design-system/src/components/color/Color.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { COLOR_TOKENS } from "@tokens/color-token";

import { Color } from "./Color";
import { COLOR_TOKENS } from "../../tokens/color-token";

import type { Meta, StoryObj } from "@storybook/react";

Expand Down
2 changes: 1 addition & 1 deletion packages/timo-design-system/src/components/color/Color.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { ColorToken } from "../../tokens/color-token";
import { ColorToken } from "@tokens/color-token";

export const Color = ({ name, cssVar, value }: ColorToken) => {
return (
Expand Down
2 changes: 1 addition & 1 deletion packages/timo-design-system/src/components/priority-icon/PriorityIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { cn } from "../../lib";
import { cn } from "@lib";

export type Priority =
| "매우중요"
Expand Down
3 changes: 2 additions & 1 deletion packages/timo-design-system/src/components/typography/Typography.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { TYPOGRAPHY_TOKENS } from "@tokens/typography-token";

import { Typography } from "./Typography";
import { TYPOGRAPHY_TOKENS } from "../../tokens/typography-token";

import type { Meta, StoryObj } from "@storybook/react";

Expand Down
2 changes: 1 addition & 1 deletion packages/timo-design-system/src/components/typography/Typography.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { TypographyToken } from "../../tokens/typography-token";
import { TypographyToken } from "@tokens/typography-token";

export const Typography = ({
token,
Expand Down
2 changes: 1 addition & 1 deletion packages/timo-design-system/src/guides/StorybookGuide.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ export const Default: Story = {

```tsx
import { Color } from "./Color";
import { COLOR_TOKENS } from "../../tokens/color-token";
import { COLOR_TOKENS } from "@tokens/color-token";
import type { Meta, StoryObj } from "@storybook/react";

const meta = {
Expand Down
14 changes: 13 additions & 1 deletion packages/timo-design-system/tsconfig.json
View file
Open in desktop

@yumin-kim2 yumin-kim2 Jul 1, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

😍👍

Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,19 @@
"compilerOptions": {
"outDir": "dist",
"rootDir": "./src",
"strictNullChecks": true
"strictNullChecks": true,
"paths": {
"@components": ["./src/components/index.ts"],
"@components/*": ["./src/components/*"],
"@tokens/*": ["./src/tokens/*"],
"@icons": ["./src/icons/index.ts"],
"@icons/*": ["./src/icons/*"],
"@lib": ["./src/lib/index.ts"],
"@lib/*": ["./src/lib/*"],
"@styles/*": ["./src/styles/*"],
"@assets/*": ["./src/assets/*"],
"@guides/*": ["./src/guides/*"]
}
},
"include": ["src"],
"exclude": ["node_modules", "dist"]
Expand Down
Loading