35 lines
719 B
TypeScript
35 lines
719 B
TypeScript
|
/**
|
||
|
|
* FormFieldGrid - 반응형 폼 필드 그리드
|
||
|
|
*
|
||
|
|
* 모바일: 1컬럼
|
||
|
|
* 태블릿: 2컬럼
|
||
|
|
* 데스크톱: 3컬럼 (또는 사용자 지정)
|
||
|
|
*/
|
||
|
|
|
||
|
|
import { ReactNode } from "react";
|
||
|
|
|
||
|
|
export interface FormFieldGridProps {
|
||
|
|
children: ReactNode;
|
||
|
|
columns?: 1 | 2 | 3 | 4;
|
||
|
|
className?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function FormFieldGrid({
|
||
|
|
children,
|
||
|
|
columns = 3,
|
||
|
|
className = "",
|
||
|
|
}: FormFieldGridProps) {
|
||
|
|
|
||
|
|
const gridClasses = {
|
||
|
|
1: "grid-cols-1",
|
||
|
|
2: "grid-cols-1 md:grid-cols-2",
|
||
|
|
3: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
|
||
|
|
4: "grid-cols-1 md:grid-cols-2 lg:grid-cols-4",
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className={`grid ${gridClasses[columns]} gap-4 ${className}`}>
|
||
|
|
{children}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|