ONAANDALL/frontend
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 03. 하수관로 유지관리 tab 구조 분리 & footer 적용

Browse Source 
- 기존 tab 구조를 RepairStatus(개보수), PipeDredgingStatus(관로준설) 파일로 분리
- 각 파일에 footer 속성, editable 속성 추가
This commit is contained in:
rsone001
2025-12-31 13:21:59 +09:00
parent 9fcd719382
commit 7d51674516
6 changed files with 232 additions and 215 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/st/src/components/statistics/management/SewagePipeMaintainMng.tsx
+27 -18
View File
@@ -2,30 +2,39 @@ import SearchForm from "@/components/module/SearchForm";
import TabDataGrid from "@/components/module/TabDataGrid";
import SubmitButton from "@/components/button/SumitButton";
import SaveButton from "@/components/button/SaveButton";
import ReviewOpinionButton from "@/components/button/ReviewOpinionButton";
import ReturnButton from "@/components/button/ReturnButton";
import LastYearDataButton from "@/components/button/LastYearDataButton";
import SubmitExceptionButton from "@/components/button/SubmitExceptionButton";
import { SewagePipeMaintainMngColumnInfoList } from "@/components/util/column/management/SewagePipeMaintainMngColumn";
import { RepairStatusColumn } from "@/components/util/column/management/sewagePipeMaintain/RepairStatus";
import { PipeDredgingStatusColumn } from "@/components/util/column/management/sewagePipeMaintain/PipeDredgingStatus";
// 하수도 통계 관리 > 03. 하수관로 유지관리
const SewagePipeMaintainMng = () => {
// tab List
const SewagePipeMaintainMngColumnInfoList = [
RepairStatusColumn,
PipeDredgingStatusColumn
];
const SubmitExceptionFunc = () => {
console.log('submit exception');
// 예외 제출 로직
};
const getLastYearDataFunc = () => {
console.log('get last year data');
// 전년도 데이터 가져오기
};
const submitFunc = () => {
console.log('제출 로직 실행');
// TODO: 제출 API 호출
console.log('submit');
// 제출 로직
};
const saveFunc = () => {
console.log('저장 로직 실행');
// TODO: 저장 API 호출
};
const returnFunc = () => {
console.log('반려 로직 실행');
};
const reviewOpinionFunc = () => {
console.log('검토의견 작성 로직 실행');
console.log('save');
// 저장 로직
};
return (
@@ -33,10 +42,10 @@ const SewagePipeMaintainMng = () => {
<SearchForm userMenual={true} />
<div className="flex justify-end items-center gap-[0.6rem] m-[0.6rem]">
<ReviewOpinionButton reviewOpinionFunc={reviewOpinionFunc} />
<ReturnButton returnFunc={returnFunc} />
<SaveButton saveFunc={saveFunc} />
<SubmitExceptionButton SubmitExceptionFunc={SubmitExceptionFunc} />
<LastYearDataButton getLastYearDataFunc={getLastYearDataFunc} />
<SubmitButton submitFunc={submitFunc} />
<SaveButton saveFunc={saveFunc} />
</div>
<TabDataGrid columnInfo={SewagePipeMaintainMngColumnInfoList} />
apps/st/src/components/statistics/management/SewagePipeMng.tsx
+10 -10
View File
@@ -30,6 +30,16 @@ const SewagePipeMng = () => {
AdminAreaConnectionColumn
];
const SubmitExceptionFunc = () => {
console.log('submit exception');
// 예외 제출 로직
};
const getLastYearDataFunc = () => {
console.log('get last year data');
// 전년도 데이터 가져오기
};
const submitFunc = () => {
console.log('submit');
// 제출 로직
@@ -40,16 +50,6 @@ const SewagePipeMng = () => {
// 저장 로직
};
const getLastYearDataFunc = () => {
console.log('get last year data');
// 전년도 데이터 가져오기
};
const SubmitExceptionFunc = () => {
console.log('submit exception');
// 예외 제출 로직
};
return (
<>
<SearchForm userMenual={true} />
apps/st/src/components/statistics/management/SeweragePenetrationRateMng.tsx
+10 -10
View File
@@ -12,6 +12,16 @@ import { SeweragePenetrationRateMngColumnInfo } from "@/components/util/column/m
// 하수도 통계 관리 > 01. 하수도 보급률
const SeweragePenetrationRateMng = () => {
const SubmitExceptionFunc = () => {
console.log('submit exception');
// 예외 제출 로직
};
const getLastYearDataFunc = () => {
console.log('get last year data');
// 전년도 데이터 가져오기
};
const submitFunc = () => {
console.log('submit');
// 제출 로직
@@ -22,16 +32,6 @@ const SeweragePenetrationRateMng = () => {
// 저장 로직
};
const getLastYearDataFunc = () => {
console.log('get last year data');
// 전년도 데이터 가져오기
};
const SubmitExceptionFunc = () => {
console.log('submit exception');
// 예외 제출 로직
};
const [rowData, setRowData] = useState<Record<string, string | number>[]>([]);
return (
apps/st/src/components/util/column/management/SewagePipeMaintainMngColumn.ts
-177
View File
@@ -4,182 +4,5 @@
*/
export const SewagePipeMaintainMngColumnInfoList = [
// ========================================
// Tab 1: 개보수
// ========================================
{
columns: [
// 행정구역
{ name: 'SIDO', fieldName: '시도', header: { text: '시도' } },
{ name: 'GUGUN', fieldName: '시군구', header: { text: '시군구' } },
// 개·보수관로 - 전체보수(m)
{ name: 'RPAIR_PIPE_SM', fieldName: '소계', header: { text: '소계' } },
{ name: 'RPAIR_CMBN_PIPE', fieldName: '합류식', header: { text: '합류식' } },
{ name: 'RPAIR_RAINWTR_PIPE', fieldName: '우수', header: { text: '우수' } },
{ name: 'RPAIR_PLTWTR_PIPE', fieldName: '오수', header: { text: '오수' } },
// 개·보수관로 - 부분보수(개소)
{ name: 'RPAIR_PIPE_SM2', fieldName: '소계', header: { text: '소계' } },
{ name: 'RPAIR_CMBN_PIPE2', fieldName: '합류식', header: { text: '합류식' } },
{ name: 'RPAIR_RAINWTR_PIPE2', fieldName: '우수', header: { text: '우수' } },
{ name: 'RPAIR_PLTWTR_PIPE2', fieldName: '오수', header: { text: '오수' } },
// 맨홀(개소)
{ name: 'MNHLE_SITE', fieldName: '합류식맨홀', header: { text: '합류식맨홀' } },
{ name: 'PLTWTR_MNHLE_SITE', fieldName: '오수맨홀', header: { text: '오수맨홀' } },
{ name: 'RAINWTR_MNHLE_SITE', fieldName: '우수맨홀', header: { text: '우수맨홀' } },
// 받이
{ name: 'PLTWTR_RCVR_SITE', fieldName: '오수받이(개소)', header: { text: '오수받이(개소)' } },
{ name: 'RAINWTR_RCVR_SITE', fieldName: '빗물받이(개소)', header: { text: '빗물받이(개소)' } },
// 토실, 토구
{ name: 'SOILSPLL_SITE', fieldName: '토실(개소)', header: { text: '토실(개소)' } },
{ name: 'SOILHOLE_SITE', fieldName: '토구(개소)', header: { text: '토구(개소)' } },
{ name: 'CCTV', fieldName: '수밀검사CCTV조사량(m)', header: { text: '수밀검사CCTV조사량(m)' } },
{ name: 'RMK', fieldName: '비고', header: { text: '비고' } },
],
columnLayout: [
{
name: 'group_admin',
header: { text: '행정구역' },
items: ['SIDO', 'GUGUN']
},
{
name: 'group_repair_main',
header: { text: '개·보수관로' },
items: [
{
name: 'group_full_repair',
header: { text: '전체보수(m)' },
items: [
'RPAIR_PIPE_SM',
'RPAIR_CMBN_PIPE',
{
name: 'group_full_sep',
header: { text: '분류식' },
items: ['RPAIR_RAINWTR_PIPE', 'RPAIR_PLTWTR_PIPE']
}
]
},
{
name: 'group_part_repair',
header: { text: '부분보수(개소)' },
items: [
'RPAIR_PIPE_SM2',
'RPAIR_CMBN_PIPE2',
{
name: 'group_part_sep',
header: { text: '분류식' },
items: ['RPAIR_RAINWTR_PIPE2', 'RPAIR_PLTWTR_PIPE2']
}
]
}
]
},
{
name: 'group_manhole',
header: { text: '맨홀(개소)' },
items: [
'MNHLE_SITE',
{
name: 'group_mh_sep',
header: { text: '분류식' },
items: ['PLTWTR_MNHLE_SITE', 'RAINWTR_MNHLE_SITE']
}
]
},
{
name: 'group_inlet',
header: { text: '받이' },
items: ['PLTWTR_RCVR_SITE', 'RAINWTR_RCVR_SITE']
},
{
name: 'group_chamber',
header: { text: '토실,토구' },
items: ['SOILSPLL_SITE', 'SOILHOLE_SITE']
},
'CCTV',
'RMK'
],
rowStartNum: 4,
fixedColumns: 1,
tabKey: 'repair',
tabLabel: '개보수'
},
// ========================================
// Tab 2: 관로준설
// ========================================
{
columns: [
{ name: 'SIDO', fieldName: '시도', header: { text: '시도' } },
{ name: 'GUGUN', fieldName: '시군구', header: { text: '시군구' } },
{ name: 'PIPL_FCLTY_EXTN', fieldName: '하수관로총시설연장(m)', header: { text: '하수관로총시설연장(m)' } },
// 준설연장 및 개소수
{ name: 'DRDG_PIPE_SM', fieldName: '합계', header: { text: '합계' } },
{ name: 'DRDG_CMBN_PIPE', fieldName: '합류식', header: { text: '합류식' } },
{ name: 'DRDG_RAINWTR_PIPE', fieldName: '우수', header: { text: '우수' } },
{ name: 'DRDG_PLTWTR_PIPE', fieldName: '오수', header: { text: '오수' } },
{ name: 'MNHLE_SITE', fieldName: '맨홀(개소)', header: { text: '맨홀(개소)' } },
{ name: 'PLTWTR_RCVR_SITE', fieldName: '오·우수받이(개소)', header: { text: '오·우수받이(개소)' } },
{ name: 'SOILSPLL_SOILHOLE_SITE', fieldName: '토실·토구(개소)', header: { text: '토실·토구(개소)' } },
{ name: 'DRDG_TRGET_EXTN', fieldName: '준설 계획 연장(m)', header: { text: '준설 계획 연장(m)' } },
{ name: 'DRDG_TRGET_RT', fieldName: '계획대비 준설율(%)', header: { text: '계획대비 준설율(%)' } },
{ name: 'PIPL_FCLTY_RT', fieldName: '총시설연장대비 준설율(%)', header: { text: '총시설연장대비 준설율(%)' } },
// 준설실적
{ name: 'DRDG_ACMSLT_AMOUNT', fieldName: '금액(백만원)', header: { text: '금액(백만원)' } },
{ name: 'DRDG_ACMSLT_QY', fieldName: '준설량(m³)', header: { text: '준설량(m³)' } },
// 준설토사처리 (사용자 트리구조 반영)
{ name: 'DRDG_ACMSLT_UNTPC', fieldName: '준설토처리비(백만원)', header: { text: '준설토처리비(백만원)' } },
{ name: 'DRDG_ETND_SM', fieldName: '처리량 계(톤)', header: { text: '처리량 계(톤)' } },
{ name: 'RCLM', fieldName: '매립', header: { text: '매립' } },
{ name: 'OCEAN_DPSL', fieldName: '해양투기', header: { text: '해양투기' } },
{ name: 'RUSE', fieldName: '재활용', header: { text: '재활용' } },
{ name: 'ETC', fieldName: '기타(소각, 고형화, 시멘트원료 등)', header: { text: '기타(소각, 고형화, 시멘트원료 등)' } },
{ name: 'RMK', fieldName: '비고', header: { text: '비고' } },
],
columnLayout: [
{ name: 'group_admin', header: { text: '행정구역' }, items: ['SIDO', 'GUGUN'] },
'PIPL_FCLTY_EXTN',
{
name: 'group_dredge_info',
header: { text: '준설연장 및 개소수' },
items: [
{
name: 'group_pipe',
header: { text: '관로(m)' },
items: [
'DRDG_PIPE_SM', 'DRDG_CMBN_PIPE',
{ name: 'group_sep', header: { text: '분류식' }, items: ['DRDG_RAINWTR_PIPE', 'DRDG_PLTWTR_PIPE'] }
]
},
'MNHLE_SITE', 'PLTWTR_RCVR_SITE', 'SOILSPLL_SOILHOLE_SITE'
]
},
'DRDG_TRGET_EXTN', 'DRDG_TRGET_RT', 'PIPL_FCLTY_RT',
{
name: 'group_perf',
header: { text: '준설실적' },
items: ['DRDG_ACMSLT_AMOUNT', 'DRDG_ACMSLT_QY']
},
{
name: 'group_soil_treat',
header: { text: '준설토사처리' },
items: ['DRDG_ACMSLT_UNTPC', 'DRDG_ETND_SM', 'RCLM', 'OCEAN_DPSL', 'RUSE', 'ETC']
},
'RMK'
],
rowStartNum: 4,
fixedColumns: 1,
tabKey: 'dredging',
tabLabel: '관로준설'
},
];
apps/st/src/components/util/column/management/sewagePipeMaintain/PipeDredgingStatus.ts
+77
View File
@@ -0,0 +1,77 @@
import { footerInt, footerDecimal1, footerDecimal2 } from "@/components/util/grid/footerSummary";
// 하수도 통계 관리 > 03.하수관로 유지관리 > tab 2. 관로준설
export const PipeDredgingStatusColumn = {
columns: [
// 행정구역
{ name: 'SIDO', fieldName: '시도', header: { text: '시도' }, editable: false },
{ name: 'GUGUN', fieldName: '시군구', header: { text: '시군구' }, editable: false, footer: { text: '합계' } },
{ name: 'PIPL_FCLTY_EXTN', fieldName: '하수관로총시설연장(m)', header: { text: '하수관로총시설연장(m)' }, editable: false, footer: footerDecimal2 },
// 준설연장 및 개소수 > 관로(m)
{ name: 'DRDG_PIPE_SM', fieldName: '합계', header: { text: '합계' }, editable: false, footer: footerDecimal1 },
{ name: 'DRDG_CMBN_PIPE', fieldName: '합류식', header: { text: '합류식' }, footer: footerDecimal1 },
{ name: 'DRDG_RAINWTR_PIPE', fieldName: '우수', header: { text: '우수' }, footer: footerDecimal1 },
{ name: 'DRDG_PLTWTR_PIPE', fieldName: '오수', header: { text: '오수' }, footer: footerDecimal1 },
// 준설연장 및 개소수 > 맨홀, 오·우수받이, 토실·토구
{ name: 'MNHLE_SITE', fieldName: '맨홀(개소)', header: { text: '맨홀(개소)' }, footer: footerInt },
{ name: 'PLTWTR_RCVR_SITE', fieldName: '오·우수받이(개소)', header: { text: '오·우수받이(개소)' }, footer: footerInt },
{ name: 'SOILSPLL_SOILHOLE_SITE', fieldName: '토실·토구(개소)', header: { text: '토실·토구(개소)' }, footer: footerInt },
// 계획 & 비율
{ name: 'DRDG_TRGET_EXTN', fieldName: '준설 계획 연장(m)', header: { text: '준설 계획 연장(m)' }, footer: footerDecimal1 },
{ name: 'DRDG_TRGET_RT', fieldName: '계획대비 준설율(%)', header: { text: '계획대비 준설율(%)' }, editable: false, footer: footerDecimal1 },
{ name: 'PIPL_FCLTY_RT', fieldName: '총시설연장대비 준설율(%)', header: { text: '총시설연장대비 준설율(%)' }, editable: false, footer: footerDecimal1 },
// 준설실적
{ name: 'DRDG_ACMSLT_AMOUNT', fieldName: '금액(백만원)', header: { text: '금액(백만원)' }, footer: footerInt },
{ name: 'DRDG_ACMSLT_QY', fieldName: '준설량(m³)', header: { text: '준설량(m³)' }, footer: footerInt },
// 준설토사처리
{ name: 'DRDG_ACMSLT_UNTPC', fieldName: '준설토처리비(백만원)', header: { text: '준설토처리비(백만원)' }, footer: footerInt },
{ name: 'DRDG_ETND_SM', fieldName: '처리량 계(톤)', header: { text: '처리량 계(톤)' }, editable: false, footer: footerDecimal1 },
{ name: 'RCLM', fieldName: '매립', header: { text: '매립' }, footer: footerDecimal1 },
{ name: 'OCEAN_DPSL', fieldName: '해양투기', header: { text: '해양투기' }, footer: footerDecimal1 },
{ name: 'RUSE', fieldName: '재활용', header: { text: '재활용' }, footer: footerDecimal1 },
{ name: 'ETC', fieldName: '기타(소각, 고형화, 시멘트원료 등)', header: { text: '기타(소각, 고형화, 시멘트원료 등)' }, footer: footerDecimal1 },
{ name: 'RMK', fieldName: '비고', header: { text: '비고' } },
],
columnLayout: [
{ name: 'group_admin', header: { text: '행정구역' }, items: ['SIDO', 'GUGUN'] },
'PIPL_FCLTY_EXTN',
{
name: 'group_dredge_info',
header: { text: '준설연장 및 개소수' },
items: [
{
name: 'group_pipe',
header: { text: '관로(m)' },
items: [
'DRDG_PIPE_SM', 'DRDG_CMBN_PIPE',
{ name: 'group_sep', header: { text: '분류식' }, items: ['DRDG_RAINWTR_PIPE', 'DRDG_PLTWTR_PIPE'] }
]
},
'MNHLE_SITE', 'PLTWTR_RCVR_SITE', 'SOILSPLL_SOILHOLE_SITE'
]
},
'DRDG_TRGET_EXTN', 'DRDG_TRGET_RT', 'PIPL_FCLTY_RT',
{
name: 'group_perf',
header: { text: '준설실적' },
items: ['DRDG_ACMSLT_AMOUNT', 'DRDG_ACMSLT_QY']
},
{
name: 'group_soil_treat',
header: { text: '준설토사처리' },
items: ['DRDG_ACMSLT_UNTPC', 'DRDG_ETND_SM', 'RCLM', 'OCEAN_DPSL', 'RUSE', 'ETC']
},
'RMK'
],
rowStartNum: 4,
fixedColumns: 1,
tabKey: 'pipeDredgingStatus',
tabLabel: '관로준설'
};
apps/st/src/components/util/column/management/sewagePipeMaintain/RepairStatus.ts
+108
View File
@@ -0,0 +1,108 @@
import { footerInt, footerDecimal1 } from "@/components/util/grid/footerSummary";
// 하수도 통계 관리 > 03.하수관로 유지관리 > tab 1. 개보수
export const RepairStatusColumn = {
columns: [
// 행정구역
{ name: 'SIDO', fieldName: '시도', header: { text: '시도' }, editable: false },
{ name: 'GUGUN', fieldName: '시군구', header: { text: '시군구' }, editable: false, footer: { text: '합계' } },
// 개·보수관로 > 전체보수(m)
{ name: 'RPAIR_PIPE_SM', fieldName: '소계', header: { text: '소계' }, editable: false, footer: footerDecimal1 },
{ name: 'RPAIR_CMBN_PIPE', fieldName: '합류식', header: { text: '합류식' }, footer: footerDecimal1 },
{ name: 'RPAIR_RAINWTR_PIPE', fieldName: '우수', header: { text: '우수' }, footer: footerDecimal1 },
{ name: 'RPAIR_PLTWTR_PIPE', fieldName: '오수', header: { text: '오수' }, footer: footerDecimal1 },
// 개·보수관로 > 부분보수(개소)
{ name: 'RPAIR_PIPE_SM2', fieldName: '소계', header: { text: '소계' }, editable: false, footer: footerInt },
{ name: 'RPAIR_CMBN_PIPE2', fieldName: '합류식', header: { text: '합류식' }, footer: footerInt },
{ name: 'RPAIR_RAINWTR_PIPE2', fieldName: '우수', header: { text: '우수' }, footer: footerInt },
{ name: 'RPAIR_PLTWTR_PIPE2', fieldName: '오수', header: { text: '오수' }, footer: footerInt },
// 맨홀(개소)
{ name: 'MNHLE_SITE', fieldName: '합류식맨홀', header: { text: '합류식맨홀' }, footer: footerInt },
{ name: 'PLTWTR_MNHLE_SITE', fieldName: '오수맨홀', header: { text: '오수맨홀' }, footer: footerInt },
{ name: 'RAINWTR_MNHLE_SITE', fieldName: '우수맨홀', header: { text: '우수맨홀' }, footer: footerInt },
// 받이
{ name: 'PLTWTR_RCVR_SITE', fieldName: '오수받이(개소)', header: { text: '오수받이(개소)' }, footer: footerInt },
{ name: 'RAINWTR_RCVR_SITE', fieldName: '빗물받이(개소)', header: { text: '빗물받이(개소)' }, footer: footerInt },
// 토실, 토구
{ name: 'SOILSPLL_SITE', fieldName: '토실(개소)', header: { text: '토실(개소)' }, footer: footerInt },
{ name: 'SOILHOLE_SITE', fieldName: '토구(개소)', header: { text: '토구(개소)' }, footer: footerInt },
// 수밀검사CCTV조사량(m)
{ name: 'CCTV', fieldName: '수밀검사CCTV조사량(m)', header: { text: '수밀검사CCTV조사량(m)' }, footer: footerDecimal1 },
// 비고
{ name: 'RMK', fieldName: '비고', header: { text: '비고' } },
],
columnLayout: [
{
name: 'group_admin',
header: { text: '행정구역' },
items: ['SIDO', 'GUGUN']
},
{
name: 'group_repair_main',
header: { text: '개·보수관로' },
items: [
{
name: 'group_full_repair',
header: { text: '전체보수(m)' },
items: [
'RPAIR_PIPE_SM',
'RPAIR_CMBN_PIPE',
{
name: 'group_full_sep',
header: { text: '분류식' },
items: ['RPAIR_RAINWTR_PIPE', 'RPAIR_PLTWTR_PIPE']
}
]
},
{
name: 'group_part_repair',
header: { text: '부분보수(개소)' },
items: [
'RPAIR_PIPE_SM2',
'RPAIR_CMBN_PIPE2',
{
name: 'group_part_sep',
header: { text: '분류식' },
items: ['RPAIR_RAINWTR_PIPE2', 'RPAIR_PLTWTR_PIPE2']
}
]
}
]
},
{
name: 'group_manhole',
header: { text: '맨홀(개소)' },
items: [
'MNHLE_SITE',
{
name: 'group_mh_sep',
header: { text: '분류식' },
items: ['PLTWTR_MNHLE_SITE', 'RAINWTR_MNHLE_SITE']
}
]
},
{
name: 'group_inlet',
header: { text: '받이' },
items: ['PLTWTR_RCVR_SITE', 'RAINWTR_RCVR_SITE']
},
{
name: 'group_chamber',
header: { text: '토실,토구' },
items: ['SOILSPLL_SITE', 'SOILHOLE_SITE']
},
'CCTV',
'RMK'
],
rowStartNum: 4,
fixedColumns: 1,
tabKey: 'repairStatus',
tabLabel: '개보수'
};