ONAANDALL/frontend
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'iipbs/sn/dev'

Browse Source
This commit is contained in:
mind-one005
2026-03-16 09:07:05 +09:00
parent af12aa0718 76bb48aacd
commit 980c4f1c9f
56 changed files with 3042 additions and 1374 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.husky/pre-push
+3
View File
@@ -1,5 +1,8 @@
#!/bin/sh
BRANCH=$(git rev-parse --abbrev-ref HEAD)
if [ "$BRANCH" != "main" ]; then
exit 0
fi
echo "Branch: $BRANCH"
echo "Changed packages (dry-run):"
pnpm turbo run build --filter="...[origin/$BRANCH]" --dry-run
apps/dm_new/.env.local
+3 -3
View File
@@ -1,12 +1,13 @@
NEXT_PUBLIC_SITE_ID = DN
NEXT_PUBLIC_PORT = 3015
NEXT_PUBLIC_CLAIM_NAME = Authorization
NEXT_PUBLIC_AUTH_USER_ID = token-id
NEXT_PUBLIC_ACCESS_TOKEN = access-token
NEXT_PUBLIC_REFRESH_TOKEN = refresh-token
NEXT_PUBLIC_PORT = 3005
NEXT_PUBLIC_PROXY_HOST = http://localhost:3005
NEXT_PUBLIC_CS_SERVER_API_URL = http://dev.onasys.co.kr:8000
NEXT_PUBLIC_CM_LOGIN_PAGE_URL = http://dev.onasys.co.kr:3000/auth/login
NEXT_PUBLIC_SERVER_API_URL = http://dev.onasys.co.kr:8000
NEXT_PUBLIC_CS_SERVER_API_URL = http://dev.onasys.co.kr:8000
NEXT_PUBLIC_DM_SERVER_API_URL = http://con.mind-one.co.kr:11083/reuse-service/api/v1
# NEXT_PUBLIC_FO_SERVER_API_URL = http://192.168.1.222:8883/operation-service/api/v1
NEXT_PUBLIC_FO_SERVER_API_URL = http://con.mind-one.co.kr:11083/operation-service/api/v1
@@ -19,7 +20,6 @@ NEXT_PUBLIC_NGII_PARAM = 04trYP9_xwLAfALjwZ-B8g&service=WMTS&request=GetTile&ver
NEXT_PUBLIC_GATEWAY_URL=http://con.mind-one.co.kr:11083 # 개발 서버 API
#NEXT_PUBLIC_SEWERAGE_API_URL=http://192.168.1.128:8883/sewerage-service/api # 최용성
#NEXT_PUBLIC_SEWERAGE_API_URL=http://192.168.1.66:8883/sewerage-service/api # 박이정
NEXT_PUBLIC_CM_LOGIN_PAGE_URL = http://dev.onasys.co.kr:3000/auth/login
NEXT_PUBLIC_FINDADRESS_URL=https://business.juso.go.kr/addrlink/addrLinkApi.do
apps/dm_new/.env.mindone
+11 -9
View File
@@ -1,23 +1,25 @@
NEXT_PUBLIC_SITE_ID = DM
NEXT_PUBLIC_PORT = 11035
NEXT_PUBLIC_PROXY_HOST = http://con.mind-one.co.kr:11035
NEXT_PUBLIC_SERVER_API_URL = http://dev.onasys.co.kr:8000
NEXT_PUBLIC_DM_SERVER_API_URL = http://con.mind-one.co.kr:11083/reuse-service/api/v1
NEXT_PUBLIC_FO_SERVER_API_URL = http://con.mind-one.co.kr:11083/operation-service/api/v1
NEXT_PUBLIC_CS_SERVER_API_URL = http://dev.onasys.co.kr:8000
NEXT_PUBLIC_CS_TUS_UPLOAD = /attach-service/api/v1/tus/upload
NEXT_PUBLIC_SITE_ID = DN
NEXT_PUBLIC_PORT = 11315
NEXT_PUBLIC_CLAIM_NAME = Authorization
NEXT_PUBLIC_AUTH_USER_ID = token-id
NEXT_PUBLIC_ACCESS_TOKEN = access-token
NEXT_PUBLIC_REFRESH_TOKEN = refresh-token
NEXT_PUBLIC_PROXY_HOST = http://con.mind-one.co.kr:11315
NEXT_PUBLIC_CM_LOGIN_PAGE_URL = http://dev.onasys.co.kr:3000/auth/login
NEXT_PUBLIC_SERVER_API_URL = http://dev.onasys.co.kr:8000
NEXT_PUBLIC_CS_SERVER_API_URL = http://dev.onasys.co.kr:8000
NEXT_PUBLIC_DM_SERVER_API_URL = http://con.mind-one.co.kr:11083/reuse-service/api/v1
NEXT_PUBLIC_FO_SERVER_API_URL = http://con.mind-one.co.kr:11083/operation-service/api/v1
NEXT_PUBLIC_WR_SERVER_API_URL = http://con.mind-one.co.kr:11083/reuse-service/api/v1
#NEXT_PUBLIC_GEOSERVER_URL = http://rsone.iptime.org:10010/geoserver
#NEXT_PUBLIC_LX_GEOSERVER_URL = http://con.mind-one.co.kr:11306/geoserver
NEXT_PUBLIC_CS_TUS_UPLOAD = /attach-service/api/v1/tus/upload
NEXT_PUBLIC_NGII_URL = https://map.ngii.go.kr
NEXT_PUBLIC_NGII_PARAM = 04trYP9_xwLAfALjwZ-B8g&service=WMTS&request=GetTile&version=1.0.0&format=image/png&layer=korean_map&style=korean&tilematrixset=korean&tilematrix={z}&tilecol={x}&tilerow={y}
NEXT_PUBLIC_SEWERAGE_API_URL=http://con.mind-one.co.kr:11083/sewerage-service # 개발 서버 API
NEXT_PUBLIC_GATEWAY_URL=http://con.mind-one.co.kr:11083 # 개발 서버 API
# NEXT_PUBLIC_SEWERAGE_API_URL=http://192.168.1.128:8883/sewerage-service/api # 최용성
#NEXT_PUBLIC_SEWERAGE_API_URL=http://192.168.1.66:8883/sewerage-service/api # 박이정
NEXT_PUBLIC_CM_LOGIN_PAGE_URL = http://dev.onasys.co.kr:3000/auth/login
NEXT_PUBLIC_FINDADRESS_URL=https://business.juso.go.kr/addrlink/addrLinkApi.do
apps/dm_new/.env.production
+5 -5
View File
@@ -1,5 +1,5 @@
# 공단 운영
NEXT_PUBLIC_SITE_ID = DM
NEXT_PUBLIC_SITE_ID = DN
NEXT_PUBLIC_PORT = 3000
NEXT_PUBLIC_CLAIM_NAME = Authorization
NEXT_PUBLIC_AUTH_USER_ID = token-id
@@ -8,16 +8,16 @@ NEXT_PUBLIC_REFRESH_TOKEN = refresh-token
#NEXT_PUBLIC_PROXY_HOST = https://devreuse.hasuon.or.kr
#NEXT_PUBLIC_CM_LOGIN_PAGE_URL = https://devqueen.hasuon.or.kr/auth/login
NEXT_PUBLIC_SERVER_API_URL = http://apigateway.iipbs-was.svc.cluster.local:8000
NEXT_PUBLIC_FO_SERVER_API_URL = http://apigateway.iipbs-was.svc.cluster.local:8000/operation-service/api/v1
NEXT_PUBLIC_CS_SERVER_API_URL = http://apigateway.iipbs-was.svc.cluster.local:8000
NEXT_PUBLIC_CS_TUS_UPLOAD = /attach-service/api/v1/tus/upload
NEXT_PUBLIC_FO_SERVER_API_URL = http://apigateway.iipbs-was.svc.cluster.local:8000/operation-service/api/v1
NEXT_PUBLIC_WR_SERVER_API_URL = http://apigateway.iipbs-was.svc.cluster.local:8000/reuse-service/api/v1
NEXT_PUBLIC_GEOSERVER_URL = http://172.29.143.87:8080/geoserver
NEXT_PUBLIC_LX_GEOSERVER_URL = http://172.29.143.87:8080/geoserver_swl
NEXT_PUBLIC_WR_SERVER_API_URL = http://apigateway.iipbs-was.svc.cluster.local:8000/reuse-service/api/v1
NEXT_PUBLIC_CS_TUS_UPLOAD = /attach-service/api/v1/tus/upload
NEXT_PUBLIC_SEWERAGE_API_URL = http://apigateway.iipbs-was.svc.cluster.local:8000/sewerage-service
NEXT_PUBLIC_GATEWAY_URL = http://apigateway.iipbs-was.svc.cluster.local:8000
NEXT_PUBLIC_NGII_URL = http://172.29.143.87/poiact
NEXT_PUBLIC_NGII_PARAM = BDE2BEF39DAFEC293AB6730150F222AC&service=WMTS&request=GetTile&version=1.0.0&format=image/png&layer=korean_map&style=korean&tilematrixset=korean&tilematrix={z}&tilecol={y}&tilerow={x}
NEXT_PUBLIC_GATEWAY_URL = http://apigateway.iipbs-was.svc.cluster.local:8000
NEXT_PUBLIC_FINDADRESS_URL=https://business.juso.go.kr/addrlink/addrLinkApi.do
apps/dm_new/app/(landing)/reuse/_components/CaseTabsCarousel.tsx
+11 -3
View File
@@ -8,6 +8,7 @@ import React, {
useRef,
useState,
} from "react";
import Image from "next/image";
/**
* CaseTabsCarousel.tsx (FINAL OPTIMIZED)
@@ -459,9 +460,11 @@ export default function CaseTabsCarousel() {
].join(" ")}
aria-label="이전"
>
<img
<Image
src="/images/landing/icon_left_arrow.png"
alt="이전"
width={24}
height={24}
className="w-6 h-6 object-contain"
/>
</button>
@@ -480,9 +483,11 @@ export default function CaseTabsCarousel() {
].join(" ")}
aria-label="다음"
>
<img
<Image
src="/images/landing/icon_right_arrow.png"
alt="다음"
width={24}
height={24}
className="w-6 h-6 object-contain"
/>
</button>
@@ -513,10 +518,13 @@ export default function CaseTabsCarousel() {
className="overflow-hidden rounded-[22px] border-2 border-sky-400 bg-white"
>
<div className="h-[241px] w-full bg-slate-100 border-b border-b-blue-300">
<img
<Image
src={c.imageSrc}
alt={c.title}
width={640}
height={241}
className="h-full w-full object-cover"
style={{ width: "100%", height: "100%" }}
loading="lazy"
/>
</div>
apps/dm_new/app/(landing)/reuse/_components/ImageSlider.tsx
+11 -3
View File
@@ -1,6 +1,7 @@
// apps/dm/app/(landing)/reuse/_components/ImageSlider.tsx
"use client";
import Image from "next/image";
import { useEffect, useMemo, useRef, useState } from "react";
type Slide = { src: string; alt?: string };
@@ -86,9 +87,11 @@ export default function CaseImageSlider({
w-[80px] h-[80px] rounded-full border border-black/20 bg-white
grid place-items-center shadow-sm hover:bg-black/[0.03]"
>
<img
<Image
src="/images/landing/icon_left_arrow.png"
alt="이전"
width={12}
height={22}
className="w-[12px] h-[22px]"
/>
</button>
@@ -102,9 +105,11 @@ export default function CaseImageSlider({
w-[80px] h-[80px] rounded-full border border-black/20 bg-white
grid place-items-center shadow-sm hover:bg-black/[0.03]"
>
<img
<Image
src="/images/landing/icon_right_arrow.png"
alt="다음"
width={12}
height={22}
className="w-[12px] h-[22px]"
/>
</button>
@@ -129,10 +134,13 @@ export default function CaseImageSlider({
>
{safeSlides.map((s, i) => (
<div key={`${s.src}-${i}`} className="min-w-full">
<img
<Image
src={s.src}
alt={s.alt ?? `slide-${i + 1}`}
width={583}
height={400}
className="w-full h-full object-contain"
style={{ width: "100%", height: "100%" }}
draggable={false}
/>
</div>
apps/dm_new/app/(landing)/reuse/_components/Lnb.tsx
+13 -2
View File
@@ -1,6 +1,7 @@
// apps/dm/app/(landing)/reuse/_components/Lnb.tsx
"use client";
import Image from "next/image";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useMemo, useState } from "react";
@@ -29,7 +30,15 @@ export default function Lnb({ title, items }: { title: string; items: LnbItem[]
const [openLabel, setOpenLabel] = useState<string | null>(defaultOpenLabel);
return (
<aside className="w-[260px] min-w-[260px] shrink-0">
<aside
className={[
"fixed left-0 top-[83px]", // ✅ 화면 고정 + TopNav 아래로
"w-[260px] min-w-[260px] shrink-0",
"h-[calc(100vh-83px)]", // ✅ 남은 높이만큼
"overflow-y-auto", // ✅ LNB 내부 스크롤
"bg-white z-50", // ✅ 겹침 방지
].join(" ")}
>
{/* 타이틀 */}
<div
className="h-[120px] flex items-center justify-center
@@ -81,9 +90,11 @@ export default function Lnb({ title, items }: { title: string; items: LnbItem[]
isOpen ? "rotate-180" : "rotate-0",
].join(" ")}
>
<img
<Image
src="/images/landing/drop_arrow.svg"
alt="드롭다운 화살표 아이콘"
width={28}
height={28}
className="w-7 h-7"
/>
</span>
apps/dm_new/app/(landing)/reuse/_components/TopNav.tsx
+19 -3
View File
@@ -1,6 +1,7 @@
// apps/dm/app/(landing)/reuse/_components/TopNav.tsx
"use client";
import Image from "next/image";
import Link from "next/link";
import { useEffect, useId, useState } from "react";
import { useRouter } from "next/navigation";
@@ -367,10 +368,13 @@ export default function TopNav() {
{/* 좌측: 로고 */}
<div className="flex items-center gap-3">
<Link href="/reuse" className="flex items-center">
<img
<Image
src="/images/landing/logo.png"
alt="HASUON"
width={229}
height={46}
className="h-9 w-auto"
priority
/>
</Link>
</div>
@@ -423,7 +427,13 @@ export default function TopNav() {
>
로그인
<span aria-hidden>
<img src="/images/landing/icon_login.png" alt="로그인 아이콘" className="h-6 w-6 object-contain ml-1"/>
<Image
src="/images/landing/icon_login.png"
alt="로그인 아이콘"
width={24}
height={24}
className="h-6 w-6 object-contain ml-1"
/>
</span>
</button>
) : (
@@ -438,7 +448,13 @@ export default function TopNav() {
>
로그아웃
<span aria-hidden>
<img src="/images/landing/icon_logout.png" alt="로그아웃 아이콘" className="h-6 w-6 object-contain"/>
<Image
src="/images/landing/icon_logout.png"
alt="로그아웃 아이콘"
width={24}
height={24}
className="h-6 w-6 object-contain"
/>
</span>
</button>
</>
apps/dm_new/app/(landing)/reuse/_hooks/useScrollSpy.ts
+18 -7
View File
@@ -1,9 +1,22 @@
/**
* IntersectionObserver로 각 section의 화면 노출 비율을 계산해서 가장 많이 보이는 section을 activeId로 만든다
*/
"use client";
import { useEffect, useRef, useState } from "react";
const DEFAULT_THRESHOLD = [0, 0.01, 0.1, 0.25, 0.5, 0.75];
export function useScrollSpy(sectionIds: string[], options?: IntersectionObserverInit) {
const [activeId, setActiveId] = useState(sectionIds[0] ?? "");
const ratiosRef = useRef<Map<string, number>>(new Map());
const activeIdRef = useRef(activeId);
useEffect(() => {
activeIdRef.current = activeId;
}, [activeId]);
const threshold = options?.threshold ?? DEFAULT_THRESHOLD;
const thresholdKey = Array.isArray(threshold) ? threshold.join("|") : String(threshold);
useEffect(() => {
const els = sectionIds
@@ -26,7 +39,7 @@ export function useScrollSpy(sectionIds: string[], options?: IntersectionObserve
}
// ✅ 전체 섹션 중 가장 ratio 큰 항목을 active로
let bestId = activeId;
let bestId = activeIdRef.current;
let bestRatio = -1;
for (const [id, ratio] of ratiosRef.current.entries()) {
@@ -39,17 +52,15 @@ export function useScrollSpy(sectionIds: string[], options?: IntersectionObserve
if (bestId) setActiveId(bestId);
},
{
root: null,
threshold: [0, 0.01, 0.1, 0.25, 0.5, 0.75],
rootMargin: DEFAULT_ROOT_MARGIN,
...options,
root: options?.root ?? null,
threshold,
rootMargin: options?.rootMargin ?? DEFAULT_ROOT_MARGIN,
}
);
els.forEach((el) => io.observe(el));
return () => io.disconnect();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [sectionIds.join("|"), options?.rootMargin, JSON.stringify(options?.threshold)]);
}, [sectionIds, options?.root, options?.rootMargin, threshold, thresholdKey]);
return activeId;
}
apps/dm_new/app/(landing)/reuse/_sections/Cases.tsx
+6 -2
View File
@@ -1,6 +1,9 @@
// apps/dm/app/(landing)/reuse/_sections/Cases.tsx
"use client";
import Image from "next/image";
import section03 from "@/public/images/landing/section_03.png";
export default function Cases() {
return (
<section id="cases" className="bg-[#EAF6F6]">
@@ -50,10 +53,11 @@ export default function Cases() {
w-full max-w-[720px]
"
>
<img
src="/images/landing/section_03.png"
<Image
src={section03}
alt="물 재이용 현황 데이터 테이블"
className="w-full h-auto object-cover"
style={{ width: "100%", height: "auto" }}
/>
</div>
</div>
apps/dm_new/app/(landing)/reuse/_sections/Hero.tsx
+8 -1
View File
@@ -1,4 +1,5 @@
// apps/dm/app/(landing)/reuse/_sections/Hero.tsx
import Image from "next/image";
import styles from "../reuse.module.css";
export default function Hero() {
@@ -21,7 +22,13 @@ export default function Hero() {
</div>
</div>
<div className="absolute inset-x-0 bottom-[120px] flex flex-col items-center justify-items-center gap-2 mt-10">
<img src="/images/landing/scroll_down.svg" alt="" className="w-[26px] h-[40px]" />
<Image
src="/images/landing/scroll_down.svg"
alt=""
width={26}
height={40}
className="w-[26px] h-[40px]"
/>
<span className="text-white/80 text-base tracking-[.25em]">scroll down</span>
</div>
</section>
apps/dm_new/app/(landing)/reuse/_sections/IntroCards.tsx
+13 -6
View File
@@ -1,12 +1,17 @@
// apps/dm/app/(landing)/reuse/_sections/IntroCards.tsx
"use client";
import Image, { type StaticImageData } from "next/image";
import Link from "next/link";
import card01 from "@/public/images/landing/card_01.jpg";
import card02 from "@/public/images/landing/card_02.jpg";
import card03 from "@/public/images/landing/card_03.jpg";
import card04 from "@/public/images/landing/card_04.jpg";
type IntroCardItem = {
title: string;
desc: string;
image: string;
image: StaticImageData;
href: string;
};
@@ -14,25 +19,25 @@ const INTRO_CARDS: IntroCardItem[] = [
{
title: "물 재이용 법",
desc: "물의 재이용 촉진 및 지원에 관한 법률을 시행하고, 일부 법률은 개정되었습니다.",
image: "/images/landing/card_01.jpg",
image: card01,
href: "/reuse/intro/law",
},
{
title: "친환경 수자원 빗물",
desc: "가뭄을 극복하고 홍수를 예방하기 위해 비가 내릴 때 빗물을 모아두었다가 사용합니다.",
image: "/images/landing/card_02.jpg",
image: card02,
href: "/reuse/intro/rain",
},
{
title: "알뜰하게 재이용되는 중수",
desc: "한번 사용한 물을 중수도 시설을 통해 재생하여 개별적 또는 지역적으로 재이용할 수 있습니다.",
image: "/images/landing/card_03.jpg",
image: card03,
href: "/reuse/intro/greywater",
},
{
title: "하수처리수 재이용",
desc: "사용하고 버려진 공공하수처리장으로 모여진 물을 용도에 맞는 처리 후 재이용 할 수 있습니다.",
image: "/images/landing/card_04.jpg",
image: card04,
href: "/reuse/intro/treated",
},
];
@@ -61,9 +66,11 @@ export default function IntroCards() {
className="group relative h-[280px] md:h-[320px] lg:h-[500px] overflow-hidden rounded-2xl cursor-pointer focus:outline-none focus:ring-2 focus:ring-sky-400/60"
>
{/* 배경 이미지 (이미 그라디언트 포함) */}
<img
<Image
src={card.image}
alt={card.title}
fill
sizes="(min-width: 1024px) 25vw, (min-width: 768px) 50vw, 100vw"
className="absolute inset-0 h-full w-full object-cover transition-transform duration-500 hover:scale-105"
/>
apps/dm_new/app/(landing)/reuse/apply/modal/CandidateSiteModal.tsx
+1 -1
View File
@@ -133,7 +133,7 @@ export default function CandidateSiteModal({
/>
{/* panel */}
<div className="relative w-[94vw] max-w-[1400px] rounded-xl bg-white shadow-xl">
<div className="relative w-[94vw] max-w-[1700px] 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>
apps/dm_new/app/(landing)/reuse/apply/modal/SimilarCaseModal.tsx
+539
View File
@@ -0,0 +1,539 @@
// apps/dm/app/(landing)/reuse/apply/modal/SimilarCaseModal.tsx (유사사례 모달)
"use client";
import { useEffect, useMemo, useState, useId } from "react";
import { createPortal } from "react-dom";
type Criterion = "" | "supplyAmt" | "treatment" | "usePurpose";
export type SimilarCaseRow = {
caseId: string;
projectName: string;
period: string;
supplyFacilityType?: string;
supplyName?: string;
supplyCapacity?: number;
demandName?: string;
demandAddress?: string;
facilityCapacity?: number;
pipeKm?: number;
purpose?: string;
// 유사기준용
supplyAmt?: number; // 공급량(m3/일)
treatment?: string; // 처리공법
usePurpose?: string; // 이용용도
};
export type SimilarCaseDetail = {
// 보증수질
coliform?: string;
residualCl?: string;
turbidity?: string;
bod?: string;
odor?: string;
color?: string;
tn?: string;
tp?: string;
ph?: string;
chloride?: string;
ec?: string;
note?: string;
// 소요사업비(백만원) - 현재 타입에 있는 항목만 매핑
costTotal?: number;
costFacility?: number;
costPipe?: number;
costDesign?: number;
costSupervision?: number;
costOther?: number;
// 재원조달계획(백만원)
fundingTotal?: number;
fundingNational?: number;
fundingLocal?: number;
fundingSelf?: number;
fundingRate?: number; // %
};
function formatNumber(v: any) {
if (v === null || v === undefined || v === "" || Number.isNaN(Number(v))) return "-";
const n = typeof v === "number" ? v : Number(String(v).replaceAll(",", ""));
if (!Number.isFinite(n)) return "-";
return n.toLocaleString("ko-KR");
}
export default function SimilarCaseModal({
open,
onClose,
rows,
detailsByCaseId,
}: {
open: boolean;
onClose: () => void;
rows: SimilarCaseRow[];
detailsByCaseId: Record<string, SimilarCaseDetail | undefined>;
}) {
const titleId = useId();
const [mounted, setMounted] = useState(false);
const [criterion, setCriterion] = useState<Criterion>("");
const [selectedCaseId, setSelectedCaseId] = useState<string>("");
useEffect(() => setMounted(true), []);
// 모달 열릴 때 초기화
useEffect(() => {
if (!open) return;
setCriterion("");
setSelectedCaseId("");
}, [open]);
// ESC 닫기 + 배경 스크롤 잠금
useEffect(() => {
if (!open) return;
const onKeyDown = (e: KeyboardEvent) => {
if (e.key === "Escape") onClose();
};
window.addEventListener("keydown", onKeyDown);
const prevOverflow = document.body.style.overflow;
document.body.style.overflow = "hidden";
return () => {
window.removeEventListener("keydown", onKeyDown);
document.body.style.overflow = prevOverflow;
};
}, [open, onClose]);
const groupInfo = useMemo(() => {
const counts = new Map<string, number>();
rows.forEach((r) => counts.set(r.caseId, (counts.get(r.caseId) ?? 0) + 1));
const firstIndex = new Map<string, number>();
rows.forEach((r, idx) => {
if (!firstIndex.has(r.caseId)) firstIndex.set(r.caseId, idx);
});
return { counts, firstIndex };
}, [rows]);
const selectedDetail = selectedCaseId ? detailsByCaseId[selectedCaseId] : undefined;
// open 타입 방어
if (typeof open !== "boolean") {
console.error("SimilarCaseModal: open prop is not boolean:", open);
return null;
}
if (!open || !mounted) return null;
const tdBase =
"border border-[#C9C9C9] px-2 py-2 text-sm text-neutral-800 align-middle";
const thBase =
"border border-[#C9C9C9] bg-[#E7F4E2] px-2 py-2 text-sm font-semibold text-neutral-800 text-center align-middle";
const highlightTd = "bg-neutral-200";
const showList = criterion !== "";
const hasRows = rows.length > 0;
const ui = (
<div className="fixed inset-0 z-[1000] flex items-center justify-center">
{/* overlay */}
<button
type="button"
className="absolute inset-0 bg-black/30"
aria-label="모달 닫기"
onClick={onClose}
/>
{/* panel */}
<div
role="dialog"
aria-modal="true"
aria-labelledby={titleId}
className="relative w-[94vw] max-w-[1700px] rounded-xl bg-white shadow-xl"
>
{/* header */}
<div className="flex items-center justify-between px-8 py-6">
<h2 id={titleId} 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 focus:outline-none focus:ring-2 focus:ring-neutral-300"
>
✕
</button>
</div>
<div className="h-px w-full bg-neutral-200" />
{/* body */}
<div className="px-8 py-6">
{/* 상단 타이틀 + 유사기준 */}
<div className="mb-4 flex items-center justify-between">
<div className="text-lg font-semibold text-neutral-900">
물 재이용 사업 유사 사례
</div>
<div className="flex items-center gap-3">
<span className="text-sm font-semibold text-neutral-800">유사기준</span>
<select
value={criterion}
onChange={(e) => {
const v = e.target.value as Criterion;
setCriterion(v);
setSelectedCaseId("");
}}
className="h-10 w-[180px] rounded-md border border-neutral-300 bg-white px-3 text-sm outline-none focus:border-neutral-500"
>
<option value="">유사기준선택</option>
<option value="supplyAmt">공급량</option>
<option value="treatment">처리공법</option>
<option value="usePurpose">이용용도</option>
</select>
</div>
</div>
{/* 리스트 영역 */}
<div className="border border-[#C9C9C9] bg-white">
{!showList ? (
<div className="grid min-h-[260px] place-items-center bg-emerald-50/30">
<div className="text-neutral-500">유사기준을 선택해주세요.</div>
</div>
) : !hasRows ? (
<div className="grid min-h-[260px] place-items-center bg-emerald-50/30">
<div className="text-neutral-500">조회 결과가 없습니다.</div>
</div>
) : (
// 여기만 스크롤: rows가 4개/더 많아져서 높이를 넘으면 자동 스크롤 생성
<div className="max-h-[300px] overflow-y-auto overflow-x-auto">
<table className="w-full border-collapse">
{/* thead sticky: bg + shadow + z-index로 겹침/투명 방지 */}
<thead className="sticky top-0 z-20 bg-[#EAF5F5] shadow-sm">
<tr>
<th rowSpan={2} className={`${thBase} bg-[#EAF5F5]`}>
선택
</th>
<th rowSpan={2} className={`${thBase} bg-[#EAF5F5]`}>
사업명
</th>
<th rowSpan={2} className={`${thBase} bg-[#EAF5F5]`}>
사업기간
</th>
<th colSpan={3} className={`${thBase} bg-[#EAF5F5]`}>
공급처
</th>
<th colSpan={2} className={`${thBase} bg-[#EAF5F5]`}>
수요처
</th>
<th colSpan={6} className={`${thBase} bg-[#EAF5F5]`}>
재이용시설
</th>
</tr>
<tr>
<th className={`${thBase} bg-[#EAF5F5]`}>시설<br/>종류</th>
<th className={`${thBase} bg-[#EAF5F5]`}>공급처명</th>
<th className={`${thBase} bg-[#EAF5F5]`}>
시설용량
<br />
(m³/일)
</th>
<th className={`${thBase} bg-[#EAF5F5]`}>수요처명</th>
<th className={`${thBase} bg-[#EAF5F5]`}>주소</th>
<th className={`${thBase} bg-[#EAF5F5]`}>
시설용량
<br />
(m³/일)
</th>
<th className={`${thBase} bg-[#EAF5F5]`}>
관로
<br />
(km)
</th>
<th className={`${thBase} bg-[#EAF5F5]`}>용도</th>
<th className={`${thBase} bg-[#EAF5F5]`}>
공급량
<br />
(m³/일)
</th>
<th className={`${thBase} bg-[#EAF5F5]`}>처리공법</th>
<th className={`${thBase} bg-[#EAF5F5]`}>이용용도</th>
</tr>
</thead>
<tbody>
{rows.map((r, idx) => {
const isFirst = groupInfo.firstIndex.get(r.caseId) === idx;
const rowSpan = groupInfo.counts.get(r.caseId) ?? 1;
const selected = selectedCaseId === r.caseId;
const supplyAmtCls = criterion === "supplyAmt" ? highlightTd : "";
const treatmentCls = criterion === "treatment" ? highlightTd : "";
const usePurposeCls = criterion === "usePurpose" ? highlightTd : "";
return (
<tr
key={`${r.caseId}-${idx}`}
className={[
"cursor-pointer hover:bg-neutral-50",
selected ? "bg-sky-50" : "",
].join(" ")}
onClick={() => setSelectedCaseId(r.caseId)}
>
{isFirst ? (
<>
<td className={`${tdBase} text-center`} rowSpan={rowSpan}>
<input
type="checkbox"
checked={selected}
readOnly
className="h-4 w-4"
/>
</td>
<td className={`${tdBase} text-center`} rowSpan={rowSpan}>
{r.projectName ?? "-"}
</td>
<td className={`${tdBase} text-center`} rowSpan={rowSpan}>
{r.period ?? "-"}
</td>
</>
) : null}
<td className={`${tdBase} text-center`}>{r.supplyFacilityType ?? "-"}</td>
<td className={`${tdBase} text-center`}>{r.supplyName ?? "-"}</td>
<td className={`${tdBase} text-center`}>{formatNumber(r.supplyCapacity)}</td>
<td className={`${tdBase} text-center`}>{r.demandName ?? "-"}</td>
<td className={`${tdBase} text-center`}>{r.demandAddress ?? "-"}</td>
<td className={`${tdBase} text-center`}>{formatNumber(r.facilityCapacity)}</td>
<td className={`${tdBase} text-center`}>{formatNumber(r.pipeKm)}</td>
<td className={tdBase}>{r.purpose ?? "-"}</td>
<td className={`${tdBase} text-center ${supplyAmtCls}`}>
{formatNumber(r.supplyAmt)}
</td>
<td className={`${tdBase} text-center ${treatmentCls}`}>
{r.treatment ?? "-"}
</td>
<td className={`${tdBase} text-center ${usePurposeCls}`}>
{r.usePurpose ?? "-"}
</td>
</tr>
);
})}
</tbody>
</table>
</div>
)}
</div>
<hr className="my-6 border-y-[1px] border-[#C9C9C9]" />
{/* 상세정보 */}
<div className="mt-0">
<div className="mb-2 text-lg font-semibold text-neutral-900">상세정보</div>
{/* 1) 보증수질 */}
<div className="overflow-hidden border border-[#C9C9C9]">
<table className="w-full border-collapse">
<thead>
<tr>
<th colSpan={13} className={thBase}>
보증수질
</th>
</tr>
<tr>
<th rowSpan={2} className={thBase}>
총대장균군수<br />(개/100ml)
</th>
<th rowSpan={2} className={thBase}>
용도별 결합 잔류염소<br />(mg/L)
</th>
<th rowSpan={2} className={thBase}>
탁도<br />(NTU)
</th>
</tr>
<tr>
<th className={thBase}>
생물학적<br />산소요구량(BOD)(mg/L)
</th>
<th className={thBase}>냄새</th>
<th className={thBase}>색도(도)</th>
<th className={thBase}>총질소<br />(T-N)(mg/L)</th>
<th className={thBase}>총인<br />(T-P)(mg/L)</th>
<th className={thBase}>수소이온<br />농도(pH)</th>
<th className={thBase}>염화물<br />(mgCL/L)</th>
<th className={thBase}>전기전도도<br />(μs/cm)</th>
<th className={thBase}>비고</th>
</tr>
</thead>
<tbody>
<tr>
<td className={`${tdBase} text-center`}>{selectedDetail?.coliform ?? "-"}</td>
<td className={`${tdBase} text-center`}>{selectedDetail?.residualCl ?? "-"}</td>
<td className={`${tdBase} text-center`}>{selectedDetail?.turbidity ?? "-"}</td>
<td className={`${tdBase} text-center`}>{selectedDetail?.bod ?? "-"}</td>
<td className={`${tdBase} text-center`}>{selectedDetail?.odor ?? "-"}</td>
<td className={`${tdBase} text-center`}>{selectedDetail?.color ?? "-"}</td>
<td className={`${tdBase} text-center`}>{selectedDetail?.tn ?? "-"}</td>
<td className={`${tdBase} text-center`}>{selectedDetail?.tp ?? "-"}</td>
<td className={`${tdBase} text-center`}>{selectedDetail?.ph ?? "-"}</td>
<td className={`${tdBase} text-center`}>{selectedDetail?.chloride ?? "-"}</td>
<td className={`${tdBase} text-center`}>{selectedDetail?.ec ?? "-"}</td>
<td className={`${tdBase} text-center`}>{selectedDetail?.note ?? "-"}</td>
</tr>
</tbody>
</table>
</div>
{/* 2) 사업비 */}
<div className="mt-4 overflow-hidden border border-[#C9C9C9]">
<table className="w-full border-collapse">
<thead>
<tr>
<th colSpan={14} className={thBase}>
소요사업비(백만원)
</th>
<th colSpan={5} className={thBase}>
재원조달계획(백만원)
</th>
<th colSpan={5} className={thBase}>
사업비 정산(백만원)
</th>
</tr>
<tr>
{/* 소요사업비 */}
<th rowSpan={2} className={thBase}>총</th>
<th colSpan={2} className={thBase}>토목</th>
<th rowSpan={2} className={thBase}>건축</th>
<th rowSpan={2} className={thBase}>기계</th>
<th rowSpan={2} className={thBase}>전기<br />·계측</th>
<th rowSpan={2} className={thBase}>GIS<br />DB</th>
<th rowSpan={2} className={thBase}>CCTV</th>
<th rowSpan={2} className={thBase}>시공 및 준공</th>
<th rowSpan={2} className={thBase}>폐기물</th>
<th rowSpan={2} className={thBase}>설계비</th>
<th rowSpan={2} className={thBase}>감리비</th>
<th rowSpan={2} className={thBase}>시설부대</th>
<th rowSpan={2} className={thBase}>기타</th>
{/* 재원조달 */}
<th rowSpan={2} className={thBase}>총</th>
<th rowSpan={2} className={thBase}>국비</th>
<th rowSpan={2} className={thBase}>지방비</th>
<th rowSpan={2} className={thBase}>원인자부담</th>
<th rowSpan={2} className={thBase}>국고비율</th>
{/* 정산 */}
<th rowSpan={2} className={thBase}>총</th>
<th rowSpan={2} className={thBase}>국비</th>
<th rowSpan={2} className={thBase}>지방비</th>
<th rowSpan={2} className={thBase}>원인자부담</th>
<th rowSpan={2} className={thBase}>국고비율</th>
</tr>
<tr>
<th className={thBase}>재이용<br />시설</th>
<th className={thBase}>관로</th>
</tr>
</thead>
<tbody>
<tr>
{/* 소요사업비 */}
<td className={`${tdBase} text-right`}>
{selectedDetail?.costTotal != null ? formatNumber(selectedDetail.costTotal) : "-"}
</td>
<td className={`${tdBase} text-right`}>
{selectedDetail?.costFacility != null ? formatNumber(selectedDetail.costFacility) : "-"}
</td>
<td className={`${tdBase} text-right`}>
{selectedDetail?.costPipe != null ? formatNumber(selectedDetail.costPipe) : "-"}
</td>
<td className={`${tdBase} text-center`}>-</td>
<td className={`${tdBase} text-center`}>-</td>
<td className={`${tdBase} text-center`}>-</td>
<td className={`${tdBase} text-center`}>-</td>
<td className={`${tdBase} text-center`}>-</td>
<td className={`${tdBase} text-center`}>-</td>
<td className={`${tdBase} text-center`}>-</td>
<td className={`${tdBase} text-right`}>
{selectedDetail?.costDesign != null ? formatNumber(selectedDetail.costDesign) : "-"}
</td>
<td className={`${tdBase} text-right`}>
{selectedDetail?.costSupervision != null ? formatNumber(selectedDetail.costSupervision) : "-"}
</td>
<td className={`${tdBase} text-center`}>-</td>
<td className={`${tdBase} text-right`}>
{selectedDetail?.costOther != null ? formatNumber(selectedDetail.costOther) : "-"}
</td>
{/* 재원조달 */}
<td className={`${tdBase} text-right`}>
{selectedDetail?.fundingTotal != null ? formatNumber(selectedDetail.fundingTotal) : "-"}
</td>
<td className={`${tdBase} text-right`}>
{selectedDetail?.fundingNational != null ? formatNumber(selectedDetail.fundingNational) : "-"}
</td>
<td className={`${tdBase} text-right`}>
{selectedDetail?.fundingLocal != null ? formatNumber(selectedDetail.fundingLocal) : "-"}
</td>
<td className={`${tdBase} text-right`}>
{selectedDetail?.fundingSelf != null ? formatNumber(selectedDetail.fundingSelf) : "-"}
</td>
<td className={`${tdBase} text-center`}>
{typeof selectedDetail?.fundingRate === "number" ? `${selectedDetail.fundingRate}%` : "-"}
</td>
{/* 정산(필드 없으면 동일 값 표시) */}
<td className={`${tdBase} text-right`}>
{selectedDetail?.fundingTotal != null ? formatNumber(selectedDetail.fundingTotal) : "-"}
</td>
<td className={`${tdBase} text-right`}>
{selectedDetail?.fundingNational != null ? formatNumber(selectedDetail.fundingNational) : "-"}
</td>
<td className={`${tdBase} text-right`}>
{selectedDetail?.fundingLocal != null ? formatNumber(selectedDetail.fundingLocal) : "-"}
</td>
<td className={`${tdBase} text-right`}>
{selectedDetail?.fundingSelf != null ? formatNumber(selectedDetail.fundingSelf) : "-"}
</td>
<td className={`${tdBase} text-center`}>
{typeof selectedDetail?.fundingRate === "number" ? `${selectedDetail.fundingRate}%` : "-"}
</td>
</tr>
</tbody>
</table>
</div>
{!selectedCaseId && showList ? (
<div className="mt-3 text-sm text-neutral-500">
리스트에서 사업을 선택하면 상세정보가 표시됩니다.
</div>
) : null}
</div>
</div>
</div>
</div>
);
return createPortal(ui, document.body);
}
apps/dm_new/app/(landing)/reuse/apply/register/page.tsx
+394 -69
View File
@@ -1,10 +1,11 @@
// apps/dm/app/(landing)/reuse/apply/register/page.tsx
// apps/dm/app/(landing)/reuse/apply/register/page.tsx (수요정보등록 페이지)
"use client";
import { useMemo, useState, useRef } from "react";
import SubPageHeader from "../../_components/SubPageHeader";
import WaterQualityRefModal from "../modal/WaterQualityRefModal";
import CandidateSiteModal, { type CandidateSite } from "../modal/CandidateSiteModal";
import SimilarCaseModal, { type SimilarCaseRow, type SimilarCaseDetail } from "../modal/SimilarCaseModal";
type PHRange = { min: string; max: string };
@@ -22,6 +23,141 @@ export default function DemandRegisterPage() {
const [openCand, setOpenCand] = useState(false);
const [selectedCands, setSelectedCands] = useState<CandidateSite[]>([]);
// 유사사례 모달
const [openSimilar, setOpenSimilar] = useState(false);
// 유사사례 rows (목업) - API 연동 시 여기만 교체
// const rows: SimilarCaseRow[] = useMemo(
// () => [
// {
// caseId: "C-001",
// projectName: "OO시 물 재이용(빗물, 중수도) 시설 설치사업",
// period: "2020.01. ~ 2025.05.",
// supplyFacilityType: "중수도",
// supplyName: "OO새교복지타운",
// supplyCapacity: 0,
// demandName: "OO새교복지타운",
// demandAddress: "OO시 수청로 192",
// facilityCapacity: 50,
// pipeKm: 0,
// purpose: "청소, 화장실, 조경",
// supplyAmt: 50,
// treatment: "MBLM",
// usePurpose: "청소,화장실",
// },
// {
// caseId: "C-001",
// projectName: "OO시 물 재이용(빗물, 중수도) 시설 설치사업",
// period: "2020.01. ~ 2025.05.",
// supplyFacilityType: "중수도",
// supplyName: "OO스포츠센터",
// supplyCapacity: 0,
// demandName: "OO스포츠센터",
// demandAddress: "OO시 경기동로 33",
// facilityCapacity: 50,
// pipeKm: 0,
// purpose: "청소, 화장실, 조경",
// supplyAmt: 50,
// treatment: "MBLM",
// usePurpose: "청소,화장실",
// },
// {
// caseId: "C-002",
// projectName: "OO 엄성저수지 하수처리수 재이용사업",
// period: "2019.12 ~ 2026.01",
// supplyFacilityType: "하수",
// supplyName: "OO 3,4단계 공공하수처리시설",
// supplyCapacity: 70000,
// demandName: "OO천",
// demandAddress: "-",
// facilityCapacity: 0,
// pipeKm: 3,
// purpose: "하천 등 유지용수",
// supplyAmt: 2300,
// treatment: "탈황,총인, 생물산화과,소독",
// usePurpose: "하천 등 유지용수",
// },
// {
// caseId: "C-002",
// projectName: "OO 엄성저수지 하수처리수 재이용사업",
// period: "2019.12 ~ 2026.01",
// supplyFacilityType: "하수",
// supplyName: "OO 3,4단계 공공하수처리시설",
// supplyCapacity: 70000,
// demandName: "OO저수지",
// demandAddress: "-",
// facilityCapacity: 0,
// pipeKm: 5,
// purpose: "하천 등 유지용수",
// supplyAmt: 7700,
// treatment: "탈황,총인, 생물산화과,소독",
// usePurpose: "하천 등 유지용수",
// },
// ],
// []
// );
// 유사사례 상세(목업) - caseId로 매핑
// const detailsByCaseId: Record<string, SimilarCaseDetail> = useMemo(
// () => ({
// "C-001": {
// coliform: "불검출",
// residualCl: "0.2이상",
// turbidity: "1.5이하",
// bod: "4.0이하",
// odor: "불쾌하지않을것",
// color: "10이하",
// tn: "-",
// tp: "-",
// ph: "5.8~8.5",
// chloride: "-",
// ec: "-",
// note: "-",
// costTotal: 4305,
// costFacility: 3518,
// costPipe: undefined,
// costDesign: 350,
// costSupervision: 417,
// costOther: 12,
// fundingTotal: 4305,
// fundingNational: 3104,
// fundingLocal: 1291,
// fundingSelf: undefined,
// fundingRate: 70.0,
// },
// "C-002": {
// coliform: "불검출",
// residualCl: "0.15이상",
// turbidity: "2.0이하",
// bod: "5.0이하",
// odor: "무",
// color: "10이하",
// tn: "-",
// tp: "-",
// ph: "6.0~8.5",
// chloride: "-",
// ec: "-",
// note: "-",
// costTotal: 9800,
// costFacility: 2100,
// costPipe: 1800,
// costDesign: 300,
// costSupervision: 280,
// costOther: 1200,
// fundingTotal: 9800,
// fundingNational: 4900,
// fundingLocal: 3000,
// fundingSelf: 1900,
// fundingRate: 50,
// },
// }),
// []
// );
// 기본정보
const [reqDate, setReqDate] = useState<string>(today);
const [reqQty, setReqQty] = useState<string>("");
@@ -49,12 +185,233 @@ export default function DemandRegisterPage() {
const [cand2, setCand2] = useState("");
const [cand3, setCand3] = useState("");
// 샘플 데이터
const similarRows: SimilarCaseRow[] = [
// ---------------- A (2행) ----------------
{
caseId: "A",
projectName: "OO시 물 재이용(빗물, 중수도) 시설 설치사업",
period: "2020.01.~2025.05.",
supplyFacilityType: "중수도",
supplyName: "OO폐수재이용",
supplyCapacity: 50,
demandName: "OO시체육센터",
demandAddress: "OO시 수성로 192",
facilityCapacity: 50,
pipeKm: 3,
purpose: "조경",
supplyAmt: 50,
treatment: "MBLM",
usePurpose: "청소, 화장실",
},
// A의 공급처 row 추가(=표 1행 추가) → 나머지 컬럼도 같이 채움
{
caseId: "A",
projectName: "OO시 물 재이용(빗물, 중수도) 시설 설치사업",
period: "2020.01.~2025.05.",
supplyFacilityType: "중수도",
supplyName: "OO스포츠센터",
supplyCapacity: 30,
demandName: "OO시체육센터",
demandAddress: "OO시 수성로 192",
facilityCapacity: 50,
pipeKm: 3,
purpose: "조경",
supplyAmt: 50,
treatment: "MBLM",
usePurpose: "청소, 화장실",
},
// ---------------- B (2행) ----------------
{
caseId: "B",
projectName: "OO 염성저수지 하수처리수 재이용사업",
period: "2019.12~2026.1",
supplyFacilityType: "하수",
supplyName: "OO3.4단계 공공하수처리시설",
supplyCapacity: 70000,
demandName: "OO천",
demandAddress: "-",
facilityCapacity: 0,
pipeKm: 3,
purpose: "하천 등 유지용수",
supplyAmt: 2300,
treatment: "탈황, 총인, 생물산화, 소독",
usePurpose: "하천 등 유지용수",
},
// B의 공급처 row 추가(=표 1행 추가)
{
caseId: "B",
projectName: "OO 염성저수지 하수처리수 재이용사업",
period: "2019.12~2026.1",
supplyFacilityType: "하수",
supplyName: "OO3.4단계 공공하수처리시설(2라인)",
supplyCapacity: 70000,
demandName: "OO저수지",
demandAddress: "-",
facilityCapacity: 0,
pipeKm: 5,
purpose: "하천 등 유지용수",
supplyAmt: 7700,
treatment: "탈황, 총인, 생물산화, 소독",
usePurpose: "하천 등 유지용수",
},
// ---------------- C (1행) ----------------
{
caseId: "C",
projectName: "OO 산업단지 공업용수 재이용사업",
period: "2021.03~2024.12",
supplyFacilityType: "하수",
supplyName: "OO공공하수처리장",
supplyCapacity: 15000,
demandName: "OO산업단지",
demandAddress: "OO시 산업로 25",
facilityCapacity: 5000,
pipeKm: 4,
purpose: "공업용수",
supplyAmt: 5000,
treatment: "UF + RO",
usePurpose: "공업용수",
},
// ---------------- D (1행) ----------------
{
caseId: "D",
projectName: "OO 공원 조경용수 재이용사업",
period: "2018.05~2022.11",
supplyFacilityType: "중수도",
supplyName: "OO정수장",
supplyCapacity: 8000,
demandName: "OO중앙공원",
demandAddress: "OO시 공원로 88",
facilityCapacity: 1200,
pipeKm: 2,
purpose: "조경용수",
supplyAmt: 1200,
treatment: "모래여과",
usePurpose: "조경",
},
];
const similarDetailsByCaseId: Record<string, SimilarCaseDetail> = {
A: {
coliform: "불검출",
residualCl: "0.2이상",
turbidity: "1.5이하",
bod: "4.0이하",
odor: "불쾌하지않을것",
color: "10이하",
tn: "-",
tp: "-",
ph: "5.8~8.5",
chloride: "-",
ec: "-",
note: "-",
costTotal: 4305,
costFacility: 3518,
costPipe: 0,
costDesign: 350,
costSupervision: 417,
costOther: 12,
fundingTotal: 4305,
fundingNational: 3104,
fundingLocal: 1291,
fundingSelf: 0,
fundingRate: 70.0,
},
B: {
coliform: "-",
residualCl: "-",
turbidity: "-",
bod: "-",
odor: "-",
color: "-",
tn: "-",
tp: "-",
ph: "-",
chloride: "-",
ec: "-",
note: "-",
costTotal: 0,
costFacility: 0,
costPipe: 0,
costDesign: 0,
costSupervision: 0,
costOther: 0,
fundingTotal: 0,
fundingNational: 0,
fundingLocal: 0,
fundingSelf: 0,
fundingRate: 0,
},
C: {
coliform: "불검출",
residualCl: "0.2이상",
turbidity: "1.5이하",
bod: "4.0이하",
odor: "불쾌하지않을것",
color: "10이하",
tn: "-",
tp: "-",
ph: "5.8~8.5",
chloride: "-",
ec: "-",
note: "-",
costTotal: 4305,
costFacility: 3518,
costPipe: 0,
costDesign: 350,
costSupervision: 417,
costOther: 12,
fundingTotal: 4305,
fundingNational: 3104,
fundingLocal: 1291,
fundingSelf: 0,
fundingRate: 70.0,
},
D: {
coliform: "-",
residualCl: "-",
turbidity: "-",
bod: "-",
odor: "-",
color: "-",
tn: "-",
tp: "-",
ph: "-",
chloride: "-",
ec: "-",
note: "-",
costTotal: 0,
costFacility: 0,
costPipe: 0,
costDesign: 0,
costSupervision: 0,
costOther: 0,
fundingTotal: 0,
fundingNational: 0,
fundingLocal: 0,
fundingSelf: 0,
fundingRate: 0,
},
};
return (
<>
<main className="bg-white">
{/* 서브 타이틀 + 브레드크럼 */}
<SubPageHeader
title="수요정보등록"
crumbs={[
@@ -64,27 +421,21 @@ export default function DemandRegisterPage() {
]}
/>
{/* 컨텐츠 영역 */}
<div>
{/* 기본정보 테이블 */}
<div className="border border-neutral-200 bg-white">
<FormRow label="요구시기" required>
<DateInput value={reqDate} onChange={setReqDate} />
</FormRow>
<Divider />
<FormRow label="요구수량(m²/d)" required>
<TextInput value={reqQty} onChange={setReqQty} placeholder="" />
<TextInput value={reqQty} onChange={setReqQty} />
</FormRow>
<Divider />
<FormRow label="사용용도" required>
<TextInput value={usePurpose} onChange={setUsePurpose} />
</FormRow>
<Divider />
<FormRow label="희망단가(원)" required>
@@ -92,9 +443,8 @@ export default function DemandRegisterPage() {
</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">
<div className="col-span-12 lg:col-span-2 inline-flex items-center justify-center gap-3 px-6 py-6 text-center">
<span className="text-lg font-semibold text-neutral-800">요구수질</span>
<button
type="button"
@@ -103,7 +453,7 @@ export default function DemandRegisterPage() {
>
수질기준 참고
</button>
{/* 수질기준참고 모달 */}
<WaterQualityRefModal
open={openRef}
onClose={() => setOpenRef(false)}
@@ -112,9 +462,7 @@ export default function DemandRegisterPage() {
</div>
</div>
{/* 요구수질 테이블 */}
<div className="border border-neutral-200 bg-white">
{/* 1행 */}
<QualityRow
leftLabel="총대장균군수(개/mg)"
leftRequired
@@ -141,51 +489,34 @@ export default function DemandRegisterPage() {
</div>
}
rightLabel="총질소(T-N)(mg/L)"
rightControl={
<InlineSuffixInput value={tn} onChange={setTn} suffix="이하" />
}
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="이하" />
}
rightControl={<InlineSuffixInput value={tp} onChange={setTp} suffix="이하" />}
/>
<Divider />
{/* 3행 */}
<QualityRow
leftLabel="탁도(NTU)"
leftRequired
leftControl={
<InlineSuffixInput value={turbidity} onChange={setTurbidity} suffix="이하" />
}
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"
/>
<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"
/>
<TextInput value={ph.max} onChange={(v) => setPh((p) => ({ ...p, max: v }))} className="w-32" />
</div>
}
/>
<Divider />
{/* 4행 */}
<QualityRow
leftLabel={
<>
@@ -201,7 +532,6 @@ export default function DemandRegisterPage() {
/>
<Divider />
{/* 5행 */}
<QualityRow
leftLabel="냄새"
leftRequired
@@ -221,7 +551,6 @@ export default function DemandRegisterPage() {
/>
<Divider />
{/* 6행 */}
<QualityRow
leftLabel="색도(도)"
leftRequired
@@ -237,7 +566,6 @@ export default function DemandRegisterPage() {
/>
<Divider />
{/* 후보지 선택 */}
<div className="grid grid-cols-12">
<LabelCell>
공급처 후보지 선택
@@ -259,15 +587,13 @@ export default function DemandRegisterPage() {
>
후보지 조회
</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("유사사례");
}}
className="h-11 rounded-md bg-[#888] px-5 text-base text-white hover:bg-neutral-700"
onClick={() => setOpenSimilar(true)}
>
유사사례
유사사례 조회
</button>
</div>
</div>
@@ -275,38 +601,39 @@ export default function DemandRegisterPage() {
</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("수요정보 등록");
}}
onClick={() => console.log("수요정보 등록")}
>
수요정보 등록
</button>
</div>
</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);
}}
/>
{/* 유사사례 모달 */}
<SimilarCaseModal
open={openSimilar}
onClose={() => setOpenSimilar(false)}
rows={similarRows}
detailsByCaseId={similarDetailsByCaseId}
/>
</>
);
}
@@ -325,7 +652,7 @@ function LabelCell({
required?: boolean;
}) {
return (
<div className="col-span-12 md:col-span-2 flex items-center justify-center text-center bg-emerald-50/70 px-6 py-6 text-lg font-semibold text-neutral-800">
<div className="col-span-12 md:col-span-2 flex items-center justify-center bg-emerald-50/70 px-6 py-6 text-center text-lg font-semibold text-neutral-800">
<span className="inline-flex items-center gap-1">
{children}
{required ? <span className="text-red-500">*</span> : null}
@@ -366,23 +693,19 @@ function QualityRow({
}) {
return (
<div className="grid grid-cols-12">
{/* 좌측 라벨 */}
<div className="col-span-12 lg:col-span-2 flex items-center justify-center text-center bg-emerald-50/70 px-6 py-6 text-lg font-semibold text-neutral-800">
<div className="col-span-12 lg:col-span-2 flex items-center justify-center bg-emerald-50/70 px-6 py-6 text-center text-lg font-semibold text-neutral-800">
<span className="inline-flex items-center gap-1">
<span className="leading-6">{leftLabel}</span>
{leftRequired ? <span className="text-red-500">*</span> : null}
</span>
</div>
{/* 좌측 입력 */}
<div className="col-span-12 lg:col-span-4 p-6">{leftControl}</div>
{/* 우측 라벨 */}
<div className="col-span-12 lg:col-span-2 flex items-center justify-center text-center bg-emerald-50/70 px-6 py-6 text-lg font-semibold text-neutral-800">
<div className="col-span-12 lg:col-span-2 flex items-center justify-center bg-emerald-50/70 px-6 py-6 text-center text-lg font-semibold text-neutral-800">
<span className="leading-6">{rightLabel}</span>
</div>
{/* 우측 입력 */}
<div className="col-span-12 lg:col-span-4 p-6">{rightControl}</div>
</div>
);
@@ -441,23 +764,21 @@ function DateInput({
value: string;
onChange: (v: string) => void;
}) {
const ref = useRef<HTMLInputElement | null>(null);
const openPicker = () => {
const el = ref.current;
if (!el) return;
// Chrome/Edge 등 지원
if (typeof (el as any).showPicker === "function") {
(el as any).showPicker();
return;
}
// fallback (일부 브라우저)
el.focus();
el.click();
};
return (
<div className="relative w-full max-w-[200px]">
<input
@@ -467,7 +788,6 @@ function DateInput({
onChange={(e) => onChange(e.target.value)}
className={[
"h-11 w-full rounded-md border border-neutral-300 bg-white px-3 pr-10 text-sm outline-none focus:border-neutral-500",
// ✅ 기본 달력 아이콘 숨김 (Tailwind arbitrary selector)
"[&::-webkit-calendar-picker-indicator]:opacity-0",
"[&::-webkit-calendar-picker-indicator]:absolute",
"[&::-webkit-calendar-picker-indicator]:right-0",
@@ -477,7 +797,6 @@ function DateInput({
].join(" ")}
/>
{/* ✅ 클릭 가능한 아이콘 버튼 */}
<button
type="button"
onClick={openPicker}
@@ -485,7 +804,13 @@ function DateInput({
aria-label="달력 열기"
>
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path d="M7.14286 7.99104H16.7812M6.48512 2.5625V4.19126M17.3125 2.5625V4.19106M20.5 7.19106L20.5 18.5625C20.5 20.2194 19.1569 21.5625 17.5 21.5625H6.5C4.84315 21.5625 3.5 20.2194 3.5 18.5625V7.19106C3.5 5.53421 4.84315 4.19106 6.5 4.19106H17.5C19.1569 4.19106 20.5 5.53421 20.5 7.19106Z" stroke="#1A1A1A" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
<path
d="M7.14286 7.99104H16.7812M6.48512 2.5625V4.19126M17.3125 2.5625V4.19106M20.5 7.19106L20.5 18.5625C20.5 20.2194 19.1569 21.5625 17.5 21.5625H6.5C4.84315 21.5625 3.5 20.2194 3.5 18.5625V7.19106C3.5 5.53421 4.84315 4.19106 6.5 4.19106H17.5C19.1569 4.19106 20.5 5.53421 20.5 7.19106Z"
stroke="#1A1A1A"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</button>
</div>
apps/dm_new/app/(landing)/reuse/apply/status/page.tsx
+23 -1
View File
@@ -227,7 +227,7 @@ export default function DemandStatusPage() {
return (
<tr
key={r.id}
role="button"
role="row"
tabIndex={0}
onClick={() => onSelectRow(r.id)}
onKeyDown={(e) => {
@@ -337,6 +337,28 @@ export default function DemandStatusPage() {
</div>
</div>
))}
{/* 수요신청 진행상태 */}
<div className="col-span-12 bg-sky-50 px-4 py-3 text-sm font-semibold text-slate-700 border-t border-b border-neutral-200">
수요신청 진행상태
</div>
<div className="col-span-12 md:col-span-4 grid grid-cols-12 border-b md:border-b-0 border-neutral-200">
<div className="col-span-5 bg-sky-50 px-3 py-4 flex items-center justify-center text-center font-semibold text-slate-700">
진행상태
</div>
<div className="col-span-7 px-3 py-4 flex items-center justify-center text-center">
{selected.status}
</div>
</div>
<div className="col-span-12 md:col-span-4 grid grid-cols-12 border-b md:border-b-0 border-neutral-200">
<div className="col-span-5 bg-sky-50 px-3 py-4 flex items-center justify-center text-center font-semibold text-slate-700">
공급처매칭결과
</div>
<div className="col-span-7 px-3 py-4 flex items-center justify-center text-center">
</div>
</div>
</div>
</div>
)}
apps/dm_new/app/(landing)/reuse/cases/greywater/page.tsx
+12 -6
View File
@@ -1,7 +1,12 @@
// apps/dm/app/(landing)/reuse/cases/greywater/page.tsx
"use client";
import Image, { type StaticImageData } from "next/image";
import SubPageHeader from "../../_components/SubPageHeader";
import greywaterOverall from "@/public/images/landing/cases/greywater_overall.png";
import greywaterFactory from "@/public/images/landing/cases/greywater_factory.png";
import greywaterBuilding from "@/public/images/landing/cases/greywater_building.png";
import greywaterUsage from "@/public/images/landing/cases/greywater_usage.png";
function SectionTitle({ children }: { children: React.ReactNode }) {
return (
@@ -21,17 +26,18 @@ function Hr({ className = "" }: HrProps) {
}
type ImgCardProps = {
src: string;
src: StaticImageData;
alt: string;
};
function ImgCard({ src, alt }: ImgCardProps) {
return (
<div className="w-full overflow-x-auto">
<img
<Image
src={src}
alt={alt}
className="block mx-auto max-w-none"
style={{ width: "auto", height: "auto" }}
/>
</div>
);
@@ -58,7 +64,7 @@ export default function GreywaterPage() {
<section className="mt-6">
<SectionTitle>전체 중수도 설치 및 이용 현황 (공장 및 발전시설 제외)</SectionTitle>
<div className="mt-8">
<ImgCard src="/images/landing/cases/greywater_overall.png" alt="전체 중수도 설치 및 이용 현황 설명" />
<ImgCard src={greywaterOverall} alt="전체 중수도 설치 및 이용 현황 설명" />
</div>
</section>
@@ -68,7 +74,7 @@ export default function GreywaterPage() {
<section>
<SectionTitle>공장 및 발전시설 내 중수도 설치 및 이용 현황</SectionTitle>
<div className="mt-8">
<ImgCard src="/images/landing/cases/greywater_factory.png" alt="공장 및 발전시설 내 중수도 설치 및 이용 현황 설명" />
<ImgCard src={greywaterFactory} alt="공장 및 발전시설 내 중수도 설치 및 이용 현황 설명" />
</div>
</section>
@@ -78,7 +84,7 @@ export default function GreywaterPage() {
<section className="pb-16">
<SectionTitle>중수도 건축물별 이용량 현황</SectionTitle>
<div className="mt-8">
<ImgCard src="/images/landing/cases/greywater_building.png" alt="중수도 건축물별 이용량 현황 설명" />
<ImgCard src={greywaterBuilding} alt="중수도 건축물별 이용량 현황 설명" />
</div>
</section>
@@ -88,7 +94,7 @@ export default function GreywaterPage() {
<section className="pb-[200px]">
<SectionTitle>중수도 용도별 이용량 현황</SectionTitle>
<div className="mt-8">
<ImgCard src="/images/landing/cases/greywater_usage.png" alt="중수도 용도별 이용량 현황 설명" />
<ImgCard src={greywaterUsage} alt="중수도 용도별 이용량 현황 설명" />
</div>
</section>
</div>
apps/dm_new/app/(landing)/reuse/cases/rain/page.tsx
+10 -5
View File
@@ -1,7 +1,11 @@
// apps/dm/app/(landing)/reuse/cases/rain/page.tsx
"use client";
import Image, { type StaticImageData } from "next/image";
import SubPageHeader from "../../_components/SubPageHeader";
import rainwaterBuilding from "@/public/images/landing/cases/rainwater_building.png";
import rainwaterUsage from "@/public/images/landing/cases/rainwater_usage.png";
import rainwaterUsageAmount from "@/public/images/landing/cases/rainwater_usage_amount.png";
function SectionTitle({ children }: { children: React.ReactNode }) {
return (
@@ -21,17 +25,18 @@ function Hr({ className = "" }: HrProps) {
}
type ImgCardProps = {
src: string;
src: StaticImageData;
alt: string;
};
function ImgCard({ src, alt }: ImgCardProps) {
return (
<div className="w-full overflow-x-auto">
<img
<Image
src={src}
alt={alt}
className="block mx-auto max-w-none"
style={{ width: "auto", height: "auto" }}
/>
</div>
);
@@ -58,7 +63,7 @@ export default function GreywaterPage() {
<section className="mt-6">
<SectionTitle>빗물이용시설의 건축물별 빗물이용량 현황</SectionTitle>
<div className="mt-8">
<ImgCard src="/images/landing/cases/rainwater_building.png" alt="빗물이용시설의 건축물별 빗물이용량 현황 설명" />
<ImgCard src={rainwaterBuilding} alt="빗물이용시설의 건축물별 빗물이용량 현황 설명" />
</div>
</section>
@@ -68,7 +73,7 @@ export default function GreywaterPage() {
<section>
<SectionTitle>빗물이용시설의 용도별 분포 (2023년 기준)</SectionTitle>
<div className="mt-8">
<ImgCard src="/images/landing/cases/rainwater_usage.png" alt="빗물이용시설의 용도별 분포 설명" />
<ImgCard src={rainwaterUsage} alt="빗물이용시설의 용도별 분포 설명" />
</div>
</section>
@@ -78,7 +83,7 @@ export default function GreywaterPage() {
<section className="pb-[200px]">
<SectionTitle>빗물이용시설의 용도별 빗물이용량 현황</SectionTitle>
<div className="mt-8">
<ImgCard src="/images/landing/cases/rainwater_usage_amount.png" alt="빗물이용시설의 용도별 빗물이용량 현황 설명" />
<ImgCard src={rainwaterUsageAmount} alt="빗물이용시설의 용도별 빗물이용량 현황 설명" />
</div>
</section>
</div>
apps/dm_new/app/(landing)/reuse/cases/treated/page.tsx
+12 -6
View File
@@ -1,7 +1,12 @@
// apps/dm/app/(landing)/reuse/cases/treated/page.tsx
"use client";
import Image, { type StaticImageData } from "next/image";
import SubPageHeader from "../../_components/SubPageHeader";
import treatedWaterYear from "@/public/images/landing/cases/treated_water_year.png";
import treatedWaterUsage from "@/public/images/landing/cases/treated_water_usage.png";
import treatedWaterFacility from "@/public/images/landing/cases/treated_water_facility.png";
import treatedWaterRegion from "@/public/images/landing/cases/treated_water_region.png";
function SectionTitle({ children }: { children: React.ReactNode }) {
return (
@@ -21,17 +26,18 @@ function Hr({ className = "" }: HrProps) {
}
type ImgCardProps = {
src: string;
src: StaticImageData;
alt: string;
};
function ImgCard({ src, alt }: ImgCardProps) {
return (
<div className="w-full overflow-x-auto">
<img
<Image
src={src}
alt={alt}
className="block mx-auto max-w-none"
style={{ width: "auto", height: "auto" }}
/>
</div>
);
@@ -58,7 +64,7 @@ export default function GreywaterPage() {
<section className="mt-6">
<SectionTitle>연도별 하수처리수 재이용 현황</SectionTitle>
<div className="mt-8">
<ImgCard src="/images/landing/cases/treated_water_year.png" alt="연도별 하수처리수 재이용 현황 설명" />
<ImgCard src={treatedWaterYear} alt="연도별 하수처리수 재이용 현황 설명" />
</div>
</section>
@@ -68,7 +74,7 @@ export default function GreywaterPage() {
<section>
<SectionTitle>용도별 하수처리수 재이용 현황</SectionTitle>
<div className="mt-8">
<ImgCard src="/images/landing/cases/treated_water_usage.png" alt="용도별 하수처리수 재이용 현황 설명" />
<ImgCard src={treatedWaterUsage} alt="용도별 하수처리수 재이용 현황 설명" />
</div>
</section>
@@ -78,7 +84,7 @@ export default function GreywaterPage() {
<section>
<SectionTitle>하수처리시설 설치 및 이용 현황</SectionTitle>
<div className="mt-8">
<ImgCard src="/images/landing/cases/treated_water_facility.png" alt="하수처리시설 설치 및 이용 현황 설명" />
<ImgCard src={treatedWaterFacility} alt="하수처리시설 설치 및 이용 현황 설명" />
</div>
</section>
@@ -88,7 +94,7 @@ export default function GreywaterPage() {
<section className="pb-[200px]">
<SectionTitle>시도별 하수처리수 재이용 현황</SectionTitle>
<div className="mt-8">
<ImgCard src="/images/landing/cases/treated_water_region.png" alt="시도별 하수처리수 재이용 현황 설명" />
<ImgCard src={treatedWaterRegion} alt="시도별 하수처리수 재이용 현황 설명" />
</div>
</section>
</div>
apps/dm_new/app/(landing)/reuse/intro/greywater/page.tsx
+10 -5
View File
@@ -1,7 +1,11 @@
// apps/dm/app/(landing)/reuse/intro/greywater/page.tsx
"use client";
import Image, { type StaticImageData } from "next/image";
import SubPageHeader from "../../_components/SubPageHeader";
import greywaterIntro from "@/public/images/landing/intro/greywater_intro.png";
import greywaterMandatory from "@/public/images/landing/intro/greywater_mandatory.png";
import greywaterStandard from "@/public/images/landing/intro/greywater_standard.png";
function SectionTitle({ children }: { children: React.ReactNode }) {
return (
@@ -21,17 +25,18 @@ function Hr({ className = "" }: HrProps) {
}
type ImgCardProps = {
src: string;
src: StaticImageData;
alt: string;
};
function ImgCard({ src, alt }: ImgCardProps) {
return (
<div className="w-full overflow-x-auto">
<img
<Image
src={src}
alt={alt}
className="block mx-auto max-w-none"
style={{ width: "auto", height: "auto" }}
/>
</div>
);
@@ -58,7 +63,7 @@ export default function GreywaterPage() {
<section className="mt-6">
<SectionTitle>중수 재이용 소개</SectionTitle>
<div className="mt-8">
<ImgCard src="/images/landing/intro/greywater_intro.png" alt="중수 재이용 소개" />
<ImgCard src={greywaterIntro} alt="중수 재이용 소개" />
</div>
</section>
@@ -68,7 +73,7 @@ export default function GreywaterPage() {
<section>
<SectionTitle>중수도 설치 의무 대상</SectionTitle>
<div className="mt-8">
<ImgCard src="/images/landing/intro/greywater_mandatory.png" alt="중수도 설치 의무 대상 설명" />
<ImgCard src={greywaterMandatory} alt="중수도 설치 의무 대상 설명" />
</div>
</section>
@@ -78,7 +83,7 @@ export default function GreywaterPage() {
<section className="pb-[200px]">
<SectionTitle>중수도 시설기준 및 관리기준</SectionTitle>
<div className="mt-8">
<ImgCard src="/images/landing/intro/greywater_standard.png" alt="중수도 시설기준 및 관리기준 설명" />
<ImgCard src={greywaterStandard} alt="중수도 시설기준 및 관리기준 설명" />
</div>
</section>
</div>
apps/dm_new/app/(landing)/reuse/intro/law/page.tsx
+16 -8
View File
@@ -1,7 +1,14 @@
// apps/dm/app/(landing)/reuse/intro/law/page.tsx
"use client";
import Image, { type StaticImageData } from "next/image";
import SubPageHeader from "../../_components/SubPageHeader";
import lawTimeline from "@/public/images/landing/intro/law_timeline.png";
import performanceLeft from "@/public/images/landing/intro/performance_left.png";
import domesticTextbox from "@/public/images/landing/intro/domestic_textbox.png";
import policyTimeline from "@/public/images/landing/intro/policy_timeline.png";
import relNote from "@/public/images/landing/intro/rel_note.png";
import linkage from "@/public/images/landing/intro/linkage.png";
function SectionTitle({ children }: { children: React.ReactNode }) {
return (
@@ -21,17 +28,18 @@ function Hr({ className = "" }: HrProps) {
}
type ImgCardProps = {
src: string;
src: StaticImageData;
alt: string;
};
function ImgCard({ src, alt }: ImgCardProps) {
return (
<div className="w-full overflow-x-auto">
<img
<Image
src={src}
alt={alt}
className="block mx-auto max-w-none"
style={{ width: "auto", height: "auto" }}
/>
</div>
);
@@ -58,7 +66,7 @@ export default function WaterReuseLawPage() {
<section className="mt-6">
<SectionTitle>법제도 · 계획 및 기본계획 수립</SectionTitle>
<div className="mt-8">
<ImgCard src="/images/landing/intro/law_timeline.png" alt="법제도 타임라인" />
<ImgCard src={lawTimeline} alt="법제도 타임라인" />
</div>
</section>
@@ -68,7 +76,7 @@ export default function WaterReuseLawPage() {
<section>
<SectionTitle>제 2차 계획 대비 실적 현황</SectionTitle>
<div className="mt-8">
<ImgCard src="/images/landing/intro/performance_left.png" alt="실적 현황 요약" />
<ImgCard src={performanceLeft} alt="실적 현황 요약" />
</div>
</section>
@@ -78,7 +86,7 @@ export default function WaterReuseLawPage() {
<section>
<SectionTitle>국내 관련 현황</SectionTitle>
<div className="mt-8">
<ImgCard src="/images/landing/intro/domestic_textbox.png" alt="국내 관련 현황 설명" />
<ImgCard src={domesticTextbox} alt="국내 관련 현황 설명" />
</div>
</section>
@@ -88,7 +96,7 @@ export default function WaterReuseLawPage() {
<section>
<SectionTitle>물 재이용 정책 변천 추이</SectionTitle>
<div className="mt-8">
<ImgCard src="/images/landing/intro/policy_timeline.png" alt="정책 변천 타임라인" />
<ImgCard src={policyTimeline} alt="정책 변천 타임라인" />
</div>
</section>
@@ -98,7 +106,7 @@ export default function WaterReuseLawPage() {
<section>
<SectionTitle>타법령과의 관계도</SectionTitle>
<div className="mt-8">
<ImgCard src="/images/landing/intro/rel_note.png" alt="관계도 설명" />
<ImgCard src={relNote} alt="관계도 설명" />
</div>
</section>
@@ -114,7 +122,7 @@ export default function WaterReuseLawPage() {
• 물관리 계획(국가수도기본계획, 국가 및 유역하수도종합계획, 하천유역수자원관리계획 등)과의 연계성 확보 → 통합적인 관점에서 물이용 체계 구축 필요
</p>
</div>
<ImgCard src="/images/landing/intro/linkage.png" alt="국내 연계 현황" />
<ImgCard src={linkage} alt="국내 연계 현황" />
</div>
</section>
</div>
apps/dm_new/app/(landing)/reuse/intro/rain/page.tsx
+12 -6
View File
@@ -1,7 +1,12 @@
// apps/dm/app/(landing)/reuse/intro/law/page.tsx
"use client";
import Image, { type StaticImageData } from "next/image";
import SubPageHeader from "../../_components/SubPageHeader";
import rainreuseIntro from "@/public/images/landing/intro/rainreuse_intro.png";
import rainreuseMandatory from "@/public/images/landing/intro/rainreuse_mandatory.png";
import rainwaterDesign from "@/public/images/landing/intro/rainwater_design.png";
import rainwaterStandards from "@/public/images/landing/intro/rainwater_standards.png";
function SectionTitle({ children }: { children: React.ReactNode }) {
return (
@@ -21,17 +26,18 @@ function Hr({ className = "" }: HrProps) {
}
type ImgCardProps = {
src: string;
src: StaticImageData;
alt: string;
};
function ImgCard({ src, alt }: ImgCardProps) {
return (
<div className="w-full overflow-x-auto">
<img
<Image
src={src}
alt={alt}
className="block mx-auto max-w-none"
style={{ width: "auto", height: "auto" }}
/>
</div>
);
@@ -58,7 +64,7 @@ export default function RainwaterReusePage() {
<section className="mt-6">
<SectionTitle>빗물 재이용 소개</SectionTitle>
<div className="mt-8">
<ImgCard src="/images/landing/intro/rainreuse_intro.png" alt="빗물 재이용 소개" />
<ImgCard src={rainreuseIntro} alt="빗물 재이용 소개" />
</div>
</section>
@@ -68,7 +74,7 @@ export default function RainwaterReusePage() {
<section className="mt-6">
<SectionTitle>빗물이용시설 설치 관리 법적 의무 대상</SectionTitle>
<div className="mt-8">
<ImgCard src="/images/landing/intro/rainreuse_mandatory.png" alt="법적 의무 대상 설명" />
<ImgCard src={rainreuseMandatory} alt="법적 의무 대상 설명" />
</div>
</section>
@@ -78,7 +84,7 @@ export default function RainwaterReusePage() {
<section className="mt-6">
<SectionTitle>빗물이용시설 설계 방안</SectionTitle>
<div className="mt-8">
<ImgCard src="/images/landing/intro/rainwater_design.png" alt="빗물이용시설 설계 방안 설명" />
<ImgCard src={rainwaterDesign} alt="빗물이용시설 설계 방안 설명" />
</div>
</section>
@@ -88,7 +94,7 @@ export default function RainwaterReusePage() {
<section className="pb-[200px]">
<SectionTitle>빗물이용시설 시설기준 및 관리기준</SectionTitle>
<div className="mt-8">
<ImgCard src="/images/landing/intro/rainwater_standards.png" alt="빗물이용시설 시설기준 및 관리기준 설명" />
<ImgCard src={rainwaterStandards} alt="빗물이용시설 시설기준 및 관리기준 설명" />
</div>
</section>
apps/dm_new/app/(landing)/reuse/intro/treated/page.tsx
+8 -4
View File
@@ -1,7 +1,10 @@
// apps/dm/app/(landing)/reuse/intro/treated/page.tsx
"use client";
import Image, { type StaticImageData } from "next/image";
import SubPageHeader from "../../_components/SubPageHeader";
import treatedwaterIntro from "@/public/images/landing/intro/treatedwater_intro.png";
import treatedwaterMandatory from "@/public/images/landing/intro/treatedwater_mandatory.png";
function SectionTitle({ children }: { children: React.ReactNode }) {
return (
@@ -21,17 +24,18 @@ function Hr({ className = "" }: HrProps) {
}
type ImgCardProps = {
src: string;
src: StaticImageData;
alt: string;
};
function ImgCard({ src, alt }: ImgCardProps) {
return (
<div className="w-full overflow-x-auto">
<img
<Image
src={src}
alt={alt}
className="block mx-auto max-w-none"
style={{ width: "auto", height: "auto" }}
/>
</div>
);
@@ -58,7 +62,7 @@ export default function TreatedWaterPage() {
<section className="mt-6">
<SectionTitle>하수처리수</SectionTitle>
<div className="mt-8">
<ImgCard src="/images/landing/intro/treatedwater_intro.png" alt="하수처리수 설명" />
<ImgCard src={treatedwaterIntro} alt="하수처리수 설명" />
</div>
</section>
@@ -68,7 +72,7 @@ export default function TreatedWaterPage() {
<section className="pb-[200px]">
<SectionTitle>하수처리수 재이용시설 의무 대상</SectionTitle>
<div className="mt-8">
<ImgCard src="/images/landing/intro/treatedwater_mandatory.png" alt="하수처리수 재이용시설 의무 대상 설명" />
<ImgCard src={treatedwaterMandatory} alt="하수처리수 재이용시설 의무 대상 설명" />
</div>
</section>
</div>
apps/dm_new/app/(landing)/reuse/layout.tsx
+13 -9
View File
@@ -1,15 +1,19 @@
// apps/dm/app/(landing)/reuse/layout.tsx
import "./reuse.module.css";
// import type { ReactNode } from "react";
import TopNav from "./_components/TopNav";
"use client";
import "./reuse.module.css";
import TopNav from "./_components/TopNav";
import { usePathname } from "next/navigation";
export default function ReuseLayout({ children }: { children: React.ReactNode }) {
const pathname = usePathname();
const hasLnb = pathname !== "/reuse"; // 예: 메인만 제외
export default function ReuseLandingLayout({ children }: { children: React.ReactNode }) {
return (
<>
<div className="min-w-[1800px] overflow-x-auto">
<TopNav />
<div className="pt-[83px]">{children}</div> {/* TopNav 높이만큼 */}
<div className="pt-[83px]">
{hasLnb && <TopNav />}
<main className={hasLnb ? "ml-[260px]" : ""}>{children}</main>
</div>
</>
);
}
apps/dm_new/app/(landing)/reuse/page.tsx
+3 -1
View File
@@ -1,6 +1,7 @@
// apps/dm/app/(landing)/reuse/page.tsx
"use client";
import { useMemo } from "react";
import TopNav from "./_components/TopNav";
import SideIndicator from "./_components/SideIndicator";
import { useScrollSpy } from "./_hooks/useScrollSpy";
@@ -30,7 +31,8 @@ const LANDING_SECTIONS = [
];
export default function ReuseLandingPage() {
const activeId = useScrollSpy(LANDING_SECTIONS.map((s) => s.id));
const sectionIds = useMemo(() => LANDING_SECTIONS.map((s) => s.id), []);
const activeId = useScrollSpy(sectionIds);
return (
<main className="bg-white">
apps/dm_new/app/(with-layout)/apply/register/page.tsx
+48 -296
View File
@@ -8,75 +8,14 @@
*/
"use client";
import { Suspense, useEffect, useMemo, useRef, useState } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import { useDmStore } from "@/app/store";
import type { DemandCompBizType } from "@/app/store/sdmMng";
import { putFetch } from "@/components/ui/api";
import { useMemo, useState, useRef } from "react";
import SubPageHeader from "@/components/SubPageHeader";
import WaterQualityRefModal from "../modal/WaterQualityRefModal";
import CandidateSiteModal, { type CandidateSite } from "@/components/CandidateSiteModal";
type PHRange = { min: string; max: string };
type SessionUser = {
dmdInfoId?: string;
dmdCoNm?: string;
ctpvCd?: string;
sggCd?: string;
zip?: string;
daddr?: string;
telno?: string;
rgtr?: string;
};
const toNumberOrNull = (value: string, disabled = false) => {
if (disabled) return null;
const trimmed = value.trim();
if (!trimmed) return null;
const parsed = Number(trimmed);
return Number.isNaN(parsed) ? null : parsed;
};
const toNumberOrEmpty = (value: string) => {
const trimmed = value.trim();
if (!trimmed) return "" as const;
const parsed = Number(trimmed);
return Number.isNaN(parsed) ? ("" as const) : parsed;
};
const isNumeric = (value: string) => /^\d+(\.\d+)?$/.test(value.trim());
const formatDateForInput = (raw?: string | null) => {
if (!raw) return "";
const parsed = new Date(raw);
if (Number.isNaN(parsed.getTime())) return "";
const yyyy = parsed.getFullYear();
const mm = String(parsed.getMonth() + 1).padStart(2, "0");
const dd = String(parsed.getDate()).padStart(2, "0");
return `${yyyy}-${mm}-${dd}`;
};
const parsePhRange = (raw?: string | null): PHRange => {
if (!raw) return { min: "", max: "" };
const [min = "", max = ""] = raw.split("~").map((v) => v.trim());
return { min, max };
};
const getSessionUser = (): SessionUser | null => {
if (typeof window === "undefined") return null;
const raw = sessionStorage.getItem("user");
if (!raw) return null;
try {
return JSON.parse(raw) as SessionUser;
} catch {
return null;
}
};
function DemandRegisterPageContent() {
const router = useRouter();
const searchParams = useSearchParams();
const { insertSdmInfoData, Sdm } = useDmStore((state) => state);
export default function DemandRegisterPage() {
const today = useMemo(() => {
const d = new Date();
const yyyy = d.getFullYear();
@@ -86,231 +25,37 @@ function DemandRegisterPageContent() {
}, []);
const [openRef, setOpenRef] = useState(false);
const [editMode, setEditMode] = useState(false);
const [updateAllowed, setUpdateAllowed] = useState(true);
const [dmdInfoSn, setDmdInfoSn] = useState<number>(0);
const [submitting, setSubmitting] = useState(false);
const [openCand, setOpenCand] = useState(false);
const [selectedCands, setSelectedCands] = useState<CandidateSite[]>([]);
// 기본정보
const [reqDate, setReqDate] = useState<string>(today); // 요구시기
const [reqQty, setReqQty] = useState<string>(""); // 요구수량(m²/d)
const [usePurpose, setUsePurpose] = useState<string>(""); // 사용용도
const [hopePrice, setHopePrice] = useState<string>(""); // 희망단가
const [reqDate, setReqDate] = useState<string>(today);
const [reqQty, setReqQty] = useState<string>("");
const [usePurpose, setUsePurpose] = useState<string>("");
const [hopePrice, setHopePrice] = useState<string>("");
// 요구수질
const [coliform, setColiform] = useState<string>(""); // 총대장균군수(개/mg)
const [noDetect, setNoDetect] = useState<boolean>(false); // 총대장균군수 불검출
const [tn, setTn] = useState<string>(""); // 총질소(T-N)(mg/L)
const [residualCl, setResidualCl] = useState<string>(""); // 결합잔류염소(mg/L)
const [tp, setTp] = useState<string>(""); // 총인(T-P)(mg/L)
const [turbidity, setTurbidity] = useState<string>(""); //
const [ph, setPh] = useState<PHRange>({ min: "", max: "" }); // 수소이온농도(pH)
const [bod, setBod] = useState<string>(""); // 생물화학적산소요구량(BOD)(mg/L)
const [chloride, setChloride] = useState<string>(""); // 염화물(mgCL/L)
const [odor, setOdor] = useState<string>("불쾌하지 않을 것"); // 냄새
const [ec, setEc] = useState<string>(""); // 전기전도도(µs/cm)
const [color, setColor] = useState<string>(""); // 색도(도)
const [remark, setRemark] = useState<string>(""); // 비고
const [coliform, setColiform] = useState<string>("");
const [noDetect, setNoDetect] = useState<boolean>(false);
const [tn, setTn] = useState<string>("");
const [residualCl, setResidualCl] = useState<string>("");
const [tp, setTp] = useState<string>("");
const [turbidity, setTurbidity] = useState<string>("");
const [ph, setPh] = useState<PHRange>({ min: "", max: "" });
const [bod, setBod] = useState<string>("");
const [chloride, setChloride] = useState<string>("");
const [odor, setOdor] = useState<string>("불쾌하지 않을 것");
const [ec, setEc] = useState<string>("");
const [color, setColor] = useState<string>("");
const [remark, setRemark] = useState<string>("");
// 공급처 후보지 선택(필수아님)
const [cand1, setCand1] = useState("");
const [cand2, setCand2] = useState("");
const [cand3, setCand3] = useState("");
useEffect(() => {
const isEditParam =
searchParams.get("editMode") === "true" ||
Boolean(searchParams.get("dmdInfoSn"));
setEditMode(isEditParam);
const status = (searchParams.get("status") || "").trim();
setUpdateAllowed(!isEditParam || status === "신청");
if (!isEditParam) return;
const parsedSn = Number(searchParams.get("dmdInfoSn") || "0");
setDmdInfoSn(Number.isNaN(parsedSn) ? 0 : parsedSn);
setReqDate(formatDateForInput(searchParams.get("dmndTmng")) || today);
setReqQty(searchParams.get("dmndQty") || "");
setUsePurpose(searchParams.get("useUsgCd") || "");
setHopePrice(searchParams.get("wntUntprc") || "");
const rawColiform = searchParams.get("grssClfg") || "";
const isNoDetect = rawColiform === "-1";
setNoDetect(isNoDetect);
setColiform(isNoDetect ? "" : rawColiform);
setTn(searchParams.get("tn") || "");
setResidualCl(searchParams.get("combResdch") || "");
setTp(searchParams.get("tph") || "");
setTurbidity(searchParams.get("trbt") || "");
setBod(searchParams.get("blgcOxygDmndQnt") || "");
setChloride(searchParams.get("clIonQnt") || "");
setEc(searchParams.get("cdtnv") || "");
setColor(searchParams.get("crmty") || "");
setRemark(searchParams.get("rmrk") || "");
const phRange = parsePhRange(searchParams.get("ph"));
setPh(phRange);
setOdor(searchParams.get("smll") || "불쾌하지 않을 것");
}, [searchParams, today]);
const validate = () => {
const disabledFields = Sdm.disableRules[usePurpose] || [];
const isDisabled = (field: string) => disabledFields.includes(field);
if (!reqDate) {
alert("요구시기를 입력해주세요.");
return false;
}
if (!reqQty.trim()) {
alert("요구수량을 입력해주세요.");
return false;
}
if (!/^\d+$/.test(reqQty.trim())) {
alert("요구수량은 숫자만 입력 가능합니다.");
return false;
}
if (!usePurpose.trim()) {
alert("사용용도를 입력해주세요.");
return false;
}
if (!hopePrice.trim()) {
alert("희망단가를 입력해주세요.");
return false;
}
if (!/^\d+$/.test(hopePrice.trim())) {
alert("희망단가는 숫자만 입력 가능합니다.");
return false;
}
if (!noDetect && coliform.trim() && !isNumeric(coliform)) {
alert("총대장균군수는 숫자만 입력 가능합니다.");
return false;
}
const requiredFields: Array<{ key: string; label: string; value: string }> = [
{ key: "tn", label: "총질소(T-N)(mg/L)", value: tn },
{ key: "combResdch", label: "결합잔류염소(mg/L)", value: residualCl },
{ key: "tph", label: "총인(T-P)(mg/L)", value: tp },
{ key: "trbt", label: "탁도(NTU)", value: turbidity },
{ key: "bod", label: "생물학적 산소요구량(BOD)(mg/L)", value: bod },
{ key: "clIonQnt", label: "염화물(mgCL/L)", value: chloride },
{ key: "smll", label: "냄새", value: odor },
{ key: "cdtnv", label: "전기전도도(㎲/cm)", value: ec },
{ key: "crmty", label: "색도(도)", value: color },
];
for (const field of requiredFields) {
if (isDisabled(field.key)) continue;
if (!field.value.trim()) {
alert(`${field.label} 을 입력해주세요.`);
return false;
}
if (field.key !== "smll" && !isNumeric(field.value)) {
alert(`${field.label} 은 숫자만 입력 가능합니다.`);
return false;
}
}
if (!isDisabled("ph") && (!ph.min.trim() || !ph.max.trim())) {
alert("수소이온농도(pH) 을 입력해주세요.");
return false;
}
return true;
};
const onSubmit = async () => {
if (submitting) return;
if (!validate()) return;
if (editMode && !updateAllowed) {
alert("진행상태가 신청인 경우에만 수정할 수 있습니다.");
return;
}
const sessionUser = getSessionUser();
const idFromQuery =
(searchParams.get("dmdInfoId") || "") + (searchParams.get("bznmTotNo") || "");
const dmdInfoId = String(sessionUser?.dmdInfoId || idFromQuery || "").trim();
if (!dmdInfoId) {
alert("수요처 정보가 없어 저장할 수 없습니다.");
return;
}
const disabledFields = Sdm.disableRules[usePurpose] || [];
const isDisabled = (field: string) => disabledFields.includes(field);
const parsedPh = isDisabled("ph") ? "" : `${ph.min.trim()}~${ph.max.trim()}`;
const cands = [cand1, cand2, cand3]
.map((name) => name.trim())
.filter(Boolean)
.map((name) => ({
ruseUtztnFcltNm: name,
ruseUtztnFcltCd: "",
}))
.filter((item) => item.ruseUtztnFcltNm && item.ruseUtztnFcltCd);
const payload: DemandCompBizType = {
index: 0,
dmdInfoId,
dmdInfoFk: dmdInfoId,
bzmnNo: "",
dmdCoNm: String(sessionUser?.dmdCoNm || searchParams.get("dmdCoNm") || ""),
zip: String(sessionUser?.zip || searchParams.get("zip") || ""),
daddr: String(sessionUser?.daddr || searchParams.get("daddr") || ""),
telno: String(sessionUser?.telno || searchParams.get("telno") || ""),
rgtr: String(sessionUser?.rgtr || searchParams.get("rgtr") || ""),
useUsgCd: usePurpose.trim(),
ctpvCd: String(sessionUser?.ctpvCd || searchParams.get("ctpvCd") || ""),
sggCd: String(sessionUser?.sggCd || searchParams.get("sggCd") || ""),
dmdAplyPswd: "",
wntUntprc: toNumberOrEmpty(hopePrice),
dmndTmng: reqDate ? new Date(reqDate) : "",
dmndQty: toNumberOrEmpty(reqQty),
grssClfg: noDetect ? -1 : toNumberOrNull(coliform),
tn: toNumberOrNull(tn, isDisabled("tn")),
combResdch: toNumberOrNull(residualCl, isDisabled("combResdch")),
tph: toNumberOrNull(tp, isDisabled("tph")),
trbt: toNumberOrNull(turbidity, isDisabled("trbt")),
ph: parsedPh,
blgcOxygDmndQnt: toNumberOrNull(bod, isDisabled("bod")),
clIonQnt: toNumberOrNull(chloride, isDisabled("clIonQnt")),
smll: isDisabled("smll") ? "" : odor.trim(),
cdtnv: toNumberOrNull(ec, isDisabled("cdtnv")),
crmty: toNumberOrNull(color, isDisabled("crmty")),
rmrk: remark.trim(),
reqDt: "",
dmdInfoSn: editMode ? dmdInfoSn : 0,
status: String(searchParams.get("status") || ""),
splyCndtList: cands,
};
try {
setSubmitting(true);
if (editMode) {
const updatePayload = {
...payload,
mdfr: String(sessionUser?.rgtr || payload.rgtr || ""),
};
await putFetch("/reuseFc/request/demandInfo", updatePayload);
alert("수요정보 수정 완료!");
} else {
await insertSdmInfoData(payload);
}
router.push("/apply/status");
} catch (error) {
console.error("Failed to submit demand info", error);
alert(editMode ? "수요정보 수정에 실패하였습니다." : "수요정보 등록에 실패하였습니다.");
} finally {
setSubmitting(false);
}
};
return (
<>
@@ -320,8 +65,8 @@ function DemandRegisterPageContent() {
<SubPageHeader
title="수요정보등록"
crumbs={[
{ label: "Home", href: "/main" },
{ label: "수요신청", href: "/apply/status" },
{ label: "Home", href: "/reuse" },
{ label: "수요신청", href: "/reuse/apply" },
{ label: "수요정보등록" },
]}
/>
@@ -517,10 +262,7 @@ function DemandRegisterPageContent() {
<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>
@@ -544,25 +286,35 @@ function DemandRegisterPageContent() {
<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}
className="h-11 rounded-md bg-[#0B4EA2] px-10 text-lg text-white hover:opacity-90"
onClick={() => {
// TODO: 저장 처리
console.log("수요정보 등록");
}}
>
{editMode ? "수요정보 수정" : "수요정보 등록"}
수요정보 등록
</button>
</div>
</div>
</main>
</>
);
}
export default function DemandRegisterPage() {
return (
<Suspense fallback={<div>Loading...</div>}>
<DemandRegisterPageContent />
</Suspense>
<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);
}}
/>
</>
);
}
apps/dm_new/app/(with-layout)/apply/status/page.tsx
+190 -188
View File
@@ -1,179 +1,157 @@
// apps/dm/app/(landing)/reuse/apply/status/page.tsx
"use client";
import { useEffect, useMemo, useRef, useState } from "react";
import SubPageHeader from "@/components/SubPageHeader";
type WaterDetail = {
toc: string;
bdo: string;
tn: string;
tp: string;
cl: string;
conductivity: string;
coliform: string;
turbidity: string;
odor: string;
color: string;
ph: string;
note: string;
};
type Row = {
id: number;
sido: string;
sigungu: string;
company: string;
address: string;
phone: string;
date: string;
status: "진행중" | "진행완료";
detail: {
reqDate: string;
reqQty: string;
usePurpose: string;
price: string;
water: WaterDetail;
candidates: [string, string, string];
};
};
const MOCK: Row[] = [
{
id: 1,
sido: "서울특별시",
sigungu: "금천구",
company: "서울워터솔루션(주)",
address: "서울특별시 금천구 가산디지털2로 119, 24층(가산동)",
phone: "010-0000-0000",
date: "2025-01-14",
status: "진행중",
detail: {
reqDate: "2025-02",
reqQty: "1,200",
usePurpose: "공업용수",
price: "350",
water: {
toc: "4",
bdo: "3",
tn: "10",
tp: "1.0",
cl: "120",
conductivity: "800",
coliform: "0",
turbidity: "2",
odor: "무",
color: "무",
ph: "7.2",
note: "-",
},
candidates: ["후보지1", "후보지2", "후보지3"],
},
},
{
id: 2,
sido: "제주특별자치도",
sigungu: "서귀포",
company: "회사명이 길어도괜찮지",
address: "제주특별자치도 서귀포시 천제연로 156, 3층 2호(색달동 1077호)",
phone: "010-0000-0000",
date: "2025-01-14",
status: "진행완료",
detail: {
reqDate: "2025-03",
reqQty: "800",
usePurpose: "조경용수",
price: "300",
water: {
toc: "5",
bdo: "4",
tn: "12",
tp: "1.2",
cl: "140",
conductivity: "900",
coliform: "0",
turbidity: "3",
odor: "무",
color: "무",
ph: "7.0",
note: "현장 협의",
},
candidates: ["후보지1", "후보지2", "후보지3"],
},
},
];
function StatusBadge({ v }: { v: Row["status"] }) {
const cls = v === "진행중" ? "text-red-600" : "text-lime-600";
return <span className={["font-medium", cls].join(" ")}>{v}</span>;
}
import { useDmStore } from "@/app/store";
import type { DemandCompBizType } from "@/app/store/sdmMng";
type TopField = { label: string; value: string; required?: boolean };
type PairField = { label: string; value: string };
type SessionUser = { dmdInfoId?: string };
const formatDate = (value: string | Date | "" | undefined) => {
if (!value) return "-";
const date = new Date(value);
if (Number.isNaN(date.getTime())) return String(value);
const yyyy = date.getFullYear();
const mm = String(date.getMonth() + 1).padStart(2, "0");
const dd = String(date.getDate()).padStart(2, "0");
return `${yyyy}-${mm}-${dd}`;
};
const formatValue = (value: string | number | null | undefined) => {
if (value === null || value === undefined || value === "") return "-";
return String(value);
};
const formatBelow = (value: string | number | null | undefined) => {
if (value === null || value === undefined || value === "") return "-";
if (Number(value) === -1) return "불검출";
return `${value} 이하`;
};
function StatusBadge({ v }: { v: string }) {
const cls = v === "신청" ? "text-red-600" : "text-lime-600";
return <span className={["font-medium", cls].join(" ")}>{v || "-"}</span>;
}
export default function DemandStatusPage() {
const rows = useMemo(() => MOCK, []);
const { getSdmInfoStatusList, Sdm, Common } = useDmStore((state) => state);
const { successLogin, sdmInfoStatusList } = Sdm;
const { selectSidoData, selectSigunData } = Common;
// ✅ rows가 빈 경우도 대비 (런타임 오류 방지)
const [selectedId, setSelectedId] = useState<number | null>(rows[0]?.id ?? null);
// ✅ 상세영역 스크롤 이동용
const detailRef = useRef<HTMLDivElement | null>(null);
// ✅ selected 계산 안정화
const selected = useMemo(() => {
if (!rows.length) return null;
const found = rows.find((r) => r.id === selectedId);
return found ?? rows[0];
}, [rows, selectedId]);
const [isLoginStorageInfo, setIsLoginStorageInfo] = useState(false);
const [selectedDmdInfoSn, setSelectedDmdInfoSn] = useState<number | "" | null>(null);
const [transformedSdmInfoStatusList, setTransformedSdmInfoStatusList] = useState<DemandCompBizType[]>([]);
// ✅ rows가 바뀌었는데 selectedId가 null이면 자동 첫번째 선택
useEffect(() => {
const first = rows[0];
if (!first) return; // ✅ rows가 비어있으면 종료 (TS + 런타임 안전)
const user = sessionStorage.getItem("user");
if (user) {
setIsLoginStorageInfo(true);
}
}, []);
if (selectedId == null) setSelectedId(first.id);
}, [rows, selectedId]);
useEffect(() => {
if (!successLogin && !isLoginStorageInfo) return;
const user = sessionStorage.getItem("user");
if (!user) return;
try {
const userData = JSON.parse(user) as SessionUser;
const dmdInfoId = userData.dmdInfoId?.trim();
if (dmdInfoId) {
getSdmInfoStatusList(dmdInfoId);
}
} catch (error) {
console.error("Error parsing user data:", error);
}
}, [successLogin, isLoginStorageInfo, getSdmInfoStatusList]);
useEffect(() => {
const mappedList = sdmInfoStatusList.map((item) => ({
...item,
ctpvCd: selectSidoData.find((sido) => sido.val === item.ctpvCd?.trim())?.text || item.ctpvCd,
sggCd: selectSigunData.find((sigun) => sigun.val === item.sggCd?.trim())?.text || item.sggCd,
}));
setTransformedSdmInfoStatusList(mappedList);
}, [sdmInfoStatusList, selectSidoData, selectSigunData]);
useEffect(() => {
const first = transformedSdmInfoStatusList[0];
if (!first) {
setSelectedDmdInfoSn(null);
return;
}
if (selectedDmdInfoSn == null) {
setSelectedDmdInfoSn(first.dmdInfoSn);
return;
}
const exists = transformedSdmInfoStatusList.some(
(item) => item.dmdInfoSn === selectedDmdInfoSn,
);
if (!exists) {
setSelectedDmdInfoSn(first.dmdInfoSn);
}
}, [transformedSdmInfoStatusList, selectedDmdInfoSn]);
const selectedSdmInfoStatus = useMemo(() => {
if (!transformedSdmInfoStatusList.length) return null;
return (
transformedSdmInfoStatusList.find((item) => item.dmdInfoSn === selectedDmdInfoSn) ??
transformedSdmInfoStatusList[0]
);
}, [transformedSdmInfoStatusList, selectedDmdInfoSn]);
// ✅ 상단 2행(요구시기/요구수량/사용용도/희망단가) - TS 안전하게 object로 구성
const topFields: TopField[] = useMemo(() => {
if (!selected) return [];
return [
{ label: "요구시기", value: selected.detail.reqDate, required: true },
{ label: "요구수량(㎡/d)", value: selected.detail.reqQty },
{ label: "사용용도", value: selected.detail.usePurpose },
{ label: "희망단가(원)", value: selected.detail.price },
];
}, [selected]);
if (!selectedSdmInfoStatus) return [];
return [
{ label: "요구시기", value: formatDate(selectedSdmInfoStatus.dmndTmng), required: true },
{ label: "요구수량(㎥/d)", value: formatValue(selectedSdmInfoStatus.dmndQty) },
{ label: "사용용도", value: formatValue(selectedSdmInfoStatus.useUsgCd) },
{ label: "희망단가(원/㎥)", value: formatValue(selectedSdmInfoStatus.wntUntprc) },
];
}, [selectedSdmInfoStatus]);
// ✅ 수질 항목 - TS 안전
const waterFields: PairField[] = useMemo(() => {
if (!selected) return [];
const w = selected.detail.water;
if (!selectedSdmInfoStatus) return [];
return [
{ label: "총대장균군수(개/100mℓ)", value: w.coliform },
{ label: "결합잔류염소(mg/L)", value: "-" },
{ label: "탁도(NTU)", value: w.turbidity },
{ label: "총대장균군수(개/100mL)", value: formatBelow(selectedSdmInfoStatus.grssClfg) },
{ label: "결합잔류염소(mg/L)", value: formatBelow(selectedSdmInfoStatus.combResdch) },
{ label: "탁도(NTU)", value: formatBelow(selectedSdmInfoStatus.trbt) },
{ label: "생물화학적산소요구량(BOD)(mg/L)", value: w.bdo },
{ label: "냄새", value: w.odor },
{ label: "색도(도)", value: w.color },
{ label: "생물학적산소요구량(BOD)(mg/L)", value: formatBelow(selectedSdmInfoStatus.blgcOxygDmndQnt) },
{ label: "냄새", value: formatValue(selectedSdmInfoStatus.smll) },
{ label: "색도(도)", value: formatBelow(selectedSdmInfoStatus.crmty) },
{ label: "총질소(T-N)(mg/L)", value: w.tn },
{ label: "총인(T-P)(mg/L)", value: w.tp },
{ label: "수소이온농도(pH)", value: w.ph },
{ label: "총질소(T-N)(mg/L)", value: formatBelow(selectedSdmInfoStatus.tn) },
{ label: "총인(T-P)(mg/L)", value: formatBelow(selectedSdmInfoStatus.tph) },
{ label: "수소이온농도(pH)", value: formatValue(selectedSdmInfoStatus.ph) },
{ label: "염화물(mgCL/L)", value: w.cl },
{ label: "전기전도도(µs/cm)", value: w.conductivity },
{ label: "비고", value: w.note },
{ label: "염화물(mgCL/L)", value: formatBelow(selectedSdmInfoStatus.clIonQnt) },
{ label: "전기전도도(μS/cm)", value: formatBelow(selectedSdmInfoStatus.cdtnv) },
{ label: "비고", value: formatValue(selectedSdmInfoStatus.rmrk) },
];
}, [selected]);
}, [selectedSdmInfoStatus]);
const onSelectRow = (id: number) => {
setSelectedId(id);
const candidateNames = useMemo(() => {
const list = selectedSdmInfoStatus?.splyCndtList ?? [];
return [
list[0]?.ruseUtztnFcltNm ?? "",
list[1]?.ruseUtztnFcltNm ?? "",
list[2]?.ruseUtztnFcltNm ?? "",
];
}, [selectedSdmInfoStatus]);
// ✅ “행 클릭 → 아래 상세로 보여짐” 체감 확실히: 상세영역으로 이동
// (사용자가 이미 아래를 보고 있다면 거의 움직이지 않음)
const onSelectSdmInfoStatus = (dmdInfoSn: number | "") => {
setSelectedDmdInfoSn(dmdInfoSn);
requestAnimationFrame(() => {
detailRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
});
@@ -181,21 +159,18 @@ export default function DemandStatusPage() {
return (
<main className="bg-white">
{/* 서브 타이틀 + 브레드크럼 */}
<SubPageHeader
title="수요신청현황"
crumbs={[
{ label: "Home", href: "/reuse" },
{ label: "수요신청", href: "/reuse/apply" },
{ label: "Home", href: "/main" },
{ label: "수요신청", href: "/apply/status" },
{ label: "수요신청현황" },
]}
hideFooterLine
hideGuideText
/>
{/* 컨텐츠 영역 */}
<div>
{/* 리스트 테이블 */}
<section className="mt-6">
<div className="text-2xl font-bold text-slate-700">수요정보 신청현황</div>
@@ -215,23 +190,25 @@ export default function DemandStatusPage() {
</thead>
<tbody className="bg-white text-base text-slate-700">
{rows.length === 0 ? (
{transformedSdmInfoStatusList.length === 0 ? (
<tr>
<td colSpan={8} className="px-3 py-10 text-center text-slate-400">
조회된 신청내역이 없습니다.
</td>
</tr>
) : (
rows.map((r) => {
const active = r.id === selected?.id;
transformedSdmInfoStatusList.map((sdmInfoStatus, index) => {
const active = sdmInfoStatus.dmdInfoSn === selectedSdmInfoStatus?.dmdInfoSn;
return (
<tr
key={r.id}
role="button"
key={`${sdmInfoStatus.dmdInfoSn}-${index}`}
role="row"
tabIndex={0}
onClick={() => onSelectRow(r.id)}
onClick={() => onSelectSdmInfoStatus(sdmInfoStatus.dmdInfoSn)}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") onSelectRow(r.id);
if (e.key === "Enter" || e.key === " ") {
onSelectSdmInfoStatus(sdmInfoStatus.dmdInfoSn);
}
}}
className={[
"border-t border-neutral-200 outline-none",
@@ -241,15 +218,15 @@ export default function DemandStatusPage() {
].join(" ")}
aria-selected={active}
>
<td className="px-3 py-3 text-center">{r.id}</td>
<td className="px-3 py-3 text-center">{r.sido}</td>
<td className="px-3 py-3 text-center">{r.sigungu}</td>
<td className="px-3 py-3 text-center">{r.company}</td>
<td className="px-3 py-3 text-center">{r.address}</td>
<td className="px-3 py-3 text-center">{r.phone}</td>
<td className="px-3 py-3 text-center">{r.date}</td>
<td className="px-3 py-3 text-center">{sdmInfoStatus.index || index + 1}</td>
<td className="px-3 py-3 text-center">{formatValue(sdmInfoStatus.ctpvCd)}</td>
<td className="px-3 py-3 text-center">{formatValue(sdmInfoStatus.sggCd)}</td>
<td className="px-3 py-3 text-center">{formatValue(sdmInfoStatus.dmdCoNm)}</td>
<td className="px-3 py-3 text-center">{formatValue(sdmInfoStatus.daddr)}</td>
<td className="px-3 py-3 text-center">{formatValue(sdmInfoStatus.telno)}</td>
<td className="px-3 py-3 text-center">{formatDate(sdmInfoStatus.dmndTmng)}</td>
<td className="px-3 py-3 text-center">
<StatusBadge v={r.status} />
<StatusBadge v={formatValue(sdmInfoStatus.status)} />
</td>
</tr>
);
@@ -260,11 +237,18 @@ export default function DemandStatusPage() {
</div>
</section>
{/* 상세현황 */}
<section className="mt-10 pb-16" ref={detailRef}>
<div className="flex justify-between items-center">
<div className="text-2xl font-bold text-slate-700">수요신청 상세현황</div>
<button
type="button"
className="h-8 rounded-md bg-[#888] px-4 text-base text-white hover:bg-neutral-700"
>
수정
</button>
</div>
{!selected ? (
{!selectedSdmInfoStatus ? (
<div className="mt-3 border border-neutral-200 px-6 py-10 text-center text-sm text-slate-400">
상세 정보를 표시할 신청건이 없습니다.
</div>
@@ -275,59 +259,77 @@ export default function DemandStatusPage() {
</div>
<div className="grid grid-cols-12 text-sm">
{/* 상단 2행 */}
{topFields.map((f) => (
{topFields.map((field) => (
<div
key={f.label}
key={field.label}
className="col-span-12 md:col-span-6 grid grid-cols-12 border-b border-neutral-200"
>
<div className="col-span-4 bg-sky-50 px-4 py-4 flex items-center justify-center text-center font-semibold text-slate-700">
{f.label}
{f.required ? <span className="ml-1 text-red-500">*</span> : null}
{field.label}
{field.required ? <span className="ml-1 text-red-500">*</span> : null}
</div>
<div className="col-span-8 px-4 py-4 flex items-center justify-center text-center">
{f.value}
{field.value}
</div>
</div>
))}
{/* 수질 */}
<div className="col-span-12 bg-sky-50 px-4 py-3 text-sm font-semibold text-slate-700 border-b border-neutral-200">
요구수질
</div>
{waterFields.map((f) => (
{waterFields.map((field) => (
<div
key={f.label}
key={field.label}
className="col-span-12 md:col-span-4 grid grid-cols-12 border-b border-neutral-200"
>
<div className="col-span-5 bg-sky-50 px-3 py-4 flex items-center justify-center text-center font-semibold text-slate-700">
{f.label}
{field.label}
</div>
<div className="col-span-7 px-3 py-4 flex items-center justify-center text-center">
{f.value}
{field.value}
</div>
</div>
))}
{/* 공급처 후보지 */}
<div className="col-span-12 bg-sky-50 px-4 py-3 text-sm font-semibold text-slate-700 border-b border-neutral-200">
공급처 후보지
</div>
{selected.detail.candidates.map((v, i) => (
{candidateNames.map((candidateName, index) => (
<div
key={`candidate-${i}`}
key={`candidate-${index}`}
className="col-span-12 md:col-span-4 grid grid-cols-12 border-b md:border-b-0 border-neutral-200"
>
<div className="col-span-5 bg-sky-50 px-3 py-4 flex items-center justify-center text-center font-semibold text-slate-700">
후보지{i + 1}
후보지{index + 1}
</div>
<div className="col-span-7 px-3 py-4 flex items-center justify-center text-center">
{v}
{candidateName}
</div>
</div>
))}
<div className="col-span-12 bg-sky-50 px-4 py-3 text-sm font-semibold text-slate-700 border-t border-b border-neutral-200">
수요신청 진행상태
</div>
<div className="col-span-12 md:col-span-4 grid grid-cols-12 border-b md:border-b-0 border-neutral-200">
<div className="col-span-5 bg-sky-50 px-3 py-4 flex items-center justify-center text-center font-semibold text-slate-700">
진행상태
</div>
<div className="col-span-7 px-3 py-4 flex items-center justify-center text-center">
{formatValue(selectedSdmInfoStatus.status)}
</div>
</div>
<div className="col-span-12 md:col-span-4 grid grid-cols-12 border-b md:border-b-0 border-neutral-200">
<div className="col-span-5 bg-sky-50 px-3 py-4 flex items-center justify-center text-center font-semibold text-slate-700">
공급처매칭결과
</div>
<div className="col-span-7 px-3 py-4 flex items-center justify-center text-center">
{formatValue(selectedSdmInfoStatus.ruseUtztnFcltNm)}
</div>
</div>
</div>
</div>
)}
apps/dm_new/app/(with-layout)/intro/greywater/page.tsx
+10 -5
View File
@@ -1,7 +1,11 @@
// apps/dm/app/(landing)/reuse/intro/greywater/page.tsx
"use client";
import Image, { type StaticImageData } from "next/image";
import SubPageHeader from "@/components/SubPageHeader";
import greywaterIntro from "@/public/images/landing/intro/greywater_intro.png";
import greywaterMandatory from "@/public/images/landing/intro/greywater_mandatory.png";
import greywaterStandard from "@/public/images/landing/intro/greywater_standard.png";
function SectionTitle({ children }: { children: React.ReactNode }) {
return (
@@ -21,17 +25,18 @@ function Hr({ className = "" }: HrProps) {
}
type ImgCardProps = {
src: string;
src: StaticImageData;
alt: string;
};
function ImgCard({ src, alt }: ImgCardProps) {
return (
<div className="w-full overflow-x-auto">
<img
<Image
src={src}
alt={alt}
className="block mx-auto max-w-none"
style={{ width: "auto", height: "auto" }}
/>
</div>
);
@@ -58,7 +63,7 @@ export default function GreywaterPage() {
<section className="mt-6">
<SectionTitle>중수 재이용 소개</SectionTitle>
<div className="mt-8">
<ImgCard src="/images/landing/intro/greywater_intro.png" alt="중수 재이용 소개" />
<ImgCard src={greywaterIntro} alt="중수 재이용 소개" />
</div>
</section>
@@ -68,7 +73,7 @@ export default function GreywaterPage() {
<section>
<SectionTitle>중수도 설치 의무 대상</SectionTitle>
<div className="mt-8">
<ImgCard src="/images/landing/intro/greywater_mandatory.png" alt="중수도 설치 의무 대상 설명" />
<ImgCard src={greywaterMandatory} alt="중수도 설치 의무 대상 설명" />
</div>
</section>
@@ -78,7 +83,7 @@ export default function GreywaterPage() {
<section className="pb-[200px]">
<SectionTitle>중수도 시설기준 및 관리기준</SectionTitle>
<div className="mt-8">
<ImgCard src="/images/landing/intro/greywater_standard.png" alt="중수도 시설기준 및 관리기준 설명" />
<ImgCard src={greywaterStandard} alt="중수도 시설기준 및 관리기준 설명" />
</div>
</section>
</div>
apps/dm_new/app/(with-layout)/intro/law/page.tsx
+16 -8
View File
@@ -1,7 +1,14 @@
// apps/dm/app/(landing)/reuse/intro/law/page.tsx
"use client";
import Image, { type StaticImageData } from "next/image";
import SubPageHeader from "@/components/SubPageHeader";
import lawTimeline from "@/public/images/landing/intro/law_timeline.png";
import performanceLeft from "@/public/images/landing/intro/performance_left.png";
import domesticTextbox from "@/public/images/landing/intro/domestic_textbox.png";
import policyTimeline from "@/public/images/landing/intro/policy_timeline.png";
import relNote from "@/public/images/landing/intro/rel_note.png";
import linkage from "@/public/images/landing/intro/linkage.png";
function SectionTitle({ children }: { children: React.ReactNode }) {
return (
@@ -21,17 +28,18 @@ function Hr({ className = "" }: HrProps) {
}
type ImgCardProps = {
src: string;
src: StaticImageData;
alt: string;
};
function ImgCard({ src, alt }: ImgCardProps) {
return (
<div className="w-full overflow-x-auto">
<img
<Image
src={src}
alt={alt}
className="block mx-auto max-w-none"
style={{ width: "auto", height: "auto" }}
/>
</div>
);
@@ -58,7 +66,7 @@ export default function WaterReuseLawPage() {
<section className="mt-6">
<SectionTitle>법제도 · 계획 및 기본계획 수립</SectionTitle>
<div className="mt-8">
<ImgCard src="/images/landing/intro/law_timeline.png" alt="법제도 타임라인" />
<ImgCard src={lawTimeline} alt="법제도 타임라인" />
</div>
</section>
@@ -68,7 +76,7 @@ export default function WaterReuseLawPage() {
<section>
<SectionTitle>제 2차 계획 대비 실적 현황</SectionTitle>
<div className="mt-8">
<ImgCard src="/images/landing/intro/performance_left.png" alt="실적 현황 요약" />
<ImgCard src={performanceLeft} alt="실적 현황 요약" />
</div>
</section>
@@ -78,7 +86,7 @@ export default function WaterReuseLawPage() {
<section>
<SectionTitle>국내 관련 현황</SectionTitle>
<div className="mt-8">
<ImgCard src="/images/landing/intro/domestic_textbox.png" alt="국내 관련 현황 설명" />
<ImgCard src={domesticTextbox} alt="국내 관련 현황 설명" />
</div>
</section>
@@ -88,7 +96,7 @@ export default function WaterReuseLawPage() {
<section>
<SectionTitle>물 재이용 정책 변천 추이</SectionTitle>
<div className="mt-8">
<ImgCard src="/images/landing/intro/policy_timeline.png" alt="정책 변천 타임라인" />
<ImgCard src={policyTimeline} alt="정책 변천 타임라인" />
</div>
</section>
@@ -98,7 +106,7 @@ export default function WaterReuseLawPage() {
<section>
<SectionTitle>타법령과의 관계도</SectionTitle>
<div className="mt-8">
<ImgCard src="/images/landing/intro/rel_note.png" alt="관계도 설명" />
<ImgCard src={relNote} alt="관계도 설명" />
</div>
</section>
@@ -114,7 +122,7 @@ export default function WaterReuseLawPage() {
• 물관리 계획(국가수도기본계획, 국가 및 유역하수도종합계획, 하천유역수자원관리계획 등)과의 연계성 확보 → 통합적인 관점에서 물이용 체계 구축 필요
</p>
</div>
<ImgCard src="/images/landing/intro/linkage.png" alt="국내 연계 현황" />
<ImgCard src={linkage} alt="국내 연계 현황" />
</div>
</section>
</div>
apps/dm_new/app/(with-layout)/intro/layout.tsx
+3 -1
View File
@@ -5,7 +5,9 @@ export default function IntroLayout({ children }: { children: ReactNode }) {
return (
<div className="flex gap-0">
<Lnb />
<main className="flex-1 px-[100px] pt-[80px]">{children}</main>
<main className="flex-1 px-[100px] pt-[80px]">
{children}
</main>
</div>
);
}
apps/dm_new/app/(with-layout)/intro/rain/page.tsx
+12 -6
View File
@@ -1,7 +1,12 @@
// apps/dm/app/(landing)/reuse/intro/law/page.tsx
"use client";
import Image, { type StaticImageData } from "next/image";
import SubPageHeader from "@/components/SubPageHeader";
import rainreuseIntro from "@/public/images/landing/intro/rainreuse_intro.png";
import rainreuseMandatory from "@/public/images/landing/intro/rainreuse_mandatory.png";
import rainwaterDesign from "@/public/images/landing/intro/rainwater_design.png";
import rainwaterStandards from "@/public/images/landing/intro/rainwater_standards.png";
function SectionTitle({ children }: { children: React.ReactNode }) {
return (
@@ -21,17 +26,18 @@ function Hr({ className = "" }: HrProps) {
}
type ImgCardProps = {
src: string;
src: StaticImageData;
alt: string;
};
function ImgCard({ src, alt }: ImgCardProps) {
return (
<div className="w-full overflow-x-auto">
<img
<Image
src={src}
alt={alt}
className="block mx-auto max-w-none"
style={{ width: "auto", height: "auto" }}
/>
</div>
);
@@ -58,7 +64,7 @@ export default function RainwaterReusePage() {
<section className="mt-6">
<SectionTitle>빗물 재이용 소개</SectionTitle>
<div className="mt-8">
<ImgCard src="/images/landing/intro/rainreuse_intro.png" alt="빗물 재이용 소개" />
<ImgCard src={rainreuseIntro} alt="빗물 재이용 소개" />
</div>
</section>
@@ -68,7 +74,7 @@ export default function RainwaterReusePage() {
<section className="mt-6">
<SectionTitle>빗물이용시설 설치 관리 법적 의무 대상</SectionTitle>
<div className="mt-8">
<ImgCard src="/images/landing/intro/rainreuse_mandatory.png" alt="법적 의무 대상 설명" />
<ImgCard src={rainreuseMandatory} alt="법적 의무 대상 설명" />
</div>
</section>
@@ -78,7 +84,7 @@ export default function RainwaterReusePage() {
<section className="mt-6">
<SectionTitle>빗물이용시설 설계 방안</SectionTitle>
<div className="mt-8">
<ImgCard src="/images/landing/intro/rainwater_design.png" alt="빗물이용시설 설계 방안 설명" />
<ImgCard src={rainwaterDesign} alt="빗물이용시설 설계 방안 설명" />
</div>
</section>
@@ -88,7 +94,7 @@ export default function RainwaterReusePage() {
<section className="pb-[200px]">
<SectionTitle>빗물이용시설 시설기준 및 관리기준</SectionTitle>
<div className="mt-8">
<ImgCard src="/images/landing/intro/rainwater_standards.png" alt="빗물이용시설 시설기준 및 관리기준 설명" />
<ImgCard src={rainwaterStandards} alt="빗물이용시설 시설기준 및 관리기준 설명" />
</div>
</section>
</div>
apps/dm_new/app/(with-layout)/intro/sewage/page.tsx
+8 -4
View File
@@ -1,7 +1,10 @@
// apps/dm/app/(landing)/reuse/intro/treated/page.tsx
"use client";
import Image, { type StaticImageData } from "next/image";
import SubPageHeader from "@/components/SubPageHeader";
import treatedwaterIntro from "@/public/images/landing/intro/treatedwater_intro.png";
import treatedwaterMandatory from "@/public/images/landing/intro/treatedwater_mandatory.png";
function SectionTitle({ children }: { children: React.ReactNode }) {
return (
@@ -21,17 +24,18 @@ function Hr({ className = "" }: HrProps) {
}
type ImgCardProps = {
src: string;
src: StaticImageData;
alt: string;
};
function ImgCard({ src, alt }: ImgCardProps) {
return (
<div className="w-full overflow-x-auto">
<img
<Image
src={src}
alt={alt}
className="block mx-auto max-w-none"
style={{ width: "auto", height: "auto" }}
/>
</div>
);
@@ -58,7 +62,7 @@ export default function TreatedWaterPage() {
<section className="mt-6">
<SectionTitle>하수처리수</SectionTitle>
<div className="mt-8">
<ImgCard src="/images/landing/intro/treatedwater_intro.png" alt="하수처리수 설명" />
<ImgCard src={treatedwaterIntro} alt="하수처리수 설명" />
</div>
</section>
@@ -68,7 +72,7 @@ export default function TreatedWaterPage() {
<section className="pb-[200px]">
<SectionTitle>하수처리수 재이용시설 의무 대상</SectionTitle>
<div className="mt-8">
<ImgCard src="/images/landing/intro/treatedwater_mandatory.png" alt="하수처리수 재이용시설 의무 대상 설명" />
<ImgCard src={treatedwaterMandatory} alt="하수처리수 재이용시설 의무 대상 설명" />
</div>
</section>
</div>
apps/dm_new/app/(with-layout)/layout.tsx
+8 -2
View File
@@ -1,13 +1,19 @@
// app/(with-layout)/layout.tsx
/**
* 메인을 제외한 메뉴안 페이지의 layout
*/
import "../reuse.module.css";
import { StoreProvider } from "../store";
import TopNav from "@/components/TopNav";
export default function ReuseLandingLayout({ children }: { children: React.ReactNode }) {
export default function WithLayout({ children }: { children: React.ReactNode }) {
return (
<StoreProvider>
<div className="pt-[83px]">{/* TopNav 높이만큼 */}
<TopNav />
<div className="pt-[83px]">{children}</div> {/* TopNav 높이만큼 */}
<main className="ml-[260px]">{children}</main>{/* Lnb 너비만큼 */}
</div>
</StoreProvider>
);
}
apps/dm_new/app/(with-layout)/status/greywater/page.tsx
+12 -6
View File
@@ -1,7 +1,12 @@
// apps/dm/app/(landing)/reuse/cases/greywater/page.tsx
"use client";
import Image, { type StaticImageData } from "next/image";
import SubPageHeader from "@/components/SubPageHeader";
import greywaterOverall from "@/public/images/landing/cases/greywater_overall.png";
import greywaterFactory from "@/public/images/landing/cases/greywater_factory.png";
import greywaterBuilding from "@/public/images/landing/cases/greywater_building.png";
import greywaterUsage from "@/public/images/landing/cases/greywater_usage.png";
function SectionTitle({ children }: { children: React.ReactNode }) {
return (
@@ -21,17 +26,18 @@ function Hr({ className = "" }: HrProps) {
}
type ImgCardProps = {
src: string;
src: StaticImageData;
alt: string;
};
function ImgCard({ src, alt }: ImgCardProps) {
return (
<div className="w-full overflow-x-auto">
<img
<Image
src={src}
alt={alt}
className="block mx-auto max-w-none"
style={{ width: "auto", height: "auto" }}
/>
</div>
);
@@ -58,7 +64,7 @@ export default function GreywaterPage() {
<section className="mt-6">
<SectionTitle>전체 중수도 설치 및 이용 현황 (공장 및 발전시설 제외)</SectionTitle>
<div className="mt-8">
<ImgCard src="/images/landing/cases/greywater_overall.png" alt="전체 중수도 설치 및 이용 현황 설명" />
<ImgCard src={greywaterOverall} alt="전체 중수도 설치 및 이용 현황 설명" />
</div>
</section>
@@ -68,7 +74,7 @@ export default function GreywaterPage() {
<section>
<SectionTitle>공장 및 발전시설 내 중수도 설치 및 이용 현황</SectionTitle>
<div className="mt-8">
<ImgCard src="/images/landing/cases/greywater_factory.png" alt="공장 및 발전시설 내 중수도 설치 및 이용 현황 설명" />
<ImgCard src={greywaterFactory} alt="공장 및 발전시설 내 중수도 설치 및 이용 현황 설명" />
</div>
</section>
@@ -78,7 +84,7 @@ export default function GreywaterPage() {
<section className="pb-16">
<SectionTitle>중수도 건축물별 이용량 현황</SectionTitle>
<div className="mt-8">
<ImgCard src="/images/landing/cases/greywater_building.png" alt="중수도 건축물별 이용량 현황 설명" />
<ImgCard src={greywaterBuilding} alt="중수도 건축물별 이용량 현황 설명" />
</div>
</section>
@@ -88,7 +94,7 @@ export default function GreywaterPage() {
<section className="pb-[200px]">
<SectionTitle>중수도 용도별 이용량 현황</SectionTitle>
<div className="mt-8">
<ImgCard src="/images/landing/cases/greywater_usage.png" alt="중수도 용도별 이용량 현황 설명" />
<ImgCard src={greywaterUsage} alt="중수도 용도별 이용량 현황 설명" />
</div>
</section>
</div>
apps/dm_new/app/(with-layout)/status/rain/page.tsx
+10 -5
View File
@@ -1,7 +1,11 @@
// apps/dm/app/(landing)/reuse/cases/rain/page.tsx
"use client";
import Image, { type StaticImageData } from "next/image";
import SubPageHeader from "@/components/SubPageHeader";
import rainwaterBuilding from "@/public/images/landing/cases/rainwater_building.png";
import rainwaterUsage from "@/public/images/landing/cases/rainwater_usage.png";
import rainwaterUsageAmount from "@/public/images/landing/cases/rainwater_usage_amount.png";
function SectionTitle({ children }: { children: React.ReactNode }) {
return (
@@ -21,17 +25,18 @@ function Hr({ className = "" }: HrProps) {
}
type ImgCardProps = {
src: string;
src: StaticImageData;
alt: string;
};
function ImgCard({ src, alt }: ImgCardProps) {
return (
<div className="w-full overflow-x-auto">
<img
<Image
src={src}
alt={alt}
className="block mx-auto max-w-none"
style={{ width: "auto", height: "auto" }}
/>
</div>
);
@@ -58,7 +63,7 @@ export default function GreywaterPage() {
<section className="mt-6">
<SectionTitle>빗물이용시설의 건축물별 빗물이용량 현황</SectionTitle>
<div className="mt-8">
<ImgCard src="/images/landing/cases/rainwater_building.png" alt="빗물이용시설의 건축물별 빗물이용량 현황 설명" />
<ImgCard src={rainwaterBuilding} alt="빗물이용시설의 건축물별 빗물이용량 현황 설명" />
</div>
</section>
@@ -68,7 +73,7 @@ export default function GreywaterPage() {
<section>
<SectionTitle>빗물이용시설의 용도별 분포 (2023년 기준)</SectionTitle>
<div className="mt-8">
<ImgCard src="/images/landing/cases/rainwater_usage.png" alt="빗물이용시설의 용도별 분포 설명" />
<ImgCard src={rainwaterUsage} alt="빗물이용시설의 용도별 분포 설명" />
</div>
</section>
@@ -78,7 +83,7 @@ export default function GreywaterPage() {
<section className="pb-[200px]">
<SectionTitle>빗물이용시설의 용도별 빗물이용량 현황</SectionTitle>
<div className="mt-8">
<ImgCard src="/images/landing/cases/rainwater_usage_amount.png" alt="빗물이용시설의 용도별 빗물이용량 현황 설명" />
<ImgCard src={rainwaterUsageAmount} alt="빗물이용시설의 용도별 빗물이용량 현황 설명" />
</div>
</section>
</div>
apps/dm_new/app/(with-layout)/status/sewage/page.tsx
+12 -6
View File
@@ -1,7 +1,12 @@
// apps/dm/app/(landing)/reuse/cases/treated/page.tsx
"use client";
import Image, { type StaticImageData } from "next/image";
import SubPageHeader from "@/components/SubPageHeader";
import treatedWaterYear from "@/public/images/landing/cases/treated_water_year.png";
import treatedWaterUsage from "@/public/images/landing/cases/treated_water_usage.png";
import treatedWaterFacility from "@/public/images/landing/cases/treated_water_facility.png";
import treatedWaterRegion from "@/public/images/landing/cases/treated_water_region.png";
function SectionTitle({ children }: { children: React.ReactNode }) {
return (
@@ -21,17 +26,18 @@ function Hr({ className = "" }: HrProps) {
}
type ImgCardProps = {
src: string;
src: StaticImageData;
alt: string;
};
function ImgCard({ src, alt }: ImgCardProps) {
return (
<div className="w-full overflow-x-auto">
<img
<Image
src={src}
alt={alt}
className="block mx-auto max-w-none"
style={{ width: "auto", height: "auto" }}
/>
</div>
);
@@ -58,7 +64,7 @@ export default function GreywaterPage() {
<section className="mt-6">
<SectionTitle>연도별 하수처리수 재이용 현황</SectionTitle>
<div className="mt-8">
<ImgCard src="/images/landing/cases/treated_water_year.png" alt="연도별 하수처리수 재이용 현황 설명" />
<ImgCard src={treatedWaterYear} alt="연도별 하수처리수 재이용 현황 설명" />
</div>
</section>
@@ -68,7 +74,7 @@ export default function GreywaterPage() {
<section>
<SectionTitle>용도별 하수처리수 재이용 현황</SectionTitle>
<div className="mt-8">
<ImgCard src="/images/landing/cases/treated_water_usage.png" alt="용도별 하수처리수 재이용 현황 설명" />
<ImgCard src={treatedWaterUsage} alt="용도별 하수처리수 재이용 현황 설명" />
</div>
</section>
@@ -78,7 +84,7 @@ export default function GreywaterPage() {
<section>
<SectionTitle>하수처리시설 설치 및 이용 현황</SectionTitle>
<div className="mt-8">
<ImgCard src="/images/landing/cases/treated_water_facility.png" alt="하수처리시설 설치 및 이용 현황 설명" />
<ImgCard src={treatedWaterFacility} alt="하수처리시설 설치 및 이용 현황 설명" />
</div>
</section>
@@ -88,7 +94,7 @@ export default function GreywaterPage() {
<section className="pb-[200px]">
<SectionTitle>시도별 하수처리수 재이용 현황</SectionTitle>
<div className="mt-8">
<ImgCard src="/images/landing/cases/treated_water_region.png" alt="시도별 하수처리수 재이용 현황 설명" />
<ImgCard src={treatedWaterRegion} alt="시도별 하수처리수 재이용 현황 설명" />
</div>
</section>
</div>
apps/dm_new/app/main/_hooks/useScrollSpy.ts
+15 -7
View File
@@ -1,9 +1,19 @@
"use client";
import { useEffect, useRef, useState } from "react";
const DEFAULT_THRESHOLD = [0, 0.01, 0.1, 0.25, 0.5, 0.75];
export function useScrollSpy(sectionIds: string[], options?: IntersectionObserverInit) {
const [activeId, setActiveId] = useState(sectionIds[0] ?? "");
const ratiosRef = useRef<Map<string, number>>(new Map());
const activeIdRef = useRef(activeId);
useEffect(() => {
activeIdRef.current = activeId;
}, [activeId]);
const threshold = options?.threshold ?? DEFAULT_THRESHOLD;
const thresholdKey = Array.isArray(threshold) ? threshold.join("|") : String(threshold);
useEffect(() => {
const els = sectionIds
@@ -26,7 +36,7 @@ export function useScrollSpy(sectionIds: string[], options?: IntersectionObserve
}
// ✅ 전체 섹션 중 가장 ratio 큰 항목을 active로
let bestId = activeId;
let bestId = activeIdRef.current;
let bestRatio = -1;
for (const [id, ratio] of ratiosRef.current.entries()) {
@@ -39,17 +49,15 @@ export function useScrollSpy(sectionIds: string[], options?: IntersectionObserve
if (bestId) setActiveId(bestId);
},
{
root: null,
threshold: [0, 0.01, 0.1, 0.25, 0.5, 0.75],
rootMargin: DEFAULT_ROOT_MARGIN,
...options,
root: options?.root ?? null,
threshold,
rootMargin: options?.rootMargin ?? DEFAULT_ROOT_MARGIN,
}
);
els.forEach((el) => io.observe(el));
return () => io.disconnect();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [sectionIds.join("|"), options?.rootMargin, JSON.stringify(options?.threshold)]);
}, [sectionIds, options?.root, options?.rootMargin, threshold, thresholdKey]);
return activeId;
}
apps/dm_new/app/main/_sections/Cases.tsx
+6 -2
View File
@@ -1,6 +1,9 @@
// apps/dm/app/(landing)/reuse/_sections/Cases.tsx
"use client";
import Image from "next/image";
import section03 from "@/public/images/landing/section_03.png";
export default function Cases() {
return (
<section id="cases" className="bg-[#EAF6F6]">
@@ -50,10 +53,11 @@ export default function Cases() {
w-full max-w-[720px]
"
>
<img
src="/images/landing/section_03.png"
<Image
src={section03}
alt="물 재이용 현황 데이터 테이블"
className="w-full h-auto object-cover"
style={{ width: "100%", height: "auto" }}
/>
</div>
</div>
apps/dm_new/app/main/_sections/Hero.tsx
+8 -1
View File
@@ -1,4 +1,5 @@
// app/main/_sections/Hero.tsx
import Image from "next/image";
import styles from "../../reuse.module.css";
export default function Hero() {
@@ -21,7 +22,13 @@ export default function Hero() {
</div>
</div>
<div className="absolute inset-x-0 bottom-[120px] flex flex-col items-center justify-items-center gap-2 mt-10">
<img src="/images/landing/scroll_down.svg" alt="" className="w-[26px] h-[40px]" />
<Image
src="/images/landing/scroll_down.svg"
alt=""
width={26}
height={40}
className="w-[26px] h-[40px]"
/>
<span className="text-white/80 text-base tracking-[.25em]">scroll down</span>
</div>
</section>
apps/dm_new/app/main/_sections/IntroCards.tsx
+13 -6
View File
@@ -1,12 +1,17 @@
// apps/dm/app/(landing)/reuse/_sections/IntroCards.tsx
"use client";
import Image, { type StaticImageData } from "next/image";
import Link from "next/link";
import card01 from "@/public/images/landing/card_01.jpg";
import card02 from "@/public/images/landing/card_02.jpg";
import card03 from "@/public/images/landing/card_03.jpg";
import card04 from "@/public/images/landing/card_04.jpg";
type IntroCardItem = {
title: string;
desc: string;
image: string;
image: StaticImageData;
href: string;
};
@@ -14,25 +19,25 @@ const INTRO_CARDS: IntroCardItem[] = [
{
title: "물 재이용 법",
desc: "물의 재이용 촉진 및 지원에 관한 법률을 시행하고, 일부 법률은 개정되었습니다.",
image: "/images/landing/card_01.jpg",
image: card01,
href: "/reuse/intro/law",
},
{
title: "친환경 수자원 빗물",
desc: "가뭄을 극복하고 홍수를 예방하기 위해 비가 내릴 때 빗물을 모아두었다가 사용합니다.",
image: "/images/landing/card_02.jpg",
image: card02,
href: "/reuse/intro/rain",
},
{
title: "알뜰하게 재이용되는 중수",
desc: "한번 사용한 물을 중수도 시설을 통해 재생하여 개별적 또는 지역적으로 재이용할 수 있습니다.",
image: "/images/landing/card_03.jpg",
image: card03,
href: "/reuse/intro/greywater",
},
{
title: "하수처리수 재이용",
desc: "사용하고 버려진 공공하수처리장으로 모여진 물을 용도에 맞는 처리 후 재이용 할 수 있습니다.",
image: "/images/landing/card_04.jpg",
image: card04,
href: "/reuse/intro/treated",
},
];
@@ -61,9 +66,11 @@ export default function IntroCards() {
className="group relative h-[280px] md:h-[320px] lg:h-[500px] overflow-hidden rounded-2xl cursor-pointer focus:outline-none focus:ring-2 focus:ring-sky-400/60"
>
{/* 배경 이미지 (이미 그라디언트 포함) */}
<img
<Image
src={card.image}
alt={card.title}
fill
sizes="(min-width: 1024px) 25vw, (min-width: 768px) 50vw, 100vw"
className="absolute inset-0 h-full w-full object-cover transition-transform duration-500 hover:scale-105"
/>
apps/dm_new/app/main/page.tsx
+3 -1
View File
@@ -1,6 +1,7 @@
// apps/dm/app/(landing)/reuse/page.tsx
"use client";
import { useMemo } from "react";
import TopNav from "@/components/TopNav";
import SideIndicator from "./SideIndicator";
import { useScrollSpy } from "./_hooks/useScrollSpy";
@@ -30,7 +31,8 @@ const LANDING_SECTIONS = [
];
export default function ReuseLandingPage() {
const activeId = useScrollSpy(LANDING_SECTIONS.map((s) => s.id));
const sectionIds = useMemo(() => LANDING_SECTIONS.map((s) => s.id), []);
const activeId = useScrollSpy(sectionIds);
return (
<main className="bg-white">
apps/dm_new/components/CandidateSiteModal.tsx
+327
View File
@@ -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>
);
}
apps/dm_new/components/CaseImageSlider.tsx
+11 -3
View File
@@ -1,6 +1,7 @@
// apps/dm/app/(landing)/reuse/_components/ImageSlider.tsx
"use client";
import Image from "next/image";
import { useEffect, useMemo, useRef, useState } from "react";
type Slide = { src: string; alt?: string };
@@ -86,9 +87,11 @@ export default function CaseImageSlider({
w-[80px] h-[80px] rounded-full border border-black/20 bg-white
grid place-items-center shadow-sm hover:bg-black/[0.03]"
>
<img
<Image
src="/images/landing/icon_left_arrow.png"
alt="이전"
width={12}
height={22}
className="w-[12px] h-[22px]"
/>
</button>
@@ -102,9 +105,11 @@ export default function CaseImageSlider({
w-[80px] h-[80px] rounded-full border border-black/20 bg-white
grid place-items-center shadow-sm hover:bg-black/[0.03]"
>
<img
<Image
src="/images/landing/icon_right_arrow.png"
alt="다음"
width={12}
height={22}
className="w-[12px] h-[22px]"
/>
</button>
@@ -129,10 +134,13 @@ export default function CaseImageSlider({
>
{safeSlides.map((s, i) => (
<div key={`${s.src}-${i}`} className="min-w-full">
<img
<Image
src={s.src}
alt={s.alt ?? `slide-${i + 1}`}
width={583}
height={400}
className="w-full h-full object-contain"
style={{ width: "100%", height: "100%" }}
draggable={false}
/>
</div>
apps/dm_new/components/CaseTabsCarousel.tsx
+11 -3
View File
@@ -8,6 +8,7 @@ import React, {
useRef,
useState,
} from "react";
import Image from "next/image";
/**
* CaseTabsCarousel.tsx (FINAL OPTIMIZED)
@@ -459,9 +460,11 @@ export default function CaseTabsCarousel() {
].join(" ")}
aria-label="이전"
>
<img
<Image
src="/images/landing/icon_left_arrow.png"
alt="이전"
width={24}
height={24}
className="w-6 h-6 object-contain"
/>
</button>
@@ -480,9 +483,11 @@ export default function CaseTabsCarousel() {
].join(" ")}
aria-label="다음"
>
<img
<Image
src="/images/landing/icon_right_arrow.png"
alt="다음"
width={24}
height={24}
className="w-6 h-6 object-contain"
/>
</button>
@@ -513,10 +518,13 @@ export default function CaseTabsCarousel() {
className="overflow-hidden rounded-[22px] border-2 border-sky-400 bg-white"
>
<div className="h-[241px] w-full bg-slate-100 border-b border-b-blue-300">
<img
<Image
src={c.imageSrc}
alt={c.title}
width={640}
height={241}
className="h-full w-full object-cover"
style={{ width: "100%", height: "100%" }}
loading="lazy"
/>
</div>
apps/dm_new/components/ImageSlider.tsx
+11 -3
View File
@@ -1,6 +1,7 @@
// apps/dm/app/(landing)/reuse/_components/ImageSlider.tsx
"use client";
import Image from "next/image";
import { useEffect, useMemo, useRef, useState } from "react";
type Slide = { src: string; alt?: string };
@@ -86,9 +87,11 @@ export default function CaseImageSlider({
w-[80px] h-[80px] rounded-full border border-black/20 bg-white
grid place-items-center shadow-sm hover:bg-black/[0.03]"
>
<img
<Image
src="/images/landing/icon_left_arrow.png"
alt="이전"
width={12}
height={22}
className="w-[12px] h-[22px]"
/>
</button>
@@ -102,9 +105,11 @@ export default function CaseImageSlider({
w-[80px] h-[80px] rounded-full border border-black/20 bg-white
grid place-items-center shadow-sm hover:bg-black/[0.03]"
>
<img
<Image
src="/images/landing/icon_right_arrow.png"
alt="다음"
width={12}
height={22}
className="w-[12px] h-[22px]"
/>
</button>
@@ -129,10 +134,13 @@ export default function CaseImageSlider({
>
{safeSlides.map((s, i) => (
<div key={`${s.src}-${i}`} className="min-w-full">
<img
<Image
src={s.src}
alt={s.alt ?? `slide-${i + 1}`}
width={583}
height={400}
className="w-full h-full object-contain"
style={{ width: "100%", height: "100%" }}
draggable={false}
/>
</div>
apps/dm_new/components/Lnb.tsx
+15 -2
View File
@@ -1,5 +1,6 @@
"use client";
import Image from "next/image";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useEffect, useMemo, useState } from "react";
@@ -68,11 +69,21 @@ export default function Lnb() {
}, [pathname, secondLevelMenus]);
return (
<aside className="w-[260px] min-w-[260px] shrink-0">
<aside
className={[
"fixed left-0 top-[83px]", // ✅ 화면 고정 + TopNav 아래로
"w-[260px] min-w-[260px] shrink-0",
"h-[calc(100vh-83px)]", // ✅ 남은 높이만큼
"overflow-y-auto", // ✅ LNB 내부 스크롤
"bg-white z-50", // ✅ 겹침 방지
].join(" ")}
>
{/* 타이틀 */}
<div className="flex h-[120px] items-center justify-center bg-gradient-to-r from-cyan-500 to-green-500 text-[40px] font-bold text-white">
{currentTopMenu?.menuKornNm?.trim().split(/\s+/).pop() ?? ""}
</div>
{/* 메뉴 */}
<ul>
{secondLevelMenus.map((item) => {
const hasChildren = hasAnyChild(item);
@@ -120,9 +131,11 @@ export default function Lnb() {
isOpen ? "rotate-180" : "rotate-0",
].join(" ")}
>
<img
<Image
src="/images/landing/drop_arrow.svg"
alt="menu toggle icon"
width={28}
height={28}
className="h-7 w-7"
/>
</span>
apps/dm_new/eslint.config.mjs
+1 -1
View File
@@ -24,7 +24,7 @@ const eslintConfig = [
{rules:{
// other rules..
"@typescript-eslint/no-explicit-any": "off",
"@next/next/no-img-element": "off",
// "@next/next/no-img-element": "off",
...(isProd ? { "react-hooks/exhaustive-deps": "off" } : {}),
}},
];
apps/dm_new/package.json
+1 -1
View File
@@ -5,7 +5,7 @@
"scripts": {
"dev": "next dev -p 3015",
"build": "next build",
"start:dm": "next start -p 3015",
"start:dm_new": "next start -p 3015",
"lint": "next lint"
},
"dependencies": {
apps/sn/AGENTS.md
+35
View File
@@ -0,0 +1,35 @@
## Project
This repository contains a Next.js web application.
Main technologies:
- Next.js
- TypeScript
- pnpm workspace
- turborepo
이 저장소는 pnpm workspace + Turborepo 기반 monorepo이다.
- 워크스페이스 범위는 `apps/*`, `apps/common/*`, `packages/*`, `packages/common/*`
- 루트 스크립트는 `turbo run build`, `turbo run dev` 를 사용한다
- `build` 작업은 의존 패키지의 `build` 를 먼저 수행한다 (`dependsOn: ["^build"]`)
- `dev` 는 캐시하지 않는 지속 실행 작업이다
- 변경 범위만 선택 실행할 수 있으므로, 전체 빌드보다 `--filter` 사용을 우선한다
## Encoding
- UTF-8
- 한글이 깨지지 않도록 주의할 것
## Monorepo structure
apps/
_template
as
cm
cs
dc
dm
dm_new
fo
sn
st
wr
apps/sn/app/(map-layout)/map/components/common/table.ts
+6 -6
View File
@@ -493,8 +493,8 @@ export const MsSwageMhlCol = [
{ id: 'wdth_len', title: '가로길이(m)' },
{ id: 'vrtc_len', title: '세로길이(m)' },
// { id: 'ang_dir', title: '표고' },
{ id: 'altd_vl', title: '표고(EL.m)' },
{ id: 'dpthl_vl', title: '심도(m)' },
{ id: 'altd_vl', title: '지표고(EL.m)' },
{ id: 'dpthl_vl', title: '맨홀저고(EL.m)' },
// { id: 'inst_mng_no', title: '기관관리번호' }
];
export const MsSwageMhlCol2 = [
@@ -518,8 +518,8 @@ export const MsSwageMhlCol2 = [
{ id: 'wdthLen', title: '가로길이(m)' },
{ id: 'vrtcLen', title: '세로길이(m)' },
// { id: 'angDir', title: '표고' },
{ id: 'altdVl', title: '표고(EL.m)' },
{ id: 'dpthlVl', title: '심도(m)' },
{ id: 'altdVl', title: '지표고(EL.m)' },
{ id: 'dpthlVl', title: '맨홀저고(EL.m)' },
// { id: 'instMngNo', title: '기관관리번호' }
];
export const MsSwageMhlExcelCol = {
@@ -531,8 +531,8 @@ export const MsSwageMhlExcelCol = {
'swageMhlDiamVl': '하수맨홀구경(mm)',
'wdthLen': '가로길이(m)',
'vrtcLen': '세로길이(m)',
'altdVl': '표고(EL.m)',
'dpthlVl': '심도(m)'
'altdVl': '지표고(EL.m)',
'dpthlVl': '맨홀저고(EL.m)'
};
// 하수맨홀 뚜껑재질 코드표
export const MS_SWAGE_MHL_CODES = [
apps/sn/app/(map-layout)/map/page.tsx
+3
View File
@@ -171,6 +171,9 @@ const Map = () => {
setIsPlaying={setIsPlaying as any}
targetLayerTypes={WATER_DEPTH_LAYER_TYPES as any}
checkInterval={2500}
defaultZoom={7.5}
defaultLonLat={[127.75, 36]}
/>
</div>
</>
apps/sn/app/(map-layout)/map/waterDepth/waterDepth.tsx
+2 -2
View File
@@ -16,8 +16,8 @@ import { Label } from "@common/components/ui/label";
import { useEffect } from "react";
export const WATER_DEPTH_LAYER_TYPES: string[] = [
'tb_ms_flood_dngr_map',
'tb_ms_sbmrg_dngr_map'
'tb_ms_flood_dngr_map', // 홍수위험지도
'tb_ms_sbmrg_dngr_map' // 침수위험지도
];
interface WaterDepthProps {
packages/common/business_components/src/ui/map/searchBar/procSearchBar.tsx
+98 -73
View File
@@ -1,13 +1,16 @@
"use client";
import { SelectBox, type SelectDataType } from "../../../ui";
import { Button } from "@common/components/ui";
import { useCallback, useEffect, useState } from "react";
import GisApp from "../lib/gis.core";
import { moveMapToCenter, sidoCenter, sigunguCenter } from "./utils";
// import { getGeometryCenter } from "./utils";
const geoserverUrl =
"/geoserver/hasudo/ows?service=WFS&version=1.0.0&request=GetFeature&outputFormat=application/json";
const FACILITY_TYPE_URL_MAP: Record<string, string> = {
tb_il_swage_prcs_fclt: geoserverUrl, //하수처리시설
tb_il_swage_prcs_fclt: geoserverUrl,
};
interface SearchBarProps {
@@ -15,29 +18,40 @@ interface SearchBarProps {
facilityTypes: { text: string; val: string }[];
}
interface CenterSelectDataType extends SelectDataType {
center?: [number, number]; // 좌표 중심 위치
}
export const ProcSearchBar = ({ gisMaps, facilityTypes }: SearchBarProps) => {
const [sidoValue, setSidoValue] = useState("0");
const [sigunValue, setSigunValue] = useState("0");
const [sidoData, setSidoData] = useState<SelectDataType[]>([{ text: "시도", val: "0" }]);
const [sigunData, setSigunData] = useState<SelectDataType[]>([{ text: "시군구", val: "0" }]);
const [filteredSigunData, setFilteredSigunData] = useState<SelectDataType[]>([{ text: "시군구", val: "0" }]);
const [facilityData, setFacilityData] = useState<SelectDataType[]>([{ text: "하수처리시설", val: "0" }]);
const [sidoData, setSidoData] = useState<CenterSelectDataType[]>([
{ text: "시도", val: "0" },
]);
const [sigunData, setSigunData] = useState<CenterSelectDataType[]>([
{ text: "시군구", val: "0" },
]);
const [filteredSigunData, setFilteredSigunData] = useState<CenterSelectDataType[]>([
{ text: "시군구", val: "0" },
]);
const [facilityData, setFacilityData] = useState<SelectDataType[]>([
{ text: "하수처리시설", val: "0" },
]);
const [facilityValue, setFacilityValue] = useState("0");
const [facilityType, setFacilityType] = useState(
facilityTypes?.length === 1 && facilityTypes[0]
? facilityTypes[0].val
: "0",
facilityTypes?.length === 1 && facilityTypes[0] ? facilityTypes[0].val : "0",
);
const fetchSido = async () => {
const url = `/geoserver/hasudo/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=hasudo:tb_ms_ctpv&outputFormat=application/json&propertyName=mctpv_korn_nm,mctpv_cd`;
const res = await fetch(url).then(res => res.json());
const res = await fetch(url).then((r) => r.json());
const list = res.features
const list = (res.features || [])
.map((f: any) => ({
text: f.properties.mctpv_korn_nm,
val: f.properties.mctpv_cd,
center: sidoCenter[f.properties.mctpv_cd?.trim()] //getGeometryCenter(f.geometry) ?? undefined,
}))
.sort((a: any, b: any) => {
// 커스텀 순서 정의
@@ -81,18 +95,20 @@ export const ProcSearchBar = ({ gisMaps, facilityTypes }: SearchBarProps) => {
const fetchSigungu = async () => {
const url = `/geoserver/hasudo/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=hasudo:tb_ms_sgg&outputFormat=application/json&propertyName=sgg_cd,sgg_korn_nm`;
const res = await fetch(url).then(res => res.json());
//const url = `/geoserver/hasudo/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=hasudo:tb_ms_sgg&srsName=${GisApp.TO_PROJ}&outputFormat=application/json&propertyName=sgg_cd,sgg_korn_nm,geom`;
const res = await fetch(url).then((r) => r.json());
const list = res.features
const list = (res.features || [])
.map((f: any) => ({
text: f.properties.sgg_korn_nm,
val: f.properties.sgg_cd,
center: sigunguCenter[f.properties.sgg_cd?.trim()] //getGeometryCenter(f.geometry) ?? undefined,
}))
.sort((a: any, b: any) => a.text.localeCompare(b.text, 'ko'));
.sort((a: any, b: any) => a.text.localeCompare(b.text, "ko"));
setSigunData(list);
};
//시설명 콤보박스 조회
const fetchFacilitiesBySggNm = async (
sggCd: string,
sggNm: string,
@@ -114,23 +130,18 @@ export const ProcSearchBar = ({ gisMaps, facilityTypes }: SearchBarProps) => {
let list: SelectDataType[] = [];
if (
type === "tb_il_swage_prcs_fclt" //하수처리시설
) {
if (type === "tb_il_swage_prcs_fclt") {
const cqlFilter = `ctpv_nm='${encodeURIComponent(sidoNm)}' AND sgg_nm='${encodeURIComponent(sggNm)}'`;
url = `${url}&typeName=hasudo:${type}&cql_filter=${cqlFilter}`;
const res = await fetch(url);
const json = await res.json();
list = json.features
list = (json.features || [])
.map((f: any) => ({
text: f.properties.swtrmt_fclt_nm ?? "(이름없음)",
val: f.id,
}))
.sort((a: any, b: any) => a.text.localeCompare(b.text, 'ko'));
} else if (
type === "tb_wr_bdst_ruse_fclt" // 재이용시설
) {
//재용에서 참조하는 하수처리시설 목록
.sort((a: any, b: any) => a.text.localeCompare(b.text, "ko"));
} else if (type === "tb_wr_bdst_ruse_fclt") {
const paramsRes = await fetch("/reuse-service/reuseFc/pubFc");
const paramsJson = await paramsRes.json();
const params = paramsJson.data;
@@ -148,19 +159,14 @@ export const ProcSearchBar = ({ gisMaps, facilityTypes }: SearchBarProps) => {
text: item.ruseUtztnFcltNm ?? "(이름없음)",
val: item.pbnstRuseFcltId,
}));
} else if (
type === "tb_wr_ruse_fclt_dmd_co" //수요처
) {
} else if (type === "tb_wr_ruse_fclt_dmd_co") {
const res = await fetch(url);
const json = await res.json();
list = (json.data || []).map((item: any) => ({
text: item.dmdCoNm ?? "(이름없음)",
val: item.dmdInfoId,
}));
} else if (
type === "tb_wr_tmpr_dmd_co" //잠재수요처
) {
// GET 방식
} else if (type === "tb_wr_tmpr_dmd_co") {
const res = await fetch(url);
const json = await res.json();
list = (json.data || []).map((item: any) => ({
@@ -168,7 +174,6 @@ export const ProcSearchBar = ({ gisMaps, facilityTypes }: SearchBarProps) => {
val: item.fctryMngSn,
}));
} else {
// GET 방식
const res = await fetch(url);
const json = await res.json();
list = (json.data || []).map((item: any) => ({
@@ -177,27 +182,25 @@ export const ProcSearchBar = ({ gisMaps, facilityTypes }: SearchBarProps) => {
}));
}
// 가나다순 정렬 후 set
const sorted = list.slice().sort((a, b) => a.text.localeCompare(b.text, 'ko'));
setFacilityData([{ text: "시도", val: "0" }, ...sorted]);
const sorted = list.slice().sort((a, b) => a.text.localeCompare(b.text, "ko"));
setFacilityData([{ text: "하수처리시설", val: "0" }, ...sorted]);
setFacilityValue("0");
};
//시도, 시군구 초기 데이터 조회
useEffect(() => {
fetchSido();
fetchSigungu();
}, []);
//시군구 데이터 초기화
const initializeSigunData = useCallback(
(sidoCd: string) => {
if (sidoCd === "0") {
(nextSidoCd: string) => {
if (nextSidoCd === "0") {
setFilteredSigunData([{ text: "시군구", val: "0" }]);
setSigunValue("0");
return;
}
const prefix = sidoCd.substring(0, 2);
const prefix = nextSidoCd.substring(0, 2);
const filtered = sigunData.filter((item) => item.val.startsWith(prefix));
setFilteredSigunData([{ text: "시군구", val: "0" }, ...filtered]);
setSigunValue("0");
@@ -205,7 +208,6 @@ export const ProcSearchBar = ({ gisMaps, facilityTypes }: SearchBarProps) => {
[sigunData],
);
//콤보박스 선택시 연관 콤보박스 처리
const onSelectValue = useCallback(
(val: string, type: string) => {
if (type === "ctpvCd") {
@@ -213,54 +215,78 @@ export const ProcSearchBar = ({ gisMaps, facilityTypes }: SearchBarProps) => {
initializeSigunData(val);
setFacilityData([{ text: "하수처리시설", val: "0" }]);
setFacilityValue("0");
} else if (type === "sggCd") {
return;
}
if (type === "sggCd") {
setSigunValue(val);
const sidoNm =
sidoData.find((item) => item.val === sidoValue)?.text || "";
const sidoNm = sidoData.find((item) => item.val === sidoValue)?.text || "";
const sggNm = sigunData.find((item) => item.val === val)?.text || "";
const sggCd = sigunData.find((item) => item.val === val)?.val || "";
if (sggNm && sidoNm)
fetchFacilitiesBySggNm(sggCd, sggNm, sidoNm, facilityType);
} else if (type === "facilityType") {
if (sggNm && sidoNm) fetchFacilitiesBySggNm(sggCd, sggNm, sidoNm, facilityType);
return;
}
if (type === "facilityType") {
setFacilityType(val);
setFacilityValue("0");
setFacilityData([{ text: "하수처리시설", val: "0" }]);
const sidoNm =
sidoData.find((item) => item.val === sidoValue)?.text || "";
const sggNm =
sigunData.find((item) => item.val === sigunValue)?.text || "";
const sggCd =
sigunData.find((item) => item.val === sigunValue)?.val || "";
const sidoNm = sidoData.find((item) => item.val === sidoValue)?.text || "";
const sggNm = sigunData.find((item) => item.val === sigunValue)?.text || "";
const sggCd = sigunData.find((item) => item.val === sigunValue)?.val || "";
if (sggNm && sidoNm) fetchFacilitiesBySggNm(sggCd, sggNm, sidoNm, val);
} else if (type === "fcltCd") {
setFacilityValue(val);
return;
}
// 하수처리시설일 때 바로 handleFeatureFocus 호출
if (type === "fcltCd") {
setFacilityValue(val);
if (val !== "0") {
handleFeatureFocus({
fid: val,
layerNm: "tb_il_swage_prcs_fclt", // 레이어 이름
layerNm: "tb_il_swage_prcs_fclt",
});
}
}
},
[initializeSigunData, sigunData, sigunValue, sidoData, sidoValue],
[initializeSigunData, sigunData, sigunValue, sidoData, sidoValue, facilityType],
);
const handleSearch = useCallback(() => {
if (sidoValue === "0") {
alert("시도를 선택해 주세요");
return;
}
const selectedSido = sidoData.find((item) => item.val === sidoValue);
if (!selectedSido?.center) return;
if (sigunValue !== "0") {
const selectedSigun =
filteredSigunData.find((item) => item.val === sigunValue) ??
sigunData.find((item) => item.val === sigunValue);
if (selectedSigun?.center) {
moveMapToCenter(gisMaps, selectedSigun.center, 12);
return;
}
}
moveMapToCenter(gisMaps, selectedSido.center, 11);
}, [gisMaps, sidoValue, sigunValue, sidoData, filteredSigunData, sigunData]);
const handleFeatureFocus = (data: any) => {
const map = gisMaps.current;
if (!map) {
console.warn("지도가 초기화되지 않았습니다.");
return;
}
// 항상 같은 select 객체 사용
const select = GisApp.Module.select as any;
if (!select) return;
// 1. 기존 선택 초기화
//select.resetSelectedFeature();
// 2. data가 OpenLayers Feature 인스턴스인지 확인
let foundFeature: any = null;
let featureId = data.fid;
const featureId = data.fid;
map
.getLayers()
.getArray()
@@ -271,7 +297,7 @@ export const ProcSearchBar = ({ gisMaps, facilityTypes }: SearchBarProps) => {
if (feature) foundFeature = feature;
}
});
// 3. 피처 선택
if (foundFeature) {
const geometry = foundFeature.getGeometry();
if (geometry) {
@@ -284,7 +310,7 @@ export const ProcSearchBar = ({ gisMaps, facilityTypes }: SearchBarProps) => {
nearest: true,
});
} else {
alert("위치정보를 찾을 수 없습니다.")
alert("위치정보를 찾을 수 없습니다.");
console.warn("geometry를 찾을 수 없습니다:", data);
}
} else {
@@ -303,9 +329,7 @@ export const ProcSearchBar = ({ gisMaps, facilityTypes }: SearchBarProps) => {
selectClass="rounded-lg bg-white"
label=""
selectArray={sidoData}
onSelectValue={(val: any) =>
onSelectValue(val.toString(), "ctpvCd")
}
onSelectValue={(val: any) => onSelectValue(val.toString(), "ctpvCd")}
value={sidoValue}
/>
<SelectBox
@@ -314,9 +338,7 @@ export const ProcSearchBar = ({ gisMaps, facilityTypes }: SearchBarProps) => {
selectClass="rounded-lg bg-white"
label=""
selectArray={filteredSigunData}
onSelectValue={(val: any) =>
onSelectValue(val.toString(), "sggCd")
}
onSelectValue={(val: any) => onSelectValue(val.toString(), "sggCd")}
value={sigunValue}
/>
<SelectBox
@@ -325,11 +347,14 @@ export const ProcSearchBar = ({ gisMaps, facilityTypes }: SearchBarProps) => {
selectClass="rounded-lg bg-white"
label=""
selectArray={facilityData}
onSelectValue={(val: any) =>
onSelectValue(val.toString(), "fcltCd")
}
onSelectValue={(val: any) => onSelectValue(val.toString(), "fcltCd")}
value={facilityValue}
/>
<div className="flex flex-row space-x-2">
<Button color="primary" className="mx-2 mt-1" size="sm" onClick={handleSearch}>
조회
</Button>
</div>
</div>
</div>
</div>
packages/common/business_components/src/ui/map/searchBar/searchBar.tsx
+41 -6
View File
@@ -4,6 +4,7 @@ import { Button } from "@common/components/ui";
import { useCallback, useEffect, useState } from "react";
import SearchInputText from "./SearchInputText";
import GisApp from "../lib/gis.core";
import { moveMapToCenter, sidoCenter, sigunguCenter } from "./utils";
const FACILITY_TYPE_URL_MAP: Record<string, string> = {
tb_il_swage_prcs_fclt:
@@ -29,6 +30,10 @@ interface SearchBarProps {
onInit?: any;
}
interface CenterSelectDataType extends SelectDataType {
center?: [number, number];
}
export const SearchBar = ({
gisMaps,
facilityTypes,
@@ -45,13 +50,13 @@ export const SearchBar = ({
[]
);
const [sidoData, setSidoData] = useState<SelectDataType[]>([
const [sidoData, setSidoData] = useState<CenterSelectDataType[]>([
{ text: "시도", val: "0" },
]);
const [sigunData, setSigunData] = useState<SelectDataType[]>([
const [sigunData, setSigunData] = useState<CenterSelectDataType[]>([
{ text: "시군구", val: "0" },
]);
const [filteredSigunData, setFilteredSigunData] = useState<SelectDataType[]>([
const [filteredSigunData, setFilteredSigunData] = useState<CenterSelectDataType[]>([
{ text: "시군구", val: "0" },
]);
@@ -60,7 +65,11 @@ export const SearchBar = ({
const json = await res.json();
const sidoList = json
.filter((item: any) => item.lwpoCd?.length === 2)
.map((item: any) => ({ val: item.lwpoCd, text: item.lwpoCdNm }))
.map((item: any) => ({
val: item.lwpoCd,
text: item.lwpoCdNm,
center: sidoCenter[item.lwpoCd?.trim()],
}))
.sort((a: any, b: any) => {
// 커스텀 순서 정의
const customOrder = [
@@ -100,7 +109,11 @@ export const SearchBar = ({
});
const sigunList = json
.filter((item: any) => item.lwpoCd?.length > 2)
.map((item: any) => ({ val: item.lwpoCd, text: item.lwpoCdNm }))
.map((item: any) => ({
val: item.lwpoCd,
text: item.lwpoCdNm,
center: sigunguCenter[item.lwpoCd?.trim()],
}))
.sort((a: any, b: any) => a.text.localeCompare(b.text, 'ko'));
setSidoData([{ text: "시도", val: "0" }, ...sidoList]);
setSigunData(sigunList);
@@ -146,7 +159,29 @@ export const SearchBar = ({
);
const handleSearch = async () => {
if (!fcltyNm) return alert("시설명을 입력하세요.");
if (!fcltyNm) {
if (sidoValue === "0") {
alert("시도를 선택해 주세요");
return;
}
const selectedSido = sidoData.find((item) => item.val === sidoValue);
if (!selectedSido?.center) return;
if (sigunValue !== "0") {
const selectedSigun =
filteredSigunData.find((item) => item.val === sigunValue) ??
sigunData.find((item) => item.val === sigunValue);
if (selectedSigun?.center) {
moveMapToCenter(gisMaps, selectedSigun.center, 12);
return;
}
}
moveMapToCenter(gisMaps, selectedSido.center, 11);
return;
}
const sidoNm = sidoData.find((item) => item.val === sidoValue)?.text || "";
const sggNm = sigunData.find((item) => item.val === sigunValue)?.text || "";
packages/common/business_components/src/ui/map/searchBar/utils.ts
+367
View File
@@ -0,0 +1,367 @@
import type { RefObject } from "react";
import { transform } from "ol/proj";
import GisApp from "../lib/gis.core";
export const getGeometryCenter = (geometry: any): [number, number] | null => {
if (!geometry?.coordinates) return null;
let minX = Number.POSITIVE_INFINITY;
let minY = Number.POSITIVE_INFINITY;
let maxX = Number.NEGATIVE_INFINITY;
let maxY = Number.NEGATIVE_INFINITY;
const visit = (coords: any) => {
if (!Array.isArray(coords)) return;
if (
coords.length >= 2 &&
typeof coords[0] === "number" &&
typeof coords[1] === "number"
) {
const x = coords[0];
const y = coords[1];
if (x < minX) minX = x;
if (y < minY) minY = y;
if (x > maxX) maxX = x;
if (y > maxY) maxY = y;
return;
}
coords.forEach(visit);
};
visit(geometry.coordinates);
if (
!Number.isFinite(minX) ||
!Number.isFinite(minY) ||
!Number.isFinite(maxX) ||
!Number.isFinite(maxY)
) {
return null;
}
return [(minX + maxX) / 2, (minY + maxY) / 2];
};
export const getMapCenterCoordinate = (centerCoord: [number, number]): [number, number] => {
const [x, y] = centerCoord;
const looksLikeLonLat = Math.abs(x) <= 180 && Math.abs(y) <= 90;
const looksLikeLatLonSwapped = Math.abs(x) <= 90 && Math.abs(y) <= 180;
if (looksLikeLonLat) {
return transform(centerCoord, GisApp.FROM_PROJ, GisApp.TO_PROJ) as [number, number];
}
if (looksLikeLatLonSwapped) {
return transform([y, x], GisApp.FROM_PROJ, GisApp.TO_PROJ) as [number, number];
}
return centerCoord;
};
export const moveMapToCenter = (
gisMaps: RefObject<any>,
centerCoord?: [number, number],
zoom?: number,
) => {
if (!centerCoord) return;
const map = gisMaps.current;
if (!map?.getView) return;
const view = map.getView();
const center = getMapCenterCoordinate(centerCoord);
if (!Number.isFinite(center[0]) || !Number.isFinite(center[1])) return;
const projection = view.getProjection?.();
const extent = projection?.getExtent?.();
if (extent) {
const [minX, minY, maxX, maxY] = extent;
if (center[0] < minX || center[0] > maxX || center[1] < minY || center[1] > maxY) {
console.warn("중심좌표가 지도 범위를 벗어나 이동을 중단합니다.", { center });
return;
}
}
view.animate({
center,
...(typeof zoom === "number" ? { zoom } : {}),
duration: 500,
});
};
export const sidoCenter: Record<string, [number, number]> = {
"11": [953551.4119216551, 1951826.357686395], // 서울특별시
"26": [1139616.39795744, 1683535.70569214], // 부산광역시
"27": [1101486.7843035748, 1774852.3345170799], // 대구광역시
"28": [923114.560964345, 1943066.5795316151], // 인천광역시
"29": [939294.465052485, 1684630.0528689548], // 광주광역시
"30": [991301.069516585, 1816039.953510165], // 대전광역시
"31": [1155621.6870651902, 1727062.69578941], // 울산광역시
"36": [979381.304388835, 1841430.83666584], // 세종특별자치시
"41": [965621.8990488851, 1954345.5683645], // 경기도
"51": [1065114.938094025, 1980661.8453088552], // 강원특별자치도
"43": [1041183.7558293699, 1848671.9260201901], // 충청북도
"44": [918689.7963483699, 1836216.9375309348], // 충청남도
"52": [949568.330647045, 1748060.215177075], // 전북특별자치도
"46": [906934.38266853, 1637218.959990745], // 전라남도
"47": [1207219.543276005, 1843195.136606685], // 경상북도
"48": [1081504.77257488, 1690185.644486565], // 경상남도
"50": [912295.3285630699, 1508716.724020285], // 제주특별자치도
};
export const sigunguCenter: Record<string, [number, number]> = {
"41820": [994886.197272545, 1979052.53325589], // 가평군
"11680": [961673.31210415, 1944170.63969123], // 강남구
"11740": [968769.7482373801, 1950018.61637764], // 강동구
"51150": [1117008.10469879, 1968660.393087245], // 강릉시
"11305": [957184.89551525, 1960948.17897649], // 강북구
"11500": [940169.1006571399, 1952038.261591505], // 강서구
"26440": [1125722.34144724, 1680630.4026719849], // 강서구
"46810": [933212.18802734, 1624923.4715329101], // 강진군
"28710": [889789.267999845, 1967857.594168955], // 강화군
"48310": [1102135.950034755, 1651860.5015630699], // 거제시
"48880": [1035035.401801025, 1746287.958522825], // 거창군
"47290": [1119807.604852405, 1761907.1228125598], // 경산시
"47130": [1157713.8626030548, 1763907.92371664], // 경주시
"44250": [977015.65488622, 1810444.360246635], // 계룡시
"28245": [932663.7165225251, 1951314.751646345], // 계양구
"47830": [1074241.6005863552, 1748726.26930297], // 고령군
"48820": [1073144.623548525, 1668111.92215727], // 고성군
"51820": [1079906.976889925, 2044841.96337935], // 고성군
"41281": [945034.57886003, 1962467.607140625], // 고양시 덕양구
"41285": [937759.4023643399, 1964877.5403761598], // 고양시 일산동구
"41287": [931767.42700348, 1964473.38259711], // 고양시 일산서구
"52790": [918393.62804468, 1716132.826828825], // 고창군
"46770": [982955.40283695, 1619845.06015117], // 고흥군
"46720": [976956.4637679299, 1689787.68075054], // 곡성군
"44150": [962642.898486655, 1831283.240475945], // 공주시
"41290": [956128.575373195, 1937342.1591869402], // 과천시
"11620": [950816.2708264501, 1940837.18159646], // 관악구
"41210": [943658.93750771, 1938982.666803485], // 광명시
"29200": [931929.616476265, 1685710.56302553], // 광산구
"46230": [1014247.5910250349, 1670923.40464431], // 광양시
"41610": [981367.9647162401, 1933496.23707509], // 광주시
"11215": [963403.339472115, 1949946.5079550901], // 광진구
"43760": [1030949.630659295, 1864086.615596175], // 괴산군
"46730": [999616.7466281, 1692737.2456203648], // 구례군
"11530": [943255.85156361, 1944224.7496726601], // 구로구
"41310": [967836.346287095, 1955821.725581055], // 구리시
"47190": [1076297.5737083051, 1801900.2253747801], // 구미시
"52130": [904674.42544751, 1767715.183037305], // 군산시
"27720": [1103849.611897755, 1797204.1944948], // 군위군
"41410": [948411.5776788951, 1927135.757437655], // 군포시
"44710": [998110.87580872, 1792026.97835628], // 금산군
"26410": [1144696.85330015, 1697028.92074261], // 금정구
"11545": [946955.492372005, 1940271.753176735], // 금천구
"26710": [1155182.296211175, 1700204.308554315], // 기장군
"52210": [935224.890489175, 1755205.56953502], // 김제시
"47150": [1052988.6733146599, 1783129.650228145], // 김천시
"41570": [925936.0119416551, 1965389.1203246699], // 김포시
"48250": [1123054.361467805, 1698359.11561172], // 김해시
"46170": [927543.498211845, 1666547.3264012402], // 나주시
"26290": [1145395.56557786, 1682401.034936155], // 남구
"27200": [1097723.545359045, 1760233.9235273101], // 남구
"29155": [939966.74427248, 1678697.8498475049], // 남구
"31140": [1164388.02782853, 1725008.616189565], // 남구
"28200": [931330.60305263, 1937119.742216935], // 남동구
"41360": [976250.43203106, 1960416.01281481], // 남양주시
"52190": [993534.846345315, 1715101.9621615452], // 남원시
"48840": [1042145.28987352, 1636788.3540021451], // 남해군
"11350": [962686.53614943, 1961831.238915105], // 노원구
"44230": [969310.08745166, 1800569.86826501], // 논산시
"43800": [1083099.584261365, 1887213.24789353], // 단양군
"27290": [1092874.923985485, 1758802.075636735], // 달서구
"27710": [1092556.27778919, 1753550.63671916], // 달성군
"46710": [953252.8048743049, 1699620.87304459], // 담양군
"44270": [922626.193186825, 1879100.4990195702], // 당진시
"30230": [995239.980794815, 1823508.474804295], // 대덕구
"11320": [958705.07469343, 1963040.273132075], // 도봉구
"26170": [1140792.941703185, 1682445.908553165], // 동구
"27140": [1106713.2635032, 1771459.692642915], // 동구
"28140": [923114.560964345, 1943066.5795316151], // 동구
"29110": [950418.0804989601, 1680571.52359467], // 동구
"30110": [998801.519490555, 1813337.0627496801], // 동구
"31170": [1174320.64841428, 1726780.57547608], // 동구
"11230": [960324.5009049701, 1953909.102229775], // 동대문구
"41250": [963148.54470934, 1991284.1699954001], // 동두천시
"26260": [1143854.4548997101, 1691107.4825817398], // 동래구
"11590": [950875.3949149849, 1944274.8505625948], // 동작구
"51170": [1137915.778823135, 1947378.462972425], // 동해시
"11440": [947783.55349907, 1951598.7669664049], // 마포구
"46110": [897040.76889998, 1645038.46904772], // 목포시
"46840": [899587.661355305, 1664175.9893810651], // 무안군
"52730": [1019648.0651991949, 1770211.22681309], // 무주군
"47280": [1055620.11152262, 1855147.380883595], // 문경시
"28177": [926226.3594373399, 1940093.5607894901], // 미추홀구
"48270": [1117632.749546145, 1722736.830743895], // 밀양시
"44180": [896412.984839845, 1817364.412693855], // 보령시
"46780": [974939.082074685, 1646364.3864357], // 보성군
"43720": [1018843.696119875, 1832681.50774474], // 보은군
"47920": [1125627.975921425, 1881676.019098885], // 봉화군
"26230": [1140857.032737495, 1686905.10585393], // 부산진구
"52800": [906904.98605649, 1743711.597374285], // 부안군
"44760": [943835.889385045, 1803731.764881715], // 부여군
"41194": [937043.513148805, 1941917.36078241], // 부천시 소사구
"41196": [937651.62357278, 1948088.650724335], // 부천시 오정구
"41192": [936542.71080553, 1945011.678412175], // 부천시 원미구
"28237": [931536.9013984001, 1944153.806361985], // 부평구
"26320": [1138778.50401134, 1694043.434930405], // 북구
"27230": [1096421.976926225, 1771028.86509079], // 북구
"29170": [947985.671802775, 1688420.968474115], // 북구
"31200": [1170007.9393788301, 1735147.271494125], // 북구
"26530": [1135648.05832921, 1685887.73780504], // 사상구
"48240": [1048464.90586407, 1669923.18795966], // 사천시
"26380": [1134089.12930976, 1669378.70600097], // 사하구
"48860": [1036496.214687915, 1711373.1111203502], // 산청군
"51230": [1142435.56217199, 1918978.17539709], // 삼척시
"47250": [1050861.110185015, 1827830.141259105], // 상주시
"26140": [1137931.5983933099, 1678744.3981297952], // 서구
"27170": [1094695.438967345, 1764784.74637237], // 서구
"28260": [922809.601799805, 1950975.3525035651], // 서구
"29140": [941246.057711575, 1682370.2693891348], // 서구
"30170": [985795.240808525, 1808929.24401602], // 서구
"50130": [912245.46105533, 1478972.2801259952], // 서귀포시
"11410": [950162.9458121, 1953864.48715979], // 서대문구
"44210": [909519.454637895, 1868915.7895147852], // 서산시
"44770": [925279.862903135, 1788678.070235445], // 서천군
"11650": [959137.357577965, 1942072.4465401699], // 서초구
"41135": [964805.8995280201, 1930763.3113245051], // 성남시 분당구
"41131": [965443.992413075, 1937401.663424345], // 성남시 수정구
"41133": [969601.35785571, 1937919.08950087], // 성남시 중원구
"11200": [959451.922221585, 1950244.43970465], // 성동구
"11290": [957924.54027983, 1956512.99273417], // 성북구
"47840": [1065227.20912238, 1769071.96163128], // 성주군
"36110": [979381.304388835, 1841430.83666584], // 세종특별자치시
"51210": [1089137.1194603802, 2019900.279034885], // 속초시
"11710": [965928.83189988, 1945132.495701395], // 송파구
"27260": [1104712.551021275, 1760363.086093105], // 수성구
"26500": [1146933.8448469099, 1686288.07716536], // 수영구
"41113": [954297.6961326799, 1918466.4324002499], // 수원시 권선구
"41117": [961096.623048695, 1919787.236461525], // 수원시 영통구
"41111": [955699.294199125, 1924459.3724800851], // 수원시 장안구
"41115": [956709.41575029, 1919672.72074137], // 수원시 팔달구
"52770": [962532.77503817, 1714757.02288094], // 순창군
"46150": [989441.17839757, 1668074.09581569], // 순천시
"41390": [934025.6249972349, 1932609.450570995], // 시흥시
"46910": [837068.838454425, 1628081.7615658198], // 신안군
"44200": [953095.1457245699, 1866467.6723041101], // 아산시
"47170": [1108716.740335165, 1841036.9856003649], // 안동시
"41273": [921146.8917017151, 1914174.551465955], // 안산시 단원구
"41271": [944787.9139680951, 1925074.1128969], // 안산시 상록구
"41550": [983047.68986298, 1891835.77152603], // 안성시
"41173": [951774.092625505, 1933701.863194715], // 안양시 동안구
"41171": [947757.35105343, 1934091.7197804102], // 안양시 만안구
"51800": [1044799.8868826301, 2018930.475621245], // 양구군
"48330": [1140452.0009971252, 1713003.89300298], // 양산시
"51830": [1097181.1822994999, 2001875.93591869], // 양양군
"41630": [957059.65493005, 1978556.8707086649], // 양주시
"11470": [943115.85871501, 1947726.50098438], // 양천구
"41830": [1006799.81121338, 1946640.3454016], // 양평군
"46130": [1005710.6789662449, 1606473.622557845], // 여수시
"41670": [1007389.488139985, 1920986.5590416798], // 여주시
"28185": [924301.1973107599, 1932716.5874987599], // 연수구
"26470": [1143967.4104618952, 1688206.29479672], // 연제구
"41800": [955142.1788103101, 2011772.731874695], // 연천군
"46870": [892341.432019105, 1700705.951765325], // 영광군
"47770": [1161246.6696252748, 1831801.285765445], // 영덕군
"26200": [1142949.35128876, 1676148.93128651], // 영도구
"43740": [1029111.7777370601, 1796414.720970885], // 영동군
"11560": [948221.9355719599, 1946989.433783595], // 영등포구
"46830": [918568.42419672, 1645644.03685685], // 영암군
"47760": [1147157.8720550952, 1855483.55416634], // 영양군
"51750": [1089601.7085692, 1913792.65877573], // 영월군
"47210": [1096747.798418135, 1876468.75553605], // 영주시
"47230": [1128168.955619915, 1779896.3669964802], // 영천시
"44810": [935536.49511435, 1852175.0178411552], // 예산군
"47900": [1083616.75364318, 1850758.419176175], // 예천군
"41370": [959957.253397675, 1907245.6871241601], // 오산시
"43730": [1016925.1630849349, 1812306.15335931], // 옥천군
"28720": [831017.06725137, 1941763.7671776651], // 옹진군
"46890": [934681.072970785, 1580260.96434381], // 완도군
"52710": [971714.974980355, 1764297.860421155], // 완주군
"11170": [954152.265892775, 1948105.11473188], // 용산구
"41463": [966362.167328945, 1919086.059435395], // 용인시 기흥구
"41465": [962751.309054115, 1926067.760215145], // 용인시 수지구
"41461": [979413.39966679, 1913728.657159615], // 용인시 처인구
"47940": [1339459.86503077, 1939972.251018405], // 울릉군
"31710": [1152103.383022245, 1727062.6953479801], // 울주군
"47930": [1158508.6557213152, 1879083.142978875], // 울진군
"51130": [1042675.604280725, 1925192.470561375], // 원주시
"30200": [985050.9636310451, 1820539.200680445], // 유성구
"11380": [949045.72456328, 1957730.2124330248], // 은평구
"43770": [1010863.03644352, 1888460.954926385], // 음성군
"48720": [1069027.787455435, 1710230.081700215], // 의령군
"47730": [1098114.724920975, 1818807.01762542], // 의성군
"41430": [954677.940289845, 1928890.756176705], // 의왕시
"41150": [962517.29720437, 1970466.861837395], // 의정부시
"41500": [998578.52141335, 1911408.9081171248], // 이천시
"52140": [954517.27659099, 1780482.64843965], // 익산시
"51810": [1065461.7186508449, 2010839.9914423148], // 인제군
"52750": [978229.1338949, 1735882.14962747], // 임실군
"46880": [932255.0392670301, 1705063.362106785], // 장성군
"52740": [1002766.6532682499, 1739693.270420835], // 장수군
"46800": [946864.73876017, 1628580.0165673052], // 장흥군
"52113": [965336.86328101, 1761811.9640769851], // 전주시 덕진구
"52111": [966893.605588815, 1754468.0213283598], // 전주시 완산구
"51770": [1110360.32014753, 1931013.538670365], // 정선군
"52180": [947098.239651715, 1735070.37728938], // 정읍시
"50110": [912295.3285630699, 1517557.88079664], // 제주시
"43150": [1055671.53255738, 1893115.04197246], // 제천시
"11110": [954639.31671291, 1955652.65017071], // 종로구
"11140": [955326.326625775, 1951065.0090038702], // 중구
"26110": [1139836.3880665852, 1680068.477323895], // 중구
"27110": [1098795.054998835, 1763956.48671014], // 중구
"28110": [911564.657720635, 1939430.9255974651], // 중구
"30140": [992213.91688503, 1809014.1589880502], // 중구
"31110": [1163388.19285627, 1732177.831362065], // 중구
"11260": [964157.58830932, 1955182.665424475], // 중랑구
"43745": [1009013.34585424, 1864734.46162539], // 증평군
"46900": [870540.7578711801, 1597916.46618356], // 진도군
"52720": [995028.62264954, 1758625.23076353], // 진안군
"48170": [1057167.869451315, 1689727.04548209], // 진주시
"43750": [994342.7517215649, 1875793.7535851048], // 진천군
"48740": [1090841.266427235, 1726085.44764784], // 창녕군
"48125": [1090604.085880495, 1682986.7331746249], // 창원시 마산합포구
"48127": [1095576.787610035, 1692901.162402945], // 창원시 마산회원구
"48123": [1106540.710278115, 1689830.08565991], // 창원시 성산구
"48121": [1105558.14181398, 1701648.763579805], // 창원시 의창구
"48129": [1111617.62626141, 1680996.6599733299], // 창원시 진해구
"44131": [974478.67761805, 1862026.08139811], // 천안시 동남구
"44133": [971707.02854063, 1875704.530427825], // 천안시 서북구
"51780": [997447.306165415, 2024301.05104793], // 철원군
"47820": [1116479.97088183, 1746481.442573125], // 청도군
"47750": [1139213.58132652, 1821067.804006115], // 청송군
"44790": [941752.03871163, 1827462.3607307798], // 청양군
"43111": [1009613.9680185751, 1841264.469202615], // 청주시 상당구
"43112": [994258.23710022, 1838908.2251619152], // 청주시 서원구
"43114": [997183.756680205, 1857171.4242312452], // 청주시 청원구
"43113": [989161.30366111, 1849501.26145491], // 청주시 흥덕구
"51110": [1023515.451806125, 1986727.7291947599], // 춘천시
"43130": [1034982.8699803599, 1889790.67989893], // 충주시
"47850": [1086736.697665845, 1779277.075473485], // 칠곡군
"51190": [1131634.14282853, 1912631.8063723398], // 태백시
"44825": [864678.84145598, 1854929.12571281], // 태안군
"48220": [1085316.421521755, 1640596.827168765], // 통영시
"41480": [941812.744809255, 1983528.9263305948], // 파주시
"51760": [1088652.567431635, 1949959.4658569149], // 평창군
"41220": [952557.5035727851, 1891740.1058186102], // 평택시
"41650": [979667.7288193901, 1996457.8400075398], // 포천시
"47111": [1173941.15980316, 1776164.6804896551], // 포항시 남구
"47113": [1155413.511896325, 1798939.39325854], // 포항시 북구
"41450": [974619.56368595, 1947933.69704679], // 하남시
"48850": [1023458.661997725, 1681485.3751938199], // 하동군
"48730": [1084848.02553882, 1699020.07367632], // 함안군
"48870": [1020953.178491215, 1727526.228066345], // 함양군
"46860": [910867.931249965, 1679203.045458965], // 함평군
"48890": [1060435.92013279, 1733941.90683859], // 합천군
"46820": [907157.24936254, 1615346.232287635], // 해남군
"26350": [1151062.0301465848, 1690808.34175552], // 해운대구
"44800": [919404.43702764, 1841255.1935457601], // 홍성군
"51720": [1049442.09422194, 1972233.65191397], // 홍천군
"41590": [941810.22622111, 1906896.59289364], // 화성시
"46790": [955520.512544285, 1669429.020528105], // 화순군
"51790": [1015098.9945956401, 2015706.532260655], // 화천군
"51730": [1046904.40402372, 1943541.6685614302], // 횡성군
};