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

검색 화면 화면 조정

Browse Source
This commit is contained in:
yschoi
2025-07-26 20:09:41 +09:00
parent 4917084bbf
commit b2bbdb8ad4
13 changed files with 170 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/sn/app/(map-layout)/map/page.tsx
+17 -17
View File
@@ -41,7 +41,7 @@ const Map = () => {
const fetchData = async () => {
try {
const data = await getData('v1/map/lyrStngs/SN_NETWORK');
const data = await getData("v1/map/lyrStngs/SN_NETWORK");
setTreeData(data);
} catch (error) {
console.error("데이터 불러오기 실패:", error);
@@ -115,22 +115,22 @@ const Map = () => {
};
return (
<div className="bg-container">
<Gis
treeData={treeData}
isSearch={true}
gisMaps={gisMaps}
isMiniMap={false}
searchView={SearchModal}
detailView={FeatureClickEventPopup}
onFeatureSelect={onFeatureSelect}
setIsOpen={setIsOpen}
setFeatureData={setFeatureData}
featureData={featureData}
setIsSearchModalOpen={setIsSearchModalOpen}
isOpen={isOpen}
isSearchModalOpen={isSearchModalOpen}
onCheckedLayersChange={undefined}
/>
<Gis
treeData={treeData}
isSearch={true}
gisMaps={gisMaps}
isMiniMap={false}
searchView={SearchModal}
detailView={FeatureClickEventPopup}
onFeatureSelect={onFeatureSelect}
setIsOpen={setIsOpen}
setFeatureData={setFeatureData}
featureData={featureData}
setIsSearchModalOpen={setIsSearchModalOpen}
isOpen={isOpen}
isSearchModalOpen={isSearchModalOpen}
onCheckedLayersChange={undefined}
/>
</div>
);
};
apps/sn/app/(map-layout)/map/searchModal/basicTab.tsx
+1 -1
View File
@@ -78,7 +78,7 @@ const BasicTab: React.FC<BasicTabProps> = ({
setVar2,
}) => {
return (
<div className="relative border rounded-lg p-6 mt-4 w-full h-[10vh]">
<div className="relative border rounded-lg p-6 w-full h-[10vh]">
{/* 구분 */}
<div className="mb-3 flex items-center justify-between gap-4">
<div className="flex items-center">
apps/sn/app/(map-layout)/map/searchModal/operationTab.tsx
+1 -1
View File
@@ -109,7 +109,7 @@ const OperationTab: React.FC<OperationTabProps> = ({
setYearFilter,
}) => {
return (
<div className="relative flex flex-col border rounded-lg p-6 mt-4 w-full h-[10vh]">
<div className="relative flex flex-col border rounded-lg p-6 w-full h-[10vh]">
<div className="flex items-center mb-3">
<SelectBox
className="w-80 mr-8"
apps/sn/app/(map-layout)/map/searchModal/reportTab.tsx
+1 -1
View File
@@ -61,7 +61,7 @@ const ReportTab: React.FC<BasicTabProps> = ({
return (
<div className="relative flex flex-col border rounded-lg p-6 mt-4 w-full h-[10vh]">
<div className="relative flex flex-col border rounded-lg p-6 w-full h-[10vh]">
<div className="flex items-center mb-3">
<SelectBox
className="w-[150px] mr-8"
apps/sn/app/(map-layout)/map/searchModal/searchModal.tsx
+11 -10
View File
@@ -235,7 +235,7 @@ const SearchModal: React.FC<SearchModalProps> = ({
} else if (activeTab === 'operation') {
const RequestDTO: Record<string, string> = {
page: `${curPage - 1}`,
size: '4',
size: '5',
};
if (var1) RequestDTO.bizNm = var1;
if (var2 != '0' && var2) RequestDTO.bizTyCd = var2;
@@ -521,8 +521,8 @@ const SearchModal: React.FC<SearchModalProps> = ({
try {
const RequestDTO: Record<string, string> = {
page: `${detailCurPage - 1}`,
size: '4',
bizId: tableData[index % 4].bizId,
size: '5',
bizId: tableData[index % 5].bizId,
};
const res = await getData(`v1/bizInfo/fclts?${new URLSearchParams(RequestDTO).toString()}`);
@@ -557,7 +557,7 @@ const SearchModal: React.FC<SearchModalProps> = ({
try {
const RequestDTO: Record<string, string> = {
page: `${detailCurPage - 1}`,
size: '4',
size: '5',
bizId: String(detailBizId),
};
const res = await getData(`v1/bizInfo/fclts?${new URLSearchParams(RequestDTO).toString()}`);
@@ -620,6 +620,7 @@ const SearchModal: React.FC<SearchModalProps> = ({
}))}
onValueChange={(value: string) => setActiveTab(value)}
>
</UITab>
{/* 각각의 탭 영역 */}
{/* 기본정보 탭 */}
{activeTab === 'basic' && (
@@ -681,12 +682,12 @@ const SearchModal: React.FC<SearchModalProps> = ({
/>
)}
{/* </UITab2> */}
</UITab>
{/* 📋 결과 리스트 */}
{/* 기본정보 탭, 하수도정비기본계획보고서 탭 */}
{(activeTab === 'basic' || activeTab === 'report') && (
<div className="h-[80vh] w-full overflow-hidden rounded-lg border">
<div className="h-[79vh] w-full overflow-hidden rounded-lg border">
{/* 테이블2 영역 (가로/세로 스크롤 가능) */}
<div className="flex-1 px-2 pb-2">
<LoadingOverlay isLoading={isLoading} />
@@ -711,7 +712,7 @@ const SearchModal: React.FC<SearchModalProps> = ({
{/* 운영정보 탭 */}
{activeTab === 'operation' && (
<>
<div className="h-[35vh] w-full overflow-hidden rounded-lg border">
<div className="h-[39vh] w-full overflow-hidden rounded-lg border">
<div className="flex-1 px-2 pb-2">
<LoadingOverlay isLoading={isLoading} />
<UiTable
@@ -723,7 +724,7 @@ const SearchModal: React.FC<SearchModalProps> = ({
}
tableData={tableData}
headlist={dynamicHeadlist}
pageSize={4}
pageSize={5}
total={tableCount}
cellClick={handleOperationCellClick}
onPageChange={setCurPage}
@@ -733,7 +734,7 @@ const SearchModal: React.FC<SearchModalProps> = ({
</div>
</div>
<div className="h-[35vh] w-full overflow-hidden rounded-lg border">
<div className="h-[39vh] w-full overflow-hidden rounded-lg border">
<div className="flex-1 px-2 pb-2">
<LoadingOverlay isLoading={isDetailLoading} />
<UiTable
@@ -745,7 +746,7 @@ const SearchModal: React.FC<SearchModalProps> = ({
}
tableData={detailTableData}
headlist={dynamicHeadlist2}
pageSize={4}
pageSize={5}
total={detailTableCount}
cellClick={undefined}
onPageChange={setDetailCurPage}
apps/sn/app/(map-layout)/map/searchModal/swageMhl.tsx
+9
View File
@@ -30,6 +30,13 @@ const SwageMhl: React.FC<SwageMhlProps> = ({
setYearFilter,
handleSearch,
}) => {
const handleEnterKey = (e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key === 'Enter') {
handleSearch();
}
};
return (
<div className="mb-3">
<div className="mb-2 flex items-center">
@@ -70,6 +77,7 @@ const SwageMhl: React.FC<SwageMhlProps> = ({
const val = e.target.value.replace(/[^0-9]/g, "");
setStart1(val);
}}
onKeyDown={handleEnterKey}
/>
<span className="mx-2 text-xl font-semibold">~</span>
<Input
@@ -81,6 +89,7 @@ const SwageMhl: React.FC<SwageMhlProps> = ({
const val = e.target.value.replace(/[^0-9]/g, "");
setEnd1(val);
}}
onKeyDown={handleEnterKey}
/>
{/* 조회 버튼 */}
<div className="flex-1 flex justify-end">
apps/sn/app/(map-layout)/map/searchModal/swagePmstn.tsx
+11
View File
@@ -31,6 +31,13 @@ const SwagePmstn: React.FC<SwagePmstnProps> = ({
setYearFilter,
handleSearch,
}) => {
const handleEnterKey = (e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key === 'Enter') {
handleSearch();
}
};
return (
<div className="mb-3">
<div className="flex items-center mb-2">
@@ -53,6 +60,7 @@ const SwagePmstn: React.FC<SwagePmstnProps> = ({
const val = e.target.value.replace(/[^0-9]/g, "");
setStart1(val);
}}
onKeyDown={handleEnterKey}
/>
<span className="mx-2 text-xl font-semibold">~</span>
<Input
@@ -64,6 +72,7 @@ const SwagePmstn: React.FC<SwagePmstnProps> = ({
const val = e.target.value.replace(/[^0-9]/g, "");
setEnd1(val);
}}
onKeyDown={handleEnterKey}
/>
{/* 양수능력 - 우수맨홀 */}
<Label className="mr-2 w-auto text-xl text-gray-600">
@@ -78,6 +87,7 @@ const SwagePmstn: React.FC<SwagePmstnProps> = ({
const val = e.target.value.replace(/[^0-9]/g, "");
setStart2(val);
}}
onKeyDown={handleEnterKey}
/>
<span className="mx-2 text-xl font-semibold">~</span>
<Input
@@ -89,6 +99,7 @@ const SwagePmstn: React.FC<SwagePmstnProps> = ({
const val = e.target.value.replace(/[^0-9]/g, "");
setEnd2(val);
}}
onKeyDown={handleEnterKey}
/>
{/* 조회 버튼 */}
<div className="flex-1 flex justify-end">
apps/sn/app/(map-layout)/map/searchModal/swagePpl.tsx
+11
View File
@@ -33,6 +33,13 @@ const SwagePpl: React.FC<SwagePplProps> = ({
setYearFilter,
handleSearch,
}) => {
const handleEnterKey = (e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key === 'Enter') {
handleSearch();
}
};
return (
<div className="mb-6">
<div className="mb-2 flex items-center">
@@ -85,6 +92,7 @@ const SwagePpl: React.FC<SwagePplProps> = ({
const val = e.target.value.replace(/[^0-9]/g, "");
setVar1(val);
}}
onKeyDown={handleEnterKey}
/>
<span className="mx-2 text-xl font-semibold">~</span>
<Input
@@ -96,6 +104,7 @@ const SwagePpl: React.FC<SwagePplProps> = ({
const val = e.target.value.replace(/[^0-9]/g, "");
setEnd1(val);
}}
onKeyDown={handleEnterKey}
/>
{/* 연장 */}
<Label className="mr-2 w-auto text-xl text-gray-600">연장(m)</Label>
@@ -108,6 +117,7 @@ const SwagePpl: React.FC<SwagePplProps> = ({
const val = e.target.value.replace(/[^0-9]/g, "");
setStart1(val);
}}
onKeyDown={handleEnterKey}
/>
<span className="mx-2 text-xl font-semibold">~</span>
<Input
@@ -119,6 +129,7 @@ const SwagePpl: React.FC<SwagePplProps> = ({
const val = e.target.value.replace(/[^0-9]/g, "");
setEnd1(val);
}}
onKeyDown={handleEnterKey}
/>
{/* 조회 버튼 */}
<div className="flex-1 flex justify-end">
apps/sn/app/(map-layout)/map/searchModal/swagePrcsFclt.tsx
+12
View File
@@ -35,6 +35,13 @@ const SwagePrcsFclt: React.FC<SwagePrcsFcltProps> = ({
setYearFilter,
handleSearch,
}) => {
const handleEnterKey = (e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key === 'Enter') {
handleSearch();
}
};
return (
<div className="mb-3">
{/* 가동개시일자 */}
@@ -64,6 +71,7 @@ const SwagePrcsFclt: React.FC<SwagePrcsFcltProps> = ({
const val = e.target.value.replace(/[^0-9]/g, "");
setStart1(val);
}}
onKeyDown={handleEnterKey}
/>
<span className="mx-2 text-xl font-semibold">~</span>
<Input
@@ -75,6 +83,7 @@ const SwagePrcsFclt: React.FC<SwagePrcsFcltProps> = ({
const val = e.target.value.replace(/[^0-9]/g, "");
setEnd1(val);
}}
onKeyDown={handleEnterKey}
/>
{/* 처리구역 면적 */}
<Label className="mr-2 w-auto text-xl text-gray-600">처리구역 면적(m²)</Label>
@@ -87,6 +96,7 @@ const SwagePrcsFclt: React.FC<SwagePrcsFcltProps> = ({
const val = e.target.value.replace(/[^0-9]/g, "");
setStart2(val);
}}
onKeyDown={handleEnterKey}
/>
<span className="mx-2 text-xl font-semibold">~</span>
<Input
@@ -98,6 +108,7 @@ const SwagePrcsFclt: React.FC<SwagePrcsFcltProps> = ({
const val = e.target.value.replace(/[^0-9]/g, "");
setEnd2(val);
}}
onKeyDown={handleEnterKey}
/>
{/* 하수처리시설명 */}
<Label className="mr-2 w-auto text-xl text-gray-600">하수처리시설명</Label>
@@ -108,6 +119,7 @@ const SwagePrcsFclt: React.FC<SwagePrcsFcltProps> = ({
onChange={(e) => {
setVar1(e.target.value);
}}
onKeyDown={handleEnterKey}
/>
{/* 조회 버튼 */}
<div className="flex-1 flex justify-end">
apps/sn/app/(map-layout)/map/searchModal/swagePrcsZone.tsx
+9
View File
@@ -27,6 +27,13 @@ const swagePrcsZone: React.FC<swagePrcsZoneProps> = ({
setSgg,
handleSearch,
}) => {
const handleEnterKey = (e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key === 'Enter') {
handleSearch();
}
};
return (
<div className="mb-3">
<div className="mb-2 flex items-center">
@@ -47,6 +54,7 @@ const swagePrcsZone: React.FC<swagePrcsZoneProps> = ({
onChange={(e) => {
setVar1(e.target.value);
}}
onKeyDown={handleEnterKey}
/>
<Label className="mr-2 w-auto text-xl text-gray-600">하수처리시설명</Label>
<Input
@@ -56,6 +64,7 @@ const swagePrcsZone: React.FC<swagePrcsZoneProps> = ({
onChange={(e) => {
setVar2(e.target.value);
}}
onKeyDown={handleEnterKey}
/>
{/* 조회 버튼 */}
<div className="flex-1 flex justify-end">
apps/sn/app/page.tsx
+2 -2
View File
@@ -7,8 +7,8 @@ import { useRouter } from "next/navigation";
export default function Home() {
const router = useRouter();
const userId = "admin1gmail";
const password = "test1234!";
const userId = "CLEANWATER";
const password = "gktneh12!@";
const checkToken = getCookie(AUTH_USER_ID);
useEffect(() => {
packages/common/business_components/src/ui/map/Gis.js
+84 -80
View File
@@ -85,7 +85,7 @@ export const searchUpperPpls = async (fcltMngNo) => {
function Gis({
isOpen,
isOpen, //우측 상세 레이어 팝업
gisMaps,
isSearchModalOpen,
treeData = [],
@@ -100,7 +100,7 @@ function Gis({
onFeatureSelect,
setIsSearchModalOpen,
onCheckedLayersChange,
setData
setData = () => {},
}) {
const mapRef = useRef();
@@ -130,91 +130,95 @@ function Gis({
// Feature Click Event
const handleFeatureSelect = useCallback((data) => {
gisMap = mapInstanceRef.current;
// gisMap = mapInstanceRef.current;
if (!gisMap) {
console.warn('지도가 초기화되지 않았습니다.');
return;
}
// if (!gisMap) {
// console.warn('지도가 초기화되지 않았습니다.');
// return;
// }
// 항상 같은 select 객체 사용
const select = GisApp.Module.select;
if (!select) return;
// // 항상 같은 select 객체 사용
// const select = GisApp.Module.select;
// if (!select) return;
// 1. 기존 선택 초기화
select.resetSelectedFeature();
// // 1. 기존 선택 초기화
// select.resetSelectedFeature();
// 2. data가 OpenLayers Feature 인스턴스인지 확인
let foundFeature = null;
if (data && typeof data.getGeometry === 'function' && typeof data.setStyle === 'function') {
// 이미 Feature 인스턴스라면 그대로 사용
foundFeature = data;
} else {
// 아니면 featureId로 맵에서 Feature 인스턴스를 찾아서 사용
let featureId = data.fid;
const layerName = layerNmRef.current
if (layerName === '하수재이용시설') {
featureId = data.searchPk;
} else if (layerName === '빗물이용시설' || layerName == '중수도시설') {
featureId = data.bdstInfoSn;
} else if (layerName === '하수처리시설') {
featureId = data.bscFctCd;
} else if (layerName === '온배수시설') {
featureId = data.bdstRuseFcltSn;
} else if(layerName == '수요처'){
featureId = data.dmdInfoId.replaceAll('-','')
}
else {
console.warn('해당 레이어에 대한 featureId 매핑 없음', layerNm);
featureId = data.fid || data.id || data.ftrIdn;
}
// gisMap.getLayers().getArray().forEach(layer => {
// const source = layer.getSource?.();
// if (source?.getFeatureById) {
// const feature = source.getFeatureById(String(featureId).trim());
// if (feature) foundFeature = feature;
// }
// });
// const [layerType, id] = String(featureId).split('.');
gisMap.getLayers().getArray().forEach(layer => {
const source = layer.getSource?.();
if (source?.getFeatures) {
const allFeatures = source.getFeatures();
for (const f of allFeatures) {
const id = String(f.getId());
// console.log('id', id, featureId)
if (id && id.split('.')[1] === String(featureId)) {
foundFeature = f;
break;
}
}
}
});
}
// // 2. data가 OpenLayers Feature 인스턴스인지 확인
// let foundFeature = null;
// if (data && typeof data.getGeometry === 'function' && typeof data.setStyle === 'function') {
// // 이미 Feature 인스턴스라면 그대로 사용
// foundFeature = data;
// } else {
// // 아니면 featureId로 맵에서 Feature 인스턴스를 찾아서 사용
// let featureId = data.fid;
// const layerName = layerNmRef.current
// if (layerName === '하수재이용시설') {
// featureId = data.searchPk;
// } else if (layerName === '빗물이용시설' || layerName == '중수도시설') {
// featureId = data.bdstInfoSn;
// } else if (layerName === '하수처리시설') {
// featureId = data.bscFctCd;
// } else if (layerName === '온배수시설') {
// featureId = data.bdstRuseFcltSn;
// } else if(layerName == '수요처'){
// featureId = data.dmdInfoId.replaceAll('-','')
// }
// else {
// console.warn('해당 레이어에 대한 featureId 매핑 없음', layerNm);
// featureId = data.fid || data.id || data.ftrIdn;
// }
// // gisMap.getLayers().getArray().forEach(layer => {
// // const source = layer.getSource?.();
// // if (source?.getFeatureById) {
// // const feature = source.getFeatureById(String(featureId).trim());
// // if (feature) foundFeature = feature;
// // }
// // });
// // const [layerType, id] = String(featureId).split('.');
// gisMap.getLayers().getArray().forEach(layer => {
// const source = layer.getSource?.();
// if (source?.getFeatures) {
// const allFeatures = source.getFeatures();
// for (const f of allFeatures) {
// const id = String(f.getId());
// // console.log('id', id, featureId)
// if (id && id.split('.')[1] === String(featureId)) {
// foundFeature = f;
// break;
// }
// }
// }
// });
// }
// 3. 피처 선택
if (foundFeature) {
let geometry = foundFeature.getGeometry();
if (geometry) {
let extent = geometry.getExtent();
// // 3. 피처 선택
// if (foundFeature) {
// let geometry = foundFeature.getGeometry();
// if (geometry) {
// let extent = geometry.getExtent();
gisMap.getView().fit(extent, {
duration: 300,
padding: [50, 50, 50, 50],
maxZoom: 16,
constrainResolution: true,
nearest: true,
});
}
select.selectFeature(foundFeature, true);
} else {
console.warn('OpenLayers Feature를 찾을 수 없습니다:', data);
}
// gisMap.getView().fit(extent, {
// duration: 300,
// padding: [50, 50, 50, 50],
// maxZoom: 16,
// constrainResolution: true,
// nearest: true,
// });
// }
// select.selectFeature(foundFeature, true);
// } else {
// console.warn('OpenLayers Feature를 찾을 수 없습니다:', data);
// }
setFeatureData(data);
setIsOpen(true);
setIsSearchModalOpen(false);
onFeatureSelect?.(data); // 선택된 피쳐 데이터 콜백 호출
// setFeatureData(data);
// setIsOpen(true);
// setIsSearchModalOpen(false);
onFeatureSelect?.(data); // 선택된 피쳐 데이터 콜백 호출
}, [mapInstanceRef]);
// 지도 생성 및 초기화
packages/common/business_components/src/ui/tab/index.tsx
+1 -1
View File
@@ -20,7 +20,7 @@ const UITab = React.forwardRef<
return (
<Tabs
defaultValue={defaultValue || tabList[0]?.value}
className={"w-full space-x-1 border-b border-gray-200"}
className={"w-full space-x-1 border-gray-200"}
onValueChange={onValueChange}
ref={ref}
{...props}