shadcn 도입 시 공식 CSS 기본값을 먼저 완전 복사한 뒤 커스텀 추가¶

문제¶

shadcn/ui 도입 시 CSS 변수를 수동으로 작성하면서: 1. @layer base { * { @apply border-border outline-ring/50; } } 전역 규칙 누락 → 모든 border가 브라우저 기본 검정색 2. --radius 계산 공식이 공식(* 배율)과 다름(± px 절대값) → 모서리 둥글기 불일치 3. --destructive-foreground, --accent 등 색상값 미세 차이 → 버튼·배지 색상 어색

이 차이들을 시각적으로 하나씩 찾아다니며 수정하느라 시간 낭비 발생.

근본 원인¶

공식 globals.css를 기준으로 시작하지 않고, shadcn init이 생성하는 CSS 변수를 참고하여 수동 재작성함. 이 과정에서 @layer base 전역 규칙과 radius 계산 공식이 빠짐.

해결 — 원칙¶

"공식 기본값 먼저 → 커스텀은 위에 추가"

1. shadcn 공식 globals.css에서 :root, .dark, @theme inline, @layer base 블록을 통째로 복사
2. 프로젝트 고유 변수(--success, --warning, --app-bg 등)는 아래에 별도 블록으로 추가
3. 컴포넌트 UI 파일(src/components/ui/*.tsx)도 npx shadcn@latest add 결과를 그대로 사용
4. 커스텀이 필요하면 기본값 위에 override만 추가 (기본값 자체를 수정하지 않음)

구체적으로 누락된 것¶

/* 이 한 줄이 없어서 모든 border가 검정색이었음 */
@layer base {
  * {
    @apply border-border outline-ring/50;
  }
}

/* radius 계산이 공식과 달랐음 */
/* ❌ 우리 */ --radius-sm: calc(var(--radius) - 4px);
/* ✅ 공식 */ --radius-sm: calc(var(--radius) * 0.6);

적용 시기¶

• shadcn/ui를 새 프로젝트에 도입할 때
• 기존 프로젝트에 shadcn 테마를 업데이트할 때

적용 커밋¶

1d836cc (AssetManagement/Frontend)