50 lines
1.8 KiB
TypeScript
50 lines
1.8 KiB
TypeScript
import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from "@common/components/ui";
|
|
import React from "react";
|
|
|
|
interface InputSectionProps {
|
|
title: string;
|
|
data: { year: string; type: string }[];
|
|
sectionKey: string;
|
|
onInputChange: (section: string, index: number, field: string, value: string) => void;
|
|
}
|
|
|
|
const InputSection: React.FC<InputSectionProps> = ({ title, data, sectionKey, onInputChange }) => {
|
|
return (
|
|
<div>
|
|
{/* 섹션 제목 */}
|
|
<div className="card-header">
|
|
<h3 className="text-2xl mx-3 font-medium text-label">{title}</h3>
|
|
</div>
|
|
{/* 테이블 */}
|
|
<div className="card !m-[1.2rem] !p-0r">
|
|
<Table variant="secondary" className="w-full">
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead className="border border-gray-300 px-2 py-2 text-sm">년도</TableHead>
|
|
<TableHead className="border border-gray-300 px-2 py-2 text-sm">구분</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{data.map((row, index) => (
|
|
<TableRow key={index}>
|
|
<TableCell className="border border-gray-300 px-2 py-2 text-sm">
|
|
<input
|
|
type="text"
|
|
value={row.year}
|
|
onChange={(e) => onInputChange(sectionKey, index, "year", e.target.value)}
|
|
className="w-full text-xl border-radius-0 px-3 py-2 text-base text-center leading-normal"
|
|
/>
|
|
</TableCell>
|
|
<TableCell className="border border-gray-300 px-2 py-2 text-sm text-center leading-normal">
|
|
{row.type}
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default InputSection; |