st: fix: 하수도보급률 저장, 일반 검증 결과 체크

apps/st/src/components/css/DataGrid.css

@@ -0,0 +1 @@
+

apps/st/src/components/module/DataGrid.tsx

@@ -1,9 +1,9 @@
-import { useRef, useEffect } from "react";
+import { useRef, useEffect, useLayoutEffect } from "react";
 import { ValueType } from "realgrid";
 
 import RealGrid, { GridFitStyle, type DisplayOptions } from "realgrid";
 import { RealGridReact, RGDataColumn } from "realgrid-react";
-import type { DataGridProps, RealGridColumnInfo, GridViewWithSetColumns, FooterItemWithCallback, ColumnLayoutItem } from "../type/DataGrid.type";
+import type { DataGridProps, RealGridColumnInfo, GridViewWithSetColumns, FooterItemWithCallback, ColumnLayoutItem, CellStyleCallback } from "../type/DataGrid.type";
 import { getComputedValueCallback } from "@/components/util/grid/computedFieldCallbacks";
 import JSZip from "jszip";
 import * as XLSX from "xlsx";
@@ -289,12 +289,33 @@ function buildFieldsFromColumns(columns: { fieldName: string; valueType?: ValueT
     });
 }
 
-const DataGrid = ({ columnInfo, rowStartNum, isExcelImport = true, isExcelExport = true, fixedColumns, showHeaderCheckbox = false, rowData, setRowData, getGridDataRef }: DataGridProps) => {
+const DataGrid = ({
+    columnInfo,
+    rowStartNum,
+    isExcelImport = true,
+    isExcelExport = true,
+    fixedColumns,
+    showHeaderCheckbox = false,
+    rowData,
+    setRowData,
+    getGridDataRef,
+    cellStyleCallback,
+}: DataGridProps) => {
     const { columns, columnLayout } = columnInfo;
     const gridRef = useRef<RealGridReact>(null);
     const fileInputRef = useRef<HTMLInputElement>(null);
     const sortDirRef = useRef<Record<string, "asc" | "desc" | "none">>({});
     const originalRowsRef = useRef<Record<string, Record<string, string | number>[]>>({});
+    const rowDataRef = useRef<Record<string, string | number>[]>(rowData);
+    const cellStyleCallbackRef = useRef<CellStyleCallback | undefined>(cellStyleCallback);
+    rowDataRef.current = rowData;
+    cellStyleCallbackRef.current = cellStyleCallback;
+
+    useLayoutEffect(() => {
+        if (!cellStyleCallback || !gridRef.current?.gridView) return;
+        gridRef.current.gridView.refresh();
+    }, [cellStyleCallback, rowData]);
+
     const { setMessage: alert } = useAlertStore((state) => state);
     const activeTabId = useTabStore((state) => state.activeTabId);
     const menuList = useTabStore((state) => state.menuList);
@@ -801,6 +822,7 @@ const DataGrid = ({ columnInfo, rowStartNum, isExcelImport = true, isExcelExport
                         layout={columnLayout}
                         rows={rowData}
                         onInitialized={(grid) => {
+                            if (!grid) return;
                             (grid as { onSorting?: (g: unknown, f: unknown[], d: unknown[]) => boolean }).onSorting = createOnSortingHandler(columns, setRowData, sortDirRef, originalRowsRef);
                             const dataProvider = gridRef.current?.dataProvider as unknown as
                                 | { setFields?(f: unknown[]): void; setRows?(r: Record<string, string | number>[]): void; getJsonRow?(r: number): Record<string, unknown> }
@@ -811,32 +833,61 @@ const DataGrid = ({ columnInfo, rowStartNum, isExcelImport = true, isExcelExport
                             if (dataProvider?.setRows && rowData?.length) {
                                 dataProvider.setRows(rowData);
                             }
+                            if (!cellStyleCallbackRef.current) return;
+                            const gridView = gridRef.current?.gridView ?? grid;
+                            if (!gridView?.columnByName) return;
+                            setTimeout(() => {
+                                const gv = gridRef.current?.gridView;
+                                if (!gv?.columnByName) return;
+                                columns.forEach((column) => {
+                                    const baseStyleName = column.styleName ?? (column.editable === false ? 'rg-cell-readonly' : undefined);
+                                    const gridCol = gv.columnByName(column.name) as { styleCallback?: (g: unknown, dataCell: { itemIndex?: number; index?: { itemIndex?: number }; dataField?: string; fieldName?: string }) => string } | null;
+                                    if (gridCol) {
+                                        gridCol.styleCallback = (_g, dataCell) => {
+                                            const itemIndex = dataCell?.index?.itemIndex ?? dataCell?.itemIndex ?? -1;
+                                            const fieldName = dataCell?.dataField ?? dataCell?.fieldName ?? column.fieldName;
+                                            const data = rowDataRef.current;
+                                            if (itemIndex < 0 || itemIndex >= data.length) return baseStyleName ?? '';
+                                            const row = data[itemIndex] as Record<string, string | number>;
+                                            const extra = cellStyleCallbackRef.current?.({ rowIndex: itemIndex, fieldName, row });
+                                            if (!extra) return baseStyleName ?? '';
+                                            return baseStyleName ? `${extra} ${baseStyleName}` : extra;
+                                        };
+                                    }
+                                });
+                                gv.refresh();
+                            }, 0);
                         }}
                     >
-                    {columns.map((column) => (
+                    {columns.map((column) => {
-                        <RGDataColumn
+                        const baseStyleName =
-                            key={column.name}
+                            column.styleName != null
-                            name={column.name}
+                                ? column.styleName
-                            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}
-                            {...(column.styleName != null
-                                ? { styleName: column.styleName }
                                 : column.editable === false
-                                    ? { styleName: 'rg-cell-readonly' as const }
+                                    ? ('rg-cell-readonly' as const)
-                                    : {})}
+                                    : undefined;
-                            {...(column.visible === false && { visible: false })}
+
-                            footer={column.footer && !Array.isArray(column.footer) ? {
+                        return (
-                                text: column.footer.text,
+                            <RGDataColumn
-                                expression: column.footer.expression,
+                                key={column.name}
-                                numberFormat: column.footer.numberFormat,
+                                name={column.name}
-                            } : undefined}
+                                fieldName={column.fieldName}
-                            mergeRule={column.mergeCells ? { criteria: 'value' } : undefined}
+                                valueType={column.valueType ? column.valueType : ValueType.TEXT}
-                            sortable={!column.sortdisable}
+                                {...(column.valueType === ValueType.NUMBER && { numberFormat: column.dataFormat ? column.dataFormat : '#,##0.000' })}
-                        />
+                                header={column.header}
-                    ))}
+                                editable={column.editable}
+                                {...(baseStyleName != null && { styleName: baseStyleName })}
+                                {...(column.visible === false && { visible: false })}
+                                footer={column.footer && !Array.isArray(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>

apps/st/src/components/statistics/input/SeweragePenetrationRateInp.tsx

@@ -17,6 +17,8 @@ import type {
     SewerageSupplyRateItem,
     SewerageSupplyRateRequestParams,
     SewerageSupplyRateSaveItem,
+    SewerageSupplyRateVerificationResult,
+    SewerageSupplyRateSaveRequest
 } from "@/entities/statistics/model/statistics-input-interface";
 import { SeweragePenetrationRateInpColumn } from "@/components/util/column/input/SeweragePenetrationRateInpColumn";
 import { toGridRows } from "@/components/util/grid/gridFunction";
@@ -91,7 +93,13 @@ const SeweragePenetrationRateInp = () => {
                     speclCntrplnAr: d.speclCntrplnAr === '' || d.speclCntrplnAr === null ? '해당없음' : d.speclCntrplnAr,
                     piplSupprt: commonInfo.piplSupprt,
                 }));
-                setRowData(toGridRows(convertedData));
+                setRowData(
+                    convertedData.map((d) => {
+                        const row = toGridRows([d])[0] as Record<string, string | number> & { verificationResult?: SewerageSupplyRateVerificationResult };
+                        if (d.verificationResult) row.verificationResult = d.verificationResult;
+                        return row;
+                    })
+                );
 
                 setFooterFromApi(
                     commonInfo
@@ -193,13 +201,9 @@ const SeweragePenetrationRateInp = () => {
                     const decimalPlaces = format.match(/\.(\d+)/)?.[1]?.length ?? 0;
                     return decimalPlaces > 0 ? parseFloat(num.toFixed(decimalPlaces)) : Math.round(num);
                 };
-        
+
-                // SaveItem 타입에 정의된 필드만 추출
                 const convertedData: SewerageSupplyRateSaveItem[] = currentData.map((d) => ({
-                    bsnmCd: searchValues?.bsnmCd ?? '',
-                    sido: d.sido as string,
                     gugun: (d.gugun as string) || null,
-                    yr: searchValues?.year ?? '',
                     adstCd: d.adstCd as string,
                     adstDong: d.adstDong as string,
                     bstrm: d.bstrm as string,
@@ -226,10 +230,17 @@ const SeweragePenetrationRateInp = () => {
                     pblswrgPopltnSuprt: formatNumber(d.pblswrgPopltnSuprt, 'pblswrgPopltnSuprt'),
                     adtrtPopltnSuprt: formatNumber(d.adtrtPopltnSuprt, 'adtrtPopltnSuprt'),
                     swrgInstlrt: formatNumber(d.swrgInstlrt, 'swrgInstlrt'),
-                    userId: userInfo.userName,
                 }));
 
-                const response = await statisticsInputAPi.saveSewerageSupplyRate(convertedData);
+                const requestData: SewerageSupplyRateSaveRequest = {
+                    bsnmCd: searchValues?.bsnmCd ?? '',
+                    sido: searchValues?.sido ?? '',
+                    yr: searchValues?.year ?? '',
+                    userId: userInfo.userName,
+                    saveList: convertedData,
+                }
+
+                const response = await statisticsInputAPi.saveSewerageSupplyRate(requestData);
                 console.log(convertedData)
                 console.log(response);
             } else {
@@ -273,6 +284,14 @@ const SeweragePenetrationRateInp = () => {
                 rowData={rowData}
                 setRowData={setRowData}
                 getGridDataRef={getGridDataRef}
+                cellStyleCallback={({ row, fieldName }) => {
+                    const verification = (row as any).verificationResult as SewerageSupplyRateVerificationResult | undefined;
+                    if (!verification) return;
+                    const errors = verification[fieldName];
+                    if (Array.isArray(errors) && errors.length > 0) {
+                        return 'rg-cell-verify-error';
+                    }
+                }}
             />
         </div>
         <ConfirmDialog isOpen={false} />

apps/st/src/components/type/DataGrid.type.ts

@@ -140,6 +140,15 @@ export type ColumnInfoList = {
     right?: ColumnInfoList; // SplitDataGrid용 오른쪽 그리드 정보
 }
 
+// 개별 셀 스타일을 동적으로 결정하기 위한 콜백 (예: 검증 오류 셀 강조)
+export type CellStyleCallbackParams = {
+    rowIndex: number;
+    fieldName: string;
+    row: Record<string, string | number>;
+};
+
+export type CellStyleCallback = (params: CellStyleCallbackParams) => string | undefined;
+
 export type DataGridProps = {
     columnInfo: ColumnInfo;
     rowStartNum?: number; // 헤더 행 개수 (1부터 시작, 예: 2면 1행과 2행까지 헤더로 간주)
@@ -152,6 +161,8 @@ export type DataGridProps = {
     setRowData: React.Dispatch<React.SetStateAction<Record<string, string | number>[]>>;
     /** 저장 등 시점에 그리드 현재 데이터를 가져올 수 있도록 할당 (편집 반영된 값) */
     getGridDataRef?: { current: (() => Record<string, string | number>[]) | null };
+    /** 셀 단위로 styleName을 동적으로 결정 (예: 검증 오류 셀) */
+    cellStyleCallback?: CellStyleCallback;
 };
 
 export type TabDataGridProps = {

apps/st/src/entities/statistics/api/statistics-input-service.ts

@@ -6,7 +6,7 @@ import {
     type SewerageSupplyRateRequestParams,
     type SewerageSupplyRateApiResponse,
     type CheckInputPeriodResponse,
-    type SewerageSupplyRateSaveItem,
+    type SewerageSupplyRateSaveRequest,
     type SewerageSupplyRateSaveApiResponse,
 } from "../model/statistics-input-interface";
 
@@ -30,7 +30,7 @@ export class StatisticsInputAPiService implements StatisticsInputService {
         return response.data;
     }
 
-    public async saveSewerageSupplyRate(params: SewerageSupplyRateSaveItem[]): Promise<SewerageSupplyRateSaveApiResponse> {
+    public async saveSewerageSupplyRate(params: SewerageSupplyRateSaveRequest): Promise<SewerageSupplyRateSaveApiResponse> {
         const response = await axios.post<SewerageSupplyRateSaveApiResponse> (
             `${ENDPOINT.ST_SERVICE.INPUT}/sewerage-supply-rate`,
             params

apps/st/src/entities/statistics/model/statistics-input-interface.ts

@@ -138,10 +138,7 @@ export interface SewerageSupplyRateRequestParams {
 
 /** 하수도 보급률 저장 API 요청 body (한 행) */
 export interface SewerageSupplyRateSaveItem {
-    bsnmCd: string;
-    sido: string;
     gugun: string | null;
-    yr: string;
     adstCd: string;
     adstDong: string;
     bstrm: string;
@@ -168,7 +165,14 @@ export interface SewerageSupplyRateSaveItem {
     pblswrgPopltnSuprt: number;
     adtrtPopltnSuprt: number;
     swrgInstlrt: number;
+}
+
+export interface SewerageSupplyRateSaveRequest {
+    yr: string;
+    sido: string;
+    bsnmCd: string;
     userId: string;
+    saveList: SewerageSupplyRateSaveItem[];
 }
 
 export interface SewerageSupplyRateSaveData {
@@ -190,5 +194,5 @@ export interface CheckInputPeriodResponse {
 export interface StatisticsInputService {
     getSewerageSupplyRateList(params: SewerageSupplyRateRequestParams): Promise<SewerageSupplyRateApiResponse>;
     checkInputPeriod(params: string): Promise<CheckInputPeriodResponse>;
-    saveSewerageSupplyRate(params: SewerageSupplyRateSaveItem[]): Promise<SewerageSupplyRateSaveApiResponse>;
+    saveSewerageSupplyRate(params: SewerageSupplyRateSaveRequest): Promise<SewerageSupplyRateSaveApiResponse>;
 }

packages/rsone/components/grid/css/DataGrid.css

@@ -110,4 +110,9 @@
 /* 소계, 합계, 율(%) cell */
 .rg-cell-total {
     background-color: #e3eaf2 !important;
+}
+
+.rg-cell-verify-error {
+    background-color: #ffe6e6 !important;
+    color: #c00 !important;
 }