Feat/component : Button 컴포넌트, color pallet

.github/workflows/chromatic.yml

@@ -34,6 +34,9 @@ jobs:
       - name: Install dependencies
         run: pnpm install
 
+      - name: Build UI Package
+        run: pnpm --filter @repo/ui build
+
       - name: Build Storybook
         run: pnpm --filter storybook build-storybook
 

.vscode/settings.json

@@ -3,5 +3,10 @@
     {
       "mode": "auto"
     }
-  ]
+  ],
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.organizeImports": "explicit"
+  }
 }

apps/storybook/.storybook/main.ts

@@ -2,11 +2,16 @@ import type { StorybookConfig } from "@storybook/react-vite";
 import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
 
 const config: StorybookConfig = {
-  stories: ["../../../packages/ui/src/**/*.stories.@(js|jsx|ts|tsx)"],
+  stories: [
+    "../../../packages/ui/src/**/*.stories.@(js|jsx|ts|tsx)",
+    "../../../packages/ui/src/**/*.mdx", // 문서화용 MDX 파일 추가
+  ],
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
+    "@storybook/addon-docs", // 문서화 애드온
+    "@storybook/blocks",
   ],
   framework: {
     name: "@storybook/react-vite",

apps/storybook/.storybook/preview.ts

@@ -1,5 +1,5 @@
+import "@repo/ui/global.css";
 import type { Preview } from "@storybook/react";
-import "../../../packages/ui/src/globalStyle/global.css"; // alias 설정해도 안됨
 
 const preview: Preview = {
   parameters: {

apps/storybook/package.json

@@ -12,7 +12,10 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "3.2.5",
+    "@mdx-js/react": "^3.1.0",
+    "@mdx-js/rollup": "^3.1.0",
     "@storybook/addon-actions": "^8.6.4",
+    "@storybook/addon-docs": "^8.6.4",
     "@storybook/addon-essentials": "8.6.4",
     "@storybook/addon-interactions": "8.6.4",
     "@storybook/addon-links": "^8.6.4",

apps/storybook/tsconfig.json

@@ -15,7 +15,8 @@
     "baseUrl": ".", // alias 기준 설정
     "paths": {
       "@/*": ["./src/*"],
-      "@repo/ui/*": ["../../../packages/ui/*"] // alias  설정
+      "@components/*": ["../../packages/ui/src/components/*"],
+      "@store/*": ["../../packages/ui/src/store/*"]
     }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],

apps/storybook/vite.config.ts

@@ -1,14 +1,7 @@
 import react from "@vitejs/plugin-react-swc";
-import path from "path";
 import { defineConfig } from "vite";
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
-  // alias 설정 추가
-  resolve: {
-    alias: {
-      "@repo/ui": path.resolve(__dirname, "../../../packages/ui"),
-    },
-  },
 });

apps/user/src/app/layout.tsx

@@ -1,3 +1,4 @@
+// import "@repo/ui/globalStyle";
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";

apps/user/src/app/page.tsx

@@ -1,12 +1,10 @@
 import Image from "next/image";
-import styles from "./page.module.css";
 
 export default function Home() {
   return (
-    <div className={styles.page}>
-      <main className={styles.main}>
+    <div>
+      <main>
         <Image
-          className={styles.logo}
           src="/next.svg"
           alt="Next.js logo"
           width={180}
@@ -20,15 +18,13 @@ export default function Home() {
           <li>Save and see your changes instantly.</li>
         </ol>
 
-        <div className={styles.ctas}>
+        <div>
           <a
-            className={styles.primary}
             href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
             target="_blank"
             rel="noopener noreferrer"
           >
             <Image
-              className={styles.logo}
               src="/vercel.svg"
               alt="Vercel logomark"
               width={20}
@@ -40,13 +36,12 @@ export default function Home() {
             href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
             target="_blank"
             rel="noopener noreferrer"
-            className={styles.secondary}
           >
             Read our docs
           </a>
         </div>
       </main>
-      <footer className={styles.footer}>
+      <footer>
         <a
           href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
           target="_blank"

package.json

@@ -18,12 +18,14 @@
     "@changesets/cli": "^2.28.1",
     "@repo/eslint-config": "workspace:*",
     "@repo/typescript-config": "workspace:*",
+    "@repo/ui": "workspace:*",
     "@storybook/react": "8.6.4",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^5.2.3",
     "husky": "^9.1.7",
     "lint-staged": "^15.4.3",
     "prettier": "^3.5.3",
+    "tsc-alias": "^1.8.11",
     "turbo": "^2.4.4",
     "typescript": "^5.8.2"
   },

packages/ui/eslint.config.mjs

@@ -0,0 +1,3 @@
+import baseConfig from "@repo/eslint-config/base";
+
+export default [...baseConfig];

packages/ui/package.json

@@ -4,16 +4,18 @@
   "private": true,
   "exports": {
     "./*": {
-      "types": "./src/*.ts",
+      "types": "./dist/*.d.ts",
+      "import": "./dist/*.mjs",
       "default": "./dist/*.js"
-    }
+    },
+    "./global.css": "./dist/global.css"
   },
   "scripts": {
     "lint": "eslint . --max-warnings 0",
     "generate:component": "turbo gen react-component",
     "check-types": "tsc --noEmit",
-    "dev": "tsc --watch",
-    "build": "tsc"
+    "dev": "vite",
+    "build": "vite build"
   },
   "devDependencies": {
     "@repo/eslint-config": "workspace:*",
@@ -29,8 +31,11 @@
   "dependencies": {
     "@vanilla-extract/css": "^1.17.1",
     "@vanilla-extract/recipes": "^0.5.5",
+    "@vanilla-extract/vite-plugin": "^5.0.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-icons": "^5.5.0"
+    "react-icons": "^5.5.0",
+    "vite": "^6.1.0",
+    "vite-plugin-dts": "^4.5.0"
   }
 }