[안재민] Sprint11

[mini-1018]

요구사항

기본

공통

• Github에 위클리 미션 PR을 만들어 주세요.

• React 및 Express를 사용해 진행합니다.

• TypeScript를 활용해 프로젝트의 필요한 곳에 타입을 명시해 주세요.

• any 타입의 사용은 최소화해 주세요.

• 복잡한 객체 구조나 배열 구조를 가진 변수에 인터페이스 또는 타입 별칭을 사용하세요.

• Union, Intersection, Generics 등 고급 타입을 적극적으로 사용해 주세요.

• 타입 별칭 또는 유틸리티 타입을 사용해 타입 복잡성을 줄여주세요.

• 타입스크립트 컴파일러가 에러 없이 정상적으로 작동해야 합니다.

프론트엔드

• 기존 React(혹은 Next) 프로젝트를 타입스크립트 프로젝트로 마이그레이션 해주세요.
• TypeScript를 활용해 프로젝트의 필요한 곳에 타입을 명시해 주세요.

주요 변경사항

스크린샷

멘토에게

• 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

[wildCodingWarrior]

전반적으로 tailwind를 시도하신 점 좋았습니다.
디자인 시스템을 만드는 방법에 대해서 한 번 멘토링 하는 편이 좋을 것 같아요.
추후 cva, shadcn에서 사용하는 cn등에 대해서 한 번 알려드리겠습니다.

[wildCodingWarrior]

tailwind를 사용하실거면 tailwind.config.ts에도 extends 하는 곳에 colors들 넣는게 좋겠습니다. 그게 더 일반적인 방법입니다.

[wildCodingWarrior]

혹시 아래 extension 설치 안하셨으면 하는게 좋겠습니다. 좀 더 쉽게 tailwind 사용하도록 도와줍니다.

https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss

[wildCodingWarrior]

tailwind 스타일은 아니네요. 그리고 style을 받아서 하는거라면 사실 props로 스프레드로 다 넘기고 있기 때문에 큰 의미는 없어 보입니다.

cva나 cn같은 util을 사용한다고 하면 보통 아래와 같은 컴포넌트가 됩니다.

import * as React from "react";
import { cva, type VariantProps } from "class-variance-authority";

import { cn } from "@/lib/utils";

const buttonVariants = cva(
  "inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none",
  {
    variants: {
      variant: {
        default: "bg-gray-100 text-gray-900 hover:bg-gray-200",
        primary: "bg-blue-600 text-white hover:bg-blue-700",
        secondary: "bg-gray-600 text-white hover:bg-gray-700",
        danger: "bg-red-600 text-white hover:bg-red-700",
      },
      size: {
        sm: "px-3 py-1.5 text-sm",
        md: "px-4 py-2 text-base",
        lg: "px-6 py-3 text-lg",
      },
      fullWidth: {
        true: "w-full",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "md",
    },
  }
);

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, fullWidth, ...props }, ref) => {
    return (
      <button
        className={cn(buttonVariants({ variant, size, fullWidth, className }))}
        ref={ref}
        {...props}
      />
    );
  }
);
Button.displayName = "Button";

export { Button, buttonVariants };

좀 더 테일윈드를 사용했을 때 컴포넌트를 만드는 일반적인 방식입니다.