ONAANDALL/frontend
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'iipbs/sn/dev' of https://www.onasys.co.kr:3000/ONAANDALL/frontend into iipbs/sn/dev

Browse Source
This commit is contained in:
yschoi
2025-07-07 10:14:20 +09:00
parent 11f1c75ac4 80b356f66b
commit 6269fbc8c5
9 changed files with 82 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/sn/.env.local
+3 -2
View File
@@ -2,9 +2,10 @@ NEXT_PUBLIC_SITE_ID = SN
NEXT_PUBLIC_PORT = 3002
NEXT_PUBLIC_PROXY_HOST = http://localhost:3002
#NEXT_PUBLIC_PROXY_HOST = http://sn.hasu.or.kr:3002
NEXT_PUBLIC_SERVER_API_URL = http://dev.onasys.co.kr:8000
NEXT_PUBLIC_GEOSERVER_URL = http://rsone.iptime.org:10010/geoserver
NEXT_PUBLIC_SERVER_API_URL = http://dev.onasys.co.kr:8000
NEXT_PUBLIC_GEOSERVER_URL = http://rsone.iptime.org:10010/geoserver
NEXT_PUBLIC_LX_GEOSERVER_URL = http://con.mind-one.co.kr:11306/geoserver #TODO 운영에서 바꿔야 함
NEXT_PUBLIC_RSONE_DC_URL = https://apigateway.rsonesoft.com #자료관 데이터
NEXT_PUBLIC_CLAIM_NAME = Authorization
NEXT_PUBLIC_AUTH_USER_ID = token-id
NEXT_PUBLIC_ACCESS_TOKEN = access-token
apps/sn/app/(map-layout)/map/components/popupComponent/MsSwagePpl.tsx
-1
View File
@@ -4,7 +4,6 @@ import React, { useState } from 'react'
import InputSection from '../InputSection';
import { handleInputChange } from '../common';
// 하수관로
const inputColumn = [
{ id: "title", title: "설치주제", type: "select", options: ["BTL", "재정사업"] },
apps/sn/app/(map-layout)/map/components/popupComponent/chart/aplcnYms.ts
+12 -4
View File
@@ -1,5 +1,5 @@
import {useState, useEffect} from 'react';
import { getData } from '@/components/lib/api';
import { getData, getDcData } from '@/components/lib/api';
import moment from "moment";
export type TInftwtAnls = {
@@ -64,6 +64,13 @@ export type TOilqData = {
mtrngDt: string; // 계측일시
oilq: number; // 유량
}
export const getDcTree = async () => {
const queryString = '';
const result = await getDcData(`/api/v1/dc/tree${queryString ? `?${queryString}` : ''}`);
return result;
};
const getOptionsAplcnYm = (yyyymms: string[]): { text: string; val: string }[] => {
let yyyymms1 = yyyymms.map(dateStr => {
const year = dateStr.slice(0, 4);
@@ -88,6 +95,7 @@ const selectAplcnYms = async(gubun:string) => { // 상수사용월
console.error(error);
}
};
export const useAplcnYms = (gubun:string) => {
const [data, setData] = useState<{ text: string; val: string }[]>([]);
@@ -124,7 +132,7 @@ export const selectInftwtAnls = async(aplcnYm:String) => { // 침입수분석
};
export const getChartDataInftwtAnlsRslt = (arr: TInftwtAnlsRslt[]): { label: string; val: number }[] => {
const options = arr.map(anlsRslt => ({
label: moment(anlsRslt.anlsTm, "YYYYMMDDHHmmss").format("DD HH:mm"),
label: moment(anlsRslt.anlsTm, "YYYYMMDDHHmmss").format("HH시"),
val: anlsRslt.predcOilq,
}));
return options;
@@ -223,14 +231,14 @@ export const selectRdiiAnls = async(aplcnYm:String) => { // 침입수분석
};
export const getChartDataRdiiAnlsRslt = (arr: TRdiiAnlsRslt[]): { label: string; val: number }[] => {
const options = arr.map(anlsRslt => ({
label: moment(anlsRslt.anlsTm, "YYYYMMDDHHmmss").format("DD HH:mm"),
label: moment(anlsRslt.anlsTm, "YYYYMMDDHHmmss").format("MM-DD HH시"),
val: anlsRslt.predcOilq,
}));
return options;
};
export const getChartDataRdiiAnlsRsltMinq = (arr: TRdiiAnlsRslt[]): { label: string; val: number }[] => {
const options = arr.map(anlsRslt => ({
label: moment(anlsRslt.anlsTm, "YYYYMMDDHHmmss").format("DD HH:mm"),
label: moment(anlsRslt.anlsTm, "YYYYMMDDHHmmss").format("MM-DD HH시"),
val: anlsRslt.minq,
}));
return options;
apps/sn/app/(map-layout)/map/components/popupComponent/chart/infilChart.tsx
+10 -12
View File
@@ -7,16 +7,14 @@ import moment from "moment";
import type { TInftwtAnls, TOilqData } from './aplcnYms';
import * as fn from './aplcnYms';
import { useInfilChartModalStore } from '../chartModalStore'; // 모달 상태 관리 스토어
type ModalOpenProp = {
isModalOpen: boolean,
setIsModalOpen: (open: boolean) => void,
closeModal: () => void,
btnTxt?: string,
pplMngNo?: string, // 관로관리번호
}
type DataType = {label: string; val: number};
const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal, pplMngNo }: ModalOpenProp) => {
const InfilChart = ({ pplMngNo }: ModalOpenProp) => {
const { isOpen: isModalOpen, setIsOpen: setIsModalOpen } = useInfilChartModalStore(); // 모달 상태 관리 스토어
const [popupOpen, setPopupOpen] = React.useState(false); // 조회조건팝업
const buttonRef = React.useRef<HTMLButtonElement>(null); // 버튼 참조
const [popupPosition, setPopupPosition] = useState<{ top: number; left: number }>({ top: 0, left: 0 }); // 팝업 위치
@@ -30,8 +28,8 @@ const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal, pplMngNo
});
const [inftwtQty, setInftwtQty] = useState<number>(0); // 침입수량
const aplcnYms = fn.useAplcnYms('inftwtAnlsRslt'); // 상수사용월 데이터 가져오기
pplMngNo = "L"+pplMngNo; // "L13101003";
console.log("pplMngNo", pplMngNo);
pplMngNo = "L"+pplMngNo; // inp파일에 하수관로와 맨홀의 번호가 같으면 분석 오류가 발행하여
const openPopup = () => {
if (buttonRef.current) {
const rect = buttonRef.current.getBoundingClientRect(); // 버튼 위치 계산
@@ -51,7 +49,7 @@ const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal, pplMngNo
useEffect(() => {
if (isModalOpen === false) {
setPopupOpen(false); // 모달이 닫힐 때 조회조건팝업은 열어두기
setPopupOpen(true); // 모달이 닫힐 때 조회조건팝업은 열어두기
setAplcnYm(""); // 상수사용월 초기화
setInftwtAnlss([]); // 침입수분석 초기화
setInftwtAnlsInfos([{ val: 0, text: '선택' }]); // 침입수분석정보 초기화
@@ -70,7 +68,7 @@ const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal, pplMngNo
setInftwtAnlsInfos([{ val: 0, text: '선택' }]);
return;
}
const dcData = fn.getDcTree(); // 자료관 데이터 가져오기
fn.selectInftwtAnls(aplcnYm)
.then((data) => {
setInftwtAnlss(data ?? []);
@@ -130,7 +128,7 @@ const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal, pplMngNo
<>
<div className="text-black text-3xl font-bold mb-5">침입수분석결과</div>
<div className='grid grid-cols-4 gap-4'>
<div className='grid grid-cols-[1fr_3fr] gap-4'>
<div className="grid grid-rows-4 gap-4 mb-4">
<Button className="bg-white text-white w-[130px] font-bold px-4 mt-2 py-2" onClick={openPopup}>
분석 입력현황 조회
@@ -154,7 +152,7 @@ const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal, pplMngNo
</div>
</div>
{/* 차트 */}
<div className="w-[560px] h-[320px] bg-white text-2xl">
<div className="bg-white text-3xl">
<MainChart chartConfig={chartConfig} chartForm={chartForm} chartData={chartData} chartTitle={'관로유량'}
yFieldText2="시간" yFieldText="유량(m³/h)"/>
</div>
@@ -271,4 +269,4 @@ const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal, pplMngNo
)
}
export default InfilChart
export default React.memo(InfilChart);
apps/sn/app/(map-layout)/map/components/popupComponent/chart/rdiiChart.tsx
+7 -9
View File
@@ -7,16 +7,14 @@ import moment from "moment";
import type { TRdiiAnls, TRdiiAnlsRslt, TOilqData } from './aplcnYms';
import * as fn from './aplcnYms';
import { useRdiiChartModalStore } from '../chartModalStore'; // 모달 상태 관리 스토어
type ModalOpenProp = {
isModalOpen: boolean,
setIsModalOpen: (open: boolean) => void,
closeModal: () => void,
btnTxt?: string,
pplMngNo: string, // 관로관리번호
}
type DataType = {label: string; val: number};
const RdiiChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal, pplMngNo }: ModalOpenProp) => {
const RdiiChart = ({ pplMngNo }: ModalOpenProp) => {
const { isOpen: isModalOpen, setIsOpen: setIsModalOpen } = useRdiiChartModalStore(); // 모달 상태 관리 스토어
const [popupOpen, setPopupOpen] = React.useState(false); // 조회조건팝업
const buttonRef = React.useRef<HTMLButtonElement>(null); // 버튼 참조
const [popupPosition, setPopupPosition] = useState<{ top: number; left: number }>({ top: 0, left: 0 }); // 팝업 위치
@@ -52,7 +50,7 @@ const RdiiChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal, pplMngNo }
useEffect(() => {
if (isModalOpen === false) {
setPopupOpen(false); // 모달이 닫힐 때 팝업은
setPopupOpen(true); // 모달이 닫힐 때 팝업은
setAplcnYm(""); // 상수사용월 초기화
setRdiiAnlss([]); // 강우유입수분석 초기화
setRdiiAnlsInfos([{ val: 0, text: '선택' }]); // 강우유입수분석정보 초기화
@@ -117,7 +115,7 @@ const RdiiChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal, pplMngNo }
<>
<div className="text-black text-3xl font-bold mb-5">RDII분석결과</div>
<div className='grid grid-cols-4 gap-4'>
<div className='grid grid-cols-[1fr_3fr] gap-4'>
<div className="grid grid-rows-4 gap-4 mb-4">
<Button className="bg-white text-white w-[130px] font-bold px-4 mt-2 py-2" onClick={openPopup}>
분석 입력현황 조회
@@ -146,7 +144,7 @@ const RdiiChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal, pplMngNo }
</div>
</div>
{/* 차트 */}
<div className="w-[560px] h-[320px] bg-white text-2xl">
<div className="bg-white text-2xl">
<MainChart chartConfig={chartConfig} chartForm={chartForm} chartData={chartData} chartTitle={'관로유량'}
yFieldText2="시간" yFieldText="유량(m³/h)" />
</div>
@@ -263,4 +261,4 @@ const RdiiChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal, pplMngNo }
)
}
export default RdiiChart
export default React.memo(RdiiChart);
apps/sn/app/(map-layout)/map/components/popupComponent/chartModalStore.ts
+16
View File
@@ -0,0 +1,16 @@
import { create } from 'zustand';
interface ModalStore {
isOpen: boolean;
setIsOpen: (open: boolean) => void;
}
export const useInfilChartModalStore = create<ModalStore>((set) => ({
isOpen: false,
setIsOpen: (open: boolean) => set({ isOpen: open }),
}));
export const useRdiiChartModalStore = create<ModalStore>((set) => ({
isOpen: false,
setIsOpen: (open: boolean) => set({ isOpen: open }),
}));
apps/sn/app/(map-layout)/map/featureClickEventPopup.tsx
+7 -40
View File
@@ -9,6 +9,7 @@ import { getLayerContentComponent } from "./components/common";
import { SwtrmtFcltCol, SwtrmtPrcsZoneCol, untrtSwgRainCol1, untrtSwgRainCol2, MsSwagePplCol, SewagePump, MsSwageMhlCol, stofcbrCol } from "./components/common/table";
import InfilChart from './components/popupComponent/chart/infilChart';
import RdiiChart from './components/popupComponent/chart/rdiiChart';
import { useInfilChartModalStore, useRdiiChartModalStore } from "./components/popupComponent/chartModalStore";
// TODO:
const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void, featureData: any }) => {
@@ -28,9 +29,8 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void,
const [isAdditionalDataLoading, setIsAdditionalDataLoading] = useState(false);
const [additionalDataError, setAdditionalDataError] = useState<string | null>(null);
// 🎯 InfilChart 및 RdiiChart 관련 상태 추가
const [isModalInfil, setIsModalInfil] = useState(false);
const [isModalRdii, setIsModalRdii] = useState(false);
const [btnTxt, setBtnTxt] = useState<string>("");
const { setIsOpen:setIsModalInfil } = useInfilChartModalStore();
const { setIsOpen:setIsModalRdii } = useRdiiChartModalStore();
// 🎯 관로관리번호 추출
const pplMngNo = featureData?.values_?.fclt_mng_no || "";
@@ -237,25 +237,6 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void,
setIsModalOpen(false); // 모달 닫기
};
// 🎯 모달 열기/닫기 함수들
const openModalInfil = () => {
setBtnTxt("Infil");
setIsModalInfil(true);
};
const closeModalInfil = () => {
setIsModalInfil(false);
};
const openModalRdii = () => {
setBtnTxt("RDII");
setIsModalRdii(true);
};
const closeModalRdii = () => {
setIsModalRdii(false);
};
const btnClickEvent = async () => {
const bodyData: Record<string, any> = {}
if (buttonChk && contentRef.current) {
@@ -305,17 +286,15 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void,
{/* 🎯 하수관로일 때만 Infil/RDII 버튼 표시 */}
{layerNm === '하수관로' && (
<>
<Button
<Button onClick={() => setIsModalInfil(true)}
className="px-2 py-1 text-xl text-blue-600 border border-blue-600 rounded hover:bg-gray-700"
color="white"
onClick={openModalInfil}
>
침입수분석
</Button>
<Button
<Button onClick={() => setIsModalRdii(true)}
className="px-2 py-1 text-xl text-gray-600 border border-gray-600 rounded hover:bg-gray-700"
color="white"
onClick={openModalRdii}
>
RDII분석
</Button>
@@ -363,20 +342,8 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void,
</div>
{/* 🎯 InfilChart 및 RdiiChart 컴포넌트 추가 */}
<InfilChart
btnTxt={btnTxt}
isModalOpen={isModalInfil}
setIsModalOpen={setIsModalInfil}
closeModal={closeModalInfil}
pplMngNo={pplMngNo}
/>
<RdiiChart
btnTxt={btnTxt}
isModalOpen={isModalRdii}
setIsModalOpen={setIsModalRdii}
closeModal={closeModalRdii}
pplMngNo={pplMngNo}
/>
<InfilChart pplMngNo={pplMngNo} />
<RdiiChart pplMngNo={pplMngNo} />
</div>
)
}
apps/sn/app/components/lib/api/index.ts
+12
View File
@@ -54,6 +54,18 @@ export const getData = async (url: string, data?: object): Promise<any> => {
throw new Error('Failed to fetch data');
};
export const getDcData = async (url: string, data?: object): Promise<any> => {
console.log(url);
const res = await fetch('/dc-service'+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<any> => {
const options: RequestInit = {
method: "DELETE",
apps/sn/middleware.ts
+15
View File
@@ -1,4 +1,5 @@
import { NextRequest, NextResponse } from "next/server";
import path from "path";
const AUTH_USER_ID = process.env.NEXT_PUBLIC_AUTH_USER_ID || "token-id";
const CLAIM_NAME = process.env.NEXT_PUBLIC_CLAIM_NAME || "Authorization";
@@ -6,6 +7,7 @@ const SERVER_API_URL = process.env.NEXT_PUBLIC_SERVER_API_URL || "";
const SEWERAGE_API_URL = process.env.NEXT_PUBLIC_SEWERAGE_API_URL || "";
const GEOSERVER_URL = process.env.NEXT_PUBLIC_GEOSERVER_URL || "";
const LX_GEOSERVER_URL = process.env.NEXT_PUBLIC_LX_GEOSERVER_URL || "";
const RSONE_DC_URL = process.env.NEXT_PUBLIC_RSONE_DC_URL || "";
export function middleware(req: NextRequest) {
console.log("Middleware 진입:", req.nextUrl.pathname);
@@ -80,6 +82,17 @@ export function middleware(req: NextRequest) {
});
}
if (pathname.startsWith("/dc-service")) {
const requestHeaders = new Headers(req.headers);
const newUrl = `${RSONE_DC_URL}${pathname}`;
console.log(
`[Middleware] Rewriting from '/dc-service' path to: ${newUrl}`,
);
return NextResponse.rewrite(new URL(newUrl), {
headers: requestHeaders,
});
}
return NextResponse.next();
}
@@ -91,5 +104,7 @@ export const config = {
"/user-service/:path*",
"/cms-service/:path*",
"/sewerage-service/api/v1/map/geometry/:path*",
"/dc-service/:path*",
],
};