diff --git a/apps/sn/app/components/lib/api/index.ts b/apps/sn/app/components/lib/api/index.ts new file mode 100644 index 000000000..a171844a1 --- /dev/null +++ b/apps/sn/app/components/lib/api/index.ts @@ -0,0 +1,61 @@ +const BASE_URL = process.env.NEXT_PUBLIC_SEWERAGE_API_URL || ''; + +export const postData = async (url: string, data: object): Promise => { + const options: RequestInit = { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify(data), + }; + const res = await fetch(`${BASE_URL}/${url}`, options); + const resData = await res.json(); + return resData; +}; + +export const postMutiPart = async (url: string, data: FormData): Promise => { + const options: RequestInit = { + method: "POST", + body: data, + }; + const res = await fetch(`${BASE_URL}/${url}`, options); + const resData = await res.json(); + return resData; +}; + +export const putData = async (url: string, data: object): Promise => { + const options: RequestInit = { + method: "PUT", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify(data), + }; + const res = await fetch(`${BASE_URL}/${url}`, options); + const resData = await res.json(); + return resData; +}; + +export const getData = async (url: string): Promise => { + const res = await fetch(`${BASE_URL}/${url}`, { + method: "GET", + }); + if (res.ok) { + const data = await res.json(); + return data; + } + throw new Error('Failed to fetch data'); +}; + +export const deleteData = async (url: string, data?: object): Promise => { + const options: RequestInit = { + method: "DELETE", + headers: { + "Content-Type": "application/json", + }, + body: data ? JSON.stringify(data) : undefined, + }; + const res = await fetch(`${BASE_URL}/${url}`, options); + const resData = await res.json(); + return resData; +}; \ No newline at end of file diff --git a/apps/sn/app/components/verticalTable.tsx b/apps/sn/app/components/verticalTable.tsx index b792f3426..36451bfbd 100644 --- a/apps/sn/app/components/verticalTable.tsx +++ b/apps/sn/app/components/verticalTable.tsx @@ -47,7 +47,6 @@ export function VerticalTable({ }, [onPageChange, resetPageNo]); useEffect(() => { - console.log('data',tableData) if (tableData.length > 0 && tableData[0]) { setFormData(tableData[0] as { [key: string]: string | number | boolean }); } diff --git a/apps/sn/app/map/featureClickEventPopup.tsx b/apps/sn/app/map/featureClickEventPopup.tsx index 545bc1697..6dd573732 100644 --- a/apps/sn/app/map/featureClickEventPopup.tsx +++ b/apps/sn/app/map/featureClickEventPopup.tsx @@ -1,8 +1,10 @@ 'use client' import { VerticalTable } from "@/components/verticalTable"; import { Button, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@common/components/ui"; -import { useState } from "react"; -import { CommonTableColumn } from "./table"; +import { use, useEffect, useState } from "react"; +import { SwtrmtFcltCol } from "./table"; +import { useGisContext } from "@common/business_components/ui/map/Gis"; +import { getData } from "@/components/lib/api"; const inputColumn = [ { id: "title", title: "설치주제", type: "select", options: ["BTL", "재정사업"] }, { id: "guyeok", title: "처리구역", type: "select", options: ["구역1", "구역2"] }, @@ -12,9 +14,23 @@ const inputColumn = [ { id: "flow", title: "흐름방식", type: "select", options: ["자연유하", "압송"] }, { id: "place", title: "매설위치", type: "select", options: ["도로", "하상"] }, ]; - -const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void, featureData:any }) => { - // TODO: 런타임 에러 해결 필요 +// TODO: +const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void, featureData: any }) => { + const { gisMap } = useGisContext() as unknown as { checkedLayerIds: React.MutableRefObject; treeData: { lyrSn: number }[] | null; gisCore: any; gisMap: any; }; + const featureId = featureData.getId(); // 피처의 속성 가져오기 + const [layerNm, setLayerNm] = useState(""); // 레이어 이름 상태 + // 피쳐데이터의 현재 레이어 이름 가져오는 함수 + const getSelectedLayers = () => { + const layers = gisMap.getLayers().getArray(); // gisMap에서 모든 레이어 가져오기 + let featureLayer: { get: (key: string) => any } = { get: (key: string) => null }; // 피처가 속한 레이어를 찾기 위한 변수 + layers.forEach((layer: any) => { + const source = layer.getSource(); + if (source && source.hasFeature && source.hasFeature(featureData)) { + featureLayer = layer; // 피처가 속한 레이어 찾기 + } + }); + return featureLayer.get('lyrNm'); // 레이어 이름 출력 + }; const [repairData, setRepairData] = useState([ { year: "2025", type: "개대체" }, { year: "2025", type: "보수" }, @@ -46,18 +62,21 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void, updateData(inspectionData, setInspectionData); } }; - function transformFeatureDataToArray(featureData: any, keys: string[]) { + async function transformFeatureDataToArray(featureId: any, keys: string[]) { + const data = await getData(`v1/map/features/${featureId}`); // 필요한 키만 추출하여 새로운 객체 생성 + console.log("data", data); const transformedData = keys.reduce((acc, key) => { - acc[key] = featureData[key] !== undefined ? featureData[key] : "N/A"; // 값이 없으면 "N/A"로 처리 + acc[key] = data[key] !== undefined ? data[key] : "N/A"; // 값이 없으면 "N/A"로 처리 return acc; }, {} as Record); - + // 배열로 감싸서 반환 return [transformedData]; } - const keys = CommonTableColumn.map((column) => column.id); - const transformedFeatureData = transformFeatureDataToArray(featureData, keys); + const keys = SwtrmtFcltCol.map((column) => column.id); + const transformedFeatureData = transformFeatureDataToArray(featureId, keys); + useEffect(() => { setLayerNm(getSelectedLayers()) }, [featureId]); const renderSection = (title: string, data: { year: string; type: string }[], sectionKey: string) => (
{/* 섹션 제목 */} @@ -96,7 +115,7 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void,