113 lines
2.9 KiB
TypeScript
113 lines
2.9 KiB
TypeScript
|
/**
|
||
|
|
* 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");
|
||
|
|
}
|