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

2025-07-08 11:27:37 +09:00
parent 75feb78baf 3bba3dce98
commit eac8e9fdbe
6 changed files with 186 additions and 135 deletions
@@ -123,9 +123,9 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
  if (!featureData) return;
  ///////////////////////////////////////////// 피쳐데이터 선택 시 각 시설별 데이터 처리 ///////////////////////////////////////////////
  useEffect(() => {
+    const layerId = getSelectedLayers();
    if (featureData && typeof featureData.getProperties === "function") {
      const selectedVal = featureData.getProperties();
-      const layerId = getSelectedLayers();
      let featureCd = layerId == '하수재이용시설' ? selectedVal?.swtrmt_fclt_cd : layerId == '빗물이용시설' || layerId == '중수도시설' ? selectedVal?.bdst_nm : layerId == '하수처리시설' ? 'a' : null;
      if (featureCd && featureCd !== fcltPk) {
        if (layerId == '하수재이용시설') {
@@ -157,9 +157,9 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
          setHtdflDetailModal({ isOpen: true, data: htdflSttnRes[0] });
          setViewMode("detail")
        }
-        else if(layerId =='하수처리시설') setViewMode('nothing')
+        else if(layerId =='하수처리시설') onClose();
      }
-    } else if (seletectedLayerNm) { setViewMode("list") }
+    } else if (layerId === null && seletectedLayerNm) { setViewMode("list") }
  }, [featureData]);
  ///////////////////////////////////////////// 피쳐데이터 선택 시 각 시설별 데이터 처리 ///////////////////////////////////////////////

@@ -179,7 +179,7 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
  };
  const getSelectedLayers = () => {
    let result = null;
-    const layers = gisMap ? gisMap.getLayers().getArray() : []; // gisMap이 null인지 확인 후 레이어 가져오기
+    const layers = gisMap ? gisMap.getLayers().getArray().filter((l:any) => l.getVisible()) : []; // gisMap이 null인지 확인 후 레이어 가져오기
    let featureLayer: { get: (key: string) => any } = { get: (key: string) => null }; // 피처가 속한 레이어를 찾기 위한 변수
    layers.forEach((layer: any) => {
      const source = layer.getSource();
@@ -198,8 +198,8 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
    if (!pbnstSttn.isInit) {
      pbnSttnInit("1", "13", {
        partValue: "A",
-        sidoValue: "0",
-        sigunValue: "",
+        sidoValue: '0',
+        sigunValue: "0",
        regionValue: "",
        unitWaterShedValue: "",
        middleRegionValue: "",
@@ -242,7 +242,7 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
      {
        partValue: "A",
        sidoValue: "0",
-        sigunValue: "",
+        sigunValue: "0",
        regionValue: "",
        unitWaterShedValue: "",
        middleRegionValue: "",
@@ -173,7 +173,7 @@ export default function PbnstSttn() {
          <div className="col-span-6">
            <ListDiv>
              <UiTable
-                headName={[]}
+                headName={undefined}
                tableData={bdstTable || []}
                children={
                  <HeadMakeColSpan upHeadList={pbnstSttn.pbnstSttNodeList} />
@@ -136,7 +136,7 @@ export const rainSttHeadListExport: z.infer<typeof sttnHeadListType> = [
 export const rainSttNodeListExport: CommonTableProps[] = [
  {
    id: "bdnstInfo",
-    title: "1.건축물정보",
+    title: "건축물정보",
    visible: true,
    row: 1,
    rowSpan: 1,
@@ -144,7 +144,7 @@ export const rainSttNodeListExport: CommonTableProps[] = [
  },
  {
    id: "rainFcltInfo",
-    title: "2.빗물이용시설정보",
+    title: "빗물이용시설정보",
    visible: true,
    row: 1,
    rowSpan: 1,
@@ -152,7 +152,7 @@ export const rainSttNodeListExport: CommonTableProps[] = [
  },
  {
    id: "insenInfo",
-    title: "3.인센티브 정보",
+    title: "인센티브 정보",
    visible: true,
    row: 1,
    rowSpan: 1,
@@ -130,7 +130,7 @@ export const rswtSttHeadListExport: z.infer<typeof sttnHeadListType> = [
 export const rswtSttNodeListExport: CommonTableProps[] = [
  {
    id: "bdnstInfo",
-    title: "1.건축물정보",
+    title: "건축물정보",
    visible: true,
    row: 1,
    rowSpan: 1,
@@ -138,7 +138,7 @@ export const rswtSttNodeListExport: CommonTableProps[] = [
  },
  {
    id: "rswtFcltInfo",
-    title: "2.중수도시설정보",
+    title: "중수도시설정보",
    visible: true,
    row: 1,
    rowSpan: 1,
@@ -146,7 +146,7 @@ export const rswtSttNodeListExport: CommonTableProps[] = [
  },
  {
    id: "insenInfo",
-    title: "3.인센티브 정보",
+    title: "인센티브 정보",
    visible: true,
    row: 1,
    rowSpan: 1,
@@ -1,5 +1,5 @@
 import { useWrStore } from "@/app/store";
-import   { sttnHeadListType } from "@/app/store/ruseFcltMng/fcltSttn/rainSttn/headList";
+import { sttnHeadListType } from "@/app/store/ruseFcltMng/fcltSttn/rainSttn/headList";
 import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@common/business_components/ui";
 import { Button, Checkbox } from "@common/components/ui";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -7,33 +7,54 @@ import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";

-export default function HeadChModal({headList, type }:{headList :  z.infer<typeof sttnHeadListType> ,type:string }) { 
-  const { rainChSttnHead , rswtChSttnHead, htdflChSttnHead, pbnstChSttnHead} = useWrStore((state) => state);
-
-    
-   let   items =   headList.map(item => ({id:item.id, title:item.title, val:item.visible  }));
-   
-   
-    const form = useForm<z.infer<typeof sttnHeadListType>>({
-      resolver: zodResolver(sttnHeadListType),
-      defaultValues: [],
-    })
+export default function HeadChModal({ headList, type }: { headList: z.infer<typeof sttnHeadListType>, type: string }) {
+  const { rainChSttnHead, rswtChSttnHead, htdflChSttnHead, pbnstChSttnHead } = useWrStore((state) => state);


-    useEffect(() =>{
-    form.reset(headList)   
+  let items = headList.map(item => ({ id: item.id, title: item.title, val: item.visible }));


-    },[headList])
+  /*const form = useForm<z.infer<typeof sttnHeadListType>>({
+    resolver: zodResolver(sttnHeadListType),
+    defaultValues: [],
+  })

-  const onSubmit = (valueList : z.infer<typeof sttnHeadListType> ) =>{
-    if(type==='RNB'){
+
+  useEffect(() =>{
+  form.reset(headList)   
+
+
+  },[headList])*/
+
+  const form = useForm<z.infer<typeof sttnHeadListType>>({
+    resolver: zodResolver(sttnHeadListType),
+    defaultValues: headList,
+  });
+
+  useEffect(() => {
+    form.reset(headList);
+  }, [headList, form]);
+
+  const rawValues = form.watch();
+  const values: Array<{ visible: boolean }> = Array.isArray(rawValues)
+    ? rawValues
+    : Object.values(rawValues);
+
+  const allChecked = values.every((v) => v.visible);
+
+  const toggleAll = (checked: boolean) => {
+    const newValues = values.map((v) => ({ ...v, visible: checked }));
+    form.reset(newValues);
+  };
+
+  const onSubmit = (valueList: z.infer<typeof sttnHeadListType>) => {
+    if (type === 'RNB') {
      rainChSttnHead(valueList)
-    }else if(type=== 'RST'){
+    } else if (type === 'RST') {
      rswtChSttnHead(valueList)
-    }else if(type === 'HTB'){
+    } else if (type === 'HTB') {
      htdflChSttnHead(valueList)
-    }else if(type === 'PBN'){
+    } else if (type === 'PBN') {
      pbnstChSttnHead(valueList)
    }
  }
@@ -42,42 +63,50 @@ export default function HeadChModal({headList, type }:{headList :  z.infer<typeo
    <>
      <div>
        <Form {...form}>
-          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
-           
-                  <div className="mb-4">
-                    <h3>조회항목 설정</h3> 
-                  </div>
-                  {items.map((item,index) => (
-                    <FormField
-                      key={`${index}.id`}
-                      control={form.control}
-                      name={`${index}.visible`}
-                      render={({ field }) => 
-                        {
-                        return (
-                          <FormItem
-                            key={`${index}.id`+'item'}
-                            className="flex flex-row items-start space-x-3 space-y-0"
-                          >
-                            <FormControl>
-                              <Checkbox
-                                checked={field.value}
-                                onCheckedChange={(checked) => 
-                                  {
-                                  field.onChange(checked);
-                                  return;
-                                  }
-                              }
-                              />
-                            </FormControl>
-                            <FormLabel className="text-xl">
-                            {item.title}
-                            </FormLabel>
-                          </FormItem>
-                        );
-                      }}
-                    />
-                  ))}
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+
+            <div className="mb-4">
+              <h3>조회항목 설정</h3>
+            </div>
+            {/* 전체 선택/해제 체크박스 */}
+            <FormItem className="flex flex-row items-start space-x-3">
+              <FormControl>
+                <Checkbox
+                  checked={allChecked}
+                  onCheckedChange={(checked) => toggleAll(checked as boolean)}
+                />
+              </FormControl>
+              <FormLabel className="text-xl font-bold">전체</FormLabel>
+            </FormItem>
+            {items.map((item, index) => (
+              <FormField
+                key={`${index}.id`}
+                control={form.control}
+                name={`${index}.visible`}
+                render={({ field }) => {
+                  return (
+                    <FormItem
+                      key={`${index}.id` + 'item'}
+                      className="flex flex-row items-start space-x-3 space-y-0"
+                    >
+                      <FormControl>
+                        <Checkbox
+                          checked={field.value}
+                          onCheckedChange={(checked) => {
+                            field.onChange(checked);
+                            return;
+                          }
+                          }
+                        />
+                      </FormControl>
+                      <FormLabel className="text-xl">
+                        {item.title}
+                      </FormLabel>
+                    </FormItem>
+                  );
+                }}
+              />
+            ))}
            <Button type="submit">항목 표출 변경</Button>
          </form>
        </Form>
@@ -1,14 +1,14 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import type { DemandCompType } from './form';
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import type { DemandCompType } from "./form";

 export type thisProps = {
  label: string | undefined;
  initValue: string | undefined;
-  dataList : DemandCompType[];
-  rtnValue : (searchText: string, pageCnt: number) => void;
-  rtnData : (item: DemandCompType) => void;
-  rtnText : (text: string) => void;
-}
+  dataList: DemandCompType[];
+  rtnValue: (searchText: string, pageCnt: number) => void;
+  rtnData: (item: DemandCompType) => void;
+  rtnText: (text: string) => void;
+};

 /**
 * 수요처 검색 컴포넌트
@@ -18,88 +18,110 @@ export type thisProps = {
 * @param dataList 검색할 때 넘기는 데이터 리스트
 * @param rtnData 검색 결과 반환 함수
 */
-export const SdmSearchForm = ({label=undefined, initValue=undefined, rtnValue=()=>{}, dataList=[], rtnData=()=>{}, rtnText=()=>{} } :thisProps) => {
-  
+export const SdmSearchForm = ({
+  label = undefined,
+  initValue = undefined,
+  rtnValue = () => {},
+  dataList = [],
+  rtnData = () => {},
+  rtnText = () => {},
+}: thisProps) => {
  const [isOpen, setIsOpen] = useState(false);
-  const [textValue, setTextValue] = useState(initValue || '');
+  const [textValue, setTextValue] = useState(initValue || "");
  const wrapperRef = useRef<HTMLDivElement>(null);
-  const handleInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = e.target.value;
-    setTextValue(value);
-    rtnValue(value, 10);
-    rtnText(value);
-    if (value) {
-      setIsOpen(true);
-    } else {
-      setIsOpen(false);
-    }
-  }, [rtnValue, rtnText]);
+  const handleInputChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const value = e.target.value;
+      setTextValue(value);
+      rtnValue(value, 10);
+      rtnText(value);
+      if (value) {
+        setIsOpen(true);
+      } else {
+        setIsOpen(false);
+      }
+    },
+    [rtnValue, rtnText],
+  );

-  const handleSuggestionClick = useCallback((item: DemandCompType) => {
-    setTextValue(item.dmdCoNm);
-    rtnData(item);
-    setIsOpen(false);
-  }, [rtnData]);
+  const handleSuggestionClick = useCallback(
+    (item: DemandCompType) => {
+      setTextValue(item.dmdCoNm);
+      rtnData(item);
+      setIsOpen(false);
+    },
+    [rtnData],
+  );

  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
-      if (wrapperRef.current && !wrapperRef.current.contains(event.target as Node)) {
+      if (
+        wrapperRef.current &&
+        !wrapperRef.current.contains(event.target as Node)
+      ) {
        setIsOpen(false);
      }
    };

-    document.addEventListener('mousedown', handleClickOutside);
+    document.addEventListener("mousedown", handleClickOutside);
    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, []);

  useEffect(() => {
-    if(initValue&& initValue?.length>0){
-      setTextValue(initValue)
+    if (initValue && initValue?.length > 0) {
+      setTextValue(initValue);
    }
-  },[initValue])
-  
+  }, [initValue]);
+
  return (
-    <div ref={wrapperRef}>
+    <div className="relative" ref={wrapperRef}>
      <input
        type="text"
        value={textValue}
        onChange={handleInputChange}
        /* onFocus={() => setIsOpen(true)} */
-        className="w-full h-[3.2rem] !text-xl pl-3 text-gray-600 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+        className="h-[3.2rem] w-full rounded-md border border-gray-300 pl-3 !text-xl text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
        placeholder={`${label}을(를) 입력하세요`}
      />
      {isOpen && (
-        <div className=" z-1 w-full mt-2 bg-white border border-gray-300 rounded-md shadow-lg h-90 overflow-auto">
+        <div className="absolute top-full left-0 z-50 mb-2 max-h-72 w-full overflow-auto rounded-md border border-gray-300 bg-white shadow-lg">
          <div className="max-h-72">
-            {dataList && dataList.length > 0 ? dataList.map((item : DemandCompType, index : number) => (
-              <div
-                key={index}
-                className="!text-xl w-full text-left px-5 py-3 hover:bg-gray-100 cursor-pointer overflow-auto"
-                onClick={() => handleSuggestionClick(item)}
-                role="button"
-                tabIndex={0}
-                onKeyDown={(e) => {
-                  if (e.key === 'Enter' || e.key === ' ') {
-                    handleSuggestionClick(item);
-                  }
-                }}
-              >
-                {item.dmdInfoPk.substring(10,14) !== '0000' ? (
-                  <>
-                    <span className="text-gray-500">사업자번호 : </span> {item.dmdInfoPk.substring(0,10)}&nbsp;
-                    <span className="text-gray-500">종사업자번호 : </span> {item.dmdInfoPk.substring(10,14)}&nbsp;
-                  </>
-                ) : (
-                  <>
-                    <span className="text-gray-500">사업자번호 : </span> {item.dmdInfoPk.substring(0,10)}&nbsp;
-                  </>
-                )}
-                <span className="float-right">{item.dmdCoNm}</span>
-              </div>
-            )) : (
-              <div className="!text-xl w-full px-5 py-3 hover:bg-gray-100 cursor-pointer overflow-auto">
+            {dataList && dataList.length > 0 ? (
+              dataList.map((item: DemandCompType, index: number) => (
+                <div
+                  key={index}
+                  className="w-full cursor-pointer overflow-auto px-5 py-3 text-left !text-xl hover:bg-gray-100"
+                  onClick={() => handleSuggestionClick(item)}
+                  role="button"
+                  tabIndex={0}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      handleSuggestionClick(item);
+                    }
+                  }}
+                >
+                  {item.dmdInfoPk.substring(10, 14) !== "0000" ? (
+                    <>
+                      <span className="text-gray-500">사업자번호 : </span>{" "}
+                      {item.dmdInfoPk.substring(0, 10)}&nbsp;
+                      <span className="text-gray-500">
+                        종사업자번호 :{" "}
+                      </span>{" "}
+                      {item.dmdInfoPk.substring(10, 14)}&nbsp;
+                    </>
+                  ) : (
+                    <>
+                      <span className="text-gray-500">사업자번호 : </span>{" "}
+                      {item.dmdInfoPk.substring(0, 10)}&nbsp;
+                    </>
+                  )}
+                  <span className="float-right">{item.dmdCoNm}</span>
+                </div>
+              ))
+            ) : (
+              <div className="w-full cursor-pointer overflow-auto px-5 py-3 !text-xl hover:bg-gray-100">
                검색 결과가 없습니다.
              </div>
            )}
@@ -107,5 +129,5 @@ export const SdmSearchForm = ({label=undefined, initValue=undefined, rtnValue=()
        </div>
      )}
    </div>
-  )
-}
+  );
+};