조사결과 관로·맨홀 지도 레이어와 보고서 조회 연동

2026-08-03 10:11:48 +09:00
parent bcf5d3caec
commit c9d85a8ce4
22 changed files with 1538 additions and 56 deletions
@@ -0,0 +1,81 @@
+"use client";
+
+import type { ExmnMapFilters, ExmnMapJobType } from "./exmnMapTypes";
+
+type Props = {
+  jobType: ExmnMapJobType;
+  filters: ExmnMapFilters;
+  onFiltersChange: (filters: ExmnMapFilters) => void;
+};
+
+const GRADE_OPTIONS = ["", "1", "2", "3", "4", "5"];
+
+/** 조사결과 레이어의 세 가지 자동 적용 필터다. */
+export default function ExmnLayerSettingPanel({
+  jobType,
+  filters,
+  onFiltersChange,
+}: Props) {
+  const updateFilter = (key: keyof ExmnMapFilters, value: string) => {
+    onFiltersChange({
+      ...filters,
+      [key]: value.replace(/[^0-9]/g, ""),
+    });
+  };
+  const selectClass =
+    "h-[24px] w-[54px] rounded-[4px] border border-[#ccd6df] bg-white px-2 text-[1rem] text-[#222] outline-none focus:border-primary";
+  const labelClass = "shrink-0 text-[1.05rem] font-medium text-slate-700";
+
+  return (
+    <div className="w-full rounded-[6px] border border-[#dbe7f5] bg-white px-2 py-[9px] shadow-[0_2px_8px_rgba(15,23,42,0.05)]">
+      <div className="mb-2 flex items-center gap-1">
+        <span className={`h-2 w-2 rounded-full ${jobType === "PPL" ? "bg-[#facc15]" : "bg-[#8b5cf6]"}`} />
+        <span className="text-[1.1rem] font-semibold text-slate-700">
+          {jobType === "PPL" ? "관로조사" : "맨홀조사"}
+        </span>
+      </div>
+      <div className="space-y-1.5">
+        <label className="flex min-h-[25px] items-center justify-between gap-2">
+          <span className={labelClass}>사업차수</span>
+          <input
+            className={selectClass}
+            type="text"
+            inputMode="numeric"
+            maxLength={10}
+            placeholder="전체"
+            value={filters.bizCycl}
+            onChange={(event) => updateFilter("bizCycl", event.target.value)}
+          />
+        </label>
+        <label className="flex min-h-[25px] items-center justify-between gap-2">
+          <span className={labelClass}>구조적 상태등급</span>
+          <select
+            className={selectClass}
+            value={filters.structuralGrade}
+            onChange={(event) => updateFilter("structuralGrade", event.target.value)}
+          >
+            {GRADE_OPTIONS.map((grade) => (
+              <option key={grade || "all"} value={grade}>
+                {grade || "전체"}
+              </option>
+            ))}
+          </select>
+        </label>
+        <label className="flex min-h-[25px] items-center justify-between gap-2">
+          <span className={labelClass}>운영적 상태등급</span>
+          <select
+            className={selectClass}
+            value={filters.operationalGrade}
+            onChange={(event) => updateFilter("operationalGrade", event.target.value)}
+          >
+            {GRADE_OPTIONS.map((grade) => (
+              <option key={grade || "all"} value={grade}>
+                {grade || "전체"}
+              </option>
+            ))}
+          </select>
+        </label>
+      </div>
+    </div>
+  );
+}