Merge branch 'main' of https://www.onasys.co.kr:3000/ONAANDALL/frontend

2026-02-26 13:05:10 +09:00
parent d3bd1b5721 cf825ef3ad
commit f0dcccaee9
71 changed files with 3283 additions and 1549 deletions
@@ -26,3 +26,5 @@ pnpm-lock.yaml
 settings.json
 .npmrc
 .cursor
+
+apps/**/tsconfig.tsbuildinfo
@@ -0,0 +1,298 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+
+export type AddrItem = {
+  zipNo: string;       // 우편번호
+  roadAddr: string;    // 도로명주소(전체 문장)
+  jibunAddr: string;   // 지번주소
+};
+
+type Props = {
+  open: boolean;
+  onClose: () => void;
+  onSelect: (item: AddrItem) => void;
+};
+
+type PostcodeApiResponse = {
+  totalCount?: number;
+  items?: AddrItem[];
+};
+
+function useDebouncedValue<T>(value: T, delay = 250) {
+  const [v, setV] = useState(value);
+  useEffect(() => {
+    const t = setTimeout(() => setV(value), delay);
+    return () => clearTimeout(t);
+  }, [value, delay]);
+  return v;
+}
+
+// A: 추천은 roadAddr 전체 문장
+const normalize = (s: string) => s.replace(/\s+/g, " ").trim();
+
+const makeSuggestionsA = (list: AddrItem[], keyword: string, limit = 7) => {
+  const key = normalize(keyword);
+
+  const roadAddrs = list
+    .map((x) => x.roadAddr)
+    .filter((v): v is string => typeof v === "string" && v.trim().length > 0)
+    .map(normalize);
+
+  const uniq = Array.from(new Set(roadAddrs));
+
+  // 입력어 포함 우선 + 짧은 주소 우선
+  uniq.sort((a, b) => {
+    const ai = a.includes(key) ? 0 : 1;
+    const bi = b.includes(key) ? 0 : 1;
+    if (ai !== bi) return ai - bi;
+    return a.length - b.length;
+  });
+
+  return uniq.slice(0, limit);
+};
+
+export default function PostcodeModal({ open, onClose, onSelect }: Props) {
+  const [mounted, setMounted] = useState(false);
+
+  const [q, setQ] = useState("");
+  const dq = useDebouncedValue(q, 250);
+
+  const [suggestions, setSuggestions] = useState<string[]>([]);
+  const [items, setItems] = useState<AddrItem[]>([]);
+  const [total, setTotal] = useState(0);
+  const [loading, setLoading] = useState(false);
+
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  useEffect(() => setMounted(true), []);
+
+  // open 시: body scroll lock + focus + ESC
+  useEffect(() => {
+    if (!open) return;
+
+    const prevOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+
+    setTimeout(() => inputRef.current?.focus(), 50);
+
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", onKeyDown);
+
+    return () => {
+      document.body.style.overflow = prevOverflow;
+      window.removeEventListener("keydown", onKeyDown);
+    };
+  }, [open, onClose]);
+
+  // 검색/추천/리스트 갱신
+  useEffect(() => {
+    if (!open) return;
+
+    const keyword = dq.trim();
+
+    if (!keyword) {
+      setSuggestions([]);
+      setItems([]);
+      setTotal(0);
+      setLoading(false);
+      return;
+    }
+
+    let alive = true;
+
+    (async () => {
+      setLoading(true);
+      try {
+        const res = await fetch(`/api/postcode?query=${encodeURIComponent(keyword)}&page=1`, {
+          cache: "no-store",
+        });
+
+        const data = (await res.json()) as PostcodeApiResponse;
+
+        if (!alive) return;
+
+        const list: AddrItem[] = data.items ?? [];
+        const totalCount: number = data.totalCount ?? 0;
+
+        setItems(list);
+        setTotal(totalCount);
+
+        // ✅ A: roadAddr 전체 문장 추천
+        const sug = makeSuggestionsA(list, keyword, 7);
+        setSuggestions(sug);
+      } catch {
+        if (!alive) return;
+        setItems([]);
+        setTotal(0);
+        setSuggestions([]);
+      } finally {
+        if (alive) setLoading(false);
+      }
+    })();
+
+    return () => {
+      alive = false;
+    };
+  }, [dq, open]);
+
+  const showSuggest = open && q.trim().length > 0 && suggestions.length > 0;
+
+  if (!mounted || !open) return null;
+
+  return createPortal(
+    <div className="fixed inset-0 z-[9999]">
+      {/* overlay */}
+      <button
+        type="button"
+        className="absolute inset-0 bg-black/40"
+        aria-label="닫기"
+        onClick={onClose}
+      />
+
+      {/* panel wrapper */}
+      <div className="absolute inset-0 flex items-center justify-center p-6">
+        <div
+          className="relative w-full max-w-[520px] rounded-2xl bg-white shadow-[0_20px_60px_rgba(0,0,0,0.18)]"
+          role="dialog"
+          aria-modal="true"
+          aria-label="우편번호 검색"
+        >
+          {/* header */}
+          <div className="flex items-center justify-between px-7 pt-6 pb-4">
+            <h2 className="text-[22px] font-extrabold tracking-tight text-slate-900">
+              우편번호 검색
+            </h2>
+
+            <button
+              type="button"
+              onClick={onClose}
+              className="grid h-9 w-9 place-items-center rounded-full hover:bg-slate-100"
+              aria-label="닫기"
+            >
+              <span className="text-[18px] leading-none">✕</span>
+            </button>
+          </div>
+
+          {/* search input */}
+          <div className="px-7 pb-4">
+            <div className="relative">
+              <input
+                ref={inputRef}
+                value={q}
+                onChange={(e) => setQ(e.target.value)}
+                placeholder="주소검색"
+                className={[
+                  "w-full rounded-md border px-4 py-3 pr-12 text-[14px] outline-none",
+                  "border-slate-300 focus:border-sky-500 focus:ring-2 focus:ring-sky-200",
+                ].join(" ")}
+              />
+
+              <button
+                type="button"
+                className="absolute right-3 top-1/2 -translate-y-1/2 grid h-9 w-9 place-items-center rounded-full hover:bg-slate-100 text-[#01ACE5]"
+                aria-label="검색"
+                onClick={() => setQ((v) => v.trim())}
+                >
+                <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>
+
+              {/* suggestions dropdown */}
+              {showSuggest && (
+                <div className="absolute left-0 right-0 top-[calc(100%+6px)] z-10 overflow-hidden rounded-md border border-slate-200 bg-white shadow-lg">
+                  {suggestions.map((s) => (
+                    <button
+                      key={s}
+                      type="button"
+                      className="flex w-full items-center justify-between px-4 py-3 text-left text-[14px] hover:bg-slate-50"
+                      onClick={() => {
+                        // ✅ 추천 클릭 → 입력값 채우고 드롭다운 닫기 + 포커스 유지
+                        setQ(s);
+                        setSuggestions([]);
+                        requestAnimationFrame(() => inputRef.current?.focus());
+                      }}
+                    >
+                      <span className="truncate text-slate-800">{s}</span>
+                      <span className="ml-4 text-slate-400">↵</span>
+                    </button>
+                  ))}
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* results */}
+          <div className="px-7 pb-7">
+            <div className="mb-3 text-[13px] text-slate-500">
+              {q.trim()
+                ? loading
+                  ? "검색 중…"
+                  : `총 ${total.toLocaleString()}개의 검색결과`
+                : "주소를 입력하면 검색결과가 표시됩니다."}
+            </div>
+
+            <div className="max-h-[420px] overflow-y-auto pr-1">
+              {!loading && q.trim() && items.length === 0 && (
+                <div className="rounded-lg border border-slate-200 p-4 text-[14px] text-slate-600">
+                  검색 결과가 없습니다.
+                </div>
+              )}
+
+              <div className="space-y-3">
+                {items.map((it) => (
+                  <button
+                    key={`${it.zipNo}-${it.roadAddr}`}
+                    type="button"
+                    onClick={() => onSelect(it)}
+                    className={[
+                      "w-full rounded-lg border p-4 text-left transition",
+                      "border-slate-200 hover:border-sky-300 hover:bg-sky-50/30",
+                    ].join(" ")}
+                  >
+                    <div className="text-[20px] font-extrabold tracking-tight text-slate-900">
+                      {it.zipNo}
+                    </div>
+
+                    <div className="mt-2 flex items-start gap-2">
+                      <span className="w-[52px] shrink-0 mt-[2px] inline-flex items-center justify-center rounded-full border border-sky-400 px-2 py-[2px] text-[12px] font-semibold text-sky-600">
+                        도로명
+                      </span>
+                      <p className="text-[14px] leading-6 text-slate-700">
+                        {it.roadAddr}
+                      </p>
+                    </div>
+
+                    <div className="mt-1 flex items-start gap-2">
+                      <span className="w-[52px] shrink-0 mt-[2px] inline-flex items-center justify-center rounded-full border border-[#6DBB4F] px-2 py-[2px] text-[12px] font-semibold text-[#6DBB4F]">
+                        지번
+                      </span>
+                      <p className="text-[14px] leading-6 text-slate-700">
+                        {it.jibunAddr}
+                      </p>
+                    </div>
+                  </button>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>,
+    document.body
+  );
+}
@@ -19,10 +19,10 @@ export default function SubPageHeader({
  title,
  crumbs,
  note = "* 는 필수 값입니다.",
-  underlineWidthClass = "w-40",
+  // underlineWidthClass = "w-40",
  className = "",
  wrapClassName = "",
-  hideFooterLine = false,
+  // hideFooterLine = false,
  hideGuideText = false,
 }: Props) {
  return (
@@ -80,7 +80,8 @@ function DemandLoginModal({ open, onClose, onSuccess }: LoginModalProps) {
    if (noWorker) {
      setWorkerNo("");
      setErrors((p) => {
-        const { workerNo: _w, ...rest } = p;
+        const { ...rest } = p;
+        delete rest.workerNo;
        return rest;
      });
    }
@@ -2,7 +2,7 @@
 import type { LnbItem } from "../_components/Lnb";

 export const LNB_DEMAND: LnbItem[] = [
-  { href: "/reuse/apply/place", label: "수요처등록" },
+  { href: "/reuse/apply/place", label: "수요처" },
  { href: "/reuse/apply/register", label: "수요정보등록" },
  { href: "/reuse/apply/status", label: "수요신청현황" },
 ];
@@ -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>
+  );
+}
@@ -1,8 +1,11 @@
 // apps/dm/app/(landing)/reuse/apply/place/page.tsx
 "use client";

+import React from "react";
 import { useMemo, useState } from "react";
 import SubPageHeader from "../../_components/SubPageHeader";
+import PostcodeModal from "../../_components/PostcodeModal";
+import type { AddrItem } from "../../_components/PostcodeModal";

 type Option = { value: string; label: string };
 type SidoValue = "" | "seoul" | "busan" | "daegu" | "incheon" | "gyeonggi";
@@ -75,9 +78,7 @@ function FormRow({
      </div>

      {/* 입력(우측) */}
-      <div className="col-span-12 lg:col-span-10 px-6 py-6">
-        {children}
-      </div>
+      <div className="col-span-12 lg:col-span-10 px-6 py-6">{children}</div>
    </div>
  );
 }
@@ -145,6 +146,25 @@ function SelectBox<T extends string>({
 }

 export default function DemandPlaceRegisterPage() {
+  /** ✅ 모달 + 주소 상태 (반드시 컴포넌트 내부!) */
+  const [open, setOpen] = useState(false);
+
+  // 모달에서 선택한 값은 이 3개에 반영 (기존 UI zip/addr1/addr2와 맞춤)
+  const [zip, setZip] = useState("");
+  const [addr1, setAddr1] = useState(""); // 도로명 주소 넣을 곳
+  const [addr2, setAddr2] = useState(""); // 상세주소(사용자 입력)
+
+  // (필요하면 유지) 지번도 따로 보관하고 싶을 때
+  // const [jibun, setJibun] = useState("");
+
+  const handleSelect = (it: AddrItem) => {
+    setZip(it.zipNo);
+    setAddr1(it.roadAddr);   // ✅ 주소칸에 도로명 자동 입력
+    // setJibun(it.jibunAddr);  // ✅ 지번도 상태로 보관(원하면 UI에 표시)
+    setOpen(false);
+  };
+
+  /** 기존 폼 상태들 */
  const [sido, setSido] = useState<SidoValue>("");
  const [sigungu, setSigungu] = useState<string>("");

@@ -153,10 +173,6 @@ export default function DemandPlaceRegisterPage() {
  const [workerNo, setWorkerNo] = useState("");
  const [noWorkerNo, setNoWorkerNo] = useState(false);

-  const [zip, setZip] = useState("");
-  const [addr1, setAddr1] = useState("");
-  const [addr2, setAddr2] = useState("");
-
  const [tel, setTel] = useState("");
  const [pw, setPw] = useState("");
  const [pw2, setPw2] = useState("");
@@ -222,11 +238,7 @@ export default function DemandPlaceRegisterPage() {

        <FormRow label="회사명" required>
          <div className="max-w-[420px]">
-            <TextInput
-              value={company}
-              onChange={setCompany}
-              placeholder="회사명을 입력해주세요."
-            />
+            <TextInput value={company} onChange={setCompany} placeholder="회사명을 입력해주세요." />
          </div>
        </FormRow>

@@ -234,11 +246,7 @@ export default function DemandPlaceRegisterPage() {

        <FormRow label="사업자등록번호" required>
          <div className="max-w-[420px]">
-            <TextInput
-              value={bizNo}
-              onChange={setBizNo}
-              placeholder="사업자 등록번호를 입력해주세요."
-            />
+            <TextInput value={bizNo} onChange={setBizNo} placeholder="사업자 등록번호를 입력해주세요." />
          </div>
        </FormRow>

@@ -278,21 +286,24 @@ export default function DemandPlaceRegisterPage() {
              <div className="w-[180px]">
                <TextInput value={zip} onChange={setZip} placeholder="우편번호" />
              </div>
+
              <button
                type="button"
-                onClick={() => alert("우편번호 검색(샘플)")}
-                className="h-11 rounded bg-[#888] px-4 text-base text-white hover:bg-neutral-700"
+                onClick={() => setOpen(true)}
+                className="h-11 rounded-md bg-[#888] px-4 text-sm text-white hover:brightness-95"
              >
                우편번호 검색
              </button>
            </div>

+            {/* ✅ 선택된 도로명주소가 자동으로 들어감 */}
            <TextInput value={addr1} onChange={setAddr1} placeholder="주소" />
-            <TextInput
-              value={addr2}
-              onChange={setAddr2}
-              placeholder="상세 주소를 입력하세요."
-            />
+
+            {/* ✅ 상세주소는 사용자 입력 */}
+            <TextInput value={addr2} onChange={setAddr2} placeholder="상세 주소를 입력하세요." />
+
+            {/* (선택) 지번주소도 보여주고 싶으면 */}
+            {/* {jibun ? <p className="text-xs text-neutral-500">지번: {jibun}</p> : null} */}
          </div>
        </FormRow>

@@ -300,11 +311,7 @@ export default function DemandPlaceRegisterPage() {

        <FormRow label="전화번호" required>
          <div className="max-w-[420px]">
-            <TextInput
-              value={tel}
-              onChange={setTel}
-              placeholder="전화번호를 입력하세요."
-            />
+            <TextInput value={tel} onChange={setTel} placeholder="전화번호를 입력하세요." />
          </div>
        </FormRow>

@@ -312,12 +319,7 @@ export default function DemandPlaceRegisterPage() {

        <FormRow label="비밀번호" required>
          <div className="max-w-[420px]">
-            <TextInput
-              value={pw}
-              onChange={setPw}
-              placeholder="비밀번호를 입력하세요."
-              type="password"
-            />
+            <TextInput value={pw} onChange={setPw} placeholder="비밀번호를 입력하세요." type="password" />
          </div>
        </FormRow>

@@ -345,6 +347,9 @@ export default function DemandPlaceRegisterPage() {
          수요처 등록
        </button>
      </div>
+
+      {/* ✅ 모달 */}
+      <PostcodeModal open={open} onClose={() => setOpen(false)} onSelect={handleSelect} />
    </main>
  );
-}
+}
@@ -4,6 +4,7 @@
 import { useMemo, useState, useRef } from "react";
 import SubPageHeader from "../../_components/SubPageHeader";
 import WaterQualityRefModal from "../modal/WaterQualityRefModal";
+import CandidateSiteModal, { type CandidateSite } from "../modal/CandidateSiteModal";

 type PHRange = { min: string; max: string };

@@ -18,6 +19,9 @@ export default function DemandRegisterPage() {

  const [openRef, setOpenRef] = useState(false);

+  const [openCand, setOpenCand] = useState(false);
+  const [selectedCands, setSelectedCands] = useState<CandidateSite[]>([]);
+
  // 기본정보
  const [reqDate, setReqDate] = useState<string>(today);
  const [reqQty, setReqQty] = useState<string>("");
@@ -251,10 +255,7 @@ export default function DemandRegisterPage() {
                                <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 });
-                                    }}
+                                    onClick={() => setOpenCand(true)}
                                >
                                    후보지 조회
                                </button>
@@ -290,6 +291,22 @@ export default function DemandRegisterPage() {

            </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);
+            }}
+        />
    </>
  );
 }
@@ -262,7 +262,16 @@ export default function DemandStatusPage() {

            {/* 상세현황 */}
            <section className="mt-10 pb-16" ref={detailRef}>
-            <div className="text-2xl font-bold text-slate-700">수요신청 상세현황</div>
+
+                <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>

            {!selected ? (
                <div className="mt-3 border border-neutral-200 px-6 py-10 text-center text-sm text-slate-400">
@@ -21,22 +21,22 @@ function Hr({ className = "" }: HrProps) {
  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
 }

-type ImgCardProps = {
-  src: string;
-  alt: string;
-};
+// type ImgCardProps = {
+//   src: string;
+//   alt: string;
+// };

-function ImgCard({ src, alt }: ImgCardProps) {
-  return (
-    <div className="w-full overflow-x-auto">
-      <img
-        src={src}
-        alt={alt}
-        className="block mx-auto max-w-none"
-      />
-    </div>
-  );
-}
+// function ImgCard({ src, alt }: ImgCardProps) {
+//   return (
+//     <div className="w-full overflow-x-auto">
+//       <img
+//         src={src}
+//         alt={alt}
+//         className="block mx-auto max-w-none"
+//       />
+//     </div>
+//   );
+// }

 export default function GreywaterPage() {
  return (
@@ -21,22 +21,22 @@ function Hr({ className = "" }: HrProps) {
  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
 }

-type ImgCardProps = {
-  src: string;
-  alt: string;
-};
+// type ImgCardProps = {
+//   src: string;
+//   alt: string;
+// };

-function ImgCard({ src, alt }: ImgCardProps) {
-  return (
-    <div className="w-full overflow-x-auto">
-      <img
-        src={src}
-        alt={alt}
-        className="block mx-auto max-w-none"
-      />
-    </div>
-  );
-}
+// function ImgCard({ src, alt }: ImgCardProps) {
+//   return (
+//     <div className="w-full overflow-x-auto">
+//       <img
+//         src={src}
+//         alt={alt}
+//         className="block mx-auto max-w-none"
+//       />
+//     </div>
+//   );
+// }

 export default function GreywaterPage() {
  return (
@@ -21,22 +21,22 @@ function Hr({ className = "" }: HrProps) {
  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
 }

-type ImgCardProps = {
-  src: string;
-  alt: string;
-};
+// type ImgCardProps = {
+//   src: string;
+//   alt: string;
+// };

-function ImgCard({ src, alt }: ImgCardProps) {
-  return (
-    <div className="w-full overflow-x-auto">
-      <img
-        src={src}
-        alt={alt}
-        className="block mx-auto max-w-none"
-      />
-    </div>
-  );
-}
+// function ImgCard({ src, alt }: ImgCardProps) {
+//   return (
+//     <div className="w-full overflow-x-auto">
+//       <img
+//         src={src}
+//         alt={alt}
+//         className="block mx-auto max-w-none"
+//       />
+//     </div>
+//   );
+// }

 export default function GreywaterPage() {
  return (
@@ -21,22 +21,22 @@ function Hr({ className = "" }: HrProps) {
  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
 }

-type ImgCardProps = {
-  src: string;
-  alt: string;
-};
+// type ImgCardProps = {
+//   src: string;
+//   alt: string;
+// };

-function ImgCard({ src, alt }: ImgCardProps) {
-  return (
-    <div className="w-full overflow-x-auto">
-      <img
-        src={src}
-        alt={alt}
-        className="block mx-auto max-w-none"
-      />
-    </div>
-  );
-}
+// function ImgCard({ src, alt }: ImgCardProps) {
+//   return (
+//     <div className="w-full overflow-x-auto">
+//       <img
+//         src={src}
+//         alt={alt}
+//         className="block mx-auto max-w-none"
+//       />
+//     </div>
+//   );
+// }

 export default function GreywaterPage() {
  return (
@@ -21,22 +21,22 @@ function Hr({ className = "" }: HrProps) {
  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
 }

-type ImgCardProps = {
-  src: string;
-  alt: string;
-};
+// type ImgCardProps = {
+//   src: string;
+//   alt: string;
+// };

-function ImgCard({ src, alt }: ImgCardProps) {
-  return (
-    <div className="w-full overflow-x-auto">
-      <img
-        src={src}
-        alt={alt}
-        className="block mx-auto max-w-none"
-      />
-    </div>
-  );
-}
+// function ImgCard({ src, alt }: ImgCardProps) {
+//   return (
+//     <div className="w-full overflow-x-auto">
+//       <img
+//         src={src}
+//         alt={alt}
+//         className="block mx-auto max-w-none"
+//       />
+//     </div>
+//   );
+// }

 export default function GreywaterPage() {
  return (
@@ -21,22 +21,22 @@ function Hr({ className = "" }: HrProps) {
  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
 }

-type ImgCardProps = {
-  src: string;
-  alt: string;
-};
+// type ImgCardProps = {
+//   src: string;
+//   alt: string;
+// };

-function ImgCard({ src, alt }: ImgCardProps) {
-  return (
-    <div className="w-full overflow-x-auto">
-      <img
-        src={src}
-        alt={alt}
-        className="block mx-auto max-w-none"
-      />
-    </div>
-  );
-}
+// function ImgCard({ src, alt }: ImgCardProps) {
+//   return (
+//     <div className="w-full overflow-x-auto">
+//       <img
+//         src={src}
+//         alt={alt}
+//         className="block mx-auto max-w-none"
+//       />
+//     </div>
+//   );
+// }

 export default function GreywaterPage() {
  return (
@@ -21,22 +21,22 @@ function Hr({ className = "" }: HrProps) {
  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
 }

-type ImgCardProps = {
-  src: string;
-  alt: string;
-};
+// type ImgCardProps = {
+//   src: string;
+//   alt: string;
+// };

-function ImgCard({ src, alt }: ImgCardProps) {
-  return (
-    <div className="w-full overflow-x-auto">
-      <img
-        src={src}
-        alt={alt}
-        className="block mx-auto max-w-none"
-      />
-    </div>
-  );
-}
+// function ImgCard({ src, alt }: ImgCardProps) {
+//   return (
+//     <div className="w-full overflow-x-auto">
+//       <img
+//         src={src}
+//         alt={alt}
+//         className="block mx-auto max-w-none"
+//       />
+//     </div>
+//   );
+// }

 export default function GreywaterPage() {
  return (
@@ -21,22 +21,22 @@ function Hr({ className = "" }: HrProps) {
  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
 }

-type ImgCardProps = {
-  src: string;
-  alt: string;
-};
+// type ImgCardProps = {
+//   src: string;
+//   alt: string;
+// };

-function ImgCard({ src, alt }: ImgCardProps) {
-  return (
-    <div className="w-full overflow-x-auto">
-      <img
-        src={src}
-        alt={alt}
-        className="block mx-auto max-w-none"
-      />
-    </div>
-  );
-}
+// function ImgCard({ src, alt }: ImgCardProps) {
+//   return (
+//     <div className="w-full overflow-x-auto">
+//       <img
+//         src={src}
+//         alt={alt}
+//         className="block mx-auto max-w-none"
+//       />
+//     </div>
+//   );
+// }

 export default function GreywaterPage() {
  return (
@@ -21,22 +21,22 @@ function Hr({ className = "" }: HrProps) {
  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
 }

-type ImgCardProps = {
-  src: string;
-  alt: string;
-};
+// type ImgCardProps = {
+//   src: string;
+//   alt: string;
+// };

-function ImgCard({ src, alt }: ImgCardProps) {
-  return (
-    <div className="w-full overflow-x-auto">
-      <img
-        src={src}
-        alt={alt}
-        className="block mx-auto max-w-none"
-      />
-    </div>
-  );
-}
+// function ImgCard({ src, alt }: ImgCardProps) {
+//   return (
+//     <div className="w-full overflow-x-auto">
+//       <img
+//         src={src}
+//         alt={alt}
+//         className="block mx-auto max-w-none"
+//       />
+//     </div>
+//   );
+// }

 export default function GreywaterPage() {
  return (
@@ -21,22 +21,22 @@ function Hr({ className = "" }: HrProps) {
  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
 }

-type ImgCardProps = {
-  src: string;
-  alt: string;
-};
+// type ImgCardProps = {
+//   src: string;
+//   alt: string;
+// };

-function ImgCard({ src, alt }: ImgCardProps) {
-  return (
-    <div className="w-full overflow-x-auto">
-      <img
-        src={src}
-        alt={alt}
-        className="block mx-auto max-w-none"
-      />
-    </div>
-  );
-}
+// function ImgCard({ src, alt }: ImgCardProps) {
+//   return (
+//     <div className="w-full overflow-x-auto">
+//       <img
+//         src={src}
+//         alt={alt}
+//         className="block mx-auto max-w-none"
+//       />
+//     </div>
+//   );
+// }

 export default function GreywaterPage() {
  return (
@@ -21,22 +21,22 @@ function Hr({ className = "" }: HrProps) {
  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
 }

-type ImgCardProps = {
-  src: string;
-  alt: string;
-};
+// type ImgCardProps = {
+//   src: string;
+//   alt: string;
+// };

-function ImgCard({ src, alt }: ImgCardProps) {
-  return (
-    <div className="w-full overflow-x-auto">
-      <img
-        src={src}
-        alt={alt}
-        className="block mx-auto max-w-none"
-      />
-    </div>
-  );
-}
+// function ImgCard({ src, alt }: ImgCardProps) {
+//   return (
+//     <div className="w-full overflow-x-auto">
+//       <img
+//         src={src}
+//         alt={alt}
+//         className="block mx-auto max-w-none"
+//       />
+//     </div>
+//   );
+// }

 export default function GreywaterPage() {
  return (
@@ -21,22 +21,22 @@ function Hr({ className = "" }: HrProps) {
  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
 }

-type ImgCardProps = {
-  src: string;
-  alt: string;
-};
+// type ImgCardProps = {
+//   src: string;
+//   alt: string;
+// };

-function ImgCard({ src, alt }: ImgCardProps) {
-  return (
-    <div className="w-full overflow-x-auto">
-      <img
-        src={src}
-        alt={alt}
-        className="block mx-auto max-w-none"
-      />
-    </div>
-  );
-}
+// function ImgCard({ src, alt }: ImgCardProps) {
+//   return (
+//     <div className="w-full overflow-x-auto">
+//       <img
+//         src={src}
+//         alt={alt}
+//         className="block mx-auto max-w-none"
+//       />
+//     </div>
+//   );
+// }

 export default function GreywaterPage() {
  return (
@@ -65,12 +65,33 @@ export default function RainwaterReusePage() {
      <Hr className="my-11" />

      {/* 2) 빗물이용시설 설치 관리 법적 의무 대상 */}
-      <section className="pb-[200px]">
+      <section className="mt-6">
        <SectionTitle>빗물이용시설 설치 관리 법적 의무 대상</SectionTitle>
        <div className="mt-8">
          <ImgCard src="/images/landing/intro/rainreuse_mandatory.png" alt="법적 의무 대상 설명" />
        </div>
      </section>
+
+      <Hr className="my-11" />
+
+      {/* 3) 빗물이용시설 설계 방안 */}
+      <section className="mt-6">
+        <SectionTitle>빗물이용시설 설계 방안</SectionTitle>
+        <div className="mt-8">
+          <ImgCard src="/images/landing/intro/rainwater_design.png" alt="빗물이용시설 설계 방안 설명" />
+        </div>
+      </section>
+
+      <Hr className="my-11" />
+
+      {/* 4) 빗물이용시설 시설기준 및 관리기준 */}
+      <section className="pb-[200px]">
+        <SectionTitle>빗물이용시설 시설기준 및 관리기준</SectionTitle>
+        <div className="mt-8">
+          <ImgCard src="/images/landing/intro/rainwater_standards.png" alt="빗물이용시설 시설기준 및 관리기준 설명" />
+        </div>
+      </section>
+
    </div>
  );
 }
@@ -1,6 +1,6 @@
 // apps/dm/app/(landing)/reuse/layout.tsx
 import "./reuse.module.css";
-import type { ReactNode } from "react";
+// import type { ReactNode } from "react";
 import TopNav from "./_components/TopNav";

 export default function ReuseLandingLayout({ children }: { children: React.ReactNode }) {
@@ -1,7 +1,9 @@
 "use client";

-import { useEffect, useMemo, useState, type ReactNode } from "react";
+import { useEffect, useMemo, useRef, useState, type ReactNode, type RefObject } from "react";
 import SubPageHeader from "@/components/SubPageHeader";
+import PostcodeModal from "@/components/PostcodeModal";
+import type { AddrItem } from "@/app/store/sdmMng/postcode-service";
 import { useDmStore } from "@/app/store";
 import { fetchType, getFetch, postFetch, putFetch } from "@/components/ui/api";
 import { getCookie } from "@common/components/lib";
@@ -11,6 +13,7 @@ type Option = { value: string; label: string };
 type SessionUser = {
  dmdInfoId?: string;
  dmdCoNm?: string;
+  zip?: string;
  daddr?: string;
  telno?: string;
  ctpvCd?: string;
@@ -21,6 +24,42 @@ type SessionUser = {

 const TOKEN_ID_COOKIE = "token-id";
 const FALLBACK_UUID = "c475824c-0e82-4a06-a282-2b55a20df265";
+const normalizeRegionName = (value: string) => value.replace(/\s+/g, "").trim();
+const isSameRegionName = (left: string, right: string) => {
+  const a = normalizeRegionName(left);
+  const b = normalizeRegionName(right);
+  return Boolean(a && b && (a === b || a.includes(b) || b.includes(a)));
+};
+const formatKoreanPhoneNumber = (value: string) => {
+  const digits = value.replace(/\D/g, "").slice(0, 11); // 숫자만 추출하고 최대 11자리까지만 사용
+  if (!digits) return ""; // 입력이 비어 있으면 빈 문자열 반환
+
+  if (/^1\d{0,7}$/.test(digits)) { // 15xx/16xx/18xx 같은 대표번호 패턴
+    if (digits.length <= 4) return digits; // 아직 뒷자리가 부족하면 원문 유지
+    return `${digits.slice(0, 4)}-${digits.slice(4, 8)}`; // xxxx-xxxx
+  }
+
+  if (digits.startsWith("02")) { // 서울 지역번호(02)
+    const rest = digits.slice(2); // 국번/가입자번호 구간
+    if (!rest) return "02"; // 02만 입력된 상태
+    if (rest.length <= 3) return `02-${rest}`; // 02-xxx
+    if (rest.length <= 7) return `02-${rest.slice(0, 3)}-${rest.slice(3)}`; // 02-xxx-xxxx
+    return `02-${rest.slice(0, 4)}-${rest.slice(4, 8)}`; // 02-xxxx-xxxx
+  }
+
+  if (digits.startsWith("0")) { // 02 제외 일반 지역번호/휴대폰(010 포함)
+    const area = digits.slice(0, 3); // 앞 3자리 식별자
+    const rest = digits.slice(3); // 나머지 번호
+    if (!rest) return area; // 식별자만 입력된 상태
+    if (rest.length <= 3) return `${area}-${rest}`; // 0xx-xxx
+    if (rest.length <= 7) return `${area}-${rest.slice(0, 3)}-${rest.slice(3)}`; // 0xx-xxx-xxxx
+    return `${area}-${rest.slice(0, 4)}-${rest.slice(4, 8)}`; // 0xx-xxxx-xxxx
+  }
+
+  if (digits.length <= 4) return digits; // 예외 입력: 앞 4자리까지
+  if (digits.length <= 8) return `${digits.slice(0, 4)}-${digits.slice(4)}`; // xxxx-xxxx
+  return `${digits.slice(0, 4)}-${digits.slice(4, 8)}-${digits.slice(8, 11)}`; // xxxx-xxxx-xxx
+};

 function Divider() {
  return <div className="h-px w-full bg-neutral-200" />;
@@ -55,6 +94,7 @@ function TextInput({
  placeholder,
  type = "text",
  disabled,
+  inputRef,
  className = "",
 }: {
  value: string;
@@ -62,10 +102,12 @@ function TextInput({
  placeholder?: string;
  type?: string;
  disabled?: boolean;
+  inputRef?: RefObject<HTMLInputElement | null>;
  className?: string;
 }) {
  return (
    <input
+      ref={inputRef}
      type={type}
      value={value}
      disabled={disabled}
@@ -129,6 +171,9 @@ export default function DemandPlaceRegisterPage() {
  const [zip, setZip] = useState("");
  const [addr1, setAddr1] = useState("");
  const [addr2, setAddr2] = useState("");
+  const [isPostcodeModalOpen, setIsPostcodeModalOpen] = useState(false);
+  const [focusDetailAddrOnClose, setFocusDetailAddrOnClose] = useState(false);
+  const detailAddrRef = useRef<HTMLInputElement | null>(null);

  const [tel, setTel] = useState("");
  const [pw, setPw] = useState("");
@@ -167,9 +212,10 @@ export default function DemandPlaceRegisterPage() {
      }

      setCompany(String(user.dmdCoNm ?? ""));
+      setZip(String(user.zip ?? ""));
      setAddr1(String(user.daddr ?? ""));
      setAddr2("");
-      setTel(String(user.telno ?? "").replace(/\D/g, ""));
+      setTel(formatKoreanPhoneNumber(String(user.telno ?? "")));
      setSido(String(user.ctpvCd ?? ""));
      setSigungu(String(user.sggCd ?? ""));
    } catch {
@@ -178,6 +224,22 @@ export default function DemandPlaceRegisterPage() {
    }
  }, []);

+  useEffect(() => {
+    if (!focusDetailAddrOnClose || isPostcodeModalOpen) return;
+
+    if (!addr1.trim()) {
+      setFocusDetailAddrOnClose(false);
+      return;
+    }
+
+    const timer = setTimeout(() => {
+      detailAddrRef.current?.focus();
+      setFocusDetailAddrOnClose(false);
+    }, 0);
+
+    return () => clearTimeout(timer);
+  }, [addr1, focusDetailAddrOnClose, isPostcodeModalOpen]);
+
  const sidoOptions = useMemo<Option[]>(() => {
    const mapped = selectSidoData
      .filter((item) => item.val !== "0")
@@ -274,6 +336,7 @@ export default function DemandPlaceRegisterPage() {
      dmdCoNm: company.trim(),
      dmdInfoId: fullDmdInfoId,
      bzmnNo: bizDigits,
+      zip: zip.trim(),
      daddr: mergedAddress,
      telno: telDigits,
      rgtr: (sessionUser?.rgtr as string) || myUUID,
@@ -311,6 +374,30 @@ export default function DemandPlaceRegisterPage() {
    }
  };

+  const handleSelectAddress = (item: AddrItem) => {
+    setZip(item.zipNo);
+    setAddr1(item.roadAddr);
+    setFocusDetailAddrOnClose(true);
+    const matchedSido = selectSidoData.find(
+      (region) =>
+        region.val !== "0" &&
+        isSameRegionName(region.text ?? "", item.ctpvNm ?? ""),
+    );
+
+    if (matchedSido) {
+      setSido(matchedSido.val);
+      const matchedSigungu = selectSigunData.find(
+        (region) =>
+          region.val !== "0" &&
+          region.val.startsWith(matchedSido.val) &&
+          isSameRegionName(region.text ?? "", item.sggNm ?? ""),
+      );
+      setSigungu(matchedSigungu?.val ?? "");
+    }
+
+    setIsPostcodeModalOpen(false);
+  };
+
  const pageTitle = editMode ? "수요처수정" : "수요처등록";

  return (
@@ -414,7 +501,7 @@ export default function DemandPlaceRegisterPage() {
              </div>
              <button
                type="button"
-                onClick={() => alert("우편번호 검색(샘플)")}
+                onClick={() => setIsPostcodeModalOpen(true)}
                className="h-11 rounded bg-[#888] px-4 text-base text-white hover:bg-neutral-700"
              >
                우편번호 검색
@@ -426,6 +513,7 @@ export default function DemandPlaceRegisterPage() {
              value={addr2}
              onChange={setAddr2}
              placeholder="상세 주소를 입력하세요."
+              inputRef={detailAddrRef}
            />
          </div>
        </FormRow>
@@ -436,7 +524,7 @@ export default function DemandPlaceRegisterPage() {
          <div className="max-w-[420px]">
            <TextInput
              value={tel}
-              onChange={(v) => setTel(v.replace(/\D/g, "").slice(0, 11))}
+              onChange={(v) => setTel(formatKoreanPhoneNumber(v))}
              placeholder="전화번호를 입력하세요."
            />
          </div>
@@ -478,6 +566,12 @@ export default function DemandPlaceRegisterPage() {
          {editMode ? "수요처 수정" : "수요처 등록"}
        </button>
      </div>
+
+      <PostcodeModal
+        open={isPostcodeModalOpen}
+        onClose={() => setIsPostcodeModalOpen(false)}
+        onSelect={handleSelectAddress}
+      />
    </main>
  );
 }
@@ -1,13 +1,82 @@
-// apps/dm/app/(landing)/reuse/apply/register/page.tsx
+// app/(with-layout)/apply/register/page.tsx
+/**
+ *  수요정보등록(수정) 화면
+ *
+ * 🔗 사용 API
+ * - 수요정보등록: POST /reuseFc/request/demandInfo
+ * - 수요정보조회: GET  /reuseFc/request/' + dmdInfoId - getSdmInfoStatusList
+ */
 "use client";

-import { useMemo, useState, useRef } from "react";
+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 SubPageHeader from "@/components/SubPageHeader";
 import WaterQualityRefModal from "../modal/WaterQualityRefModal";

 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();
@@ -17,283 +86,486 @@ export default function DemandRegisterPage() {
  }, []);

  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 [reqDate, setReqDate] = useState<string>(today);
-  const [reqQty, setReqQty] = useState<string>("");
-  const [usePurpose, setUsePurpose] = useState<string>("");
-  const [hopePrice, setHopePrice] = useState<string>("");
+  const [reqDate, setReqDate] = useState<string>(today);    // 요구시기
+  const [reqQty, setReqQty] = useState<string>("");         // 요구수량(m²/d)
+  const [usePurpose, setUsePurpose] = useState<string>(""); // 사용용도
+  const [hopePrice, setHopePrice] = useState<string>("");   // 희망단가
+

  // 요구수질
-  const [coliform, setColiform] = useState<string>("");
-  const [noDetect, setNoDetect] = useState<boolean>(false);
+  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 [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: "/reuse" },
-                { label: "수요신청", href: "/reuse/apply" },
-                { label: "수요정보등록" },
-                ]}
-            />
+        {/* 서브 타이틀 + 브레드크럼 */}
+        <SubPageHeader
+            title="수요정보등록"
+            crumbs={[
+            { label: "Home", href: "/main" },
+            { label: "수요신청", href: "/apply/status" },
+            { 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>
+                <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"
+                    />
                </div>
+            </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"
+            {/* 요구수질 테이블 */}
+            <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>
-                </div>
+                    }
+                />
+                <Divider />

-                {/* 요구수질 테이블 */}
-                <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>
-                        공급처 후보지 선택
+                {/* 4행 */}
+                <QualityRow
+                    leftLabel={
+                    <>
+                        생물화학적산소요구량
                        <br />
-                        (필수아님)
-                        </LabelCell>
+                        (BOD)(mg/L)
+                    </>
+                    }
+                    leftRequired
+                    leftControl={<InlineSuffixInput value={bod} onChange={setBod} suffix="이하" />}
+                    rightLabel="염화물(mgCL/L)"
+                    rightControl={<InlineSuffixInput value={chloride} onChange={setChloride} suffix="이하" />}
+                />
+                <Divider />

-                        <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]" />
+                {/* 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 />

-                                <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>
-                                </div>
+                {/* 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={() => {
+                                // 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>
                            </div>
                        </div>
                    </div>
                </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 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>
+      </main>
    </>
  );
 }

+export default function DemandRegisterPage() {
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <DemandRegisterPageContent />
+    </Suspense>
+  );
+}
+
 /* ----------------------------- UI helpers ----------------------------- */

 function Divider() {
@@ -21,22 +21,22 @@ function Hr({ className = "" }: HrProps) {
  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
 }

-type ImgCardProps = {
-  src: string;
-  alt: string;
-};
+// type ImgCardProps = {
+//   src: string;
+//   alt: string;
+// };

-function ImgCard({ src, alt }: ImgCardProps) {
-  return (
-    <div className="w-full overflow-x-auto">
-      <img
-        src={src}
-        alt={alt}
-        className="block mx-auto max-w-none"
-      />
-    </div>
-  );
-}
+// function ImgCard({ src, alt }: ImgCardProps) {
+//   return (
+//     <div className="w-full overflow-x-auto">
+//       <img
+//         src={src}
+//         alt={alt}
+//         className="block mx-auto max-w-none"
+//       />
+//     </div>
+//   );
+// }

 export default function GreywaterPage() {
  return (
@@ -21,22 +21,22 @@ function Hr({ className = "" }: HrProps) {
  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
 }

-type ImgCardProps = {
-  src: string;
-  alt: string;
-};
+// type ImgCardProps = {
+//   src: string;
+//   alt: string;
+// };

-function ImgCard({ src, alt }: ImgCardProps) {
-  return (
-    <div className="w-full overflow-x-auto">
-      <img
-        src={src}
-        alt={alt}
-        className="block mx-auto max-w-none"
-      />
-    </div>
-  );
-}
+// function ImgCard({ src, alt }: ImgCardProps) {
+//   return (
+//     <div className="w-full overflow-x-auto">
+//       <img
+//         src={src}
+//         alt={alt}
+//         className="block mx-auto max-w-none"
+//       />
+//     </div>
+//   );
+// }

 export default function GreywaterPage() {
  return (
@@ -21,22 +21,22 @@ function Hr({ className = "" }: HrProps) {
  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
 }

-type ImgCardProps = {
-  src: string;
-  alt: string;
-};
+// type ImgCardProps = {
+//   src: string;
+//   alt: string;
+// };

-function ImgCard({ src, alt }: ImgCardProps) {
-  return (
-    <div className="w-full overflow-x-auto">
-      <img
-        src={src}
-        alt={alt}
-        className="block mx-auto max-w-none"
-      />
-    </div>
-  );
-}
+// function ImgCard({ src, alt }: ImgCardProps) {
+//   return (
+//     <div className="w-full overflow-x-auto">
+//       <img
+//         src={src}
+//         alt={alt}
+//         className="block mx-auto max-w-none"
+//       />
+//     </div>
+//   );
+// }

 export default function GreywaterPage() {
  return (
@@ -21,22 +21,22 @@ function Hr({ className = "" }: HrProps) {
  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
 }

-type ImgCardProps = {
-  src: string;
-  alt: string;
-};
+// type ImgCardProps = {
+//   src: string;
+//   alt: string;
+// };

-function ImgCard({ src, alt }: ImgCardProps) {
-  return (
-    <div className="w-full overflow-x-auto">
-      <img
-        src={src}
-        alt={alt}
-        className="block mx-auto max-w-none"
-      />
-    </div>
-  );
-}
+// function ImgCard({ src, alt }: ImgCardProps) {
+//   return (
+//     <div className="w-full overflow-x-auto">
+//       <img
+//         src={src}
+//         alt={alt}
+//         className="block mx-auto max-w-none"
+//       />
+//     </div>
+//   );
+// }

 export default function GreywaterPage() {
  return (
@@ -21,22 +21,22 @@ function Hr({ className = "" }: HrProps) {
  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
 }

-type ImgCardProps = {
-  src: string;
-  alt: string;
-};
+// type ImgCardProps = {
+//   src: string;
+//   alt: string;
+// };

-function ImgCard({ src, alt }: ImgCardProps) {
-  return (
-    <div className="w-full overflow-x-auto">
-      <img
-        src={src}
-        alt={alt}
-        className="block mx-auto max-w-none"
-      />
-    </div>
-  );
-}
+// function ImgCard({ src, alt }: ImgCardProps) {
+//   return (
+//     <div className="w-full overflow-x-auto">
+//       <img
+//         src={src}
+//         alt={alt}
+//         className="block mx-auto max-w-none"
+//       />
+//     </div>
+//   );
+// }

 export default function GreywaterPage() {
  return (
@@ -21,22 +21,22 @@ function Hr({ className = "" }: HrProps) {
  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
 }

-type ImgCardProps = {
-  src: string;
-  alt: string;
-};
+// type ImgCardProps = {
+//   src: string;
+//   alt: string;
+// };

-function ImgCard({ src, alt }: ImgCardProps) {
-  return (
-    <div className="w-full overflow-x-auto">
-      <img
-        src={src}
-        alt={alt}
-        className="block mx-auto max-w-none"
-      />
-    </div>
-  );
-}
+// function ImgCard({ src, alt }: ImgCardProps) {
+//   return (
+//     <div className="w-full overflow-x-auto">
+//       <img
+//         src={src}
+//         alt={alt}
+//         className="block mx-auto max-w-none"
+//       />
+//     </div>
+//   );
+// }

 export default function GreywaterPage() {
  return (
@@ -21,22 +21,22 @@ function Hr({ className = "" }: HrProps) {
  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
 }

-type ImgCardProps = {
-  src: string;
-  alt: string;
-};
+// type ImgCardProps = {
+//   src: string;
+//   alt: string;
+// };

-function ImgCard({ src, alt }: ImgCardProps) {
-  return (
-    <div className="w-full overflow-x-auto">
-      <img
-        src={src}
-        alt={alt}
-        className="block mx-auto max-w-none"
-      />
-    </div>
-  );
-}
+// function ImgCard({ src, alt }: ImgCardProps) {
+//   return (
+//     <div className="w-full overflow-x-auto">
+//       <img
+//         src={src}
+//         alt={alt}
+//         className="block mx-auto max-w-none"
+//       />
+//     </div>
+//   );
+// }

 export default function GreywaterPage() {
  return (
@@ -21,22 +21,22 @@ function Hr({ className = "" }: HrProps) {
  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
 }

-type ImgCardProps = {
-  src: string;
-  alt: string;
-};
+// type ImgCardProps = {
+//   src: string;
+//   alt: string;
+// };

-function ImgCard({ src, alt }: ImgCardProps) {
-  return (
-    <div className="w-full overflow-x-auto">
-      <img
-        src={src}
-        alt={alt}
-        className="block mx-auto max-w-none"
-      />
-    </div>
-  );
-}
+// function ImgCard({ src, alt }: ImgCardProps) {
+//   return (
+//     <div className="w-full overflow-x-auto">
+//       <img
+//         src={src}
+//         alt={alt}
+//         className="block mx-auto max-w-none"
+//       />
+//     </div>
+//   );
+// }

 export default function GreywaterPage() {
  return (
@@ -21,22 +21,22 @@ function Hr({ className = "" }: HrProps) {
  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
 }

-type ImgCardProps = {
-  src: string;
-  alt: string;
-};
+// type ImgCardProps = {
+//   src: string;
+//   alt: string;
+// };

-function ImgCard({ src, alt }: ImgCardProps) {
-  return (
-    <div className="w-full overflow-x-auto">
-      <img
-        src={src}
-        alt={alt}
-        className="block mx-auto max-w-none"
-      />
-    </div>
-  );
-}
+// function ImgCard({ src, alt }: ImgCardProps) {
+//   return (
+//     <div className="w-full overflow-x-auto">
+//       <img
+//         src={src}
+//         alt={alt}
+//         className="block mx-auto max-w-none"
+//       />
+//     </div>
+//   );
+// }

 export default function GreywaterPage() {
  return (
@@ -65,12 +65,32 @@ export default function RainwaterReusePage() {
      <Hr className="my-11" />

      {/* 2) 빗물이용시설 설치 관리 법적 의무 대상 */}
-      <section className="pb-[200px]">
+      <section className="mt-6">
        <SectionTitle>빗물이용시설 설치 관리 법적 의무 대상</SectionTitle>
        <div className="mt-8">
          <ImgCard src="/images/landing/intro/rainreuse_mandatory.png" alt="법적 의무 대상 설명" />
        </div>
      </section>
+
+      <Hr className="my-11" />
+
+      {/* 3) 빗물이용시설 설계 방안 */}
+      <section className="mt-6">
+        <SectionTitle>빗물이용시설 설계 방안</SectionTitle>
+        <div className="mt-8">
+          <ImgCard src="/images/landing/intro/rainwater_design.png" alt="빗물이용시설 설계 방안 설명" />
+        </div>
+      </section>
+
+      <Hr className="my-11" />
+
+      {/* 4) 빗물이용시설 시설기준 및 관리기준 */}
+      <section className="pb-[200px]">
+        <SectionTitle>빗물이용시설 시설기준 및 관리기준</SectionTitle>
+        <div className="mt-8">
+          <ImgCard src="/images/landing/intro/rainwater_standards.png" alt="빗물이용시설 시설기준 및 관리기준 설명" />
+        </div>
+      </section>
    </div>
  );
 }
@@ -0,0 +1,60 @@
+import { NextResponse } from "next/server";
+
+export async function GET(req: Request) {
+  const { searchParams } = new URL(req.url);
+  const query = (searchParams.get("query") ?? "").trim();
+  const page = Number(searchParams.get("page") ?? "1");
+
+  if (!query) {
+    return NextResponse.json({ totalCount: 0, items: [] });
+  }
+
+  const confmKey = process.env.JUSO_API_KEY;
+
+  // ✅ 키 없으면 UI 개발용 더미
+  if (!confmKey) {
+    return NextResponse.json({
+      totalCount: 3,
+      items: [
+        {
+          zipNo: "06236",
+          roadAddr: "서울특별시 강남구 테헤란로 152, 강남파이낸스센터 12층",
+          jibunAddr: "서울특별시 강남구 역삼동 737-10 강남파이낸스센터",
+        },
+        {
+          zipNo: "06180",
+          roadAddr: "서울특별시 강남구 테헤란로 231, 센터필드 WEST동 3층",
+          jibunAddr: "서울특별시 강남구 역삼동 824-11 센터필드 WEST동",
+        },
+        {
+          zipNo: "06142",
+          roadAddr: "서울특별시 강남구 테헤란로 521, 삼성동 코엑스인터컨티넨탈호텔 별관",
+          jibunAddr: "서울특별시 강남구 삼성동 159-1 코엑스인터컨티넨탈호텔",
+        },
+      ],
+    });
+  }
+
+  // ✅ 행안부 주소검색 API(JSON)
+  const url = new URL("https://business.juso.go.kr/addrlink/addrLinkApi.do");
+  url.searchParams.set("confmKey", confmKey);
+  url.searchParams.set("currentPage", String(page));
+  url.searchParams.set("countPerPage", "20");
+  url.searchParams.set("keyword", query);
+  url.searchParams.set("resultType", "json");
+
+  const r = await fetch(url.toString(), { cache: "no-store" });
+  const j = await r.json();
+
+  const common = j?.results?.common;
+  const totalCount = Number(common?.totalCount ?? 0);
+  const list = j?.results?.juso ?? [];
+
+  const items = list.map((x: any) => ({
+    zipNo: x.zipNo,
+    roadAddr: x.roadAddr,
+    jibunAddr: x.jibunAddr,
+  }));
+
+  return NextResponse.json({ totalCount, items });
+}
@@ -109,6 +109,7 @@ export type DemandCompBizType = {
  dmdInfoFk: string | '';
  bzmnNo: string | '';
  dmdCoNm: string | '';
+  zip: string | '';
  daddr: string | '';
  telno: string | '';
  rgtr: string | '';
@@ -719,6 +720,7 @@ export const SdmReducer = (set: any): SdmActions => {
          bzmnNo: res.bzmnNo,
          dmdCoNm: res.dmdCoNm,
          dmdInfoId: res.dmdInfoId,
+          zip: res.zip || '',
          daddr: res.daddr,
          telno: res.telno.replace(/(\d{3})(\d{4})(\d{4})/, '$1-$2-$3'),
          rgtr: res.rgtr,
@@ -0,0 +1,290 @@
+export type AddrItem = {
+  zipNo: string;
+  roadAddr: string;
+  jibunAddr: string;
+  ctpvNm: string;
+  sggNm: string;
+};
+
+export interface ZipSearchParams {
+  roadNm?: string;
+  bldgNoMno?: number | null;
+  bldgNoSno?: number | null;
+  page?: number;
+  size?: number;
+}
+
+export interface Zip {
+  zoneNo: string;
+  ctpvNm: string;
+  sggNm: string;
+  lotno: string;
+  zipAddr: string;
+}
+
+interface ZipListResponse {
+  content?: Zip[];
+  totalElements?: number;
+}
+
+export type PostcodeSearchParams = {
+  roadNm: string;
+  bldgNoMno: number;
+  bldgNoSno: number | null;
+  page: number;
+};
+
+export type ParsePostcodeInputResult =
+  | { ok: true; value: PostcodeSearchParams; keyword: string }
+  | { ok: false; message: string };
+
+export type PostcodeSearchResult = {
+  totalCount: number;
+  items: AddrItem[];
+};
+
+type SuggestionSeed = {
+  roadNm: string;
+  bldgNoMno: number;
+};
+
+async function findAddress(searchQuery: ZipSearchParams): Promise<ZipListResponse> {
+  if (!searchQuery) return {};
+
+  const params = new URLSearchParams();
+  if (searchQuery.roadNm) params.append("roadNm", searchQuery.roadNm);
+  if (searchQuery.bldgNoMno != null) {
+    params.append("bldgNoMno", searchQuery.bldgNoMno.toString());
+  }
+  if (searchQuery.bldgNoSno != null) {
+    params.append("bldgNoSno", searchQuery.bldgNoSno.toString());
+  }
+  if (searchQuery.page != null) params.append("page", searchQuery.page.toString());
+  if (searchQuery.size != null) params.append("size", searchQuery.size.toString());
+
+  const url = `/cms-service/api/v1/zips?${params.toString()}`;
+  const response = await fetch(url);
+  if (!response.ok) throw new Error("Network response was not ok");
+  return (await response.json()) as ZipListResponse;
+}
+
+function extractSuggestionSeed(item: Zip): SuggestionSeed | null {
+  const ext = item as Zip & {
+    roadNm?: string;
+    bldgNoMno?: number | string;
+  };
+
+  const mnoByField = Number(ext.bldgNoMno);
+  const roadNmByField = (ext.roadNm ?? "").trim();
+  if (roadNmByField && Number.isInteger(mnoByField) && mnoByField > 0) {
+    return { roadNm: roadNmByField, bldgNoMno: mnoByField };
+  }
+
+  const firstSegment = (item.zipAddr ?? "").split(",")[0]?.trim() ?? "";
+  if (!firstSegment) return null;
+
+  const parts = firstSegment.split(/\s+/);
+  const bldgToken = parts.at(-1) ?? "";
+  const matched = bldgToken.match(/^(\d+)(?:-\d+)?$/);
+  if (!matched) return null;
+
+  const bldgNoMno = Number(matched[1]);
+  const roadNm = parts.slice(0, -1).join(" ").trim();
+  if (!roadNm || !Number.isInteger(bldgNoMno) || bldgNoMno <= 0) {
+    return null;
+  }
+
+  return { roadNm, bldgNoMno };
+}
+
+function searchFilter(search: string): boolean {
+  if (search.length === 0) return true;
+
+  const expText = /[%=><]/;
+  if (expText.test(search)) {
+    alert("특수문자를 입력 할수 없습니다.");
+    return false;
+  }
+
+  const sqlArray = [
+    "OR",
+    "SELECT",
+    "INSERT",
+    "DELETE",
+    "UPDATE",
+    "CREATE",
+    "DROP",
+    "EXEC",
+    "UNION",
+    "FETCH",
+    "DECLARE",
+    "TRUNCATE",
+  ];
+
+  for (const sqlWord of sqlArray) {
+    const regex = new RegExp(sqlWord, "gi");
+    if (regex.test(search)) {
+      alert(`"${sqlWord}"와(과) 같은 특정문자로 검색할 수 없습니다.`);
+      return false;
+    }
+  }
+
+  return true;
+}
+
+export function parsePostcodeInput(
+  input: string,
+  page = 1,
+): ParsePostcodeInputResult {
+  const normalized = input.replace(/\s+/g, " ").trim();
+
+  if (!normalized) {
+    return {
+      ok: false,
+      message: "도로명과 건물번호를 입력해 주세요. 예) 테헤란로 152-1",
+    };
+  }
+
+  const parts = normalized.split(" ");
+  if (parts.length < 2) {
+    if (/^\d+(?:-\d+)?$/.test(normalized)) {
+      return { ok: false, message: "도로명을 입력해 주세요" };
+    }
+    if (/[가-힣]/.test(normalized) && !/\d/.test(normalized)) {
+      return { ok: false, message: "건물번호를 입력해 주세요" };
+    }
+    return {
+      ok: false,
+      message: "도로명과 건물번호를 공백으로 구분해 주세요. 예) 테헤란로 152-1",
+    };
+  }
+
+  const bldgToken = parts.at(-1) ?? "";
+  const roadNm = parts.slice(0, -1).join(" ").trim();
+
+  if (!roadNm || !/[가-힣]/.test(roadNm)) {
+    return {
+      ok: false,
+      message: "도로명을 입력해 주세요",
+    };
+  }
+
+  if (!/\d/.test(bldgToken)) {
+    return { ok: false, message: "건물번호를 입력해 주세요" };
+  }
+
+  if (!/^\d+(?:-\d+)?$/.test(bldgToken)) {
+    return {
+      ok: false,
+      message:
+        "건물번호는 숫자 또는 숫자-숫자 형식으로 입력해 주세요. 예) 152 또는 152-1",
+    };
+  }
+
+  const [mnoStr, snoStr] = bldgToken.split("-");
+  const bldgNoMno = Number(mnoStr);
+  const bldgNoSno = snoStr ? Number(snoStr) : null;
+
+  if (!Number.isInteger(bldgNoMno) || bldgNoMno <= 0) {
+    return { ok: false, message: "건물본번은 1 이상의 숫자로 입력해 주세요." };
+  }
+
+  if (bldgNoSno !== null && (!Number.isInteger(bldgNoSno) || bldgNoSno <= 0)) {
+    return { ok: false, message: "건물부번은 1 이상의 숫자로 입력해 주세요." };
+  }
+
+  return {
+    ok: true,
+    value: {
+      roadNm,
+      bldgNoMno,
+      bldgNoSno,
+      page,
+    },
+    keyword: `${roadNm} ${bldgNoMno}${bldgNoSno ? `-${bldgNoSno}` : ""}`,
+  };
+}
+
+export function extractSearchInputFromRoadAddr(roadAddr: string): string {
+  const firstSegment = roadAddr.split(",")[0]?.trim() ?? "";
+  if (!firstSegment) return "";
+
+  const parts = firstSegment.split(/\s+/);
+  const bldgToken = parts.at(-1) ?? "";
+  if (!/^\d+(?:-\d+)?$/.test(bldgToken)) return "";
+
+  return `${parts.slice(0, -1).join(" ")} ${bldgToken}`.trim();
+}
+
+export async function fetchPostcodeSuggestions(input: string): Promise<string[]> {
+  const normalized = input.replace(/\s+/g, " ").trim();
+  const parts = normalized.split(" ");
+  const tail = parts.at(-1) ?? "";
+  const roadNm =
+    /^\d+(?:-\d+)?$/.test(tail) && parts.length > 1
+      ? parts.slice(0, -1).join(" ").trim()
+      : normalized;
+  if (!roadNm) return [];
+  if (!searchFilter(roadNm)) return [];
+
+  const data = await findAddress({
+    roadNm,
+    page: 0,
+    size: 50,
+  });
+
+  const list = Array.isArray(data?.content) ? (data.content as Zip[]) : [];
+  const suggestions: string[] = [];
+  const seen = new Set<string>();
+
+  for (const item of list) {
+    const seed = extractSuggestionSeed(item);
+    if (!seed) continue;
+
+    const label = `${seed.roadNm} ${seed.bldgNoMno}`;
+    if (seen.has(label)) continue;
+
+    seen.add(label);
+    suggestions.push(label);
+    if (suggestions.length >= 5) break;
+  }
+
+  return suggestions;
+}
+
+export async function fetchPostcode(
+  params: PostcodeSearchParams,
+): Promise<PostcodeSearchResult> {
+  const keywordForCheck = `${params.roadNm} ${params.bldgNoMno}${
+    params.bldgNoSno ? `-${params.bldgNoSno}` : ""
+  }`;
+  if (!searchFilter(keywordForCheck)) {
+    return {
+      totalCount: 0,
+      items: [],
+    };
+  }
+
+  const query: ZipSearchParams = {
+    roadNm: params.roadNm,
+    bldgNoMno: params.bldgNoMno,
+    bldgNoSno: params.bldgNoSno,
+    page: Math.max(params.page - 1, 0),
+    size: 20,
+  };
+
+  const data = await findAddress(query);
+  const list = Array.isArray(data?.content) ? (data.content as Zip[]) : [];
+  const items: AddrItem[] = list.map((item) => ({
+    zipNo: item.zoneNo ?? "",
+    roadAddr: item.zipAddr ?? "",
+    jibunAddr: item.lotno ?? item.zipAddr ?? "",
+    ctpvNm: item.ctpvNm ?? "",
+    sggNm: item.sggNm ?? "",
+  }));
+
+  return {
+    totalCount: Number(data?.totalElements ?? 0),
+    items,
+  };
+}
@@ -64,8 +64,8 @@ export default function LoginModal({ open, onClose, onSuccess }: LoginModalProps
  }, [open, onClose]);

  useEffect(() => {
-    if (noWorker) {
-      setWorkerNo("");
+    if (noWorker) { // 종사업자번호 해당없음
+      setWorkerNo(""); // 종사업자번호
      setErrors((p) => {
        const nextErrors = { ...p };
        delete nextErrors.workerNo;
@@ -127,7 +127,7 @@ export default function LoginModal({ open, onClose, onSuccess }: LoginModalProps
    markAllTouched();

    const v = validate();
-    if (Object.keys(v).length) return;
+    if (Object.keys(v).length) return; //검증 에러가 하나라도 있으면 로그인 요청을 중단

    try {
      setSubmitting(true);
@@ -0,0 +1,303 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import {
+  fetchPostcode,
+  fetchPostcodeSuggestions,
+  parsePostcodeInput,
+  type AddrItem,
+  type PostcodeSearchResult,
+} from "@/app/store/sdmMng/postcode-service";
+
+export type { AddrItem } from "@/app/store/sdmMng/postcode-service";
+
+type Props = {
+  open: boolean;
+  onClose: () => void;
+  onSelect: (item: AddrItem) => void;
+};
+
+function useDebouncedValue<T>(value: T, delay = 250) {
+  const [v, setV] = useState(value);
+  useEffect(() => {
+    const t = setTimeout(() => setV(value), delay);
+    return () => clearTimeout(t);
+  }, [value, delay]);
+  return v;
+}
+
+export default function PostcodeModal({ open, onClose, onSelect }: Props) {
+  const [mounted, setMounted] = useState(false);
+
+  const [q, setQ] = useState("");
+  const dq = useDebouncedValue(q, 250);
+
+  const [items, setItems] = useState<AddrItem[]>([]);
+  const [suggestions, setSuggestions] = useState<string[]>([]);
+  const [total, setTotal] = useState(0);
+  const [loading, setLoading] = useState(false);
+  const [searchMessage, setSearchMessage] = useState("");
+
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  useEffect(() => setMounted(true), []);
+
+  useEffect(() => {
+    if (open) return;
+    setQ("");
+    setItems([]);
+    setSuggestions([]);
+    setTotal(0);
+    setLoading(false);
+    setSearchMessage("");
+  }, [open]);
+
+  useEffect(() => {
+    if (!open) return;
+
+    const prevOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+
+    setTimeout(() => inputRef.current?.focus(), 50);
+
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", onKeyDown);
+
+    return () => {
+      document.body.style.overflow = prevOverflow;
+      window.removeEventListener("keydown", onKeyDown);
+    };
+  }, [open, onClose]);
+
+  useEffect(() => {
+    if (!open) return;
+
+    const keyword = dq.trim();
+    if (!keyword) {
+      setSuggestions([]);
+      return;
+    }
+
+    let alive = true;
+    (async () => {
+      try {
+        const nextSuggestions = await fetchPostcodeSuggestions(keyword);
+        if (!alive) return;
+        setSuggestions(nextSuggestions);
+      } catch {
+        if (!alive) return;
+        setSuggestions([]);
+      }
+    })();
+
+    return () => {
+      alive = false;
+    };
+  }, [dq, open]);
+
+  useEffect(() => {
+    if (!open) return;
+
+    const keyword = dq.trim();
+
+    if (!keyword) {
+      setItems([]);
+      setTotal(0);
+      setLoading(false);
+      setSearchMessage("");
+      return;
+    }
+
+    const parsed = parsePostcodeInput(keyword, 1);
+    if (!parsed.ok) {
+      setItems([]);
+      setTotal(0);
+      setLoading(false);
+      setSearchMessage(parsed.message);
+      return;
+    }
+
+    let alive = true;
+
+    (async () => {
+      setLoading(true);
+      setSearchMessage("");
+      try {
+        const result: PostcodeSearchResult = await fetchPostcode(parsed.value);
+        if (!alive) return;
+
+        setItems(result.items);
+        setTotal(result.totalCount);
+      } catch {
+        if (!alive) return;
+        setItems([]);
+        setTotal(0);
+        setSearchMessage("우편번호 검색 중 오류가 발생했습니다.");
+      } finally {
+        if (alive) {
+          setLoading(false);
+          setSuggestions([]);
+        }
+      }
+    })();
+
+    return () => {
+      alive = false;
+    };
+  }, [dq, open]);
+
+  const showSuggest = open && q.trim().length >= 1 && suggestions.length > 0;
+
+  if (!mounted || !open) return null;
+
+  return createPortal(
+    <div className="fixed inset-0 z-[9999]">
+      <button
+        type="button"
+        className="absolute inset-0 bg-black/40"
+        aria-label="닫기"
+        onClick={onClose}
+      />
+
+      <div className="absolute inset-0 flex items-center justify-center p-6">
+        <div
+          className="relative w-full max-w-[520px] rounded-2xl bg-white shadow-[0_20px_60px_rgba(0,0,0,0.18)]"
+          role="dialog"
+          aria-modal="true"
+          aria-label="우편번호 검색"
+        >
+          <div className="flex items-center justify-between px-7 pt-6 pb-4">
+            <h2 className="text-[22px] font-extrabold tracking-tight text-slate-900">
+              우편번호 검색
+            </h2>
+
+            <button
+              type="button"
+              onClick={onClose}
+              className="grid h-9 w-9 place-items-center rounded-full hover:bg-slate-100"
+              aria-label="닫기"
+            >
+              <span className="text-[18px] leading-none">✕</span>
+            </button>
+          </div>
+
+          <div className="px-7 pb-4">
+            <div className="relative">
+              <input
+                ref={inputRef}
+                value={q}
+                onChange={(e) => setQ(e.target.value)}
+                placeholder="예) 테헤란로 152-1"
+                className={[
+                  "w-full rounded-md border px-4 py-3 pr-12 text-[14px] outline-none",
+                  "border-slate-300 focus:border-sky-500 focus:ring-2 focus:ring-sky-200",
+                ].join(" ")}
+              />
+
+              <button
+                type="button"
+                className="absolute right-3 top-1/2 -translate-y-1/2 grid h-9 w-9 place-items-center rounded-full hover:bg-slate-100 text-[#01ACE5]"
+                aria-label="검색"
+                onClick={() => setQ((v) => v.trim())}
+              >
+                <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>
+
+              {/* suggestions dropdown */}
+              {showSuggest && (
+                <div className="absolute left-0 right-0 top-[calc(100%+6px)] z-10 overflow-hidden rounded-md border border-slate-200 bg-white shadow-lg">
+                  {suggestions.map((s) => (
+                    <button
+                      key={s}
+                      type="button"
+                      className="flex w-full items-center justify-between px-4 py-3 text-left text-[14px] hover:bg-slate-50"
+                      onClick={() => {
+                        // ✅ 추천 클릭 → 입력값 채우고 드롭다운 닫기 + 포커스 유지
+                        setQ(s);
+                        setSuggestions([]);
+                        requestAnimationFrame(() => inputRef.current?.focus());
+                      }}
+                    >
+                      <span className="truncate text-slate-800">{s}</span>
+                      <span className="ml-4 text-slate-400">↵</span>
+                    </button>
+                  ))}
+                </div>
+              )}
+            </div>
+          </div>
+
+          <div className="px-7 pb-7">
+            <div className="mb-3 text-[13px] text-slate-500">
+              {q.trim()
+                ? loading
+                  ? "검색 중..."
+                  : searchMessage || `총 ${total.toLocaleString()}개의 검색결과`
+                : "도로명과 건물번호를 입력하세요. 예) 테헤란로 152-1"}
+            </div>
+
+            <div className="max-h-[420px] overflow-y-auto pr-1">
+              {!loading && q.trim() && items.length === 0 && !searchMessage && (
+                <div className="rounded-lg border border-slate-200 p-4 text-[14px] text-slate-600">
+                  검색 결과가 없습니다.
+                </div>
+              )}
+
+              <div className="space-y-3">
+                {items.map((it) => (
+                  <button
+                    key={`${it.zipNo}-${it.roadAddr}`}
+                    type="button"
+                    onClick={() => onSelect(it)}
+                    className={[
+                      "w-full rounded-lg border p-4 text-left transition",
+                      "border-slate-200 hover:border-sky-300 hover:bg-sky-50/30",
+                    ].join(" ")}
+                  >
+                    <div className="text-[20px] font-extrabold tracking-tight text-slate-900">
+                      {it.zipNo}
+                    </div>
+
+                    <div className="mt-2 flex items-start gap-2">
+                      <span className="w-[52px] shrink-0 mt-[2px] inline-flex items-center justify-center rounded-full border border-sky-400 px-2 py-[2px] text-[12px] font-semibold text-sky-600">
+                        도로명
+                      </span>
+                      <p className="text-[14px] leading-6 text-slate-700">
+                        {it.roadAddr}
+                      </p>
+                    </div>
+
+                    <div className="mt-1 flex items-start gap-2">
+                      <span className="w-[52px] shrink-0 mt-[2px] inline-flex items-center justify-center rounded-full border border-[#6DBB4F] px-2 py-[2px] text-[12px] font-semibold text-[#6DBB4F]">
+                        지번
+                      </span>
+                      <p className="text-[14px] leading-6 text-slate-700">
+                        {it.jibunAddr}
+                      </p>
+                    </div>
+                  </button>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>,
+    document.body,
+  );
+}
@@ -19,10 +19,10 @@ export default function SubPageHeader({
  title,
  crumbs,
  note = "* 는 필수 값입니다.",
-  underlineWidthClass = "w-40",
+  // underlineWidthClass = "w-40",
  className = "",
  wrapClassName = "",
-  hideFooterLine = false,
+  // hideFooterLine = false,
  hideGuideText = false,
 }: Props) {
  return (
@@ -1,6 +1,7 @@
 "use client";

 import Link from "next/link";
+import Image from "next/image";
 import { usePathname, useRouter } from "next/navigation";
 import { useEffect, useMemo, useState } from "react";
 import LoginModal from "@/components/LoginModal";
@@ -91,7 +92,14 @@ export default function TopNav() {
            {/* 좌측: 로고 */}
            <div className="flex items-center gap-3">
              <Link href="/main" className="flex items-center">
-                <img src="/images/landing/logo.png" alt="HASUON" className="h-9 w-auto" />
+                <Image
+                  src="/images/landing/logo.png"
+                  alt="HASUON"
+                  width={229}
+                  height={46}
+                  className="h-9 w-auto"
+                  priority
+                />
              </Link>
            </div>

@@ -149,9 +157,11 @@ export default function TopNav() {
                >
                  로그인
                  <span aria-hidden>
-                    <img
+                    <Image
                      src="/images/landing/icon_login.png"
                      alt="login icon"
+                      width={24}
+                      height={24}
                      className="ml-1 h-6 w-6 object-contain"
                    />
                  </span>
@@ -168,9 +178,11 @@ export default function TopNav() {
                  >
                    로그아웃
                    <span aria-hidden>
-                      <img
+                      <Image
                        src="/images/landing/icon_logout.png"
                        alt="logout icon"
+                        width={24}
+                        height={24}
                        className="h-6 w-6 object-contain"
                      />
                    </span>
@@ -24,6 +24,7 @@ const eslintConfig = [
  {rules:{
    // other rules..
    "@typescript-eslint/no-explicit-any": "off",
+    "@next/next/no-img-element": "off",
    ...(isProd ? { "react-hooks/exhaustive-deps": "off" } : {}),
  }},
 ];
@@ -1,5 +1,5 @@
 import type { NextConfig } from "next";
-import path from "path";
+// import path from "path";

 const subDomain =
  process.env.NEXT_PUBLIC_PROXY_HOST || "http://localhost:3000";
@@ -18,6 +18,7 @@
    "build:wr": "turbo run build --filter=wr",
    "build:fo": "turbo run build --filter=fo",
    "build:dm": "turbo run build --filter=dm",
+    "build:dm_new": "turbo run build --filter=dm_new",
    "dev:cm": "turbo run dev --filter=cm",
    "dev:cs": "turbo run dev --filter=cs",
    "dev:sn": "turbo run dev --filter=sn",