diff --git a/apps/sn/app/map/components/Ssc.tsx b/apps/sn/app/map/components/Ssc.tsx
new file mode 100644
index 000000000..a6e783ac9
--- /dev/null
+++ b/apps/sn/app/map/components/Ssc.tsx
@@ -0,0 +1,66 @@
+// 우수토실
+import Modal from '@/components/ui/modal';
+import { VerticalTable } from '@/components/ui/verticalTable';
+import { UiTable } from '@common/business_components/ui';
+import { Button, TableHead, TableRow } from '@common/components/ui';
+import React from 'react'
+const inputColumn = [
+  { id: "guyeok", title: "처리구역", type: "select", options: ["구역1", "구역2"] },
+  { id: "mainSscYn", title: "중점우수토실 대상여부", type: "select", options: ['Y', 'N'] },
+];
+const headlist = [
+  { id: 'startrain', title: '강우시작일시' }, { id: 'endrain', title: '강우종료일시' }, { id: '선행건기', title: '선행건기(h)' }, { id: '강우정보', title: '강우정보' }, { id: '누적강우량', title: '누적강우량(mm)' }, { id: '지속시간', title: '지속시간(h)' }, { id: '강우강도', title: '강우강도(mm/h)' },
+]
+const headlist3 = [{ id: 'nm', title: '회차' }, { id: 'date', title: '측정일자' }, { id: 'measure', title: '수량(m)' }, { id: 'bod', title: 'BOD(mg/L)' }, { id: 'toc', title: 'TOC(mg/L)' }, { id: '오염부하량', title: '오염부하량(kg)' }]
+const Ssc = () => {
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const openModal = () => {
+    setIsModalOpen(true);
+  };
+  const closeModal = () => {
+    setIsModalOpen(false);
+  };
+  return (
+    <div><VerticalTable headName='자체 입력정보' tableData={[]} headlist={inputColumn} pageSize={0} total={0} children={undefined} cellClick={undefined} isEditable={true} onPageChange={function (page: number): void {
+      throw new Error('Function not implemented.');
+    }} />
+      <div>
+        <div className="card-header">
+          <h3 className="text-2xl mx-3 font-medium text-label">중점우수토실 운영정보</h3>
+        </div>
+        <Button className='mx-auto block w-64 mt-3 py-2 text-white rounded-sm text-sm font-medium hover:bg-blue-700 bg-blue-600' onClick={openModal}>상세보기</Button>
+        <Modal isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} closeModal={closeModal}>
+          <div className='grid grid-col-3'><UiTable headName='강우정보' tableData={[]} headlist={headlist} pageSize={0} total={0} children={undefined} cellClick={undefined} onPageChange={function (page: number): void {
+            throw new Error('Function not implemented.');
+          }}></UiTable>
+          <UiTable headName='측정정보' tableData={[]} headlist={[]} pageSize={0} total={0} cellClick={undefined} onPageChange={function (page: number): void {
+            throw new Error('Function not implemented.');
+          }}>  {/* 커스텀 헤더 */}
+          <TableRow>
+            <TableHead colSpan={5} className="text-center bg-blue-100 font-bold">
+              수량
+            </TableHead>
+            <TableHead colSpan={3} className="text-center bg-blue-100 font-bold">
+              수질
+            </TableHead>
+          </TableRow>
+          <TableRow>
+            <TableHead className="text-center">측정시작일시</TableHead>
+            <TableHead className="text-center">측정종료일시</TableHead>
+            <TableHead className="text-center">측정간격(분)</TableHead>
+            <TableHead className="text-center">측정기기설치위치</TableHead>
+            <TableHead className="text-center">유량계 종류 및 모델명</TableHead>
+            <TableHead className="text-center">채수시작일시</TableHead>
+            <TableHead className="text-center">채수종료일시</TableHead>
+            <TableHead className="text-center">채수횟수</TableHead>
+          </TableRow></UiTable>
+          <UiTable headName='수량/수질측정 정보' tableData={[]} headlist={headlist3} pageSize={0} total={0} children={undefined} cellClick={undefined} onPageChange={function (page: number): void {
+            throw new Error('Function not implemented.');
+          }}></UiTable></div>
+        </Modal>
+      </div>
+    </div>
+  )
+}
+
+export default Ssc
\ No newline at end of file
diff --git a/apps/sn/app/map/components/SwtrmtFclt.tsx b/apps/sn/app/map/components/SwtrmtFclt.tsx
index 66adaa394..bcf2e08d6 100644
--- a/apps/sn/app/map/components/SwtrmtFclt.tsx
+++ b/apps/sn/app/map/components/SwtrmtFclt.tsx
@@ -1,6 +1,7 @@
 import { VerticalTable } from '@/components/ui/verticalTable';
 import React, { useState } from 'react'
 import InputSection from './InputSection';
+import { handleInputChange } from './common';
 // 하수처리시설
 // TODO: 컬럼에 보고서 엉 ? 이거 버튼누르면 팝업으로 상세화면 띄워주는 건지 확인 필요 
 const inputColumn = [
@@ -25,35 +26,19 @@ const SwtrmtFclt = () => {
         { year: "2025", type: "관로기술진단" },
         { year: "2025", type: "관로기술진단" },
     ]);
-
-    const handleInputChange = (section: string, index: number, field: string, value: string) => {
-        const updateData = (
-            data: { year: string; type: string }[],
-            setData: React.Dispatch<React.SetStateAction<{ year: string; type: string }[]>>
-        ) => {
-            const updated = [...data];
-            if (updated[index]) {
-                updated[index][field as keyof typeof updated[number]] = value;
-            }
-            setData(updated);
-        };
-
-        if (section === "repair") {
-            updateData(repairData, setRepairData);
-        } else if (section === "cleaning") {
-            updateData(cleaningData, setCleaningData);
-        } else if (section === "inspection") {
-            updateData(inspectionData, setInspectionData);
-        }
+    const dataMap = {
+        repair: { data: repairData, setData: setRepairData },
+        cleaning: { data: cleaningData, setData: setCleaningData },
+        inspection: { data: inspectionData, setData: setInspectionData },
     };
     return (
         <div>
             <VerticalTable headName='자체 입력정보' tableData={[]} headlist={inputColumn} pageSize={20} total={0} children={undefined} cellClick={undefined} isEditable={true} onPageChange={function (page: number): void {
                 throw new Error("Function not implemented.");
             }}></VerticalTable>
-            <InputSection title="보수 및 갱신" data={repairData} sectionKey="repair" onInputChange={handleInputChange} />
-            <InputSection title="청소 및 준설" data={cleaningData} sectionKey="cleaning" onInputChange={(section, index, field, value) => handleInputChange(section, index, field, value)} />
-            <InputSection title="점검 및 진단" data={inspectionData} sectionKey="inspection" onInputChange={(section, index, field, value) => handleInputChange(section, index, field, value)} /></div>
+            <InputSection title="보수 및 갱신" data={repairData} sectionKey="repair" onInputChange={(section, index, field, value) => handleInputChange(section, index, field, value, dataMap)} />
+            <InputSection title="청소 및 준설" data={cleaningData} sectionKey="cleaning" onInputChange={(section, index, field, value) => handleInputChange(section, index, field, value, dataMap)} />
+            <InputSection title="점검 및 진단" data={inspectionData} sectionKey="inspection" onInputChange={(section, index, field, value) => handleInputChange(section, index, field, value, dataMap)} /></div>
     )
 }
 
diff --git a/apps/sn/app/map/components/common/index.ts b/apps/sn/app/map/components/common/index.ts
new file mode 100644
index 000000000..9228c09ba
--- /dev/null
+++ b/apps/sn/app/map/components/common/index.ts
@@ -0,0 +1,45 @@
+import smh from "../smh";
+import Ssc from "../Ssc";
+import SwtrmtFclt from "../SwtrmtFclt";
+
+// 레이어 이름과 컴포넌트를 매핑
+const layerContentMap: { [key: string]: { component: React.FC<any>; props?: any; } } = {
+    // TODO: gis데이터 추가되면 추가 작업 필요
+    "하수처리시설": {
+        component: SwtrmtFclt,
+    },
+    "하수처리구역": { component: Ssc, },
+    "중점우수토실":{component: Ssc,},
+    "하수관로":{component: SwtrmtFclt,},
+    "하수맨홀":{component: smh,},
+};
+
+// 동적 컴포넌트 반환 함수
+export const getLayerContentComponent = (layerNm: string): React.FC => {
+    const component = layerContentMap[layerNm];
+    if (!component) {
+        throw new Error(`Component not found for layer name: ${layerNm}`);
+    }
+    return component.component;
+};
+// 사용자 입력 필드 (보수 및 갱신, 청소 및 준설, 점검 및 진단)
+export const handleInputChange = (section: string,
+    index: number,
+    field: string,
+    value: string,
+    dataMap: {
+        [key: string]: {
+            data: { year: string; type: string }[];
+            setData: React.Dispatch<React.SetStateAction<{ year: string; type: string }[]>>;
+        };
+    }
+) => {
+    const target = dataMap[section];
+    if (!target) return;
+
+    const updated = [...target.data];
+    if (updated[index]) {
+        updated[index][field as keyof typeof updated[number]] = value;
+    }
+    target.setData(updated);
+}; 
\ No newline at end of file
diff --git a/apps/sn/app/map/components/index.ts b/apps/sn/app/map/components/index.ts
deleted file mode 100644
index 6ec872d24..000000000
--- a/apps/sn/app/map/components/index.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import SwtrmtFclt from "./SwtrmtFclt";
-
-// 레이어 이름과 컴포넌트를 매핑
-const layerContentMap: { [key: string]: { component: React.FC<any>; props?: any; } } = {
-    "하수처리시설": {
-        component: SwtrmtFclt,
-    },
-    "하수처리구역": {component : SwtrmtFclt,}
-};
-
-// 동적 컴포넌트 반환 함수
-export const getLayerContentComponent = (layerNm: string): React.FC => {
-    const component = layerContentMap[layerNm];
-    if (!component) {
-        throw new Error(`Component not found for layer name: ${layerNm}`);
-    }
-    return component.component;
-};
\ No newline at end of file
diff --git a/apps/sn/app/map/components/smh.tsx b/apps/sn/app/map/components/smh.tsx
new file mode 100644
index 000000000..e693a28ce
--- /dev/null
+++ b/apps/sn/app/map/components/smh.tsx
@@ -0,0 +1,21 @@
+// 하수맨홀
+import { VerticalTable } from '@/components/ui/verticalTable';
+import React from 'react'
+const inputColumn = [
+    { id: "guyeok", title: "처리구역", type: "select", options: ["구역1", "구역2"] },
+    { id: "basu", title: "배수구역", type: "input" },
+    { id: "bungu", title: "배수분구", type: "input" },
+    { id: "place", title: "매설위치", type: "select", options: ["도로", "하상"] },
+    {id:'spec', title:'규격', type:'input'},
+];
+const Smh = () => {
+  return (
+   <div>
+    <VerticalTable headName='자체 입력정보' tableData={[]} headlist={inputColumn} pageSize={20} total={0} children={undefined} cellClick={undefined} isEditable={true} onPageChange={function (page: number): void {
+        throw new Error("Function not implemented.");
+    }}></VerticalTable>
+   </div>
+  )
+}
+
+export default Smh;
\ No newline at end of file