gis 이미지 추가

2025-07-24 20:47:35 +09:00
parent 26c01ede4e
commit 7cd1ae2625
127 changed files with 11516 additions and 102 deletions
@@ -1,7 +1,15 @@
 import ModalSimilarPage from "@/app/pages/sdmMng/sdmInfoInsert/modalSimilar/page";
 import type { FormData } from "@/app/pages/sdmMng/sdmInfoInsert/page";
 import { useDmStore } from "@/app/store";
-import { CANDIDATE, DatePicker, FormField, FormLabel, FormUi, SelectBox, UiModal } from "@common/business_components";
+import {
+  CANDIDATE,
+  DatePicker,
+  FormField,
+  FormLabel,
+  FormUi,
+  SelectBox,
+  UiModal,
+} from "@common/business_components";
 import { Input } from "@common/components";
 import { Button } from "@common/components/ui";
 import { useSearchParams } from "next/navigation";
@@ -10,6 +18,8 @@ import { AccessibleFormField } from "./AccessibleFormField";
 import type { ControllerRenderProps, UseFormReturn } from "react-hook-form";
 import SearchInputText from "../common/searhDemandInput/component";
 import type { DemandCompType } from "@/app/store/sdmMng";
+import NewWindowPortal from "@/app/pages/map/popup/windowPotal";
+import Map from "@/app/pages/map/popup/sdmInfoMap";

 export interface SdmInfoRegFormProps {
  form: UseFormReturn<FormData>;
@@ -17,21 +27,31 @@ export interface SdmInfoRegFormProps {
  facilityName?: string;
 }

-type FieldComponent = (field: ControllerRenderProps<FormData, keyof FormData>) => JSX.Element;
+type FieldComponent = (
+  field: ControllerRenderProps<FormData, keyof FormData>
+) => JSX.Element;

-export function SdmInfoRegForm({ form, onCheckboxChange, facilityName }: SdmInfoRegFormProps) {
+export function SdmInfoRegForm({
+  form,
+  onCheckboxChange,
+  facilityName,
+}: SdmInfoRegFormProps) {
  const { initializeCommonData, Sdm } = useDmStore((state) => state);
  const { useTypesData } = Sdm;
  const searchParams = useSearchParams();
-  
-  const [sdmNmValue, setSdmNmValue] = useState<string>(searchParams.get('dmdCoNm') || '');
+
+  const [sdmNmValue, setSdmNmValue] = useState<string>(
+    searchParams.get("dmdCoNm") || ""
+  );
  const [isBznmTotNoDisabled, setIsBznmTotNoDisabled] = useState(false);
  const [isSimilarCase, setIsSimilarCase] = useState(false);
  const [key, setKey] = useState(0);
+  // 후보지 팝업 오픈 상태
+  const [isCandidatePopup, setIsCandidatePopup] = useState(false);

  //모달 조회에 필요한 데이터
  const [sply, setSply] = useState<number>(0);
-  const [usageCd, setUsageCd] = useState<string>('청소');
+  const [usageCd, setUsageCd] = useState<string>("청소");
  const [money, setMoney] = useState<number>(0);

  useEffect(() => {
@@ -41,7 +61,7 @@ export function SdmInfoRegForm({ form, onCheckboxChange, facilityName }: SdmInfo
  useEffect(() => {
    if (useTypesData && useTypesData.length > 0) {
      setTimeout(() => {
-        form.setValue('usePurpose', useTypesData[0]?.val?.toString() || '');
+        form.setValue("usePurpose", useTypesData[0]?.val?.toString() || "");
      }, 500);
    }
  }, [useTypesData, form]);
@@ -49,40 +69,45 @@ export function SdmInfoRegForm({ form, onCheckboxChange, facilityName }: SdmInfo
  useEffect(() => {
    if (facilityName) {
      setSdmNmValue(facilityName);
-      form.setValue('sdmNm', facilityName);
-      setKey(prev => prev + 1);
+      form.setValue("sdmNm", facilityName);
+      setKey((prev) => prev + 1);
    }
  }, [facilityName, form]);

  useEffect(() => {
-    if (searchParams.get('dmdCoNm')) {
-      form.setValue('sdmNm', searchParams.get('dmdCoNm') || '');
-      setSdmNmValue(searchParams.get('dmdCoNm') || '');
-      setKey(prev => prev + 1);
+    if (searchParams.get("dmdCoNm")) {
+      form.setValue("sdmNm", searchParams.get("dmdCoNm") || "");
+      setSdmNmValue(searchParams.get("dmdCoNm") || "");
+      setKey((prev) => prev + 1);
    }
  }, [searchParams, form]);

  const searchCandidate = (e: React.MouseEvent) => {
    e.preventDefault();
    e.stopPropagation();
-  }
+    console.log(1);
+    setIsCandidatePopup(true);
+  };

  const searchSimilarCase = (e: React.MouseEvent) => {
    e.preventDefault();
    e.stopPropagation();
    setIsSimilarCase(true);
-  }
-  
+  };
+
  const handleCheckboxChange = (checked: boolean) => {
    setIsBznmTotNoDisabled(checked);
    onCheckboxChange?.(checked);
  };

  // 시설 선택시 이벤트
-  const selectComp = useCallback((rtnData: DemandCompType[]) => {
-    const rtnCompData = rtnData?.[0];
-    form.setValue('sdmNm', rtnCompData?.dmdCoNm || '');
-  }, [form]);
+  const selectComp = useCallback(
+    (rtnData: DemandCompType[]) => {
+      const rtnCompData = rtnData?.[0];
+      form.setValue("sdmNm", rtnCompData?.dmdCoNm || "");
+    },
+    [form]
+  );

  const formFields: Array<{
    name: keyof FormData;
@@ -101,15 +126,15 @@ export function SdmInfoRegForm({ form, onCheckboxChange, facilityName }: SdmInfo
          <SearchInputText
            label="수요처명"
            setValue={(val) => {
-              setSdmNmValue(val || '');
-              field.onChange(val || '');
+              setSdmNmValue(val || "");
+              field.onChange(val || "");
            }}
            setRtnData={selectComp}
            initValue={facilityName || sdmNmValue}
            {...field}
          />
        </div>
-      )
+      ),
    },
    {
      name: "demandYmd",
@@ -118,7 +143,7 @@ export function SdmInfoRegForm({ form, onCheckboxChange, facilityName }: SdmInfo
      required: true,
      component: (field) => (
        <div className="w-full">
-          <DatePicker 
+          <DatePicker
            mode="single"
            selected={field.value as Date}
            onSelect={(date) => {
@@ -130,12 +155,12 @@ export function SdmInfoRegForm({ form, onCheckboxChange, facilityName }: SdmInfo
              value: field.value as Date,
              onChange: (date: Date | undefined) => {
                field.onChange(date as Date);
-              }
+              },
            }}
            selectClass={undefined}
          />
        </div>
-      )
+      ),
    },
    {
      name: "demandQnty",
@@ -143,8 +168,8 @@ export function SdmInfoRegForm({ form, onCheckboxChange, facilityName }: SdmInfo
      formIndex: 0,
      required: true,
      component: (field) => (
-        <Input 
-          placeholder="요구수량(㎥/d)을 입력하세요" 
+        <Input
+          placeholder="요구수량(㎥/d)을 입력하세요"
          type="text"
          className="!text-xl text-gray-600"
          value={field.value as string}
@@ -156,7 +181,7 @@ export function SdmInfoRegForm({ form, onCheckboxChange, facilityName }: SdmInfo
          name={field.name}
          ref={field.ref}
        />
-      )
+      ),
    },
    {
      name: "usePurpose",
@@ -166,16 +191,16 @@ export function SdmInfoRegForm({ form, onCheckboxChange, facilityName }: SdmInfo
      component: (field) => (
        <SelectBox
          selectClass={undefined}
-          label="" 
-          selectArray={useTypesData} 
+          label=""
+          selectArray={useTypesData}
          onSelectValue={(val) => {
            field.onChange(val.toString());
            setUsageCd(val.toString());
          }}
-          className="" 
+          className=""
          value={field.value as string}
        />
-      )
+      ),
    },
    {
      name: "money",
@@ -209,14 +234,14 @@ export function SdmInfoRegForm({ form, onCheckboxChange, facilityName }: SdmInfo
            </FormUi>
          }
        />
-      )
+      ),
    },
    {
      name: "reqWaterQlty",
      label: "요구수질",
      formIndex: 0,
      required: true,
-      component: undefined
+      component: undefined,
    },
    {
      name: "grssClfg",
@@ -224,8 +249,8 @@ export function SdmInfoRegForm({ form, onCheckboxChange, facilityName }: SdmInfo
      formIndex: 1,
      required: true,
      component: (field) => (
-        <Input 
-          placeholder="총대장균군수를 입력하세요" 
+        <Input
+          placeholder="총대장균군수를 입력하세요"
          type="text"
          className="!text-xl text-gray-600"
          value={field.value as string}
@@ -234,7 +259,7 @@ export function SdmInfoRegForm({ form, onCheckboxChange, facilityName }: SdmInfo
          name={field.name}
          ref={field.ref}
        />
-      )
+      ),
    },
    {
      name: "tn",
@@ -242,8 +267,8 @@ export function SdmInfoRegForm({ form, onCheckboxChange, facilityName }: SdmInfo
      formIndex: 1,
      required: true,
      component: (field) => (
-        <Input 
-          placeholder="총질소를 입력하세요" 
+        <Input
+          placeholder="총질소를 입력하세요"
          type="text"
          className="!text-xl text-gray-600"
          value={field.value as string}
@@ -252,7 +277,7 @@ export function SdmInfoRegForm({ form, onCheckboxChange, facilityName }: SdmInfo
          name={field.name}
          ref={field.ref}
        />
-      )
+      ),
    },
    {
      name: "combResdch",
@@ -260,8 +285,8 @@ export function SdmInfoRegForm({ form, onCheckboxChange, facilityName }: SdmInfo
      formIndex: 1,
      required: true,
      component: (field) => (
-        <Input 
-          placeholder="결합잔류염소를 입력하세요" 
+        <Input
+          placeholder="결합잔류염소를 입력하세요"
          type="text"
          className="!text-xl text-gray-600"
          value={field.value as string}
@@ -270,7 +295,7 @@ export function SdmInfoRegForm({ form, onCheckboxChange, facilityName }: SdmInfo
          name={field.name}
          ref={field.ref}
        />
-      )
+      ),
    },
    {
      name: "tph",
@@ -278,8 +303,8 @@ export function SdmInfoRegForm({ form, onCheckboxChange, facilityName }: SdmInfo
      formIndex: 1,
      required: true,
      component: (field) => (
-        <Input 
-          placeholder="총인을 입력하세요" 
+        <Input
+          placeholder="총인을 입력하세요"
          type="text"
          className="!text-xl text-gray-600"
          value={field.value as string}
@@ -288,16 +313,16 @@ export function SdmInfoRegForm({ form, onCheckboxChange, facilityName }: SdmInfo
          name={field.name}
          ref={field.ref}
        />
-      )
+      ),
    },
    {
      name: "trbt",
      label: "탁도(NTU)",
      formIndex: 1,
      required: true,
-      component: (field) => ( 
-        <Input 
-          placeholder="탁도를 입력하세요" 
+      component: (field) => (
+        <Input
+          placeholder="탁도를 입력하세요"
          type="text"
          className="!text-xl text-gray-600"
          value={field.value as string}
@@ -306,7 +331,7 @@ export function SdmInfoRegForm({ form, onCheckboxChange, facilityName }: SdmInfo
          name={field.name}
          ref={field.ref}
        />
-      )
+      ),
    },
    {
      name: "ph",
@@ -314,8 +339,8 @@ export function SdmInfoRegForm({ form, onCheckboxChange, facilityName }: SdmInfo
      formIndex: 1,
      required: true,
      component: (field) => (
-        <Input 
-          placeholder="수소이온농도를 입력하세요" 
+        <Input
+          placeholder="수소이온농도를 입력하세요"
          type="text"
          className="!text-xl text-gray-600"
          value={field.value as string}
@@ -324,7 +349,7 @@ export function SdmInfoRegForm({ form, onCheckboxChange, facilityName }: SdmInfo
          name={field.name}
          ref={field.ref}
        />
-      )
+      ),
    },
    {
      name: "bod",
@@ -332,8 +357,8 @@ export function SdmInfoRegForm({ form, onCheckboxChange, facilityName }: SdmInfo
      formIndex: 1,
      required: true,
      component: (field) => (
-        <Input 
-          placeholder="생물학적 산소요구량을 입력하세요" 
+        <Input
+          placeholder="생물학적 산소요구량을 입력하세요"
          type="text"
          className="!text-xl text-gray-600"
          value={field.value as string}
@@ -342,7 +367,7 @@ export function SdmInfoRegForm({ form, onCheckboxChange, facilityName }: SdmInfo
          name={field.name}
          ref={field.ref}
        />
-      )
+      ),
    },
    {
      name: "clIonQnt",
@@ -350,8 +375,8 @@ export function SdmInfoRegForm({ form, onCheckboxChange, facilityName }: SdmInfo
      formIndex: 1,
      required: true,
      component: (field) => (
-        <Input 
-          placeholder="염화물을 입력하세요" 
+        <Input
+          placeholder="염화물을 입력하세요"
          type="text"
          className="!text-xl text-gray-600"
          value={field.value as string}
@@ -360,16 +385,16 @@ export function SdmInfoRegForm({ form, onCheckboxChange, facilityName }: SdmInfo
          name={field.name}
          ref={field.ref}
        />
-      )
-    },  
+      ),
+    },
    {
      name: "smll",
      label: "냄새",
      formIndex: 1,
      required: true,
      component: (field) => (
-        <Input 
-          placeholder="냄새를 입력하세요" 
+        <Input
+          placeholder="냄새를 입력하세요"
          type="text"
          className="!text-xl text-gray-600"
          value={field.value as string}
@@ -378,7 +403,7 @@ export function SdmInfoRegForm({ form, onCheckboxChange, facilityName }: SdmInfo
          name={field.name}
          ref={field.ref}
        />
-      )
+      ),
    },
    {
      name: "cdtnv",
@@ -386,8 +411,8 @@ export function SdmInfoRegForm({ form, onCheckboxChange, facilityName }: SdmInfo
      formIndex: 1,
      required: true,
      component: (field) => (
-        <Input 
-          placeholder="전기전도도를 입력하세요" 
+        <Input
+          placeholder="전기전도도를 입력하세요"
          type="text"
          className="!text-xl text-gray-600"
          value={field.value as string}
@@ -396,7 +421,7 @@ export function SdmInfoRegForm({ form, onCheckboxChange, facilityName }: SdmInfo
          name={field.name}
          ref={field.ref}
        />
-      )
+      ),
    },
    {
      name: "crmty",
@@ -404,8 +429,8 @@ export function SdmInfoRegForm({ form, onCheckboxChange, facilityName }: SdmInfo
      formIndex: 1,
      required: true,
      component: (field) => (
-        <Input 
-          placeholder="색도를 입력하세요" 
+        <Input
+          placeholder="색도를 입력하세요"
          type="text"
          className="!text-xl text-gray-600"
          value={field.value as string}
@@ -414,7 +439,7 @@ export function SdmInfoRegForm({ form, onCheckboxChange, facilityName }: SdmInfo
          name={field.name}
          ref={field.ref}
        />
-      )
+      ),
    },
    {
      name: "rmrk",
@@ -422,8 +447,8 @@ export function SdmInfoRegForm({ form, onCheckboxChange, facilityName }: SdmInfo
      formIndex: 1,
      required: true,
      component: (field) => (
-        <Input 
-          placeholder="비고를 입력하세요" 
+        <Input
+          placeholder="비고를 입력하세요"
          type="text"
          className="!text-xl text-gray-600"
          value={field.value as string}
@@ -432,7 +457,7 @@ export function SdmInfoRegForm({ form, onCheckboxChange, facilityName }: SdmInfo
          name={field.name}
          ref={field.ref}
        />
-      )
+      ),
    },
    {
      name: "candidateTitle",
@@ -441,16 +466,16 @@ export function SdmInfoRegForm({ form, onCheckboxChange, facilityName }: SdmInfo
      component: (field) => (
        <div>
          <div className="-mt-14 float-right flex gap-10">
-            <Button className={'bg-gray-200'} onClick={searchCandidate}>
+            <Button className={"bg-gray-200"} onClick={searchCandidate}>
              후보지 조회
            </Button>
-            <Button className={'bg-gray-200'} onClick={searchSimilarCase}>
+            <Button className={"bg-gray-200"} onClick={searchSimilarCase}>
              유사사례
            </Button>
          </div>
          <div className="flex justify-center gap-10 mt-5">
-            <Input 
-              placeholder="후보지1" 
+            <Input
+              placeholder="후보지1"
              type="text"
              className="!text-xl w-[130px] text-gray-600"
              value={field.value as string}
@@ -459,8 +484,8 @@ export function SdmInfoRegForm({ form, onCheckboxChange, facilityName }: SdmInfo
              name={field.name}
              ref={field.ref}
            />
-            <Input 
-              placeholder="후보지2" 
+            <Input
+              placeholder="후보지2"
              type="text"
              className="!text-xl w-[130px] text-gray-600"
              value={field.value as string}
@@ -469,8 +494,8 @@ export function SdmInfoRegForm({ form, onCheckboxChange, facilityName }: SdmInfo
              name={field.name}
              ref={field.ref}
            />
-            <Input 
-              placeholder="후보지3" 
+            <Input
+              placeholder="후보지3"
              type="text"
              className="!text-xl w-[130px] text-gray-600"
              value={field.value as string}
@@ -481,24 +506,32 @@ export function SdmInfoRegForm({ form, onCheckboxChange, facilityName }: SdmInfo
            />
          </div>
        </div>
-      )
+      ),
    },
  ];

-  const normalFields = formFields.filter(f => f.formIndex === 0 && f.component);
-  const groupFields = formFields.filter(f => f.formIndex === 1 && f.component);
-  const candidateFields = formFields.filter(f => f.formIndex === 2 && f.component);
+  const normalFields = formFields.filter(
+    (f) => f.formIndex === 0 && f.component
+  );
+  const groupFields = formFields.filter(
+    (f) => f.formIndex === 1 && f.component
+  );
+  const candidateFields = formFields.filter(
+    (f) => f.formIndex === 2 && f.component
+  );

  return (
    <>
-      {normalFields.map(({ name, label, component, required }) => (
+      {normalFields.map(({ name, label, component, required }) =>
        component ? (
          <FormField
            key={name}
            control={form.control}
            name={name}
-            render={({ field }) => (
-              name === 'money' ? component(field) : (
+            render={({ field }) =>
+              name === "money" ? (
+                component(field)
+              ) : (
                // <FormUi label={label}>
                //   {component(field)}
                // </FormUi>
@@ -510,10 +543,10 @@ export function SdmInfoRegForm({ form, onCheckboxChange, facilityName }: SdmInfo
                  inputComponent={component(field)}
                />
              )
-            )}
+            }
          />
        ) : null
-      ))}
+      )}

      {groupFields.length > 0 && (
        <div className="mt-10">
@@ -543,7 +576,7 @@ export function SdmInfoRegForm({ form, onCheckboxChange, facilityName }: SdmInfo
        </div>
      )}

-      {candidateFields.map(({ name, label, component, required }, index) => (
+      {candidateFields.map(({ name, label, component, required }, index) =>
        component ? (
          <FormField
            key={name + index}
@@ -563,11 +596,13 @@ export function SdmInfoRegForm({ form, onCheckboxChange, facilityName }: SdmInfo
            )}
          />
        ) : null
-      ))}
+      )}

      {isSimilarCase && (
        <UiModal
-          body={<ModalSimilarPage sply={sply} usageCd={usageCd} money={money} />}
+          body={
+            <ModalSimilarPage sply={sply} usageCd={usageCd} money={money} />
+          }
          bodyClass="sm:max-w-[100vw] w-[1400px] h-[900px]"
          open={isSimilarCase}
          onOpenChange={(open) => !open && setIsSimilarCase(false)}
@@ -575,6 +610,20 @@ export function SdmInfoRegForm({ form, onCheckboxChange, facilityName }: SdmInfo
          noFooterYn="Y"
        />
      )}
+
+      {/* 후보지 조회 새 창 포털 */}
+      {isCandidatePopup && (
+        <NewWindowPortal
+          onClose={() => setIsCandidatePopup(false)}
+          title="공급처 후보지 조회"
+          width={window.screen.availWidth}
+          height={window.screen.availHeight}
+          resizable="no"
+          scrollbars="yes"
+        >
+          <Map />
+        </NewWindowPortal>
+      )}
    </>
  );
-}
+}