카테고리 없음
shadcdn 2일차
uni:D
2025. 6. 19. 23:05
반응형
처음 구조
export default function LandingPage() {
return (
<div>
<h1>SupportMe</h1>
</div>
);
}
폰트를 기본폰트에서 파핀 폰트로 변경 및 폰트 굵기 조정
------------------------------------------
npm run dev
돌리면 나오는 주소를 복붙 localhost:3000
lib>utils.ts 에 유틸리티와 cdn 기능을 사용할수있는데 이게 있어서 다크모드로 설정하는방법은
layout.tsx에 들어가서
import { cn } from "@/lib/utils";
이거넣어준다
그리고 밑에
<html lang="ko">
<body className={cn(poppins.className, "dark")}>{children}</body>
</html>
lib/utils.ts 파일은 Shadcn UI 자체에서 자동 생성되지 않습니다.
보통은 Shadcn UI 공식 문서에서 제안하는 cn() 유틸 함수(클래스명 조건부 병합용)를 수동으로 작성해야 합니다.
✅ lib/utils.ts 파일 수동 생성 방법
lib/utils.ts 파일을 다음과 같이 만들어 주세요:
ts
복사편집
// lib/utils.ts import { ClassValue, clsx } from "clsx"; import { twMerge } from "tailwind-merge"; export function cn(...inputs: ClassValue[]) { return twMerge(clsx(...inputs)); }
📦 의존성 설치
이 함수가 동작하려면 아래 패키지가 필요합니다. 아직 설치 안했다면 다음 명령어를 실행하세요:
bash
복사편집
npm install clsx tailwind-merge
✅ 이 파일이 필요한 이유는?
- cn() 함수는 여러 Tailwind CSS 클래스명을 병합할 때 조건부로 처리해주는 유틸입니다.
- Shadcn 컴포넌트들이 이 cn() 함수를 사용하는 구조로 되어 있어, 없으면 오류가 납니다.
✅ 폴더 위치
Next.js 기준으로 app이나 src 폴더가 있는 경우 보통 다음 위치에 생성합니다:
vbnet
복사편집
project-root/ ├── lib/ │ └── utils.ts ← 여기에 생성 ├── app/ │ └── ...
반응형