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

st: refactor: grid 변경 내용 @rsone/components 모듈에 반영, 모든 컴포넌트에서 @rsone/components의 grid 컴포넌트를 import 하도록 수정, 검토 관련 컴포넌트 코드 정렬 및 불필요 공백 제거

Browse Source
This commit is contained in:
rsone001
2026-01-13 15:58:19 +09:00
parent 20cbd7ebcd
commit 8252561050
26 changed files with 315 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/st/src/components/statistics/input/SewageExcretaRelatedInp.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import { useState } from "react";
import SearchForm from "@/components/module/SearchForm";
import TabDataGrid from "@/components/module/TabDataGrid";
import { TabDataGrid } from "@rsone/components";
import SubmitButton from "@/components/button/SumitButton";
import SaveButton from "@/components/button/SaveButton";
import SubmitExceptionButton from "@/components/button/SubmitExceptionButton";
apps/st/src/components/statistics/input/SewageExcretaSlurgeInp.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import { useState } from "react";
import SearchForm from "@/components/module/SearchForm";
import TabDataGrid from "@/components/module/TabDataGrid";
import { TabDataGrid } from "@rsone/components";
import SubmitButton from "@/components/button/SumitButton";
import SaveButton from "@/components/button/SaveButton";
import SubmitExceptionButton from "@/components/button/SubmitExceptionButton";
apps/st/src/components/statistics/input/SewagePipeInp.tsx
+1 -2
View File
@@ -1,7 +1,6 @@
import { useState } from "react";
import SearchForm from "@/components/module/SearchForm";
// import { TabDataGrid } from '@rsone/components';
import TabDataGrid from "@/components/module/TabDataGrid";
import { TabDataGrid } from '@rsone/components';
import SubmitButton from "@/components/button/SumitButton";
import SaveButton from "@/components/button/SaveButton";
import LastYearDataButton from "@/components/button/LastYearDataButton";
apps/st/src/components/statistics/input/StatsInputStatusInp.tsx
+1 -1
View File
@@ -1,5 +1,5 @@
import SearchForm from "@/components/module/SearchForm";
import DataGrid from "@/components/module/DataGrid";
import { DataGrid } from "@rsone/components";
import ApproveButton from "@/components/button/ApproveButton";
import RejectButton from "@/components/button/RejectButton";
import { useState } from "react";
apps/st/src/components/statistics/management/NotEnteredStatus.tsx
+3 -3
View File
@@ -1,10 +1,12 @@
import { useState } from "react";
import { DataGrid } from "@rsone/components";
import SearchForm from "@/components/module/SearchForm";
import DataGrid from "@/components/module/DataGrid";
import type { ColumnConfig } from "@/components/type/DataGrid.type";
const NotEnteredStatus = () => {
const [rowData, setRowData] = useState<Record<string, string | number>[]>([]);
const columns: ColumnConfig[] = [
{ name: 'sido', fieldName: '시도', header: { text: '시도' }, mergeCells: true, editable: false, sortdisable: true },
{ name: 'sgg', fieldName: '시군구', header: { text: '시군구' }, mergeCells: true, editable: false, sortdisable: true },
@@ -28,8 +30,6 @@ const NotEnteredStatus = () => {
},
];
const [rowData, setRowData] = useState<Record<string, string | number>[]>([]);
return (
<>
<SearchForm userMenual={true} />
apps/st/src/components/statistics/management/StatisticsInputManagement.tsx
+3 -3
View File
@@ -1,10 +1,12 @@
import { useState } from "react";
import { DataGrid } from "@rsone/components";
import SearchForm from "@/components/module/SearchForm";
import DataGrid from "@/components/module/DataGrid";
import type { ColumnConfig } from "@/components/type/DataGrid.type";
const StatisticsInputManagement = () => {
const [rowData, setRowData] = useState<Record<string, string | number>[]>([]);
const columns: ColumnConfig[] = [
{ name: 'sido', fieldName: '시도', header: { text: '시도' }, mergeCells: true, editable: false, sortdisable: true },
{ name: 'sgg', fieldName: '시군구', header: { text: '시군구' }, mergeCells: true, editable: false, sortdisable: true },
@@ -26,8 +28,6 @@ const StatisticsInputManagement = () => {
},
];
const [rowData, setRowData] = useState<Record<string, string | number>[]>([]);
return (
<>
<SearchForm userMenual={true} sgg={false} sido={false} />
apps/st/src/components/statistics/management/StatisticsPopulationManagement.tsx
-4
View File
@@ -1,10 +1,6 @@
// import { useState } from "react";
import SearchForm from "@/components/module/SearchForm";
const StatisticsPopulationManagement = () => {
// const [rowData, setRowData] = useState<Record<string, string | number>[]>([]);
return (
<>
<SearchForm userMenual={true} sgg={false} sido={false} />
apps/st/src/components/statistics/management/StatisticsReviewHistory.tsx
+3 -3
View File
@@ -1,10 +1,12 @@
import { useState } from "react";
import { DataGrid } from "@rsone/components";
import SearchForm from "@/components/module/SearchForm";
import DataGrid from "@/components/module/DataGrid";
import type { ColumnConfig } from "@/components/type/DataGrid.type";
const StatisticsReviewHistory = () => {
const [rowData, setRowData] = useState<Record<string, string | number>[]>([]);
const columns: ColumnConfig[] = [
{ name: 'sido', fieldName: '시도', header: { text: '시도' }, mergeCells: true, editable: false, sortdisable: true },
{ name: 'sgg', fieldName: '시군구', header: { text: '시군구' }, mergeCells: true, editable: false, sortdisable: true },
@@ -26,8 +28,6 @@ const StatisticsReviewHistory = () => {
},
];
const [rowData, setRowData] = useState<Record<string, string | number>[]>([]);
return (
<>
<SearchForm userMenual={true} />
apps/st/src/components/statistics/review/ExcretaTreatmentFacilityRvw.tsx
+4 -6
View File
@@ -1,24 +1,22 @@
import { useState } from "react";
import { DataGrid } from "@rsone/components";
import SearchForm from "@/components/module/SearchForm";
import SaveButton from "@/components/button/SaveButton";
import ApproveButton from "@/components/button/ApproveButton";
import ReviewOpinionButton from "@/components/button/ReviewOpinionButton";
import ReturnButton from "@/components/button/ReturnButton";
import DataGrid from "@/components/module/DataGrid";
import { useState } from "react";
import { ExcretaTreatmentFacilityInfoList } from "@/components/util/column/review/ExcretaTreatmentFacilityColumnRvw";
const ExcretaTreatmentFacilityRvw = () => {
const [rowData, setRowData] = useState<Record<string, string | number>[]>([]);
const approveFunc = () => console.log('approveFunc');
const saveFunc = () => console.log('submit');
const reviewOpinionFunc = () => console.log('reviewOpinionFunc');
const returnFunc = () => console.log('returnFunc');
const [rowData, setRowData] = useState<Record<string, string | number>[]>([]);
return (
<>
<SearchForm userMenual={true} fctName={true} />
apps/st/src/components/statistics/review/PrivateSewageFacilityRvw.tsx
+2 -4
View File
@@ -1,6 +1,7 @@
import { useState } from "react";
import { TabDataGrid } from "@rsone/components";
import SearchForm from "@/components/module/SearchForm";
import TabDataGrid from "@/components/module/TabDataGrid";
import SaveButton from "@/components/button/SaveButton";
import ApproveButton from "@/components/button/ApproveButton";
import ReviewOpinionButton from "@/components/button/ReviewOpinionButton";
@@ -8,7 +9,6 @@ import ReturnButton from "@/components/button/ReturnButton";
import { PrivateSewageFacilityInfoListRvw } from "@/components/util/column/review/PrivateSewageFacilityColumnRvw";
const PrivateSewageFacilityRvw = () => {
const [rowDataMap, setRowDataMap] = useState<Map<string, Record<string, string | number>[]>>(new Map());
@@ -32,10 +32,8 @@ const PrivateSewageFacilityRvw = () => {
// 반려
};
return (
<>
<SearchForm userMenual={true} fctName={true} />
<div className="flex justify-end items-center gap-[0.6rem] m-[0.6rem]">
<ReviewOpinionButton reviewOpinionFunc={reviewOpinionFunc} />
apps/st/src/components/statistics/review/PublicSewageFacilityRvw.tsx
+4 -5
View File
@@ -1,15 +1,16 @@
import { useState } from "react";
import { DataGrid } from "@rsone/components";
import SearchForm from "@/components/module/SearchForm";
import SaveButton from "@/components/button/SaveButton";
import ApproveButton from "@/components/button/ApproveButton";
import ReviewOpinionButton from "@/components/button/ReviewOpinionButton";
import ReturnButton from "@/components/button/ReturnButton";
import { useState } from "react";
import DataGrid from "@/components/module/DataGrid";
import { PublicSewageFacilityInfoList } from "@/components/util/column/review/PublicSewageFacilityColumnRvw";
const PublicSewageFacilityRvw = () => {
const [rowData, setRowData] = useState<Record<string, string | number>[]>([]);
const approveFunc = () => {
console.log('approveFunc');
@@ -27,8 +28,6 @@ const PublicSewageFacilityRvw = () => {
console.log('returnFunc');
};
const [rowData, setRowData] = useState<Record<string, string | number>[]>([]);
return (
<>
<SearchForm userMenual={true} fctName={true} />
apps/st/src/components/statistics/review/PumpingStationRvw.tsx
+4 -5
View File
@@ -1,23 +1,22 @@
import { useState } from "react";
import { DataGrid } from "@rsone/components";
import SearchForm from "@/components/module/SearchForm";
import DataGrid from "@/components/module/DataGrid";
import SaveButton from "@/components/button/SaveButton";
import ApproveButton from "@/components/button/ApproveButton";
import ReviewOpinionButton from "@/components/button/ReviewOpinionButton";
import ReturnButton from "@/components/button/ReturnButton";
import { useState } from "react";
import { PumpingStationInfoList } from "@/components/util/column/review/PumpingStationColumnRvw";
const PumpingStationRvw = () => {
const [rowData, setRowData] = useState<Record<string, string | number>[]>([]);
const approveFunc = () => { console.log('approveFunc'); };
const saveFunc = () => { console.log('submit'); };
const reviewOpinionFunc = () => { console.log('reviewOpinionFunc'); };
const returnFunc = () => { console.log('returnFunc'); };
const [rowData, setRowData] = useState<Record<string, string | number>[]>([]);
return (
<>
<SearchForm userMenual={true} fctName={true} />
apps/st/src/components/statistics/review/SewageExcretaRelatedRvw.tsx
+2 -4
View File
@@ -1,6 +1,7 @@
import { useState } from "react";
import { TabDataGrid } from "@rsone/components";
import SearchForm from "@/components/module/SearchForm";
import TabDataGrid from "@/components/module/TabDataGrid";
import SaveButton from "@/components/button/SaveButton";
import ApproveButton from "@/components/button/ApproveButton";
import ReviewOpinionButton from "@/components/button/ReviewOpinionButton";
@@ -8,7 +9,6 @@ import ReturnButton from "@/components/button/ReturnButton";
import { SewageExcretaRelatedInfoListRvw } from "@/components/util/column/review/SewageExcretaRelatedColumnRvw";
const SewageExcretaRelatedRvw = () => {
const [rowDataMap, setRowDataMap] = useState<Map<string, Record<string, string | number>[]>>(new Map());
@@ -32,10 +32,8 @@ const SewageExcretaRelatedRvw = () => {
// 반려
};
return (
<>
<SearchForm userMenual={true} fctName={true} />
<div className="flex justify-end items-center gap-[0.6rem] m-[0.6rem]">
<ReviewOpinionButton reviewOpinionFunc={reviewOpinionFunc} />
apps/st/src/components/statistics/review/SewageExcretaSlurgeRvw.tsx
+2 -4
View File
@@ -1,6 +1,7 @@
import { useState } from "react";
import { TabDataGrid } from "@rsone/components";
import SearchForm from "@/components/module/SearchForm";
import TabDataGrid from "@/components/module/TabDataGrid";
import SaveButton from "@/components/button/SaveButton";
import ApproveButton from "@/components/button/ApproveButton";
import ReviewOpinionButton from "@/components/button/ReviewOpinionButton";
@@ -8,7 +9,6 @@ import ReturnButton from "@/components/button/ReturnButton";
import { SewageExcretaSludgeInfoListRvw } from "@/components/util/column/review/SewageExcretaSlurgeColumnRvw";
const SewageExcretaSlurgeRvw = () => {
const [rowDataMap, setRowDataMap] = useState<Map<string, Record<string, string | number>[]>>(new Map());
@@ -32,10 +32,8 @@ const SewageExcretaSlurgeRvw = () => {
// 반려
};
return (
<>
<SearchForm userMenual={true} fctName={true} />
<div className="flex justify-end items-center gap-[0.6rem] m-[0.6rem]">
<ReviewOpinionButton reviewOpinionFunc={reviewOpinionFunc} />
apps/st/src/components/statistics/review/SewagePipeMaintainRvw.tsx
+2 -4
View File
@@ -1,6 +1,7 @@
import { useState } from "react";
import { TabDataGrid } from "@rsone/components";
import SearchForm from "@/components/module/SearchForm";
import TabDataGrid from "@/components/module/TabDataGrid";
import SaveButton from "@/components/button/SaveButton";
import ApproveButton from "@/components/button/ApproveButton";
import ReviewOpinionButton from "@/components/button/ReviewOpinionButton";
@@ -8,7 +9,6 @@ import ReturnButton from "@/components/button/ReturnButton";
import { SewagePipeMaintainColumnInfoList } from "@/components/util/column/review/SewagePipeMaintainColumnRvw";
const SewagePipeMaintainRvw = () => {
const [rowDataMap, setRowDataMap] = useState<Map<string, Record<string, string | number>[]>>(new Map());
@@ -32,10 +32,8 @@ const SewagePipeMaintainRvw = () => {
// 반려
};
return (
<>
<SearchForm userMenual={true} fctName={true} />
<div className="flex justify-end items-center gap-[0.6rem] m-[0.6rem]">
<ReviewOpinionButton reviewOpinionFunc={reviewOpinionFunc} />
apps/st/src/components/statistics/review/SewagePipeRvw.tsx
+2 -4
View File
@@ -1,6 +1,7 @@
import { useState } from "react";
import { TabDataGrid } from "@rsone/components";
import SearchForm from "@/components/module/SearchForm";
import TabDataGrid from "@/components/module/TabDataGrid";
import SaveButton from "@/components/button/SaveButton";
import ApproveButton from "@/components/button/ApproveButton";
import ReviewOpinionButton from "@/components/button/ReviewOpinionButton";
@@ -8,7 +9,6 @@ import ReturnButton from "@/components/button/ReturnButton";
import { SewagePipeColumnInfoListRvw } from "@/components/util/column/review/SewagePipeColumnRvw";
const SewagePipeRvw = () => {
const [rowDataMap, setRowDataMap] = useState<Map<string, Record<string, string | number>[]>>(new Map());
@@ -32,10 +32,8 @@ const SewagePipeRvw = () => {
// 반려
};
return (
<>
<SearchForm userMenual={true} fctName={true} />
<div className="flex justify-end items-center gap-[0.6rem] m-[0.6rem]">
<ReviewOpinionButton reviewOpinionFunc={reviewOpinionFunc} />
apps/st/src/components/statistics/review/SewageReservoirPumpRvw.tsx
+2 -4
View File
@@ -1,6 +1,7 @@
import { useState } from "react";
import { TabDataGrid } from "@rsone/components";
import SearchForm from "@/components/module/SearchForm";
import TabDataGrid from "@/components/module/TabDataGrid";
import SaveButton from "@/components/button/SaveButton";
import ApproveButton from "@/components/button/ApproveButton";
import ReviewOpinionButton from "@/components/button/ReviewOpinionButton";
@@ -8,7 +9,6 @@ import ReturnButton from "@/components/button/ReturnButton";
import { SewageReservoirPumpInfoListRvw } from "@/components/util/column/review/SewageReservoirPumpColumnRvw";
const SewageReservoirPumpRvw = () => {
const [rowDataMap, setRowDataMap] = useState<Map<string, Record<string, string | number>[]>>(new Map());
@@ -32,10 +32,8 @@ const SewageReservoirPumpRvw = () => {
// 반려
};
return (
<>
<SearchForm userMenual={true} fctName={true} />
<div className="flex justify-end items-center gap-[0.6rem] m-[0.6rem]">
<ReviewOpinionButton reviewOpinionFunc={reviewOpinionFunc} />
apps/st/src/components/statistics/review/SewerageFinanceRvw.tsx
+2 -4
View File
@@ -1,6 +1,7 @@
import { useState } from "react";
import { TabDataGrid } from "@rsone/components";
import SearchForm from "@/components/module/SearchForm";
import TabDataGrid from "@/components/module/TabDataGrid";
import SaveButton from "@/components/button/SaveButton";
import ApproveButton from "@/components/button/ApproveButton";
import ReviewOpinionButton from "@/components/button/ReviewOpinionButton";
@@ -8,7 +9,6 @@ import ReturnButton from "@/components/button/ReturnButton";
import { SewerageFinanceInfoListRvw } from "@/components/util/column/review/SewerageFinanceColumnRvw";
const SewerageFinanceRvw = () => {
const [rowDataMap, setRowDataMap] = useState<Map<string, Record<string, string | number>[]>>(new Map());
@@ -32,10 +32,8 @@ const SewerageFinanceRvw = () => {
// 반려
};
return (
<>
<SearchForm userMenual={true} fctName={true} />
<div className="flex justify-end items-center gap-[0.6rem] m-[0.6rem]">
<ReviewOpinionButton reviewOpinionFunc={reviewOpinionFunc} />
apps/st/src/components/statistics/review/SeweragePenetrationRateRvw.tsx
+3 -5
View File
@@ -1,5 +1,6 @@
import { DataGrid } from "@rsone/components";
import { useState } from "react";
import { DataGrid } from "@rsone/components";
import SearchForm from "@/components/module/SearchForm";
import SaveButton from "@/components/button/SaveButton";
import ApproveButton from "@/components/button/ApproveButton";
@@ -8,9 +9,8 @@ import ReturnButton from "@/components/button/ReturnButton";
import { SeweragePenetrationRateInfoList } from "@/components/util/column/review/SeweragePenetrationRateColumnRvw";
import { useState } from "react";
const SeweragePenetrationRateRvw = () => {
const [rowData, setRowData] = useState<Record<string, string | number>[]>([]);
const approveFunc = () => {
console.log('approveFunc');
@@ -32,8 +32,6 @@ const SeweragePenetrationRateRvw = () => {
// 반려
};
const [rowData, setRowData] = useState<Record<string, string | number>[]>([]);
return (
<>
<SearchForm userMenual={true} />
apps/st/src/components/statistics/review/SewerageServiceLevelRvw.tsx
+2 -4
View File
@@ -1,6 +1,7 @@
import { useState } from "react";
import { TabDataGrid } from "@rsone/components";
import SearchForm from "@/components/module/SearchForm";
import TabDataGrid from "@/components/module/TabDataGrid";
import SaveButton from "@/components/button/SaveButton";
import ApproveButton from "@/components/button/ApproveButton";
import ReviewOpinionButton from "@/components/button/ReviewOpinionButton";
@@ -8,7 +9,6 @@ import ReturnButton from "@/components/button/ReturnButton";
import { SewerageServiceLevelInfoListRvw } from "@/components/util/column/review/SewerageServiceLevelColumnRvw";
const SewerageServiceLevelRvw = () => {
const [rowDataMap, setRowDataMap] = useState<Map<string, Record<string, string | number>[]>>(new Map());
@@ -32,10 +32,8 @@ const SewerageServiceLevelRvw = () => {
// 반려
};
return (
<>
<SearchForm userMenual={true} fctName={true} />
<div className="flex justify-end items-center gap-[0.6rem] m-[0.6rem]">
<ReviewOpinionButton reviewOpinionFunc={reviewOpinionFunc} />
apps/st/src/components/statistics/review/StatsInputStatusRvw.tsx
+4 -4
View File
@@ -1,14 +1,16 @@
import { useState } from "react";
import { DataGrid } from "@rsone/components";
import SearchForm from "@/components/module/SearchForm";
import DataGrid from "@/components/module/DataGrid";
import SaveButton from "@/components/button/SaveButton";
import ApproveButton from "@/components/button/ApproveButton";
import ReviewOpinionButton from "@/components/button/ReviewOpinionButton";
import ReturnButton from "@/components/button/ReturnButton";
import { useState } from "react";
import { StatsInputStatusInfoList } from "@/components/util/column/review/StatsInputStatusColumnRvw";
const StatsInputStatusRvw = () => {
const [rowData, setRowData] = useState<Record<string, string | number>[]>([]);
const approveFunc = () => {
console.log('approveFunc');
@@ -26,8 +28,6 @@ const StatsInputStatusRvw = () => {
console.log('returnFunc');
};
const [rowData, setRowData] = useState<Record<string, string | number>[]>([]);
return (
<>
<SearchForm userMenual={true} />
apps/st/src/components/statistics/review/WaterReuseRvw.tsx
+2 -4
View File
@@ -1,6 +1,7 @@
import { useState } from "react";
import { TabDataGrid } from "@rsone/components";
import SearchForm from "@/components/module/SearchForm";
import TabDataGrid from "@/components/module/TabDataGrid";
import SaveButton from "@/components/button/SaveButton";
import ApproveButton from "@/components/button/ApproveButton";
import ReviewOpinionButton from "@/components/button/ReviewOpinionButton";
@@ -8,7 +9,6 @@ import ReturnButton from "@/components/button/ReturnButton";
import { WaterReuseInfoList } from "@/components/util/column/review/WaterReuseColumnRvw";
const WaterReuseRvw = () => {
const [rowDataMap, setRowDataMap] = useState<Map<string, Record<string, string | number>[]>>(new Map());
@@ -32,10 +32,8 @@ const WaterReuseRvw = () => {
// 반려
};
return (
<>
<SearchForm userMenual={true} fctName={true} />
<div className="flex justify-end items-center gap-[0.6rem] m-[0.6rem]">
<ReviewOpinionButton reviewOpinionFunc={reviewOpinionFunc} />
packages/rsone/components/grid/CompactDataGrid.tsx
+154
View File
@@ -0,0 +1,154 @@
import { useRef, useEffect } from "react"
import { ValueType } from "realgrid"
import RealGrid, { GridFitStyle } from "realgrid"
import { RealGridReact, RGDataColumn } from "realgrid-react"
import type { DataGridProps } from "../type/DataGrid.type"
// RealGrid 타입 확장
declare module "realgrid" {
interface GridView {
setOptions(options: {
footer?: { visible?: boolean };
summaryMode?: 'aggregate' | 'statistical' | 'none';
checkBar?: { visible?: boolean };
}): void;
}
}
RealGrid.setLicenseKey(process.env.NEXT_PUBLIC_ST_REALGRID_KEY || '');
const CompactDataGrid = ({ columnInfo, fixedColumns, showHeaderCheckbox = false, rowData, setRowData }: DataGridProps) => {
const { columns, columnLayout } = columnInfo;
const gridRef = useRef<RealGridReact>(null);
useEffect(() => {
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.setDisplayOptions({
fitStyle: GridFitStyle.EVEN
});
gridView.header.height = 60;
// 헤더 체크박스 표시 여부 설정
gridView.setOptions({
checkBar: { visible: showHeaderCheckbox },
});
// footer가 있는 컬럼이 있으면 footer 높이 설정
const hasFooter = columns.some(col => col.footer);
if (hasFooter) {
gridView.footer.height = 40;
}
// 고정 컬럼 설정
if (fixedColumns !== undefined && fixedColumns > 0) {
gridView.setFixedOptions({
colCount: fixedColumns,
});
}
gridView.setOptions({
summaryMode: "aggregate"
});
// footer의 valueCallback 설정
columns.forEach(col => {
if (col.footer && col.footer.valueCallback) {
const column = gridView.columnByName(col.name);
if (column && column.footer) {
(column.footer as { valueCallback?: typeof col.footer.valueCallback }).valueCallback = col.footer.valueCallback;
}
}
});
}, [columns, columnLayout, fixedColumns, rowData, showHeaderCheckbox]);
return (
<div className="flex flex-col gap-[0.6rem] mx-[0.6rem] w-1/2">
<div className="h-[65vh]">
<RealGridReact
ref={gridRef}
autoGenerateField={true}
layout={columnLayout}
rows={rowData}
>
{columns.map((column) => (
<RGDataColumn
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 ? {
text: column.footer.text,
expression: column.footer.expression,
numberFormat: column.footer.numberFormat,
} : undefined}
mergeRule={column.mergeCells ? { criteria: 'value' } : undefined}
sortable={!column.sortdisable}
/>
))}
</RealGridReact>
</div>
</div>
);
};
export default CompactDataGrid;
packages/rsone/components/grid/SplitDataGrid.tsx
+35
View File
@@ -0,0 +1,35 @@
import CompactDataGrid from "./CompactDataGrid";
import type { SplitDataGridProps } from "../type/DataGrid.type";
const SplitDataGrid = ({
leftColumnInfo,
rightColumnInfo,
leftFixedColumns,
rightFixedColumns,
showHeaderCheckbox = false,
leftRowData,
rightRowData,
setLeftRowData,
setRightRowData,
}: SplitDataGridProps) => {
return (
<div className="flex gap-[0.6rem] mx-[0.6rem]">
<CompactDataGrid
columnInfo={leftColumnInfo}
fixedColumns={leftFixedColumns}
showHeaderCheckbox={showHeaderCheckbox}
rowData={leftRowData}
setRowData={setLeftRowData}
/>
<CompactDataGrid
columnInfo={rightColumnInfo}
fixedColumns={rightFixedColumns}
showHeaderCheckbox={showHeaderCheckbox}
rowData={rightRowData}
setRowData={setRightRowData}
/>
</div>
);
};
export default SplitDataGrid;
packages/rsone/components/grid/TabDataGrid.tsx
+58 -2
View File
@@ -3,7 +3,7 @@ import { ValueType } from "realgrid"
import RealGrid, { GridFitStyle } from "realgrid"
import { RealGridReact, RGDataColumn } from "realgrid-react"
import type { TabDataGridProps } from "../type/DataGrid.type"
import type { TabDataGridProps, ColumnInfo } from "../type/DataGrid.type"
import JSZip from "jszip"
import * as XLSX from "xlsx"
import { useAlertStore } from "../store/alert-store";
@@ -11,6 +11,7 @@ import { useTabStore } from "../store/tab-store";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@common/components";
import { Button } from "@common/components";
import SplitDataGrid from "./SplitDataGrid"
// RealGrid 타입 확장
declare module "realgrid" {
@@ -281,6 +282,61 @@ const TabDataGrid = ({ columnInfo, isExcelImport = true, isExcelExport = true, r
{columnInfo.map((info) => {
const tabKey = info.tabKey;
// isSplitGrid가 true이고 left, right가 있으면 SplitDataGrid 사용
if (info.isSplitGrid && info.left && info.right) {
const leftRowData = rowDataMap.get(info.left.tabKey || `${tabKey}_left`) || [];
const rightRowData = rowDataMap.get(info.right.tabKey || `${tabKey}_right`) || [];
// ColumnInfoList를 ColumnInfo로 변환
const leftColumnInfo: ColumnInfo = {
columns: info.left.columns || [],
columnLayout: info.left.columnLayout || []
};
const rightColumnInfo: ColumnInfo = {
columns: info.right.columns || [],
columnLayout: info.right.columnLayout || []
};
return (
<TabsContent key={tabKey} value={tabKey}>
<SplitDataGrid
leftColumnInfo={leftColumnInfo}
rightColumnInfo={rightColumnInfo}
leftFixedColumns={info.left.fixedColumns}
rightFixedColumns={info.right.fixedColumns}
showHeaderCheckbox={showHeaderCheckbox}
leftRowData={leftRowData}
rightRowData={rightRowData}
setLeftRowData={(updater) => {
setRowDataMap(prev => {
const newMap = new Map(prev);
const leftTabKey = info.left?.tabKey || `${tabKey}_left`;
const currentData = newMap.get(leftTabKey) || [];
const newData = typeof updater === 'function' ? updater(currentData) : updater;
newMap.set(leftTabKey, newData);
return newMap;
});
}}
setRightRowData={(updater) => {
setRowDataMap(prev => {
const newMap = new Map(prev);
const rightTabKey = info.right?.tabKey || `${tabKey}_right`;
const currentData = newMap.get(rightTabKey) || [];
const newData = typeof updater === 'function' ? updater(currentData) : updater;
newMap.set(rightTabKey, newData);
return newMap;
});
}}
/>
</TabsContent>
);
}
// 일반 그리드 사용
if (!info.columns || !info.columnLayout) {
return null;
}
const { columns, columnLayout } = info;
const currentRowData = rowDataMap.get(tabKey) || [];
@@ -334,7 +390,7 @@ const TabDataGrid = ({ columnInfo, isExcelImport = true, isExcelExport = true, r
if (!gridView) return;
const currentInfo = columnInfo.find(info => info.tabKey === tabKey);
if (!currentInfo) return;
if (!currentInfo || !currentInfo.columns) return;
gridView.setDisplayOptions({
fitStyle: GridFitStyle.EVEN
packages/rsone/components/type/DataGrid.type.ts
+18 -2
View File
@@ -56,11 +56,14 @@ export type ColumnInfo = {
export type ColumnInfoList = {
tabKey: string; // 탭을 식별하는 고유 키 (필수), server(api)에 전송할 변수 값
columns: ColumnConfig[];
columnLayout: ColumnLayoutItem[];
columns?: ColumnConfig[]; // 일반 그리드용 (isSplitGrid가 false일 때)
columnLayout?: ColumnLayoutItem[]; // 일반 그리드용 (isSplitGrid가 false일 때)
rowStartNum?: number;
fixedColumns?: number;
tabLabel?: string; // 탭에 표시될 레이블
isSplitGrid?: boolean; // 5:5 분리형 그리드 유무
left?: ColumnInfoList; // SplitDataGrid용 왼쪽 그리드 정보
right?: ColumnInfoList; // SplitDataGrid용 오른쪽 그리드 정보
}
export type DataGridProps = {
@@ -84,4 +87,17 @@ export type TabDataGridProps = {
showHeaderCheckbox?: boolean; // 헤더 체크박스 표시 여부 (기본값: true)
rowDataMap: Map<string, Record<string, string | number>[]>;
setRowDataMap: React.Dispatch<React.SetStateAction<Map<string, Record<string, string | number>[]>>>;
isSplitGrid?: boolean; // 5:5 분리형 그리드 유무
};
export type SplitDataGridProps = {
leftColumnInfo: ColumnInfo;
rightColumnInfo: ColumnInfo;
leftFixedColumns?: number;
rightFixedColumns?: number;
showHeaderCheckbox?: boolean;
leftRowData: Record<string, string | number>[];
rightRowData: Record<string, string | number>[];
setLeftRowData: React.Dispatch<React.SetStateAction<Record<string, string | number>[]>>;
setRightRowData: React.Dispatch<React.SetStateAction<Record<string, string | number>[]>>;
};