[Fix] 빌드 후 typescript 절대 경로 상대 경로로 변환하지 못하는 에러 해결

.gitignore

@@ -42,4 +42,4 @@ styled-system-studio
 
 *storybook.log
 
-eslintcache
+.eslintcache

apps/wow-docs/app/page.tsx

@@ -1,22 +1,13 @@
-import { css } from "@styled-system/css/css";
+import Checkbox from "wowds-ui/Checkbox";
+import Chip from "wowds-ui/Chip";
 import Switch from "wowds-ui/Switch";
 
-import Checkbox from "../../../packages/wow-ui/src/components/Checkbox";
-
 const Home = () => {
   return (
     <>
-      <main
-        className={css({
-          color: "textBlack",
-          textStyle: "h1",
-          bg: "backgroundAlternative",
-        })}
-      >
-        <p>docs</p>
-      </main>
-      <Switch />
       <Checkbox />
+      <Chip label="Chip" />
+      <Switch />
     </>
   );
 };

package.json

@@ -32,6 +32,7 @@
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^11.1.6",
     "@rollup/plugin-url": "^8.0.2",
     "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^15.0.7",
@@ -72,6 +73,7 @@
     "theme": "workspace:^",
     "ts-jest": "^29.1.2",
     "ts-node": "^10.9.2",
+    "tsc-alias": "^1.8.10",
     "tsx": "^4.11.0",
     "turbo": "latest",
     "typescript": "^5.3.3",

packages/scripts/generateReactComponentFromSvg.ts

@@ -2,7 +2,7 @@ import { existsSync, promises as fs } from "fs";
 import path from "path";
 
 const SVG_DIR = "../wow-icons/src/svg";
-const COMPONENT_DIR = "../wow-icons/src/react";
+const COMPONENT_DIR = "../wow-icons/src/component";
 
 type SvgComponentMap = { [key: string]: string };
 
@@ -84,7 +84,7 @@ const createComponentContent = (
     import { forwardRef } from 'react';
     import { color } from "wowds-tokens";
 
-    import type { IconProps } from "../types/Icon.ts";
+    import type { IconProps } from "@/types/Icon.ts";
 
     const ${componentName} = forwardRef<SVGSVGElement, IconProps>(
       (${propsString}, ref) => {
@@ -130,7 +130,7 @@ const generateComponentFiles = async (svgComponentMap: SvgComponentMap) => {
 };
 
 const generateExportFile = async (components: string[]) => {
-  const EXPORT_FILE_PATH = "../wow-icons/src/react/index.ts";
+  const EXPORT_FILE_PATH = "../wow-icons/src/component/index.ts";
   const exportFileContent = components
     .map(
       (component) =>

packages/wow-icons/package.json

@@ -19,17 +19,17 @@
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/react/index.d.ts",
+      "types": "./dist/component/index.d.ts",
       "require": "./dist/index.cjs",
       "import": "./dist/index.js",
       "default": "./dist/index.js"
     }
   },
   "scripts": {
-    "build": "pnpm generate:icons && rm -rf dist && rollup -c --bundleConfigAsCjs && tsc --emitDeclarationOnly",
+    "build": "pnpm generate:icons && rm -rf dist && rollup -c --bundleConfigAsCjs && tsc-alias",
     "generate:icons": "tsx ../scripts/generateReactComponentFromSvg.ts && pnpm format && pnpm lint",
-    "lint": "eslint --fix ./src/react/**/*.tsx",
-    "format": "prettier --write ./src/react/**/*"
+    "lint": "eslint --fix ./src/component/**/*.tsx",
+    "format": "prettier --write ./src/component/**/*"
   },
   "keywords": [],
   "author": "gdsc-hongik",

packages/wow-icons/rollup.config.js

@@ -1,15 +1,25 @@
 import baseConfig from "../shared-config/rollup.config.js";
 import babel from "@rollup/plugin-babel";
+import alias from "@rollup/plugin-alias";
 import url from "@rollup/plugin-url";
 import typescript from "@rollup/plugin-typescript";
+import path from "path";
+import { fileURLToPath } from "url";
 
 const extensions = [".ts", ".tsx", ".js", ".jsx"];
 
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+process.env.BABEL_ENV = "production";
+
 export default {
   ...baseConfig,
-  input: "./src/react/index.ts",
+  input: "./src/component/index.ts",
   plugins: [
     ...baseConfig.plugins,
+    alias({
+      entries: [{ find: "@", replacement: path.join(__dirname, "./src") }],
+    }),
     babel({
       extensions,
       include: ["src/**/*"],

packages/wow-icons/src/react/Check.tsx → packages/wow-icons/src/component/Check.tsx

@@ -1,7 +1,7 @@
 import { forwardRef } from "react";
 import { color } from "wowds-tokens";
 
-import type { IconProps } from "../types/Icon.ts";
+import type { IconProps } from "@/types/Icon.ts";
 
 const Check = forwardRef<SVGSVGElement, IconProps>(
   (

packages/wow-icons/tsconfig.json

@@ -23,6 +23,6 @@
       "@/*": ["src/*"]
     }
   },
-  "include": ["src", "svg.d.ts"],
+  "include": ["src", "svg.d.ts", "**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules", "dist"]
 }

packages/wow-ui/package.json

@@ -49,7 +49,7 @@
   "keywords": [],
   "license": "ISC",
   "scripts": {
-    "build": "pnpm generate:build-config && rm -rf dist && rollup -c --bundleConfigAsCjs && panda cssgen --outfile dist/styles.css",
+    "build": "pnpm generate:build-config && rm -rf dist && rollup -c --bundleConfigAsCjs && tsc-alias && panda cssgen --outfile dist/styles.css",
     "lint": "eslint . --max-warnings 0",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
@@ -59,7 +59,6 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.3.3",
-    "@rollup/plugin-typescript": "^11.1.6",
     "@storybook/addon-a11y": "^7.5.3",
     "@storybook/addon-essentials": "^7.5.3",
     "@storybook/addon-interactions": "^7.5.3",

packages/wow-ui/rollup.config.js

@@ -22,14 +22,16 @@ export default {
     Box: "./src/components/Box",
     Button: "./src/components/Button",
     Checkbox: "./src/components/Checkbox",
+    Chip: "./src/components/Chip",
     Switch: "./src/components/Switch",
   },
   output: [
     {
       format: "esm",
       dir: "dist",
-      entryFileNames: "[name].js",
       preserveModules: true,
+      preserveModulesRoot: "src",
+      entryFileNames: "[name].js",
     },
     {
       format: "cjs",

packages/wow-ui/src/components/Checkbox/index.tsx

@@ -10,8 +10,8 @@ import type {
 import { forwardRef, useId } from "react";
 import { Check as CheckIcon } from "wowds-icons";
 
-//FIXME: alias 경로로 설정하면 import 경로 인식하지 못하는 문제가 있어서 상대경로로 우선 해결
-import { useCheckedState } from "../../hooks";
+import { useCheckedState } from "@/hooks";
+
 /**
  * @description 사용자가 선택하거나 선택 해제할 수 있는 체크박스 컴포넌트입니다.
  *

packages/wow-ui/src/components/Chip/index.tsx

@@ -9,7 +9,7 @@ import type {
   PolymorphicComponentProps,
   PolymorphicRef,
   ToggleButtonProps,
-} from "../../types";
+} from "@/types";
 
 /**
  * @template T 렌더링할 요소 또는 컴포넌트 타입

packages/wow-ui/src/types/index.ts

@@ -1,2 +1,2 @@
-export * from "./button";
+export * from "./Button";
 export * from "./Polymorphic";