diff --git a/apps/dm_new/app/(with-layout)/apply/register/page.tsx b/apps/dm_new/app/(with-layout)/apply/register/page.tsx
index c37912b97..3c084bf73 100644
--- a/apps/dm_new/app/(with-layout)/apply/register/page.tsx
+++ b/apps/dm_new/app/(with-layout)/apply/register/page.tsx
@@ -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() {
diff --git a/apps/dm_new/app/(with-layout)/apply/status/page.tsx b/apps/dm_new/app/(with-layout)/apply/status/page.tsx
index ec3329c92..fc9e61134 100644
--- a/apps/dm_new/app/(with-layout)/apply/status/page.tsx
+++ b/apps/dm_new/app/(with-layout)/apply/status/page.tsx
@@ -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>
   );
 }
diff --git a/apps/dm_new/components/CandidateSiteModal.tsx b/apps/dm_new/components/CandidateSiteModal.tsx
new file mode 100644
index 000000000..aa5a9c0ee
--- /dev/null
+++ b/apps/dm_new/components/CandidateSiteModal.tsx
@@ -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>
+  );
+}
\ No newline at end of file