bkdragon's log

팀프로젝트에서 atomic design pattern을 적용해 진행하고 있다. CSS 프레임워크를 사용하여 atomic design pattern을 적용한 경험을 공유하려고 한다. css 프레임워크는 Chakra ui를 사용했다. https://chakra-ui.com/ CRA로 앱을 설치할 때 Charka ui도 함께 설치할 수 있다. npx create-react-app my-app --template @chakra-ui/typescript atomic pattern atomic pattern은 화학적 관점에서 영감을 얻은 디자인 시스템이다. 출처 : https://atomicdesign.bradfrost.com/chapter-2/#the-part-and-the-whole 각 단계를 간략하게 설명하면..

Button은 아주 많이 사용되는 UI이다. 그냥 button 태그를 사용해도 되고 스타일 같은 것들을 지정해서 변경하면서 재사용 할 수 있게 컴포넌트를 만들어서 사용할 수도 있다. 조만간 Chakra UI를 사용할 일이 있어서 미리 공부할 겸 간단하게 컴포넌트를 작성해보았다. CustomButton.tsx import React, { PropsWithChildren } from 'react'; import { Button, ButtonProps } from '@chakra-ui/react'; type Props = ButtonProps; const CustomButton = (props: PropsWithChildren) => { const { children, ...rest } = props; ret..