Atomic Design Pattern + StoryBook 적용해보기

드디어 정했다!

 

내가 이번에 적용해볼 디자인 패턴은 

 

https://velog.io/@teo/Atomic-Design-Pattern

Atomic Design Pattern의 Best Practice 여정기

 

내용추가!

 

atomic design pattern을 위한 세팅을 모두 마쳤다.

 

처음에 설계를 어떻게 해야할지 몰라서 정말 많이 헤맸지만

 

좋은 블로그 글들, Github 검색을 통해 많이 참고했다. 레이아웃은 포토샵으로 간단하게 마쳤다.

이번에 만들 것은토이프로젝트이기 때문에 비교적 심플해서 시간이 많이 걸리진 않았다 휴우-

 

암튼 이제 세팅을 마치고 atoms의 가장 기본이라는 button부터 하려는데

 

와우..이거 UI를 만들고 확인을 할라니 ... 여간 번거로운게 아니다;;

 

처음에 atomic design을 검색했을 때 항상 같이 등장하는게 storybook이었는데 이것은 디자이너가 있을때

협업을 위한 도구라고 생각을 해서 난 사용을 안하면 되나..?싶었는데

 

바로 지금 내가 당장! 필요한 툴이었다.

 

GPT쌤이 알려준 storybook 정의

 

storybook도 이번에 사용해보게되어서 설렘반 걱정반!! 

 

https://velog.io/@velopert/design-system-using-typescript-and-storybook

TypeScript와 Storybook을 사용한 리액트 디자인 시스템 구축하기

https://velog.io/@devstone/%EC%8A%A4%ED%86%A0%EB%A6%AC%EB%B6%81-%EC%A0%9C%EB%8C%80%EB%A1%9C-%ED%99%9C%EC%9A%A9%ED%95%98%EA%B8%B0

스토리북 제대로 활용하기