Setting(design-system): storybook 설정 및 chromatic 배포 #14
Conversation
Walkthroughdesign-system 패키지에 Storybook(Vite/React) 설정과 관련 스토리·MDX 문서, Vitest+Playwright 통합, ESLint flat-config 확장, Turbo/CI 워크플로우, .gitignore 항목 및 Button 컴포넌트 구현·스토리가 추가되었습니다. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor Dev as 개발자
participant CLI as pnpm / Storybook CLI
participant Vite as @storybook/react-vite (Vite)
participant DS as @pinback/design-system (.storybook + src)
Dev->>CLI: pnpm dev:storybook
CLI->>Vite: 프레임워크 초기화 (react-vite)
CLI->>DS: stories 로드 (../src/**/*.mdx, **/*.stories.*)
CLI->>DS: addons 적용 (docs, a11y, onboarding, vitest 등)
DS-->>CLI: 렌더된 스토리 제공
CLI-->>Dev: Storybook UI 응답 (포트 6006)
note right of CLI: preview params 적용 (actions, controls, autodocs)
sequenceDiagram
autonumber
actor CI as GitHub Actions
participant Repo as repository
participant Build as pnpm --filter @pinback/design-system run build:storybook
participant Chromatic as Chromatic Action
participant Vitest as Vitest Runner
CI->>Repo: checkout
CI->>Build: 빌드 실행 -> storybook-static 생성
Build-->>CI: storybook-static artifacts
CI->>Chromatic: 업로드 (packages/design-system)
CI->>Vitest: storybookTest 기반 테스트 실행 (Playwright)
Vitest-->>CI: 테스트 결과
CI-->>PR: PR 코멘트로 퍼블리시/실패 알림
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Tip 🔌 Remote MCP (Model Context Protocol) integration is now available!Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats. ✨ Finishing Touches🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
Status, Documentation and Community
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/design-system/vite.config.ts (1)
18-20: ESM에서 __dirname 미정의 — 계산된 dirname 변수로 교체 필요상단에서 ESM 호환
dirname을 계산해 두셨지만 alias에서는 여전히__dirname을 사용하고 있어 ESM 환경에서 실패합니다.dirname변수로 교체하세요.수정 제안:
resolve: { alias: { - '@': path.resolve(__dirname, 'src'), - '@utils': path.resolve(__dirname, './src/utils'), + '@': path.resolve(dirname, 'src'), + '@utils': path.resolve(dirname, './src/utils'), }, },
🧹 Nitpick comments (11)
.gitignore (1)
44-45: Storybook/Playwright 산출물 추가 무시와 디렉터리 패턴 명시 권장storybook-static는 디렉터리이므로 슬래시를 붙여 의도를 명확히 하고, 브라우저 프로바이더(Playwright) 사용 시 생성되는 리포트/결과물도 함께 무시하는 것이 깔끔합니다.
적용 제안(diff):
-*storybook.log -storybook-static +*storybook.log +storybook-static/ +# Vitest Browser(Playwright) artifacts +playwright-report/ +test-results/ +.playwright/packages/design-system/vitest.shims.d.ts (1)
1-1: triple-slash 레퍼런스 대신 tsconfig types로 관리 권장프로젝트 전역 타입 주입은 tsconfig의 compilerOptions.types에서 관리하는 편이 유지보수에 안전합니다. 현재 방식도 동작하나, 설정 위치를 tsconfig로 옮기면 IDE/타입 추론 일관성이 좋아집니다.
예시(tsconfig.json 일부, 패키지 기준):
{ "compilerOptions": { "types": ["vitest", "@vitest/browser/providers/playwright"] }, "include": ["src", ".storybook", "vitest.setup.ts", "vitest.shims.d.ts"] }packages/design-system/src/Introduction.mdx (3)
3-3: 사이드바 그룹핑을 위한 제목 네이밍 제안스토리북 사이드바에서 문서 섹션을 정리하려면 상위 그룹을 포함한 타이틀이 유용합니다. 예: Docs/Introduction
-<Meta title="Introduction" /> +<Meta title="Docs/Introduction" />
9-12: 불필요한
다중 사용 제거 권장MDX에서는 빈 줄로도 충분한 여백을 확보할 수 있습니다. 다중
는 접근성과 문서 가독성 면에서 비추천입니다.-<br /> -<br /> -<br /> +
1-29: 문서 위치 컨벤션 확인이전 PR에서 docs 디렉터리를 컨벤션 문서 용도로 사용할 계획이라고 하셨습니다(장기 학습 내용 참조). Storybook 문서 페이지도 해당 디렉터리를 활용할지, 현재처럼 src 아래에 둘지 결정이 필요합니다. 스토리 탐색 패턴(main.ts의 stories 설정)에 따라 경로를 일관화하는 것을 권장합니다.
원하시면 main.ts의 stories 패턴에 맞춰 문서 경로 재배치와 링크 업데이트까지 일괄 패치를 제안드릴 수 있습니다.
packages/design-system/.storybook/preview.ts (1)
1-1: 타입 import 경로 정렬 제안Storybook 8 기준 Preview 타입은 프레임워크 패키지(@storybook/react)에서 가져오는 것이 일반적입니다. 빌더와의 결합을 줄이는 방향을 권장합니다.
-import type { Preview } from '@storybook/react-vite'; +import type { Preview } from '@storybook/react';packages/design-system/eslint.config.mjs (3)
12-20: ignore 패턴 정리 및 Storybook/Playwright 산출물 추가 제안
- public, public/, public//*는 중복입니다(하나면 충분).
- storybook-static, playwright-report 등은 린트 대상에서 제외하는 편이 좋습니다.
ignores: [ 'node_modules', 'dist', 'build', - 'public', - 'public/**', - 'public/**/*', + 'public/**', + 'storybook-static/**', + 'playwright-report/**', + 'test-results/**', 'icons/**/*', ],
6-6: JSDoc 타입 주석 최신화(FlatConfig 배열)Flat Config 형식에 맞게 타입을 Linter.FlatConfig[]로 갱신하는 것이 정확합니다.
-/** @type {import("eslint").Linter.Config} */ +/** @type {import("eslint").Linter.FlatConfig[]} */
19-20: icons//* 전체 무시는 과도할 수 있음**icons 디렉터리에 TSX 아이콘 컴포넌트가 포함되어 있다면 린트에서 빠지게 됩니다. 정적 에셋(svg)만 제외하려는 의도라면 'icons/**/*.svg' 등으로 좁히는 것을 권장합니다. 현재 구조 의도 확인 부탁드립니다.
원하시면 실제 디렉터리 구성에 맞춰 정밀 글롭을 제안해드리겠습니다.
packages/design-system/package.json (2)
16-19: Chromatic “배포” 목적이라면 CLI 스크립트 추가 필요현재는 Storybook 로컬 실행/빌드 스크립트만 있고 Chromatic 업로드 스크립트가 없습니다. CI에서 시각적 회귀 테스트/호스팅을 진행하려면 Chromatic CLI를 함께 설정해야 합니다.
스크립트 추가 제안:
"scripts": { "lint": "eslint .", "build": "vite build", "check-types": "tsc --noEmit", "generate:component": "turbo gen react-component", "storybook": "storybook dev -p 6006", - "build-storybook": "storybook build" + "build-storybook": "storybook build", + "chromatic": "chromatic --project-token=$CHROMATIC_PROJECT_TOKEN" },또한 devDependencies에 Chromatic CLI(
@chromatic-com/chromatic) 추가가 필요합니다. 호환 가능한 최신 버전 확인 후 반영 부탁드립니다. 원하시면 제가 버전 검증 스크립트도 제공하겠습니다.
12-19: 패키지 단위 테스트 실행 스크립트 추가 제안Vitest 설정이 존재하지만 package 레벨에
test스크립트가 없습니다. 워크스페이스 루트에서 위임 실행 중이 아니라면 패키지 로컬 실행 편의성을 위해 추가를 권장합니다.예시:
"scripts": { "lint": "eslint .", "build": "vite build", "check-types": "tsc --noEmit", "generate:component": "turbo gen react-component", "storybook": "storybook dev -p 6006", "build-storybook": "storybook build", + "test": "vitest", + "test:ci": "vitest run" },
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled
- Linear integration is disabled
You can enable these sources in your CodeRabbit configuration.
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (9)
.gitignore(1 hunks)packages/design-system/.storybook/main.ts(1 hunks)packages/design-system/.storybook/preview.ts(1 hunks)packages/design-system/.storybook/vitest.setup.ts(1 hunks)packages/design-system/eslint.config.mjs(1 hunks)packages/design-system/package.json(1 hunks)packages/design-system/src/Introduction.mdx(1 hunks)packages/design-system/vite.config.ts(2 hunks)packages/design-system/vitest.shims.d.ts(1 hunks)
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: constantly-dev
PR: Pinback-Team/pinback-client#2
File: pnpm-workspace.yaml:3-3
Timestamp: 2025-08-18T13:48:59.021Z
Learning: constantly-dev는 docs 디렉터리를 컨벤션 문서 추가용으로 사용할 예정이라고 명시했습니다.
📚 Learning: 2025-08-18T09:09:36.473Z
Learnt from: constantly-dev
PR: Pinback-Team/pinback-client#2
File: packages/eslint-config/react-internal.js:41-41
Timestamp: 2025-08-18T09:09:36.473Z
Learning: ESLint flat config에서는 shareable config에 대해 default export를 강력히 권장한다. Named export만 제공하면 ESM/CJS 상호 운용성 문제와 모듈 해석 문제가 발생할 수 있으며, ESLint의 내부 처리 방식과도 맞지 않는다.
Applied to files:
packages/design-system/eslint.config.mjs
🔇 Additional comments (7)
packages/design-system/vitest.shims.d.ts (1)
1-1: 완료: 관련 의존성이 모두 포함되어 있습니다
- packages/design-system/package.json의 devDependencies에
• vitest: "^3.2.4"
• @vitest/browser: "^3.2.4"
• playwright: "^1.55.0"
가 등록되어 있어
vitest.shims.d.ts의<reference types="@vitest/browser/providers/playwright" />참조가 정상 작동합니다.packages/design-system/.storybook/preview.ts (1)
2-2: styles.css 파일 경로 확인 완료
packages/design-system/.storybook/preview.ts의import '../styles.css'경로가 유효하며,packages/design-system/styles.css파일이 정상적으로 존재합니다. 추가 조치가 필요 없습니다.packages/design-system/eslint.config.mjs (1)
7-9: storybook flat 추천 설정 병합 방식 LGTMstorybook 플러그인의 flat/recommended 구성을 맨 앞에 펼쳐 적용한 점 좋습니다. 스토리/MDX 규칙이 우선 적용됩니다.
packages/design-system/.storybook/main.ts (2)
12-19: 애드온 구성 방향성 적절합니다Chromatic, Docs, A11y, Vitest 애드온을 절대경로로 해석하는 패턴이 모노레포/PNP 환경에서 안정적으로 동작합니다. 전반적으로 구성 깔끔합니다.
27-30: TS 체크 및 react-docgen 설정 👍스토리 타입체크를 활성화하고
react-docgen-typescript를 지정한 점 좋습니다. 스토리/컴포넌트의 타입 안전성을 높이는 데 도움이 됩니다.packages/design-system/.storybook/vitest.setup.ts (1)
7-7: 프로젝트/애드온 어노테이션 적용 방식 적절합니다A11y + 프로젝트 프리뷰 설정을 함께 주입해 테스트 환경에서 스토리 동작을 일관되게 맞추는 접근이 좋습니다.
packages/design-system/vite.config.ts (1)
38-65: storybookTest 기반 브라우저 테스트 프로젝트 구성 👍Vitest Browser + Playwright(headless)로 Storybook 스토리를 테스트하는 프로젝트 분리 구성이 명확합니다.
.storybook/vitest.setup.ts와 연결도 일관적입니다.
| function getAbsolutePath(value: string): string { | ||
| return dirname(require.resolve(join(value, 'package.json'))); | ||
| } |
There was a problem hiding this comment.
ESM 환경에서 require 미정의 오류 — createRequire 사용으로 교체 필요
design-system 패키지는 ESM("type": "module")입니다. ESM 컨텍스트에서 require는 정의되어 있지 않아 Storybook 실행 시 즉시 크래시합니다. Node의 createRequire로 대체하세요.
아래와 같이 수정 제안드립니다:
import type { StorybookConfig } from '@storybook/react-vite';
import { dirname, join } from 'path';
+import { createRequire } from 'node:module';
+
+const require = createRequire(import.meta.url);
/**
* This function is used to resolve the absolute path of a package.
* It is needed in projects that use Yarn PnP or are set up within a monorepo.
*/
function getAbsolutePath(value: string): string {
return dirname(require.resolve(join(value, 'package.json')));
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| function getAbsolutePath(value: string): string { | |
| return dirname(require.resolve(join(value, 'package.json'))); | |
| } | |
| import type { StorybookConfig } from '@storybook/react-vite'; | |
| import { dirname, join } from 'path'; | |
| import { createRequire } from 'node:module'; | |
| const require = createRequire(import.meta.url); | |
| /** | |
| * This function is used to resolve the absolute path of a package. | |
| * It is needed in projects that use Yarn PnP or are set up within a monorepo. | |
| */ | |
| function getAbsolutePath(value: string): string { | |
| return dirname(require.resolve(join(value, 'package.json'))); | |
| } |
🤖 Prompt for AI Agents
In packages/design-system/.storybook/main.ts around lines 8 to 10, the function
uses require which crashes in ESM packages; replace require by creating a
require function via Node's createRequire from the 'module' package (import or
require createRequire at top), then use that created require to call
resolve/join so getAbsolutePath works in ESM; ensure the createRequire is
initialized (e.g., createRequire(import.meta.url)) and used instead of raw
require.
| @@ -0,0 +1,7 @@ | |||
| import * as a11yAddonAnnotations from '@storybook/addon-a11y/preview'; | |||
| import { setProjectAnnotations } from '@storybook/react-vite'; | |||
There was a problem hiding this comment.
setProjectAnnotations import 경로 수정 필요
문서 링크(Portable Stories + Vitest) 기준, setProjectAnnotations는 @storybook/portable-stories(또는 프리뷰 API)에서 가져오는 것이 맞습니다. @storybook/react-vite에서는 노출되지 않아 타입/런타임 에러가 발생할 수 있습니다.
수정 제안:
-import { setProjectAnnotations } from '@storybook/react-vite';
+import { setProjectAnnotations } from '@storybook/portable-stories';📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| import { setProjectAnnotations } from '@storybook/react-vite'; | |
| import { setProjectAnnotations } from '@storybook/portable-stories'; |
🤖 Prompt for AI Agents
In packages/design-system/.storybook/vitest.setup.ts around line 2, the import
of setProjectAnnotations from '@storybook/react-vite' is incorrect and can cause
type/runtime errors; change the import source to '@storybook/portable-stories'
(or the Storybook preview API package your project uses), update any named
import if necessary, run TS/tsc or vitest typecheck to confirm no remaining
import errors, and adjust any surrounding usage to match the exported signature
from the new module.
| files: ['**/*.js', '**/*.ts'], | ||
| ignores: [ |
There was a problem hiding this comment.
🛠️ Refactor suggestion
파일 글롭 범위 확장 필요(jsx/tsx/mdx 포함)
현재 js/ts만 대상으로 하여 TSX/JSX/MDX 파일에 규칙 오버라이드가 적용되지 않습니다. React/Storybook 환경에서는 TSX/MDX가 핵심이므로 포함이 필요합니다. 특히 이 블록에서 no-undef 등을 끄는 의도가 TSX에도 반영되어야 합니다.
- files: ['**/*.js', '**/*.ts'],
+ files: ['**/*.{js,jsx,ts,tsx,mdx}'],📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| files: ['**/*.js', '**/*.ts'], | |
| ignores: [ | |
| files: ['**/*.{js,jsx,ts,tsx,mdx}'], | |
| ignores: [ |
🤖 Prompt for AI Agents
In packages/design-system/eslint.config.mjs around lines 11 to 12, the files
globs only include '**/*.js' and '**/*.ts' so ESLint overrides aren't applied to
JSX/TSX/MDX; update the files array to also include '**/*.jsx', '**/*.tsx', and
'**/*.mdx' (and if used, '**/*.mts'/'**/*.cts' variants) so rules like disabling
no-undef are applied to React/Storybook files as well; keep ordering consistent
and ensure any existing overrides referencing ts/js still match the expanded
globs.
packages/design-system/package.json
Outdated
| "@storybook/blocks": "^8.6.14", | ||
| "@storybook/react-vite": "9.1.2", |
There was a problem hiding this comment.
@storybook/blocks 메이저 버전 불일치 — core(9.1.2)와 정렬 필요
storybook 및 기타 애드온이 9.1.2인데 @storybook/blocks만 8.x로 되어 있습니다. Docs/MDX 렌더링에서 런타임 오류가 발생할 가능성이 큽니다. core와 동일한 메이저(9.x)로 맞춰주세요.
권장 수정:
- "@storybook/blocks": "^8.6.14",
+ "@storybook/blocks": "9.1.2",📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| "@storybook/blocks": "^8.6.14", | |
| "@storybook/react-vite": "9.1.2", | |
| "@storybook/blocks": "9.1.2", | |
| "@storybook/react-vite": "9.1.2", |
🤖 Prompt for AI Agents
In packages/design-system/package.json around lines 29 to 30, @storybook/blocks
is pinned to 8.x while the rest of Storybook deps use 9.1.2; update
@storybook/blocks to a 9.x version that matches the core (e.g., ^9.1.2 or the
exact 9.1.2 used for @storybook/react-vite), run your package manager to update
lockfile (npm/yarn/pnpm install), and verify Storybook builds and MDX/docs pages
to ensure no runtime mismatches remain.
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled
- Linear integration is disabled
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (2)
packages/design-system/package.json(1 hunks)packages/design-system/turbo.json(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- packages/design-system/package.json
🧰 Additional context used
🧠 Learnings (1)
📓 Common learnings
Learnt from: constantly-dev
PR: Pinback-Team/pinback-client#2
File: pnpm-workspace.yaml:3-3
Timestamp: 2025-08-18T13:48:59.021Z
Learning: constantly-dev는 docs 디렉터리를 컨벤션 문서 추가용으로 사용할 예정이라고 명시했습니다.
🔇 Additional comments (2)
packages/design-system/turbo.json (2)
8-10: storybook 출력 캐싱 설정 적절함Storybook 기본 빌드 출력 디렉터리인 "storybook-static/**"를 outputs로 지정한 점 좋습니다. Turbo 캐시가 유효하게 동작할 수 있습니다.
11-14: dev:storybook 장기 실행 태스크 호환성 확인 완료
- 루트 turbo.json이
tasks스키마를 사용 중이며, 패키지 설정 역시 동일한 스키마(tasks)로 정의되어 있습니다.- 루트
package.json의 Turbo 버전(^2.5.6)에서cache: false및persistent: true옵션을 정상적으로 지원합니다.
| "build": { | ||
| "with": ["build:storybook"] | ||
| }, |
There was a problem hiding this comment.
"with"는 Turbo 설정 키가 아닙니다 — "dependsOn"으로 교체하세요
Turbo 설정에서 task 간 의존성을 선언하려면 "dependsOn"를 사용해야 합니다. 현재 "with"는 인식되지 않아 build 시 storybook 빌드가 실행되지 않습니다.
아래처럼 수정하면 루트의 기본 빌드 의존성("^build")도 유지하면서 이 패키지의 build가 build:storybook을 선행 실행하도록 보장할 수 있습니다.
- "build": {
- "with": ["build:storybook"]
- },
+ "build": {
+ "dependsOn": ["^build", "build:storybook"]
+ },📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| "build": { | |
| "with": ["build:storybook"] | |
| }, | |
| "build": { | |
| "dependsOn": ["^build", "build:storybook"] | |
| }, |
🤖 Prompt for AI Agents
In packages/design-system/turbo.json around lines 5 to 7, the task configuration
uses the invalid key "with" instead of Turborepo's "dependsOn", so storybook
isn't being run as a dependency; replace the "with" key with "dependsOn" and set
its value to include the existing root dependency specifier (e.g. "^build") plus
"build:storybook" so this package's build will run build:storybook first while
preserving the root-level build dependency.
There was a problem hiding this comment.
with도 정식 옵션이 맞지마 두개 차이점이 좀 있는거같아요. with는 동시실행이 목적이고 dependsOn은 빌드 순서 보장이 필요할 때 사용하는것같아요. 확인해보고 우리 프로젝트에 필요한거 적용하면 좋을것같네요-!!
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
Turborepo task configuration "with" vs "dependsOn" official documentation latest version
💡 Result:
Short answer — purpose and difference
- dependsOn: declares task ordering/requirements — tasks that must complete before this task runs (supports same-package names, package-scoped names, and the ^ microsyntax to depend on tasks in package dependencies). (turborepo.com, turbo.build)
- with: runs one or more tasks alongside a (usually long-running/persistent) task; it does NOT create a “wait-for-complete” dependency — it ensures the named task(s) are started whenever the primary task runs (used for dev servers, sidecars). (turborepo.com, turbo.build)
Key details / how to choose
- Use dependsOn when you need deterministic ordering (e.g., build library before app). The ^ prefix means “run the task for my dependency packages first.” Example: "dependsOn": ["^build"]. (turborepo.com, turbo.build)
- Use with when one task is long-running (persistent) and you want another task started alongside it (for example, start api#dev when web#dev runs). Long-running/persistent tasks can’t be used as completion dependencies — they don’t exit — so dependsOn is unsuitable for them. Example: "with": ["api#dev"] with "persistent": true. (turborepo.com, turbo.build)
- dependsOn affects the task graph and caching semantics (it ensures upstream tasks complete so outputs are available). with is about simultaneous execution at runtime and does not imply the other task must finish. (turborepo.com, turbo.build)
Examples (from the official docs)
-
dependsOn (build order):
{
"tasks": {
"build": { "dependsOn": ["^build"] }
}
}
(turborepo.com) -
with (dev sidecar):
{
"tasks": {
"dev": {
"with": ["api#dev"],
"persistent": true,
"cache": false
}
}
}
(turborepo.com)
Notes about schema and naming
- Official docs you’ll see examples using the "tasks" object in turbo.json (the main Turborepo docs). Some mirrors/variants or schema examples use "pipeline" (older/newer schema differences or mirrors may show that). If you’re updating or authoring turbo.json, use the shape recommended by the version of Turborepo you run (the docs pages above are the canonical reference). (turborepo.com, turbo.hector.im)
I pulled these details from the official Turborepo docs today (I checked the docs on August 21, 2025). If you want:
- Direct links to the exact doc pages I used, or
- A small turbo.json example tailored to your repo (apps/packages names), or
- A short checklist for converting an existing setup to use with vs dependsOn —
tell me which and I’ll fetch or generate it.
Citations:
- 1: https://turborepo.com/docs/crafting-your-repository/configuring-tasks
- 2: https://turbo.build/repo/docs/crafting-your-repository/configuring-tasks?utm_source=chatgpt.com
- 3: https://turborepo.com/docs/crafting-your-repository/configuring-tasks
- 4: https://turbo.build/docs/reference/configuration?utm_source=chatgpt.com
- 5: https://turborepo.com/docs/crafting-your-repository/configuring-tasks
- 6: https://turbo.build/repo/docs/crafting-your-repository/configuring-tasks?utm_source=chatgpt.com
- 7: https://turborepo.com/docs/crafting-your-repository/configuring-tasks
- 8: https://turbo.build/docs/reference/configuration?utm_source=chatgpt.com
- 9: https://turborepo.com/docs/crafting-your-repository/configuring-tasks
- 10: https://turbo.build/docs/reference/configuration?utm_source=chatgpt.com
- 11: https://turborepo.com/docs/crafting-your-repository/configuring-tasks
- 12: https://turborepo.com/docs/crafting-your-repository/configuring-tasks
- 13: https://turborepo.com/docs/crafting-your-repository/configuring-tasks
- 14: https://turbo.hector.im/repo/docs/reference/configuration?utm_source=chatgpt.com
@jjangminii 맞습니다! 제가 잘못된 정보를 제공했네요. 죄송합니다.
"with"와 "dependsOn" 모두 정식 Turbo 옵션입니다:
dependsOn: 순차 실행 (의존성 작업이 완료된 후 현재 작업 실행)with: 병렬 실행 (주로 persistent/long-running 작업과 함께 사용)
현재 상황에서는 Storybook 빌드가 완료된 후 메인 빌드가 실행되어야 한다면 dependsOn이 더 적절할 것 같습니다:
"build": {
"dependsOn": ["^build", "build:storybook"]
}하지만 만약 병렬 실행이 목적이라면 현재 with 설정도 유효합니다. 프로젝트의 빌드 플로우에 따라 선택하시면 됩니다!
정확한 정보 수정해 주셔서 감사합니다. 🙏
✏️ Learnings added
Learnt from: jjangminii
PR: Pinback-Team/pinback-client#14
File: packages/design-system/turbo.json:5-7
Timestamp: 2025-08-21T08:07:11.386Z
Learning: Turborepo task configuration supports both "with" and "dependsOn" keys: "dependsOn" is for sequential task execution where dependencies must complete first, while "with" is for concurrent execution alongside persistent/long-running tasks.
Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.
|
✅ Storybook chromatic 배포 확인: |
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (6)
.github/workflows/chromatic.yml (6)
3-7: 트리거 보완: draft 해제 시/동기화 시에도 안정적으로 실행되도록 types 추가PR 동기화나 draft→ready 전환 시 누락을 방지합니다.
on: pull_request: + types: [opened, synchronize, reopened, ready_for_review] branches: - develop
10-13: Draft PR 자동 스킵 및 중복 실행 취소(concurrency)로 비용 절감Draft는 건너뛰고 동일 PR 중복 실행을 취소하면 CI 시간을 절약할 수 있습니다.
+concurrency: + group: chromatic-${{ github.event.pull_request.number || github.ref }} + cancel-in-progress: true jobs: storybook: + if: ${{ github.event.pull_request.draft == false }} runs-on: ubuntu-latest
38-41: 설치 단계 조건 로직 재검토node_modules 캐시를 제거한다면 캐시 히트 조건이 사라집니다. pnpm/action-setup가 설치까지 수행하게 할 수도 있습니다.
다음 중 하나를 선택하세요.
- 옵션 A: 명시적 설치 유지(항상 실행)
- - name: Install Dependencies - if: steps.cache-node.outputs.cache-hit != 'true' - run: pnpm install --frozen-lockfile + - name: Install Dependencies + run: pnpm install --frozen-lockfile
- 옵션 B: pnpm/action-setup에 설치 위임(위 단계에서 run_install: true로 변경)
- - name: Setup PNPM - uses: pnpm/action-setup@v4 - with: - version: 9 - run_install: false + - name: Setup PNPM + uses: pnpm/action-setup@v4 + with: + version: 9 + run_install: true
42-44: Chromatic가 자체 빌드를 수행하는 경우 중복 빌드 제거 또는 산출물 재사용현재 빌드를 선행하고, Chromatic 액션도 기본적으로 빌드를 트리거할 수 있어 중복 가능성이 있습니다.
- 중복 제거(Chromatic이 빌드 수행):
- - name: Build Storybook for design system(pds) - run: pnpm --filter @pinback/design-system run build:storybook
- 또는 선행 빌드 재사용(Chromatic에 산출물 경로 전달):
- name: Build Storybook for design system(pds) run: pnpm --filter @pinback/design-system run build:storybook그리고 아래 Chromatic 단계에 storybookBuildDir 추가(별도 코멘트 참고).
55-63: 성공 코멘트에 Chromatic build 링크 추가 및 출력 값 가드빌드 상세 링크를 함께 제공하면 리뷰 편의가 높습니다. 또한 출력이 비어있는 경우를 방어하세요.
- - name: Comment PR on Success - if: success() && github.event_name == 'pull_request' + - name: Comment PR on Success + if: success() && github.event_name == 'pull_request' && steps.chromatic.outputs.storybookUrl != '' uses: thollander/actions-comment-pull-request@v2 with: comment_tag: ${{ github.event.number }}-storybook message: | ✅ Storybook chromatic 배포 확인: - 🐿️ [storybook](${{ steps.chromatic.outputs.storybookUrl }}) + 🐿️ [Storybook](${{ steps.chromatic.outputs.storybookUrl }}) + 🔗 [Chromatic Build](${{ steps.chromatic.outputs.buildUrl }})참고: outputs 키(storybookUrl/buildUrl)는 액션 버전에 따라 다를 수 있으니 확인 바랍니다.
64-71: 실패 코멘트 문구/표기 다듬기(브랜드 표기 및 가독성)작은 가독성 향상입니다.
- name: Comment PR on Failure if: failure() && github.event_name == 'pull_request' uses: thollander/actions-comment-pull-request@v2 with: comment_tag: ${{ github.event.number }}-storybook message: | 🚨 Storybook 배포 실패 - : Github Actions 로그를 확인해주세요. + GitHub Actions 로그를 확인해 주세요.
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled
- Linear integration is disabled
You can enable these sources in your CodeRabbit configuration.
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (2)
.github/workflows/chromatic.yml(1 hunks)packages/design-system/package.json(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- packages/design-system/package.json
🧰 Additional context used
🧠 Learnings (1)
📓 Common learnings
Learnt from: constantly-dev
PR: Pinback-Team/pinback-client#2
File: pnpm-workspace.yaml:3-3
Timestamp: 2025-08-18T13:48:59.021Z
Learning: constantly-dev는 docs 디렉터리를 컨벤션 문서 추가용으로 사용할 예정이라고 명시했습니다.
🪛 actionlint (1.7.7)
.github/workflows/chromatic.yml
30-30: the runner of "actions/cache@v3" action is too old to run on GitHub Actions. update the action's version to fix this issue
(action)
🔇 Additional comments (1)
.github/workflows/chromatic.yml (1)
49-53: Chromatic 옵션 onlyChanged 사용 시 fetch-depth: 0 유지 필요 — 현재 설정 적절onlyChanged를 사용하므로 checkout의 fetch-depth: 0 설정이 필수입니다. 현 설정은 적절합니다. 따로 변경 불필요합니다.
| branches: | ||
| - develop | ||
|
|
||
| permissions: write-all |
There was a problem hiding this comment.
🛠️ Refactor suggestion
권한 축소(least-privilege) 권장: write-all 제거하고 필요한 권한만 명시
PR 코멘트 작성과 체크아웃/Chromatic 상태 보고에 필요한 최소 권한만 부여하세요.
아래처럼 축소를 제안합니다(Chromatic 체크런 생성이 필요하면 checks: write 추가).
-permissions: write-all
+permissions:
+ contents: read
+ pull-requests: write
+ # Chromatic가 체크런/상태 리포트를 생성한다면 아래도 고려
+ # checks: write🤖 Prompt for AI Agents
In .github/workflows/chromatic.yml around line 8, remove the broad "permissions:
write-all" and replace it with least-privilege permissions required for the
workflow: grant contents: read for checkout, pull-requests: write (or issues:
write) only if the workflow must post PR comments, and add checks: write only if
Chromatic needs to create or update GitHub Checks; ensure no other write
permissions are granted so the workflow runs with minimal privileges.
| - name: Setup Node.js | ||
| uses: actions/setup-node@v4 | ||
| with: | ||
| node-version: 20 | ||
|
|
||
| - name: Install PNPM | ||
| run: npm i -g pnpm | ||
|
|
There was a problem hiding this comment.
🛠️ Refactor suggestion
PNPM 설치 방식 개선 및 캐시 연계
npm -g 설치 대신 공식 액션을 사용하고 Node 세팅에 PNPM 캐시를 연동하세요.
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: 20
+ cache: pnpm
+
- - name: Install PNPM
- run: npm i -g pnpm
+ - name: Setup PNPM
+ uses: pnpm/action-setup@v4
+ with:
+ version: 9
+ run_install: falseCommittable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In .github/workflows/chromatic.yml around lines 20 to 27, the workflow installs
PNPM with a global npm install and doesn't tie PNPM to the Node setup cache;
replace the global install with the official PNPM setup action and enable PNPM
caching on the Node setup step. Change the Node setup step to include cache:
'pnpm' and remove the "npm i -g pnpm" run step, instead add the official action
for PNPM (pnpm/action-setup) immediately after setup-node so PNPM is installed
via the action and benefits from the cache integration.
| - name: Cache node modules | ||
| id: cache-node | ||
| uses: actions/cache@v3 | ||
| with: | ||
| path: | | ||
| **/node_modules | ||
| key: ${{ runner.os }}-node-${{ hashFiles('**/pnpm-lock.yaml') }} | ||
| restore-keys: | | ||
| ${{ runner.os }}-node- | ||
There was a problem hiding this comment.
actions/cache@v3 런타임 호환성 이슈 및 캐시 전략 재고(PNPM 스토어 캐시 권장)
actionlint 경고대로 v3는 최신 러너와 호환되지 않습니다. 또한 PNPM은 node_modules 캐시보다 스토어 캐시(~/.pnpm-store)를 쓰는 것이 안전/효율적입니다.
- 최소 수정(버전 업):
- uses: actions/cache@v3
+ uses: actions/cache@v4- 권장 수정(수동 node_modules 캐시 제거, setup-node의 cache: pnpm로 일원화):
- - name: Cache node modules
- id: cache-node
- uses: actions/cache@v3
- with:
- path: |
- **/node_modules
- key: ${{ runner.os }}-node-${{ hashFiles('**/pnpm-lock.yaml') }}
- restore-keys: |
- ${{ runner.os }}-node-
+ # PNPM 스토어 캐시는 actions/setup-node@v4의 `cache: pnpm`가 관리선택지 중 하나로 정리해 주세요(권장: 후자).
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| - name: Cache node modules | |
| id: cache-node | |
| uses: actions/cache@v3 | |
| with: | |
| path: | | |
| **/node_modules | |
| key: ${{ runner.os }}-node-${{ hashFiles('**/pnpm-lock.yaml') }} | |
| restore-keys: | | |
| ${{ runner.os }}-node- | |
| # PNPM 스토어 캐시는 actions/setup-node@v4의 `cache: pnpm`가 관리 |
🧰 Tools
🪛 actionlint (1.7.7)
30-30: the runner of "actions/cache@v3" action is too old to run on GitHub Actions. update the action's version to fix this issue
(action)
🤖 Prompt for AI Agents
.github/workflows/chromatic.yml lines 28-37: actions/cache@v3 has runtime
compatibility warnings and PNPM works better caching its store than
node_modules; provide two options: minimal fix—bump to actions/cache@v4 (or the
latest compatible tag) and keep existing path/key, ensuring actionlint warnings
are resolved; recommended fix—remove manual node_modules caching, switch to
setup-node cache: 'pnpm' (or use pnpm/setup-node with cache support) and/or add
explicit ~/.pnpm-store path to cache, update keys to include pnpm-lock.yaml and
runner.os, and remove the duplicate node_modules pattern so caching is
centralized and PNPM store is used.
| - name: Publish to Chromatic | ||
| id: chromatic | ||
| uses: chromaui/action@latest | ||
| with: | ||
| projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} | ||
| workingDir: packages/design-system | ||
| onlyChanged: true | ||
| autoAcceptChanges: true | ||
| exitOnceUploaded: true | ||
|
|
There was a problem hiding this comment.
💡 Verification agent
❓ Verification inconclusive
Chromatic 액션 버전 고정 및 옵션 정리(autoAcceptChanges 기본 비활성 권장, 선행 빌드 재사용 시 디렉터리 지정)
latest 태그는 서플라이체인/재현성 리스크가 있습니다. 또한 autoAcceptChanges는 PR에서 예기치 않은 승인으로 이어질 수 있어 기본 false가 안전합니다. 선행 빌드를 재사용한다면 storybookBuildDir을 지정하세요.
릴리즈 태그/커밋 SHA는 레포 릴리즈 노트를 확인해 최신 안정 버전으로 교체해 주세요.
- - name: Publish to Chromatic
- id: chromatic
- uses: chromaui/action@latest
+ - name: Publish to Chromatic
+ id: chromatic
+ uses: chromaui/action@v1
with:
projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
workingDir: packages/design-system
onlyChanged: true
- autoAcceptChanges: true
+ # PR에서는 기본 false, develop 브랜치로의 push 시에만 true
+ autoAcceptChanges: ${{ github.event_name == 'push' && github.ref == 'refs/heads/develop' }}
exitOnceUploaded: true
+ # 선행 빌드 재사용 시 주석 해제
+ # storybookBuildDir: packages/design-system/storybook-static또한 Chromatic 출력 변수명(storybookUrl/buildUrl)이 현재 버전과 일치하는지 문서로 확인 부탁드립니다. 불일치 시 코멘트 단계도 함께 조정 필요합니다.
Chromatic GitHub Action 버전 고정 및 옵션 조정 안내
다음 사항을 반영해 주세요:
-
GitHub Action 버전 고정
.github/workflows/chromatic.yml에서uses: chromaui/action@latest대신, 공식 릴리스 노트에 따라 구체적인 릴리스 태그(vX.Y.Z) 또는 커밋 SHA로 교체해주세요. 메이저 버전 단위(@vx)로 고정하면 예기치 않은 breaking change를 방지할 수 있습니다 (chromatic.com). -
autoAcceptChanges 기본값 변경
autoAcceptChanges의 기본값은false입니다. PR에서는 기본 false로 유지하고,develop브랜치에 push될 때만true가 되도록 조건부 설정하세요. 예시:autoAcceptChanges: ${{ github.event_name == 'push' && github.ref == 'refs/heads/develop' }}
Config 레퍼런스에도 default가 false로 명시돼 있습니다 (chromatic.com).
-
선행 빌드 재사용 시 디렉터리 지정
별도 Storybook 빌드를 선행한 경우,storybookBuildDir입력에 빌드 결과 디렉터리를 명시해주세요 (예:packages/design-system/storybook-static) (chromatic.com). -
출력 변수명 일치 여부 확인
Chromatic Action이 제공하는 출력 변수(buildUrl,storybookUrl)가 현재 사용 중인 버전과 일치하는지 공식 문서에서 확인 후, 후속 스텝에서 참조하는 키를 조정해주세요 (chromatic.com).
필요 시 아래와 같이 수정해 보세요:
- - name: Publish to Chromatic
- uses: chromaui/action@latest
+ - name: Publish to Chromatic
+ uses: chromaui/action@<최신 안정 릴리즈 태그 또는 커밋 SHA>
with:
projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
workingDir: packages/design-system
onlyChanged: true
- autoAcceptChanges: true
+ autoAcceptChanges: ${{ github.event_name == 'push' && github.ref == 'refs/heads/develop' }}
exitOnceUploaded: true
+ # 선행 빌드 재사용 시 주석 해제
+ # storybookBuildDir: packages/design-system/storybook-static🤖 Prompt for AI Agents
In .github/workflows/chromatic.yml around lines 45-54, the workflow currently
uses chromaui/action@latest and unconditionally sets autoAcceptChanges and omits
storybookBuildDir and output verification; fix by pinning the action to a
specific release tag or major tag (e.g., @vX or @vX.Y.Z / commit SHA) instead of
@latest, change autoAcceptChanges to a conditional that is true only for pushes
to refs/heads/develop (keep default false for PRs), add the storybookBuildDir
input pointing to the prebuilt Storybook output (e.g.,
packages/design-system/storybook-static) if you reuse a prior build, and
verify/adjust any referenced output keys (buildUrl, storybookUrl) to match the
pinned action version’s documented output names.
constantly-dev
changed the title
There was a problem hiding this comment.
Chromatic 도입으로 디자이너와의 공유하기 편리하고 GitHub Actions에서 buildScriptName까지 맞춘 자동 배포로 피드백 루프를 만든 점이 좋았습니다. Turborepo의 with를 활용해 루트 build에서 build:storybook을 함께 실행하도록 구성해 모노레포의 장점을 실제 작업 흐름에 적용한 것도 인상적입니다-!! 저 부분은 저도 몰랐던 부분이라 배워갑니다 참고해서 스크립트 만들 때 적용해보가 좋을거같아요. 배럴 파일의 성능 이슈에 대해서 저도 들은적이있는데 이 부분은 아직 저희 프로젝트 규모에서는 크게 문제될 것 같지는 않아 추후 확장에 대해 고민해봐도 좋을거같아요-!! 고생하셨습니다
| "build": { | ||
| "with": ["build:storybook"] | ||
| }, |
There was a problem hiding this comment.
with도 정식 옵션이 맞지마 두개 차이점이 좀 있는거같아요. with는 동시실행이 목적이고 dependsOn은 빌드 순서 보장이 필요할 때 사용하는것같아요. 확인해보고 우리 프로젝트에 필요한거 적용하면 좋을것같네요-!!
| "@storybook/addon-docs": "9.1.2", | ||
| "@storybook/addon-onboarding": "^9.1.2", | ||
| "@storybook/addon-vitest": "9.1.2", | ||
| "@storybook/blocks": "^8.6.14", |
There was a problem hiding this comment.
얘만 다른 의존성과 버전이 다른 이유가 있을까요??
There was a problem hiding this comment.
따로 설정한 부분 없이 패키지 매니저로 add만했는데 저렇게 설정된 것 같아요!
달라도 크게 문제가 되지는 않을 것 같습니다 :)
jllee000
left a comment
jllee000
left a comment
There was a problem hiding this comment.
고생하셨습니다! 드디어 스토리북 도입!! 처음 써본거라 공컴 작업이나 QA때 어떤 도움이 될지 기대가 되네용
| "extends": ["//"], | ||
| "tasks": { | ||
| "build": { | ||
| "with": ["build:storybook"] |
There was a problem hiding this comment.
찾아보니, 스토리북 CLI는 디렉토리 기준으로 main.tz, tsconfig 등을 읽어야 하는데 이게 디자인시스템 내로 들어가있어서 루트딴에서 실행이 안되는군여
이렇게 설정하면 확실히 경로이동 덜 번거로워질 것 같네요! 감사합니다
| controls: { | ||
| matchers: { | ||
| color: /(background|color)$/i, | ||
| date: /Date$/i, | ||
| }, |
There was a problem hiding this comment.
text: /(title|label|name|placeholder|text)$/i
matchers등록할거라면 자주 쓸 버튼 라벨/텍스트나 인풋에도 쓸 플레이스홀더 등등도 props패턴에 지정해도 좋을것같아용
There was a problem hiding this comment.
$ 이 규칙이 해당 단어로 끝나는 것도 해당되지만, 같은 경우도 똑같이 적용되는 것 같네요!
text로 등록될만한 부분 적용해 놓으면 너무 좋을 것 같아요!! 좋은 의견 감사합니다 수정할게요~ 👍
|
|
||
| const preview: Preview = { | ||
| parameters: { | ||
| actions: { argTypesRegex: '^on[A-Z].*' }, |
There was a problem hiding this comment.
주로 저희는 액션 on~으로 컨벤션 맞추면 될까용??
There was a problem hiding this comment.
story 부분 설정하면서 생각이 나서! on prefix 설정을 통일하는 것도 괜찮을 것 같아요.
다만 handle이나 다른 컨벤션도 넓게 사용할 거라면 이 설정은 빼도 될 것 같아요! 어떤 방향성이 좋을까요?
There was a problem hiding this comment.
저희 서비스가 어차피 구분할 비슷한 기능들이 많은 것도 아니구 개발 사이즈도 큰 건 아니라, on 범위 정도로도 충분히 다 액션 정의해도 될 것 같아요! handle 키워드를 만약 쓰게 된다해도, onHandleToggle 이런 느낌으로 최대한 on prefix 활용하겠습니당
There was a problem hiding this comment.
Actionable comments posted: 3
♻️ Duplicate comments (4)
.github/workflows/chromatic.yml (3)
8-8: 권한 축소(least-privilege)로 전환하세요. write-all은 과도합니다.PR 코멘트/체크런/체크아웃에 필요한 최소 권한만 명시하면 됩니다.
-permissions: write-all +permissions: + contents: read + pull-requests: write + checks: write
20-27: PNPM 설치·캐시 전략 정리: 공식 액션 사용 + node_modules 캐시 제거 + 설치는 항상 실행
- pnpm 글로벌 설치 대신 pnpm/action-setup 사용
- actions/cache@v3는 런타임 호환성 경고(actionlint). node_modules 캐시 대신 setup-node의 cache: pnpm으로 스토어 캐시 일원화
- 스토어 캐시는 node_modules를 생성하지 않습니다. 따라서 pnpm install은 캐시 히트 여부와 무관하게 항상 실행해야 합니다
- name: Setup Node.js uses: actions/setup-node@v4 with: node-version: 20 + cache: pnpm - - - name: Install PNPM - run: npm i -g pnpm + - name: Setup PNPM + uses: pnpm/action-setup@v4 + with: + version: 9 + run_install: false - - - name: Cache node modules - id: cache-node - uses: actions/cache@v3 - with: - path: | - **/node_modules - key: ${{ runner.os }}-node-${{ hashFiles('**/pnpm-lock.yaml') }} - restore-keys: | - ${{ runner.os }}-node- - - name: Install Dependencies - if: steps.cache-node.outputs.cache-hit != 'true' - run: pnpm install --frozen-lockfile + - name: Install Dependencies + run: pnpm install --frozen-lockfile검증 가이드:
- 작업 로그에서 pnpm store 복원 메시지 확인
- 항상 pnpm install이 실행되는지 확인 (node_modules 생성/링크)
Also applies to: 28-37, 38-41
42-44: 중복 빌드 제거 및 Chromatic 액션 버전 고정 + autoAccept 조건부화현재 단계에서 Storybook을 수동 빌드한 뒤(42-44), Chromatic에 buildScriptName을 전달(51)하여 다시 빌드합니다. 중복으로 시간이 낭비됩니다. 또한 chromaui/action@latest는 재현성·서플라이체인 리스크가 있어 버전 고정을 권장하며, PR에서 autoAcceptChanges: true는 위험합니다.
두 가지 중 하나로 정리하세요.
- 옵션 A: Chromatic이 빌드하도록 위임(수동 빌드 삭제, buildScriptName 유지)
- - name: Build Storybook for design system(pds) - run: pnpm --filter @pinback/design-system run build:storybook @@ - - name: Publish to Chromatic - id: chromatic - uses: chromaui/action@latest + - name: Publish to Chromatic + id: chromatic + uses: chromaui/action@v1 with: projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} workingDir: packages/design-system buildScriptName: build:storybook onlyChanged: true - autoAcceptChanges: true + autoAcceptChanges: ${{ github.event_name == 'push' && github.ref == 'refs/heads/develop' }} exitOnceUploaded: true
- 옵션 B: 선행 빌드 결과를 재사용(수동 빌드 유지, buildScriptName 제거, storybookBuildDir 지정)
- name: Build Storybook for design system(pds) run: pnpm --filter @pinback/design-system run build:storybook @@ - - name: Publish to Chromatic - id: chromatic - uses: chromaui/action@latest + - name: Publish to Chromatic + id: chromatic + uses: chromaui/action@v1 with: projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} workingDir: packages/design-system - buildScriptName: build:storybook onlyChanged: true - autoAcceptChanges: true + autoAcceptChanges: ${{ github.event_name == 'push' && github.ref == 'refs/heads/develop' }} exitOnceUploaded: true + storybookBuildDir: packages/design-system/storybook-staticAlso applies to: 45-54
packages/design-system/package.json (1)
29-31: @storybook/blocks 메이저 버전 불일치: core(9.1.3)와 정렬 필요현재 blocks만 8.x로 남아 있어 MDX/Docs에서 런타임 오류 가능성이 큽니다. core와 동일 메이저(9.x)로 맞춰주세요.
- "@storybook/blocks": "^8.6.14", + "@storybook/blocks": "9.1.3",
🧹 Nitpick comments (10)
.github/workflows/chromatic.yml (4)
56-64: Chromatic 출력 키 확인 및 코멘트 템플릿 보강 제안
- chromaui/action 버전에 따라 outputs 키(buildUrl, storybookUrl)가 다를 수 있습니다. 버전 고정 후 문서와 일치하는지 확인하세요.
- reviewers가 diff와 빌드 양쪽 링크를 쉽게 열람하도록 buildUrl도 함께 첨부 권장
message: | ✅ Storybook chromatic 배포 확인: - 🐿️ [storybook](${{ steps.chromatic.outputs.storybookUrl }}) + 🐿️ Storybook: ${{ steps.chromatic.outputs.storybookUrl }} + 🔗 Build: ${{ steps.chromatic.outputs.buildUrl }}
3-7: 트리거 확장: develop로의 push도 포함해 기준 스냅샷을 관리하세요PR만 트리거하면 베이스라인이 빈약해질 수 있습니다. develop로의 push도 포함하면 auto-accept 조건과도 정합적입니다.
on: pull_request: branches: - develop + push: + branches: + - develop
10-13: 동시 실행 제한(concurrency)으로 중복 업로드/코멘트 방지PR 업데이트가 잦을 때 이전 작업 취소가 유용합니다.
jobs: storybook: runs-on: ubuntu-latest + concurrency: + group: chromatic-${{ github.workflow }}-${{ github.ref || github.run_id }} + cancel-in-progress: true
45-54: 외부 PR(fork)에서 시크릿 미노출 가드fork PR에선 secrets가 기본적으로 주입되지 않아 실패합니다. 조건을 추가해 실패 노이즈를 줄이세요.
- - name: Publish to Chromatic + - name: Publish to Chromatic + if: ${{ github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name == github.repository }} id: chromatic uses: chromaui/action@v1packages/design-system/src/components/button/Button.tsx (1)
5-11: 접근성·조작성 강화를 위해 forwardRef 도입 고려라이브러리 버튼은 포커스 제어/측정에 ref가 필요해지는 경우가 많습니다. 추후 확장성을 위해
forwardRef로 감싸는 것을 권장합니다.-const Button = ({ children, ...props }: ButtonProps) => { - return ( - <button type="button" {...props}> - {children} - </button> - ); -}; +import { forwardRef } from 'react'; + +const Button = forwardRef<HTMLButtonElement, ButtonProps>(({ children, ...props }, ref) => { + return ( + <button ref={ref} type="button" {...props}> + {children} + </button> + ); +}); + +Button.displayName = 'Button';packages/design-system/src/components/button/Button.stories.tsx (3)
1-1: 타입 import 경로 정정: @storybook/react 권장스토리북 v9에서는 타입은
@storybook/react에서 가져오는 것이 표준입니다. 현재 경로도 동작할 수 있으나 문서 권장안에 맞추는 편이 안전합니다.-import type { Meta, StoryObj } from '@storybook/react-vite'; +import type { Meta, StoryObj } from '@storybook/react';
5-9: 메타 타입은satisfies를 사용해 과추론 방지 및 안전한 키 검증명시적 제네릭 대신
satisfies Meta<typeof Button>를 사용하면 잘못된 키를 컴파일 타임에 잡고, args 추론도 보존됩니다.-const meta: Meta<typeof Button> = { +const meta = { title: 'UI/Button', component: Button, tags: ['autodocs'], -}; +} satisfies Meta<typeof Button>;
14-18: Story에 기본 상호작용/상태 예시 추가 검토필수는 아니나, disabled/aria-pressed 등 접근성 속성 예시나 onClick 액션을 추가하면 문서 가독성이 올라갑니다.
export const Primary: Story = { args: { children: 'Primary Button', + // disabled: false, + // 'aria-label': 'Primary Button', }, };packages/design-system/package.json (2)
25-28: 버전 고정 일관성: onboarding만 캐럿(^) 사용 중재현성 향상을 위해 스토리북 관련 패키지를 동일하게 고정하는 것을 권장합니다.
- "@storybook/addon-onboarding": "^9.1.3", + "@storybook/addon-onboarding": "9.1.3",Also applies to: 41-44
12-19: 문서화 위치: conventions는 repo-level docs/ 하위에 링크 추가 권장이 PR 설명에 Storybook/컴포넌트 컨벤션 문서화를 언급하셨습니다. 이전 합의(learned context: docs 디렉터리 사용)에 맞춰 레포 루트 docs/에 index 문서(링크/배지) 추가를 제안합니다.
원하시면 템플릿(Markdown) 초안 드리겠습니다.
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled
- Linear integration is disabled
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (5)
.github/workflows/chromatic.yml(1 hunks)packages/design-system/.storybook/preview.ts(1 hunks)packages/design-system/package.json(1 hunks)packages/design-system/src/components/button/Button.stories.tsx(1 hunks)packages/design-system/src/components/button/Button.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- packages/design-system/.storybook/preview.ts
🧰 Additional context used
🧠 Learnings (1)
📓 Common learnings
Learnt from: constantly-dev
PR: Pinback-Team/pinback-client#2
File: pnpm-workspace.yaml:3-3
Timestamp: 2025-08-18T13:48:59.021Z
Learning: constantly-dev는 docs 디렉터리를 컨벤션 문서 추가용으로 사용할 예정이라고 명시했습니다.
🪛 GitHub Actions: ci
packages/design-system/package.json
[error] 1-1: Lockfile specifiers do not match package.json specs. The lockfile must be updated to reflect dependencies listed in package.json.
🪛 GitHub Actions: Chromatic Publish
packages/design-system/package.json
[error] 1-1: Lockfile specifiers in pnpm-lock.yaml do not match the specifications in packages/design-system/package.json. Run 'pnpm install' to regenerate the lockfile.
🪛 actionlint (1.7.7)
.github/workflows/chromatic.yml
30-30: the runner of "actions/cache@v3" action is too old to run on GitHub Actions. update the action's version to fix this issue
(action)
🔇 Additional comments (1)
packages/design-system/src/components/button/Button.tsx (1)
5-10: 기본 type="button" 지정 순서 적절합니다(LGTM).
type="button"을 먼저 지정하고{...props}를 나중에 펼쳐 사용자가 전달한type이 우선하도록 한 점이 좋습니다.
| "scripts": { | ||
| "lint": "eslint .", | ||
| "build": "vite build", | ||
| "check-types": "tsc --noEmit", | ||
| "build": "vite build", | ||
| "build:storybook": "storybook build", | ||
| "dev:storybook": "storybook dev -p 6006", | ||
| "generate:component": "turbo gen react-component" | ||
| }, |
There was a problem hiding this comment.
CI 실패 원인: pnpm-lock.yaml 스펙 불일치 — 루트에서 재생성 필요
파이프라인 에러 메시지처럼 lockfile이 package.json과 맞지 않습니다. 워크스페이스 루트에서 재생성하세요.
권장 절차:
- pnpm 버전 고정 확인(루트 .node-version/.tool-versions 혹은 CI와 동일)
- 루트에서 다음 실행:
pnpm -w install
pnpm -w dedupe
git add pnpm-lock.yaml필요 시 제가 워크스페이스 범위 점검 스크립트 제공 가능합니다.
Also applies to: 21-22, 39-40
🤖 Prompt for AI Agents
packages/design-system/package.json lines 12-19 (also applies to lines 21-22,
39-40): CI is failing because pnpm-lock.yaml is out of sync with package.json;
fix by regenerating the lockfile from the workspace root using the same pnpm
version as CI. At the repository root confirm/pin pnpm version (via
.node-version/.tool-versions or CI config), run pnpm -w install then pnpm -w
dedupe, verify changes, git add pnpm-lock.yaml and commit; ensure the workspace
root lockfile (not per-package) is updated so package.json and pnpm-lock.yaml
match.
| "@vitejs/plugin-react": "^4.5.2", | ||
| "@vitest/browser": "^3.2.4", | ||
| "@vitest/coverage-v8": "^3.2.4", | ||
| "chromatic": "^13.1.3", | ||
| "eslint": "^9.33.0", | ||
| "eslint-plugin-storybook": "9.1.3", | ||
| "playwright": "^1.55.0", | ||
| "storybook": "9.1.3", | ||
| "tailwindcss": "^4.1.12", | ||
| "typescript": "5.9.2", | ||
| "typescript-eslint": "^8.39.1", | ||
| "vite": "^7.1.2" | ||
| "vite": "^7.1.2", | ||
| "vitest": "^3.2.4" |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Vite 7과 @vitejs/plugin-react 호환성 확인 필요
현재 Vite ^7.1.2와 plugin-react ^4.5.2 조합입니다. 메이저 호환성에 이슈가 없는지 최신 문서로 확인 부탁드립니다.
검증 스크립트(루트에서 실행):
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "Vite: $(jq -r '.devDependencies.vite' packages/design-system/package.json)"
echo "Plugin-react: $(jq -r '.devDependencies[\"@vitejs/plugin-react\"]' packages/design-system/package.json)"
echo "참고: 공식 호환성 테이블 확인 권장."Length of output: 490
다음 스크립트를 실행하여 package.json에 지정된 Vite 및 @vitejs/plugin-react 버전과, 해당 플러그인의 peerDependencies를 함께 확인해 주세요.
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# package.json에서 Vite 버전 조회
VITE_VERSION=$(jq -r '.devDependencies.vite // .dependencies.vite' packages/design-system/package.json)
# package.json에서 @vitejs/plugin-react 버전 조회
PLUGIN_RAW=$(jq -r '.devDependencies["@vitejs/plugin-react"] // .dependencies["@vitejs/plugin-react"]' packages/design-system/package.json)
echo "Vite version: $VITE_VERSION"
echo "Plugin React version: $PLUGIN_RAW"
# ^ 또는 ~ 제거
PLUGIN_VERSION=${PLUGIN_RAW#^}
PLUGIN_VERSION=${PLUGIN_VERSION#~}
echo "Fetching peerDependencies for @vitejs/plugin-react@$PLUGIN_VERSION"
curl -s https://registry.npmjs.org/@vitejs/plugin-react/$PLUGIN_VERSION | jq '.peerDependencies'Length of output: 719
Vite 7.1.2와 @vitejs/[email protected] 호환성 문제 확인
@vitejs/[email protected]의 peerDependencies를 조회한 결과, 지원하는 Vite 범위가 ^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0-beta.0로 명시되어 있어, 정식 출시된 Vite 7.1.2는 포함되지 않습니다.
• 대상 파일
packages/design-system/package.json(devDependencies)
• 조치 방안 (필수)
- Vite 버전을 안정적인 6.x 대로 하향 조정하거나,
- Vite 7 정식 버전을 지원하는
@vitejs/plugin-react의 상위 버전(예: 5.x)으로 업그레이드
위 중 하나를 선택해 의존성 충돌을 해소해 주세요.
🤖 Prompt for AI Agents
In packages/design-system/package.json around lines 36 to 48, the
@vitejs/[email protected] peerDependencies do not officially include Vite
7.1.2; fix by choosing one: either (A) change the Vite dependency to a stable
6.x version (e.g., ^6.0.0) or (B) upgrade @vitejs/plugin-react to a version that
supports Vite 7 (e.g., ^5.x), then run your package manager to reinstall, update
lockfile, and verify the dev/build/storybook scripts succeed.
| interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> { | ||
| children: React.ReactNode; | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
타입 네임스페이스 직접 참조 지양: React 타입은 명시적으로 import
현재 파일에서 React 심볼을 타입 위치에서 사용하지만 import가 없습니다. TS 설정에 따라 Cannot find name 'React'가 발생할 수 있습니다. 타입만 import하도록 변경하세요.
-interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
- children: React.ReactNode;
-}
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+ children: ReactNode;
+}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> { | |
| children: React.ReactNode; | |
| } | |
| import type { ButtonHTMLAttributes, ReactNode } from 'react'; | |
| interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> { | |
| children: ReactNode; | |
| } |
🤖 Prompt for AI Agents
In packages/design-system/src/components/button/Button.tsx around lines 1 to 3,
the code references the React namespace in type positions without importing it;
add explicit type imports from 'react' and update the interface to use those
types. Specifically, import the types (e.g. import type { ButtonHTMLAttributes,
ReactNode } from 'react'), then change the interface to extend
ButtonHTMLAttributes<HTMLButtonElement> and use ReactNode for children so the
file no longer relies on the global React symbol.
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled
- Linear integration is disabled
You can enable these sources in your CodeRabbit configuration.
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (1)
.vscode/settings.json(1 hunks)
🧰 Additional context used
🧠 Learnings (1)
📓 Common learnings
Learnt from: constantly-dev
PR: Pinback-Team/pinback-client#2
File: pnpm-workspace.yaml:3-3
Timestamp: 2025-08-18T13:48:59.021Z
Learning: constantly-dev는 docs 디렉터리를 컨벤션 문서 추가용으로 사용할 예정이라고 명시했습니다.
| }, | ||
| "tailwindCSS.experimental.configFile": "./packages/design-system/styles.css" |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Tailwind VS Code 설정: configFile이 CSS를 가리키고 있어 인텔리센스가 비활성화될 수 있음
tailwindCSS.experimental.configFile에는 Tailwind 설정 파일(tailwind.config.{ts,js,cjs,mjs})을 지정해야 합니다. 현재 styles.css를 가리키고 있어 확장 기능이 테마/플러그인/콘텐츠(globs)를 로드하지 못하고, Storybook/디자인 시스템 작업 시 클래스 제안·진단이 제대로 동작하지 않을 수 있습니다. 설계 의도대로라면 packages/design-system/tailwind.config.ts(또는 해당 패키지의 실제 설정 파일)로 변경해 주세요.
적용 제안(diff):
"editor.quickSuggestions": {
"strings": true
},
- "tailwindCSS.experimental.configFile": "./packages/design-system/styles.css"
+ "tailwindCSS.experimental.configFile": "./packages/design-system/tailwind.config.ts"
}여러 패키지에 Tailwind 설정이 추가될 가능성이 있다면(모노레포), 배열 형태로 다중 설정을 지원하도록 확장하는 것도 고려해 주세요:
- "tailwindCSS.experimental.configFile": "./packages/design-system/tailwind.config.ts"
+ "tailwindCSS.experimental.configFile": [
+ "./packages/design-system/tailwind.config.ts"
+ ]설정 파일 경로 자동 확인 스크립트:
문서화 제안: 이전 PR 학습에 따르면 컨벤션 문서는 docs/ 디렉터리에 정리 예정이었습니다. 여기 변경사항(.vscode 설정 의도, 모노레포에서 configFile 지정 이유, Storybook/Chromatic와의 연관성)을 docs/design-system/storybook.md 등으로 간단히 기록하면 온보딩에 도움이 됩니다.
🏁 Script executed:
#!/bin/bash
# 리포지토리 내 tailwind 설정 파일 위치 확인
fd -t f -E node_modules -E dist -E build -E .turbo -g "**/tailwind.config.*" -a | sed 's/^/.\/&/'Length of output: 154
.vscode/settings.json: Tailwind CSS 설정 파일 경로 수정 필요
실제 리포지토리 내에 Tailwind 설정 파일은 packages/design-system이 아닌 apps/extension/tailwind.config.ts 하나뿐입니다. 따라서 VS Code 확장 기능의 인텔리센스가 올바르게 동작하도록 아래와 같이 설정을 변경해 주세요.
• 파일: .vscode/settings.json
- 기존
"tailwindCSS.experimental.configFile": "./packages/design-system/styles.css"
- 변경 제안
"editor.quickSuggestions": { "strings": true }, - "tailwindCSS.experimental.configFile": "./packages/design-system/styles.css" + "tailwindCSS.experimental.configFile": "./apps/extension/tailwind.config.ts" }
• (추가) 모노레포에서 다수의 Tailwind 설정 파일을 관리해야 할 경우 배열 형태로 지정할 수 있습니다.
"tailwindCSS.experimental.configFile": [
"./apps/extension/tailwind.config.ts"
// 향후 design-system 패키지에 config 파일이 생기면 여기에 추가
]• 설정 파일 경로 자동 확인 스크립트 예시
# 워크스페이스 내 tailwind.config.* 파일을 상대경로(./…) 형태로 출력
fd -t f \
-E node_modules -E dist -E build -E .turbo \
-g "tailwind.config.*" \
--strip-cwd-prefix | sed 's|^|./|'문서화: 위 변경사항(.vscode 설정 의도, 다중 config 관리 이유 등)은 docs/ 디렉터리(docs/design-system/storybook.md 등)에 간단히 정리해 두시면 온보딩 및 유지보수에 도움이 됩니다.
🤖 Prompt for AI Agents
.vscode/settings.json around lines 20-21: the Tailwind config path is pointing
to ./packages/design-system/styles.css but the repo only has
apps/extension/tailwind.config.ts; update "tailwindCSS.experimental.configFile"
to reference "./apps/extension/tailwind.config.ts" (or replace the value with an
array containing that path if you want to support multiple configs in the
monorepo), and optionally add a short note in docs/ (e.g.,
docs/design-system/storybook.md) describing the VS Code setting and how to add
additional config paths.
📌 Related Issues
✅ 체크 리스트
📄 Tasks
⭐ PR Point (To Reviewer)
1️⃣ 스토리북 초기 설정
1. Storybook 설치
2. 기본 config 설정
: 설치하면 자동으로 현재 위치 기준 root에
.storybook가 생기고, eslint 파일이 있다면 내부에eslint-plugin-storybookimport문 추가,vite.config.ts에 관련 설정 추가 등 기본 설정을 해줘요. 이 기본 설정을 필요한 설정으로 커스텀 하면 돼요..storybook안에는 기본적으로 3개의 파일이 생겨요.main.ts: stories를 위한 config 설정 파일preview.ts: 스토리 렌더링에 영향을 미치는 글로벌 설정과 데코레이터를 정의하는 파일vitest.setup.ts: vitest setup 파일3. 스토리북 시작
초기 init을 하면 다음과 같이
package.json에storybook이라는 script가 생겨요."storybook": "storybook dev -p 6006"따라서
pnpm stroybook을 하면 스크립트 내부에서 6006 port의 dev 서버를 실행하게 돼요. 이후 브라우저에서 열리는 것으로 스토리들을 확인할 수 있어요.저는 여기서 script를 조금 수정했어요. 결국 해당 script도 dev 서버를 여는 행위이기 때문에 앞은 dev로 통일하고 컨벤션으로
:를 사용해서 뒤에 storybook 키워드를 붙여 재정의했어요.따라서 우리 팀은
pnpm stroybook이 아닌pnpm dev:storybook을 입력해주면 실행이 잘 돼요!Warning
대신
cd packages/design-system먼저 입력해서 ds 내부로 가야합니다!2️⃣ Storybook chromatic 배포
물론 개발자들은 따로 개발 서버(6006 port)를 열어서 확인할 수 있지만, 디자이너분들과 디자인 시스템에 대해서 소통을 할 때는 사용할 수 없기 때문에 배포가 필요하다고 판단했어요. 그 중에서 storybook 공식 문서에서도 언급하는 chromatic으로 배포했어요.
배포 과정
pnpm add -D chromatic.github/workflows에 workflow 작성 (chromatic.yml)projectToken을 github secret으로 등록3️⃣ design-system package에
turbo.json추가스토리북 초기 설정과 배포를 했지만 불편한 점이 있었어요. stroybook도 build가 추가적으로 필요한데, 해당 의존이 design-system에 있기 때문에 항상
cd packages/deisng-system을 하고 script 입력을 해야 된다는 불편함이었어요.사실 turborepo를 사용한 모노레포를 사용하는 것의 장점에서 여러 개의 패키지와 apps 사이에서 의존성을 기반으로 잘 관리할 수 있게 하는 것인데, 이 장점을 제대로 살리지 못한다는 생각이 들었어요. 그래서 공부를 해서 해결책을 찾았어요.
먼저 자세히 설명하기에 앞서
turbo.json이란 turbo의 동작에 대한 config를 정의할 수 있는 파일이에요. 그래서 우리 프로젝트 전체 root에도turbo.json이 있고 tasks(동작)에 대한 정의가 되어있는 것을 볼 수 있어요. 이 설정 파일에서 옵션에서 발견한 것이 바로with에요.withturborepo 공식 문서
즉 이렇게 작성하면 root에서
pnpm build를 입력하면 하위 연결된 workspace에서build:storybook도 같이 실행한다는 의미가 되는거죠! 이렇게 cd를 통해 ds로 가야만 하는 불편함을 조금이라도 줄여봤어요.그러면 dev 명령어도 추가하면 똑같이 root에서도 가능하지만 apps dev를 실행하는데 storybook까지 실행하는 것은 조금 불필요한 작업이 될 것이라 판단해서 일단 build 명령어만 with에 추가했어요.
Note
위에서
dev:storybook한 것처럼 build도build:stroybook컨벤션을 지켰어요. 하지만 yml에서 사용한chromaui/action@latest는 기본적으로 설정되는build-storybook명령어를 찾아서 오류가 생겼어요.따라서 yml 설정에
buildScriptName를 추가해서build:storybookscript가 실행되게 바꿔줬습니다 👍4️⃣ 팀 컨벤션 & Story 작성
스토리북 컨벤션
기본적으로 Button.stories.tsx과 같이 stories를 파일명 중간에 넣어줘야 해요.
그리고 design-system/src/components 아래 컴포넌트 폴더를 만들고 안에 컴포넌트 tsx파일과 story 파일을 같이 위치 시켜주세요.
이런 폴더 구조를 선택한 이유는 팀 회의에서도 말했듯이 최대한 관련 코드를 가까이 두는 것이 가독성과 유지 보수이 용이할 것이라 생각했기 때문이에요.
이렇게 하고
index.ts에서 defualt형태로 export 문을 추가하면 다른 곳에서@pinback/design-system/ui로 import를 통해 컴포넌트 들을 사용할 수 있어요.Note
해당 index.ts 방식처럼 한번에 export를 모아서 하는 것을 배럴파일이라고 불러요.
이 방식은 사실 성능 상의 이슈가 있을 수 있다는 것이 꽤 증명된 사실이에요. 하지만 그 성능 이슈는 프로젝트 규모에 따라 많이 달라진다고 판단했고, 아직 우리 프로젝트의 ds 규모가 크지 않은 것을 생각했을 때 괜찮다고 판단했어요. 추후 성능에 대한 문제가 생긴다면 한번 더 구조를 바꿔볼게요!
Story 작성
사실 이 부분은 제가 PR로 작성하는 것보다 공식 문서를 참고해서 기본적인 사용법을 익히는 것을 추천드려요! 기본 사용에 대해서는 러닝 커브가 그렇게 크지 않아서 꼭 공부해보시는 것을 추천드립니다 👍
대신 공식 문서가 조금 어렵게 느껴진다면 주변 좋은 동료 분이 작성해주신 아티클이 있어서 첨부할게요. 이걸로 먼저 공부해보고 공식 문서를 보고 해도 좋을 것 같아요~~
동료분의 좋은 storybook 입문 아티클
storybook 공식문서
📷 Screenshot
Summary by CodeRabbit