Files
frontend/apps/sn/app/(map-layout)/map/components/InputSection.tsx
T

89 lines
2.9 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; bizInfoNm: string; bizType: 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="mx-3 whitespace-nowrap text-2xl font-medium text-label">
{title}
</h3>
</div>
{/* 테이블 */}
<div className="card !p-0r !m-[1.2rem]">
<Table variant="secondary" className="w-full">
<TableHeader>
<TableRow>
<TableHead className="w-auto whitespace-nowrap border border-border px-2 py-2 text-sm">
구분
</TableHead>
<TableHead className="w-[80px] whitespace-nowrap border border-border px-2 py-2 text-sm">
진단연도
</TableHead>
<TableHead className="w-auto whitespace-nowrap border border-border px-2 py-2 text-sm">
사업명
</TableHead>
<TableHead className="w-auto whitespace-nowrap border border-border px-2 py-2 text-sm">
유형
</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{data.map((row, index) => (
<TableRow key={index}>
<TableCell className="w-auto whitespace-nowrap border border-border px-2 py-2 text-center text-sm leading-normal">
{row.type}
</TableCell>
<TableCell className="w-[80px] whitespace-nowrap border border-border px-2 py-2 text-sm">
<input
type="text"
value={row.year}
onChange={(e) =>
onInputChange(sectionKey, index, "year", e.target.value)
}
className="border-radius-0 w-full px-3 py-2 text-center text-base text-xl leading-normal"
/>
</TableCell>
<TableCell className="w-auto border border-border px-2 py-2 text-center text-sm leading-normal">
{row.bizInfoNm}
</TableCell>
<TableCell className="w-auto whitespace-nowrap border border-border px-2 py-2 text-center text-sm leading-normal">
{row.bizType}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
</div>
);
};
export default InputSection;