# shadcn/ui 적용 상태 분석 보고서
> 작성일: 2025-01-27
> 기준: shadcn/ui 공식 문서 (https://ui.shadcn.com)
## 📋 목차
1. [개요](#개요)
2. [적용 상태 요약](#적용-상태-요약)
3. [양호한 부분](#양호한-부분)
4. [개선이 필요한 부분](#개선이-필요한-부분)
5. [우선순위별 개선 사항](#우선순위별-개선-사항)
6. [구체적인 수정 필요 파일](#구체적인-수정-필요-파일)
---
## 개요
이 보고서는 프로젝트 전반에 걸쳐 shadcn/ui 공식 문서 기준을 얼마나 잘 준수하고 있는지 분석한 결과입니다.
**분석 범위:**
- 설정 파일 (components.json, globals.css, tailwind.config)
- UI 컴포넌트 (`frontend/components/ui/`)
- 비즈니스 컴포넌트 (`frontend/components/`, `frontend/lib/registry/`)
- 스타일 가이드 준수 여부
---
## 적용 상태 요약
### ✅ 잘 적용된 부분 (70%)
1. **기본 설정**
- `components.json` 설정 올바름
- CSS 변수 시스템 정상 작동
- `cn()` 유틸리티 함수 사용
2. **기본 UI 컴포넌트**
- Button, Card, Input 등 기본 컴포넌트는 shadcn 표준 따름
- 다크모드 지원 구조 정상
### ⚠️ 개선이 필요한 부분 (30%)
1. **하드코딩된 색상 사용** (약 2,000+ 건)
- `bg-blue-500`, `bg-gray-50`, `text-red-500` 등 직접 색상 사용
- `#ffffff`, `#f9fafb` 등 인라인 스타일 색상
2. **비표준 스타일 패턴**
- `border-blue-500`, `ring-blue-100` 등 직접 색상 사용
- `focus:border-orange-500` 등 커스텀 포커스 색상
3. **중첩 박스 문제**
- 일부 컴포넌트에서 불필요한 중첩 구조 발견
---
## 양호한 부분
### 1. 기본 설정 ✅
**components.json**
```json
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "new-york",
"rsc": true,
"tsx": true,
"tailwind": {
"baseColor": "neutral",
"cssVariables": true
}
}
```
✅ shadcn 공식 설정과 일치
**globals.css**
```css
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--primary: 222.2 47.4% 11.2%;
/* ... */
}
```
✅ HSL 형식, 공식 기본값 사용
### 2. 기본 UI 컴포넌트 ✅
**Button 컴포넌트** (`frontend/components/ui/button.tsx`)
```tsx
const buttonVariants = cva("inline-flex items-center justify-center ...", {
variants: {
variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/90",
destructive: "bg-destructive text-white ...",
// ...
},
},
});
```
✅ shadcn 공식 패턴 준수
**Card 컴포넌트** (`frontend/components/ui/card.tsx`)
```tsx
function Card({ className, ...props }) {
return (
);
}
```
✅ CSS 변수 사용, 표준 구조
**Input 컴포넌트** (`frontend/components/ui/input.tsx`)
```tsx
className={cn(
"border-input bg-transparent ...",
"focus-visible:border-ring focus-visible:ring-ring/50 ...",
className
)}
```
✅ 시맨틱 색상 사용
### 3. 유틸리티 함수 ✅
**lib/utils.ts**
```typescript
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
```
✅ 공식 구현과 동일
---
## 개선이 필요한 부분
### 1. 하드코딩된 색상 사용 ❌
#### 문제점
**직접 색상 클래스 사용** (약 1,600+ 건)
```tsx
// ❌ 잘못된 예시