06. test + CI & Changesets 설정

.changeset/config.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "https://unpkg.com/@changesets/config@3.1.2/schema.json",
+  "changelog": "@changesets/cli/changelog",
+  "commit": false,
+  "fixed": [],
+  "linked": [],
+  "access": "public",
+  "baseBranch": "main",
+  "updateInternalDependencies": "patch",
+  "ignore": []
+}

.changeset/three-needles-stand.md

@@ -0,0 +1,2 @@
+---
+---

.github/workflows/chromatic.yml

@@ -0,0 +1,82 @@
+name: "🎨 Chromatic"
+
+on:
+  pull_request: 
+    branches:
+      - dev
+    paths: 
+      - 'apps/storybook/**'
+      - 'packages/**'
+
+jobs:
+  chromatic-deploy:
+    runs-on: ubuntu-latest
+
+    permissions:
+      contents: read
+      pull-requests: write
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10.26.1
+          run_install: false
+
+      - name: Setup node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: pnpm
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Publish to Chromatic
+        id: chromatic
+        uses: chromaui/action@latest
+        with:
+          workingDir: apps/storybook
+          exitZeroOnChanges: true
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          token: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Comment PR with Storybook link
+        uses: thollander/actions-comment-pull-request@v2
+        with:
+          message: |
+            🎨 **스토리북 배포 링크 확인**
+
+            - 🔗 Storybook: ${{ steps.chromatic.outputs.storybookUrl }}
+            - 🧩 Build: ${{ steps.chromatic.outputs.buildUrl }}
+
+      - name: Publish Summary
+        run: |
+          echo "## 🎨 Chromatic 결과 요약" >> $GITHUB_STEP_SUMMARY
+          echo "" >> $GITHUB_STEP_SUMMARY
+          echo "| 항목 | 값 |" >> $GITHUB_STEP_SUMMARY
+          echo "| --- | --- |" >> $GITHUB_STEP_SUMMARY
+          echo "| 🔗 Storybook Preview | ${{ steps.chromatic.outputs.storybookUrl }} |" >> $GITHUB_STEP_SUMMARY
+          echo "| 🧩 Build Page | ${{ steps.chromatic.outputs.buildUrl }} |" >> $GITHUB_STEP_SUMMARY
+          echo "| 📦 Story Count | ${{ steps.chromatic.outputs.componentCount }} |" >> $GITHUB_STEP_SUMMARY
+          echo "| 🎯 Changed Stories | ${{ steps.chromatic.outputs.changeCount }} |" >> $GITHUB_STEP_SUMMARY
+
+      - name: Discord Webhook
+        uses: tsickert/discord-webhook@v7.0.0
+        with:
+          webhook-url: ${{ secrets.DISCORD_WEBHOOK }}
+          username: "Chromatic Bot - 머먹지"
+          avatar-url: "https://raw.githubusercontent.com/team-garibee/study/main/.github/assets/discordAvatar.png"
+          content: |
+            🎨 **Chromatic 배포 완료**
+
+            📌 PR: ${{ github.event.pull_request.title }}
+            👤 Author: ${{ github.event.pull_request.user.login }}
+
+            🔗 Storybook: ${{ steps.chromatic.outputs.storybookUrl }}
+            🧩 Build: ${{ steps.chromatic.outputs.buildUrl }}

.github/workflows/ci.yml

@@ -0,0 +1,52 @@
+name: "🧪 CI"
+
+on:
+  pull_request:
+    branches:
+      - dev
+      - main
+
+jobs:
+  validate:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 10.26.1
+          run_install: false
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: pnpm
+
+      - run: pnpm install --frozen-lockfile
+
+      - name: Cache Turbo
+        uses: actions/cache@v4
+        with:
+          path: .turbo
+          key: turbo-${{ runner.os }}-${{ github.ref }}
+          restore-keys: |
+            turbo-${{ runner.os }}-
+
+      - name: 🔎 LS-Lint
+        run: pnpm ls-lint
+
+      - name: 🎨 Format Check
+        run: pnpm format:check  
+
+      - name: 🧹 Lint
+        run: pnpm turbo run lint
+
+      - name: 🧠 Typecheck
+        run: pnpm turbo run typecheck
+
+      - name: 🧪 Test
+        run: pnpm turbo run test
+
+      - name: 🏗 Build
+        run: pnpm turbo run build

.github/workflows/release.yml

@@ -0,0 +1,52 @@
+name: "🚀 Release"
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 10.26.1
+          run_install: false
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: pnpm
+
+      - run: pnpm install --frozen-lockfile
+
+      - name: 🏗 Build before publish
+        run: pnpm turbo run build
+
+      - name: 🚀 Create Release PR or Publish
+        uses: changesets/action@v1
+        with:
+          version: pnpm changeset version
+          publish: pnpm changeset publish
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+      - name: 📢 Discord Notification
+        if: steps.changesets.outputs.published == 'true'
+        uses: tsickert/discord-webhook@v7.0.0
+        with:
+          webhook-url: ${{ secrets.DISCORD_WEBHOOK }}
+          username: "Release Bot - 머먹지"
+          avatar-url: "https://raw.githubusercontent.com/team-garibee/study/main/.github/assets/discordAvatar.png"
+          content: |
+            🚀 **머먹지 npm 배포 완료**
+
+            📦 Published Packages:
+            ${{ steps.changesets.outputs.publishedPackages }}
+
+            🔗 npm: https://www.npmjs.com/org/mumukji

.github/workflows/releaseReady.yml

@@ -0,0 +1,46 @@
+name: "🧑‍⚖️ Release Ready"
+
+on:
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  release-ready:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - run: git fetch origin main:main
+
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 10.26.1
+          run_install: false
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: pnpm
+
+      - run: pnpm install --frozen-lockfile
+
+      - name: 🔍 Detect package source changes
+        id: changes
+        uses: dorny/paths-filter@v3
+        with:
+          filters: |
+            release:
+              - 'packages/**'
+              - '!packages/**/*.test.ts'
+              - '!packages/**/*.test.tsx'
+              - '!packages/**/*.stories.tsx'
+              - '!packages/**/*.md'
+              - '!packages/**/*.stories.mdx'
+              - '!packages/**/*.mdx'
+
+      - name: 📦 Require Changeset
+        if: steps.changes.outputs.release == 'true'
+        run: pnpm changeset status

.husky/pre-commit

@@ -1,9 +1,3 @@
-echo "🔎 파일/폴더 네이밍 규칙 검사 (ls-lint)..."
-pnpm exec ls-lint || {
-  echo "⚠️ ls-lint 실패: 파일/폴더 네이밍 규칙을 확인해주세요."
-  exit 1
-}
-
 echo "🔎 staged 파일에 대한 Lint 검사..."
 pnpm exec lint-staged || {
   echo "⚠️ Lint 검사에서 오류가 발생했습니다. 커밋이 중단됩니다."

.ls-lint.yml

@@ -30,3 +30,5 @@ ignore:
   - '**/.storybook'
   - storybook-static
   - '**/storybook-static'
+  - .github
+  - .changeset

apps/storybook/package.json

@@ -7,9 +7,9 @@
     "dev": "storybook dev -p 6006",
     "build": "storybook build",
     "typecheck": "tsc --noEmit",
-    "chromatic": "chromatic --project-token=$CHROMATIC_PROJECT_TOKEN",
+    "chromatic": "chromatic",
     "clean": "rm -rf storybook-static",
-    "test": "vitest run"
+    "test": "vitest run --passWithNoTests"
   },
   "dependencies": {
     "@mumukji/icons": "workspace:*",
@@ -28,6 +28,7 @@
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.4",
     "@vitest/browser-playwright": "^4.0.18",
+    "chromatic": "^15.2.0",
     "playwright": "^1.58.2",
     "storybook": "^10.2.13",
     "vite": "^7.3.1",

package.json

@@ -20,7 +20,9 @@
     "test:storybook": "turbo run test --filter=@mumukji/storybook",
     "chromatic": "turbo run chromatic --filter=@mumukji/storybook",
     "ls-lint": "ls-lint",
-    "prepare": "husky"
+    "prepare": "husky",
+    "changeset": "changeset",
+    "changeset:status": "changeset status"
   },
   "lint-staged": {
     "**/*.{ts,tsx}": [
@@ -36,6 +38,7 @@
     ]
   },
   "devDependencies": {
+    "@changesets/cli": "^2.29.8",
     "@commitlint/cli": "^20.4.2",
     "@eslint/js": "^9.39.3",
     "@ls-lint/ls-lint": "^2.3.1",

packages/icons/rollup.config.mjs

@@ -23,7 +23,11 @@ export default [
         preserveModulesRoot: 'src',
       },
     ],
-    plugins: [resolve(), commonjs(), typescript({ tsconfig: './tsconfig.json' })],
+    plugins: [
+      resolve(),
+      commonjs(),
+      typescript({ tsconfig: './tsconfig.json' }),
+    ],
   },
   {
     input: 'dist/types/index.d.ts',

packages/tokens/rollup.config.mjs

@@ -17,6 +17,10 @@ export default [
         sourcemap: true,
       },
     ],
-    plugins: [resolve(), commonjs(), typescript({ tsconfig: './tsconfig.json' })],
+    plugins: [
+      resolve(),
+      commonjs(),
+      typescript({ tsconfig: './tsconfig.json' }),
+    ],
   },
 ];

packages/ui/package.json

@@ -44,7 +44,7 @@
   "scripts": {
     "watch": "rollup -cw",
     "typecheck": "tsc --noEmit",
-    "build": "tsc -p tsconfig.build.json && rollup -c && mv dist/esm/index.css dist/index.css && rm -rf dist/types",
+    "build": "tsc -p tsconfig.build.json && rollup -c && ([ -f dist/esm/index.css ] && mv dist/esm/index.css dist/index.css || true) && rm -rf dist/types",
     "clean": "rm -rf dist",
     "lint": "eslint .",
     "lint:fix": "eslint --fix ."