[fix] 스토리북 배포 오류 수정 및 Chromatic CI/CD 자동화 적용 by oesnuj · Pull Request #1287 · Moadong/moadong

oesnuj · 2026-03-02T08:00:34Z

📝 작업 내용

문제 1. 로컬에서 Storybook 배포 시 흰 화면 발생

로컬 스크립트로 Storybook을 직접 배포하는 방식을 사용하다가 흰 화면이 뜨는 문제가 발생했습니다. 콘솔에 아무 에러도 표시되지 않아 원인을 찾기 어려웠습니다.

알고 보니 Storybook 빌드(build-storybook) 시 public/ 폴더 전체가 빌드 결과물(storybook-static/)로 복사되는데, 이 과정에서 public/index.html이 Storybook 진입점인 storybook-static/index.html을 덮어쓰고 있었습니다.

에러가 아니었기 때문에 그냥 흰화면만 계속 보였던 것입니다.

public/index.html은 이미 사용되지 않는 중복 파일이었으므로 제거했습니다.

`frontend/public/index.html` 제거 (Vite 엔트리포인트는 `frontend/index.html`이 맞음)

문제 2. Storybook을 매번 로컬에서 직접 배포해야 하는 불편함

PR마다 로컬에서 직접 배포하지 않아도 되도록 Chromatic CI를 연동했습니다.

PR 생성/업데이트 시 자동으로 Storybook 스냅샷 캡처 및 UI 변경 감지
main 머지 시 baseline 자동 승인으로 불필요한 리뷰 누적 방지
변경된 스토리가 있을 때만 Chromatic 리뷰 링크와 Storybook 링크를 PR 코멘트로 제공

변경 있음
🎨 UI 변경사항을 확인해주세요
🔍 변경사항 리뷰 | https://...
📖 Storybook     | https://...
N개 스토리 변경 · 전체 N개 스토리 · N개 컴포넌트

변경 없음
✅ UI 변경사항 없음
📖 Storybook | https://...
전체 N개 스토리 · N개 컴포넌트

기타 Storybook 10 설정 정리

`addon-onboarding` 제거 (Storybook 10에서 기본 포함)
`Preview` 타입 import를 `@storybook/react-vite`로 수정

🫡 참고사항

Chromatic 연동을 위해 레포 Settings → Secrets에 `CHROMATIC_PROJECT_TOKEN`을 추가했습니다.

Summary by CodeRabbit

New Features
- PR에서 UI 변경을 자동 검사하고 변경 요약 및 빌드/Storybook 링크를 PR 댓글로 게시하는 Chromatic 워크플로우 추가.
Chores
- Storybook 설정 정리로 초기화 성능 및 로딩 경감.
- 불필요한 정적 HTML 및 메타데이터 제거로 배포 번들 간소화 및 SEO/메타 태그 정리.

- addon-onboarding 제거 (storybook 10에서 기본 포함) - Preview 타입을 react-vite로 수정 (프레임워크 타입 일치) - publicDir: false 추가 (스토리북 빌드 시 public 에셋 중복 포함 방지)

- PR 시 Storybook 스냅샷 캡처 및 UI 변경 감지 - main 머지 시 baseline 자동 승인 (autoAcceptChanges) - 변경 여부에 따라 PR 코멘트 분기 처리

publicDir: false 설정으로 인해 storybook 빌드 시 mockServiceWorker.js가 포함되지 않아 MSW 초기화 실패하는 문제 수정

vercel · 2026-03-02T08:00:39Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
moadong	Ready	Preview, Comment	Mar 2, 2026 8:18am

coderabbitai · 2026-03-02T08:01:19Z

Warning

`.coderabbit.yaml` has a parsing error

The CodeRabbit configuration file in this repository has a parsing error and default settings were used instead. Please fix the error(s) in the configuration file. You can initialize chat with CodeRabbit to get help with the configuration file.

💥 Parsing errors (1)

Validation error: Invalid regex pattern for base branch. Received: "**" at "reviews.auto_review.base_branches[0]"

⚙️ Configuration instructions

Please see the configuration documentation for more information.
You can also validate your configuration using the online YAML validator.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

Jira integration is disabled

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between d203ea9 and 3f9f941.

📒 Files selected for processing (1)

.github/workflows/chromatic.yml

🚧 Files skipped from review as they are similar to previous changes (1)

.github/workflows/chromatic.yml

Walkthrough

Chromatic GitHub Actions 워크플로우를 추가하고 Storybook 설정을 Vite용으로 조정하며, 프런트엔드 정적 루트 HTML 파일을 삭제했습니다. 변경은 CI 및 Storybook 구성과 관련됩니다. (≤50단어)

Changes

Cohort / File(s)	Summary
Chromatic CI 통합 `/.github/workflows/chromatic.yml`	Chromatic 실행 및 결과 기반 PR 코멘트 추가 워크플로우 추가. main 및 develop-fe 대상 트리거, frontend 디렉터리에서 Node 20, npm ci, chromaui/action 사용.
Storybook 구성 업데이트 `frontend/.storybook/main.ts`, `frontend/.storybook/preview.tsx`	Storybook 애드온 배열에서 일부 애드온 제거(`@chromatic-com/storybook`, `@storybook/addon-docs` 유지) 및 Preview 타입 임포트를 `@storybook/react-vite`로 변경.
정적 파일 제거 `frontend/public/index.html`	프로젝트의 루트 정적 HTML(메타데이터, SEO/OG/Twitter 태그, 폰트, 스크립트 포함) 파일 삭제.

Sequence Diagram(s)

sequenceDiagram
    participant GH as GitHub Actions
    participant Repo as Repository (frontend/)
    participant Node as Node / npm
    participant Chromatic as Chromatic Service
    participant GitHub as GitHub PR

    GH->>Repo: workflow trigger (push/PR/dispatch)
    GH->>Node: setup Node 20 + npm cache
    GH->>Repo: npm ci (install)
    GH->>Repo: run chromaui/action (build Storybook)
    Repo->>Chromatic: upload Storybook build
    Chromatic-->>GH: analysis (changed stories/components)
    GH->>GitHub: post PR comment with Chromatic links & counts

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

[feature] Common 컴포넌트 스토리 파일 적용 #225: 동일한 Storybook 구성 파일(.storybook/main.ts, .storybook/preview.tsx) 변경과 연관됨.
[chore] 빌드 툴 Webpack to Vite 전환 #844: Storybook Vite 적응 및 frontend/index.html 관련 Vite 마이그레이션 변경과 관련됨.
[feature] 메인화면 컴포넌트 스토리북 추가 #1128: 같은 preview 파일(frontend/.storybook/preview.tsx)에 대한 추가 변경(ThemeProvider/mixpanel 등)과 코드 레벨 연관성 존재.

Suggested reviewers

lepitaaar
seongwon030
suhyun113

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	PR 제목이 변경 사항의 주요 목적을 명확하게 요약하고 있습니다. 스토리북 배포 오류 수정과 Chromatic CI/CD 자동화라는 두 가지 핵심 변경 사항을 모두 포함하고 있으며, 실제 파일 변경(chromatic.yml 추가, storybook 설정 수정, index.html 삭제)과 일치합니다.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch fix/#1286-storybook-deploy-and-chromatic-ci-MOA-718

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

github-actions · 2026-03-02T08:02:05Z

🎨 UI 변경사항을 확인해주세요

변경된 스토리를 Chromatic에서 확인해주세요.

구분	링크
🔍 변경사항 리뷰	https://www.chromatic.com/build?appId=67904e61c16daa99a63b44a7&number=28
📖 Storybook	https://67904e61c16daa99a63b44a7-sehsbfsohs.chromatic.com/

22개 스토리 변경 · 전체 58개 스토리 · 23개 컴포넌트

coderabbitai

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In @.github/workflows/chromatic.yml:
- Around line 20-23: The chromatic job currently lacks an explicit permissions
block which can cause the comment step to fail if repository defaults are
read-only; add a permissions mapping under the chromatic job (job name
"chromatic") and set pull-requests: write so the comment step has the required
write access; ensure the new permissions: block is adjacent to runs-on:
ubuntu-latest/defaults in the job definition so GitHub Actions picks it up.
- Around line 29-45: The workflow uses mutable action refs (actions/checkout@v4,
actions/setup-node@v4, chromaui/action@latest,
marocchino/sticky-pull-request-comment@v2); replace each tag/alias with the
corresponding repository commit SHA to pin the exact release and prevent
supply-chain tampering. Locate the occurrences of actions/checkout,
actions/setup-node, chromaui/action, and marocchino/sticky-pull-request-comment
in the file and update their "uses:" values from tag/@latest to the full commit
SHA (e.g., use the action repo's commit SHA for the same release you currently
rely on), keeping the rest of the step configuration unchanged. Ensure you
verify the SHA matches the intended tag/release and document the pinned SHAs in
the PR for future maintenance.

ℹ️ Review info

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

Jira integration is disabled

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 581d73c and d203ea9.

📒 Files selected for processing (4)

.github/workflows/chromatic.yml
frontend/.storybook/main.ts
frontend/.storybook/preview.tsx
frontend/public/index.html

💤 Files with no reviewable changes (1)

frontend/public/index.html

.github/workflows/chromatic.yml

- 표 헤더(구분/링크) 추가

seongwon030

index.html을 덮어쓰는 문제였군요 해결하느라 수고많으셨습니다

oesnuj added 4 commits March 2, 2026 16:41

chore: 미사용 public/index.html 제거

969b9fc

fix: storybook 10 마이그레이션 설정 수정

4c964ba

- addon-onboarding 제거 (storybook 10에서 기본 포함) - Preview 타입을 react-vite로 수정 (프레임워크 타입 일치) - publicDir: false 추가 (스토리북 빌드 시 public 에셋 중복 포함 방지)

ci: Chromatic 시각적 회귀 테스트 워크플로우 추가

03ca050

- PR 시 Storybook 스냅샷 캡처 및 UI 변경 감지 - main 머지 시 baseline 자동 승인 (autoAcceptChanges) - 변경 여부에 따라 PR 코멘트 분기 처리

fix: publicDir 설정 제거로 MSW Service Worker 에러 수정

d203ea9

publicDir: false 설정으로 인해 storybook 빌드 시 mockServiceWorker.js가 포함되지 않아 MSW 초기화 실패하는 문제 수정

oesnuj requested review from lepitaaar, seongwon030 and suhyun113 March 2, 2026 08:00

oesnuj self-assigned this Mar 2, 2026

oesnuj added 💻 FE Frontend 📦 CI/CD CI/CD 관련 설정 및 유지보수 🛠Fix 기능이 의도한 대로 동작하지 않는 버그를 수정 labels Mar 2, 2026

coderabbitai bot reviewed Mar 2, 2026

View reviewed changes

.github/workflows/chromatic.yml Show resolved Hide resolved

.github/workflows/chromatic.yml Show resolved Hide resolved

fix: Chromatic 워크플로우 PR 코멘트 표 헤더 추가

3f9f941

- 표 헤더(구분/링크) 추가

vercel bot deployed to Preview March 2, 2026 08:18 View deployment

seongwon030 approved these changes Mar 2, 2026

View reviewed changes

oesnuj merged commit d41d56f into develop-fe Mar 2, 2026
5 checks passed

oesnuj linked an issue Mar 2, 2026 that may be closed by this pull request

[fix] MOA-718 스토리북 배포 오류 수정 및 Chromatic CI/CD 자동화 적용 #1286

Closed

6 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[fix] 스토리북 배포 오류 수정 및 Chromatic CI/CD 자동화 적용#1287

[fix] 스토리북 배포 오류 수정 및 Chromatic CI/CD 자동화 적용#1287
oesnuj merged 5 commits intodevelop-fefrom
fix/#1286-storybook-deploy-and-chromatic-ci-MOA-718

oesnuj commented Mar 2, 2026 •

edited by coderabbitai bot

Loading

Uh oh!

vercel bot commented Mar 2, 2026 •

edited

Loading

Uh oh!

coderabbitai bot commented Mar 2, 2026 •

edited

Loading

`.coderabbit.yaml` has a parsing error

Uh oh!

github-actions bot commented Mar 2, 2026 •

edited

Loading

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

Uh oh!

seongwon030 left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

oesnuj commented Mar 2, 2026 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📝 작업 내용

문제 1. 로컬에서 Storybook 배포 시 흰 화면 발생

문제 2. Storybook을 매번 로컬에서 직접 배포해야 하는 불편함

기타 Storybook 10 설정 정리

🫡 참고사항

Summary by CodeRabbit

Uh oh!

vercel bot commented Mar 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai bot commented Mar 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

.coderabbit.yaml has a parsing error

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Possibly related PRs

Suggested reviewers

Uh oh!

github-actions bot commented Mar 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎨 UI 변경사항을 확인해주세요

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

seongwon030 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

oesnuj commented Mar 2, 2026 •

edited by coderabbitai bot

Loading

vercel bot commented Mar 2, 2026 •

edited

Loading

coderabbitai bot commented Mar 2, 2026 •

edited

Loading

`.coderabbit.yaml` has a parsing error

github-actions bot commented Mar 2, 2026 •

edited

Loading