컬럼 세부 타입 설정

2025-10-14 11:48:04 +09:00
parent dadd49b98f
commit 55f52ed1b5
17 changed files with 2226 additions and 585 deletions
--- a/frontend/lib/registry/components/common/inputStyles.ts
+++ b/frontend/lib/registry/components/common/inputStyles.ts
@@ -0,0 +1,112 @@
+/**
+ * Tailwind CSS 기반 Input 컴포넌트 공통 스타일
+ */
+
+export const INPUT_CLASSES = {
+  // 기본 input 스타일
+  base: `
+    w-full h-10 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
+  `,
+
+  // 선택된 상태
+  selected: `
+    border-blue-500 ring-2 ring-blue-100
+  `,
+
+  // 라벨 스타일
+  label: `
+    absolute -top-6 left-0 text-sm font-medium text-slate-600
+  `,
+
+  // 필수 표시
+  required: `
+    text-red-500
+  `,
+
+  // 컨테이너
+  container: `
+    relative w-full
+  `,
+
+  // textarea
+  textarea: `
+    w-full min-h-[80px] 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
+    resize-vertical
+  `,
+
+  // select
+  select: `
+    w-full h-10 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
+    cursor-pointer
+  `,
+
+  // flex 컨테이너 (email, tel, url 등)
+  flexContainer: `
+    flex items-center gap-2 w-full h-10
+  `,
+
+  // 구분자 (@ , ~ 등)
+  separator: `
+    text-base font-medium text-gray-500
+  `,
+
+  // Currency 통화 기호
+  currencySymbol: `
+    text-base 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
+  `,
+
+  // Percentage 퍼센트 기호
+  percentageSymbol: `
+    text-base 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
+  `,
+};
+
+/**
+ * 클래스명 결합 유틸리티
+ */
+export function cn(...classes: (string | boolean | undefined)[]): string {
+  return classes.filter(Boolean).join(" ").replace(/\s+/g, " ").trim();
+}
+
+/**
+ * Input 클래스 생성기
+ */
+export function getInputClasses(isSelected?: boolean, isDisabled?: boolean): string {
+  return cn(INPUT_CLASSES.base, isSelected && INPUT_CLASSES.selected, isDisabled && "opacity-60");
+}