[Monorepo] 디자인 시스템(1)

디자인 시스템을 만들었으니 이를 사용하는 방법을 알아보자.

1. button 만들기

export const Button = () => {
  return <button>Button</button>;
};

간단하게 위처럼 버튼을 만들고 vite 환경으로 만든 프로젝트에서 사용해보자.

apps/test/package.json

{
  ...
  "dependencies": {
    "@packages/ui": "workspace:*"
  }
  ...
}

위처럼 디펜던시를 추가하고, 빌드를 하게되면 디자인 시스템 패키지가 빌드되어 프로젝트에 적용된다.

2. 디자인 시스템 패키지 사용하기

$ pnpm install
$ pnpm @packages/ui:build

import { Button } from "@packages/ui";

export const App = () => {
  return <Button />;
};

하지만 뭐가 문제인지 버튼이 보이지 않는다.

이는 디자인 시스템 패키지가 빌드되어 생성된 버튼 컴포넌트가 프로젝트에 적용되지 않았기 때문이다.

우선은 packages/ui/package.json 에 몇가지 문제가 있었다.
rollup 설정에서의 메인 엔트리 경로와 package.json의 main 경로가 일치하지 않았다.

packages/ui/package.json

{
  "name": "@packages/ui",
  "version": "1.0.0",
  "description": "",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "scripts": {
    "build": "rollup -c rollup.config.mjs",
    "storybook": "storybook dev -p 6006",
    "storybook:build": "storybook build",
    "build-storybook": "storybook build"
  },
  "keywords": [],
  "author": "WONILLISM",
  "license": "ISC",
  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "tslib": "^2.7.0"
  },
  "devDependencies": {
    "@chromatic-com/storybook": "^1.9.0",
    "@rollup/plugin-commonjs": "^28.0.0",
    "@rollup/plugin-json": "^6.1.0",
    "@rollup/plugin-node-resolve": "^15.3.0",
    "@storybook/addon-essentials": "^8.3.4",
    "@storybook/addon-interactions": "^8.3.4",
    "@storybook/addon-links": "^8.3.4",
    "@storybook/addon-onboarding": "^8.3.4",
    "@storybook/blocks": "^8.3.4",
    "@storybook/react": "^8.3.4",
    "@storybook/react-vite": "^8.3.4",
    "@storybook/test": "^8.3.4",
    "@types/react": "^18.3.11",
    "@types/react-dom": "^18.3.0",
    "prop-types": "^15.8.1",
    "rollup": "^4.24.0",
    "rollup-plugin-peer-deps-external": "^2.2.4",
    "rollup-plugin-terser": "^7.0.2",
    "rollup-plugin-typescript2": "^0.36.0",
    "storybook": "^8.3.4"
  },
  "peerDependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  }
}

packages/ui/rollup.config.mjs

// javascript/typescript 프로젝트 번들링하기 위한 rollup 설정

import peerDepsExternal from "rollup-plugin-peer-deps-external";
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "rollup-plugin-typescript2";
import json from "@rollup/plugin-json";
import { terser } from "rollup-plugin-terser";

export default {
  input: "src/index.ts", // 메인 엔트리 경로
  output: [
    // CommonJS 형식으로 dist/index.js 생성
    // 소스맵 생성
    {
      file: "dist/index.js",
      format: "cjs",
      sourcemap: true,
    },
    // ES Module 형식으로 dist/index.esm.js 생성
    // 소스맵 생성
    {
      file: "dist/index.esm.js",
      format: "esm",
      sourcemap: true,
    },
  ],
  plugins: [
    peerDepsExternal(), // peerDependencies에 있는 모듈을 외부 모듈로 처리 - 번들링에 포함되지 않음
    resolve(), // 모듈 경로 해석
    commonjs(), // CommonJS 모듈을 ES6 Module로 변환
    typescript({
      tsconfigOverride: {
        compilerOptions: {
          declaration: true,
          declarationDir: "./dist",
        },
      },
      clean: true,
    }), // typescript 파일을 컴파일, 선언 파일( .d.ts ) 생성
    json(), // json 파일을 읽어오는 플러그인
    terser(), // 코드 압축, 난독화
  ],
};

다시 확인하고 실행해보면 버튼이 보이는 것을 확인할 수 있을 줄 알았지만 ? 역시 인식하지 못했다.

개발자 도구에서 확인해보면 아래와 같은 에러가 발생한다.
Uncaught SyntaxError: The requested module does not provide an export named 'Button'

해당 에러는 번들된 모듈이 Button을 제대로 내보내지 않아서 발생하는 에러인데...
크게 잘못된점이 없어 보인다. 여러방식으로 시도해보던중 혹시 vite 설정에서 문제가 있는것이 아닐까 싶어서 확인해보았다.

검색해보니 번들링된 모듈을 모듈 환경에서 인식하지 못하는 것 같아서 아래와 같이 설정을 추가해주었다.

apps/test/vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    include: ["@packages/ui"],
  },
});