Setting(design-system): storybook 설정 및 chromatic 배포 #14
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -40,3 +40,6 @@ yarn-error.log* | |
| # typescript | ||
| # 증분 빌드 정보 파일 | ||
| *.tsbuildinfo | ||
|
|
||
| *storybook.log | ||
| storybook-static | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| import type { StorybookConfig } from '@storybook/react-vite'; | ||
| import { dirname, join } from 'path'; | ||
|
|
||
| /** | ||
| * 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'))); | ||
| } | ||
| const config: StorybookConfig = { | ||
| stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], | ||
| addons: [ | ||
| getAbsolutePath('@chromatic-com/storybook'), | ||
| getAbsolutePath('@storybook/addon-docs'), | ||
| getAbsolutePath('@storybook/addon-onboarding'), | ||
| getAbsolutePath('@storybook/addon-a11y'), | ||
| getAbsolutePath('@storybook/addon-vitest'), | ||
| ], | ||
| framework: { | ||
| name: getAbsolutePath('@storybook/react-vite'), | ||
| options: {}, | ||
| }, | ||
| docs: { | ||
| defaultName: 'Documentation', | ||
| }, | ||
| typescript: { | ||
| check: true, | ||
| reactDocgen: 'react-docgen-typescript', | ||
| }, | ||
| }; | ||
| export default config; | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| import type { Preview } from '@storybook/react-vite'; | ||
| import '../styles.css'; | ||
|
|
||
| const preview: Preview = { | ||
| parameters: { | ||
| actions: { argTypesRegex: '^on[A-Z].*' }, | ||
|
Collaborator
There was a problem hiding this comment. 주로 저희는 액션 on~으로 컨벤션 맞추면 될까용??
Member
Author
There was a problem hiding this comment. story 부분 설정하면서 생각이 나서! on prefix 설정을 통일하는 것도 괜찮을 것 같아요.
Collaborator
There was a problem hiding this comment. 저희 서비스가 어차피 구분할 비슷한 기능들이 많은 것도 아니구 개발 사이즈도 큰 건 아니라, on 범위 정도로도 충분히 다 액션 정의해도 될 것 같아요! handle 키워드를 만약 쓰게 된다해도, |
||
|
|
||
| controls: { | ||
| matchers: { | ||
| color: /(background|color)$/i, | ||
| date: /Date$/i, | ||
| }, | ||
|
Comment on lines
+8
to
+13
Collaborator
There was a problem hiding this comment.
Member
Author
There was a problem hiding this comment.
|
||
| }, | ||
|
|
||
| tags: ['autodocs'], | ||
| }, | ||
coderabbitai[bot] marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
| }; | ||
|
|
||
| export default preview; | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
| @@ -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) 기준, 수정 제안: -import { setProjectAnnotations } from '@storybook/react-vite';
+import { setProjectAnnotations } from '@storybook/portable-stories';📝 Committable suggestion
Suggested change
🤖 Prompt for AI Agents |
||||||
| import * as projectAnnotations from './preview'; | ||||||
|
|
||||||
| // This is an important step to apply the right configuration when testing your stories. | ||||||
| // More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations | ||||||
| setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]); | ||||||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| @@ -1,4 +1,23 @@ | ||||||||||
| // For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format | ||||||||||
| import storybook from 'eslint-plugin-storybook'; | ||||||||||
|
|
||||||||||
| import config from '@pinback/eslint-config/react-internal'; | ||||||||||
|
|
||||||||||
| /** @type {import("eslint").Linter.Config} */ | ||||||||||
| export default [ | ||||||||||
| ...storybook.configs['flat/recommended'], | ||||||||||
| ...config, | ||||||||||
| { | ||||||||||
| files: ['**/*.js', '**/*.ts'], | ||||||||||
| ignores: [ | ||||||||||
|
Comment on lines
+11
to
+12
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
Suggested change
🤖 Prompt for AI Agents |
||||||||||
| 'node_modules', | ||||||||||
| 'dist', | ||||||||||
| 'build', | ||||||||||
| 'public', | ||||||||||
| 'public/**', | ||||||||||
| 'public/**/*', | ||||||||||
| 'storybook-static', | ||||||||||
| 'icons/**/*', | ||||||||||
| ], | ||||||||||
| }, | ||||||||||
| ]; | ||||||||||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| import { Meta } from '@storybook/blocks'; | ||
|
|
||
| <Meta title="Introduction" /> | ||
|
|
||
| # PinBack Design System (pds) | ||
|
|
||
| #### pds는 PinBack 서비스를 위한 통합된 디자인 언어입니다. | ||
|
|
||
| <br /> | ||
| <br /> | ||
| <br /> | ||
|
|
||
| ## pds 사용하기 | ||
|
|
||
| #### pds는 총 3개의 서비스에 걸쳐 제공됩니다. [(Github)](https://github.com/Pinback-Team/pinback-client)<br />이 사이트는 모든 PinBack 서비스의 기반이 되어 디자인에 필요한 가이드라인 및 스펙을 제공합니다. | ||
|
|
||
| - client | ||
| - extension | ||
| - landing | ||
|
|
||
| <br /> | ||
|
|
||
| ## 가이드라인 | ||
|
|
||
| - Components | ||
| - Colors | ||
| - Fonts | ||
| - Icons |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| @@ -0,0 +1,16 @@ | ||||||||||||||
| { | ||||||||||||||
| "$schema": "../../node_modules/turbo/schema.json", | ||||||||||||||
| "extends": ["//"], | ||||||||||||||
| "tasks": { | ||||||||||||||
| "build": { | ||||||||||||||
| "with": ["build:storybook"] | ||||||||||||||
|
Collaborator
There was a problem hiding this comment. 찾아보니, 스토리북 CLI는 디렉토리 기준으로 main.tz, tsconfig 등을 읽어야 하는데 이게 디자인시스템 내로 들어가있어서 루트딴에서 실행이 안되는군여 이렇게 설정하면 확실히 경로이동 덜 번거로워질 것 같네요! 감사합니다 |
||||||||||||||
| }, | ||||||||||||||
|
Comment on lines
+5
to
+7
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
Suggested change
🤖 Prompt for AI Agents
Collaborator
There was a problem hiding this comment. with도 정식 옵션이 맞지마 두개 차이점이 좀 있는거같아요. with는 동시실행이 목적이고 dependsOn은 빌드 순서 보장이 필요할 때 사용하는것같아요. 확인해보고 우리 프로젝트에 필요한거 적용하면 좋을것같네요-!! There was a problem hiding this comment. 🧩 Analysis chain🌐 Web query: 💡 Result: Short answer — purpose and difference
Key details / how to choose
Examples (from the official docs)
Notes about schema and naming
I pulled these details from the official Turborepo docs today (I checked the docs on August 21, 2025). If you want:
tell me which and I’ll fetch or generate it. Citations:
@jjangminii 맞습니다! 제가 잘못된 정보를 제공했네요. 죄송합니다. "with"와 "dependsOn" 모두 정식 Turbo 옵션입니다:
현재 상황에서는 Storybook 빌드가 완료된 후 메인 빌드가 실행되어야 한다면 "build": {
"dependsOn": ["^build", "build:storybook"]
}하지만 만약 병렬 실행이 목적이라면 현재 정확한 정보 수정해 주셔서 감사합니다. 🙏 ✏️ Learnings added
|
||||||||||||||
| "build:storybook": { | ||||||||||||||
| "outputs": ["storybook-static/**"] | ||||||||||||||
| }, | ||||||||||||||
| "dev:storybook": { | ||||||||||||||
| "cache": false, | ||||||||||||||
| "persistent": true | ||||||||||||||
| } | ||||||||||||||
| } | ||||||||||||||
| } | ||||||||||||||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,8 +1,16 @@ | ||
| /// <reference types="vitest/config" /> | ||
| import tailwindcss from '@tailwindcss/vite'; | ||
| import react from '@vitejs/plugin-react'; | ||
| import path from 'path'; | ||
| import { defineConfig } from 'vite'; | ||
| import { fileURLToPath } from 'node:url'; | ||
| import { storybookTest } from '@storybook/addon-vitest/vitest-plugin'; | ||
| const dirname = | ||
| typeof __dirname !== 'undefined' | ||
| ? __dirname | ||
| : path.dirname(fileURLToPath(import.meta.url)); | ||
|
|
||
| // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon | ||
| export default defineConfig({ | ||
| plugins: [react(), tailwindcss()], | ||
| resolve: { | ||
|
|
@@ -27,4 +35,32 @@ export default defineConfig({ | |
| }, | ||
| }, | ||
| }, | ||
| test: { | ||
| projects: [ | ||
| { | ||
| extends: true, | ||
| plugins: [ | ||
| // The plugin will run tests for the stories defined in your Storybook config | ||
| // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest | ||
| storybookTest({ | ||
| configDir: path.join(dirname, '.storybook'), | ||
| }), | ||
| ], | ||
| test: { | ||
| name: 'storybook', | ||
| browser: { | ||
| enabled: true, | ||
| headless: true, | ||
| provider: 'playwright', | ||
| instances: [ | ||
| { | ||
| browser: 'chromium', | ||
| }, | ||
| ], | ||
| }, | ||
| setupFiles: ['.storybook/vitest.setup.ts'], | ||
| }, | ||
| }, | ||
| ], | ||
| }, | ||
| }); | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| /// <reference types="@vitest/browser/providers/playwright" /> |
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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
🤖 Prompt for AI Agents