팝업 크기 적용

apps/wr/app/map/components/newWindowPopup.tsx

@@ -18,7 +18,6 @@ import ReuseMngFacility from './layerPopup/reuseMngFacility';
 interface NewWindowPopupProps {
   featureData: any;
   seletectedLayerNm?: string
-  viewMode?: 'list' | 'detail' | 'nothing'
   onFeatureSelect: (data: any) => void;
   onClose: () => void;
 }
@@ -125,9 +124,6 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
           layerId === '하수처리시설' ? selectedProps?.swtrmt_fclt_nm :
             null;
     if (!featureCd || featureCd === fcltPk) return;
-    setFcltPk(featureCd);
-    setActiveTab(featureCd);
-    setViewMode("detail");
     if (layerId === '하수재이용시설') {
       fetchpbnstDetail(featureCd, setTabData);
     } else if (layerId === '하수처리시설') {
@@ -140,6 +136,9 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
         else if (layerId === '수요처') setMngList(res);
       });
     }
+    setFcltPk(featureCd);
+    setActiveTab(featureCd);
+    setViewMode("detail");
   }, [featureData]);
   ///////////////////////////////////////////// 피쳐데이터 선택 시 각 시설별 데이터 처리 ///////////////////////////////////////////////
 
@@ -167,15 +166,13 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
     }
     return null; // 조건에 맞는 콘텐츠가 없을 경우
   };
-
   return (
     viewMode == 'nothing' ? <></> :
       <NewWindowPortal
         onClose={memoizedOnClose}
         title="시설 상세 정보"
-        width={viewMode == 'list' ? window.screen.availWidth : 1100}
-        height={viewMode == 'list' ? window.screen.availHeight : layerId == '하수처리시설' && viewMode == 'detail' ? 450 : 900}
         scrollbars='yes'
+        viewMode={viewMode}
         resizable='no'>
         {/* 체크된 레이어에 따른 조건부 렌더링 */}
         {renderConditionalContent()}

apps/wr/app/map/components/newWindowPortal.tsx

@@ -31,9 +31,10 @@ interface NewWindowPortalProps {
   height?: number;
   resizable?: string;
   scrollbars?: string;
+  viewMode?: 'list' | 'detail' | 'nothing';
 }
 
-const NewWindowPortal: React.FC<NewWindowPortalProps> = ({ children, onClose, title = "", width = 900, height = 800, resizable = "yes", scrollbars = "yes" }) => {
+const NewWindowPortal: React.FC<NewWindowPortalProps> = ({ children, onClose, title = "", resizable = "yes", scrollbars = "yes", viewMode }) => {
   const [container, setContainer] = useState<HTMLElement | null>(null);
   const newWindowRef = useRef<Window | null>(null);
   const onCloseRef = useRef(onClose);
@@ -46,7 +47,15 @@ const NewWindowPortal: React.FC<NewWindowPortalProps> = ({ children, onClose, ti
   const handleUnload = useCallback(() => {
     onCloseRef.current();
   }, []);
-
+  useEffect(() => {
+    if (newWindowRef.current) {
+      if (viewMode == 'detail') {
+        newWindowRef.current.resizeTo(1100, 700);
+      } else {
+        newWindowRef.current.resizeTo(screen.availWidth, screen.availHeight);
+      }
+    }
+  }, [viewMode]);
   useEffect(() => {
     // 이미 창이 열려있으면 새로 열지 않음
     if (newWindowRef.current && !newWindowRef.current.closed) return;
@@ -57,11 +66,11 @@ const NewWindowPortal: React.FC<NewWindowPortalProps> = ({ children, onClose, ti
     const screenHeight = window.innerHeight ?? document.documentElement.clientHeight;
 
     // 중앙 위치 계산
-    const left = screenLeft + (screenWidth - width) / 2;
-    const top = screenTop + (screenHeight - height) / 2;
+    const left = screenLeft + (screenWidth - window.screen.width) / 2;
+    const top = screenTop + (screenHeight - window.screen.height) / 2;
 
     // 1. 새 창을 열고 참조를 저장합니다.
-    const popupOptions = `width=${width},height=${height},left=${left}, top=${top}, resizable=${resizable},scrollbars=${scrollbars}`;
+    const popupOptions = `width=${window.screen.width},height=${window.screen.height},left=${left}, top=${top}, resizable=${resizable},scrollbars=${scrollbars}`;
     newWindowRef.current = window.open('', title, popupOptions);
 
     if (newWindowRef.current) {