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

st: refactor:

Browse Source 
- data state 선언 위치 변경
- 데이터 필드 타입 및 format 설정 로직 추가
This commit is contained in:
rsone001
2025-12-31 13:17:32 +09:00
parent 55b3752f49
commit d065fe669b
19 changed files with 173 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/st/src/components/module/DataGrid.tsx
+57 -2
View File
@@ -1,4 +1,5 @@
import { useRef, useEffect } from "react"
import { ValueType } from "realgrid"
import RealGrid, { GridFitStyle, type DisplayOptions } from "realgrid"
import { RealGridReact, RGDataColumn } from "realgrid-react"
@@ -35,7 +36,7 @@ if (typeof window !== "undefined") {
RealGrid.setLicenseKey(process.env.NEXT_PUBLIC_ST_REALGRID_KEY || '');
const DataGrid = ({ columnInfo, rowStartNum, isExcelImport = true, fixedColumns, onRowsChange, showHeaderCheckbox = false, rowData, setRowData }: DataGridProps) => {
const DataGrid = ({ columnInfo, rowStartNum, isExcelImport = true, fixedColumns, showHeaderCheckbox = false, rowData, setRowData }: DataGridProps) => {
const { columns, columnLayout } = columnInfo;
const gridRef = useRef<RealGridReact>(null);
const fileInputRef = useRef<HTMLInputElement>(null);
@@ -174,6 +175,7 @@ const DataGrid = ({ columnInfo, rowStartNum, isExcelImport = true, fixedColumns,
dataRows.push(rowData);
}
}
setRowData(dataRows);
} catch (error) {
console.error('엑셀 파일 파싱 오류:', error);
@@ -203,9 +205,60 @@ const DataGrid = ({ columnInfo, rowStartNum, isExcelImport = true, fixedColumns,
};
useEffect(() => {
if (!gridRef.current?.gridView) return;
if (!gridRef.current?.gridView || !gridRef.current?.dataProvider) return;
const gridView = gridRef.current.gridView;
const dataProvider = gridRef.current.dataProvider;
const fieldsToSet: Array<{ fieldName: string; dataType: string }> = [];
const fieldMap = new Map<string, string>();
columns.forEach(col => {
if (col.valueType && col.fieldName && !fieldMap.has(col.fieldName)) {
fieldMap.set(col.fieldName, col.valueType);
fieldsToSet.push({
fieldName: col.fieldName,
dataType: col.valueType
});
}
});
// 필드가 이미 존재하는지 확인하고, valueType이 설정된 필드만 업데이트
if (fieldsToSet.length > 0) {
try {
// 기존 필드 정보 가져오기
const existingFields = (dataProvider as { getFields?: () => Array<{ fieldName: string; dataType?: string }> }).getFields?.() || [];
const existingFieldMap = new Map(existingFields.map(f => [f.fieldName, f.dataType || 'text']));
// valueType이 설정된 필드 중 dataType이 다른 필드만 업데이트
const fieldsToUpdate = fieldsToSet.filter(field => {
const existingDataType = existingFieldMap.get(field.fieldName);
return existingDataType !== field.dataType;
});
if (fieldsToUpdate.length > 0) {
// 기존 필드 정보를 유지하면서 dataType만 업데이트
// 컬럼 정의에 valueType이 있으면 그것을 우선 사용, 없으면 기존 필드의 dataType 사용
const allFields = existingFields.map(f => ({
fieldName: f.fieldName,
dataType: fieldMap.get(f.fieldName) || f.dataType || 'text'
}));
// 새로 추가할 필드가 있으면 추가
fieldsToSet.forEach(field => {
if (!existingFieldMap.has(field.fieldName)) {
allFields.push({ fieldName: field.fieldName, dataType: field.dataType });
}
});
// setFields를 호출하여 필드의 dataType 업데이트
(dataProvider as { setFields: (fields: Array<{ fieldName: string; dataType: string }>) => void })
.setFields(allFields);
}
} catch (error) {
console.warn('Failed to set field dataType:', error);
}
}
(gridView.displayOptions as DisplayOptions).fitStyle = GridFitStyle.EVEN;
gridView.header.height = 60;
@@ -297,6 +350,8 @@ const DataGrid = ({ columnInfo, rowStartNum, isExcelImport = true, fixedColumns,
key={column.name}
name={column.name}
fieldName={column.fieldName}
valueType={column.valueType ? column.valueType : ValueType.TEXT}
{...(column.valueType === ValueType.NUMBER && { numberFormat: column.dataFormat ? column.dataFormat : '#,##0.000' })}
header={column.header}
editable={column.editable}
footer={column.footer ? {
apps/st/src/components/module/TabDataGrid.tsx
+59 -4
View File
@@ -1,4 +1,5 @@
import { useRef, useEffect, useState } from "react"
import { ValueType } from "realgrid"
import RealGrid, { GridFitStyle, type DisplayOptions } from "realgrid"
import { RealGridReact, RGDataColumn } from "realgrid-react"
@@ -36,16 +37,13 @@ if (typeof window !== "undefined") {
RealGrid.setLicenseKey(process.env.NEXT_PUBLIC_ST_REALGRID_KEY || '');
const TabDataGrid = ({ columnInfo, isExcelImport = true, rows = [], showHeaderCheckbox = false }: TabDataGridProps) => {
const TabDataGrid = ({ columnInfo, isExcelImport = true, rows = [], showHeaderCheckbox = false, rowDataMap, setRowDataMap }: TabDataGridProps) => {
// 각 탭별로 그리드 ref와 데이터를 관리
const gridRefs = useRef<Map<string, RealGridReact>>(new Map());
const fileInputRefs = useRef<Map<string, HTMLInputElement>>(new Map());
const { setMessage: alert } = useAlertStore((state) => state);
const activeTabId = useTabStore((state) => state.activeTabId);
const menuList = useTabStore((state) => state.menuList);
// 각 탭별로 데이터를 관리 (key: tabKey)
const [rowDataMap, setRowDataMap] = useState<Map<string, Record<string, string | number>[]>>(new Map());
const [activeTab, setActiveTab] = useState<string>(() => {
// 초기 활성 탭을 첫 번째 tabKey로 설정
const firstTab = columnInfo[0];
@@ -391,6 +389,61 @@ const TabDataGrid = ({ columnInfo, isExcelImport = true, rows = [], showHeaderCh
colCount: currentInfo.fixedColumns,
});
}
// valueType이 설정된 컬럼에 대해 필드의 dataType을 명시적으로 설정
// autoGenerateField={true}일 때 valueType prop만으로는 필드의 dataType이 설정되지 않을 수 있음
if (el.dataProvider) {
const dataProvider = el.dataProvider;
const fieldsToSet: Array<{ fieldName: string; dataType: string }> = [];
const fieldMap = new Map<string, string>();
currentInfo.columns.forEach(col => {
if (col.valueType && col.fieldName && !fieldMap.has(col.fieldName)) {
fieldMap.set(col.fieldName, col.valueType);
fieldsToSet.push({
fieldName: col.fieldName,
dataType: col.valueType
});
}
});
// 필드가 이미 존재하는지 확인하고, valueType이 설정된 필드만 업데이트
if (fieldsToSet.length > 0) {
try {
// 기존 필드 정보 가져오기
const existingFields = (dataProvider as { getFields?: () => Array<{ fieldName: string; dataType?: string }> }).getFields?.() || [];
const existingFieldMap = new Map(existingFields.map(f => [f.fieldName, f.dataType || 'text']));
// valueType이 설정된 필드 중 dataType이 다른 필드만 업데이트
const fieldsToUpdate = fieldsToSet.filter(field => {
const existingDataType = existingFieldMap.get(field.fieldName);
return existingDataType !== field.dataType;
});
if (fieldsToUpdate.length > 0) {
// 기존 필드 정보를 유지하면서 dataType만 업데이트
// 컬럼 정의에 valueType이 있으면 그것을 우선 사용, 없으면 기존 필드의 dataType 사용
const allFields = existingFields.map(f => ({
fieldName: f.fieldName,
dataType: fieldMap.get(f.fieldName) || f.dataType || 'text'
}));
// 새로 추가할 필드가 있으면 추가
fieldsToSet.forEach(field => {
if (!existingFieldMap.has(field.fieldName)) {
allFields.push({ fieldName: field.fieldName, dataType: field.dataType });
}
});
// setFields를 호출하여 필드의 dataType 업데이트
(dataProvider as { setFields: (fields: Array<{ fieldName: string; dataType: string }>) => void })
.setFields(allFields);
}
} catch (error) {
console.warn('Failed to set field dataType:', error);
}
}
}
}, 0);
}
} else {
@@ -406,6 +459,8 @@ const TabDataGrid = ({ columnInfo, isExcelImport = true, rows = [], showHeaderCh
key={column.name}
name={column.name}
fieldName={column.fieldName}
valueType={column.valueType ? column.valueType : ValueType.TEXT}
{...(column.valueType === ValueType.NUMBER && { numberFormat: column.dataFormat ? column.dataFormat : '#,##0.00' })}
header={column.header}
editable={column.editable}
footer={column.footer ? {
apps/st/src/components/statistics/management/PrivateSewageFacilityMng.tsx
+3 -1
View File
@@ -1,3 +1,4 @@
import { useState } from "react";
import SearchForm from "@/components/module/SearchForm";
import TabDataGrid from "@/components/module/TabDataGrid";
import SubmitButton from "@/components/button/SumitButton";
@@ -9,6 +10,7 @@ import { PrivateSewageFacilityMngColumnInfoList } from "@/components/util/column
// 하수도 통계 관리 > 08. 개인하수처리시설
const PrivateSewageFacilityMng = () => {
const [rowDataMap, setRowDataMap] = useState<Map<string, Record<string, string | number>[]>>(new Map());
const submitFunc = () => {
// TODO: 제출 로직 구현
@@ -43,7 +45,7 @@ const PrivateSewageFacilityMng = () => {
<SubmitButton submitFunc={submitFunc} />
</div>
<TabDataGrid columnInfo={PrivateSewageFacilityMngColumnInfoList} />
<TabDataGrid columnInfo={PrivateSewageFacilityMngColumnInfoList} rowDataMap={rowDataMap} setRowDataMap={setRowDataMap} />
</>
);
};
apps/st/src/components/statistics/management/SewagePipeMaintainMng.tsx
+3 -1
View File
@@ -1,3 +1,4 @@
import { useState } from "react";
import SearchForm from "@/components/module/SearchForm";
import TabDataGrid from "@/components/module/TabDataGrid";
import SubmitButton from "@/components/button/SumitButton";
@@ -9,6 +10,7 @@ import { SewagePipeMaintainMngColumnInfoList } from "@/components/util/column/ma
// 하수도 통계 관리 > 03. 하수관로 유지관리
const SewagePipeMaintainMng = () => {
const [rowDataMap, setRowDataMap] = useState<Map<string, Record<string, string | number>[]>>(new Map());
const submitFunc = () => {
console.log('제출 로직 실행');
@@ -39,7 +41,7 @@ const SewagePipeMaintainMng = () => {
<SubmitButton submitFunc={submitFunc} />
</div>
<TabDataGrid columnInfo={SewagePipeMaintainMngColumnInfoList} />
<TabDataGrid columnInfo={SewagePipeMaintainMngColumnInfoList} rowDataMap={rowDataMap} setRowDataMap={setRowDataMap} />
</>
);
};
apps/st/src/components/statistics/management/SewagePipeMng.tsx
+3 -1
View File
@@ -1,3 +1,4 @@
import { useState } from "react";
import SearchForm from "@/components/module/SearchForm";
import TabDataGrid from "@/components/module/TabDataGrid";
import SubmitButton from "@/components/button/SumitButton";
@@ -17,6 +18,7 @@ import {
// 하수도 통계 관리 > 02. 하수관로
const SewagePipeMng = () => {
const [rowDataMap, setRowDataMap] = useState<Map<string, Record<string, string | number>[]>>(new Map());
// tab List
const SewagePipeMngColumnInfoList = [
@@ -59,7 +61,7 @@ const SewagePipeMng = () => {
<LastYearDataButton getLastYearDataFunc={getLastYearDataFunc} />
<SubmitExceptionButton SubmitExceptionFunc={SubmitExceptionFunc} />
</div>
<TabDataGrid columnInfo={SewagePipeMngColumnInfoList}/>
<TabDataGrid columnInfo={SewagePipeMngColumnInfoList} rowDataMap={rowDataMap} setRowDataMap={setRowDataMap} />
</>
);
};
apps/st/src/components/statistics/management/SewageReservoirPumpMng.tsx
+4 -1
View File
@@ -1,3 +1,4 @@
import { useState } from "react";
import SearchForm from "@/components/module/SearchForm";
import TabDataGrid from "@/components/module/TabDataGrid";
import SubmitButton from "@/components/button/SumitButton";
@@ -9,6 +10,8 @@ import { SewageReservoirPumpMngColumnInfoList } from "@/components/util/column/m
// 하수도 통계 관리 > 04. 하수저류 시설 및 빗물 펌프장
const SewageReservoirPumpMng = () => {
const [rowDataMap, setRowDataMap] = useState<Map<string, Record<string, string | number>[]>>(new Map());
const submitFunc = () => {
console.log('submit');
// 제출 로직
@@ -38,7 +41,7 @@ const SewageReservoirPumpMng = () => {
<SaveButton saveFunc={saveFunc} />
<SubmitButton submitFunc={submitFunc} />
</div>
<TabDataGrid columnInfo={SewageReservoirPumpMngColumnInfoList}/>
<TabDataGrid columnInfo={SewageReservoirPumpMngColumnInfoList} rowDataMap={rowDataMap} setRowDataMap={setRowDataMap} />
</>
);
};
apps/st/src/components/statistics/management/SewerageFinanceMng.tsx
+3 -1
View File
@@ -1,3 +1,4 @@
import { useState } from "react";
import SearchForm from "@/components/module/SearchForm";
import TabDataGrid from "@/components/module/TabDataGrid";
import SubmitButton from "@/components/button/SumitButton";
@@ -9,6 +10,7 @@ import { SewerageFinanceMngInfoList } from "@/components/util/column/management/
// 하수도 통계 관리 > 09. 하수도재정
const SewerageFinanceMng = () => {
const [rowDataMap, setRowDataMap] = useState<Map<string, Record<string, string | number>[]>>(new Map());
const submitFunc = () => {
// TODO: 제출 로직 구현
@@ -41,7 +43,7 @@ const SewerageFinanceMng = () => {
<SubmitButton submitFunc={submitFunc} />
</div>
<TabDataGrid columnInfo={SewerageFinanceMngInfoList} />
<TabDataGrid columnInfo={SewerageFinanceMngInfoList} rowDataMap={rowDataMap} setRowDataMap={setRowDataMap} />
</>
);
};
apps/st/src/components/statistics/review/PrivateSewageFacilityRvw.tsx
+3 -1
View File
@@ -1,3 +1,4 @@
import { useState } from "react";
import SearchForm from "@/components/module/SearchForm";
import TabDataGrid from "@/components/module/TabDataGrid";
import SaveButton from "@/components/button/SaveButton";
@@ -9,6 +10,7 @@ import { PrivateSewageFacilityInfoListRvw } from "@/components/util/column/revie
const PrivateSewageFacilityRvw = () => {
const [rowDataMap, setRowDataMap] = useState<Map<string, Record<string, string | number>[]>>(new Map());
const approveFunc = () => {
console.log('approveFunc');
@@ -41,7 +43,7 @@ const PrivateSewageFacilityRvw = () => {
<ReturnButton returnFunc={returnFunc} />
<SaveButton saveFunc={saveFunc} />
</div>
<TabDataGrid columnInfo={PrivateSewageFacilityInfoListRvw} isExcelImport={false} />
<TabDataGrid columnInfo={PrivateSewageFacilityInfoListRvw} isExcelImport={false} rowDataMap={rowDataMap} setRowDataMap={setRowDataMap} />
</>
);
};
apps/st/src/components/statistics/review/SewageExcretaRelatedRvw.tsx
+3 -2
View File
@@ -1,4 +1,4 @@
import { useState } from "react";
import SearchForm from "@/components/module/SearchForm";
import TabDataGrid from "@/components/module/TabDataGrid";
import SaveButton from "@/components/button/SaveButton";
@@ -10,6 +10,7 @@ import { SewageExcretaRelatedInfoListRvw } from "@/components/util/column/review
const SewageExcretaRelatedRvw = () => {
const [rowDataMap, setRowDataMap] = useState<Map<string, Record<string, string | number>[]>>(new Map());
const approveFunc = () => {
console.log('approveFunc');
@@ -42,7 +43,7 @@ const SewageExcretaRelatedRvw = () => {
<ReturnButton returnFunc={returnFunc} />
<SaveButton saveFunc={saveFunc} />
</div>
<TabDataGrid columnInfo={SewageExcretaRelatedInfoListRvw} isExcelImport={false} />
<TabDataGrid columnInfo={SewageExcretaRelatedInfoListRvw} isExcelImport={false} rowDataMap={rowDataMap} setRowDataMap={setRowDataMap} />
</>
);
};
apps/st/src/components/statistics/review/SewageExcretaSlurgeRvw.tsx
+3 -1
View File
@@ -1,3 +1,4 @@
import { useState } from "react";
import SearchForm from "@/components/module/SearchForm";
import TabDataGrid from "@/components/module/TabDataGrid";
import SaveButton from "@/components/button/SaveButton";
@@ -9,6 +10,7 @@ import { SewageExcretaSlurgeInfoList } from "@/components/util/column/review/Sew
const SewageExcretaSlurgeRvw = () => {
const [rowDataMap, setRowDataMap] = useState<Map<string, Record<string, string | number>[]>>(new Map());
const approveFunc = () => {
console.log('approveFunc');
@@ -41,7 +43,7 @@ const SewageExcretaSlurgeRvw = () => {
<ReturnButton returnFunc={returnFunc} />
<SaveButton saveFunc={saveFunc} />
</div>
<TabDataGrid columnInfo={SewageExcretaSlurgeInfoList} isExcelImport={false} />
<TabDataGrid columnInfo={SewageExcretaSlurgeInfoList} isExcelImport={false} rowDataMap={rowDataMap} setRowDataMap={setRowDataMap} />
</>
);
};
apps/st/src/components/statistics/review/SewagePipeMaintainRvw.tsx
+3 -1
View File
@@ -1,3 +1,4 @@
import { useState } from "react";
import SearchForm from "@/components/module/SearchForm";
import TabDataGrid from "@/components/module/TabDataGrid";
import SaveButton from "@/components/button/SaveButton";
@@ -9,6 +10,7 @@ import { SewagePipeMaintainColumnInfoListRvw } from "@/components/util/column/re
const SewagePipeMaintainRvw = () => {
const [rowDataMap, setRowDataMap] = useState<Map<string, Record<string, string | number>[]>>(new Map());
const approveFunc = () => {
console.log('approveFunc');
@@ -41,7 +43,7 @@ const SewagePipeMaintainRvw = () => {
<ReturnButton returnFunc={returnFunc} />
<SaveButton saveFunc={saveFunc} />
</div>
<TabDataGrid columnInfo={SewagePipeMaintainColumnInfoListRvw} isExcelImport={false} />
<TabDataGrid columnInfo={SewagePipeMaintainColumnInfoListRvw} isExcelImport={false} rowDataMap={rowDataMap} setRowDataMap={setRowDataMap} />
</>
);
};
apps/st/src/components/statistics/review/SewagePipeRvw.tsx
+3 -1
View File
@@ -1,3 +1,4 @@
import { useState } from "react";
import SearchForm from "@/components/module/SearchForm";
import TabDataGrid from "@/components/module/TabDataGrid";
import SaveButton from "@/components/button/SaveButton";
@@ -9,6 +10,7 @@ import { SewagePipeColumnInfoListRvw } from "@/components/util/column/review/Sew
const SewagePipeRvw = () => {
const [rowDataMap, setRowDataMap] = useState<Map<string, Record<string, string | number>[]>>(new Map());
const approveFunc = () => {
console.log('approveFunc');
@@ -41,7 +43,7 @@ const SewagePipeRvw = () => {
<ReturnButton returnFunc={returnFunc} />
<SaveButton saveFunc={saveFunc} />
</div>
<TabDataGrid columnInfo={SewagePipeColumnInfoListRvw} />
<TabDataGrid columnInfo={SewagePipeColumnInfoListRvw} rowDataMap={rowDataMap} setRowDataMap={setRowDataMap} />
</>
);
};
apps/st/src/components/statistics/review/SewageReservoirPumpRvw.tsx
+3 -1
View File
@@ -1,3 +1,4 @@
import { useState } from "react";
import SearchForm from "@/components/module/SearchForm";
import TabDataGrid from "@/components/module/TabDataGrid";
import SaveButton from "@/components/button/SaveButton";
@@ -9,6 +10,7 @@ import { SewageReservoirPumpInfoListRvw } from "@/components/util/column/review/
const SewageReservoirPumpRvw = () => {
const [rowDataMap, setRowDataMap] = useState<Map<string, Record<string, string | number>[]>>(new Map());
const approveFunc = () => {
console.log('approveFunc');
@@ -41,7 +43,7 @@ const SewageReservoirPumpRvw = () => {
<ReturnButton returnFunc={returnFunc} />
<SaveButton saveFunc={saveFunc} />
</div>
<TabDataGrid columnInfo={SewageReservoirPumpInfoListRvw} isExcelImport={false} />
<TabDataGrid columnInfo={SewageReservoirPumpInfoListRvw} isExcelImport={false} rowDataMap={rowDataMap} setRowDataMap={setRowDataMap} />
</>
);
};
apps/st/src/components/statistics/review/SewerageFinanceRvw.tsx
+3 -1
View File
@@ -1,3 +1,4 @@
import { useState } from "react";
import SearchForm from "@/components/module/SearchForm";
import TabDataGrid from "@/components/module/TabDataGrid";
import SaveButton from "@/components/button/SaveButton";
@@ -9,6 +10,7 @@ import { SewerageFinanceInfoListRvw } from "@/components/util/column/review/Sewe
const SewerageFinanceRvw = () => {
const [rowDataMap, setRowDataMap] = useState<Map<string, Record<string, string | number>[]>>(new Map());
const approveFunc = () => {
console.log('approveFunc');
@@ -41,7 +43,7 @@ const SewerageFinanceRvw = () => {
<ReturnButton returnFunc={returnFunc} />
<SaveButton saveFunc={saveFunc} />
</div>
<TabDataGrid columnInfo={SewerageFinanceInfoListRvw} isExcelImport={false} />
<TabDataGrid columnInfo={SewerageFinanceInfoListRvw} isExcelImport={false} rowDataMap={rowDataMap} setRowDataMap={setRowDataMap} />
</>
);
};
apps/st/src/components/statistics/review/SeweragePenetrationRateRvw.tsx
+4 -2
View File
@@ -1,3 +1,5 @@
import { ValueType } from "realgrid";
import SearchForm from "@/components/module/SearchForm";
import DataGrid from "@/components/module/DataGrid";
@@ -21,12 +23,12 @@ const SeweragePenetrationRateRvw = () => {
{ name: 'lgbsn', fieldName: '중권역', header: { text: '중권역' } },
{ name: 'mdmbsn', fieldName: '소권역', header: { text: '소권역' } },
{ name: 'specl_cntrpln_ar', fieldName: '특별대책지역', header: { text: '특별대책지역' } },
{ name: 'total_popl', fieldName: '총인구', header: { text: '총인구' } },
{ name: 'total_popl', fieldName: '총인구', header: { text: '총인구' }, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
{ name: 'popl_sm', fieldName: '내국인', header: { text: '내국인' } },
{ name: 'frgnr_popl_sm', fieldName: '외국인', header: { text: '외국인' } },
{ name: 'area', fieldName: '행정참고자료면적(㎢)', header: { text: '행정참고자료면적(㎢)' } },
{ name: 'popltn_sm', fieldName: '총인구(명)', header: { text: '총인구(명)' } },
{ name: 'ar_sm', fieldName: '총면적(㎢)', header: { text: '총면적(㎢)' } },
{ name: 'ar_sm', fieldName: '총면적(㎢)', header: { text: '총면적(㎢)' }, valueType: ValueType.NUMBER },
{ name: '계', fieldName: '계', header: { text: '계' } },
//공공하수처리인구
{ name: '합계', fieldName: '합계', header: { text: '합계' } },
apps/st/src/components/statistics/review/SewerageServiceLevelRvw.tsx
+3 -1
View File
@@ -1,3 +1,4 @@
import { useState } from "react";
import SearchForm from "@/components/module/SearchForm";
import TabDataGrid from "@/components/module/TabDataGrid";
import SaveButton from "@/components/button/SaveButton";
@@ -9,6 +10,7 @@ import { SewerageServiceLevelInfoListRvw } from "@/components/util/column/review
const SewerageServiceLevelRvw = () => {
const [rowDataMap, setRowDataMap] = useState<Map<string, Record<string, string | number>[]>>(new Map());
const approveFunc = () => {
console.log('approveFunc');
@@ -41,7 +43,7 @@ const SewerageServiceLevelRvw = () => {
<ReturnButton returnFunc={returnFunc} />
<SaveButton saveFunc={saveFunc} />
</div>
<TabDataGrid columnInfo={SewerageServiceLevelInfoListRvw} isExcelImport={false} />
<TabDataGrid columnInfo={SewerageServiceLevelInfoListRvw} isExcelImport={false} rowDataMap={rowDataMap} setRowDataMap={setRowDataMap} />
</>
);
};
apps/st/src/components/statistics/review/WaterReuseRvw.tsx
+3 -2
View File
@@ -1,4 +1,4 @@
import { useState } from "react";
import SearchForm from "@/components/module/SearchForm";
import TabDataGrid from "@/components/module/TabDataGrid";
import SaveButton from "@/components/button/SaveButton";
@@ -10,6 +10,7 @@ import { WaterReuseInfoList } from "@/components/util/column/review/WaterReuseCo
const WaterReuseRvw = () => {
const [rowDataMap, setRowDataMap] = useState<Map<string, Record<string, string | number>[]>>(new Map());
const approveFunc = () => {
console.log('approveFunc');
@@ -42,7 +43,7 @@ const WaterReuseRvw = () => {
<ReturnButton returnFunc={returnFunc} />
<SaveButton saveFunc={saveFunc} />
</div>
<TabDataGrid columnInfo={WaterReuseInfoList} isExcelImport={false} />
<TabDataGrid columnInfo={WaterReuseInfoList} isExcelImport={false} rowDataMap={rowDataMap} setRowDataMap={setRowDataMap} />
</>
);
};
apps/st/src/components/type/DataGrid.type.ts
+7 -2
View File
@@ -1,4 +1,5 @@
import React from "react";
import { ValueType } from "realgrid";
// RealGrid 타입 정의
export type GridView = {
@@ -30,6 +31,8 @@ export type ColumnConfig = {
header: { text: string };
editable?: boolean; // 셀 편집 가능 여부
mergeCells?: boolean; // 같은 값이 연속될 때 셀 병합 여부
valueType?: ValueType;
dataFormat?: string;
footer?: {
text?: string;
expression?: 'sum' | 'avg' | 'count' | 'max' | 'min';
@@ -72,8 +75,10 @@ export type DataGridProps = {
export type TabDataGridProps = {
columnInfo: ColumnInfoList[];
rows?: Record<string, string>[];
rows?: Record<string, string | number>[];
isExcelImport?: boolean; // 엑셀 가져오기 유무
onRowsChange?: (rows: Record<string, string>[]) => void;
onRowsChange?: (rows: Record<string, string | number>[]) => void;
showHeaderCheckbox?: boolean; // 헤더 체크박스 표시 여부 (기본값: true)
rowDataMap: Map<string, Record<string, string | number>[]>;
setRowDataMap: React.Dispatch<React.SetStateAction<Map<string, Record<string, string | number>[]>>>;
};
apps/st/src/components/util/column/management/SeweragePenetrationRateMngColumn.ts
+3 -3
View File
@@ -1,5 +1,5 @@
import { footerInt, footerDecimal1, footerDecimal3 } from "@/components/util/grid/footerSummary";
import { ValueType } from "realgrid";
/**
* 하수도 통계 관리 > 01. 하수도 보급률
* 단일 Tab
@@ -37,10 +37,10 @@ export const SeweragePenetrationRateMngColumnInfo = {
{ name: 'area', fieldName: '행정참고자료면적(㎢)', header: { text: '행정참고자료면적(㎢)' }, footer: footerDecimal3, editable: false },
// [자동계산] 총인구 (Nexacro: expr 존재) - 수정 불가
{ name: 'popltn_sm', fieldName: '총인구(명)', header: { text: '총인구(명)' }, footer: footerInt, editable: false },
{ name: 'popltn_sm', fieldName: '총인구(명)', header: { text: '총인구(명)' }, footer: footerInt, editable: false, valueType: ValueType.NUMBER, dataFormat: '#,##0' },
// [입력필드] 총면적 (Nexacro: 입력 가능) - 수정 가능
{ name: 'ar_sm', fieldName: '총면적(㎢)', header: { text: '총면적(㎢)' }, footer: footerDecimal3 },
{ name: 'ar_sm', fieldName: '총면적(㎢)', header: { text: '총면적(㎢)' }, footer: footerDecimal3, valueType: ValueType.NUMBER },
// [자동계산] 하수처리구역 내 합계 - 수정 불가
{ name: 'swge_proc_zone_inner_sm', fieldName: '합계', header: { text: '합계' }, footer: footerInt, editable: false },