React-Styleguidist
여러 강의를 섭렵하며 따라해봤지만 뜨는 에러
이렇게 저렇게 찾아보았지만 아직 안정되지 않은 라이브러리라는 생각에 Storybook으로 빠르게 전환!
Storybook으로 Ui컴포넌트를 정리해보자
처음 회사의 소스코드를 보았을 때, 그 당황스러움...
나는 다른 누군가에게 그런 당황스러움을 주고 싶지 않다..
초반에 회사에서 UI 라이브러리를 계속 언급하셔서 조사했던 것인데, 이젠 내가 더 적용해보고 싶은 욕심이 난 사내 UI 라이브러리 만들기!
생각보다 UX진행이 더딘 편이고.. 시간도 좀 남는 것 같고.. (사실은 약간 심심한..)
고럼 시작해보자 (Install)
셋팅되어 있는 react 프로젝트에 npx sb init 만 terminal에 치면 알아서 셋팅이 완성!
npm run storybook을 치면 react처럼 알아서 localhost page가 똭!
Storybook은 코드 참고하라고 stories라는 directory를 형성해 예시까지 친절히 주신다.
또 다른 문제 봉착!!!!!
회사 프로젝트는 Material-Ui를 사용하고 공통적인 style을 위해 ThemeProvider를 이용하여 root에서 스타일을 override해서 사용하고 있다.
이 의미는 어쨌든 react에서 global style을 적용한게 storybook에서는 적용되지 않는다는 것
또 해결책을 찾아나섰고 다행히 해결한 것 같은 느낌적인 느낌;;;
Global style적용하기 (Material-Ui 사용)
아마 Material-Ui를 사용하지 않더라도 그 방법은 비슷할 것으로 예상한다. 이 정보를 바탕으로 검색 고고
storybook을 install하면 자동으로 .storybook directory가 생성된다.
preview.js 파일로 들어간다
이렇게 셋팅이 되어 있다. 나는 해당 부분을 주석처리하고 (혹시나 해서 남겨 둔..)
이렇게 작성하였다.
간단하게 설명하자면 ThemeProvider는 Material-Ui에서 제공해주고 있는 global style override tool이고 GlobalMuiTheme(creatMuiTheme 이용)이라는 파일에 있는 theme들을 import해서 주입시켰다.
Material-Ui global style적용에 관해 적은 블로그글 (짧고 간단함)
이렇게 작성하면 Storybook에서도 지금까지 적용해놓은 global style들이 똑같이 적용되고 있는 것을 볼 수 있다. 복붙하지 않아도 돼서 다행이야
저 노란색 밑줄을 없애는 또 다른 난관이 남아 있지만 자야하는 시간이라 오늘은 여기까지!
