서론
UI는 처음 JS를 학습할 때는 부트 스트랩을 이용했고,
팀프로젝트에서는 ant design을 이용했다.
부트스트랩은 거의 모든 게 구현되다시피 되어 있어서
조금 학습한 뒤에는 잘 이용하지 않았고,
ant design을 써보면서 이용은 쉽지만 디자인 및 기능 편집이 쉽지 않았다.
shadcn은 위 두 개의 ui라이브러리와는 조금 달랐다.
shadcn/ui
shadcn은 대표적인 컴포넌트 라이브러리이다.
사용했던 다른 ui 라이브러리와 두드러지게 차이나는 점은
npx를 이용하여 컴포넌트를 다운받고 이용할 수 있다는 점이다.
예시로 버튼을 이용하려면
npx shadcn-ui@latest add button
위 명령어로 설치 후
import { Button } from "@/components/ui/button"
<Button variant="outline">Button</Button>위의 내용처럼 이용하면 된다.
components/ui 폴더에 button 컴포넌트가 생기는데 편집도 가능하며,
파일이 있어 컴포넌트의 내용을 이해할 수 있어 좋다.
shadcn/ui 참고 자료
아래 영상은 테마부터 다크모드 적용까지 세세하게 설명해주는 동영상이다.
외국어 영상이라는 단점이 있지만
3월 7일 기점으로 2주전에 나온 따끈따끈한 내용이며
next.js로 이용한다면 더 쉽게 이용할 수 있을 것이다.
https://www.youtube.com/watch?v=l93uukpAoxE&t=1383s
제일 좋은 것은 역시 공식문서
https://ui.shadcn.com/docs/installation/next
next.js를 이용하면서 쓸 때 이대로 안하면 오류가 나거나 안되는 기능들이 조금 생긴다.
shadcn/ui를 쓰면서 생긴 어려움
일단 ui를 적용하면서 next.js도 배웠기 때문에 오류가 동시다발적으로 생겨
어떤 것이 잘못되었는지 정말 배우면서 새롭게 알아나가기 바빴다.
next.js는 오류가 나도 react에 비하면 조금 덜 정확하게 알려주기 때문에
힘들었다.
테마 적용 오류
테마 적용을 하는데 똑같은 조건이어도 색깔이 적용이 안되는 경우가 있었다.
위처럼 주황색이 적용되어야 하는데
까만색으로 그대로였던 문제였다.
위에서 말했다시피 공식문서를 차례대로 진행하다보면
초기 설정을 위해 npx shadcn-ui@latest init을 진행하는데
Do you want to use CSS variables for colors? › no / yes
이 질문을 no로 답해서인지 페이지를 새로 구성하여 yes로 다시 설정해야 했던
고생을 겪었다.
테마 적용하기
우선 app 폴더에서 pages 폴더 및 styles로 다시 구성하면서
원래 파일에 경로를 app/global.css로 적어둔 것은
styles/global.css로 바꾸었고,
//components.json
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "default",
"rsc": true,
"tsx": true,
"tailwind": {
"config": "tailwind.config.ts",
"css": "src/styles/globals.css",
"baseColor": "slate",
"cssVariables": true,
"prefix": ""
},
"aliases": {
"components": "@/components",
"utils": "@/lib/utils"
}
}
샤드씨엔의 theme에서 색깔을 선택 후
copy code를 눌러 global.json에 가져오면 된다.
아까 말했던 외국인 분께서 설명하는 동영상에서 상세하게 설명해주는데,
모드 토글 구성 후,
띰프로바이더를 만들고,
최종적으로 themes에 테마를 구성하면
이렇게 모드를 구성할 수 있다.
또한 global.css에서
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
...
// 생략
.orange {
--background: 0 0% 100%;
--foreground: 20 14.3% 4.1%;
--card: 0 0% 100%;
--card-foreground: 20 14.3% 4.1%;
--popover: 0 0% 100%;
--popover-foreground: 20 14.3% 4.1%;
--primary: 24.6 95% 53.1%;
--primary-foreground: 60 9.1% 97.8%;
--secondary: 60 4.8% 95.9%;
--secondary-foreground: 24 9.8% 10%;
--muted: 60 4.8% 95.9%;
--muted-foreground: 25 5.3% 44.7%;
--accent: 60 4.8% 95.9%;
--accent-foreground: 24 9.8% 10%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 60 9.1% 97.8%;
--border: 20 5.9% 90%;
--input: 20 5.9% 90%;
--ring: 24.6 95% 53.1%;
--radius: 0.5rem;
}
}
orange에 대한 색상 추가를 하면 된다.
