물재이용 지도 팝업 창 수정

apps/wr/app/(popUp-layout)/mapFeaturePopup/page.tsx

@@ -82,7 +82,7 @@ export default function MapFeaturePopup() {
   return (
     <>
       {isDetail ? (
-        <div className="fixed inset-0 w-screen h-screen m-0 p-0  bg-white">
+        <div className="m-0 bg-white p-4 md:p-6 pb-24 box-border">
           {layerNm === "tb_wr_bdst_ruse_fclt" ? (
             <RuseDetailPopup bscFctCd={isDetail} />
           ) : layerNm === "tb_il_swage_prcs_fclt" ? (

apps/wr/app/(with-layout)/ruseFcltMng/fcltSttn/pbnstSttn/page.tsx

@@ -237,11 +237,13 @@ export default function PbnstSttn() {
         />
         <UiModal
           body={
-            <PbnstSttnModal
-              data={pbnDetaileData.data || ({} as customPbnst)}
-            ></PbnstSttnModal>
+            <div className="flex-1 min-h-0 overflow-auto p-4 md:p-6">
+              <PbnstSttnModal
+                data={pbnDetaileData.data || ({} as customPbnst)}
+              />
+            </div>
           }
-          bodyClass="w-[68vw] max-w-none h-[90vh]"
+          bodyClass="w-[68vw] max-w-none h-[90vh] overflow-hidden flex flex-col min-h-0"
           open={pbnDetaileData.isModal}
           onOpenChange={(open) => {
             //TODO:OPEN 상태 확인필요

apps/wr/components/lib/func/commom.tsx

@@ -173,7 +173,6 @@ export const getCityOrSgg = (ref: RefObject<ReturnType>) => {
 
 export const safeDate = (value: any): Date | undefined => {
   const date = new Date(value);
-  console.log(' date ', date)
   return isNaN(date.getTime()) ? undefined : date;
 };
 

apps/wr/components/lib/func/mapUtil.ts

@@ -128,15 +128,16 @@ export function featurePopUpOpen(layerNm:string,featureCd:string,popupDetailRef)
   const url = `/mapFeaturePopup?layerNm=${encodeURIComponent(String(layerNm))}&featureCd=${encodeURIComponent(featureCd)} `;
   const width =
     String(layerNm) === "tb_wr_bdst_ruse_fclt"
-      ? Math.floor(window.innerWidth * 0.8)
+      ? Math.floor(window.innerWidth * 0.6)
       : Math.floor(window.innerWidth * 0.4); // 화면 폭의 40%
   const height =
     String(layerNm) === "tb_wr_bdst_ruse_fclt"
-      ? Math.floor(window.innerHeight - 150)
+      ? Math.floor(window.innerHeight - 100)
       : Math.floor(window.innerHeight - 450); // 150px 여백 확보; // calc(100% - 70px)
   const left = (window.screen.availWidth - width) / 2;
   const top = (window.screen.availHeight - height) / 2;
-  const popupOptions = `width=${width},height=${height},left=${left},top=${top},resizable=yes,scrollbars=yes`;
+  const popupOptions = `width=${width},height=${height},left=${left},top=${top},resizable=yes,scrollbars=yes `;
+
   popupDetailRef.current = window.open(
     url,
     "지도 시설 상세정보 팝업",

apps/wr/components/ui/map/detailPopup/ruseDetailPopup.tsx

@@ -13,7 +13,7 @@ export function RuseDetailPopup({ bscFctCd }: { bscFctCd: string }) {
   const { ruseMap, getRuseMaplList } = useWrStore((state) => state);
   const { ruseDetailList } = ruseMap;
   const [fcltTab, setFcltTab] = useState<string>("");
-  const [isDetail, setIsDetail] = useState<customPbnst>({} as customPbnst);
+  const [, setIsDetail] = useState<customPbnst>({} as customPbnst);
   const initRef = useRef<boolean>(false);
 
   useEffect(() => {
@@ -38,9 +38,9 @@ export function RuseDetailPopup({ bscFctCd }: { bscFctCd: string }) {
 
   if (!(ruseDetailList && ruseDetailList[0])) return;
   return (
-    <div>
+    <div className="">
       <Tabs value={fcltTab} onValueChange={setFcltTab}>
-        <TabsList className="mt-4">
+      <TabsList className="mt-2 mb-3 gap-2 flex flex-wrap">
           {ruseDetailList.map((item, index) => {
             return (
               <TabsTrigger
@@ -54,9 +54,17 @@ export function RuseDetailPopup({ bscFctCd }: { bscFctCd: string }) {
           })}
         </TabsList>
         
-        <TabsContent className="flex-1  px-4" value={fcltTab}>
-          <PbnstSttnModal data={isDetail} isMap={true} />
-        </TabsContent>
+        {ruseDetailList.map((item) => (
+          <TabsContent
+            key={item.pbnstRuseFcltId}
+            className="flex-1 px-4 py-3"
+            value={item.pbnstRuseFcltId}
+          >
+            <div className="mb-4">
+              <PbnstSttnModal data={item} isMap={true} />
+            </div>
+          </TabsContent>
+        ))}
       </Tabs>
     </div>
   );

apps/wr/components/ui/modal/sttn/pbnstSttnModal/pbnstSttnModal.tsx

@@ -254,16 +254,17 @@ export function PbnstSttnModal({ data, titleVisible,isMap}: { data: customPbnst;
     }
 
   }, [data, form])
+  const Wrapper: React.ElementType = isMap ?"div": ScrollArea;
 
   return (
     <>
-      <div>
+      <div className="min-h-0 px-4 md:px-6 py-4">
         {titleVisible && (
           <>
             <Title title={"하수재이용 시설 상세정보"} />
           </>
         )}
-        <ScrollArea className={ isMap==true?  "h-[100vh]":"h-[70vh]" }>
+       <Wrapper className={ "h-[70vh]" }>
           <PbnstMngForm
             form={form}
             formType={"sttn"}
@@ -293,7 +294,7 @@ export function PbnstSttnModal({ data, titleVisible,isMap}: { data: customPbnst;
                   재이용 수요처 현황
                 </TabsTrigger>
               </TabsList>
-              <TabsContent className="max-h-full" value={fcltTab}>
+              <TabsContent className="min-h-0" value={fcltTab}>
                 <UiTable
                   headName={undefined}
                   tableData={ruseTableData || []}
@@ -326,10 +327,10 @@ export function PbnstSttnModal({ data, titleVisible,isMap}: { data: customPbnst;
                   장외용수
                 </TabsTrigger>
               </TabsList>
-              <TabsContent className="max-h-full" value={ruseTab}>
+              <TabsContent className="min-h-0" value={ruseTab}>
                 {prfData && (
                   <ListDiv className="col-span-8 pr-6  ">
-                    <ScrollArea className="h-[60vh]">
+                    {/* <ScrollArea className="h-[60vh]"> */}
                       <div className="card-header">
                         <h3 className="text-2xl font-medium text-label">
                           {"하수처리수재이용 실적(m³) 등록결과"}
@@ -343,13 +344,13 @@ export function PbnstSttnModal({ data, titleVisible,isMap}: { data: customPbnst;
                           {InputTableBody(prfData[ruseTab as keyof typeof prfData] || [], pbnstPrfmncSttn.monthSttnHeadList, setPrfData as any)}
                         </TableBody>
                       </Table>
-                    </ScrollArea>
+                    {/* </ScrollArea> */}
                   </ListDiv>
                 )}
               </TabsContent>
             </Tabs>
           </div>
-        </ScrollArea>
+        </Wrapper>
       </div>
     </>
   );

apps/wr/components/ui/modal/sttn/sttnDetailModal/sttnDetailModal.tsx

@@ -5,7 +5,7 @@ import type { customHtdflBdst } from "@/app/store/ruseFcltMng/fcltReg/htdflReg";
 import type { customRainBdst } from "@/app/store/ruseFcltMng/fcltReg/rainReg";
 import type { customRswtBdst } from "@/app/store/ruseFcltMng/fcltReg/rswtReg";
 import { rainChkTableData } from "@/components/lib/func/TableData";
-import { ScrollArea, Title, UiTable } from "@common/business_components/ui";
+import {  Title, UiTable } from "@common/business_components/ui";
 import { HeadMakeColSpan } from "@common/business_components/ui/table/HeadMakeColSpan";
 import { useEffect, useState } from "react";
 import HtdflRegForm from "../../../form/fcltReg/htdflReg/htdflRegForm";
@@ -89,13 +89,13 @@ export default function SttnDetailModal({
               : "온배수시설 상세정보"
         }
       ></Title>
-      <ScrollArea
+      {/* <ScrollArea
         className={isMap ?"h-[100vh]":
            detailData.data.length > 0
               ? "h-[80vh]"
               : "h-[70vh]"
         }
-      >
+      > */}
         {type === "RNB" ? (
           <RainRegForm
             rainForm={formObj as customRainBdst}
@@ -143,7 +143,7 @@ export default function SttnDetailModal({
         ) : (
           <></>
         )}
-      </ScrollArea>
+      {/* </ScrollArea> */}
     </div>
   );
 }