레이어 선택별로 개별 컴포넌트로 동적 처리하도록 분리

apps/sn/app/map/components/InputSection.tsx

@@ -0,0 +1,50 @@
+import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from "@common/components/ui";
+import React from "react";
+
+interface InputSectionProps {
+    title: string;
+    data: { year: string; type: string }[];
+    sectionKey: string;
+    onInputChange: (section: string, index: number, field: string, value: string) => void;
+}
+
+const InputSection: React.FC<InputSectionProps> = ({ title, data, sectionKey, onInputChange }) => {
+    return (
+        <div>
+            {/* 섹션 제목 */}
+            <div className="card-header">
+                <h3 className="text-2xl mx-3 font-medium text-label">{title}</h3>
+            </div>
+            {/* 테이블 */}
+            <div className="card !m-[1.2rem] !p-0r">
+                <Table variant="secondary" className="w-full">
+                    <TableHeader>
+                        <TableRow>
+                            <TableHead className="border border-gray-300 px-2 py-2 text-sm">년도</TableHead>
+                            <TableHead className="border border-gray-300 px-2 py-2 text-sm">구분</TableHead>
+                        </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                        {data.map((row, index) => (
+                            <TableRow key={index}>
+                                <TableCell className="border border-gray-300 px-2 py-2 text-sm">
+                                    <input
+                                        type="text"
+                                        value={row.year}
+                                        onChange={(e) => onInputChange(sectionKey, index, "year", e.target.value)}
+                                        className="w-full text-xl border-radius-0 px-3 py-2 text-base text-center leading-normal"
+                                    />
+                                </TableCell>
+                                <TableCell className="border border-gray-300 px-2 py-2 text-sm text-center leading-normal">
+                                    {row.type}
+                                </TableCell>
+                            </TableRow>
+                        ))}
+                    </TableBody>
+                </Table>
+            </div>
+        </div>
+    );
+};
+
+export default InputSection;

apps/sn/app/map/components/SwtrmtFclt.tsx

@@ -0,0 +1,60 @@
+import { VerticalTable } from '@/components/ui/verticalTable';
+import React, { useState } from 'react'
+import InputSection from './InputSection';
+// 하수처리시설
+// TODO: 컬럼에 보고서 엉 ? 이거 버튼누르면 팝업으로 상세화면 띄워주는 건지 확인 필요 
+const inputColumn = [
+    { id: "title", title: "설치주제", type: "select", options: ["BTL", "재정사업"] },
+    { id: "guyeok", title: "처리구역", type: "select", options: ["구역1", "구역2"] },
+    { id: "basu", title: "배수구역", type: "input" },
+    { id: "bungu", title: "배수분구", type: "input" },
+    { id: "wltjs", title: "지선/간선", type: "select", options: ["지선", "간선"] },
+    { id: "flow", title: "흐름방식", type: "select", options: ["자연유하", "압송"] },
+    { id: "place", title: "매설위치", type: "select", options: ["도로", "하상"] },
+];
+const SwtrmtFclt = () => {
+    const [repairData, setRepairData] = useState([
+        { year: "2025", type: "개대체" },
+        { year: "2025", type: "보수" },
+    ]);
+    const [cleaningData, setCleaningData] = useState([
+        { year: "2025", type: "청소" },
+        { year: "2025", type: "준설" },
+    ]);
+    const [inspectionData, setInspectionData] = useState([
+        { 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);
+        }
+    };
+    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>
+    )
+}
+
+export default SwtrmtFclt

apps/sn/app/map/components/index.ts

@@ -0,0 +1,18 @@
+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;
+};

apps/sn/app/map/featureClickEventPopup.tsx

@@ -1,10 +1,12 @@
 'use client'
-import { VerticalTable } from "@/components/verticalTable";
+import { VerticalTable } from "@/components/ui/verticalTable";
 import { Button, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@common/components/ui";
 import { use, useEffect, useState } from "react";
 import { SwtrmtFcltCol, SwtrmtPrcsZoneCol } from "./table";
 import { useGisContext } from "@common/business_components/ui/map/Gis";
 import { getData } from "@/components/lib/api";
+import InputSection from "./components/InputSection";
+import { getLayerContentComponent } from "./components";
 const inputColumn = [
     { id: "title", title: "설치주제", type: "select", options: ["BTL", "재정사업"] },
     { id: "guyeok", title: "처리구역", type: "select", options: ["구역1", "구역2"] },
@@ -17,7 +19,7 @@ const inputColumn = [
 // TODO:
 const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void, featureData: any }) => {
     const { gisMap } = useGisContext() as unknown as { checkedLayerIds: React.MutableRefObject<number[]>; treeData: { lyrSn: number }[] | null; gisCore: any; gisMap: any; };
-    const featureId = featureData.getId(); // 피처의 속성 가져오기
+    const featureId = featureData.getId(); // 피처의 id 가져오기
     const [layerNm, setLayerNm] = useState<string>(""); // 레이어 이름 상태
     const [tableData, setTableData] = useState<any>(null); // 피처 데이터 상태
     const [headlist, setHeadlist] = useState<{ id: string; title: string; }[]>([]); // 컬럼리스트 변경상태
@@ -33,93 +35,29 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void,
         });
         return featureLayer.get('lyrNm'); // 레이어 이름 출력
     };
-    const [repairData, setRepairData] = useState([
-        { year: "2025", type: "개대체" },
-        { year: "2025", type: "보수" },
-    ]);
-
-    const [cleaningData, setCleaningData] = useState([
-        { year: "2025", type: "청소" },
-        { year: "2025", type: "준설" },
-    ]);
-
-    const [inspectionData, setInspectionData] = useState([
-        { 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);
-        }
-    };
-    useEffect(() => { 
+    useEffect(() => {
         const fetchData = async () => {
             if (featureId) {
                 const selectedLayerName = getSelectedLayers(); // 레이어 이름 가져오기
                 setLayerNm(selectedLayerName); // 상태 업데이트
-            
-            const data = await getData(`v1/map/features/${featureId}`);
-            switch (selectedLayerName) {
-                case '하수처리시설':
-                    setHeadlist(SwtrmtFcltCol);
-                    break;
-                case '하수처리구역':
-                    setHeadlist(SwtrmtPrcsZoneCol)
-                    break;
-                default:
-                    break;
-            }
-            setTableData(data);
-        };
-    }
+
+                const data = await getData(`v1/map/features/${featureId}`);
+                switch (selectedLayerName) {
+                    case '하수처리시설':
+                        setHeadlist(SwtrmtFcltCol);
+                        break;
+                    case '하수처리구역':
+                        setHeadlist(SwtrmtPrcsZoneCol)
+                        break;
+                    default:
+                        break;
+                }
+                setTableData(data);
+            };
+        }
         fetchData();
     }, [featureId]);
-    const renderSection = (title: string, data: { year: string; type: string }[], sectionKey: string) => (
-        <div>
-            {/* 섹션 제목 */}
-            <div className="card-header">
-                <h3 className="text-2xl mx-3 font-medium text-label">{title}</h3>
-            </div>
-            {/* 테이블 */}
-            <div className="card !m-[1.2rem] !p-0r">
-                <Table variant="secondary" className="w-full">
-                    <TableHeader>
-                        <TableRow>
-                            <TableHead className="border border-gray-300 px-2 py-2 text-sm">년도</TableHead>
-                            <TableHead className="border border-gray-300 px-2 py-2 text-sm">구분</TableHead>
-                        </TableRow>
-                    </TableHeader>
-                    <TableBody>
-                        {data.map((row, index) => (
-                            <TableRow key={index}>
-                                <TableCell className="border border-gray-300 px-2 py-2 text-sm">
-                                    <input
-                                        type="text"
-                                        value={row.year}
-                                        onChange={(e) => handleInputChange(sectionKey, index, "year", e.target.value)}
-                                        className="w-full text-xl border-radius-0 px-3 py-2 text-base text-center leading-normal"
-                                    />
-                                </TableCell>
-                                <TableCell className="border border-gray-300 px-2 py-2 text-sm text-center leading-normal">{row.type}</TableCell>
-                            </TableRow>
-                        ))}
-                    </TableBody>
-                </Table>
-            </div>
-        </div>
-    );
+    const ContentComponent = layerNm ? getLayerContentComponent(layerNm) : null;
     return (
         <div id="popup" className="absolute top-0 right-0 w-[350px] h-[calc(100vh-10rem)] bg-white border-r border-gray-300 flex flex-col overflow-hidden transition-all duration-300 z-[1000]">
             <div className="card-header bg-primary flex items-center justify-between p-4">
@@ -136,15 +74,10 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void,
                 </button>
             </div>
             <div className="overflow-y-auto flex-1">
-                <VerticalTable headName='LX 연계정보' tableData={[tableData]} headlist={headlist} pageSize={20} total={0} children={undefined} cellClick={undefined} onPageChange={function (page: number): void {
+            <VerticalTable headName='LX 연계정보' tableData={[tableData]} headlist={headlist} pageSize={20} total={0} children={undefined} cellClick={undefined} onPageChange={function (page: number): void {
                     throw new Error("Function not implemented.");
                 }}></VerticalTable>
-                <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>
-                {renderSection("보수 및 갱신", repairData, "repair")}
-                {renderSection("청소 및 준설", cleaningData, "cleaning")}
-                {renderSection("점검 및 진단", inspectionData, "inspection")}
+              {ContentComponent && <ContentComponent />}
             </div>
             <div className="w-full mx-5 flex items-center justify-end space-x-2">
                 <Button className="px-4 mr-5 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700">