2024/09/23 검색 결과

해당 글 3건

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

Typography 컴포넌트 구현하기

Typography 컴포넌트 구현하기Typography 컴포넌트는 텍스트를 보여주기 위한 컴포넌트입니다.일반적으로 HTML에서 텍스트를 표시할 때는 span 또는 p 태그를 사용합니다.제가 구현한 Typography 컴포넌트는 기본적으로 span 태그를 사용하지만, 사용자가 필요에 따라 p 태그로 변경할 수 있도록 유연하게 설계되었습니다.Typography 구현하기propsinterface TypographyProps { color?: TypographyColor; align?: "inherit" | "center" | "right" | "left"; variant?: TypographyVariant; noWrap?: boolean; component?: ElementType; children..
개인 프로젝트/React 컴포넌트 구현하기 2024. 9. 23. 18:59