Mocule Design_20210524-25_Day22,23

진행 사항

- Select Molecule Component 구현

- InputForm Molecule Component 구현

- FilterBar Molecule Component 구현

 

1. Select Molecule

2. InputForm Molecule

3. FilterBar Molecule

위 세가지 Molecule Component 들은 addon Knobs 를 사용하여 storybook UI 상에서 props 들을 다이나믹하게 조정할 수 있도록 구현했다.

Knobs 가 개선된 것이 addon control 이라고 하는데 addon control 을 사용할 경우 아래와 같이 Atom Component 로부터 props 를 전달받아 사용할 때 객체 형태로 표현이 된다. value 값을 변경하면 정상적으로 UI가 변하는데, Knobs 를 사용할 때처럼 Name 부분에 children, styletype, to, disabled 등을 표현할 수가 없었다.

다른 방법을 사용함에 있어 옳고 그름은 없겠지만, 어떤 방법이 더 효율적인지 알아볼 필요가 있다.

 

도움 받은 사이트

How to use Knobs: https://storybook.js.org/addons/storybook-addon-knobs-color-options

Index inside map() function: https://stackoverflow.com/questions/38364400/index-inside-map-function

How to use Controls addon: https://www.npmjs.com/package/@storybook/addon-controls