diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml new file mode 100644 index 0000000..41fb2d7 --- /dev/null +++ b/.github/workflows/chromatic.yml @@ -0,0 +1,55 @@ +name: Chromatic Deployment + +on: + push: + branches: + - "develop" + pull_request: + branches: + - develop + +jobs: + chromatic-deploy: + runs-on: ubuntu-latest + permissions: + contents: read + pull-requests: write + steps: + - name: Checkout repository + uses: actions/checkout@v4 + with: + fetch-depth: 0 + + - name: Setup pnpm + uses: pnpm/action-setup@v4 + with: + version: 10 + + - name: Setup Node.js + uses: actions/setup-node@v4 + with: + node-version: 20 + cache: pnpm + + - name: Install dependencies + run: pnpm install --frozen-lockfile + + - name: Run Chromatic + id: chromatic + uses: chromaui/action@latest + with: + projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} + token: ${{ secrets.GITHUB_TOKEN }} + + - name: Comment Storybook URL on PR + if: github.event_name == 'pull_request' + uses: thollander/actions-comment-pull-request@v2 + with: + message: | + ## 📚 Storybook 배포 완료 + + | 항목 | 링크 | + |------|------| + | 📖 Storybook | ${{ steps.chromatic.outputs.storybookUrl }} | + | 🔍 Chromatic | ${{ steps.chromatic.outputs.buildUrl }} | + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} diff --git a/package.json b/package.json index 412c4f1..4f84f1d 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,8 @@ "prepare": "husky", "preview": "vite preview", "storybook": "storybook dev -p 6006", - "build-storybook": "storybook build" + "build-storybook": "storybook build", + "chromatic": "npx chromatic --project-token=$CHROMATIC_PROJECT_TOKEN" }, "dependencies": { "@hookform/resolvers": "^5.2.2", diff --git a/src/components/common/card/Card.tsx b/src/components/common/card/Card.tsx new file mode 100644 index 0000000..e69de29