수정사항 변경

apps/sn/app/components/ui/modal.tsx

@@ -13,7 +13,7 @@ const Modal: React.FC<ModalProps> = ({ isModalOpen, setIsModalOpen, title, child
     return (
         <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
             <DialogOverlay className='z-[200]'/>
-            <DialogContent className="w-auto max-w-[1200px] h-auto max-h-[450px] overflow-auto z-[1000]">
+            <DialogContent className="w-auto max-w-[1200px] min-w-[400px] min-h-[300px] h-auto max-h-[450px] overflow-auto z-[1000]">
                 {title ? <DialogHeader>
                     <DialogTitle>{title}</DialogTitle>
                 </DialogHeader> : null}

apps/sn/app/components/ui/verticalTable.tsx

@@ -8,7 +8,7 @@ type UiTableProps = {
     headlist: UiHeadProps[];
     pageSize: number;
     total: number;
-    children: React.ReactNode | undefined;
+    children: Record<string, React.ReactNode> | undefined;
     cellClick: ((index: number | undefined, headId: string) => void) | undefined;
     onPageChange: (page: number) => void;
     className?: string;
@@ -82,7 +82,7 @@ export function VerticalTable({
                                 </TableCell>
                                 {/* 데이터 값 또는 입력 필드 */}
                                 <TableCell className="text-xs">
-                                    {isEditable ? (
+                                    {children && children[head.id] ? children[head.id] : isEditable ? (
                                         head.type === "select" ? (
                                             <select
                                                 value={formData[head.id] ?? "-"}

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

@@ -5,12 +5,19 @@ import Ssc from "../popupComponent/Ssc";
 import StormWaterPump from "../popupComponent/stormWaterPump";
 import SwtrmtFclt from "../popupComponent/SwtrmtFclt";
 
+type LayerComponentProps = { featureData: any };
+type LayerContentMap = {
+    [key: string]: {
+        component?: React.FC<LayerComponentProps>;
+        props?: any;
+    };
+};
 // 레이어 이름과 컴포넌트를 매핑
 // 레이어 선택시 변경되는 팝업 컨텐츠 동적으로 변경하도록 작업
-const layerContentMap: { [key: string]: { component?: React.FC<any> ; props?: any; } } = {
+const layerContentMap: LayerContentMap = {
     // TODO: gis데이터 추가되면 추가 작업 필요
     "하수처리시설": {
-        component: SwtrmtFclt,
+        component: MsSwagePpl,
     },
     "하수처리구역": { },
     "중점우수토실":{component: Ssc,},
@@ -21,7 +28,7 @@ const layerContentMap: { [key: string]: { component?: React.FC<any> ; props?: an
 };
 
 // 동적 컴포넌트 반환 함수
-export const getLayerContentComponent = (layerNm: string): React.FC => {
+export const getLayerContentComponent = (layerNm: string): React.FC<LayerComponentProps> | null => {
     const component = layerContentMap[layerNm];
     if (!component || !component.component) {
         // component가 없으면 null 반환

apps/sn/app/map/components/popupComponent/MsSwagePpl.tsx

@@ -6,14 +6,15 @@ import { handleInputChange } from '../common';
 // TODO: RDII 버튼인가 그거 팝업 두개 구현 필요
 const inputColumn = [
     { id: "title", title: "설치주제", type: "select", options: ["BTL", "재정사업"] },
-    { id: "guyeok", title: "처리구역", type: "select", options: ["구역1", "구역2"] },
+    { id: "swtrmt_zone_cd", title: "처리구역", type: "select", options: ["구역1", "구역2"] },
     { id: "basu", title: "배수구역", type: "input" },
-    { id: "bungu", title: "배수분구", type: "input" },
+    { id: "mltv_dtdv_nm", title: "배수분구", type: "input" },
     { id: "wltjs", title: "지선/간선", type: "select", options: ["지선", "간선"] },
     { id: "flow", title: "흐름방식", type: "select", options: ["자연유하", "압송"] },
     { id: "place", title: "매설위치", type: "select", options: ["도로", "하상"] },
 ];
-const SwtrmtFclt = () => {
+const SwtrmtFclt = ({ featureData }: { featureData: any }) => {
+    console.log("featureData", featureData);
     const [repairData, setRepairData] = useState([
         { year: "2025", type: "개대체" },
         { year: "2025", type: "보수" },

apps/sn/app/map/components/popupComponent/Ssc.tsx

@@ -12,7 +12,7 @@ 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 Ssc = ({ featureData }: { featureData: any }) => {
   const [isModalOpen, setIsModalOpen] = React.useState(false);
   const openModal = () => {
     setIsModalOpen(true);

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

@@ -1,44 +1,48 @@
+import Modal from '@/components/ui/modal';
 import { VerticalTable } from '@/components/ui/verticalTable';
+import { UiTable } from '@common/business_components/ui';
+import { Button, TableCell } from '@common/components/ui';
 import React, { useState } from 'react'
-import InputSection from '../InputSection';
-import { handleInputChange } from '../common';
+
 // 하수처리시설
-// 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 headList = [
+    { id: "title", title: "하수도정비 기본계획보고서" },
+    { id: "cad", title: "하수도대장 평면도" },]
+const modalHeadList = [
+    { id: "no", title: "번호" },
+    { id: "year", title: "승인연도" },
+    { id: "cad", title: '평면도'},
+    { id: "fileNm", title: "파일명" },  
+    { id: "date", title: "입력시간" },  
+]
+
 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 dataMap = {
-        repair: { data: repairData, setData: setRepairData },
-        cleaning: { data: cleaningData, setData: setCleaningData },
-        inspection: { data: inspectionData, setData: setInspectionData },
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const [modalTitle, setModalTitle] = useState<string>('');
+    const openModal = (title:string) => {
+        setIsModalOpen(true);
+        setModalTitle(title)
+    };
+    const closeModal = () => {
+        setIsModalOpen(false);
     };
     return (
         <div>
-            <VerticalTable headName='자체 입력정보' tableData={[]} headlist={inputColumn} pageSize={20} total={0} children={undefined} cellClick={undefined} isEditable={true} onPageChange={function (page: number): void {
+            <VerticalTable children={{
+                title: <Button onClick={() => openModal('하수도정비 기본계획보고서')}>보고서</Button>,
+                cad: <Button onClick={() => openModal('하수도대장 평면도')}>평면도</Button>,
+            }} headName='디지털 자료관 연계정보' tableData={[]} headlist={headList} pageSize={20} total={0} cellClick={undefined} isEditable={true} onPageChange={function (page: number): void {
                 throw new Error("Function not implemented.");
             }}></VerticalTable>
-            <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>
+            <Modal isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} closeModal={closeModal}>
+                <div className='grid grid-col-2'>
+                    <UiTable headName={modalTitle} tableData={[]} headlist={modalHeadList} pageSize={20} total={0} cellClick={undefined} children={undefined} onPageChange={function (page: number): void {
+                        throw new Error("Function not implemented.");
+                    }
+                    }></UiTable>
+                </div>
+            </Modal>
+        </div>
     )
 }
 

apps/sn/app/map/components/popupComponent/sewagePump.tsx

@@ -6,7 +6,7 @@ const inputColumn = [
     { id: "freq", title: "설계빈도", type: "input" },
 ]
 // 오수펌프
-const sewagePump = () => {
+const sewagePump = ({ featureData }: { featureData: any }) => {
   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.');

apps/sn/app/map/components/popupComponent/stormWaterPump.tsx

@@ -5,7 +5,7 @@ const inputColumn = [
     { id: "bungu", title: "배수분구", type: "input" },
 ]
 // 빗물펌프
-const StormWaterPump = () => {
+const StormWaterPump = ({ featureData }: { featureData: any }) => {
   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.');

apps/sn/app/map/featureClickEventPopup.tsx

@@ -13,7 +13,8 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void,
     const [layerNm, setLayerNm] = useState<string>(""); // 레이어 이름 상태
     const [tableData, setTableData] = useState<any>(null); // 피처 데이터 상태
     const [headlist, setHeadlist] = useState<{ id: string; title: string; }[]>([]); // 컬럼리스트 변경상태
-    let [buttonChk, setButtonChk] = useState(true)
+    const [buttonChk, setButtonChk] = useState(true)
+    const [fetchData, setfetchData] = useState<any>(); // api 호출여부
     const contentRef = useRef<HTMLDivElement>(null);
     // 피쳐데이터의 현재 레이어 이름 가져오는 함수
     const getSelectedLayers = () => {
@@ -31,14 +32,14 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void,
         const fetchData = async () => {
             if (featureId) {
                 const selectedLayerName = getSelectedLayers(); // 레이어 이름 가져오기
-                console.log("Selected Layer Name:", selectedLayerName);
                 setLayerNm(selectedLayerName); // 상태 업데이트
 
-                const data = await getData(`v1/map/features/${featureId}`);
+                const data = await getData(`v1/fclts/${featureId}`);
+                setfetchData(data)
                 switch (selectedLayerName) {
                     case '하수처리시설':
                         setHeadlist(SwtrmtFcltCol);
-                        setButtonChk(false)
+                        setButtonChk(true)
                         break;
                     case '하수처리구역':
                         setHeadlist(SwtrmtPrcsZoneCol)
@@ -110,7 +111,7 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void,
                         저장
                     </Button> : null}
                 </div>
-                {ContentComponent && <ContentComponent />}
+                {ContentComponent && <ContentComponent featureData={fetchData} />}
             </div>
         </div>
     )