nextjs 스토리북 검색 결과

해당 글 2건

Typography 스토리 구현하기

Typography 스토리 구현하기Storybook 연동이 완료되었으니, 이제 Typography 컴포넌트의 스토리를 구현해보겠습니다.기본 Typography 스토리 하나와 모든 variant를 동시에 보여주는 스토리를 작성할 예정입니다.메타 데이터 작성하기argTypes를 통해 사용자가 변경할 수 있는 항목들을 정의합니다.description: 해당 prop에 대한 간단한 설명을 추가합니다.control: 테스트할 방법을 지정하여 사용자가 해당 prop을 쉽게 조작할 수 있게 합니다.args를 이용하여 기본 값을 설정할 수 있습니다.각 props의 이름과 기본값을 적어주면, 스토리에서 기본 상태를 확인할 수 있습니다.const meta = { title: "Typography", component:..
개인 프로젝트/React 컴포넌트 구현하기 2024. 9. 23. 19:30

Storybook 연동하기

Storybook 연동하기컴포넌트를 쉽게 확인하고 관리할 수 있는 좋은 방법은 Storybook을 사용하는 것입니다.이번 포스트에서는 Next.js 14와 Emotion을 활용해 Storybook을 연동하는 방법을 알아보겠습니다.Storybook 설치먼저, Storybook을 설치합니다. 아래 명령어를 실행하세요.npx storybook@latest init설치가 완료되면 여러 개의 프로토타입 코드와 이미지가 생성됩니다.이 과정이 끝나면, .storybook 폴더를 제외한 모든 파일을 삭제해 주세요.단, stories 폴더는 남겨둡니다. 이 폴더에 앞으로 컴포넌트의 Story 파일을 작성할 예정입니다.지금까지 코드 확인하기Emotion 연동프로젝트에서 Emotion을 사용 중이라면, Storybook에 ..
개인 프로젝트/React 컴포넌트 구현하기 2024. 9. 23. 19:14