Skip to content

[Init] Storybook 초기 세팅 #18

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
u-zzn merged 11 commits into from
Jan 6, 2026
Merged

[Init] Storybook 초기 세팅 #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
ac43172
init: Storybook 초기 설정 구성
u-zzn Jan 4, 2026
2b19139
chore: Storybook 도입을 위한 프로젝트 설정 추가
u-zzn Jan 4, 2026
cd73ce8
docs: Storybook 사용 가이드 문서 추가
u-zzn Jan 4, 2026
efcb62f
feat: 예시 Button 공용 UI 및 Storybook 스토리 추가
u-zzn Jan 4, 2026
75ebaae
chore: pnpm lockfile 동기화
u-zzn Jan 4, 2026
11f6a94
chore: vite-tsconfig-paths 의존성 추가
u-zzn Jan 5, 2026
029b872
feat: Storybook main 설정 추가 및 FSD alias 지원
u-zzn Jan 5, 2026
5bfac51
feat: Storybook preview 전역 파라미터 설정
u-zzn Jan 5, 2026
045ecf2
style: Storybook import type 위치 컨벤션 적용
u-zzn Jan 5, 2026
32538e6
Merge branch 'dev' into init/#11/storybook-init
u-zzn Jan 5, 2026
4fb2058
fix: 빌드 에러 해결 (#11)
odukong Jan 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,4 +24,6 @@ dist-ssr
*.sln
*.sw?

.env
.env
*storybook.log
storybook-static
27 changes: 27 additions & 0 deletions .storybook/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import type { StorybookConfig } from '@storybook/react-vite';

Check warning on line 1 in .storybook/main.ts

View workflow job for this annotation

GitHub Actions / build-and-deploy 

`@storybook/react-vite` type import should occur after import of `vite-tsconfig-paths`

Check warning on line 1 in .storybook/main.ts

View workflow job for this annotation

GitHub Actions / build-and-deploy 

There should be at least one empty line between import groups
import { mergeConfig } from 'vite';
import tsconfigPaths from 'vite-tsconfig-paths';

const config: StorybookConfig = {
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],

addons: ['@storybook/addon-docs', '@storybook/addon-a11y'],

framework: '@storybook/react-vite',

viteFinal: async (storybookConfig) =>
mergeConfig(storybookConfig, {
plugins: [tsconfigPaths()],
}),

typescript: {
reactDocgen: 'react-docgen-typescript',
reactDocgenTypescriptOptions: {
shouldExtractLiteralValuesFromEnum: true,
shouldRemoveUndefinedFromOptional: true,
propFilter: (prop) => !/node_modules/.test(prop.parent?.fileName || ''),
},
},
};

export default config;
22 changes: 22 additions & 0 deletions .storybook/preview.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import type { Preview } from '@storybook/react-vite';

// 나중에 전역 스타일 여기서 import
// vanilla-extract의 globalStyle / theme entry 여기서 불러옴
// 예: import '@/shared/styles/global.css.ts';

const preview: Preview = {
tags: ['autodocs'],

parameters: {
layout: 'padded',

controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/i,
},
},
Comment on lines +13 to +18
Copy link
Collaborator

@odukong odukong Jan 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

스토리북의 대부분 컴포넌트에서 docs 파일이 생성될 거라면, preview.ts파일에 tags: ["autodocs"] 옵션을 미리 추가해주는 것도 좋을 것 같아요🙌🏻

Suggested change
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/i,
},
},
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/i,
},
},
tags: ["autodocs"],

},
};

export default preview;
2 changes: 2 additions & 0 deletions eslint.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
import storybook from "eslint-plugin-storybook";
import js from "@eslint/js";
import globals from "globals";
import reactHooks from "eslint-plugin-react-hooks";
Expand Down
9 changes: 8 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,9 @@
"dev": "vite",
"build": "tsc -b && vite build",
"lint": "eslint .",
"preview": "vite preview"
"preview": "vite preview",
"storybook": "storybook dev -p 6006",
"build-storybook": "storybook build"
},
"dependencies": {
"eslint-import-resolver-typescript": "^4.4.4",
Expand All @@ -16,6 +18,9 @@
},
"devDependencies": {
"@eslint/js": "^9.39.1",
"@storybook/addon-a11y": "^10.1.11",
"@storybook/addon-docs": "^10.1.11",
"@storybook/react-vite": "^10.1.11",
"@svgr/plugin-svgo": "^8.1.0",
"@types/node": "^24.10.1",
"@types/react": "^19.2.5",
Expand All @@ -30,7 +35,9 @@
"eslint-plugin-react": "^7.37.5",
"eslint-plugin-react-hooks": "^7.0.1",
"eslint-plugin-react-refresh": "^0.4.24",
"eslint-plugin-storybook": "^10.1.11",
"globals": "^16.5.0",
"storybook": "^10.1.11",
"prettier": "3.7.4",
"typescript": "~5.9.3",
"typescript-eslint": "^8.46.4",
Expand Down
Loading
Loading