From 82525610501a457f03ab87e5fe5138b9473ec2ba Mon Sep 17 00:00:00 2001
From: rsone001 <rsone001@gmail.com>
Date: Tue, 13 Jan 2026 15:58:19 +0900
Subject: [PATCH] =?UTF-8?q?st:=20refactor:=20grid=20=EB=B3=80=EA=B2=BD=20?=
 =?UTF-8?q?=EB=82=B4=EC=9A=A9=20@rsone/components=20=EB=AA=A8=EB=93=88?=
 =?UTF-8?q?=EC=97=90=20=EB=B0=98=EC=98=81,=20=EB=AA=A8=EB=93=A0=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EC=97=90=EC=84=9C=20@rsone?=
 =?UTF-8?q?/components=EC=9D=98=20grid=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=EB=A5=BC=20import=20=ED=95=98=EB=8F=84=EB=A1=9D=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95,=20=EA=B2=80=ED=86=A0=20=EA=B4=80=EB=A0=A8?=
 =?UTF-8?q?=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=BD=94=EB=93=9C=20?=
 =?UTF-8?q?=EC=A0=95=EB=A0=AC=20=EB=B0=8F=20=EB=B6=88=ED=95=84=EC=9A=94=20?=
 =?UTF-8?q?=EA=B3=B5=EB=B0=B1=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../input/SewageExcretaRelatedInp.tsx         |   2 +-
 .../input/SewageExcretaSlurgeInp.tsx          |   2 +-
 .../statistics/input/SewagePipeInp.tsx        |   3 +-
 .../statistics/input/StatsInputStatusInp.tsx  |   2 +-
 .../management/NotEnteredStatus.tsx           |   6 +-
 .../management/StatisticsInputManagement.tsx  |   6 +-
 .../StatisticsPopulationManagement.tsx        |   4 -
 .../management/StatisticsReviewHistory.tsx    |   6 +-
 .../review/ExcretaTreatmentFacilityRvw.tsx    |  10 +-
 .../review/PrivateSewageFacilityRvw.tsx       |   6 +-
 .../review/PublicSewageFacilityRvw.tsx        |   9 +-
 .../statistics/review/PumpingStationRvw.tsx   |   9 +-
 .../review/SewageExcretaRelatedRvw.tsx        |   6 +-
 .../review/SewageExcretaSlurgeRvw.tsx         |   6 +-
 .../review/SewagePipeMaintainRvw.tsx          |   6 +-
 .../statistics/review/SewagePipeRvw.tsx       |   6 +-
 .../review/SewageReservoirPumpRvw.tsx         |   6 +-
 .../statistics/review/SewerageFinanceRvw.tsx  |   6 +-
 .../review/SeweragePenetrationRateRvw.tsx     |   8 +-
 .../review/SewerageServiceLevelRvw.tsx        |   6 +-
 .../statistics/review/StatsInputStatusRvw.tsx |   8 +-
 .../statistics/review/WaterReuseRvw.tsx       |   6 +-
 .../rsone/components/grid/CompactDataGrid.tsx | 154 ++++++++++++++++++
 .../rsone/components/grid/SplitDataGrid.tsx   |  35 ++++
 .../rsone/components/grid/TabDataGrid.tsx     |  60 ++++++-
 .../rsone/components/type/DataGrid.type.ts    |  20 ++-
 26 files changed, 315 insertions(+), 83 deletions(-)
 create mode 100644 packages/rsone/components/grid/CompactDataGrid.tsx
 create mode 100644 packages/rsone/components/grid/SplitDataGrid.tsx

diff --git a/apps/st/src/components/statistics/input/SewageExcretaRelatedInp.tsx b/apps/st/src/components/statistics/input/SewageExcretaRelatedInp.tsx
index 4b820cd69..bb2d3693d 100644
--- a/apps/st/src/components/statistics/input/SewageExcretaRelatedInp.tsx
+++ b/apps/st/src/components/statistics/input/SewageExcretaRelatedInp.tsx
@@ -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";
diff --git a/apps/st/src/components/statistics/input/SewageExcretaSlurgeInp.tsx b/apps/st/src/components/statistics/input/SewageExcretaSlurgeInp.tsx
index 5f8fcf2b6..339ebbb8b 100644
--- a/apps/st/src/components/statistics/input/SewageExcretaSlurgeInp.tsx
+++ b/apps/st/src/components/statistics/input/SewageExcretaSlurgeInp.tsx
@@ -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";
diff --git a/apps/st/src/components/statistics/input/SewagePipeInp.tsx b/apps/st/src/components/statistics/input/SewagePipeInp.tsx
index abd5f6875..2b54d8cc0 100644
--- a/apps/st/src/components/statistics/input/SewagePipeInp.tsx
+++ b/apps/st/src/components/statistics/input/SewagePipeInp.tsx
@@ -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";
diff --git a/apps/st/src/components/statistics/input/StatsInputStatusInp.tsx b/apps/st/src/components/statistics/input/StatsInputStatusInp.tsx
index 207601c8c..567ff1cea 100644
--- a/apps/st/src/components/statistics/input/StatsInputStatusInp.tsx
+++ b/apps/st/src/components/statistics/input/StatsInputStatusInp.tsx
@@ -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";
diff --git a/apps/st/src/components/statistics/management/NotEnteredStatus.tsx b/apps/st/src/components/statistics/management/NotEnteredStatus.tsx
index 22ef28d0b..8dd2c1990 100644
--- a/apps/st/src/components/statistics/management/NotEnteredStatus.tsx
+++ b/apps/st/src/components/statistics/management/NotEnteredStatus.tsx
@@ -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} />
diff --git a/apps/st/src/components/statistics/management/StatisticsInputManagement.tsx b/apps/st/src/components/statistics/management/StatisticsInputManagement.tsx
index fa86159ad..7df0d37f4 100644
--- a/apps/st/src/components/statistics/management/StatisticsInputManagement.tsx
+++ b/apps/st/src/components/statistics/management/StatisticsInputManagement.tsx
@@ -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} />
diff --git a/apps/st/src/components/statistics/management/StatisticsPopulationManagement.tsx b/apps/st/src/components/statistics/management/StatisticsPopulationManagement.tsx
index dabf80854..9632bf66c 100644
--- a/apps/st/src/components/statistics/management/StatisticsPopulationManagement.tsx
+++ b/apps/st/src/components/statistics/management/StatisticsPopulationManagement.tsx
@@ -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} />
diff --git a/apps/st/src/components/statistics/management/StatisticsReviewHistory.tsx b/apps/st/src/components/statistics/management/StatisticsReviewHistory.tsx
index f24dc0718..314828e36 100644
--- a/apps/st/src/components/statistics/management/StatisticsReviewHistory.tsx
+++ b/apps/st/src/components/statistics/management/StatisticsReviewHistory.tsx
@@ -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} />
diff --git a/apps/st/src/components/statistics/review/ExcretaTreatmentFacilityRvw.tsx b/apps/st/src/components/statistics/review/ExcretaTreatmentFacilityRvw.tsx
index 9d0ce78e6..6254390ea 100644
--- a/apps/st/src/components/statistics/review/ExcretaTreatmentFacilityRvw.tsx
+++ b/apps/st/src/components/statistics/review/ExcretaTreatmentFacilityRvw.tsx
@@ -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} />
diff --git a/apps/st/src/components/statistics/review/PrivateSewageFacilityRvw.tsx b/apps/st/src/components/statistics/review/PrivateSewageFacilityRvw.tsx
index eeaf7c0a1..6948defeb 100644
--- a/apps/st/src/components/statistics/review/PrivateSewageFacilityRvw.tsx
+++ b/apps/st/src/components/statistics/review/PrivateSewageFacilityRvw.tsx
@@ -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} />
diff --git a/apps/st/src/components/statistics/review/PublicSewageFacilityRvw.tsx b/apps/st/src/components/statistics/review/PublicSewageFacilityRvw.tsx
index 1f871377f..457e7dfc9 100644
--- a/apps/st/src/components/statistics/review/PublicSewageFacilityRvw.tsx
+++ b/apps/st/src/components/statistics/review/PublicSewageFacilityRvw.tsx
@@ -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} />
diff --git a/apps/st/src/components/statistics/review/PumpingStationRvw.tsx b/apps/st/src/components/statistics/review/PumpingStationRvw.tsx
index 842b8b2dd..c49cccbdc 100644
--- a/apps/st/src/components/statistics/review/PumpingStationRvw.tsx
+++ b/apps/st/src/components/statistics/review/PumpingStationRvw.tsx
@@ -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} />
diff --git a/apps/st/src/components/statistics/review/SewageExcretaRelatedRvw.tsx b/apps/st/src/components/statistics/review/SewageExcretaRelatedRvw.tsx
index c16320006..e3fcdf558 100644
--- a/apps/st/src/components/statistics/review/SewageExcretaRelatedRvw.tsx
+++ b/apps/st/src/components/statistics/review/SewageExcretaRelatedRvw.tsx
@@ -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} />
diff --git a/apps/st/src/components/statistics/review/SewageExcretaSlurgeRvw.tsx b/apps/st/src/components/statistics/review/SewageExcretaSlurgeRvw.tsx
index 076e53a37..9cd8e0aea 100644
--- a/apps/st/src/components/statistics/review/SewageExcretaSlurgeRvw.tsx
+++ b/apps/st/src/components/statistics/review/SewageExcretaSlurgeRvw.tsx
@@ -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} />
diff --git a/apps/st/src/components/statistics/review/SewagePipeMaintainRvw.tsx b/apps/st/src/components/statistics/review/SewagePipeMaintainRvw.tsx
index 12d7cd85b..23cdf5f07 100644
--- a/apps/st/src/components/statistics/review/SewagePipeMaintainRvw.tsx
+++ b/apps/st/src/components/statistics/review/SewagePipeMaintainRvw.tsx
@@ -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} />
diff --git a/apps/st/src/components/statistics/review/SewagePipeRvw.tsx b/apps/st/src/components/statistics/review/SewagePipeRvw.tsx
index e6b333af7..49e9c007e 100644
--- a/apps/st/src/components/statistics/review/SewagePipeRvw.tsx
+++ b/apps/st/src/components/statistics/review/SewagePipeRvw.tsx
@@ -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} />
diff --git a/apps/st/src/components/statistics/review/SewageReservoirPumpRvw.tsx b/apps/st/src/components/statistics/review/SewageReservoirPumpRvw.tsx
index 60879519a..7a4e059d8 100644
--- a/apps/st/src/components/statistics/review/SewageReservoirPumpRvw.tsx
+++ b/apps/st/src/components/statistics/review/SewageReservoirPumpRvw.tsx
@@ -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} />
diff --git a/apps/st/src/components/statistics/review/SewerageFinanceRvw.tsx b/apps/st/src/components/statistics/review/SewerageFinanceRvw.tsx
index eeae5b98a..574bf10ea 100644
--- a/apps/st/src/components/statistics/review/SewerageFinanceRvw.tsx
+++ b/apps/st/src/components/statistics/review/SewerageFinanceRvw.tsx
@@ -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} />
diff --git a/apps/st/src/components/statistics/review/SeweragePenetrationRateRvw.tsx b/apps/st/src/components/statistics/review/SeweragePenetrationRateRvw.tsx
index c80e0ce82..5ce914af4 100644
--- a/apps/st/src/components/statistics/review/SeweragePenetrationRateRvw.tsx
+++ b/apps/st/src/components/statistics/review/SeweragePenetrationRateRvw.tsx
@@ -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} />
diff --git a/apps/st/src/components/statistics/review/SewerageServiceLevelRvw.tsx b/apps/st/src/components/statistics/review/SewerageServiceLevelRvw.tsx
index b55269ed3..697d87ca8 100644
--- a/apps/st/src/components/statistics/review/SewerageServiceLevelRvw.tsx
+++ b/apps/st/src/components/statistics/review/SewerageServiceLevelRvw.tsx
@@ -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} />
diff --git a/apps/st/src/components/statistics/review/StatsInputStatusRvw.tsx b/apps/st/src/components/statistics/review/StatsInputStatusRvw.tsx
index 66ccd3507..3dfca17d1 100644
--- a/apps/st/src/components/statistics/review/StatsInputStatusRvw.tsx
+++ b/apps/st/src/components/statistics/review/StatsInputStatusRvw.tsx
@@ -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} />
diff --git a/apps/st/src/components/statistics/review/WaterReuseRvw.tsx b/apps/st/src/components/statistics/review/WaterReuseRvw.tsx
index 3dcc94d34..8e2f1d423 100644
--- a/apps/st/src/components/statistics/review/WaterReuseRvw.tsx
+++ b/apps/st/src/components/statistics/review/WaterReuseRvw.tsx
@@ -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} />
diff --git a/packages/rsone/components/grid/CompactDataGrid.tsx b/packages/rsone/components/grid/CompactDataGrid.tsx
new file mode 100644
index 000000000..1312230a9
--- /dev/null
+++ b/packages/rsone/components/grid/CompactDataGrid.tsx
@@ -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;
\ No newline at end of file
diff --git a/packages/rsone/components/grid/SplitDataGrid.tsx b/packages/rsone/components/grid/SplitDataGrid.tsx
new file mode 100644
index 000000000..7d24c96c0
--- /dev/null
+++ b/packages/rsone/components/grid/SplitDataGrid.tsx
@@ -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;
diff --git a/packages/rsone/components/grid/TabDataGrid.tsx b/packages/rsone/components/grid/TabDataGrid.tsx
index f125d0c86..4bfa14751 100644
--- a/packages/rsone/components/grid/TabDataGrid.tsx
+++ b/packages/rsone/components/grid/TabDataGrid.tsx
@@ -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
diff --git a/packages/rsone/components/type/DataGrid.type.ts b/packages/rsone/components/type/DataGrid.type.ts
index 3c405546f..2717f4ff8 100644
--- a/packages/rsone/components/type/DataGrid.type.ts
+++ b/packages/rsone/components/type/DataGrid.type.ts
@@ -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>[]>>;
 };
\ No newline at end of file