[Fix] #67 - resolve storybook/build 이슈 해결 및 npm lockfile 제거#68
Conversation
📝 WalkthroughWalkthroughThis pull request removes Storybook/Vitest integration by updating addon and configuration settings, eliminates the Header widget from HomePage and its barrel export, removes an unused React import from pagination, and converts the Vite configuration to an async factory with conditional test setup based on environment variables. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related issues
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@vite.config.ts`:
- Line 11: The code checks process.env.VITEST via the isVitest variable (const
isVitest) so Storybook's Vitest-gated config (the browser test registration
guarded by isVitest) never runs unless VITEST is set; add a test entry in
package.json (or update your CI/test workflow) that exports VITEST=true when
running Vitest (for example a "test:storybook" script that sets VITEST=true
before invoking vitest) so isVitest becomes true and the Storybook Vitest
integration tests are registered and executed.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 8f51f796-6ed8-427b-9b0f-9f8cfac48f38
⛔ Files ignored due to path filters (2)
package-lock.jsonis excluded by!**/package-lock.jsonpnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (7)
.storybook/main.tssrc/pages/home/home.tsxsrc/shared/ui/lists/lists.stories.tsxsrc/shared/ui/lists/lists.tsxsrc/shared/ui/pagination/pagination.tsxsrc/widgets/index.tsvite.config.ts
💤 Files with no reviewable changes (3)
- src/widgets/index.ts
- src/shared/ui/pagination/pagination.tsx
- src/pages/home/home.tsx
| alias: { | ||
| "@": path.resolve(dirname, "./src"), | ||
| export default defineConfig(async () => { | ||
| const isVitest = process.env.VITEST === "true"; |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "Scanning package.json scripts for vitest/storybook/VITEST usage..."
fd '^package\.json$' --type f | while read -r file; do
echo ""
echo "== $file =="
jq -r '.scripts // {} | to_entries[] | "\(.key): \(.value)"' "$file" \
| rg -n 'vitest|storybook|VITEST|test' || true
doneRepository: ajou-industry-matching/aim-frontend
Length of output: 235
🏁 Script executed:
# First, let's check the vite.config.ts file at the relevant lines
cat -n vite.config.ts | head -50Repository: ajou-industry-matching/aim-frontend
Length of output: 1758
🏁 Script executed:
# Check for vitest configuration files
fd -e 'vitest\.config\.(ts|js)$|\.vitest\.*' --type fRepository: ajou-industry-matching/aim-frontend
Length of output: 61
🏁 Script executed:
# Search for all test-related scripts or env setup
rg -i 'VITEST|vitest.*config' --type ts --type js --max-count 20Repository: ajou-industry-matching/aim-frontend
Length of output: 589
🏁 Script executed:
# Search for vitest config with all possible extensions
fd -i 'vitest' -e 'config' -e 'mts' -e 'cjs' --type fRepository: ajou-industry-matching/aim-frontend
Length of output: 61
🏁 Script executed:
# Get the complete package.json to see all scripts
cat -n package.jsonRepository: ajou-industry-matching/aim-frontend
Length of output: 2172
🏁 Script executed:
# Check for CI/CD configuration files
fd -e 'yml' -e 'yaml' -e 'json' --path '*/.github/*' --type f | head -20Repository: ajou-industry-matching/aim-frontend
Length of output: 312
🏁 Script executed:
# Check for CI/CD files
find .github -type f 2>/dev/null | head -20Repository: ajou-industry-matching/aim-frontend
Length of output: 287
🏁 Script executed:
# Search for any file that might set VITEST environment
rg 'VITEST' --type-list | head -5
rg 'VITEST\s*=' -r . --type yaml --type json --type sh 2>/dev/null || echo "No matches in YAML/JSON/SH files"Repository: ajou-industry-matching/aim-frontend
Length of output: 518
🏁 Script executed:
# Check the GitHub Actions workflows for VITEST env setup
cat -n .github/workflows/firebase-hosting-merge.ymlRepository: ajou-industry-matching/aim-frontend
Length of output: 830
🏁 Script executed:
# Also check the pull request workflow
cat -n .github/workflows/firebase-hosting-pull-request.ymlRepository: ajou-industry-matching/aim-frontend
Length of output: 938
Add a test script that sets VITEST=true to enable Storybook Vitest integration tests.
The vite.config.ts conditionally gates the Storybook browser test configuration (lines 20–45) on process.env.VITEST === "true", but no npm script currently sets this environment variable. As a result, these tests will not be registered or executed. Either add a test script like "test:storybook": "VITEST=true vitest" to package.json, or update the existing build/test workflow to set the environment variable when running tests.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@vite.config.ts` at line 11, The code checks process.env.VITEST via the
isVitest variable (const isVitest) so Storybook's Vitest-gated config (the
browser test registration guarded by isVitest) never runs unless VITEST is set;
add a test entry in package.json (or update your CI/test workflow) that exports
VITEST=true when running Vitest (for example a "test:storybook" script that sets
VITEST=true before invoking vitest) so isVitest becomes true and the Storybook
Vitest integration tests are registered and executed.
1 participant
📝 Changes
package-lock.json제거mdx패턴 제거vite.config.ts분리lists.tsx,lists.stories.tsx제거HomePage의 불필요한Header참조 제거pagination.tsx의 unusedReactimport 제거✔ Checklist
pnpm build성공pnpm build-storybook성공🙏 Request
우리 프로젝트는
pnpm기준으로 의존성을 관리합니다.이번 이슈는
npm실행으로package-lock.json이 유입되면서 의존성 관리 기준이 섞였고 그 상태에서 Storybook/빌드 관련 문제가 함께 드러난 케이스였습니다.이 프로젝트에서는 반드시
pnpm만 사용해야 하며npm install또는npm i명령어 대신pnpm install또는pnpm i를 사용해주세요~Summary by CodeRabbit