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

st: feat:

Browse Source 
- compact grid(1/2 넓이) & split grid(1/2 넓이 2개) 컴포넌트 추가
- 시설별 설치 현황 관리 버튼 추가
- 통계입력현황(검토) 컴포넌트 & 컬럼 파일 오타 수정
This commit is contained in:
rsone001
2026-01-13 11:46:28 +09:00
parent 2cfcddc365
commit 71e412d030
7 changed files with 98 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/st/src/components/button/InstallationStatusButton.tsx
+16
View File
@@ -0,0 +1,16 @@
import { Button } from "@common/components";
interface InstallationStatusButtonProps {
installationStatusFunc: () => void;
}
const InstallationStatusButton = ({ installationStatusFunc }: InstallationStatusButtonProps) => {
return (
<Button className="h-[3.2rem] w-[176px]" color="lightGray" onClick={installationStatusFunc}>
<i className="diveicon di-server-line"></i>
<span>시설별 설치 현황관리</span>
</Button>
);
};
export default InstallationStatusButton;
apps/st/src/components/module/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 "@/shared/lib";
@@ -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
apps/st/src/components/statistics/input/SewagePipeInp.tsx
+4 -9
View File
@@ -1,21 +1,18 @@
import { useState } from "react";
import SearchForm from "@/components/module/SearchForm";
import { TabDataGrid } from '@rsone/components';
// import { TabDataGrid } from '@rsone/components';
import TabDataGrid from "@/components/module/TabDataGrid";
import SubmitButton from "@/components/button/SumitButton";
import SaveButton from "@/components/button/SaveButton";
import LastYearDataButton from "@/components/button/LastYearDataButton";
import SubmitExceptionButton from "@/components/button/SubmitExceptionButton";
import OperateDateButton from "@/components/button/OperateDataButton";
import { RegionalFacilityStatusInpColumn } from "@/components/util/column/input/sewagePipe/RegionalFacilityStatusInpColumn";
import { FacilityInstallStatusInpColumn } from "@/components/util/column/input/sewagePipe/FacilityInstallStatusInpColumn";
import { PipeTypeStatusInpColumn } from "@/components/util/column/input/sewagePipe/PipeTypeStatusInpColumn";
import { PipeDiameterStatusInpColumn } from "@/components/util/column/input/sewagePipe/PipeDiameterStatusInpColumn";
import { ManholeStatusInpColumn } from "@/components/util/column/input/sewagePipe/ManholeStatusInpColumn";
import {
AdminAreaConnectionInpColumn,
TreatmentPlantConnectionInpColumn
} from "@/components/util/column/input/sewagePipe/ConnectionStatusInpColumn";
import { ConnectionStatusInpColumn } from "@/components/util/column/input/sewagePipe/ConnectionStatusInpColumn";
// 하수도 통계 관리 > 02. 하수관로
const SewagePipeInp = () => {
@@ -27,9 +24,7 @@ const SewagePipeInp = () => {
PipeTypeStatusInpColumn,
PipeDiameterStatusInpColumn,
ManholeStatusInpColumn,
// 일단 각 tab으로 구현
AdminAreaConnectionInpColumn,
TreatmentPlantConnectionInpColumn
ConnectionStatusInpColumn,
];
const SubmitExceptionFunc = () => {
apps/st/src/components/statistics/review/StatsInputSatusRvw.tsx → apps/st/src/components/statistics/review/StatsInputStatusRvw.tsx
+4 -4
View File
@@ -6,9 +6,9 @@ import ReviewOpinionButton from "@/components/button/ReviewOpinionButton";
import ReturnButton from "@/components/button/ReturnButton";
import { useState } from "react";
import { StatsInputSatusInfoList } from "@/components/util/column/review/StatsInputSatusColumnRvw";
import { StatsInputStatusInfoList } from "@/components/util/column/review/StatsInputStatusColumnRvw";
const StatsInputSatusRvw = () => {
const StatsInputStatusRvw = () => {
const approveFunc = () => {
console.log('approveFunc');
@@ -37,9 +37,9 @@ const StatsInputSatusRvw = () => {
<ReturnButton returnFunc={returnFunc} />
<SaveButton saveFunc={saveFunc} />
</div>
<DataGrid columnInfo={StatsInputSatusInfoList} isExcelImport={false} rowStartNum={2} fixedColumns={2} rowData={rowData} setRowData={setRowData} />
<DataGrid columnInfo={StatsInputStatusInfoList} isExcelImport={false} rowStartNum={2} fixedColumns={2} rowData={rowData} setRowData={setRowData} />
</>
);
}
export default StatsInputSatusRvw;
export default StatsInputStatusRvw;
apps/st/src/components/type/DataGrid.type.ts
+6 -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,6 +87,7 @@ 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 = {
apps/st/src/components/util/column/input/sewagePipe/ConnectionStatusInpColumn.ts
+9 -1
View File
@@ -30,7 +30,7 @@ export const AdminAreaConnectionInpColumn = {
};
// Tab 6-2: 하수처리장별 연결 현황 (왼쪽 그리드)
export const TreatmentPlantConnectionInpColumn = {
export const TreatPlantConnectionInpColumn = {
columns: [
// 하수처리장 정보
{ name: 'bscFctNm', fieldName: '하수처리장명', header: { text: '하수처리장명' } },
@@ -52,4 +52,12 @@ export const TreatmentPlantConnectionInpColumn = {
fixedColumns: 1,
tabKey: 'treatmentPlantConnectionInp',
tabLabel: '하수처리장별 연결 현황'
};
export const ConnectionStatusInpColumn = {
tabKey: 'treatmentPlantConnectionInp',
tabLabel: '시설별 현황 관리',
isSplitGrid: true,
left: AdminAreaConnectionInpColumn,
right: TreatPlantConnectionInpColumn,
};
apps/st/src/components/util/column/review/StatsInputSatusColumnRvw.ts → apps/st/src/components/util/column/review/StatsInputStatusColumnRvw.ts
+1 -1
View File
@@ -34,7 +34,7 @@ const rawStatsInputStatusList = {
]
};
export const StatsInputSatusInfoList = {
export const StatsInputStatusInfoList = {
...rawStatsInputStatusList,
columns: rawStatsInputStatusList.columns.map(col => ({
...col,