0104.md

2023 01.04

디자인 시스템 깎기

상향식 vs 하향식

상향식

기존에 쓰던 중구난방인 컴포넌트들을 취합해서, 분류하고 => 컴포넌트로 뺀다 (개인 프로젝트에 더 적합!)

기존에 분리한 Button 디자인 시스템 컴포넌트를 사용하지 않는 곳을 찾아서, 적용. Button 컴포넌트가 적합한지 판단! (ex 캐로셀은 Button을 쓰지만, TabItem은 그대로 두었다) 다양한 케이스를 커버하기 위해 Button 컴포넌트에 variant를 추가 (ghost, circle 등) -> 인터페이스 확장 사용하기 편하게 기본값을 설정.

하향식

어떤 컴포넌트가 필요한지 미리 정의하고, 하나씩 구현한다

디자인 시스템의 역할

디자인 방향을 일관적으로 유지, 제약

border가 없고, 둥글둥글한 테두리, 컬러 팔레트 등등...

직접 테마 만들기

인터페이스의 캡슐화~

디자인 시스템은 의존성을 줄일수록 좋다!

디자인 시스템 컴포넌트는... 내부에 daisyUI와 같은 특이한 라이브러리를 사용했더라도, 외부에서는 모른다! (사용하기는 약간 더 불편해진다. prop이 많아지므로...)

Button 컴포넌트 디자인 시스템 정리 (아래)

import React from "react";

type ButtonProps<C extends React.ElementType = "button"> =
  React.ComponentProps<C> & {
    as?: C;
    type?: "button" | "submit";
    className: string;
    variant: "primary" | "ghost";
    shape: "round" | "circle";
    children: React.ReactElement | string;
  };

function Button<C extends React.ElementType>({
  as,
  className,
  children,
  variant,
  shape,
  type,
  ...props
}: ButtonProps<C>) {
  const Component = as ?? "button";
  const variantClass = variant === "ghost" ? "btn-ghost" : "btn-secondary";
  const shapeClass = shape === "circle" ? "btn-circle" : "";

  return (
    <Component
      className={["btn", variantClass, shapeClass, className].join(" ")}
      {...props}
      type={type ?? "button"}
    >
      {children}
    </Component>
  );
}

export default Button;