ui개선

frontend/lib/registry/components/common/inputStyles.ts

@@ -5,29 +5,29 @@
 export const INPUT_CLASSES = {
   // 기본 input 스타일
   base: `
-    w-full h-full px-3 py-2 text-sm
-    border border-gray-300 rounded-md
-    bg-white text-gray-900
-    outline-none transition-all duration-200
-    focus:border-orange-500 focus:ring-2 focus:ring-orange-100
-    disabled:bg-gray-100 disabled:text-gray-400 disabled:cursor-not-allowed
-    placeholder:text-gray-400
+    w-full h-9 px-3 py-2 text-sm
+    border border-input rounded-md
+    bg-background text-foreground
+    transition-colors
+    focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring
+    disabled:cursor-not-allowed disabled:opacity-50
+    placeholder:text-muted-foreground
     max-w-full box-border
   `,
 
   // 선택된 상태
   selected: `
-    border-blue-500 ring-2 ring-blue-100
+    ring-2 ring-primary/20
   `,
 
   // 라벨 스타일
   label: `
-    absolute -top-6 left-0 text-sm font-medium text-slate-600
+    absolute -top-6 left-0 text-xs font-medium text-foreground
   `,
 
   // 필수 표시
   required: `
-    text-red-500
+    ml-0.5 text-destructive
   `,
 
   // 컨테이너
@@ -37,24 +37,24 @@ export const INPUT_CLASSES = {
 
   // textarea
   textarea: `
-    w-full h-full px-3 py-2 text-sm
-    border border-gray-300 rounded-md
-    bg-white text-gray-900
-    outline-none transition-all duration-200
-    focus:border-orange-500 focus:ring-2 focus:ring-orange-100
-    disabled:bg-gray-100 disabled:text-gray-400 disabled:cursor-not-allowed
+    min-h-[80px] w-full px-3 py-2 text-sm
+    border border-input rounded-md
+    bg-background text-foreground
+    transition-colors
+    focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring
+    disabled:cursor-not-allowed disabled:opacity-50
     resize-none
     max-w-full box-border
   `,
 
   // select
   select: `
-    w-full h-full px-3 py-2 text-sm
-    border border-gray-300 rounded-md
-    bg-white text-gray-900
-    outline-none transition-all duration-200
-    focus:border-orange-500 focus:ring-2 focus:ring-orange-100
-    disabled:bg-gray-100 disabled:text-gray-400 disabled:cursor-not-allowed
+    h-9 w-full px-3 py-2 text-sm
+    border border-input rounded-md
+    bg-background text-foreground
+    transition-colors
+    focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring
+    disabled:cursor-not-allowed disabled:opacity-50
     cursor-pointer
     max-w-full box-border
   `,
@@ -66,37 +66,37 @@ export const INPUT_CLASSES = {
 
   // 구분자 (@ , ~ 등)
   separator: `
-    text-base font-medium text-gray-500
+    text-sm font-medium text-muted-foreground
   `,
 
   // Currency 통화 기호
   currencySymbol: `
-    text-base font-semibold text-green-600 pl-2
+    text-sm font-semibold text-green-600 pl-2
   `,
 
   // Currency input
   currencyInput: `
-    flex-1 h-full px-3 py-2 text-base font-semibold text-right
-    border border-gray-300 rounded-md
-    bg-white text-green-600
-    outline-none transition-all duration-200
-    focus:border-orange-500 focus:ring-2 focus:ring-orange-100
-    disabled:bg-gray-100 disabled:text-gray-400
+    flex-1 h-9 px-3 py-2 text-sm font-semibold text-right
+    border border-input rounded-md
+    bg-background text-green-600
+    transition-colors
+    focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring
+    disabled:cursor-not-allowed disabled:opacity-50
   `,
 
   // Percentage 퍼센트 기호
   percentageSymbol: `
-    text-base font-semibold text-blue-600 pr-2
+    text-sm font-semibold text-blue-600 pr-2
   `,
 
   // Percentage input
   percentageInput: `
-    flex-1 h-full px-3 py-2 text-base font-semibold text-right
-    border border-gray-300 rounded-md
-    bg-white text-blue-600
-    outline-none transition-all duration-200
-    focus:border-orange-500 focus:ring-2 focus:ring-orange-100
-    disabled:bg-gray-100 disabled:text-gray-400
+    flex-1 h-9 px-3 py-2 text-sm font-semibold text-right
+    border border-input rounded-md
+    bg-background text-blue-600
+    transition-colors
+    focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring
+    disabled:cursor-not-allowed disabled:opacity-50
   `,
 };