Storybook 문서화하기

 

이번과제는?
이번 과제에서는 Figma에서 디자인된 컴포넌트를 React 컴포넌트로 구현해야 합니다. 이를 위해, Figma에서 추출한 디자인 토큰과 Styled Components을 사용하여 일관된 디자인을 유지하고, Storybook을 사용하여 각각의 컴포넌트에 대한 문서화를 진행합니다.
이 과정을 통해 디자인 시스템 구축 및 코드로 디자인을 구현하는 경험을 쌓을 수 있습니다.

---

수업내용이 거의 문서로 진행되서 진짜 이해가 안되었다 ㅜ
페어분이 설명을 들은 뒤, 나만의 언어로 정리해보았다!

피그마에서 컴포넌트를 보고, 달라지는 요소에 대한 키와 값을 고민한다
이때 hover 기능인지, active 기능인지에 따라 외형적 기준이 달라진다
(잘 모르겠으면 input.js 와 inputsories.js 를 참고한다)

Js 파일에 가서 키와 값을 작성하는데,
이때의 값은 global.json 에 가서 검색 후 값을 확인한다.    Ex) primary.value, Gray[100].value

stories.js 파일에서 가서 스토리북 레퍼런스를 참고하여,
하단의 코드들 (키:값 형태) 를 적어준다

이런식으로 컴포넌트 js 파일과 컴포넌트 스토리스 js 파일을 세트로 작성하여
총 5개 세트를 완성한다

<과제 제출>

1. 유어 클래스에서 folk해오기
2. 업스트림 레포로 pr을 해라
   

https://github.com/codestates-seb/fe-sprint-component-library/pull/85