css 수정

2025-05-22 17:41:38 +09:00
parent 298d99e55c
commit 56596f0a85
7 changed files with 183 additions and 145 deletions
@@ -6,6 +6,7 @@ import type { rswtChkZodType, rswtrChkDetailsZodType } from "@/app/store/prfmncR
 import {
  excelArrayDownload,
  excelDownload,
+  yearOptions,
 } from "@/components/lib/func/commom";
 import ChkgdExcel from "@/components/ui/modal/chkgd/chkgdExcel/chkgdExcel";
 import ChkgdModal from "@/components/ui/modal/chkgd/chkgdModal/chkgdModal";
@@ -22,7 +23,7 @@ import {
  UiModal,
 } from "@common/business_components/ui";
 import ListDiv from "@common/business_components/ui/list_div";
-import { Button } from "@common/components/ui";
+import { Button, Label } from "@common/components/ui";
 import { useCallback, useEffect, useState } from "react";
 import { Toaster } from "react-hot-toast";

@@ -38,7 +39,7 @@ export default function Page() {
    rainChkExcelDownload,
    rainChkHeadChange,
    isRainSttn,
-    
+
    rswtChkgdnInit,
    rswtChkDetilsUpdate,
    rswtChkDelete,
@@ -48,7 +49,6 @@ export default function Page() {
    return state;
  });
  const [isRegExcel, setIsRegExcel] = useState(false);
-  const [searchTxt, setSearchTxt] = useState<string>();
  const [updateRainDetail, setUpdateRainDetail] = useState<rainChkZodType[]>(
    []
  );
@@ -63,10 +63,10 @@ export default function Page() {
    data: {},
  });
  const cellClick = () => {
-    if (searchTxt) rainChkInit(searchTxt, "0");
+    if (searchYear) rainChkInit(searchYear, "0");
  };

-
+  const [searchYear, setSearchYear] = useState<string>(String(new Date().getFullYear()));

  useEffect(() => {
    if (!rainChkgdn.isInit) {
@@ -126,40 +126,34 @@ export default function Page() {
  );

  useEffect(() => {
-    rainChkgdn.isSttn=false
-    rswtChkgdn.isSttn=false
-    if (!rainChkgdn.isSttn &&!rswtChkgdn.isSttn) {
-      rainChkHeadChange({rainChkgdn}, true);
-      rswtChkHeadChange({rswtChkgdn}, true);
+    rainChkgdn.isSttn = false
+    rswtChkgdn.isSttn = false
+    if (!rainChkgdn.isSttn && !rswtChkgdn.isSttn) {
+      rainChkHeadChange({ rainChkgdn }, true);
+      rswtChkHeadChange({ rswtChkgdn }, true);
    }
-  }, [rainChkgdn.isSttn ,rswtChkgdn.isSttn]);
-  
+  }, [rainChkgdn.isSttn, rswtChkgdn.isSttn]);

-
-
-
-  const clickDelete = (data: number[],selFcltDiv:string) => {
+  const clickDelete = (data: number[], selFcltDiv: string) => {
    if (data.length > 0) {
-      if(selFcltDiv === "RNB"){
+      if (selFcltDiv === "RNB") {
        rainChkDelete(data);
-      }else{
+      } else {
        rswtChkDelete(data)
      }
    }
  };
-  const chkUpdateTable =(selFcltDiv:string) =>{
-    if(selFcltDiv === "RNB"){
+  const chkUpdateTable = (selFcltDiv: string) => {
+    if (selFcltDiv === "RNB") {

      rainChkDetilUpdate(updateRainDetail)
-    }else{
+    } else {

-    rswtChkDetilsUpdate(updateRswtDetail)
+      rswtChkDetilsUpdate(updateRswtDetail)
    }

  }

-   
-
  return (
    <ContentsDiv>
      <div className="grid grid-cols-4 gap-4 ">
@@ -167,26 +161,35 @@ export default function Page() {
          <Title title={"지도점검 결과 등록"} />
          <SearchDiv>
            <SearchFormLeft>
-              <SearchInput
-                className="col-span-3 my-7 !text-xl whitespace-nowrap"
-                label=" 지도점검년도"
-                textValue={searchTxt ?? ""}
-                setText={(e) => {
-                  setSearchTxt(e);
-                }}
-              />
-              <SelectBox
-                className={"col-span-3 w-full h-full text-2xl"}
-                label={"시설구분"}
-                selectClass={""}
-                selectArray={rainChkgdn.fcltDiv}
-                onSelectValue={(val: string | number) =>
-                  setSelFcltDiv(String(val))
-                }
-                value={selFcltDiv ?? rainChkgdn.fcltDiv[0]?.val}
-              />
+              <div className="col-span-2 flex flex-row space-x-2">
+                <Label className="w-48 mt-2 text-xl text-gray-600">{'지도점검년도'}</Label>
+                <SelectBox
+                  className="w-full h-full text-2xl"
+                  label=""
+                  selectClass={""}
+                  selectArray={yearOptions}
+                  value={searchYear}
+                  onSelectValue={(val: string | number) =>
+                    setSearchYear(String(val))
+                  }
+                />
+              </div>
+              <div className="col-span-2 flex flex-row space-x-2">
+                <Label className="w-28 mt-2 text-xl text-gray-600">{'시설구분'}</Label>
+                <SelectBox
+                  className={"w-full h-full text-2xl"}
+                  label={""}
+                  selectClass={""}
+                  selectArray={rainChkgdn.fcltDiv}
+                  onSelectValue={(val: string | number) =>
+                    setSelFcltDiv(String(val))
+                  }
+                  value={selFcltDiv ?? rainChkgdn.fcltDiv[0]?.val}
+                />
+              </div>
            </SearchFormLeft>
-            <SearchFormRight>
+            <SearchFormRight
+              className="w-2/12 mx-5 flex flex-col items-center justify-center space-x-2 ">
              <div className="space-y">
                <div className="flex flex-row space-x-2">
                  <Button
@@ -200,7 +203,7 @@ export default function Page() {
                  <Button
                    size={"sm"}
                    onClick={() => {
-                         clickDelete(  deleteIdx,selFcltDiv);
+                      clickDelete(deleteIdx, selFcltDiv);
                    }}
                  >
                    삭제
@@ -213,8 +216,6 @@ export default function Page() {
                  >
                    저장
                  </Button>
-                </div>
-                <div className="flex flex-row space-x-2 pt-3">
                  <Button
                    size={"sm"}
                    onClick={() => {
@@ -249,7 +250,7 @@ export default function Page() {
                handleRswtClick={handleClick}
                rswtChkData={rswtChkgdn.rswtChkRes}
              />
-            ) }
+            )}
          </ListDiv>
        </div>
      </div>
@@ -264,7 +265,7 @@ export default function Page() {
      <UiModal
        open={isRegExcel}
        onOpenChange={setIsRegExcel}
-        bodyClass={"w-[40vw] max-w-none"}
+        bodyClass={"w-[30vw] max-w-none"}
        body={<ChkgdExcel type={selFcltDiv}></ChkgdExcel>}
      />
      <Toaster position="top-center" />
@@ -6,6 +6,7 @@ import type { rswtChkZodType } from "@/app/store/prfmncReg/chkgdnReg/rswrtChkgdn
 import {
  excelArrayDownload,
  excelDownload,
+  yearOptions,
 } from "@/components/lib/func/commom";
 import ChkgdExcel from "@/components/ui/modal/chkgd/chkgdExcel/chkgdExcel";
 import ChkgdModal from "@/components/ui/modal/chkgd/chkgdModal/chkgdModal";
@@ -22,7 +23,7 @@ import {
  UiModal,
 } from "@common/business_components/ui";
 import ListDiv from "@common/business_components/ui/list_div";
-import { Button } from "@common/components/ui";
+import { Button, Label } from "@common/components/ui";
 import { useCallback, useEffect, useState } from "react";
 import { Toaster } from "react-hot-toast";

@@ -42,14 +43,15 @@ export default function Page() {
  } = useWrStore((state) => {
    return state;
  });
-  const [searchTxt, setSearchTxt] = useState<string>();
+
  const [selFcltDiv, setSelFcltDiv] = useState("RNB");
  const [isModal, setIsModal] = useState({
    open: false,
    data: {},
  });
+  const [searchYear, setSearchYear] = useState<string>(String(new Date().getFullYear()));
  const cellClick = () => {
-    if (searchTxt) rainChkSttnSearch(searchTxt, "0");
+    if (searchYear) rainChkSttnSearch(searchYear, "0");
  };

  useEffect(() => {
@@ -111,24 +113,32 @@ const excelDown=() =>{
          <Title title={"지도점검 결과 현황"} />
          <SearchDiv>
            <SearchFormLeft>
-              <SearchInput
-                className="col-span-3 my-7 !text-xl"
-                label=" 지도점검년도"
-                textValue={searchTxt ?? ""}
-                setText={(e) => {
-                  setSearchTxt(e);
-                }}
-              />
-              <SelectBox
-                className={"col-span-3 w-full h-full text-2xl"}
-                label={"시설구분"}
-                selectClass={""}
-                selectArray={rainChkSttn.fcltDiv}
-                onSelectValue={(val: string | number) =>
+              <div className="col-span-2 flex flex-row space-x-2">
+                <Label className="w-48 mt-2 text-xl text-gray-600">{'지도점검년도'}</Label>
+                <SelectBox
+                  className="w-full h-full text-2xl"
+                  label=""
+                  selectClass={""}
+                  selectArray={yearOptions}
+                  value={searchYear}
+                  onSelectValue={(val: string | number) =>
+                    setSearchYear(String(val))
+                  }
+                />
+              </div>
+              <div className="col-span-2 flex flex-row space-x-2">
+                <Label className="w-28 mt-2 text-xl text-gray-600">{'시설구분'}</Label>
+                <SelectBox
+                  className={"w-full h-full text-2xl"}
+                  label={""}
+                  selectClass={""}
+                  selectArray={rainChkSttn.fcltDiv}
+                  onSelectValue={(val: string | number) =>
                  setSelFcltDiv(String(val))
                }
                value={selFcltDiv ?? rainChkSttn.fcltDiv[0]?.val}
-              />
+                />
+              </div>
            </SearchFormLeft>
            <SearchFormRight>
              <div className="space-y">
@@ -141,8 +151,6 @@ const excelDown=() =>{
                  >
                    조회
                  </Button>
-                </div>
-                <div className="flex flex-row space-x-2 pt-3">
                  <Button color="green" size={"sm"} onClick={(e) =>{excelDown()}}>
                    다운로드
                  </Button>
@@ -90,7 +90,7 @@ export const chRowspanTable = (
  selectedIds: number[],
  handleCellClick: (index: number, headId: string) => void
 ) => {
-  let order =0
+  let order = 0
  // rowspan된 셀 렌더링 여부 추적용
  const renderedMap = new Map<string, Set<number>>();
  return (
@@ -100,68 +100,73 @@ export const chRowspanTable = (
          {headList
            .map((head) => {

+              const key = head.id;
+              const isMerged = head.rowSpan;
+              const value = row[key];
+              // 병합 대상이면 중복 렌더링 여부 판단
+              if (isMerged) {
+                const renderedSet = renderedMap.get(key) ?? new Set<number>();
+                if (renderedSet.has(rowIndex)) {

-            const key = head.id;
-            const isMerged = head.rowSpan;
-            const value = row[key];
-            // 병합 대상이면 중복 렌더링 여부 판단
-            if (isMerged) {
-              const renderedSet = renderedMap.get(key) ?? new Set<number>();
-              if (renderedSet.has(rowIndex)) {
-               
-                return null; // 이미 렌더링된 셀은 skip
+                  return null; // 이미 렌더링된 셀은 skip
+                }
+
+                const rowspan = row.rowspan ?? 1;
+                for (let i = 0; i < rowspan; i++) {
+                  renderedSet.add(rowIndex + i);
+                }
+                renderedMap.set(key, renderedSet);
+                return (
+                  <TableCell
+                    key={key}
+                    rowSpan={rowspan}
+                    className="align-middle text-center whitespace-nowrap"
+                  >
+                    {key === "checkBox" ? (
+                      <Checkbox
+                        checked={selectedIds.includes(row.chkgdnPk)}
+                        onCheckedChange={(checked) =>
+                          toggleSelection(row.chkgdnPk, checked === true)
+                        }
+                      ></Checkbox>
+                    ) : key === "order" ? (
+                      ++order
+                    ) : (
+                      value
+                    )}
+                  </TableCell>
+                );
              }

-              const rowspan = row.rowspan ?? 1;
-              for (let i = 0; i < rowspan; i++) {
-                renderedSet.add(rowIndex + i);
-              }
-              renderedMap.set(key, renderedSet);
+              // 기본 셀
              return (
                <TableCell
                  key={key}
-                  rowSpan={rowspan}
-                  className="align-middle text-center whitespace-nowrap"
+                  className="text-center whitespace-nowrap"
+                  onClick={() => handleCellClick(rowIndex, head.id)}
                >
-                  {key === "checkBox" ? (
-                    <Checkbox
-                      checked={selectedIds.includes(row.chkgdnPk)}
-                      onCheckedChange={(checked) =>
-                        toggleSelection(row.chkgdnPk, checked === true)
-                      }
-                    ></Checkbox>
-                  ) : key === "order" ? (
-                    ++order
+                  {head.edit === true ? (
+                    <Input
+                      className={`${head.type === "number" ? "text-right" : "text-center"} !text-xl`}
+                      type={head.type}
+                      onChange={(e) => {
+                        handleChange(rowIndex, head.id, e.target.value);
+                      }}
+                      value={value}
+                    />
                  ) : (
-                    value
+                    (head.id === "totalSplyUswtrUtztnQnt" || head.id === "totalRuseFcltUtztnQnt" || head.id === "splyUswtrUtztnQnt" || head.id === "ruseFcltUtztnQnt") ? (
+                      <span className="underline text-blue-600 cursor-pointer">
+                        {value}
+                      </span>
+                    ) : (
+                      <>{value}</>
+                    )
                  )}
                </TableCell>
              );
-            }

-            // 기본 셀
-            return (
-              <TableCell
-                key={key}
-                className="text-center whitespace-nowrap"
-                onClick={() => handleCellClick(rowIndex, head.id)}
-              >
-                {head.edit === true ? (
-                  <Input
-                    className={`${head.type === "number" ? "text-right" : "text-center"} !text-xl`}
-                    type={head.type}
-                    onChange={(e) => {
-                      handleChange(rowIndex, head.id, e.target.value);
-                    }}
-                    value={value}
-                  />
-                ) : (
-                  `${value}`
-                )}
-              </TableCell>
-            );
-
-          })}
+            })}
        </TableRow>
      ))}
    </>
@@ -170,13 +175,13 @@ export const chRowspanTable = (



-export const headVisibleChange= (headList: TableUpperProps[] , isEdit :boolean) => {
-    return headList.forEach(( head) => {
-      if(head.edit!== undefined)
-      head.edit=isEdit;
-      if(head.id==='checkBox' ){
-        head.visible=false
-      }
+export const headVisibleChange = (headList: TableUpperProps[], isEdit: boolean) => {
+  return headList.forEach((head) => {
+    if (head.edit !== undefined)
+      head.edit = isEdit;
+    if (head.id === 'checkBox') {
+      head.visible = false
+    }

-    });
+  });
 }
@@ -65,7 +65,7 @@ export const excelDownload = (
  fileNm: string,
  sampleFile: string,
  headerRange = "A1:V3",
-  writeLine=4
+  writeLine = 4
 ) => {
  if (excelList.length === 0) return;
  fetch(`/${sampleFile}`, {}).then(async (response) => {
@@ -82,7 +82,7 @@ export const excelDownload = (
 export const excelArrayDownload = (
  fileNm: string,
  sampleFile: string,
-  sheetArray:[typeof sheetParameter]
+  sheetArray: [typeof sheetParameter]
 ) => {
  if (!sheetArray) return;
  fetch(`/${sampleFile}`, {}).then(async (response) => {
@@ -131,4 +131,13 @@ export const getCityOrSgg = (ref: RefObject<ReturnType>) => {
 export const safeDate = (value: any): Date | undefined => {
  const date = new Date(value);
  return isNaN(date.getTime()) ? undefined : date;
-};
+};
+
+const currentYear = new Date().getFullYear();
+export const yearOptions: { val: string; text: string }[] = Array.from(
+  { length: currentYear - 1969 },
+  (_, i) => ({
+    val: String(1970 + i),
+    text: `${1970 + i}년`,
+  })
+);
@@ -15,6 +15,7 @@ import {
  Form,
  FormField,
  FormUi,
+  SelectBox,
  Title,
 } from "@common/business_components/ui";
 import { Button, Input } from "@common/components/ui";
@@ -37,7 +38,19 @@ export default function ChkgdExcel({ type }: { type: string }) {
  >();
  const [excelRswtData, setExcelRswtData] = useState<rswtChkZodType[]>();

-  const defaultValues: z.infer<typeof chkgdRegExcel> = chkgdRegExcel.parse({});
+  const currentYear = new Date().getFullYear();
+  const startYear = 1970;
+  const yearOptions: { val: string; text: string }[] = Array.from(
+    { length: currentYear - startYear + 1 },
+    (_, i) => {
+      const y = startYear + i;
+      return { val: String(y), text: `${y}년` };
+    }
+  );
+
+  const defaultValues: z.infer<typeof chkgdRegExcel> = chkgdRegExcel.parse({
+    chckYr: String(currentYear)
+  });

  const form = useForm<z.infer<typeof chkgdRegExcel>>({
    resolver: zodResolver(chkgdRegExcel),
@@ -176,8 +189,8 @@ export default function ChkgdExcel({ type }: { type: string }) {
              ></Title>
            </div>
            <div className="flex justify-between">
-              <h3 className="text-2xl font-bold text-gray-900">
-                {"○점검정보 입력"}
+              <h3 className="text-2xl font-bold text-gray-900 mt-1 ml-7">
+                {"점검정보 입력"}
              </h3>

              <Button className="" type="submit">
@@ -191,11 +204,13 @@ export default function ChkgdExcel({ type }: { type: string }) {
                name="chckYr"
                render={({ field }) => (
                  <FormUi label="등록년도">
-                    <Input
-                      className={`text-3xl`}
-                      type="text"
+                    <SelectBox
+                      className="w-1/4 text-3xl"
+                      selectClass={""}
+                      label=""
+                      selectArray={yearOptions}
                      value={field.value}
-                      onChange={field.onChange}
+                      onSelectValue={(val) => field.onChange(String(val))}
                    />
                  </FormUi>
                )}
@@ -224,14 +224,14 @@ export default function ChkgdModal({ type, obj }: { type: string; obj: any }) {
          <Title
            title={
              type === "RNB"
-                ? "빗물이용시설"
-                : "중수도 이용시설" + "지도점검 결과등록"
+                ? "빗물이용시설 " + "지도점검 결과등록"
+                : "중수도 이용시설 " + "지도점검 결과등록"
            }
          ></Title>
        </div>
        <div className="flex justify-between">
-          <h3 className="text-2xl font-bold text-gray-900">
-            {"○" + "" + `(${obj.bdstNm})`}
+          <h3 className="text-2xl font-bold text-gray-900 mt-2 ml-6">
+            {`(${obj.bdstNm})`}
          </h3>
          {!rainChkSttn.isSttn ? (
            <Button className="" onClick={allDataUpdate}>
@@ -60,19 +60,19 @@ export function GuideDetailsTable({
              <TableCell key={head.id + headIndex} className="w-36" >
                {head.edit ===true && data.edit !==false?
                <Input
-                  className={`${head.id !== "utztnUsgCd" ? "text-right" : "text-center"} !text-2xl h-10 w-full`}
+                  className={`${head.id !== "utztnUsgCd" ? "text-right" : "text-center"} !text-xl h-10 w-full`}
                  onChange={(e) =>
                    handleChange(dataIndex, head.id, e.target.value)
                  }
-                  value={data[head.id as keyof any] || ""}
+                  value={data[head.id as keyof any] ?? ""}
                /> : (
                  <div
                    className={`
                      ${head.id !== "utztnUsgCd" ? "text-right" : "text-center"} 
-                      !text-2xl w-full h-10 
+                      !text-xl w-full h-10 
                    `}
                  >
-                    {data[head.id as keyof any] || ""}
+                    {data[head.id as keyof any] ?? ""}
                  </div>
                )
                }