처음 사용할 때 RCA에 scss를 적용하려 했는데 잘 안되서 ... 이걸 써야하나 고민했는데
스토리북이 문제가 아니라 설정이 문제였던 것 같다

일단 vite가 더 설정이 잘되고 속도가 빠르다

• 단점? 발견한 문제점은 템플릿으로 설정한 controll의 반영이 느려서
  브라우저 상에서 로딩이 덜 된 에러가 발생하기도 하고 ( 인터페이스 )
• 사용안하게 된 파일을 가르키고 있는 링크 해시값을 자동 조절해주지 않는다
  브라우저 상에서 별도의 새로고침과 조작을 가끔씩 해줘야한다는 것

사용한 세팅 방법, vite

1. npm create vite@latest ./ -- --template react
2. npm i sass
3. npx storybook init
   1. vite 인지 react-create-app 인지에 따라 다르게 설치되는 것을 확인함

타입스크립트 사용시 참고

https://storybook.js.org/docs/react/builders/vite

https://www.npmjs.com/package/@storybook/builder-vite

1. npm install @storybook/builder-vite --save-dev
   1. init 했으면 안해도 된다

---

사용 방법

arg table

접기 가능하고 속성들의 영역을 구분시켜주는 역활

https://storybook.js.org/docs/react/writing-docs/doc-block-argstable

controls

속성들의 입력 형식을 설정할 수 있음

https://storybook.js.org/docs/react/essentials/controls

스토리북의 장점

별다른 input 인터페이스를 설정할 필요 없이 props를 조절해볼 수 있다

• *.stories.jsx|tsx 함수 컴포넌트에 객체를 전달하는 방식으로 전달하면 인식해서 입력 인터페이스를 만들어줌

컴포넌트 각각을 시각화해서 볼 수있고 이는 아토믹 디자인 패턴을 시각화 함에 유용하다

• 아토믹 디자인 패턴이 활용된게 컴포넌트 개념
• 시각적 인터렉션을 확인 할 수 있음
  • 불러온 컴포넌트의 동작을 다 확인 할 수 있는 것임
• 단일 컴포넌트에서의 변화를 관찰할 수 있음

디자인 시스템을 포함한 문서를 만들 수 있음

• 이 문서는 일차적으로 mdx라는 마크다운 확장 형식으로 만들 수 있어서 디자이너나 기획자한테 시키기 유용하다
• 디자인 시스템을 재사용가능하게 캡슐화 하기도 함 ( 다양한 addons.. 여서 생략 )