본문 바로가기
개발개발/Date-project

[스토리북] autodocs 개별 스토리에서 해제하기

by yelimu 2025. 3. 13.
const config: StorybookConfig = {
	...
  docs: {
    autodocs: true,
  },

};

 

스토리북 main.ts에서 위와 같이 옵션을 추가하여 docs 를 자동으로 생성할 수 있다.

 

그럼 이렇게 Docs 가 추가된다.

 

https://memoryelim.tistory.com/223

 

스토리북 (storybook) 기본 사용 방법

공통 컴포넌트인 input 컴포넌트의 스토리 코드를 보면서 기본 사용 방법을 정리해보려고 한다.스토리 파일 경로src/app/stories/design-system/components/input/text/input.stories.tsx(next.js app router 기준) 스토리

memoryelim.tistory.com

 

이전에 스토리북을 사용했을때는 이런 설정에 대해 모르고 개별 스토리 파일( xxx.stories.ts | tsx) 에서 

tags : ['autodocs'] 옵션을 추가해서 Docs를 생성했었다.

 

그런데 특정 개별 스토리 파일에서 Docs 를 생성하지 않도록 하려면 어떻게 해야할까? 

답은 아주 간단하다. 개별 스토리 파일( xxx.stories.ts | tsx) 에서 

tags : ['!autodocs'] 옵션을 추가해주면 된다. 

 

방법을 못찾고있었는데 역시 답은 공식문서에 있었다. 👏

 

https://storybook.js.org/docs/writing-docs/autodocs

 

Storybook: Frontend workshop for UI development

Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation. It's open source and free.

storybook.js.org

이렇게 즉시 Docs 가 사라진다