refactor: 로딩 스피너 표준화 및 프로젝트 헬스 개선

- LoadingSpinner 컴포넌트 5가지 변형 구현
  - LoadingSpinner (인라인/버튼용)
  - ContentLoadingSpinner (상세/수정 페이지)
  - PageLoadingSpinner (페이지 전환)
  - TableLoadingSpinner (테이블/리스트)
  - ButtonSpinner (버튼 내부)
- 18개+ 페이지 로딩 UI 표준화
  - HR 페이지 (사원, 휴가, 부서, 급여, 근태)
  - 영업 페이지 (견적, 거래처)
  - 게시판, 팝업관리, 품목기준정보
- API 키 보안 개선 (NEXT_PUBLIC_API_KEY → API_KEY)
- Textarea 다크모드 스타일 개선
- DropdownField Radix UI Select 버그 수정 (key prop)
- 프로젝트 헬스 개선 계획서 문서화

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/components/ui/loading-spinner.tsx

@@ -1,50 +1,114 @@
-// 로딩 스피너 컴포넌트
-// API 호출 중 로딩 상태 표시용
-// 대시보드 스타일로 통일 (border-4 border-solid border-primary border-r-transparent)
+/**
+ * 로딩 스피너 컴포넌트 (표준화됨)
+ *
+ * 사용 가이드:
+ * - LoadingSpinner: 인라인/버튼 내부/작은 영역용
+ * - ContentLoadingSpinner: 컨텐츠 영역 로딩용 (상세/수정 페이지)
+ * - PageLoadingSpinner: 페이지 전환용 (loading.tsx, 전체 페이지)
+ *
+ * 스타일: border-4 border-solid border-primary border-r-transparent
+ */
 
 import React from 'react';
 
+// ============================================
+// 1. 기본 스피너 (인라인/버튼 내부용)
+// ============================================
 interface LoadingSpinnerProps {
-  size?: 'sm' | 'md' | 'lg';
+  size?: 'xs' | 'sm' | 'md' | 'lg';
   className?: string;
   text?: string;
 }
 
+const sizeClasses = {
+  xs: 'h-3 w-3 border-2',
+  sm: 'h-4 w-4 border-2',
+  md: 'h-8 w-8 border-3',
+  lg: 'h-12 w-12 border-4'
+};
+
 export const LoadingSpinner: React.FC<LoadingSpinnerProps> = ({
   size = 'md',
   className = '',
   text
 }) => {
-  const sizeClasses = {
-    sm: 'h-4 w-4 border-2',
-    md: 'h-8 w-8 border-4',
-    lg: 'h-12 w-12 border-4'
-  };
-
   return (
     <div className={`flex flex-col items-center justify-center gap-2 ${className}`}>
-      <div className={`animate-spin rounded-full border-solid border-primary border-r-transparent ${sizeClasses[size]}`} />
+      <div
+        className={`animate-spin rounded-full border-solid border-primary border-r-transparent ${sizeClasses[size]}`}
+      />
       {text && <p className="text-sm text-muted-foreground">{text}</p>}
     </div>
   );
 };
 
-// 페이지 레벨 로딩 스피너 (전체 화면 중앙 배치)
+// ============================================
+// 2. 컨텐츠 영역 스피너 (상세/수정 페이지용)
+// ============================================
+interface ContentLoadingSpinnerProps {
+  text?: string;
+}
+
+export const ContentLoadingSpinner: React.FC<ContentLoadingSpinnerProps> = ({
+  text = '불러오는 중...'
+}) => {
+  return (
+    <div className="flex items-center justify-center min-h-[400px]">
+      <div className="text-center space-y-3">
+        <div className="inline-block h-10 w-10 animate-spin rounded-full border-4 border-solid border-primary border-r-transparent" />
+        <p className="text-sm text-muted-foreground">{text}</p>
+      </div>
+    </div>
+  );
+};
+
+// ============================================
+// 3. 페이지 레벨 스피너 (페이지 전환용)
+// ============================================
 interface PageLoadingSpinnerProps {
   text?: string;
-  minHeight?: string;
 }
 
 export const PageLoadingSpinner: React.FC<PageLoadingSpinnerProps> = ({
-  text = '불러오는 중...',
-  minHeight = 'min-h-[60vh]'
+  text = '페이지를 불러오는 중...'
 }) => {
   return (
-    <div className={`flex items-center justify-center ${minHeight}`}>
+    <div className="flex items-center justify-center min-h-[calc(100vh-200px)]">
       <div className="text-center space-y-4">
-        <div className="inline-block h-12 w-12 animate-spin rounded-full border-4 border-solid border-primary border-r-transparent"></div>
+        <div className="inline-block h-12 w-12 animate-spin rounded-full border-4 border-solid border-primary border-r-transparent" />
         <p className="text-muted-foreground font-medium">{text}</p>
       </div>
     </div>
   );
+};
+
+// ============================================
+// 4. 테이블/리스트 오버레이 스피너
+// ============================================
+interface TableLoadingSpinnerProps {
+  text?: string;
+  rows?: number;
+}
+
+export const TableLoadingSpinner: React.FC<TableLoadingSpinnerProps> = ({
+  text = '데이터를 불러오는 중...',
+  rows = 5
+}) => {
+  return (
+    <div className="flex items-center justify-center py-16">
+      <div className="text-center space-y-3">
+        <div className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-primary border-r-transparent" />
+        <p className="text-sm text-muted-foreground">{text}</p>
+      </div>
+    </div>
+  );
+};
+
+// ============================================
+// 5. 버튼 내부 스피너 (저장 중 등)
+// ============================================
+export const ButtonSpinner: React.FC = () => {
+  return (
+    <div className="h-4 w-4 animate-spin rounded-full border-2 border-solid border-current border-r-transparent" />
+  );
 };

src/components/ui/textarea.tsx

@@ -8,8 +8,11 @@ const Textarea = React.forwardRef<
 >(({ className, ...props }, ref) => {
   return (
     <textarea
+      data-slot="textarea"
       className={cn(
-        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex min-h-[80px] w-full rounded-md border bg-input-background px-3 py-2 text-base transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
         className
       )}
       ref={ref}