dm_new: 수요정보등록 원복
This commit is contained in:
dongsilove
@@ -8,75 +8,14 @@
|
||||
*/
|
||||
"use client";
|
||||
|
||||
import { Suspense, useEffect, useMemo, useRef, useState } from "react";
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
import { useDmStore } from "@/app/store";
|
||||
import type { DemandCompBizType } from "@/app/store/sdmMng";
|
||||
import { putFetch } from "@/components/ui/api";
|
||||
import { useMemo, useState, useRef } from "react";
|
||||
import SubPageHeader from "@/components/SubPageHeader";
|
||||
import WaterQualityRefModal from "../modal/WaterQualityRefModal";
|
||||
import CandidateSiteModal, { type CandidateSite } from "@/components/CandidateSiteModal";
|
||||
|
||||
type PHRange = { min: string; max: string };
|
||||
type SessionUser = {
|
||||
dmdInfoId?: string;
|
||||
dmdCoNm?: string;
|
||||
ctpvCd?: string;
|
||||
sggCd?: string;
|
||||
zip?: string;
|
||||
daddr?: string;
|
||||
telno?: string;
|
||||
rgtr?: string;
|
||||
};
|
||||
|
||||
const toNumberOrNull = (value: string, disabled = false) => {
|
||||
if (disabled) return null;
|
||||
const trimmed = value.trim();
|
||||
if (!trimmed) return null;
|
||||
const parsed = Number(trimmed);
|
||||
return Number.isNaN(parsed) ? null : parsed;
|
||||
};
|
||||
|
||||
const toNumberOrEmpty = (value: string) => {
|
||||
const trimmed = value.trim();
|
||||
if (!trimmed) return "" as const;
|
||||
const parsed = Number(trimmed);
|
||||
return Number.isNaN(parsed) ? ("" as const) : parsed;
|
||||
};
|
||||
|
||||
const isNumeric = (value: string) => /^\d+(\.\d+)?$/.test(value.trim());
|
||||
|
||||
const formatDateForInput = (raw?: string | null) => {
|
||||
if (!raw) return "";
|
||||
const parsed = new Date(raw);
|
||||
if (Number.isNaN(parsed.getTime())) return "";
|
||||
const yyyy = parsed.getFullYear();
|
||||
const mm = String(parsed.getMonth() + 1).padStart(2, "0");
|
||||
const dd = String(parsed.getDate()).padStart(2, "0");
|
||||
return `${yyyy}-${mm}-${dd}`;
|
||||
};
|
||||
|
||||
const parsePhRange = (raw?: string | null): PHRange => {
|
||||
if (!raw) return { min: "", max: "" };
|
||||
const [min = "", max = ""] = raw.split("~").map((v) => v.trim());
|
||||
return { min, max };
|
||||
};
|
||||
|
||||
const getSessionUser = (): SessionUser | null => {
|
||||
if (typeof window === "undefined") return null;
|
||||
const raw = sessionStorage.getItem("user");
|
||||
if (!raw) return null;
|
||||
try {
|
||||
return JSON.parse(raw) as SessionUser;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
function DemandRegisterPageContent() {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
const { insertSdmInfoData, Sdm } = useDmStore((state) => state);
|
||||
|
||||
export default function DemandRegisterPage() {
|
||||
const today = useMemo(() => {
|
||||
const d = new Date();
|
||||
const yyyy = d.getFullYear();
|
||||
@@ -86,486 +25,299 @@ function DemandRegisterPageContent() {
|
||||
}, []);
|
||||
|
||||
const [openRef, setOpenRef] = useState(false);
|
||||
const [editMode, setEditMode] = useState(false);
|
||||
const [updateAllowed, setUpdateAllowed] = useState(true);
|
||||
const [dmdInfoSn, setDmdInfoSn] = useState<number>(0);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
const [openCand, setOpenCand] = useState(false);
|
||||
const [selectedCands, setSelectedCands] = useState<CandidateSite[]>([]);
|
||||
|
||||
// 기본정보
|
||||
const [reqDate, setReqDate] = useState<string>(today); // 요구시기
|
||||
const [reqQty, setReqQty] = useState<string>(""); // 요구수량(m²/d)
|
||||
const [usePurpose, setUsePurpose] = useState<string>(""); // 사용용도
|
||||
const [hopePrice, setHopePrice] = useState<string>(""); // 희망단가
|
||||
|
||||
const [reqDate, setReqDate] = useState<string>(today);
|
||||
const [reqQty, setReqQty] = useState<string>("");
|
||||
const [usePurpose, setUsePurpose] = useState<string>("");
|
||||
const [hopePrice, setHopePrice] = useState<string>("");
|
||||
|
||||
// 요구수질
|
||||
const [coliform, setColiform] = useState<string>(""); // 총대장균군수(개/mg)
|
||||
const [noDetect, setNoDetect] = useState<boolean>(false); // 총대장균군수 불검출
|
||||
|
||||
const [tn, setTn] = useState<string>(""); // 총질소(T-N)(mg/L)
|
||||
const [residualCl, setResidualCl] = useState<string>(""); // 결합잔류염소(mg/L)
|
||||
const [tp, setTp] = useState<string>(""); // 총인(T-P)(mg/L)
|
||||
const [turbidity, setTurbidity] = useState<string>(""); //
|
||||
const [ph, setPh] = useState<PHRange>({ min: "", max: "" }); // 수소이온농도(pH)
|
||||
const [bod, setBod] = useState<string>(""); // 생물화학적산소요구량(BOD)(mg/L)
|
||||
const [chloride, setChloride] = useState<string>(""); // 염화물(mgCL/L)
|
||||
const [odor, setOdor] = useState<string>("불쾌하지 않을 것"); // 냄새
|
||||
const [ec, setEc] = useState<string>(""); // 전기전도도(µs/cm)
|
||||
const [color, setColor] = useState<string>(""); // 색도(도)
|
||||
const [remark, setRemark] = useState<string>(""); // 비고
|
||||
const [coliform, setColiform] = useState<string>("");
|
||||
const [noDetect, setNoDetect] = useState<boolean>(false);
|
||||
|
||||
const [tn, setTn] = useState<string>("");
|
||||
const [residualCl, setResidualCl] = useState<string>("");
|
||||
const [tp, setTp] = useState<string>("");
|
||||
const [turbidity, setTurbidity] = useState<string>("");
|
||||
const [ph, setPh] = useState<PHRange>({ min: "", max: "" });
|
||||
const [bod, setBod] = useState<string>("");
|
||||
const [chloride, setChloride] = useState<string>("");
|
||||
const [odor, setOdor] = useState<string>("불쾌하지 않을 것");
|
||||
const [ec, setEc] = useState<string>("");
|
||||
const [color, setColor] = useState<string>("");
|
||||
const [remark, setRemark] = useState<string>("");
|
||||
|
||||
// 공급처 후보지 선택(필수아님)
|
||||
const [cand1, setCand1] = useState("");
|
||||
const [cand2, setCand2] = useState("");
|
||||
const [cand3, setCand3] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
const isEditParam =
|
||||
searchParams.get("editMode") === "true" ||
|
||||
Boolean(searchParams.get("dmdInfoSn"));
|
||||
setEditMode(isEditParam);
|
||||
|
||||
const status = (searchParams.get("status") || "").trim();
|
||||
setUpdateAllowed(!isEditParam || status === "신청");
|
||||
|
||||
if (!isEditParam) return;
|
||||
|
||||
const parsedSn = Number(searchParams.get("dmdInfoSn") || "0");
|
||||
setDmdInfoSn(Number.isNaN(parsedSn) ? 0 : parsedSn);
|
||||
|
||||
setReqDate(formatDateForInput(searchParams.get("dmndTmng")) || today);
|
||||
setReqQty(searchParams.get("dmndQty") || "");
|
||||
setUsePurpose(searchParams.get("useUsgCd") || "");
|
||||
setHopePrice(searchParams.get("wntUntprc") || "");
|
||||
|
||||
const rawColiform = searchParams.get("grssClfg") || "";
|
||||
const isNoDetect = rawColiform === "-1";
|
||||
setNoDetect(isNoDetect);
|
||||
setColiform(isNoDetect ? "" : rawColiform);
|
||||
|
||||
setTn(searchParams.get("tn") || "");
|
||||
setResidualCl(searchParams.get("combResdch") || "");
|
||||
setTp(searchParams.get("tph") || "");
|
||||
setTurbidity(searchParams.get("trbt") || "");
|
||||
setBod(searchParams.get("blgcOxygDmndQnt") || "");
|
||||
setChloride(searchParams.get("clIonQnt") || "");
|
||||
setEc(searchParams.get("cdtnv") || "");
|
||||
setColor(searchParams.get("crmty") || "");
|
||||
setRemark(searchParams.get("rmrk") || "");
|
||||
|
||||
const phRange = parsePhRange(searchParams.get("ph"));
|
||||
setPh(phRange);
|
||||
setOdor(searchParams.get("smll") || "불쾌하지 않을 것");
|
||||
}, [searchParams, today]);
|
||||
|
||||
const validate = () => {
|
||||
const disabledFields = Sdm.disableRules[usePurpose] || [];
|
||||
const isDisabled = (field: string) => disabledFields.includes(field);
|
||||
|
||||
if (!reqDate) {
|
||||
alert("요구시기를 입력해주세요.");
|
||||
return false;
|
||||
}
|
||||
if (!reqQty.trim()) {
|
||||
alert("요구수량을 입력해주세요.");
|
||||
return false;
|
||||
}
|
||||
if (!/^\d+$/.test(reqQty.trim())) {
|
||||
alert("요구수량은 숫자만 입력 가능합니다.");
|
||||
return false;
|
||||
}
|
||||
if (!usePurpose.trim()) {
|
||||
alert("사용용도를 입력해주세요.");
|
||||
return false;
|
||||
}
|
||||
if (!hopePrice.trim()) {
|
||||
alert("희망단가를 입력해주세요.");
|
||||
return false;
|
||||
}
|
||||
if (!/^\d+$/.test(hopePrice.trim())) {
|
||||
alert("희망단가는 숫자만 입력 가능합니다.");
|
||||
return false;
|
||||
}
|
||||
if (!noDetect && coliform.trim() && !isNumeric(coliform)) {
|
||||
alert("총대장균군수는 숫자만 입력 가능합니다.");
|
||||
return false;
|
||||
}
|
||||
|
||||
const requiredFields: Array<{ key: string; label: string; value: string }> = [
|
||||
{ key: "tn", label: "총질소(T-N)(mg/L)", value: tn },
|
||||
{ key: "combResdch", label: "결합잔류염소(mg/L)", value: residualCl },
|
||||
{ key: "tph", label: "총인(T-P)(mg/L)", value: tp },
|
||||
{ key: "trbt", label: "탁도(NTU)", value: turbidity },
|
||||
{ key: "bod", label: "생물학적 산소요구량(BOD)(mg/L)", value: bod },
|
||||
{ key: "clIonQnt", label: "염화물(mgCL/L)", value: chloride },
|
||||
{ key: "smll", label: "냄새", value: odor },
|
||||
{ key: "cdtnv", label: "전기전도도(㎲/cm)", value: ec },
|
||||
{ key: "crmty", label: "색도(도)", value: color },
|
||||
];
|
||||
|
||||
for (const field of requiredFields) {
|
||||
if (isDisabled(field.key)) continue;
|
||||
if (!field.value.trim()) {
|
||||
alert(`${field.label} 을 입력해주세요.`);
|
||||
return false;
|
||||
}
|
||||
if (field.key !== "smll" && !isNumeric(field.value)) {
|
||||
alert(`${field.label} 은 숫자만 입력 가능합니다.`);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
if (!isDisabled("ph") && (!ph.min.trim() || !ph.max.trim())) {
|
||||
alert("수소이온농도(pH) 을 입력해주세요.");
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
const onSubmit = async () => {
|
||||
if (submitting) return;
|
||||
if (!validate()) return;
|
||||
|
||||
if (editMode && !updateAllowed) {
|
||||
alert("진행상태가 신청인 경우에만 수정할 수 있습니다.");
|
||||
return;
|
||||
}
|
||||
|
||||
const sessionUser = getSessionUser();
|
||||
const idFromQuery =
|
||||
(searchParams.get("dmdInfoId") || "") + (searchParams.get("bznmTotNo") || "");
|
||||
const dmdInfoId = String(sessionUser?.dmdInfoId || idFromQuery || "").trim();
|
||||
|
||||
if (!dmdInfoId) {
|
||||
alert("수요처 정보가 없어 저장할 수 없습니다.");
|
||||
return;
|
||||
}
|
||||
|
||||
const disabledFields = Sdm.disableRules[usePurpose] || [];
|
||||
const isDisabled = (field: string) => disabledFields.includes(field);
|
||||
const parsedPh = isDisabled("ph") ? "" : `${ph.min.trim()}~${ph.max.trim()}`;
|
||||
const cands = [cand1, cand2, cand3]
|
||||
.map((name) => name.trim())
|
||||
.filter(Boolean)
|
||||
.map((name) => ({
|
||||
ruseUtztnFcltNm: name,
|
||||
ruseUtztnFcltCd: "",
|
||||
}))
|
||||
.filter((item) => item.ruseUtztnFcltNm && item.ruseUtztnFcltCd);
|
||||
|
||||
const payload: DemandCompBizType = {
|
||||
index: 0,
|
||||
dmdInfoId,
|
||||
dmdInfoFk: dmdInfoId,
|
||||
bzmnNo: "",
|
||||
dmdCoNm: String(sessionUser?.dmdCoNm || searchParams.get("dmdCoNm") || ""),
|
||||
zip: String(sessionUser?.zip || searchParams.get("zip") || ""),
|
||||
daddr: String(sessionUser?.daddr || searchParams.get("daddr") || ""),
|
||||
telno: String(sessionUser?.telno || searchParams.get("telno") || ""),
|
||||
rgtr: String(sessionUser?.rgtr || searchParams.get("rgtr") || ""),
|
||||
useUsgCd: usePurpose.trim(),
|
||||
ctpvCd: String(sessionUser?.ctpvCd || searchParams.get("ctpvCd") || ""),
|
||||
sggCd: String(sessionUser?.sggCd || searchParams.get("sggCd") || ""),
|
||||
dmdAplyPswd: "",
|
||||
wntUntprc: toNumberOrEmpty(hopePrice),
|
||||
dmndTmng: reqDate ? new Date(reqDate) : "",
|
||||
dmndQty: toNumberOrEmpty(reqQty),
|
||||
grssClfg: noDetect ? -1 : toNumberOrNull(coliform),
|
||||
tn: toNumberOrNull(tn, isDisabled("tn")),
|
||||
combResdch: toNumberOrNull(residualCl, isDisabled("combResdch")),
|
||||
tph: toNumberOrNull(tp, isDisabled("tph")),
|
||||
trbt: toNumberOrNull(turbidity, isDisabled("trbt")),
|
||||
ph: parsedPh,
|
||||
blgcOxygDmndQnt: toNumberOrNull(bod, isDisabled("bod")),
|
||||
clIonQnt: toNumberOrNull(chloride, isDisabled("clIonQnt")),
|
||||
smll: isDisabled("smll") ? "" : odor.trim(),
|
||||
cdtnv: toNumberOrNull(ec, isDisabled("cdtnv")),
|
||||
crmty: toNumberOrNull(color, isDisabled("crmty")),
|
||||
rmrk: remark.trim(),
|
||||
reqDt: "",
|
||||
dmdInfoSn: editMode ? dmdInfoSn : 0,
|
||||
status: String(searchParams.get("status") || ""),
|
||||
splyCndtList: cands,
|
||||
};
|
||||
|
||||
try {
|
||||
setSubmitting(true);
|
||||
if (editMode) {
|
||||
const updatePayload = {
|
||||
...payload,
|
||||
mdfr: String(sessionUser?.rgtr || payload.rgtr || ""),
|
||||
};
|
||||
await putFetch("/reuseFc/request/demandInfo", updatePayload);
|
||||
alert("수요정보 수정 완료!");
|
||||
} else {
|
||||
await insertSdmInfoData(payload);
|
||||
}
|
||||
router.push("/apply/status");
|
||||
} catch (error) {
|
||||
console.error("Failed to submit demand info", error);
|
||||
alert(editMode ? "수요정보 수정에 실패하였습니다." : "수요정보 등록에 실패하였습니다.");
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
<main className="bg-white">
|
||||
<main className="bg-white">
|
||||
|
||||
{/* 서브 타이틀 + 브레드크럼 */}
|
||||
<SubPageHeader
|
||||
title="수요정보등록"
|
||||
crumbs={[
|
||||
{ label: "Home", href: "/main" },
|
||||
{ label: "수요신청", href: "/apply/status" },
|
||||
{ label: "수요정보등록" },
|
||||
]}
|
||||
/>
|
||||
{/* 서브 타이틀 + 브레드크럼 */}
|
||||
<SubPageHeader
|
||||
title="수요정보등록"
|
||||
crumbs={[
|
||||
{ label: "Home", href: "/reuse" },
|
||||
{ label: "수요신청", href: "/reuse/apply" },
|
||||
{ label: "수요정보등록" },
|
||||
]}
|
||||
/>
|
||||
|
||||
{/* 컨텐츠 영역 */}
|
||||
<div>
|
||||
{/* 컨텐츠 영역 */}
|
||||
<div>
|
||||
|
||||
{/* 기본정보 테이블 */}
|
||||
<div className="border border-neutral-200 bg-white">
|
||||
<FormRow label="요구시기" required>
|
||||
<DateInput value={reqDate} onChange={setReqDate} />
|
||||
</FormRow>
|
||||
{/* 기본정보 테이블 */}
|
||||
<div className="border border-neutral-200 bg-white">
|
||||
<FormRow label="요구시기" required>
|
||||
<DateInput value={reqDate} onChange={setReqDate} />
|
||||
</FormRow>
|
||||
|
||||
<Divider />
|
||||
<Divider />
|
||||
|
||||
<FormRow label="요구수량(m²/d)" required>
|
||||
<TextInput value={reqQty} onChange={setReqQty} placeholder="" />
|
||||
</FormRow>
|
||||
<FormRow label="요구수량(m²/d)" required>
|
||||
<TextInput value={reqQty} onChange={setReqQty} placeholder="" />
|
||||
</FormRow>
|
||||
|
||||
<Divider />
|
||||
<Divider />
|
||||
|
||||
<FormRow label="사용용도" required>
|
||||
<TextInput value={usePurpose} onChange={setUsePurpose} />
|
||||
</FormRow>
|
||||
<FormRow label="사용용도" required>
|
||||
<TextInput value={usePurpose} onChange={setUsePurpose} />
|
||||
</FormRow>
|
||||
|
||||
<Divider />
|
||||
<Divider />
|
||||
|
||||
<FormRow label="희망단가(원)" required>
|
||||
<TextInput value={hopePrice} onChange={setHopePrice} />
|
||||
</FormRow>
|
||||
</div>
|
||||
|
||||
{/* 요구수질 섹션 타이틀 바 */}
|
||||
<div className="grid grid-cols-12">
|
||||
<div className="col-span-12 lg:col-span-2 inline-flex justify-center items-center gap-3 px-6 py-6 text-center">
|
||||
<span className="text-lg font-semibold text-neutral-800">요구수질</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOpenRef(true)}
|
||||
className="rounded border-[2px] border-[#DE3412] px-2 py-3 text-[15px] font-medium text-[#4F4F4F] hover:bg-orange-50"
|
||||
>
|
||||
수질기준 참고
|
||||
</button>
|
||||
{/* 수질기준참고 모달 */}
|
||||
<WaterQualityRefModal
|
||||
open={openRef}
|
||||
onClose={() => setOpenRef(false)}
|
||||
imageSrc="/images/landing/water_quality_ref_1.png"
|
||||
/>
|
||||
<FormRow label="희망단가(원)" required>
|
||||
<TextInput value={hopePrice} onChange={setHopePrice} />
|
||||
</FormRow>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 요구수질 테이블 */}
|
||||
<div className="border border-neutral-200 bg-white">
|
||||
{/* 1행 */}
|
||||
<QualityRow
|
||||
leftLabel="총대장균군수(개/mg)"
|
||||
leftRequired
|
||||
leftControl={
|
||||
<div className="flex items-center gap-4">
|
||||
<TextInput
|
||||
value={coliform}
|
||||
onChange={setColiform}
|
||||
disabled={noDetect}
|
||||
className={noDetect ? "bg-neutral-100 text-neutral-400" : ""}
|
||||
/>
|
||||
<label className="flex items-center gap-2 text-sm text-neutral-700">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={noDetect}
|
||||
onChange={(e) => {
|
||||
setNoDetect(e.target.checked);
|
||||
if (e.target.checked) setColiform("");
|
||||
}}
|
||||
className="h-4 w-4 rounded border-neutral-300"
|
||||
/>
|
||||
불검출
|
||||
</label>
|
||||
</div>
|
||||
}
|
||||
rightLabel="총질소(T-N)(mg/L)"
|
||||
rightControl={
|
||||
<InlineSuffixInput value={tn} onChange={setTn} suffix="이하" />
|
||||
}
|
||||
/>
|
||||
<Divider />
|
||||
|
||||
{/* 2행 */}
|
||||
<QualityRow
|
||||
leftLabel="결합잔류염소(mg/L)"
|
||||
leftRequired
|
||||
leftControl={<TextInput value={residualCl} onChange={setResidualCl} />}
|
||||
rightLabel="총인(T-P)(mg/L)"
|
||||
rightControl={
|
||||
<InlineSuffixInput value={tp} onChange={setTp} suffix="이하" />
|
||||
}
|
||||
/>
|
||||
<Divider />
|
||||
|
||||
{/* 3행 */}
|
||||
<QualityRow
|
||||
leftLabel="탁도(NTU)"
|
||||
leftRequired
|
||||
leftControl={
|
||||
<InlineSuffixInput value={turbidity} onChange={setTurbidity} suffix="이하" />
|
||||
}
|
||||
rightLabel="수소이온농도(pH)"
|
||||
rightControl={
|
||||
<div className="flex items-center gap-2">
|
||||
<TextInput
|
||||
value={ph.min}
|
||||
onChange={(v) => setPh((p) => ({ ...p, min: v }))}
|
||||
className="w-32"
|
||||
/>
|
||||
<span className="text-neutral-500">~</span>
|
||||
<TextInput
|
||||
value={ph.max}
|
||||
onChange={(v) => setPh((p) => ({ ...p, max: v }))}
|
||||
className="w-32"
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
<Divider />
|
||||
|
||||
{/* 4행 */}
|
||||
<QualityRow
|
||||
leftLabel={
|
||||
<>
|
||||
생물화학적산소요구량
|
||||
<br />
|
||||
(BOD)(mg/L)
|
||||
</>
|
||||
}
|
||||
leftRequired
|
||||
leftControl={<InlineSuffixInput value={bod} onChange={setBod} suffix="이하" />}
|
||||
rightLabel="염화물(mgCL/L)"
|
||||
rightControl={<InlineSuffixInput value={chloride} onChange={setChloride} suffix="이하" />}
|
||||
/>
|
||||
<Divider />
|
||||
|
||||
{/* 5행 */}
|
||||
<QualityRow
|
||||
leftLabel="냄새"
|
||||
leftRequired
|
||||
leftControl={
|
||||
<select
|
||||
value={odor}
|
||||
onChange={(e) => setOdor(e.target.value)}
|
||||
className="h-11 w-full max-w-[200px] rounded-md border border-neutral-300 bg-white px-3 text-sm outline-none focus:border-neutral-500"
|
||||
>
|
||||
<option>불쾌하지 않을 것</option>
|
||||
<option>약간 있음</option>
|
||||
<option>있음</option>
|
||||
</select>
|
||||
}
|
||||
rightLabel="전기전도도(µs/cm)"
|
||||
rightControl={<InlineSuffixInput value={ec} onChange={setEc} suffix="이하" />}
|
||||
/>
|
||||
<Divider />
|
||||
|
||||
{/* 6행 */}
|
||||
<QualityRow
|
||||
leftLabel="색도(도)"
|
||||
leftRequired
|
||||
leftControl={<InlineSuffixInput value={color} onChange={setColor} suffix="이하" />}
|
||||
rightLabel="비고"
|
||||
rightControl={
|
||||
<textarea
|
||||
value={remark}
|
||||
onChange={(e) => setRemark(e.target.value)}
|
||||
className="h-11 w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-sm outline-none focus:border-neutral-500"
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<Divider />
|
||||
|
||||
{/* 후보지 선택 */}
|
||||
{/* 요구수질 섹션 타이틀 바 */}
|
||||
<div className="grid grid-cols-12">
|
||||
<LabelCell>
|
||||
공급처 후보지 선택
|
||||
<br />
|
||||
(필수아님)
|
||||
</LabelCell>
|
||||
<div className="col-span-12 lg:col-span-2 inline-flex justify-center items-center gap-3 px-6 py-6 text-center">
|
||||
<span className="text-lg font-semibold text-neutral-800">요구수질</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOpenRef(true)}
|
||||
className="rounded border-[2px] border-[#DE3412] px-2 py-3 text-[15px] font-medium text-[#4F4F4F] hover:bg-orange-50"
|
||||
>
|
||||
수질기준 참고
|
||||
</button>
|
||||
{/* 수질기준참고 모달 */}
|
||||
<WaterQualityRefModal
|
||||
open={openRef}
|
||||
onClose={() => setOpenRef(false)}
|
||||
imageSrc="/images/landing/water_quality_ref_1.png"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-span-12 md:col-span-10 p-6">
|
||||
<div className="flex flex-col gap-3 xl:flex-row xl:items-center xl:gap-4">
|
||||
<TextInput value={cand1} onChange={setCand1} className="max-w-[220px]" />
|
||||
<TextInput value={cand2} onChange={setCand2} className="max-w-[220px]" />
|
||||
<TextInput value={cand3} onChange={setCand3} className="max-w-[220px]" />
|
||||
{/* 요구수질 테이블 */}
|
||||
<div className="border border-neutral-200 bg-white">
|
||||
{/* 1행 */}
|
||||
<QualityRow
|
||||
leftLabel="총대장균군수(개/mg)"
|
||||
leftRequired
|
||||
leftControl={
|
||||
<div className="flex items-center gap-4">
|
||||
<TextInput
|
||||
value={coliform}
|
||||
onChange={setColiform}
|
||||
disabled={noDetect}
|
||||
className={noDetect ? "bg-neutral-100 text-neutral-400" : ""}
|
||||
/>
|
||||
<label className="flex items-center gap-2 text-sm text-neutral-700">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={noDetect}
|
||||
onChange={(e) => {
|
||||
setNoDetect(e.target.checked);
|
||||
if (e.target.checked) setColiform("");
|
||||
}}
|
||||
className="h-4 w-4 rounded border-neutral-300"
|
||||
/>
|
||||
불검출
|
||||
</label>
|
||||
</div>
|
||||
}
|
||||
rightLabel="총질소(T-N)(mg/L)"
|
||||
rightControl={
|
||||
<InlineSuffixInput value={tn} onChange={setTn} suffix="이하" />
|
||||
}
|
||||
/>
|
||||
<Divider />
|
||||
|
||||
<div className="flex items-center gap-3 xl:ml-2">
|
||||
<button
|
||||
type="button"
|
||||
className="h-11 rounded-md bg-[#888] px-5 text-base text-white hover:bg-neutral-700"
|
||||
onClick={() => {
|
||||
// TODO: 후보지 조회 모달/검색 연결
|
||||
console.log("후보지 조회", { cand1, cand2, cand3 });
|
||||
}}
|
||||
>
|
||||
후보지 조회
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="h-11 rounded-md bg-[#888] px-5 text-base text-white hover:bg-neutral-600"
|
||||
onClick={() => {
|
||||
// TODO: 유사사례 연결
|
||||
console.log("유사사례");
|
||||
}}
|
||||
>
|
||||
유사사례
|
||||
</button>
|
||||
{/* 2행 */}
|
||||
<QualityRow
|
||||
leftLabel="결합잔류염소(mg/L)"
|
||||
leftRequired
|
||||
leftControl={<TextInput value={residualCl} onChange={setResidualCl} />}
|
||||
rightLabel="총인(T-P)(mg/L)"
|
||||
rightControl={
|
||||
<InlineSuffixInput value={tp} onChange={setTp} suffix="이하" />
|
||||
}
|
||||
/>
|
||||
<Divider />
|
||||
|
||||
{/* 3행 */}
|
||||
<QualityRow
|
||||
leftLabel="탁도(NTU)"
|
||||
leftRequired
|
||||
leftControl={
|
||||
<InlineSuffixInput value={turbidity} onChange={setTurbidity} suffix="이하" />
|
||||
}
|
||||
rightLabel="수소이온농도(pH)"
|
||||
rightControl={
|
||||
<div className="flex items-center gap-2">
|
||||
<TextInput
|
||||
value={ph.min}
|
||||
onChange={(v) => setPh((p) => ({ ...p, min: v }))}
|
||||
className="w-32"
|
||||
/>
|
||||
<span className="text-neutral-500">~</span>
|
||||
<TextInput
|
||||
value={ph.max}
|
||||
onChange={(v) => setPh((p) => ({ ...p, max: v }))}
|
||||
className="w-32"
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
<Divider />
|
||||
|
||||
{/* 4행 */}
|
||||
<QualityRow
|
||||
leftLabel={
|
||||
<>
|
||||
생물화학적산소요구량
|
||||
<br />
|
||||
(BOD)(mg/L)
|
||||
</>
|
||||
}
|
||||
leftRequired
|
||||
leftControl={<InlineSuffixInput value={bod} onChange={setBod} suffix="이하" />}
|
||||
rightLabel="염화물(mgCL/L)"
|
||||
rightControl={<InlineSuffixInput value={chloride} onChange={setChloride} suffix="이하" />}
|
||||
/>
|
||||
<Divider />
|
||||
|
||||
{/* 5행 */}
|
||||
<QualityRow
|
||||
leftLabel="냄새"
|
||||
leftRequired
|
||||
leftControl={
|
||||
<select
|
||||
value={odor}
|
||||
onChange={(e) => setOdor(e.target.value)}
|
||||
className="h-11 w-full max-w-[200px] rounded-md border border-neutral-300 bg-white px-3 text-sm outline-none focus:border-neutral-500"
|
||||
>
|
||||
<option>불쾌하지 않을 것</option>
|
||||
<option>약간 있음</option>
|
||||
<option>있음</option>
|
||||
</select>
|
||||
}
|
||||
rightLabel="전기전도도(µs/cm)"
|
||||
rightControl={<InlineSuffixInput value={ec} onChange={setEc} suffix="이하" />}
|
||||
/>
|
||||
<Divider />
|
||||
|
||||
{/* 6행 */}
|
||||
<QualityRow
|
||||
leftLabel="색도(도)"
|
||||
leftRequired
|
||||
leftControl={<InlineSuffixInput value={color} onChange={setColor} suffix="이하" />}
|
||||
rightLabel="비고"
|
||||
rightControl={
|
||||
<textarea
|
||||
value={remark}
|
||||
onChange={(e) => setRemark(e.target.value)}
|
||||
className="h-11 w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-sm outline-none focus:border-neutral-500"
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<Divider />
|
||||
|
||||
{/* 후보지 선택 */}
|
||||
<div className="grid grid-cols-12">
|
||||
<LabelCell>
|
||||
공급처 후보지 선택
|
||||
<br />
|
||||
(필수아님)
|
||||
</LabelCell>
|
||||
|
||||
<div className="col-span-12 md:col-span-10 p-6">
|
||||
<div className="flex flex-col gap-3 xl:flex-row xl:items-center xl:gap-4">
|
||||
<TextInput value={cand1} onChange={setCand1} className="max-w-[220px]" />
|
||||
<TextInput value={cand2} onChange={setCand2} className="max-w-[220px]" />
|
||||
<TextInput value={cand3} onChange={setCand3} className="max-w-[220px]" />
|
||||
|
||||
<div className="flex items-center gap-3 xl:ml-2">
|
||||
<button
|
||||
type="button"
|
||||
className="h-11 rounded-md bg-[#888] px-5 text-base text-white hover:bg-neutral-700"
|
||||
onClick={() => setOpenCand(true)}
|
||||
>
|
||||
후보지 조회
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="h-11 rounded-md bg-[#888] px-5 text-base text-white hover:bg-neutral-600"
|
||||
onClick={() => {
|
||||
// TODO: 유사사례 연결
|
||||
console.log("유사사례");
|
||||
}}
|
||||
>
|
||||
유사사례
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 하단 버튼 */}
|
||||
<div className="flex justify-center py-12">
|
||||
<button
|
||||
type="button"
|
||||
disabled={submitting}
|
||||
className="h-11 rounded-md bg-[#0B4EA2] px-10 text-lg text-white hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-70"
|
||||
onClick={onSubmit}
|
||||
>
|
||||
{editMode ? "수요정보 수정" : "수요정보 등록"}
|
||||
</button>
|
||||
</div>
|
||||
{/* 하단 버튼 */}
|
||||
<div className="flex justify-center py-12">
|
||||
<button
|
||||
type="button"
|
||||
className="h-11 rounded-md bg-[#0B4EA2] px-10 text-lg text-white hover:opacity-90"
|
||||
onClick={() => {
|
||||
// TODO: 저장 처리
|
||||
console.log("수요정보 등록");
|
||||
}}
|
||||
>
|
||||
수요정보 등록
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<CandidateSiteModal
|
||||
open={openCand}
|
||||
onClose={() => setOpenCand(false)}
|
||||
initialSelected={selectedCands}
|
||||
onApply={(list) => {
|
||||
setSelectedCands(list);
|
||||
|
||||
// ✅ cand1~3 입력칸에 반영(시설명만 넣는 버전)
|
||||
setCand1(list[0]?.name ?? "");
|
||||
setCand2(list[1]?.name ?? "");
|
||||
setCand3(list[2]?.name ?? "");
|
||||
|
||||
setOpenCand(false);
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default function DemandRegisterPage() {
|
||||
return (
|
||||
<Suspense fallback={<div>Loading...</div>}>
|
||||
<DemandRegisterPageContent />
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
|
||||
/* ----------------------------- UI helpers ----------------------------- */
|
||||
|
||||
function Divider() {
|
||||
|
||||
@@ -1,179 +1,157 @@
|
||||
// apps/dm/app/(landing)/reuse/apply/status/page.tsx
|
||||
"use client";
|
||||
|
||||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
import SubPageHeader from "@/components/SubPageHeader";
|
||||
|
||||
type WaterDetail = {
|
||||
toc: string;
|
||||
bdo: string;
|
||||
tn: string;
|
||||
tp: string;
|
||||
cl: string;
|
||||
conductivity: string;
|
||||
coliform: string;
|
||||
turbidity: string;
|
||||
odor: string;
|
||||
color: string;
|
||||
ph: string;
|
||||
note: string;
|
||||
};
|
||||
|
||||
type Row = {
|
||||
id: number;
|
||||
sido: string;
|
||||
sigungu: string;
|
||||
company: string;
|
||||
address: string;
|
||||
phone: string;
|
||||
date: string;
|
||||
status: "진행중" | "진행완료";
|
||||
detail: {
|
||||
reqDate: string;
|
||||
reqQty: string;
|
||||
usePurpose: string;
|
||||
price: string;
|
||||
water: WaterDetail;
|
||||
candidates: [string, string, string];
|
||||
};
|
||||
};
|
||||
|
||||
const MOCK: Row[] = [
|
||||
{
|
||||
id: 1,
|
||||
sido: "서울특별시",
|
||||
sigungu: "금천구",
|
||||
company: "서울워터솔루션(주)",
|
||||
address: "서울특별시 금천구 가산디지털2로 119, 24층(가산동)",
|
||||
phone: "010-0000-0000",
|
||||
date: "2025-01-14",
|
||||
status: "진행중",
|
||||
detail: {
|
||||
reqDate: "2025-02",
|
||||
reqQty: "1,200",
|
||||
usePurpose: "공업용수",
|
||||
price: "350",
|
||||
water: {
|
||||
toc: "4",
|
||||
bdo: "3",
|
||||
tn: "10",
|
||||
tp: "1.0",
|
||||
cl: "120",
|
||||
conductivity: "800",
|
||||
coliform: "0",
|
||||
turbidity: "2",
|
||||
odor: "무",
|
||||
color: "무",
|
||||
ph: "7.2",
|
||||
note: "-",
|
||||
},
|
||||
candidates: ["후보지1", "후보지2", "후보지3"],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
sido: "제주특별자치도",
|
||||
sigungu: "서귀포",
|
||||
company: "회사명이 길어도괜찮지",
|
||||
address: "제주특별자치도 서귀포시 천제연로 156, 3층 2호(색달동 1077호)",
|
||||
phone: "010-0000-0000",
|
||||
date: "2025-01-14",
|
||||
status: "진행완료",
|
||||
detail: {
|
||||
reqDate: "2025-03",
|
||||
reqQty: "800",
|
||||
usePurpose: "조경용수",
|
||||
price: "300",
|
||||
water: {
|
||||
toc: "5",
|
||||
bdo: "4",
|
||||
tn: "12",
|
||||
tp: "1.2",
|
||||
cl: "140",
|
||||
conductivity: "900",
|
||||
coliform: "0",
|
||||
turbidity: "3",
|
||||
odor: "무",
|
||||
color: "무",
|
||||
ph: "7.0",
|
||||
note: "현장 협의",
|
||||
},
|
||||
candidates: ["후보지1", "후보지2", "후보지3"],
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
function StatusBadge({ v }: { v: Row["status"] }) {
|
||||
const cls = v === "진행중" ? "text-red-600" : "text-lime-600";
|
||||
return <span className={["font-medium", cls].join(" ")}>{v}</span>;
|
||||
}
|
||||
import { useDmStore } from "@/app/store";
|
||||
import type { DemandCompBizType } from "@/app/store/sdmMng";
|
||||
|
||||
type TopField = { label: string; value: string; required?: boolean };
|
||||
type PairField = { label: string; value: string };
|
||||
type SessionUser = { dmdInfoId?: string };
|
||||
|
||||
const formatDate = (value: string | Date | "" | undefined) => {
|
||||
if (!value) return "-";
|
||||
const date = new Date(value);
|
||||
if (Number.isNaN(date.getTime())) return String(value);
|
||||
const yyyy = date.getFullYear();
|
||||
const mm = String(date.getMonth() + 1).padStart(2, "0");
|
||||
const dd = String(date.getDate()).padStart(2, "0");
|
||||
return `${yyyy}-${mm}-${dd}`;
|
||||
};
|
||||
|
||||
const formatValue = (value: string | number | null | undefined) => {
|
||||
if (value === null || value === undefined || value === "") return "-";
|
||||
return String(value);
|
||||
};
|
||||
|
||||
const formatBelow = (value: string | number | null | undefined) => {
|
||||
if (value === null || value === undefined || value === "") return "-";
|
||||
if (Number(value) === -1) return "불검출";
|
||||
return `${value} 이하`;
|
||||
};
|
||||
|
||||
function StatusBadge({ v }: { v: string }) {
|
||||
const cls = v === "신청" ? "text-red-600" : "text-lime-600";
|
||||
return <span className={["font-medium", cls].join(" ")}>{v || "-"}</span>;
|
||||
}
|
||||
|
||||
export default function DemandStatusPage() {
|
||||
const rows = useMemo(() => MOCK, []);
|
||||
const { getSdmInfoStatusList, Sdm, Common } = useDmStore((state) => state);
|
||||
const { successLogin, sdmInfoStatusList } = Sdm;
|
||||
const { selectSidoData, selectSigunData } = Common;
|
||||
|
||||
// ✅ rows가 빈 경우도 대비 (런타임 오류 방지)
|
||||
const [selectedId, setSelectedId] = useState<number | null>(rows[0]?.id ?? null);
|
||||
|
||||
// ✅ 상세영역 스크롤 이동용
|
||||
const detailRef = useRef<HTMLDivElement | null>(null);
|
||||
|
||||
// ✅ selected 계산 안정화
|
||||
const selected = useMemo(() => {
|
||||
if (!rows.length) return null;
|
||||
const found = rows.find((r) => r.id === selectedId);
|
||||
return found ?? rows[0];
|
||||
}, [rows, selectedId]);
|
||||
const [isLoginStorageInfo, setIsLoginStorageInfo] = useState(false);
|
||||
const [selectedDmdInfoSn, setSelectedDmdInfoSn] = useState<number | "" | null>(null);
|
||||
const [transformedSdmInfoStatusList, setTransformedSdmInfoStatusList] = useState<DemandCompBizType[]>([]);
|
||||
|
||||
// ✅ rows가 바뀌었는데 selectedId가 null이면 자동 첫번째 선택
|
||||
useEffect(() => {
|
||||
const first = rows[0];
|
||||
if (!first) return; // ✅ rows가 비어있으면 종료 (TS + 런타임 안전)
|
||||
const user = sessionStorage.getItem("user");
|
||||
if (user) {
|
||||
setIsLoginStorageInfo(true);
|
||||
}
|
||||
}, []);
|
||||
|
||||
if (selectedId == null) setSelectedId(first.id);
|
||||
}, [rows, selectedId]);
|
||||
useEffect(() => {
|
||||
if (!successLogin && !isLoginStorageInfo) return;
|
||||
|
||||
const user = sessionStorage.getItem("user");
|
||||
if (!user) return;
|
||||
|
||||
try {
|
||||
const userData = JSON.parse(user) as SessionUser;
|
||||
const dmdInfoId = userData.dmdInfoId?.trim();
|
||||
if (dmdInfoId) {
|
||||
getSdmInfoStatusList(dmdInfoId);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error parsing user data:", error);
|
||||
}
|
||||
}, [successLogin, isLoginStorageInfo, getSdmInfoStatusList]);
|
||||
|
||||
useEffect(() => {
|
||||
const mappedList = sdmInfoStatusList.map((item) => ({
|
||||
...item,
|
||||
ctpvCd: selectSidoData.find((sido) => sido.val === item.ctpvCd?.trim())?.text || item.ctpvCd,
|
||||
sggCd: selectSigunData.find((sigun) => sigun.val === item.sggCd?.trim())?.text || item.sggCd,
|
||||
}));
|
||||
|
||||
setTransformedSdmInfoStatusList(mappedList);
|
||||
}, [sdmInfoStatusList, selectSidoData, selectSigunData]);
|
||||
|
||||
useEffect(() => {
|
||||
const first = transformedSdmInfoStatusList[0];
|
||||
if (!first) {
|
||||
setSelectedDmdInfoSn(null);
|
||||
return;
|
||||
}
|
||||
|
||||
if (selectedDmdInfoSn == null) {
|
||||
setSelectedDmdInfoSn(first.dmdInfoSn);
|
||||
return;
|
||||
}
|
||||
|
||||
const exists = transformedSdmInfoStatusList.some(
|
||||
(item) => item.dmdInfoSn === selectedDmdInfoSn,
|
||||
);
|
||||
if (!exists) {
|
||||
setSelectedDmdInfoSn(first.dmdInfoSn);
|
||||
}
|
||||
}, [transformedSdmInfoStatusList, selectedDmdInfoSn]);
|
||||
|
||||
const selectedSdmInfoStatus = useMemo(() => {
|
||||
if (!transformedSdmInfoStatusList.length) return null;
|
||||
return (
|
||||
transformedSdmInfoStatusList.find((item) => item.dmdInfoSn === selectedDmdInfoSn) ??
|
||||
transformedSdmInfoStatusList[0]
|
||||
);
|
||||
}, [transformedSdmInfoStatusList, selectedDmdInfoSn]);
|
||||
|
||||
// ✅ 상단 2행(요구시기/요구수량/사용용도/희망단가) - TS 안전하게 object로 구성
|
||||
const topFields: TopField[] = useMemo(() => {
|
||||
if (!selected) return [];
|
||||
return [
|
||||
{ label: "요구시기", value: selected.detail.reqDate, required: true },
|
||||
{ label: "요구수량(㎡/d)", value: selected.detail.reqQty },
|
||||
{ label: "사용용도", value: selected.detail.usePurpose },
|
||||
{ label: "희망단가(원)", value: selected.detail.price },
|
||||
];
|
||||
}, [selected]);
|
||||
if (!selectedSdmInfoStatus) return [];
|
||||
|
||||
return [
|
||||
{ label: "요구시기", value: formatDate(selectedSdmInfoStatus.dmndTmng), required: true },
|
||||
{ label: "요구수량(㎥/d)", value: formatValue(selectedSdmInfoStatus.dmndQty) },
|
||||
{ label: "사용용도", value: formatValue(selectedSdmInfoStatus.useUsgCd) },
|
||||
{ label: "희망단가(원/㎥)", value: formatValue(selectedSdmInfoStatus.wntUntprc) },
|
||||
];
|
||||
}, [selectedSdmInfoStatus]);
|
||||
|
||||
// ✅ 수질 항목 - TS 안전
|
||||
const waterFields: PairField[] = useMemo(() => {
|
||||
if (!selected) return [];
|
||||
const w = selected.detail.water;
|
||||
if (!selectedSdmInfoStatus) return [];
|
||||
|
||||
return [
|
||||
{ label: "총대장균군수(개/100mℓ)", value: w.coliform },
|
||||
{ label: "결합잔류염소(mg/L)", value: "-" },
|
||||
{ label: "탁도(NTU)", value: w.turbidity },
|
||||
{ label: "총대장균군수(개/100mL)", value: formatBelow(selectedSdmInfoStatus.grssClfg) },
|
||||
{ label: "결합잔류염소(mg/L)", value: formatBelow(selectedSdmInfoStatus.combResdch) },
|
||||
{ label: "탁도(NTU)", value: formatBelow(selectedSdmInfoStatus.trbt) },
|
||||
|
||||
{ label: "생물화학적산소요구량(BOD)(mg/L)", value: w.bdo },
|
||||
{ label: "냄새", value: w.odor },
|
||||
{ label: "색도(도)", value: w.color },
|
||||
{ label: "생물학적산소요구량(BOD)(mg/L)", value: formatBelow(selectedSdmInfoStatus.blgcOxygDmndQnt) },
|
||||
{ label: "냄새", value: formatValue(selectedSdmInfoStatus.smll) },
|
||||
{ label: "색도(도)", value: formatBelow(selectedSdmInfoStatus.crmty) },
|
||||
|
||||
{ label: "총질소(T-N)(mg/L)", value: w.tn },
|
||||
{ label: "총인(T-P)(mg/L)", value: w.tp },
|
||||
{ label: "수소이온농도(pH)", value: w.ph },
|
||||
{ label: "총질소(T-N)(mg/L)", value: formatBelow(selectedSdmInfoStatus.tn) },
|
||||
{ label: "총인(T-P)(mg/L)", value: formatBelow(selectedSdmInfoStatus.tph) },
|
||||
{ label: "수소이온농도(pH)", value: formatValue(selectedSdmInfoStatus.ph) },
|
||||
|
||||
{ label: "염화물(mgCL/L)", value: w.cl },
|
||||
{ label: "전기전도도(µs/cm)", value: w.conductivity },
|
||||
{ label: "비고", value: w.note },
|
||||
{ label: "염화물(mgCL/L)", value: formatBelow(selectedSdmInfoStatus.clIonQnt) },
|
||||
{ label: "전기전도도(μS/cm)", value: formatBelow(selectedSdmInfoStatus.cdtnv) },
|
||||
{ label: "비고", value: formatValue(selectedSdmInfoStatus.rmrk) },
|
||||
];
|
||||
}, [selected]);
|
||||
}, [selectedSdmInfoStatus]);
|
||||
|
||||
const onSelectRow = (id: number) => {
|
||||
setSelectedId(id);
|
||||
const candidateNames = useMemo(() => {
|
||||
const list = selectedSdmInfoStatus?.splyCndtList ?? [];
|
||||
return [
|
||||
list[0]?.ruseUtztnFcltNm ?? "",
|
||||
list[1]?.ruseUtztnFcltNm ?? "",
|
||||
list[2]?.ruseUtztnFcltNm ?? "",
|
||||
];
|
||||
}, [selectedSdmInfoStatus]);
|
||||
|
||||
// ✅ “행 클릭 → 아래 상세로 보여짐” 체감 확실히: 상세영역으로 이동
|
||||
// (사용자가 이미 아래를 보고 있다면 거의 움직이지 않음)
|
||||
const onSelectSdmInfoStatus = (dmdInfoSn: number | "") => {
|
||||
setSelectedDmdInfoSn(dmdInfoSn);
|
||||
requestAnimationFrame(() => {
|
||||
detailRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
|
||||
});
|
||||
@@ -181,188 +159,182 @@ export default function DemandStatusPage() {
|
||||
|
||||
return (
|
||||
<main className="bg-white">
|
||||
{/* 서브 타이틀 + 브레드크럼 */}
|
||||
<SubPageHeader
|
||||
title="수요신청현황"
|
||||
crumbs={[
|
||||
{ label: "Home", href: "/reuse" },
|
||||
{ label: "수요신청", href: "/reuse/apply" },
|
||||
{ label: "수요신청현황" },
|
||||
]}
|
||||
hideFooterLine
|
||||
hideGuideText
|
||||
/>
|
||||
<SubPageHeader
|
||||
title="수요신청현황"
|
||||
crumbs={[
|
||||
{ label: "Home", href: "/main" },
|
||||
{ label: "수요신청", href: "/apply/status" },
|
||||
{ label: "수요신청현황" },
|
||||
]}
|
||||
hideFooterLine
|
||||
hideGuideText
|
||||
/>
|
||||
|
||||
{/* 컨텐츠 영역 */}
|
||||
<div>
|
||||
{/* 리스트 테이블 */}
|
||||
<section className="mt-6">
|
||||
<div className="text-2xl font-bold text-slate-700">수요정보 신청현황</div>
|
||||
<div>
|
||||
<section className="mt-6">
|
||||
<div className="text-2xl font-bold text-slate-700">수요정보 신청현황</div>
|
||||
|
||||
<div className="mt-3 border border-neutral-200">
|
||||
<table className="w-full table-fixed">
|
||||
<thead className="bg-[#E7F4E2]">
|
||||
<tr className="text-sm text-slate-700">
|
||||
<th className="w-[60px] px-3 py-3 text-center">NO.</th>
|
||||
<th className="w-[120px] px-3 py-3 text-center">시도</th>
|
||||
<th className="w-[120px] px-3 py-3 text-center">시군구</th>
|
||||
<th className="w-[180px] px-3 py-3 text-center">회사명</th>
|
||||
<th className="px-3 py-3 text-center">공장주소</th>
|
||||
<th className="w-[140px] px-3 py-3 text-center">전화번호</th>
|
||||
<th className="w-[120px] px-3 py-3 text-center">신청일자</th>
|
||||
<th className="w-[110px] px-3 py-3 text-center">진행상태</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<div className="mt-3 border border-neutral-200">
|
||||
<table className="w-full table-fixed">
|
||||
<thead className="bg-[#E7F4E2]">
|
||||
<tr className="text-sm text-slate-700">
|
||||
<th className="w-[60px] px-3 py-3 text-center">NO.</th>
|
||||
<th className="w-[120px] px-3 py-3 text-center">시도</th>
|
||||
<th className="w-[120px] px-3 py-3 text-center">시군구</th>
|
||||
<th className="w-[180px] px-3 py-3 text-center">회사명</th>
|
||||
<th className="px-3 py-3 text-center">공장주소</th>
|
||||
<th className="w-[140px] px-3 py-3 text-center">전화번호</th>
|
||||
<th className="w-[120px] px-3 py-3 text-center">신청일자</th>
|
||||
<th className="w-[110px] px-3 py-3 text-center">진행상태</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody className="bg-white text-base text-slate-700">
|
||||
{rows.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={8} className="px-3 py-10 text-center text-slate-400">
|
||||
조회된 신청내역이 없습니다.
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
rows.map((r) => {
|
||||
const active = r.id === selected?.id;
|
||||
return (
|
||||
<tr
|
||||
key={r.id}
|
||||
role="row"
|
||||
tabIndex={0}
|
||||
onClick={() => onSelectRow(r.id)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" || e.key === " ") onSelectRow(r.id);
|
||||
}}
|
||||
className={[
|
||||
"border-t border-neutral-200 outline-none",
|
||||
"cursor-pointer",
|
||||
active ? "bg-slate-50" : "hover:bg-slate-50",
|
||||
"focus-visible:ring-2 focus-visible:ring-slate-300",
|
||||
].join(" ")}
|
||||
aria-selected={active}
|
||||
>
|
||||
<td className="px-3 py-3 text-center">{r.id}</td>
|
||||
<td className="px-3 py-3 text-center">{r.sido}</td>
|
||||
<td className="px-3 py-3 text-center">{r.sigungu}</td>
|
||||
<td className="px-3 py-3 text-center">{r.company}</td>
|
||||
<td className="px-3 py-3 text-center">{r.address}</td>
|
||||
<td className="px-3 py-3 text-center">{r.phone}</td>
|
||||
<td className="px-3 py-3 text-center">{r.date}</td>
|
||||
<td className="px-3 py-3 text-center">
|
||||
<StatusBadge v={r.status} />
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
<tbody className="bg-white text-base text-slate-700">
|
||||
{transformedSdmInfoStatusList.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={8} className="px-3 py-10 text-center text-slate-400">
|
||||
조회된 신청내역이 없습니다.
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
transformedSdmInfoStatusList.map((sdmInfoStatus, index) => {
|
||||
const active = sdmInfoStatus.dmdInfoSn === selectedSdmInfoStatus?.dmdInfoSn;
|
||||
return (
|
||||
<tr
|
||||
key={`${sdmInfoStatus.dmdInfoSn}-${index}`}
|
||||
role="row"
|
||||
tabIndex={0}
|
||||
onClick={() => onSelectSdmInfoStatus(sdmInfoStatus.dmdInfoSn)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" || e.key === " ") {
|
||||
onSelectSdmInfoStatus(sdmInfoStatus.dmdInfoSn);
|
||||
}
|
||||
}}
|
||||
className={[
|
||||
"border-t border-neutral-200 outline-none",
|
||||
"cursor-pointer",
|
||||
active ? "bg-slate-50" : "hover:bg-slate-50",
|
||||
"focus-visible:ring-2 focus-visible:ring-slate-300",
|
||||
].join(" ")}
|
||||
aria-selected={active}
|
||||
>
|
||||
<td className="px-3 py-3 text-center">{sdmInfoStatus.index || index + 1}</td>
|
||||
<td className="px-3 py-3 text-center">{formatValue(sdmInfoStatus.ctpvCd)}</td>
|
||||
<td className="px-3 py-3 text-center">{formatValue(sdmInfoStatus.sggCd)}</td>
|
||||
<td className="px-3 py-3 text-center">{formatValue(sdmInfoStatus.dmdCoNm)}</td>
|
||||
<td className="px-3 py-3 text-center">{formatValue(sdmInfoStatus.daddr)}</td>
|
||||
<td className="px-3 py-3 text-center">{formatValue(sdmInfoStatus.telno)}</td>
|
||||
<td className="px-3 py-3 text-center">{formatDate(sdmInfoStatus.dmndTmng)}</td>
|
||||
<td className="px-3 py-3 text-center">
|
||||
<StatusBadge v={formatValue(sdmInfoStatus.status)} />
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 상세현황 */}
|
||||
<section className="mt-10 pb-16" ref={detailRef}>
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="text-2xl font-bold text-slate-700">수요신청 상세현황</div>
|
||||
<button
|
||||
type="button"
|
||||
className="h-8 rounded-md bg-[#888] px-4 text-base text-white hover:bg-neutral-700"
|
||||
>
|
||||
수정
|
||||
</button>
|
||||
<section className="mt-10 pb-16" ref={detailRef}>
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="text-2xl font-bold text-slate-700">수요신청 상세현황</div>
|
||||
<button
|
||||
type="button"
|
||||
className="h-8 rounded-md bg-[#888] px-4 text-base text-white hover:bg-neutral-700"
|
||||
>
|
||||
수정
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{!selectedSdmInfoStatus ? (
|
||||
<div className="mt-3 border border-neutral-200 px-6 py-10 text-center text-sm text-slate-400">
|
||||
상세 정보를 표시할 신청건이 없습니다.
|
||||
</div>
|
||||
) : (
|
||||
<div className="mt-3 border border-neutral-200">
|
||||
<div className="bg-sky-50 px-4 py-3 text-sm font-semibold text-slate-700 border-b border-neutral-200">
|
||||
요구수량
|
||||
</div>
|
||||
|
||||
{!selected ? (
|
||||
<div className="mt-3 border border-neutral-200 px-6 py-10 text-center text-sm text-slate-400">
|
||||
상세 정보를 표시할 신청건이 없습니다.
|
||||
</div>
|
||||
) : (
|
||||
<div className="mt-3 border border-neutral-200">
|
||||
<div className="bg-sky-50 px-4 py-3 text-sm font-semibold text-slate-700 border-b border-neutral-200">
|
||||
요구수량
|
||||
<div className="grid grid-cols-12 text-sm">
|
||||
{topFields.map((field) => (
|
||||
<div
|
||||
key={field.label}
|
||||
className="col-span-12 md:col-span-6 grid grid-cols-12 border-b border-neutral-200"
|
||||
>
|
||||
<div className="col-span-4 bg-sky-50 px-4 py-4 flex items-center justify-center text-center font-semibold text-slate-700">
|
||||
{field.label}
|
||||
{field.required ? <span className="ml-1 text-red-500">*</span> : null}
|
||||
</div>
|
||||
<div className="col-span-8 px-4 py-4 flex items-center justify-center text-center">
|
||||
{field.value}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
<div className="col-span-12 bg-sky-50 px-4 py-3 text-sm font-semibold text-slate-700 border-b border-neutral-200">
|
||||
요구수질
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-12 text-sm">
|
||||
{/* 상단 2행 */}
|
||||
{topFields.map((f) => (
|
||||
<div
|
||||
key={f.label}
|
||||
className="col-span-12 md:col-span-6 grid grid-cols-12 border-b border-neutral-200"
|
||||
>
|
||||
<div className="col-span-4 bg-sky-50 px-4 py-4 flex items-center justify-center text-center font-semibold text-slate-700">
|
||||
{f.label}
|
||||
{f.required ? <span className="ml-1 text-red-500">*</span> : null}
|
||||
</div>
|
||||
<div className="col-span-8 px-4 py-4 flex items-center justify-center text-center">
|
||||
{f.value}
|
||||
</div>
|
||||
{waterFields.map((field) => (
|
||||
<div
|
||||
key={field.label}
|
||||
className="col-span-12 md:col-span-4 grid grid-cols-12 border-b border-neutral-200"
|
||||
>
|
||||
<div className="col-span-5 bg-sky-50 px-3 py-4 flex items-center justify-center text-center font-semibold text-slate-700">
|
||||
{field.label}
|
||||
</div>
|
||||
))}
|
||||
<div className="col-span-7 px-3 py-4 flex items-center justify-center text-center">
|
||||
{field.value}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* 수질 */}
|
||||
<div className="col-span-12 bg-sky-50 px-4 py-3 text-sm font-semibold text-slate-700 border-b border-neutral-200">
|
||||
요구수질
|
||||
</div>
|
||||
<div className="col-span-12 bg-sky-50 px-4 py-3 text-sm font-semibold text-slate-700 border-b border-neutral-200">
|
||||
공급처 후보지
|
||||
</div>
|
||||
|
||||
{waterFields.map((f) => (
|
||||
<div
|
||||
key={f.label}
|
||||
className="col-span-12 md:col-span-4 grid grid-cols-12 border-b border-neutral-200"
|
||||
>
|
||||
<div className="col-span-5 bg-sky-50 px-3 py-4 flex items-center justify-center text-center font-semibold text-slate-700">
|
||||
{f.label}
|
||||
</div>
|
||||
<div className="col-span-7 px-3 py-4 flex items-center justify-center text-center">
|
||||
{f.value}
|
||||
</div>
|
||||
{candidateNames.map((candidateName, index) => (
|
||||
<div
|
||||
key={`candidate-${index}`}
|
||||
className="col-span-12 md:col-span-4 grid grid-cols-12 border-b md:border-b-0 border-neutral-200"
|
||||
>
|
||||
<div className="col-span-5 bg-sky-50 px-3 py-4 flex items-center justify-center text-center font-semibold text-slate-700">
|
||||
후보지{index + 1}
|
||||
</div>
|
||||
))}
|
||||
<div className="col-span-7 px-3 py-4 flex items-center justify-center text-center">
|
||||
{candidateName}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* 공급처 후보지 */}
|
||||
<div className="col-span-12 bg-sky-50 px-4 py-3 text-sm font-semibold text-slate-700 border-b border-neutral-200">
|
||||
공급처 후보지
|
||||
</div>
|
||||
<div className="col-span-12 bg-sky-50 px-4 py-3 text-sm font-semibold text-slate-700 border-t border-b border-neutral-200">
|
||||
수요신청 진행상태
|
||||
</div>
|
||||
|
||||
{selected.detail.candidates.map((v, i) => (
|
||||
<div
|
||||
key={`candidate-${i}`}
|
||||
className="col-span-12 md:col-span-4 grid grid-cols-12 border-b md:border-b-0 border-neutral-200"
|
||||
>
|
||||
<div className="col-span-5 bg-sky-50 px-3 py-4 flex items-center justify-center text-center font-semibold text-slate-700">
|
||||
후보지{i + 1}
|
||||
</div>
|
||||
<div className="col-span-7 px-3 py-4 flex items-center justify-center text-center">
|
||||
{v}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* 수요신청 진행상태 */}
|
||||
<div className="col-span-12 bg-sky-50 px-4 py-3 text-sm font-semibold text-slate-700 border-t border-b border-neutral-200">
|
||||
수요신청 진행상태
|
||||
</div>
|
||||
|
||||
<div className="col-span-12 md:col-span-4 grid grid-cols-12 border-b md:border-b-0 border-neutral-200">
|
||||
<div className="col-span-5 bg-sky-50 px-3 py-4 flex items-center justify-center text-center font-semibold text-slate-700">
|
||||
진행상태
|
||||
</div>
|
||||
<div className="col-span-7 px-3 py-4 flex items-center justify-center text-center">
|
||||
{selected.status}
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-span-12 md:col-span-4 grid grid-cols-12 border-b md:border-b-0 border-neutral-200">
|
||||
<div className="col-span-5 bg-sky-50 px-3 py-4 flex items-center justify-center text-center font-semibold text-slate-700">
|
||||
공급처매칭결과
|
||||
</div>
|
||||
<div className="col-span-7 px-3 py-4 flex items-center justify-center text-center">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-span-12 md:col-span-4 grid grid-cols-12 border-b md:border-b-0 border-neutral-200">
|
||||
<div className="col-span-5 bg-sky-50 px-3 py-4 flex items-center justify-center text-center font-semibold text-slate-700">
|
||||
진행상태
|
||||
</div>
|
||||
<div className="col-span-7 px-3 py-4 flex items-center justify-center text-center">
|
||||
{formatValue(selectedSdmInfoStatus.status)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-span-12 md:col-span-4 grid grid-cols-12 border-b md:border-b-0 border-neutral-200">
|
||||
<div className="col-span-5 bg-sky-50 px-3 py-4 flex items-center justify-center text-center font-semibold text-slate-700">
|
||||
공급처매칭결과
|
||||
</div>
|
||||
<div className="col-span-7 px-3 py-4 flex items-center justify-center text-center">
|
||||
{formatValue(selectedSdmInfoStatus.ruseUtztnFcltNm)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,327 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
|
||||
export type CandidateSite = {
|
||||
id: string;
|
||||
name: string;
|
||||
sewageM3d: number; // 하수처리량
|
||||
reuseM3d: number; // 재이용량
|
||||
// 지도 연동 시 사용(현재는 UI/구조용)
|
||||
lat?: number;
|
||||
lng?: number;
|
||||
};
|
||||
|
||||
type Props = {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
onApply: (selected: CandidateSite[]) => void;
|
||||
initialSelected?: CandidateSite[];
|
||||
maxSelect?: number; // 기본 3개
|
||||
};
|
||||
|
||||
const MOCK_SITES: CandidateSite[] = [
|
||||
{ id: "1", name: "서호생태 수자원 재이용1", sewageM3d: 1300, reuseM3d: 1300, lat: 35.0, lng: 128.0 },
|
||||
{ id: "2", name: "서호생태 수자원 재이용2", sewageM3d: 1300, reuseM3d: 1300, lat: 35.01, lng: 128.01 },
|
||||
{ id: "3", name: "서호생태 수자원 재이용3", sewageM3d: 1300, reuseM3d: 1300, lat: 35.02, lng: 128.02 },
|
||||
];
|
||||
|
||||
export default function CandidateSiteModal({
|
||||
open,
|
||||
onClose,
|
||||
onApply,
|
||||
initialSelected = [],
|
||||
maxSelect = 3,
|
||||
}: Props) {
|
||||
const [q, setQ] = useState("");
|
||||
const [selected, setSelected] = useState<CandidateSite[]>(initialSelected);
|
||||
|
||||
// 지도 마커 컴포넌트
|
||||
function MapMarker({ label }: { label?: string }) {
|
||||
return (
|
||||
<div className="relative -translate-x-1/2 -translate-y-full">
|
||||
<svg width="72" height="66" viewBox="0 0 72 92">
|
||||
<defs>
|
||||
<linearGradient id="pinGrad" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stopColor="#2EDAA0" />
|
||||
<stop offset="100%" stopColor="#02A7D8" />
|
||||
</linearGradient>
|
||||
|
||||
<filter id="pinShadow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feDropShadow dx="0" dy="2" stdDeviation="2" floodColor="#000" floodOpacity="0.18" />
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
{/* pin body */}
|
||||
<path
|
||||
filter="url(#pinShadow)"
|
||||
d="M36 2C21 2 9 14 9 29c0 22 24 50 26.4 52.7a2 2 0 0 0 3.2 0C40.9 79 63 51 63 29 63 14 51 2 36 2z"
|
||||
fill="url(#pinGrad)"
|
||||
/>
|
||||
|
||||
{/* 내부 흰 원 */}
|
||||
<circle cx="36" cy="29" r="20" fill="#FFFFFF" />
|
||||
|
||||
{label && (
|
||||
<text
|
||||
x="36"
|
||||
y="36"
|
||||
textAnchor="middle"
|
||||
fontSize="18"
|
||||
fontWeight="700"
|
||||
fill="#1F2937"
|
||||
>
|
||||
{label}
|
||||
</text>
|
||||
)}
|
||||
</svg>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// 모달 열릴 때마다 초기 선택값 동기화
|
||||
useEffect(() => {
|
||||
if (open) setSelected(initialSelected);
|
||||
if (open) setQ("");
|
||||
}, [open, initialSelected]);
|
||||
|
||||
// ESC 닫기
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
const onKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.key === "Escape") onClose();
|
||||
};
|
||||
window.addEventListener("keydown", onKeyDown);
|
||||
return () => window.removeEventListener("keydown", onKeyDown);
|
||||
}, [open, onClose]);
|
||||
|
||||
const filtered = useMemo(() => {
|
||||
const keyword = q.trim();
|
||||
if (!keyword) return MOCK_SITES;
|
||||
return MOCK_SITES.filter((s) => s.name.includes(keyword));
|
||||
}, [q]);
|
||||
|
||||
const isSelected = (id: string) => selected.some((s) => s.id === id);
|
||||
|
||||
const toggleSelect = (item: CandidateSite) => {
|
||||
setSelected((prev) => {
|
||||
const exists = prev.some((p) => p.id === item.id);
|
||||
if (exists) return prev.filter((p) => p.id !== item.id);
|
||||
|
||||
if (prev.length >= maxSelect) return prev; // 최대 개수 초과 방지
|
||||
return [...prev, item];
|
||||
});
|
||||
};
|
||||
|
||||
const removeChip = (id: string) => setSelected((prev) => prev.filter((p) => p.id !== id));
|
||||
|
||||
if (!open) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
className="fixed inset-0 z-[1000] flex items-center justify-center"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label="후보지 조회"
|
||||
>
|
||||
{/* overlay */}
|
||||
<button
|
||||
type="button"
|
||||
className="absolute inset-0 bg-black/30"
|
||||
aria-label="모달 닫기"
|
||||
onClick={onClose}
|
||||
/>
|
||||
|
||||
{/* panel */}
|
||||
<div className="relative w-[94vw] max-w-[1400px] rounded-xl bg-white shadow-xl">
|
||||
{/* header */}
|
||||
<div className="flex items-center justify-between px-8 py-6">
|
||||
<h2 className="text-2xl font-extrabold text-neutral-900">후보지 조회</h2>
|
||||
<button
|
||||
type="button"
|
||||
aria-label="닫기"
|
||||
onClick={onClose}
|
||||
className="grid h-10 w-10 place-items-center rounded-sm hover:bg-neutral-100"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
<div className="h-px w-full bg-neutral-200" />
|
||||
|
||||
{/* body */}
|
||||
<div className="px-8 py-6">
|
||||
<div className="grid grid-cols-12 gap-6">
|
||||
{/* left: search + table */}
|
||||
<div className="col-span-12 lg:col-span-5">
|
||||
<div className="mb-3 text-lg font-semibold text-neutral-900">후보지 검색</div>
|
||||
|
||||
<div className="relative">
|
||||
<input
|
||||
value={q}
|
||||
onChange={(e) => setQ(e.target.value)}
|
||||
placeholder="주소검색"
|
||||
className="h-12 w-full rounded-sm border border-neutral-300 bg-white px-4 pr-12 text-sm outline-none focus:border-sky-500"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
aria-label="검색"
|
||||
onClick={() => setQ((v) => v.trim())}
|
||||
className="absolute right-2 top-1/2 -translate-y-1/2 grid h-9 w-9 place-items-center rounded-full text-[#01ACE5] hover:bg-slate-100"
|
||||
>
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none">
|
||||
<path
|
||||
d="M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Z"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
/>
|
||||
<path
|
||||
d="M21 21l-4.3-4.3"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* table header */}
|
||||
<div className="mt-4 overflow-hidden rounded-sm border border-neutral-200">
|
||||
<div className="grid grid-cols-12 bg-emerald-50/70 px-4 py-3 text-sm font-semibold text-neutral-800">
|
||||
<div className="col-span-6 flex items-center justify-center">시설명</div>
|
||||
<div className="col-span-2 text-center">
|
||||
하수처리량<br />(m³/일)
|
||||
</div>
|
||||
<div className="col-span-2 text-center">
|
||||
재이용량<br />(m³/일)
|
||||
</div>
|
||||
<div className="col-span-2 text-center">선택</div>
|
||||
</div>
|
||||
|
||||
{/* rows */}
|
||||
<div className="max-h-[420px] overflow-auto">
|
||||
{filtered.length === 0 ? (
|
||||
<div className="px-4 py-10 text-center text-sm text-neutral-500">
|
||||
검색 결과가 없습니다.
|
||||
</div>
|
||||
) : (
|
||||
filtered.map((s, idx) => {
|
||||
const picked = isSelected(s.id);
|
||||
const disabled = !picked && selected.length >= maxSelect;
|
||||
return (
|
||||
<div
|
||||
key={s.id}
|
||||
className="grid grid-cols-12 items-center gap-2 border-t border-neutral-200 px-4 py-3 text-sm"
|
||||
>
|
||||
<div className="col-span-6 truncate">
|
||||
<span className="mr-2 text-neutral-500">{idx + 1}</span>
|
||||
{s.name}
|
||||
</div>
|
||||
<div className="col-span-2 text-center">{s.sewageM3d.toLocaleString()}</div>
|
||||
<div className="col-span-2 text-center">{s.reuseM3d.toLocaleString()}</div>
|
||||
<div className="col-span-2 flex justify-center">
|
||||
<button
|
||||
type="button"
|
||||
disabled={disabled}
|
||||
onClick={() => toggleSelect(s)}
|
||||
className={[
|
||||
"h-8 rounded-sm px-3 text-xs",
|
||||
picked ? "bg-gray-600 text-white" : "bg-sky-500 text-white hover:bg-sky-600",
|
||||
disabled ? "cursor-not-allowed opacity-40" : "",
|
||||
].join(" ")}
|
||||
>
|
||||
{picked ? "해제" : "선택"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* <div className="mt-2 text-xs text-neutral-500">
|
||||
최대 {maxSelect}개까지 선택 가능합니다.
|
||||
</div> */}
|
||||
</div>
|
||||
|
||||
{/* right: map */}
|
||||
<div className="col-span-12 lg:col-span-7">
|
||||
<div className="h-[520px] w-full overflow-hidden rounded-sm border border-neutral-200 bg-neutral-50 relative">
|
||||
{/* TODO: 실제 지도 SDK 연동 시 이 영역 교체 */}
|
||||
<div className="absolute inset-0 grid place-items-center text-sm text-neutral-500">
|
||||
지도 영역(추후 지도 SDK 연동)
|
||||
</div>
|
||||
|
||||
{/* 선택된 항목의 "가짜 마커" */}
|
||||
{selected.map((s, i) => {
|
||||
const POS = [
|
||||
{ top: "40%", left: "45%" },
|
||||
{ top: "25%", left: "75%" },
|
||||
{ top: "70%", left: "80%" },
|
||||
] as const;
|
||||
|
||||
const pos = POS[i % POS.length] ?? POS[0];
|
||||
|
||||
return (
|
||||
<div
|
||||
key={s.id}
|
||||
className="absolute"
|
||||
style={{ top: pos.top, left: pos.left }}
|
||||
>
|
||||
<MapMarker label={String(i + 1)} />
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* selected chips */}
|
||||
<div className="mt-6">
|
||||
<div className="mb-2 text-lg font-semibold text-neutral-900">
|
||||
선택된 시설 <span className="text-sm font-normal text-neutral-500">(시설명/하수처리량(m³/일)/재이용량(m³/일))</span>
|
||||
</div>
|
||||
|
||||
<div className="min-h-[52px] rounded-sm border border-neutral-200 bg-white px-4 py-3">
|
||||
{selected.length === 0 ? (
|
||||
<div className="text-sm text-neutral-500">선택된 시설이 없습니다.</div>
|
||||
) : (
|
||||
<div className="flex flex-wrap gap-3">
|
||||
{selected.map((s) => (
|
||||
<div
|
||||
key={s.id}
|
||||
className="inline-flex items-center gap-3 rounded-sm bg-[#EAF5F5] px-4 py-3 text-sm text-[#01ACE5]"
|
||||
>
|
||||
<span className="font-medium">
|
||||
{s.name} / {s.sewageM3d.toLocaleString()}(m³/일) / {s.reuseM3d.toLocaleString()}(m³/일)
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
aria-label="삭제"
|
||||
onClick={() => removeChip(s.id)}
|
||||
className="grid h-7 w-7 place-items-center rounded-sm hover:bg-sky-100 text-neutral-700 font-semibold"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* footer button */}
|
||||
<div className="mt-6 flex justify-center pb-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onApply(selected)}
|
||||
className="h-11 rounded-sm bg-[#0B4EA2] px-10 text-base text-white hover:opacity-90"
|
||||
>
|
||||
후보지 확인 및 적용
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user