스토리북 및 크로마틱 작업

.eslintrc.json

@@ -11,7 +11,8 @@
  "plugin:tailwindcss/recommended",
  "plugin:react/recommended",
  "prettier",
- "plugin:@tanstack/eslint-plugin-query/recommended"
+ "plugin:@tanstack/eslint-plugin-query/recommended",
+ "plugin:storybook/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {

.github/workflows/chromatic.yml

@@ -0,0 +1,23 @@
+name: 'Chromatic'
+
+on:
+ push:
+ branches-ignore:
+ - main
+
+jobs:
+ chromatic:
+ runs-on: ubuntu-latest
+ steps:
+ - name: Checkout code
+ uses: actions/checkout@v4
+ with:
+ fetch-depth: 0
+
+ - name: Install dependencies
+ run: npm ci
+
+ - name: Publish to Chromatic
+ uses: chromaui/action@latest
+ with:
+ projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

.github/workflows/deploy.yml

@@ -6,7 +6,7 @@ env:
 
 on:
  push:
- branches: ["main"]
+ branches: ['main']
 
 permissions:
  contents: read

.gitignore

@@ -34,3 +34,9 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# chromatic
+build-storybook.log
+chromatic.log
+chromatic-build-*.xml
+chromatic-diagnostics.json

.storybook/main.ts

@@ -0,0 +1,28 @@
+import path from 'path';
+import type { StorybookConfig } from '@storybook/nextjs';
+
+const config: StorybookConfig = {
+ stories: ['../app/**/*.mdx', '../app/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+ addons: [
+ '@storybook/addon-links',
+ '@storybook/addon-essentials',
+ '@storybook/addon-onboarding',
+ '@storybook/addon-interactions',
+ ],
+ framework: {
+ name: '@storybook/nextjs',
+ options: {},
+ },
+ webpackFinal: async (config) => {
+ if (config.resolve) {
+ config.resolve.alias = {
+ ...config.resolve.alias,
+ '@': path.resolve(__dirname, '../'),
+ };
+ }
+
+ return config;
+ },
+};
+
+export default config;

.storybook/preview.ts

@@ -0,0 +1,19 @@
+import type { Preview } from '@storybook/react';
+import '../app/globals.css';
+
+const preview: Preview = {
+ parameters: {
+ actions: { argTypesRegex: '^on[A-Z].*' },
+ controls: {
+ matchers: {
+ color: /(background|color)$/i,
+ date: /Date$/i,
+ },
+ },
+ nextjs: {
+ appDirectory: true,
+ },
+ },
+};
+
+export default preview;

app/Button.stories.tsx

@@ -0,0 +1,26 @@
+import Button from '@/components/common/buttons/button';
+import type { Meta, StoryObj } from '@storybook/react';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta: Meta<typeof Button> = {
+ title: 'Components/Button',
+ component: Button,
+ parameters: {
+ // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+ layout: 'centered',
+ },
+ // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+ tags: ['autodocs'],
+ // More on argTypes: https://storybook.js.org/docs/api/argtypes
+ // argTypes: {
+ // backgroundColor: { control: 'color' },
+ // },
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary: Story = {
+ render: () => <Button>버튼</Button>,
+};