484 lines
23 KiB
TypeScript
484 lines
23 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
// import { DataGrid } from "@rsone/components";
|
|
import DataGrid from "@/components/module/DataGrid";
|
|
import SearchForm from "@/components/module/SearchForm";
|
|
import {
|
|
Button,
|
|
Input,
|
|
Label,
|
|
Select,
|
|
SelectTrigger,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectValue,
|
|
Checkbox,
|
|
} from "@common/components";
|
|
import { verificationHistoryColumnInfo } from "@/entities/statistics/model/verification-history-column";
|
|
import { verificationHistoryMockData } from "@/entities/statistics/model/verification-history-mock";
|
|
|
|
interface VerificationFormValues {
|
|
mu: string;
|
|
percentile: string;
|
|
a: string;
|
|
c: string;
|
|
verificationYear: string;
|
|
checkboxOptions: {
|
|
sidoDistribution: boolean;
|
|
countyDistribution: boolean;
|
|
countyDistributionUserManagement: boolean;
|
|
lowerDistribution: boolean;
|
|
sidoServiceAvailability: boolean;
|
|
individualService: boolean;
|
|
legalServiceUsage: boolean;
|
|
excessUse: boolean;
|
|
lowerOrgStatistics: boolean;
|
|
studentStatistics: boolean;
|
|
developmentStatistics: boolean;
|
|
lowerManagementEnterprise: boolean;
|
|
};
|
|
}
|
|
|
|
const HbStatisticsVerification = () => {
|
|
const [verificationHistoryRowData, setVerificationHistoryRowData] =
|
|
useState<Record<string, string | number>[]>(
|
|
verificationHistoryMockData,
|
|
);
|
|
|
|
const [formValues, setFormValues] = useState<VerificationFormValues>({
|
|
mu: "0",
|
|
percentile: "0",
|
|
a: "0",
|
|
c: "0",
|
|
verificationYear: "2025",
|
|
checkboxOptions: {
|
|
sidoDistribution: false,
|
|
countyDistribution: false,
|
|
countyDistributionUserManagement: false,
|
|
lowerDistribution: false,
|
|
sidoServiceAvailability: false,
|
|
individualService: false,
|
|
legalServiceUsage: false,
|
|
excessUse: false,
|
|
lowerOrgStatistics: false,
|
|
studentStatistics: false,
|
|
developmentStatistics: false,
|
|
lowerManagementEnterprise: false,
|
|
},
|
|
});
|
|
|
|
const handleCheckboxChange = (
|
|
key: keyof VerificationFormValues["checkboxOptions"],
|
|
) => {
|
|
setFormValues((prev) => ({
|
|
...prev,
|
|
checkboxOptions: {
|
|
...prev.checkboxOptions,
|
|
[key]: !prev.checkboxOptions[key],
|
|
},
|
|
}));
|
|
};
|
|
|
|
const handleInputChange = (
|
|
key: keyof Omit<VerificationFormValues, "checkboxOptions">,
|
|
value: string,
|
|
) => {
|
|
setFormValues((prev) => ({
|
|
...prev,
|
|
[key]: value,
|
|
}));
|
|
};
|
|
|
|
const handleSubmit = () => {
|
|
console.log("검증 실행:", formValues);
|
|
};
|
|
|
|
const handleReset = () => {
|
|
console.log("초기화");
|
|
};
|
|
|
|
return (
|
|
<div className="card card-border mt-4">
|
|
<div className="p-2">
|
|
{/* 통계 검증 섹션 */}
|
|
<div className="mb-6">
|
|
<h3 className="px-2 text-[1.5rem] font-semibold text-title">
|
|
통계 검증
|
|
</h3>
|
|
|
|
<div className="flex gap-2">
|
|
{/* 왼쪽: 검증 변수 */}
|
|
<div className="card card-border flex-[0.5] rounded p-4">
|
|
<h4 className="mb-3 rounded bg-gray-100 p-2 text-[1.4rem] font-medium">
|
|
검증 변수
|
|
</h4>
|
|
|
|
<div className="space-y-3">
|
|
<div className="flex items-center gap-4">
|
|
<Label className="w-32 text-label">μ</Label>
|
|
<Input
|
|
type="number"
|
|
value={formValues.mu}
|
|
onChange={(e) =>
|
|
handleInputChange(
|
|
"mu",
|
|
e.target.value,
|
|
)
|
|
}
|
|
className="flex-1"
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-4">
|
|
<Label className="w-32 text-label">
|
|
Percentile
|
|
</Label>
|
|
<Input
|
|
type="number"
|
|
value={formValues.percentile}
|
|
onChange={(e) =>
|
|
handleInputChange(
|
|
"percentile",
|
|
e.target.value,
|
|
)
|
|
}
|
|
className="flex-1"
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-4">
|
|
<Label className="w-32 text-label">A</Label>
|
|
<Input
|
|
type="number"
|
|
value={formValues.a}
|
|
onChange={(e) =>
|
|
handleInputChange(
|
|
"a",
|
|
e.target.value,
|
|
)
|
|
}
|
|
className="flex-1"
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-4">
|
|
<Label className="w-32 text-label">C</Label>
|
|
<Input
|
|
type="number"
|
|
value={formValues.c}
|
|
onChange={(e) =>
|
|
handleInputChange(
|
|
"c",
|
|
e.target.value,
|
|
)
|
|
}
|
|
className="flex-1"
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-4">
|
|
<Label className="w-32 text-label">
|
|
검증 년도
|
|
</Label>
|
|
<Select
|
|
value={formValues.verificationYear}
|
|
onValueChange={(value) =>
|
|
handleInputChange(
|
|
"verificationYear",
|
|
value,
|
|
)
|
|
}
|
|
>
|
|
<SelectTrigger className="flex-1">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="2025">
|
|
2025년
|
|
</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 오른쪽: 검증 대상 */}
|
|
<div className="card card-border flex-1 rounded p-4">
|
|
<h4 className="mb-3 rounded bg-gray-100 p-2 text-[1.4rem] font-medium">
|
|
검증 대상
|
|
</h4>
|
|
|
|
<div className="space-y-4 p-2">
|
|
<div className="grid grid-cols-4 gap-4">
|
|
<div className="flex items-center gap-2">
|
|
<Checkbox
|
|
checked={
|
|
formValues.checkboxOptions
|
|
.sidoDistribution
|
|
}
|
|
onCheckedChange={() =>
|
|
handleCheckboxChange(
|
|
"sidoDistribution",
|
|
)
|
|
}
|
|
/>
|
|
<Label className="cursor-pointer text-label">
|
|
하수도 보급률
|
|
</Label>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<Checkbox
|
|
checked={
|
|
formValues.checkboxOptions
|
|
.countyDistribution
|
|
}
|
|
onCheckedChange={() =>
|
|
handleCheckboxChange(
|
|
"countyDistribution",
|
|
)
|
|
}
|
|
/>
|
|
<Label className="cursor-pointer text-label">
|
|
하수관로
|
|
</Label>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<Checkbox
|
|
checked={
|
|
formValues.checkboxOptions
|
|
.countyDistributionUserManagement
|
|
}
|
|
onCheckedChange={() =>
|
|
handleCheckboxChange(
|
|
"countyDistributionUserManagement",
|
|
)
|
|
}
|
|
/>
|
|
<Label className="cursor-pointer text-label">
|
|
하수관로 유지관리
|
|
</Label>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<Checkbox
|
|
checked={
|
|
formValues.checkboxOptions
|
|
.lowerDistribution
|
|
}
|
|
onCheckedChange={() =>
|
|
handleCheckboxChange(
|
|
"lowerDistribution",
|
|
)
|
|
}
|
|
/>
|
|
<Label className="cursor-pointer text-label">
|
|
하수저류시설 및 빗물펌프장
|
|
</Label>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-4 gap-4">
|
|
<div className="flex items-center gap-2">
|
|
<Checkbox
|
|
checked={
|
|
formValues.checkboxOptions
|
|
.sidoServiceAvailability
|
|
}
|
|
onCheckedChange={() =>
|
|
handleCheckboxChange(
|
|
"sidoServiceAvailability",
|
|
)
|
|
}
|
|
/>
|
|
<Label className="cursor-pointer text-label">
|
|
펌프장
|
|
</Label>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<Checkbox
|
|
checked={
|
|
formValues.checkboxOptions
|
|
.individualService
|
|
}
|
|
onCheckedChange={() =>
|
|
handleCheckboxChange(
|
|
"individualService",
|
|
)
|
|
}
|
|
/>
|
|
<Label className="cursor-pointer text-label">
|
|
공공하수처리시설
|
|
</Label>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<Checkbox
|
|
checked={
|
|
formValues.checkboxOptions
|
|
.sidoServiceAvailability
|
|
}
|
|
onCheckedChange={() =>
|
|
handleCheckboxChange(
|
|
"sidoServiceAvailability",
|
|
)
|
|
}
|
|
/>
|
|
<Label className="cursor-pointer text-label">
|
|
분뇨처리시설
|
|
</Label>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<Checkbox
|
|
checked={
|
|
formValues.checkboxOptions
|
|
.individualService
|
|
}
|
|
onCheckedChange={() =>
|
|
handleCheckboxChange(
|
|
"individualService",
|
|
)
|
|
}
|
|
/>
|
|
<Label className="cursor-pointer text-label">
|
|
개인하수처리시설
|
|
</Label>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-4 gap-4">
|
|
<div className="flex items-center gap-2">
|
|
<Checkbox
|
|
checked={
|
|
formValues.checkboxOptions
|
|
.lowerOrgStatistics
|
|
}
|
|
onCheckedChange={() =>
|
|
handleCheckboxChange(
|
|
"lowerOrgStatistics",
|
|
)
|
|
}
|
|
/>
|
|
<Label className="cursor-pointer text-label">
|
|
하수도재정
|
|
</Label>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<Checkbox
|
|
checked={
|
|
formValues.checkboxOptions
|
|
.studentStatistics
|
|
}
|
|
onCheckedChange={() =>
|
|
handleCheckboxChange(
|
|
"studentStatistics",
|
|
)
|
|
}
|
|
/>
|
|
<Label className="cursor-pointer text-label">
|
|
물 재이용
|
|
</Label>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<Checkbox
|
|
checked={
|
|
formValues.checkboxOptions
|
|
.lowerOrgStatistics
|
|
}
|
|
onCheckedChange={() =>
|
|
handleCheckboxChange(
|
|
"lowerOrgStatistics",
|
|
)
|
|
}
|
|
/>
|
|
<Label className="cursor-pointer text-label">
|
|
하수 및 분뇨찌꺼기(슬러지) 처리
|
|
</Label>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<Checkbox
|
|
checked={
|
|
formValues.checkboxOptions
|
|
.studentStatistics
|
|
}
|
|
onCheckedChange={() =>
|
|
handleCheckboxChange(
|
|
"studentStatistics",
|
|
)
|
|
}
|
|
/>
|
|
<Label className="cursor-pointer text-label">
|
|
하수 및 분뇨관련산업
|
|
</Label>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-4 gap-4">
|
|
<div className="flex items-center gap-2">
|
|
<Checkbox
|
|
checked={
|
|
formValues.checkboxOptions
|
|
.lowerManagementEnterprise
|
|
}
|
|
onCheckedChange={() =>
|
|
handleCheckboxChange(
|
|
"lowerManagementEnterprise",
|
|
)
|
|
}
|
|
/>
|
|
<Label className="cursor-pointer text-label">
|
|
하수도 서비스 수준
|
|
</Label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 버튼 */}
|
|
<div className="mt-6 flex justify-center gap-4 pt-4">
|
|
<Button
|
|
color="green"
|
|
className="h-[3.6rem] w-[120px]"
|
|
onClick={handleSubmit}
|
|
>
|
|
검증 실행
|
|
</Button>
|
|
<Button
|
|
color="gray"
|
|
className="h-[3.6rem] w-[120px]"
|
|
onClick={handleReset}
|
|
>
|
|
초기화
|
|
</Button>
|
|
</div>
|
|
|
|
{/* 검증 이력 섹션 */}
|
|
<div className="mt-8 border-t border-border pt-6">
|
|
<h3 className="mb-4 px-2 text-[1.5rem] font-semibold text-title">
|
|
검증 이력
|
|
</h3>
|
|
<DataGrid
|
|
columnInfo={verificationHistoryColumnInfo}
|
|
rowData={verificationHistoryRowData}
|
|
setRowData={setVerificationHistoryRowData}
|
|
isExcelImport={false}
|
|
isExcelExport={false}
|
|
showHeaderCheckbox={false}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default HbStatisticsVerification;
|