[Next.js] Shadcn을 사용해보자

Shadcn 사용 방법

• 디자인 편의성을 위해 shadcn 컴포넌트를 사용해보자

npx shadcn-ui@latest init

• 생성옵션 설명

  • Typescript 사용 유무
  • style 설정
    • Default/Newyork (디자인에 약간의 차이가 있다.)
  • global CSS 파일 위치
    • 프로젝트 생성시에는 app/globals.css 에 위치해있다.
  • CSS variables
    • shadcn 컴포넌트 색변경을 위한 별도의 변수를 사용할것인지 유무
  • tailwind.config.js 파일 위치
    • 일반적으로 root폴더에 존재한다.
  • 이외 import를 위한 alis 설정
    • 별도의 규칙이 있는게아니라면 기본으로 설정하는게 좋을것으로 보인다.

최신 버전에서는 파일 위치와 alis 설정이 전부 스킵되어 기본적으로 설정되고있다.

1-2. 생성 후 신규 추가된 파일들

1. components/

2. lib/utils.ts

   1. shadcn에 사용되는 유틸 함수들을 확인 할 수있다.

      기본적으로 cn함수가 존재하며 이 cn함수는 tailwind css를 합치는대 사용된다. 이는 error/success와 같이 상태 변화에 유용하게 사용된다.

      cf)clsx는 모든 클래스 값을 하나의 문자열로 결합하는 함수고, twMerge는 여러개의 tailwind css 클래스를 중복 제거하며 충돌하는 스타일을 적절히 병합하는 역할

1-3 설치시 사용가능한 라이브러리 (default 로 설치해야 가능)

• lucide-react - 아이콘 라이브러리

1-4 shadcn component 사용방법

• shadcn설치 이후 사용하는 component를 별도로 추가해주어야한다.

  # button 컴포넌트 추가를 원할시
  npx shadcn-ui@latest add button
  

• 설치 후 프로젝트 내 components폴더가 생성되고 설치한 컴포넌트의 옵션을 확인 및 수정 할 수 있다.

  • 덕분에 커스텀을 직접 할 수 있다.

import * as React from "react";
import { Slot } from "@radix-ui/react-slot";
import { cva, type VariantProps } from "class-variance-authority";

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

const buttonVariants = cva(
  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", // 공통 설정
  {
    variants: {
      variant: {
        // ...기존내용
        // primary custom
        primary: "bg-sky-700 text-primary-foreground hover:bg-sky-700/90",
      },
      size: {
          //크기 커스텀
      },
    },
    defaultVariants: {
		//기본값 커스텀
    },
  }
);