NextJs 로그인/회원가입 폼 만들기(feat. tailwind, shandcn)

 

개요

취업 준비를 하면서 공부도 할 겸 부트캠프에서 운영하는 devCamp에 참여했다. 오전 9 - 12시 까지 진행 하길래 그래도 간단한 프로젝트 될 줄 알았지만, 생각보다 생각할게 너무 많다. 아직도 적응중인 NextJs부터 Shandcn/ui, React-Hook-Form, Zod 까지,, 알아야 할게 투성이었다. 하지만 어쩌겠는가. 해야지.

 

1. Shadcn/ui 

Shadcn/ui의 소개를 한번 보자.
공식문서의 소개를 직역하자면 디자인 컴포넌트를 자신의 앱에 아름답게 복사하고, 커스터마이징이 가능하고, 오픈소스이다. 대충 이렇게 적혀 있다. 한마디로 디자인 컴포넌트를 간단하게 사용할 수 있다라고 적혀 있는 거 같다. 또한 지원하는 프레임워크(Next.js/Vite/Remix...)가 많아서 다양한 곳에서 활용 가능해 보인다.

 

2. 설치

1. 프로젝트 생성

yarn create next-app@latest my-app --typescript --tailwind --eslint

2. Run the CLI (shadcn 설치)

npx shadcn-ui@latest init

3. 디자인 컴포넌트 추가

npx shadcn-ui@latest add button

import { Button } from "@/components/ui/button"
 
export default function Home() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  )
}

 

사용하고자 하는 디자인 컴포넌트를 설치 후 import 하여 간단하게 사용 가능하다.

또한 공식문서를 참고하면 간단하게 커스터마이징 할 수 있는 방법이 설명 되어있다.

4. 파일 구조

.
├── app
│   ├── layout.tsx
│   └── page.tsx
├── components
│   ├── ui
│   │   ├── alert-dialog.tsx
│   │   ├── button.tsx
│   │   ├── dropdown-menu.tsx
│   │   └── ...
│   ├── main-nav.tsx
│   ├── page-header.tsx
│   └── ...
├── lib
│   └── utils.ts
├── styles
│   └── globals.css
├── next.config.js
├── package.json
├── postcss.config.js
├── tailwind.config.js
└── tsconfig.json

2번 shadcn 설치 및 3번 디자인 컴포넌트를 다운 받았을 때의 간단한 폴더 구조이다.

대표적으로 생성 되는 폴더는 @/components/ui 폴더, lib폴더 이다.

@/components/ui

디자인 컴포넌트 설치시 설치한 컴포넌트가 들어오는 폴더이다. 

@/lib/utils.ts

import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

 

해당 파일은 tailwind를 merge할 때 발생할 수 있는 클래스 충돌 문제를 해결해주는 역할을 한다.

또한 함수를 활용하면 간단한 조건부 스타일링을 할 수 있다.

 

생각보다 길어지는 것 같아서 나눠서 써야 될거 같다.