스토리 작성하기 (Storybook, TailwindCSS)

YeongMin·2022년 5월 16일
1

Storybook

목록 보기
1/1

📚 Storybook + TailwindCSS 적용하기

Storybook과 TailwindCSS의 공식문서에 나와있는 가이드를 통해 설정을 완료를 하였음에도
yarn storybook 을 통해 Storybook 툴 내부를 확인하였으나 내가 생각한대로 css가 변경이 되질 않았다.

TailWindCSSStorybook 툴 내부에서 적용하려면 아래와 같은 세팅을 해주어야 했다. (무척이나 간단..)

// .storybook/preview.js

// 바로 이 부분 !!
import "../../tailwind.css

export const parameters = {
	actions: { argTypesRegex: '^on[A-Z].*' },
	controls: {
		matchers: {
			color: /(background|color)$/i,
			date: /Date$/,
		},
	},
};

src/index.tsx 파일에서만 import 해주었기 때문에 Storybook 에서는 TailWindCSS 를 인식하지 못하는 것이었다..😲

📌 Story 작성하기

기본 뼈대가 될 UI Component 파일을 작성한다. 평소에 React 에서 사용한 Component와 동일하다.

// src/stories/TextInput.tsx

import React from 'react';

export interface TextInputProps {
	value: string;
	width: string;
	padding: string;
	border: string;
	borderColor: string;
}

export default function TextInput({ value, width, padding, border, borderColor }: TextInputProps) {
	return <input className={`${padding} ${width} ${border} ${borderColor || ''}`} value={value} />;
}

Storybook 에서 렌더링 하기 위한 ComponentpropsStorybook 의 각종 설정등을 작성하는 파일이다.
하나의 컴포넌트는 여러개의 Story 를 가질 수 있으며 Story 마다 다른 arguments 를 전달할 수 있다.

src/stories/TextInput.tsx 의 props들을 설정하고 Storybook 툴 내부를 채워넣어보자!


// src/stories/TextInput.stories.tsx

import React from 'react';
// 기존의 { Meat, Story } 에서 변경된 부분
import { ComponentMeta, ComponentStory } from '@storybook/react';
import TextInput from './TextInput';

export default {
	title: 'Component/Input/TextInput',
	component: TextInput,
	args: {
		padding: 'p-[24px]',
		width: 'w-[585px]',
		border: 'border-2 rounded',
	},
} as ComponentMeta<typeof TextInput>;

// ESLint-config-airbnb: "^19.0.4" 에서 화살표함수를 통해 표현식을 사용하니 [Error]를 뿜어냈다.. 
// 아래 방식을 권유하던데 왜 그런지는 잘 이해가 가질 않는다..
const Template: ComponentStory<typeof TextInput> = function Template(args) {
	const { value, padding, width, border, borderColor } = args;
	return <TextInput 
             value={value} 
             width={width} 
             padding={padding} 
             border={border} 
             borderColor={borderColor} 
           />;
};

export const NotTyping = Template.bind({});
NotTyping.args = {
	value: '작성 전',
};

export const Typing = Template.bind({});
Typing.args = {
	value: '작성 중',
	borderColor: 'border-orange-500',
};

기존의 import { Meta, Story } from '@storybook/react' 부분은 ComponentProps type 을 내보내서 확인을 해야했다.
Storybook v.6.3 에서부터는 그럴 필요없이 Component 를 내보내기만 하여 리액트에서 사용할 수 있도록 변경되었다고 한다.

✨실행해보기

yarn storybook

Not Typing 스토리

Typing 스토리


현재 이 포스트는 단순히 구현해보며 작성한 포스트이며 Storybook의 다양한 옵션(actions, ...) 들은 경험해보지 못한 상태로 작성한 포스트입니다. 😔

profile
Front-End 안영민

0개의 댓글