refactor: 06. 공공하수처리시설 컬럼 파일로 분리 & footer 적용

- PublicSewageFacilityMngColumn.ts 파일 새로 생성
- 기존 PublicSewageFacilityMng.tsx 내 컬럼 정의 별도 파일로 분리
- footer 설정 적용 (소수점 3자리, 소수점 1자리, 정수)
- editable 속성 추가 (수정 가능 컬럼 10개)
This commit is contained in:
2026-01-05 16:02:11 +09:00
parent 591f47a3ff
commit 55bf8df00d
2 changed files with 218 additions and 208 deletions
@@ -6,211 +6,14 @@ import SubmitExceptionButton from '@/components/button/SubmitExceptionButton';
import OperateDataButton from '@/components/button/OperateDataButton';
import { useState } from 'react';
import { PublicSewageFacilityMngColumn } from '@/components/util/column/management/PublicSewageFacilityMngColumn';
// 하수도 통계 관리 > 06. 공공하수처리시설
const PublicSewageFacilityMng = () => {
const columns = [
// 행정구역
{ name: 'sidoCd', fieldName: '시도', header: { text: '시도' } },
{ name: 'gugun', fieldName: '구군', header: { text: '구군' } },
// 시설명
{ name: 'bscFctNm', fieldName: '시설명', header: { text: '시설명(500m³/일 이상/미만)' } },
// 소재지
{ name: 'addr', fieldName: '소재지', header: { text: '소재지' } },
// 시설용량
{ name: 'fctCpc', fieldName: '시설용량', header: { text: '시설용량(500m³/일 이상/미만)' } },
// 시설용량 - (m³/일)
{ name: 'fctCpc1', fieldName: '물리적(시설용량)', header: { text: '물리적' } },
{ name: 'fctCpc2', fieldName: '생물학적(시설용량)', header: { text: '생물학적' } },
{ name: 'fctCpc3', fieldName: '고도(시설용량)', header: { text: '고도' } },
// 유입하수량
{ name: 'totInflAmntAve', fieldName: '유입하수량', header: { text: '유입하수량(500m³/일 이상/미만)' } },
// 유입하수량 - (m³/일)
{ name: 'pInflAmntAve', fieldName: '물리적(유입)', header: { text: '물리적' } },
{ name: 'oInflAmntAve', fieldName: '생물학적(유입)', header: { text: '생물학적' } },
{ name: 'aInflAmntAve', fieldName: '고도(유입)', header: { text: '고도' } },
// 방류량
{ name: 'totTputAve', fieldName: '방류량', header: { text: '방류량(500m³/일 이상/미만)' } },
// 방류량 - (m³/일)
{ name: 'pTputAve', fieldName: '물리적(방류)', header: { text: '물리적' } },
{ name: 'oTputAve', fieldName: '생물학적(방류)', header: { text: '생물학적' } },
{ name: 'aTputAve', fieldName: '고도(방류)', header: { text: '고도' } },
// 수질
{ name: 'inflAssctBfrWqltBod', fieldName: '유입BOD', header: { text: '유입BOD' } },
{ name: 'efflWqltBod', fieldName: '방류BOD', header: { text: '방류BOD' } },
{ name: 'inflAssctBfrWqltToc', fieldName: '유입TOC', header: { text: '유입TOC' } },
{ name: 'efflWqltToc', fieldName: '방류TOC', header: { text: '방류TOC' } },
{ name: 'inflAssctBfrWqltSs', fieldName: '유입SS', header: { text: '유입SS' } },
{ name: 'efflWqltSs', fieldName: '방류SS', header: { text: '방류SS' } },
{ name: 'inflAssctBfrWqltTn', fieldName: '유입T-N', header: { text: '유입T-N' } },
{ name: 'efflWqltTn', fieldName: '방류T-N', header: { text: '방류T-N' } },
{ name: 'inflAssctBfrWqltTp', fieldName: '유입T-P', header: { text: '유입T-P' } },
{ name: 'efflWqltTp', fieldName: '방류T-P', header: { text: '방류T-P' } },
{ name: 'inflAssctBfrWqltClfgrpcnt', fieldName: '유입총대장균군수', header: { text: '유입총대장균군수' } },
{ name: 'efflWqltClfgrpcnt', fieldName: '방류총대장균군수', header: { text: '방류총대장균군수' } },
// 처리특성
{ name: 'tmEfficiency', fieldName: '처리효율(%)', header: { text: '처리효율(%)' } },
{ name: 'pcLoad', fieldName: '처리부하량', header: { text: '처리부하량(kgBOD/D)' } },
{ name: 'trtFrfHanNm', fieldName: '처리방법', header: { text: '처리방법' } },
// 연계처리량
{ name: 'excretionsTot', fieldName: '분뇨', header: { text: '분뇨' } },
{ name: 'stkrsngWstwtrTot', fieldName: '축산', header: { text: '축산' } },
{ name: 'lchtTot', fieldName: '침출수', header: { text: '침출수' } },
{ name: 'etcTot', fieldName: '기타', header: { text: '기타' } },
// 시설정보
{ name: 'tel', fieldName: '전화번호', header: { text: '전화번호' } },
{ name: 'rnDt', fieldName: '준공일', header: { text: '준공일' } },
{ name: 'compDt', fieldName: '가동개시일', header: { text: '가동개시일' } },
{ name: 'tot', fieldName: '사업비', header: { text: '사업비' } },
// 방류수 소독방법
{ name: 'dsfctNm', fieldName: '방류수 소독방법', header: { text: '방류수 소독방법' } },
// 방류수역
{ name: 'wbsnNm', fieldName: '수계', header: { text: '수계' } },
{ name: 'rvNm', fieldName: '지류', header: { text: '지류' } },
{ name: 'mdmbsn', fieldName: '세부단위구역', header: { text: '세부단위구역' } },
{ name: 'efflWqltStndrdNm', fieldName: '지역구분', header: { text: '지역구분' } },
{ name: 'lgbsn', fieldName: '중권역', header: { text: '중권역' } },
{ name: 'lgbsnBod', fieldName: '목표수질(BOD)', header: { text: '목표수질(BOD)' } },
// 에너지
{ name: 'toeRt', fieldName: '에너지자립률(%)', header: { text: '에너지자립률(%)' } },
{ name: 'toeSum', fieldName: '계(TOE)', header: { text: '계(TOE)' } },
{ name: 'elcpwAmnt', fieldName: '총 전력사용량', header: { text: '총 전력사용량(kWh)' } },
{ name: 'toeQnty', fieldName: '자체 에너지사용량', header: { text: '자체 에너지사용량(TOE)' } },
// CO2
{ name: 'co2Emissions', fieldName: 'CO2배출량', header: { text: '하수처리량당 CO2배출량(kgCO2/m³)' } },
// 운영정보
{ name: 'oprClsNm', fieldName: '운영주체', header: { text: '운영주체(자체/공기업/민간대행)' } },
// 위탁현황
{ name: 'trstOprEtpNm', fieldName: '위탁업체명', header: { text: '위탁업체명' } },
{ name: 'yrstpTrstCst', fieldName: '위탁비용', header: { text: '위탁비용(백만원/년)' } },
{ name: 'trstOprDt', fieldName: '위탁계약기간', header: { text: '위탁계약기간(yyyy-mm-dd~yyyy-mm-dd)' } },
// 기타
{ name: 'cntrTrtFctNm', fieldName: '중심처리시설', header: { text: '중심처리시설' } },
{ name: 'totWtrQrm', fieldName: '직원총수', header: { text: '직원총수(명)' } },
{ name: 'safeAcdntCo', fieldName: '안전사고건수', header: { text: '안전사고건수' } },
{ name: 'rmk', fieldName: '비고', header: { text: '비고' } },
];
const columnLayout = [
{
name: 'administrative',
hideChildHeaders: false,
header: { text: '행정구역' },
items: ['sidoCd', 'gugun'],
},
'bscFctNm',
'addr',
'fctCpc',
{
name: 'facilityCapacityDetail',
hideChildHeaders: false,
header: { text: '(m³/일)' },
items: ['fctCpc1', 'fctCpc2', 'fctCpc3'],
},
'totInflAmntAve',
{
name: 'influentWaterDetail',
hideChildHeaders: false,
header: { text: '(m³/일)' },
items: ['pInflAmntAve', 'oInflAmntAve', 'aInflAmntAve'],
},
'totTputAve',
{
name: 'effluentWaterDetail',
hideChildHeaders: false,
header: { text: '(m³/일)' },
items: ['pTputAve', 'oTputAve', 'aTputAve'],
},
'inflAssctBfrWqltBod',
'efflWqltBod',
'inflAssctBfrWqltToc',
'efflWqltToc',
'inflAssctBfrWqltSs',
'efflWqltSs',
'inflAssctBfrWqltTn',
'efflWqltTn',
'inflAssctBfrWqltTp',
'efflWqltTp',
'inflAssctBfrWqltClfgrpcnt',
'efflWqltClfgrpcnt',
'tmEfficiency',
'pcLoad',
'trtFrfHanNm',
{
name: 'linkedTreatment',
hideChildHeaders: false,
header: { text: '연계처리량(m³/일) (500m³/일 이상/미만)' },
items: ['excretionsTot', 'stkrsngWstwtrTot', 'lchtTot', 'etcTot'],
},
'tel',
'rnDt',
'compDt',
'tot',
'dsfctNm',
{
name: 'dischargeArea',
hideChildHeaders: false,
header: { text: '방류수역' },
items: [
'wbsnNm',
'rvNm',
'mdmbsn',
'efflWqltStndrdNm',
{
name: 'mediumWatershed',
hideChildHeaders: false,
header: { text: '중권역' },
items: ['lgbsn', 'lgbsnBod'],
},
],
},
'toeRt',
{
name: 'energy',
hideChildHeaders: false,
header: { text: '연간 총 에너지 사용량(TOE)' },
items: ['toeSum', 'elcpwAmnt', 'toeQnty'],
},
'co2Emissions',
'oprClsNm',
{
name: 'consignmentStatus',
hideChildHeaders: false,
header: { text: '위탁현황' },
items: ['trstOprEtpNm', 'yrstpTrstCst', 'trstOprDt'],
},
'cntrTrtFctNm',
'totWtrQrm',
'safeAcdntCo',
'rmk',
];
const saveFunc = () => {
console.log('save');
// 저장 로직: 자동 계산 (합계 필드 계산) 후 저장
};
const submitFunc = () => {
console.log('submit');
// 제출 로직: 데이터 검증 후 제출 팝업 호출
const SubmitExceptionFunc = () => {
console.log('submitException');
// 예외제출 로직
};
const getOperateDataFunc = () => {
@@ -218,9 +21,14 @@ const PublicSewageFacilityMng = () => {
// 운영 데이터 가져오기
};
const SubmitExceptionFunc = () => {
console.log('submitException');
// 예외제출 로직
const submitFunc = () => {
console.log('submit');
// 제출 로직: 데이터 검증 후 제출 팝업 호출
};
const saveFunc = () => {
console.log('save');
// 저장 로직: 자동 계산 (합계 필드 계산) 후 저장
};
const [rowData, setRowData] = useState<Record<string, string | number>[]>([]);
@@ -229,12 +37,12 @@ const PublicSewageFacilityMng = () => {
<>
<SearchForm userMenual={true} />
<div className="flex justify-end items-center gap-[0.6rem] m-[0.6rem]">
<OperateDataButton getOperateDataFunc={getOperateDataFunc} />
<SubmitExceptionButton SubmitExceptionFunc={SubmitExceptionFunc} />
<OperateDataButton getOperateDataFunc={getOperateDataFunc} />
<SubmitButton submitFunc={submitFunc} />
<SaveButton saveFunc={saveFunc} />
</div>
<DataGrid columnInfo={{ columns, columnLayout }} rowStartNum={3} fixedColumns={2} rowData={rowData} setRowData={setRowData} />
<DataGrid columnInfo={ PublicSewageFacilityMngColumn } rowStartNum={3} fixedColumns={2} rowData={rowData} setRowData={setRowData} />
</>
);
};
@@ -0,0 +1,202 @@
import { footerInt, footerDecimal1, footerDecimal3 } from "@/components/util/grid/footerSummary";
/**
* 하수도 통계 관리 > 06. 공공하수처리시설
* 단일 Tab
*/
export const PublicSewageFacilityMngColumn = {
columns: [
// 행정구역
{ name: 'sidoCd', fieldName: '시도', header: { text: '시도' }, editable: false },
{ name: 'gugun', fieldName: '구군', header: { text: '구군' }, editable: false },
// 시설명
{ name: 'bscFctNm', fieldName: '시설명(500m³/일 이상/미만)', header: { text: '시설명(500m³/일 이상/미만)' }, editable: false },
// 소재지
{ name: 'addr', fieldName: '소재지', header: { text: '소재지' }, editable: false },
// 시설용량
{ name: 'fctCpc', fieldName: '시설용량(500m³/일 이상/미만)', header: { text: '시설용량(500m³/일 이상/미만)' }, editable: false },
// 시설용량 - (m³/일)
{ name: 'fctCpc1', fieldName: '물리적', header: { text: '물리적' }, editable: false, footer: footerDecimal1 },
{ name: 'fctCpc2', fieldName: '생물학적', header: { text: '생물학적' }, editable: false, footer: footerDecimal1 },
{ name: 'fctCpc3', fieldName: '고도', header: { text: '고도' }, editable: false, footer: footerDecimal1 },
// 유입하수량
{ name: 'totInflAmntAve', fieldName: '유입하수량(500m³/일 이상/미만)', header: { text: '유입하수량(500m³/일 이상/미만)' }, editable: false, footer: footerDecimal1 },
// 유입하수량 - (m³/일)
{ name: 'pInflAmntAve', fieldName: '물리적', header: { text: '물리적' }, footer: footerDecimal1 },
{ name: 'oInflAmntAve', fieldName: '생물학적', header: { text: '생물학적' }, footer: footerDecimal1 },
{ name: 'aInflAmntAve', fieldName: '고도', header: { text: '고도' }, footer: footerDecimal1 },
// 방류량
{ name: 'totTputAve', fieldName: '방류량(500m³/일 이상/미만)', header: { text: '방류량(500m³/일 이상/미만)' }, editable: false, footer: footerDecimal1 },
// 방류량 - (m³/일)
{ name: 'pTputAve', fieldName: '물리적', header: { text: '물리적' }, footer: footerDecimal1 },
{ name: 'oTputAve', fieldName: '생물학적', header: { text: '생물학적' }, footer: footerDecimal1 },
{ name: 'aTputAve', fieldName: '고도', header: { text: '고도' }, footer: footerDecimal1 },
// 수질
{ name: 'inflAssctBfrWqltBod', fieldName: '유입BOD', header: { text: '유입BOD' }, editable: false, footer: footerDecimal1 },
{ name: 'efflWqltBod', fieldName: '방류BOD', header: { text: '방류BOD' }, editable: false, footer: footerDecimal1 },
{ name: 'inflAssctBfrWqltToc', fieldName: '유입TOC', header: { text: '유입TOC' }, editable: false, footer: footerDecimal1 },
{ name: 'efflWqltToc', fieldName: '방류TOC', header: { text: '방류TOC' }, editable: false, footer: footerDecimal1 },
{ name: 'inflAssctBfrWqltSs', fieldName: '유입SS', header: { text: '유입SS' }, editable: false, footer: footerDecimal1 },
{ name: 'efflWqltSs', fieldName: '방류SS', header: { text: '방류SS' }, editable: false, footer: footerDecimal1 },
{ name: 'inflAssctBfrWqltTn', fieldName: '유입T-N', header: { text: '유입T-N' }, editable: false, footer: footerDecimal3 },
{ name: 'efflWqltTn', fieldName: '방류T-N', header: { text: '방류T-N' }, editable: false, footer: footerDecimal3 },
{ name: 'inflAssctBfrWqltTp', fieldName: '유입T-P', header: { text: '유입T-P' }, editable: false, footer: footerDecimal3 },
{ name: 'efflWqltTp', fieldName: '방류T-P', header: { text: '방류T-P' }, editable: false, footer: footerDecimal3 },
{ name: 'inflAssctBfrWqltClfgrpcnt', fieldName: '유입총대장균군수', header: { text: '유입총대장균군수' }, editable: false, footer: footerDecimal1 },
{ name: 'efflWqltClfgrpcnt', fieldName: '방류총대장균군수', header: { text: '방류총대장균군수' }, editable: false, footer: footerDecimal1 },
// 처리특성
{ name: 'tmEfficiency', fieldName: '처리효율(%)', header: { text: '처리효율(%)' }, editable: false, footer: footerDecimal1 },
{ name: 'pcLoad', fieldName: '처리부하량(kgBOD/D)', header: { text: '처리부하량(kgBOD/D)' }, editable: false, footer: footerDecimal1 },
{ name: 'trtFrfHanNm', fieldName: '처리방법', header: { text: '처리방법' }, editable: false },
// 연계처리량
{ name: 'excretionsTot', fieldName: '분뇨', header: { text: '분뇨' }, editable: false, footer: footerDecimal1 },
{ name: 'stkrsngWstwtrTot', fieldName: '축산', header: { text: '축산' }, editable: false, footer: footerDecimal1 },
{ name: 'lchtTot', fieldName: '침출수', header: { text: '침출수' }, editable: false, footer: footerDecimal1 },
{ name: 'etcTot', fieldName: '기타', header: { text: '기타' }, editable: false, footer: footerDecimal1 },
// 시설정보
{ name: 'tel', fieldName: '전화번호', header: { text: '전화번호' }, editable: false },
{ name: 'rnDt', fieldName: '준공일', header: { text: '준공일' }, editable: false },
{ name: 'compDt', fieldName: '가동개시일', header: { text: '가동개시일' }, editable: false },
{ name: 'tot', fieldName: '사업비', header: { text: '사업비' }, editable: false },
// 방류수 소독방법
{ name: 'dsfctNm', fieldName: '방류수 소독방법', header: { text: '방류수 소독방법' }, editable: false },
// 방류수역
{ name: 'wbsnNm', fieldName: '수계', header: { text: '수계' }, editable: false },
{ name: 'rvNm', fieldName: '지류', header: { text: '지류' }, editable: false },
{ name: 'mdmbsn', fieldName: '세부단위구역', header: { text: '세부단위구역' }, editable: false },
{ name: 'efflWqltStndrdNm', fieldName: '지역구분', header: { text: '지역구분' }, editable: false },
{ name: 'lgbsn', fieldName: '중권역', header: { text: '중권역' }, editable: false },
{ name: 'lgbsnBod', fieldName: '목표수질(BOD)', header: { text: '목표수질(BOD)' }, editable: false },
// 에너지
{ name: 'toeRt', fieldName: '에너지자립률(%)', header: { text: '에너지자립률(%)' }, editable: false },
{ name: 'toeSum', fieldName: '계(TOE)', header: { text: '계(TOE)' }, editable: false, footer: footerDecimal1 },
{ name: 'elcpwAmnt', fieldName: '총 전력사용량(kWh)', header: { text: '총 전력사용량(kWh)' }, editable: false, footer: footerDecimal1 },
{ name: 'toeQnty', fieldName: '자체 에너지사용량(TOE)', header: { text: '자체 에너지사용량(TOE)' }, editable: false, footer: footerDecimal1 },
// CO2
{ name: 'co2Emissions', fieldName: '하수처리량당 CO2배출량(kgCO2/m³)', header: { text: '하수처리량당 CO2배출량(kgCO2/m³)' }, editable: false, footer: footerDecimal3 },
// 운영정보
{ name: 'oprClsNm', fieldName: '운영주체(자체/공기업/민간대행)', header: { text: '운영주체(자체/공기업/민간대행)' }, editable: false },
// 위탁현황
{ name: 'trstOprEtpNm', fieldName: '위탁업체명', header: { text: '위탁업체명' } },
{ name: 'yrstpTrstCst', fieldName: '위탁비용(백만원/년)', header: { text: '위탁비용(백만원/년)' }, footer: footerDecimal1 },
{ name: 'trstOprDt', fieldName: '위탁계약기간(yyyy-mm-dd~yyyy-mm-dd)', header: { text: '위탁계약기간(yyyy-mm-dd~yyyy-mm-dd)' } },
// 기타
{ name: 'cntrTrtFctNm', fieldName: '중심처리시설', header: { text: '중심처리시설' } },
{ name: 'totWtrQrm', fieldName: '직원총수(명)', header: { text: '직원총수(명)' }, footer: footerInt },
{ name: 'safeAcdntCo', fieldName: '안전사고건수', header: { text: '안전사고건수' } },
{ name: 'rmk', fieldName: '비고', header: { text: '비고' } },
],
columnLayout: [
{
name: 'administrative',
hideChildHeaders: false,
header: { text: '행정구역' },
items: ['sidoCd', 'gugun'],
},
'bscFctNm',
'addr',
'fctCpc',
{
name: 'facilityCapacityDetail',
hideChildHeaders: false,
header: { text: '(m³/일)' },
items: ['fctCpc1', 'fctCpc2', 'fctCpc3'],
},
'totInflAmntAve',
{
name: 'influentWaterDetail',
hideChildHeaders: false,
header: { text: '(m³/일)' },
items: ['pInflAmntAve', 'oInflAmntAve', 'aInflAmntAve'],
},
'totTputAve',
{
name: 'effluentWaterDetail',
hideChildHeaders: false,
header: { text: '(m³/일)' },
items: ['pTputAve', 'oTputAve', 'aTputAve'],
},
'inflAssctBfrWqltBod',
'efflWqltBod',
'inflAssctBfrWqltToc',
'efflWqltToc',
'inflAssctBfrWqltSs',
'efflWqltSs',
'inflAssctBfrWqltTn',
'efflWqltTn',
'inflAssctBfrWqltTp',
'efflWqltTp',
'inflAssctBfrWqltClfgrpcnt',
'efflWqltClfgrpcnt',
'tmEfficiency',
'pcLoad',
'trtFrfHanNm',
{
name: 'linkedTreatment',
hideChildHeaders: false,
header: { text: '연계처리량(m³/일) (500m³/일 이상/미만)' },
items: ['excretionsTot', 'stkrsngWstwtrTot', 'lchtTot', 'etcTot'],
},
'tel',
'rnDt',
'compDt',
'tot',
'dsfctNm',
{
name: 'dischargeArea',
hideChildHeaders: false,
header: { text: '방류수역' },
items: [
'wbsnNm',
'rvNm',
'mdmbsn',
'efflWqltStndrdNm',
{
name: 'mediumWatershed',
hideChildHeaders: false,
header: { text: '중권역' },
items: ['lgbsn', 'lgbsnBod'],
},
],
},
'toeRt',
{
name: 'energy',
hideChildHeaders: false,
header: { text: '연간 총 에너지 사용량(TOE)' },
items: ['toeSum', 'elcpwAmnt', 'toeQnty'],
},
'co2Emissions',
'oprClsNm',
{
name: 'consignmentStatus',
hideChildHeaders: false,
header: { text: '위탁현황' },
items: ['trstOprEtpNm', 'yrstpTrstCst', 'trstOprDt'],
},
'cntrTrtFctNm',
'totWtrQrm',
'safeAcdntCo',
'rmk',
]
};