diff --git a/apps/dm/.env.local b/apps/dm/.env.local index 4dce58c9d..df18c9228 100644 --- a/apps/dm/.env.local +++ b/apps/dm/.env.local @@ -18,8 +18,7 @@ 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_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_GATEWAY_URL=http://localhost:8883 # 개발 서버 API NEXT_PUBLIC_FINDADRESS_URL=https://business.juso.go.kr/addrlink/addrLinkApi.do diff --git a/apps/dm/app/(landing)/reuse/_components/BusinessSubNav.tsx b/apps/dm/app/(landing)/reuse/_components/BusinessSubNav.tsx new file mode 100644 index 000000000..6b4246412 --- /dev/null +++ b/apps/dm/app/(landing)/reuse/_components/BusinessSubNav.tsx @@ -0,0 +1,242 @@ +"use client"; + +import Link from "next/link"; +import { useEffect, useMemo, useState } from "react"; +import { ChevronDown, ChevronUp } from "lucide-react"; + +export type AnchorSection = { + id: string; + label: string; +}; + +export type BusinessSubNavMenu = { + key: string; + label: string; + href?: string; + current?: boolean; + defaultOpen?: boolean; + sections?: AnchorSection[]; +}; + +type BusinessSubNavProps = { + menus?: BusinessSubNavMenu[]; + offsetTop?: number; + className?: string; +}; + +export default function BusinessSubNav({ + menus = [], + offsetTop = 120, + className = "", +}: BusinessSubNavProps) { + const [activeId, setActiveId] = useState(""); + const [openMenus, setOpenMenus] = useState>({}); + + const allSections = useMemo( + () => menus.flatMap((menu) => menu.sections ?? []), + [menus] + ); + + useEffect(() => { + const initialOpenState: Record = {}; + + menus.forEach((menu) => { + initialOpenState[menu.key] = menu.defaultOpen ?? menu.current ?? false; + }); + + setOpenMenus(initialOpenState); + }, [menus]); + + useEffect(() => { + if (!allSections.length) return; + + const observer = new IntersectionObserver( + (entries) => { + const visible = entries + .filter((entry) => entry.isIntersecting) + .sort((a, b) => b.intersectionRatio - a.intersectionRatio); + + if (visible[0]) { + setActiveId(visible[0].target.id); + } + }, + { + rootMargin: `-${offsetTop}px 0px -55% 0px`, + threshold: [0.2, 0.35, 0.5, 0.7], + } + ); + + const targets = allSections + .map((section) => document.getElementById(section.id)) + .filter(Boolean) as HTMLElement[]; + + targets.forEach((el) => observer.observe(el)); + + const hash = window.location.hash.replace("#", ""); + const initialActive = + allSections.find((section) => section.id === hash)?.id ?? + allSections[0]?.id ?? + ""; + + setActiveId(initialActive); + + return () => observer.disconnect(); + }, [allSections, offsetTop]); + + useEffect(() => { + if (!activeId) return; + + const parentMenu = menus.find((menu) => + (menu.sections ?? []).some((section) => section.id === activeId) + ); + + if (!parentMenu) return; + + setOpenMenus(() => { + const nextOpenState: Record = {}; + + menus.forEach((menu) => { + nextOpenState[menu.key] = menu.key === parentMenu.key; + }); + + return nextOpenState; + }); + }, [activeId, menus]); + + const handleMove = (id: string) => { + setActiveId(id); + + const target = document.getElementById(id); + if (!target) return; + + window.history.replaceState(null, "", `#${id}`); + + const top = target.getBoundingClientRect().top + window.scrollY - offsetTop; + + window.scrollTo({ + top, + behavior: "smooth", + }); + }; + + const toggleMenu = (key: string) => { + setOpenMenus((prev) => ({ + ...prev, + [key]: !prev[key], + })); + }; + + if (!menus.length) return null; + + return ( + + ); +} \ No newline at end of file diff --git a/apps/dm/app/(landing)/reuse/_components/TopNav.tsx b/apps/dm/app/(landing)/reuse/_components/TopNav.tsx index 95598aaa7..65b914c91 100644 --- a/apps/dm/app/(landing)/reuse/_components/TopNav.tsx +++ b/apps/dm/app/(landing)/reuse/_components/TopNav.tsx @@ -9,7 +9,7 @@ import { useRouter } from "next/navigation"; const NAV_ITEMS = [ { href: "/reuse/intro/law", label: "물 재이용 소개" }, { href: "/reuse/cases/rain", label: "물 재이용 현황" }, - { href: "/reuse/business/rain/suwon", label: "물 재이용 사례" }, + { href: "/reuse/business/rain", label: "물 재이용 사례" }, { href: "/reuse/apply/place", label: "수요신청" }, ]; diff --git a/apps/dm/app/(landing)/reuse/apply/modal/SimilarCaseModal.tsx b/apps/dm/app/(landing)/reuse/apply/modal/SimilarCaseModal.tsx index 774ab81b8..6f68ab515 100644 --- a/apps/dm/app/(landing)/reuse/apply/modal/SimilarCaseModal.tsx +++ b/apps/dm/app/(landing)/reuse/apply/modal/SimilarCaseModal.tsx @@ -1,10 +1,12 @@ -// apps/dm/app/(landing)/reuse/apply/modal/SimilarCaseModal.tsx (유사사례 모달) +/** + * 유사사례 Modal + */ "use client"; import { useEffect, useMemo, useState, useId } from "react"; import { createPortal } from "react-dom"; -type Criterion = "" | "supplyAmt" | "treatment" | "usePurpose"; +type Criterion = "" | "supplyAmt" | "treatment" | "usePurpose"; // 유사기준 export type SimilarCaseRow = { caseId: string; @@ -90,7 +92,7 @@ export default function SimilarCaseModal({ // 모달 열릴 때 초기화 useEffect(() => { if (!open) return; - setCriterion("supplyAmt"); + setCriterion("supplyAmt"); // 요구수량(㎥/d) onSearch("supplyAmt"); setSelectedCaseId(""); }, [open]); diff --git a/apps/dm/app/(landing)/reuse/business/_components/GlobalCaseSection.tsx b/apps/dm/app/(landing)/reuse/business/_components/GlobalCaseSection.tsx new file mode 100644 index 000000000..5d981d7de --- /dev/null +++ b/apps/dm/app/(landing)/reuse/business/_components/GlobalCaseSection.tsx @@ -0,0 +1,116 @@ +"use client"; + +import CaseImageSlider from "@/components/CaseImageSlider"; + +function SectionTitle({ children }: { children: React.ReactNode }) { + return ( +
+ +

{children}

+
+ ); +} + +// 구분선 +function Hr({ className = "" }: { className?: string }) { + return
; +} + +export default function GlobalCaseSection() { + const title = "해외 재이용 사례"; + return ( +
+ {/* 상단 타이틀 */} +
+

+ {title} + +

+
+
+
+ 사례 개요 + + +
+ +
+ +
+ 대만 + + +
+ +
+ +
+ 호주 + + +
+ +
+ +
+ 싱가포르 + + +
+ +
+ +
+ EU + + +
+
+
+ ); +} \ No newline at end of file diff --git a/apps/dm/app/(landing)/reuse/business/_components/GreywaterExampleSection.tsx b/apps/dm/app/(landing)/reuse/business/_components/GreywaterExampleSection.tsx new file mode 100644 index 000000000..374e3ddd4 --- /dev/null +++ b/apps/dm/app/(landing)/reuse/business/_components/GreywaterExampleSection.tsx @@ -0,0 +1,191 @@ +"use client"; + +function SectionTitle({ children }: { children: React.ReactNode }) { + return ( +
+ +

{children}

+
+ ); +} + +function BlockTitle({ children }: { children: React.ReactNode }) { + return ( +
+ +

{children}

+
+ ); +} + +// 구분선 +function Hr({ className = "" }: { className?: string }) { + return
; +} + +type SupplyRow = { + facility: string; + usage: string; + amount: string; +}; + +function SupplyTable({ rows }: { rows: SupplyRow[] }) { + return ( +
+ + + + + + + + + + {rows.map((row, index) => ( + + + + + + ))} + +
+ 시설명 + + 이용용도 + + 공급량(㎥) +
+ {row.facility} + + {row.usage} + + {row.amount} +
+
+ ); +} + +function InfoList({ + projectName, + purpose, + totalCost, + treatment, +}: { + projectName: string; + purpose: string; + totalCost: string; + treatment: string; +}) { + return ( +
+
+ 사업명 +
    +
  • {projectName}
    • +
+
+ +
+ 사업목적 +
    +
  • {purpose}
    • +
+
+ +
+ 사업 주요 내용 +
    +
  • 총사업비 : {totalCost}
    • +
  • 처리공법 : {treatment}
    • +
+
+ +
+ 사업량 +
+
+ ); +} + +export default function GreywaterExampleSection() { + const title = "중수 재이용 사례"; + return ( +
+ {/* 상단 타이틀 */} +
+

+ {title} + +

+
+ +
+
+ 경기도 안산시 + + + + +
+ +
+ +
+ 경기도 용인시 + + + + +
+ +
+ +
+ 경기도 평택시 + + + + +
+
+
+ ); +} \ No newline at end of file diff --git a/apps/dm/app/(landing)/reuse/business/_components/RainExampleSection.tsx b/apps/dm/app/(landing)/reuse/business/_components/RainExampleSection.tsx new file mode 100644 index 000000000..d73fdf1a2 --- /dev/null +++ b/apps/dm/app/(landing)/reuse/business/_components/RainExampleSection.tsx @@ -0,0 +1,72 @@ +"use client"; + +import CaseImageSlider from "@/components/CaseImageSlider"; + +function SectionTitle({ children }: { children: React.ReactNode }) { + return ( +
+ +

{children}

+
+ ); +} + +// 구분선 +function Hr({ className = "" }: { className?: string }) { + return
; +} + +export default function RainExampleSection() { + const title = "빗물 재이용 사례"; + return ( +
+ {/* 상단 타이틀 */} +
+

+ {title} + +

+
+ +
+ 경기도 수원시 + + +
+ +
+ +
+ 제주특별자치도 + + +
+
+ ); +} \ No newline at end of file diff --git a/apps/dm/app/(landing)/reuse/business/_components/SewageExampleSection.tsx b/apps/dm/app/(landing)/reuse/business/_components/SewageExampleSection.tsx new file mode 100644 index 000000000..72ac9741a --- /dev/null +++ b/apps/dm/app/(landing)/reuse/business/_components/SewageExampleSection.tsx @@ -0,0 +1,256 @@ +"use client"; + +import CaseImageSlider from "@/components/CaseImageSlider"; + +function SectionTitle({ children }: { children: React.ReactNode }) { + return ( +
+ +

{children}

+
+ ); +} + +// 구분선 +function Hr({ className = "" }: { className?: string }) { + return
; +} + +export default function SewageExampleSection() { + const title = "하수처리수 재이용 사례"; + return ( +
+ {/* 상단 타이틀 */} +
+

+ {title} + +

+
+ +
+
+ 충청남도 보령시 + + + +
+ 사업명 +

+ 충남 보령 하수재이용 +
: 보령·신보령화력발전소에 하루 1만톤의 탈황용수 공급을 위해 + 보령하수처리시설의 하수처리수 재이용 사업 추진 +

+
+ +
+ +
+ 사업 방식 +

+ 2017년 한국환경공단과 사업대행 위 · 수탁 협약 체결 +

+
+ +
+ 사업 주요 내용 +

+ 처리공정 : 전처리 UF + 후처리 RO +
+ 시설용량 : 1만m³/일 +
+ 관로 : 8.7km +
+ 사업비 : 315억원 +
+ 위치: 충청남도 보령시 대청방조제로 322 일원 +

+
+ +
+ +
+ 특이사항 +

+ 국내 유일 하수재이용 공업용수 공급 재정사업으로 2016년 충남 서부권 + 가뭄 시 지역사회 기여 차원에서 기관간 MOU를 바탕으로 추진 +

+
+
+ +
+ +
+ 청주시 + + + +
+ 사업명 +

청주시 하수 재이용 시설

+
+ +
+ +
+ 사업 주요 내용 +

+ 청주시 하수처리수 재이용 민간투자사업(BTO) +
+ 공급량 : 35,000㎥/일 +
+ 공급관로 : 8.3㎞ +
+ 사업비 : 622억원 +
+ 수요처 : SK하이닉스 등 일반산업단지 +
+ 지역 : 충청북도 청주시 흥덕구 가락리 135-9번지 일원 +
+ 적용기술 : 분리막 UF, RO +

+
+
+ +
+ +
+ 구리시 도로자동청소시스템 + + + +
+ 사업명 +

+ 구리시 도로자동청소시스템 설치사업 +

+
+ +
+ +
+ 사업목적 +

+ 공공하수처리시설 발생 재이용수 일부를 도로자동청소시스템에 활용하여 + 미세먼지 저감 및 폭염 취약성 완화 +

+
+
+ +
+ +
+ 수원시 황구지천 + + + +
+ 사업명 +

+ 수원시 황구지천 하수처리수 재이용사업 +

+
+
+ +
+ +
+ 파주시 + + + +
+ 사업명 +

+ 경기도 파주시 하수재이용 +
+ 운정·금촌하수처리시설의 하수처리수를 막공법으로 재처리하여 파주 LCD + 산업단지에 공업용수 공급 +

+
+
+ +
+ +
+ 여수시 + + + +
+ 사업명 +

+ 여수시 하수처리수 재이용 민간 투자사업(BTO) +

+
+
+
+
+ ); +} \ No newline at end of file diff --git a/apps/dm/app/(landing)/reuse/business/layout.tsx b/apps/dm/app/(landing)/reuse/business/layout.tsx index dc62f77cc..9d0d95ab9 100644 --- a/apps/dm/app/(landing)/reuse/business/layout.tsx +++ b/apps/dm/app/(landing)/reuse/business/layout.tsx @@ -1,16 +1,71 @@ -// apps/dm/app/(landing)/reuse/business/layout.tsx +"use client"; import type { ReactNode } from "react"; -import Lnb from "../_components/Lnb"; -import { LNB_BUSINESS } from "../_constants/lnb"; +import { useEffect } from "react"; +// import { usePathname } from "next/navigation"; +// import Lnb from "../_components/Lnb"; +// import BusinessSubNav from "../_components/BusinessSubNav"; +import { + // fetchAnonymousMenu, + // findActiveTopMenu, + // type MenuItem, +} from "@/app/store/common"; export default function BusinessLayout({ children }: { children: ReactNode }) { + // const pathname = usePathname(); + // const [menus, setMenus] = useState([]); + + useEffect(() => { + let isMounted = true; + + (async () => { + try { + // const loaded = await fetchAnonymousMenu(); + if (!isMounted) return; + // setMenus(loaded); + } catch { + if (!isMounted) return; + // setMenus([]); + } + })(); + + return () => { + isMounted = false; + }; + }, []); + + // const currentTopMenu = useMemo( + // () => findActiveTopMenu(menus, pathname), + // [menus, pathname], + // ); + + // const businessMenus = useMemo( + // () => currentTopMenu?.children ?? [], + // [currentTopMenu], + // ); + return ( -
- -
- {children} -
+
+ + {/* 좌측 LNB */} + {/* */} + + {/* 컨텐츠 영역 */} +
+
+ + {/* 본문 */} +
+ {children} +
+ + {/* 우측 서브 메뉴 */} +
+ {/* */} +
+ +
+
); -} \ No newline at end of file +} diff --git a/apps/dm/app/(landing)/reuse/business/page.tsx b/apps/dm/app/(landing)/reuse/business/page.tsx new file mode 100644 index 000000000..9386012b1 --- /dev/null +++ b/apps/dm/app/(landing)/reuse/business/page.tsx @@ -0,0 +1,85 @@ +import SubPageHeader from "@/components/SubPageHeader"; +import BusinessSubNav, { type BusinessSubNavMenu } from "@/components/BusinessSubNav"; + +import RainExampleSection from "./_components/RainExampleSection"; +import GreywaterExampleSection from "./_components/GreywaterExampleSection"; +import SewageExampleSection from "./_components/SewageExampleSection"; +import GlobalCaseSection from "./_components/GlobalCaseSection"; + +const menus: BusinessSubNavMenu[] = [ + { + key: "example-rain", + label: "빗물 재이용 사례", + sections: [ + { id: "example-rain-suwon", label: "경기도 수원시" }, + { id: "example-rain-jeju", label: "제주특별자치도" }, + ], + }, + { + key: "example-greywater", + label: "중수 재이용 사례", + defaultOpen: false, + sections: [ + { id: "example-greywater-ansan", label: "경기도 안산시" }, + { id: "example-greywater-yongin", label: "경기도 용인시" }, + { id: "example-greywater-pyeongtaek", label: "경기도 평택시" }, + ], + }, + { + key: "example-sewage", + label: "하수처리수 재이용 사례", + defaultOpen: false, + sections: [ + { id: "example-sewage-bolyeong", label: "충청남도 보령시" }, + { id: "example-sewage-cheongju", label: "청주시" }, + { id: "example-sewage-guri", label: "구리시 도로자동청소시스템" }, + { id: "example-sewage-hwanggu", label: "수원시 황구지천" }, + { id: "example-sewage-paju", label: "파주시" }, + { id: "example-sewage-yeosu", label: "여수시" }, + ], + }, + { + key: "example-global", + label: "해외 재이용 사례", + defaultOpen: false, + sections: [ + { id: "example-global-overview", label: "사례 개요" }, + { id: "example-global-taiwan", label: "대만" }, + { id: "example-global-australia", label: "호주" }, + { id: "example-global-singapore", label: "싱가포르" }, + { id: "example-global-eu", label: "EU" }, + ], + }, +]; + +function Hr({ className = "" }: { className?: string }) { + return
; +} + +export default function ExamplePage() { + return ( +
+ {/* 상단 헤더 */} + + + {/* 우측 앵커 네비 */} + + +
+ +
+ +
+ +
+ +
+
+ ); +} \ No newline at end of file diff --git a/apps/dm/app/(landing)/reuse/cases/_components/GreywaterStatusSection.tsx b/apps/dm/app/(landing)/reuse/cases/_components/GreywaterStatusSection.tsx new file mode 100644 index 000000000..1f5f93b44 --- /dev/null +++ b/apps/dm/app/(landing)/reuse/cases/_components/GreywaterStatusSection.tsx @@ -0,0 +1,461 @@ +"use client"; + +import React from "react"; + +function SectionTitle({ children }: { children: React.ReactNode }) { + return ( +
+ +

{children}

+
+ ); +} + +function Hr({ className = "" }: { className?: string }) { + return
; +} + +function SourceText() { + return ( +

+ 자료: 환경부(2024), 「2023 하수도 통계」 +

+ ); +} + +const tableStyles = { + container: "w-[1000px] mx-auto overflow-hidden", + table: "w-full table-fixed border-collapse text-center text-[16px]", + th: "border border-[#858F98] py-3 font-bold text-neutral-800", + td: "border border-[#858F98] py-3 text-neutral-700 font-medium break-keep", + headerBg: "bg-[#E3E7EA]", +}; + +export default function GreywaterStatusSection() { + const title = "중수도(현황)"; + + return ( +
+ {/* 상단 타이틀 */} +
+

+ {title} + +

+
+ +
+ {/* 1) 전체 중수도 설치 및 이용 현황 */} +
+ 전체 중수도 설치 및 이용 현황 + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + {[ + { + group: "전체", + rows: [ + ["시설수 (개소)", "576", "633", "682", "740", "819", "842"], + ["건축연면적 (만m²)", "1,494.2", "1,514.4", "1,524.9", "989.1", "1,104.3", "1,015.4"], + ["처리용량 (만m³/일)", "39.6", "40.0", "51.1", "47.1", "48.9", "50.7"], + ["사용량 (만m³/년)", "2,223.4", "1,165.2", "6,713.0", "4,681.7", "3,918.2", "898.4"], + ], + }, + { + group: "법적 대상", + rows: [ + ["시설수 (개소)", "146", "154", "156", "170", "166", "169"], + ["건축연면적 (만m²)", "674.9", "682.4", "736.1", "421.1", "434.9", "465.5"], + ["처리용량 (만m³/일)", "20.0", "20.1", "31.2", "22.8", "21.2", "24.7"], + ["사용량 (만m³/년)", "1,819.4", "712.8", "6,479.9", "4,416.8", "3,663.1", "616.1"], + ], + }, + { + group: "법적 비대상", + rows: [ + ["시설수 (개소)", "430", "479", "526", "570", "653", "673"], + ["건축연면적 (만m²)", "819.3", "832.0", "788.8", "568.0", "669.4", "549.9"], + ["처리용량 (만m³/일)", "19.6", "19.5", "19.9", "24.3", "27.7", "26.0"], + ["사용량 (만m³/년)", "404.0", "452.4", "233.1", "264.9", "255.1", "282.3"], + ], + }, + ].map((section, sIdx) => ( + + {section.rows.map((row, rIdx) => ( + + {rIdx === 0 && ( + + )} + {row.map((val, i) => { + const isFirstCol = i === 0; + const isHighlightedCol = [1, 3, 5].includes(i); + + return ( + + ))} + + ))} + +
+ 구분 + + 2018 + + 2019 + + 2020 + + 2021 + + 2022 + + 2023 +
+ {section.group} + + ); + })} +
+
+ + +
+
+ +
+ + {/* 2) 공장 및 발전시설 내 중수도 설치 현황 */} +
+ 공장 및 발전시설 내 중수도 설치 현황 + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + {[ + { + group: "전체", + rows: [ + ["시설수 (개소)", "125", "127", "139", "146", "151", "176"], + ["처리용량 (만m³/일)", "141.3", "141.0", "146.7", "189.0", "190.3", "166.5"], + ["사용량 (만m³/년)", "33,712", "29,300", "33,110", "22,284", "21,593", "21,349"], + ], + }, + { + group: "법적 대상", + rows: [ + ["시설수 (개소)", "59", "63", "78", "78", "82", "86"], + ["처리용량 (만m³/일)", "108.6", "109.7", "118.1", "159.5", "142.6", "119.4"], + ["사용량 (만m³/년)", "24,847", "24,021", "28,055", "17,959", "12,241", "12,296"], + ], + }, + { + group: "법적 비대상", + rows: [ + ["시설수 (개소)", "66", "64", "61", "68", "69", "90"], + ["처리용량 (만m³/일)", "32.7", "31.4", "28.7", "29.5", "47.7", "47.1"], + ["사용량 (만m³/년)", "8,864.9", "5,278.8", "5,054.7", "4,324.6", "9,353.3", "9,052.4"], + ], + }, + ].map((section, sIdx) => ( + + {section.rows.map((row, rIdx) => ( + + {rIdx === 0 && ( + + )} + {row.map((val, i) => { + const isFirstCol = i === 0; + const isHighlightedCol = [1, 3, 5].includes(i); + + return ( + + ))} + + ))} + +
+ 구분 + + 2018 + + 2019 + + 2020 + + 2021 + + 2022 + + 2023 +
+ {section.group} + + ); + })} +
+
+ + +
+
+ +
+ + {/* 3) 중수도 건축물별 이용량 현황 */} +
+ 중수도 건축물별 이용량 현황 + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + {[ + ["공동주택", "804.0", "245.8", "255.1", "282.3", "255.1", "282.3"], + ["판매시설", "1,447.5", "477.1", "802.1", "713.0", "972.3", "742.4"], + ["숙박시설", "458.5", "0.4", "177.0", "102.0", "123.3", "140.9"], + ["업무시설", "20.7", "0.3", "14.3", "44.9", "31.5", "37.4"], + ["의료시설", "97.7", "7.2", "63.7", "55.7", "85.1", "70.4"], + ["교육연구시설", "536.6", "1.5", "1,558.4", "772.2", "315.1", "66.7"], + ["운수·물류시설", "759.2", "34.2", "459.8", "259.8", "252.8", "410.4"], + ["기타", "453.1", "443.3", "3,126.8", "2,451.5", "1,880.8", "199.7"], + ["합계", "35,936.3", "30,466.6", "37,487.2", "25,480.6", "24,345.8", "22,247.6"], + ].map((row, idx) => ( + + {row.map((val, i) => ( + + ))} + + ))} + +
+ 구분 + + 이용량 (천m³/년) +
+ 2018 + + 2019 + + 2020 + + 2021 + + 2022 + + 2023 +
+ {val} +
+
+ + +
+
+ +
+ + {/* 4) 중수도 용도별 이용량 현황 */} +
+ 중수도 용도별 이용량 현황 + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + {[ + ["공업용수", "33,082", "28,719", "32,312", "21,707", "20,991", "20,470"], + ["세척·살수용수", "860.2", "146.5", "133.8", "100.7", "95.1", "149.9"], + ["조경용수", "403.7", "99.3", "3,297.0", "2,611.1", "1,827.0", "1,116.7"], + ["청소용수", "623.9", "764.2", "1,430.6", "879.7", "1,146.2", "286.0"], + ["수세식화장실용수", "530.0", "646.6", "183.5", "161.2", "216.6", "147.6"], + ["냉·난방용수", "150.1", "56.2", "57.5", "6.4", "0.9", "0.5"], + ["친수용수", "120.8", "18.5", "29.3", "8.2", "4.1", "2.8"], + ["기타", "165.6", "16.1", "43.2", "5.7", "64.0", "73.9"], + ].map((row, idx) => ( + + {row.map((val, i) => ( + + ))} + + ))} + +
+ 구분 + + 이용량 (천m³/년) +
+ 2018 + + 2019 + + 2020 + + 2021 + + 2022 + + 2023 +
+ {val} +
+
+ + +
+
+
+
+ ); +} \ No newline at end of file diff --git a/apps/dm/app/(landing)/reuse/cases/_components/RainStatusSection.tsx b/apps/dm/app/(landing)/reuse/cases/_components/RainStatusSection.tsx new file mode 100644 index 000000000..ec150d55b --- /dev/null +++ b/apps/dm/app/(landing)/reuse/cases/_components/RainStatusSection.tsx @@ -0,0 +1,381 @@ +"use client"; + +import React from "react"; + +// 공통 섹션 타이틀 컴포넌트 +function SectionTitle({ children }: { children: React.ReactNode }) { + return ( +
+ +

{children}

+
+ ); +} + +// 구분선 +function Hr({ className = "" }: { className?: string }) { + return
; +} + +// 출처 텍스트 +function SourceText() { + return ( +

+ 자료: 환경부(2024), 「2023 하수도 통계」 +

+ ); +} + +const tableStyles = { + container: "w-[1000px] mx-auto overflow-hidden", + table: "w-full table-fixed border-collapse text-center text-[16px]", + th: "border border-[#858F98] py-3 font-bold text-neutral-800", + td: "border border-[#858F98] py-3 text-neutral-700 font-medium break-keep", + headerBg: "bg-[#E3E7EA]", +}; + +export default function RainStatusSection() { + const title = "빗물이용시설(현황)"; + + return ( +
+ {/* 상단 타이틀 */} +
+

+ {title} + +

+
+ +
+ {/* 1) 빗물이용시설의 건축물별 빗물이용량 현황 */} +
+ 빗물이용시설의 건축물별 빗물이용량 현황 + +
+
+ + + + + + + + + + + + + + + + + {[ + ["골프장", "6,771.8", "6,417.4", "8,371.6", "10,215.4", "11,360", "10,191.6"], + ["공공시설", "364", "325.2", "201.9", "244.6", "209.9", "299.6"], + ["공동주택", "291", "840.5", "804.2", "2,393.0", "2,386", "2,428.4"], + ["대규모점포", "169.9", "214.4", "58.4", "427.2", "371", "293.3"], + ["체육시설", "52.6", "44.7", "48.6", "75.3", "71.8", "77.6"], + ["학교", "33", "25.5", "22", "155.8", "165.4", "32.6"], + ["기타", "311.6", "901.2", "344.5", "537.8", "564", "621.2"], + ].map((row, idx) => ( + + {row.map((val, i) => ( + + ))} + + ))} + +
+ 구분 + + 빗물이용량 (천m³/년) +
+ 2018 + + 2019 + + 2020 + + 2021 + + 2022 + + 2023 +
+ {val} +
+
+ + +
+
+ +
+ + {/* 2) 빗물이용시설의 용도별 분포 (2023년 기준) */} +
+ 빗물이용시설의 용도별 분포 (2023년 기준) + +
+
+ + + + + + + + + + + + + + + + + + + + + {[ + ["청소·환경정화용수", "195", "32.7", "108.8", "24.9", "5.8", "2.6", "4.4", "2.9", "-", "68.1"], + ["세척·살수용수", "12", "1.4", "37", "35", "-", "-", "1.9", "-", "-", "0.2"], + ["조경용수", "3,165", "7,440.8", "13,554.1", "168.1", "2,421.9", "290.7", "66.2", "29", "10,044", "534.3"], + ["냉·난방수", "8", "1.6", "0.1", "-", "-", "-", "-", "0.1", "-", "-"], + ["공업용수", "6", "14.9", "53.2", "52.8", "-", "-", "-", "-", "-", "0.4"], + ["농업용수", "6.0", "0.5", "0.6", "-", "-", "-", "-", "-", "-", "0.6"], + ["기타", "48", "306.1", "155.6", "2.8", "-", "-", "0.6", "0.5", "147.5", "4.2"], + ["미기재", "103", "22.9", "34.8", "16.0", "0.6", "-", "4.6", "0.2", "-", "13.5"], + ["합계", "3,543", "7,820.8", "13,944.7", "299.6", "2,428.4", "293.3", "77.6", "32.6", "10,191.6", "621.2"], + ].map((row, idx) => ( + + {row.map((val, i) => { + const isHighlightedCol = [1, 2].includes(i); + + return ( + + ); + })} + + ))} + +
+ 용도 + + 개소수 +
+ (개소) + 		+ 저류용량 +
+ (천m³) + 		+ 빗물이용량 (천m³/년) +
+ 총사용량 + + 공공시설 + + 공동주택 + + 대규모점포 + + 체육시설 + + 학교 + + 골프장 + + 기타 +
+ {val} +
+
+ + +
+
+ +
+ + {/* 3) 빗물이용시설의 용도별 빗물이용량 현황 */} +
+ 빗물이용시설의 용도별 빗물이용량 현황 + +
+
+ + + + + + + + + + + + + + + + + {[ + ["청소·화장실용수", "126.5", "134.1", "96.5", "153.9", "140.5", "108.8"], + ["세척·살수용수", "14.8", "14.6", "9.5", "49.8", "49.7", "37.0"], + ["조경용수", "7,629.8", "8,496.2", "9,415.4", "13,360.4", "14,466.3", "13,554.1"], + ["친수용수", "1.0", "0.1", "0.1", "0.1", "0.1", "0.1"], + ["공업용수", "152.0", "77.0", "77.0", "75.4", "0.4", "53.2"], + ["농업용수", "4.4", "4.3", "4.3", "4.3", "0.6", "0.6"], + ["기타", "37.7", "42.6", "230.7", "394.3", "463.2", "155.6"], + ].map((row, idx) => ( + + {row.map((val, i) => ( + + ))} + + ))} + +
+ 용도 + + 빗물이용량 (천m³/년) +
+ 2018 + + 2019 + + 2020 + + 2021 + + 2022 + + 2023 +
+ {val} +
+
+ + +
+
+
+
+ ); +} \ No newline at end of file diff --git a/apps/dm/app/(landing)/reuse/cases/_components/SewageStatusSection.tsx b/apps/dm/app/(landing)/reuse/cases/_components/SewageStatusSection.tsx new file mode 100644 index 000000000..0a2b34d5d --- /dev/null +++ b/apps/dm/app/(landing)/reuse/cases/_components/SewageStatusSection.tsx @@ -0,0 +1,705 @@ +"use client"; + +import React from "react"; + +function SectionTitle({ children }: { children: React.ReactNode }) { + return ( +
+ +

{children}

+
+ ); +} + +function Hr({ className = "" }: { className?: string }) { + return
; +} + +function SourceText() { + return ( +

+ 자료: 환경부(2024), 「2023 하수도 통계」 +

+ ); +} + +const tableStyles = { + container: "w-[1000px] mx-auto overflow-hidden", + table: "w-full table-fixed border-collapse text-center text-[16px]", + th: "border border-[#858F98] py-3 font-bold text-neutral-800", + td: "border border-[#858F98] py-3 text-neutral-700 font-medium break-keep", + headerBg: "bg-[#E3E7EA]", +}; + +export default function SewageStatusSection() { + const title = "하수처리수 재이용시설(현황)"; + + return ( +
+ {/* 상단 타이틀 */} +
+

+ {title} + +

+
+ +
+ {/* 1) 연도별 하수처리수 재이용 현황 */} +
+ 연도별 하수처리수 재이용 현황 + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + {[ + { + group: "전체", + rows: [ + [ + "개소수 (개소)", + "671", + "681", + "698", + "704", + "714", + "717", + ], + [ + "하수처리량 (백만m³/년)", + "7,163.7", + "7,140.4", + "7,375.6", + "7,335.8", + "7,378.9", + "7,537.2", + ], + [ + "재이용량 (백만m³/년)", + "1,112.7", + "1,148.7", + "1,148.7", + "1,127.0", + "1,136.8", + "1,137.5", + ], + [ + "재이용률 (%)", + "17.4", + "16.5", + "15.5", + "14.1", + "14.3", + "14.4", + ], + ], + }, + { + group: "법적 대상", + rows: [ + [ + "개소수 (개소)", + "68", + "82", + "94", + "97", + "101", + "118", + ], + [ + "하수처리량 (백만m³/년)", + "761.2", + "839.0", + "935.3", + "1,158.7", + "1,220.6", + "1,473.6", + ], + [ + "재이용량 (백만m³/년)", + "162.2", + "190.6", + "218.5", + "244.6", + "247.2", + "324.9", + ], + [ + "재이용률 (%)", + "24.7", + "25.4", + "27.8", + "25.7", + "24.2", + "24.1", + ], + ], + }, + { + group: "법적 미대상", + rows: [ + [ + "개소수 (개소)", + "603", + "599", + "604", + "607", + "613", + "599", + ], + [ + "하수처리량 (백만m³/년)", + "6,402.5", + "6,301.4", + "6,440.3", + "6,177.1", + "6,158.3", + "6,063.5", + ], + [ + "재이용량 (백만m³/년)", + "950.6", + "958.1", + "926.2", + "882.4", + "889.5", + "812.7", + ], + [ + "재이용률 (%)", + "16.5", + "15.3", + "13.6", + "12.2", + "12.6", + "12.5", + ], + ], + }, + ].map((section, sIdx) => ( + + {section.rows.map((row, rIdx) => ( + + {rIdx === 0 && ( + + )} + {row.map((val, i) => { + const isFirstCol = i === 0; + const isHighlightedCol = [1, 3, 5].includes(i); + + return ( + + ))} + + ))} + +
+ 구분 + + 2018 + + 2019 + + 2020 + + 2021 + + 2022 + + 2023 +
+ {section.group} + + ); + })} +
+
+ + +
+
+ +
+ + {/* 2) 용도별 하수처리수 재이용 현황 */} +
+ 용도별 하수처리수 재이용 현황 + +
+
+ + + + + + + + + + + + + + + + + + + + + + + {[ + { label: "총 재이용량", type: "total", values: ["1,112.7", "1,148.7", "1,144.7", "1,127.0", "1,136.8", "1,137.5"] }, + { label: "장내 재이용", type: "category", values: ["520.6", "519.8", "513.9", "520.3", "502.2", "490.0"] }, + { label: "세척수", type: "red-item", values: ["177.9", "174.4", "169.4", "180.9", "196.8", "191.2"] }, + { label: "냉각수", type: "red-item", values: ["45.5", "46.8", "50.4", "40.6", "38.3", "41.7"] }, + { label: "청소수", type: "red-item", values: ["17.6", "21.2", "21.2", "21.7", "20.8", "20.5"] }, + { label: "조경용수", type: "red-item", values: ["0.1", "0.1", "-", "-", "-", "-"] }, + { label: "회생용수", type: "red-item", values: ["15.8", "16.7", "17.8", "15.7", "14.4", "14.0"] }, + { label: "장내급수도", type: "red-item", values: ["2.4", "-", "-", "-", "-", "-"] }, + { label: "장내기타용수", type: "red-item", values: ["261.3", "260.6", "255.0", "261.1", "231.8", "222.6"] }, + { label: "장외 재이용", type: "category", values: ["592.1", "628.9", "630.8", "606.7", "634.6", "647.5"] }, + { label: "청소·화장실용수", type: "blue-item", values: ["0.6", "0.4", "0.4", "0.4", "0.4", "0.4"] }, + { label: "세척·살수용수", type: "blue-item", values: ["5.6", "9.9", "2.9", "2.1", "3.0", "3.6"] }, + { label: "조경용수", type: "blue-item", values: ["10.3", "16.4", "5.9", "4.5", "8.9", "9.5"] }, + { label: "친수용수", type: "blue-item", values: ["7.8", "3.1", "3.1", "3.0", "10.9", "10.5"] }, + { label: "하천유지용수", type: "blue-item", values: ["480.5", "482.5", "496.2", "442.7", "471.7", "484.0"] }, + { label: "농업용수", type: "blue-item", values: ["12.2", "11.9", "13.4", "10.7", "10.6", "11.4"] }, + { label: "지하수 충전", type: "blue-item", values: ["0.0", "0.0", "0.0", "13.4", "0.0", "0.0"] }, + { label: "공업용수", type: "blue-item", values: ["75.2", "104.6", "108.9", "129.9", "129.0", "128.1"] }, + ].map((row, idx) => { + const isSubItem = row.type === "red-item" || row.type === "blue-item"; + const isLastInGroup = idx === 8 || idx === 17; + + return ( + + + + {row.values.map((val, i) => ( + + ))} + + ); + })} + +
+ 구분 + + 2018 + + 2019 + + 2020 + + 2021 + + 2022 + + 2023 +
+ {isSubItem ? ( + <> +
+
+ + {row.label} + + + ) : ( + + {row.label} + + )} +
+ {val} +
+
+ + +
+
+ +
+ + {/* 3) 하수처리시설 설치 및 이용 현황 */} +
+ 하수처리시설 설치 및 이용 현황 + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + {[ + { + group: "전체", + rows: [ + [ + "시설수 (개소)", + "671", + "681", + "698", + "704", + "714", + "717", + ], + [ + "시설용량 (만m³/일)", + "25,846", + "26,067", + "26,244", + "26,492", + "26,586", + "26,766", + ], + [ + "처리용량 (만m³/일)", + "1,112.7", + "1,148.7", + "1,144.7", + "1,127.0", + "1,136.8", + "1,137.5", + ], + ], + }, + { + group: "법적 대상", + rows: [ + [ + "시설수 (개소)", + "68", + "82", + "94", + "97", + "101", + "118", + ], + [ + "시설용량 (만m³/일)", + "3,088.9", + "3,359.2", + "3,612.6", + "4,412.2", + "4,692.3", + "5,503.8", + ], + [ + "처리용량 (만m³/일)", + "162.2", + "190.6", + "218.5", + "244.6", + "247.2", + "324.9", + ], + ], + }, + { + group: "법적 미대상", + rows: [ + [ + "시설수 (개소)", + "603", + "599", + "604", + "607", + "613", + "599", + ], + [ + "시설용량 (만m³/일)", + "22,757", + "22,708", + "22,631", + "22,080", + "21,894", + "21,262", + ], + [ + "처리용량 (만m³/일)", + "950.6", + "958.1", + "926.2", + "882.4", + "889.5", + "812.7", + ], + ], + }, + ].map((section, sIdx) => ( + + {section.rows.map((row, rIdx) => ( + + {rIdx === 0 && ( + + )} + {row.map((val, i) => { + const isFirstCol = i === 0; + const isHighlightedCol = [1, 3, 5].includes(i); + + return ( + + ))} + + ))} + +
+ 구분 + + 2018 + + 2019 + + 2020 + + 2021 + + 2022 + + 2023 +
+ {section.group} + + ); + })} +
+
+ + +
+
+ +
+ + {/* 4) 시도별 하수처리수 재이용 현황 */} +
+ 시도별 하수처리수 재이용 현황 + +
+
+
+ (단위: 백만m³/일) +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {[ + ["합계", "7,537.2", "1,137.5", "490.0", "647.5", "484.0", "128.1", "11.4", "24.0", "15.1%", ""], + ["서울특별시", "1,567.0", "114.9", "59.3", "55.6", "55.1", "-", "-", "0.5", "7.3%", ""], + ["부산광역시", "491.5", "146.2", "120.7", "25.5", "25.3", "-", "-", "0.2", "29.7%", ""], + ["대구광역시", "432.7", "102.4", "38.2", "64.2", "64.1", "-", "-", "0.1", "23.7%", ""], + ["인천광역시", "302.3", "57.7", "11.6", "46.1", "29.2", "12.1", "0.5", "4.3", "19.1%", ""], + ["광주광역시", "211.1", "28.7", "6.5", "22.3", "22.2", "-", "-", "0.1", "13.6%", ""], + ["대전광역시", "244.6", "11.9", "11.9", "0.68", "0.0", "-", "-", "0.1", "4.9%", ""], + ["울산광역시", "235.1", "36.1", "6.1", "29.9", "29.7", "0.2", "-", "-", "15.3%", ""], + ["세종특별자치시", "38.5", "2.5", "2.0", "0.5", "0.4", "-", "0.2", "-", "6.6%", ""], + ["경기도", "1,926.8", "313.3", "122.2", "191.0", "153.0", "33.3", "0.4", "4.3", "16.3%", ""], + ["강원도", "230.4", "19.6", "15.4", "4.2", "2.1", "-", "-", "2.1", "8.5%", ""], + ["충청북도", "190.9", "15.6", "6.3", "9.2", "7.4", "0.6", "-", "1.2", "8.2%", ""], + ["충청남도", "241.5", "41.4", "9.8", "31.5", "17.7", "8.6", "4.5", "0.8", "17.1%", ""], + ["전라북도", "292.4", "42.7", "7.5", "35.1", "33.5", "0.2", "1.0", "0.5", "14.6%", ""], + ["전라남도", "254.0", "23.6", "12.3", "11.3", "8.7", "0.0", "1.0", "1.6", "9.3%", ""], + ["경상북도", "378.4", "129.1", "33.7", "95.3", "20.8", "72.5", "0.8", "1.3", "34.1%", ""], + ["경상남도", "411.3", "50.1", "25.0", "25.0", "14.7", "0.5", "3.0", "6.9", "12.2%", ""], + ["제주특별자치도", "88.6", "1.7", "1.5", "0.12", "-", "-", "0.1", "-", "1.9%", ""], + ].map((row, idx) => ( + + {row.map((val, i) => ( + + ))} + + ))} + +
+ 시도 + + 연간 +
+ 하수 +
+ 처리량 + 		+ 재이용현황 + + 재이용률 +
+ (%) + 		+ 비고 +
+ 계 + + 장내 + + 장외 +
+ 소계 + + 하천유지용수 + + 공업용수 + + 농업용수 + + 기타용수 +
+ {val} +
+
+ + +
+
+
+
+ ); +} \ No newline at end of file diff --git a/apps/dm/app/(landing)/reuse/cases/page.tsx b/apps/dm/app/(landing)/reuse/cases/page.tsx new file mode 100644 index 000000000..1043827dd --- /dev/null +++ b/apps/dm/app/(landing)/reuse/cases/page.tsx @@ -0,0 +1,96 @@ +// DM 물 재이용 현황 페이지 +import BusinessSubNav, { type BusinessSubNavMenu } from "@/components/BusinessSubNav"; +import SubPageHeader from "@/components/SubPageHeader"; +import RainStatusSection from "./_components/RainStatusSection"; +import GreywaterStatusSection from "./_components/GreywaterStatusSection"; +import SewageStatusSection from "./_components/SewageStatusSection"; + +const menus: BusinessSubNavMenu[] = [ + { + key: "status-rain", + label: "빗물이용시설(현황)", + sections: [ + { + id: "status-rain-building", + label: "빗물이용시설의 건축물별 빗물이용량 현황", + }, + { + id: "status-rain-purpose-distribution", + label: "빗물이용시설의 용도별 분포 (2023년 기준)", + }, + { + id: "status-rain-purpose-usage", + label: "빗물이용시설의 용도별 빗물이용량 현황", + }, + ], + }, + { + key: "status-greywater", + label: "중수도(현황)", + defaultOpen: false, + sections: [ + { + id: "status-greywater-overall", + label: "전체 중수도 설치 및 이용 현황", + }, + { + id: "status-greywater-factory", + label: "공장 및 발전시설 내 중수도 설치 현황", + }, + { + id: "status-greywater-building", + label: "중수도 건축물별 이용량 현황", + }, + { + id: "status-greywater-usage", + label: "중수도 용도별 이용량 현황", + }, + ], + }, + { + key: "status-sewage", + label: "하수처리수 재이용시설(현황)", + defaultOpen: false, + sections: [ + { + id: "status-treated-year", + label: "연도별 하수처리수 재이용 현황", + }, + { + id: "status-treated-usage", + label: "용도별 하수처리수 재이용 현황", + }, + { + id: "status-treated-facility", + label: "하수처리시설 설치 및 이용 현황", + }, + { + id: "status-treated-region", + label: "시도별 하수처리수 재이용 현황", + }, + ], + }, +]; + +export default function StatusPage() { + return ( +
+ {/* 상단 헤더 */} + + {/* 우측 앵커 네비 */} + + +
+ + + +
+
+ ); +} \ No newline at end of file diff --git a/apps/dm/app/(landing)/reuse/intro/_components/LawIntroSection.tsx b/apps/dm/app/(landing)/reuse/intro/_components/LawIntroSection.tsx new file mode 100644 index 000000000..de39aa798 --- /dev/null +++ b/apps/dm/app/(landing)/reuse/intro/_components/LawIntroSection.tsx @@ -0,0 +1,123 @@ +"use client"; + +import React from "react"; +import Image, { type StaticImageData } from "next/image"; + +import lawPlan from "@/public/images/landing/intro/law_timeline.png"; +import planPerformance from "@/public/images/landing/intro/performance_left.png"; +import domesticChange from "@/public/images/landing/intro/domestic_textbox.png"; +import policyHistory from "@/public/images/landing/intro/policy_timeline.png"; +import lawRelation from "@/public/images/landing/intro/rel_note.png"; +import domesticLinkage from "@/public/images/landing/intro/linkage.png"; + +function SectionTitle({ children }: { children: React.ReactNode }) { + return ( +
+ +

{children}

+
+ ); +} + +function Hr({ className = "" }: { className?: string }) { + return
; +} + +function ImgCard({ src, alt }: { src: StaticImageData; alt: string }) { + return ( +
+ {alt} +
+ ); +} + +function SectionShell({ + id, + title, + children, + className = "", +}: { + id: string; + title: string; + children: React.ReactNode; + className?: string; +}) { + return ( +
+ {title} +
{children}
+
+ ); +} + +export default function LawIntroSection() { + const title = "물 재이용 법"; + + return ( +
+
+

+ {title} + +

+
+ +
+ + + + +
+ + + + + +
+ + + + + +
+ + + + + +
+ + + + + +
+ + + + +
+
+ ); +} \ No newline at end of file diff --git a/apps/dm/app/(landing)/reuse/intro/_components/RainIntroSection.tsx b/apps/dm/app/(landing)/reuse/intro/_components/RainIntroSection.tsx new file mode 100644 index 000000000..4de564a54 --- /dev/null +++ b/apps/dm/app/(landing)/reuse/intro/_components/RainIntroSection.tsx @@ -0,0 +1,99 @@ +"use client"; + +import React from "react"; +import Image, { type StaticImageData } from "next/image"; + +import rainSummary from "@/public/images/landing/intro/rainreuse_intro.png"; +import rainDuty from "@/public/images/landing/intro/rainreuse_mandatory.png"; +import rainDesign from "@/public/images/landing/intro/rainwater_design.png"; +import rainStandard from "@/public/images/landing/intro/rainwater_standards.png"; + +function SectionTitle({ children }: { children: React.ReactNode }) { + return ( +
+ +

{children}

+
+ ); +} + +function Hr({ className = "" }: { className?: string }) { + return
; +} + +function ImgCard({ src, alt }: { src: StaticImageData; alt: string }) { + return ( +
+ {alt} +
+ ); +} + +function SectionShell({ + id, + title, + children, + className = "", +}: { + id: string; + title: string; + children: React.ReactNode; + className?: string; +}) { + return ( +
+ {title} +
{children}
+
+ ); +} + +export default function RainIntroSection() { + const title = "빗물 이용시설"; + + return ( +
+
+

+ {title} + +

+
+ +
+ + + + +
+ + + + + +
+ + + + + +
+ + + + +
+
+ ); +} \ No newline at end of file diff --git a/apps/dm/app/(landing)/reuse/intro/_components/ReuseWaterIntroSection.tsx b/apps/dm/app/(landing)/reuse/intro/_components/ReuseWaterIntroSection.tsx new file mode 100644 index 000000000..03b01e398 --- /dev/null +++ b/apps/dm/app/(landing)/reuse/intro/_components/ReuseWaterIntroSection.tsx @@ -0,0 +1,96 @@ +"use client"; + +import React from "react"; +import Image, { type StaticImageData } from "next/image"; + +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 ( +
+ +

{children}

+
+ ); +} + +function Hr({ className = "" }: { className?: string }) { + return
; +} + +function ImgCard({ src, alt }: { src: StaticImageData; alt: string }) { + return ( +
+ {alt} +
+ ); +} + +function SectionShell({ + id, + title, + children, + className = "", +}: { + id: string; + title: string; + children: React.ReactNode; + className?: string; +}) { + return ( +
+ {title} +
{children}
+
+ ); +} + +export default function ReuseWaterIntroSection() { + const title = "중수도"; + + return ( +
+
+

+ {title} + +

+
+ +
+ + + + +
+ + + + + +
+ + + + +
+
+ ); +} \ No newline at end of file diff --git a/apps/dm/app/(landing)/reuse/intro/_components/TreatedIntroSection.tsx b/apps/dm/app/(landing)/reuse/intro/_components/TreatedIntroSection.tsx new file mode 100644 index 000000000..ff3ece0fc --- /dev/null +++ b/apps/dm/app/(landing)/reuse/intro/_components/TreatedIntroSection.tsx @@ -0,0 +1,89 @@ +"use client"; + +import React from "react"; +import Image, { type StaticImageData } from "next/image"; + +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 ( +
+ +

{children}

+
+ ); +} + +function Hr({ className = "" }: { className?: string }) { + return
; +} + +function ImgCard({ src, alt }: { src: StaticImageData; alt: string }) { + return ( +
+ {alt} +
+ ); +} + +function SectionShell({ + id, + title, + children, + className = "", +}: { + id: string; + title: string; + children: React.ReactNode; + className?: string; +}) { + return ( +
+ {title} +
{children}
+
+ ); +} + +export default function TreatedIntroSection() { + const title = "하수처리수"; + + return ( +
+
+

+ {title} + +

+
+ +
+ + + + +
+ + + + +
+
+ ); +} \ No newline at end of file diff --git a/apps/dm/app/(landing)/reuse/intro/page.tsx b/apps/dm/app/(landing)/reuse/intro/page.tsx new file mode 100644 index 000000000..5ee955604 --- /dev/null +++ b/apps/dm/app/(landing)/reuse/intro/page.tsx @@ -0,0 +1,86 @@ +// DM 물 재이용 소개 페이지 +import BusinessSubNav, { type BusinessSubNavMenu } from "@/components/BusinessSubNav"; +import SubPageHeader from "@/components/SubPageHeader"; +import LawIntroSection from "./_components/LawIntroSection"; +import RainIntroSection from "./_components/RainIntroSection"; +import ReuseWaterIntroSection from "./_components/ReuseWaterIntroSection"; +import TreatedIntroSection from "./_components/TreatedIntroSection"; + +const menus: BusinessSubNavMenu[] = [ + { + key: "intro-law", + label: "물 재이용 법", + sections: [ + { id: "law-plan", label: "법률 제·개정 및 기본계획 수립" }, + { id: "plan-performance", label: "제2차 계획 대비 실적 현황" }, + { id: "domestic-change", label: "우리나라의 수자원 현황 및 물이용 여건" }, + { id: "policy-history", label: "물 재이용 정책 변화 추이" }, + { id: "law-relation", label: "타법령과의 관계 검토" }, + { id: "domestic-linkage", label: "주요 국가계획의 정책방향과 연계한 물 재이용 정책 필요" }, + ], + }, + { + key: "intro-rain", + label: "빗물 이용시설", + defaultOpen: false, + sections: [ + { id: "rain-intro", label: "빗물 재이용 소개" }, + { + id: "rain-mandatory", + label: "빗물이용시설 설치 관리 법적 의무 대상", + }, + { id: "rain-design", label: "빗물이용시설 설계 방안" }, + { + id: "rain-standards", + label: "빗물이용시설 시설기준 및 관리기준", + }, + ], + }, + { + key: "intro-greywater", + label: "중수도", + defaultOpen: false, + sections: [ + { id: "greywater-intro", label: "중수 재이용 소개" }, + { id: "greywater-mandatory", label: "중수도 설치 의무 대상" }, + { id: "greywater-standard", label: "중수도 시설기준 및 관리기준" }, + ], + }, + { + key: "intro-treated", + label: "하수처리수", + defaultOpen: false, + sections: [ + { id: "treatedwater-intro", label: "하수처리수 소개" }, + { + id: "treatedwater-mandatory", + label: "하수처리수 재이용시설 의무 대상", + }, + ], + }, +]; + +export default function IntroPage() { + return ( +
+ {/* 상단 헤더 */} + + {/* 우측 앵커 네비 */} + + + {/* 본문 */} +
+ + + + +
+
+ ); +} \ No newline at end of file diff --git a/apps/dm/app/(popup-layout)/map/popup/page.tsx b/apps/dm/app/(popup-layout)/map/popup/page.tsx index 1c625bcac..bdce68a87 100644 --- a/apps/dm/app/(popup-layout)/map/popup/page.tsx +++ b/apps/dm/app/(popup-layout)/map/popup/page.tsx @@ -1,6 +1,7 @@ "use client"; import Gis from "@common/business_components/ui/map/Gis"; +import "@/app/commonOrigin.css"; import { useEffect, useRef, useState } from "react"; import { mapService } from "../service"; import GisApp from "@common/business_components/ui/map/lib/gis.core"; diff --git a/apps/dm/app/(popup-layout)/map/popup/selectedFcltList.tsx b/apps/dm/app/(popup-layout)/map/popup/selectedFcltList.tsx index 5c742684f..121de004e 100644 --- a/apps/dm/app/(popup-layout)/map/popup/selectedFcltList.tsx +++ b/apps/dm/app/(popup-layout)/map/popup/selectedFcltList.tsx @@ -22,32 +22,36 @@ export default function SelectedFcltList({ const TableContent = ( <> - + - 시설명 - - 처리량(㎥/일) + 시설명 + + 하수처리량 +
+ (㎥/일) - - 재이용량(㎥/일) + + 재이용량 +
+ (㎥/일) - 삭제 + 삭제 {data.map((item) => ( - - {item.ruseUtztnFcltNm} - + + {item.ruseUtztnFcltNm} + {Number(item.splyExtraCpct || 0).toLocaleString()} - + {Number(item.ruseCpct || 0).toLocaleString()} - + +
+ + + +
+ + + + + +
+ setTel(formatKoreanPhoneNumber(v))} + placeholder="전화번호를 입력하세요." + /> +
+ + + + + {editMode ? ( + <> + +
+
+
+ { + setCurrentPw(value); + setIsCurrentPwVerified(false); + }} + placeholder="기존 비밀번호를 입력하세요." + type="password" + /> +
+ +
+

+ {isCurrentPwVerified ? "기존 비밀번호 확인이 완료되었습니다." : "수정 전 기존 비밀번호 확인이 필요합니다."} +

+
+ + + + + ) : null} + + +
+ +
+ + + + + +
+ +
+ +
+ +
+ +
+ + setIsPostcodeModalOpen(false)} + onSelect={handleSelectAddress} + />
- - -
- - - - - -
-
-
- -
- -
- - - -
- - - - - -
- setTel(formatKoreanPhoneNumber(v))} - placeholder="전화번호를 입력하세요." - /> -
- - - - - -
- -
- - - - - -
- -
- -
- -
- -
- - setIsPostcodeModalOpen(false)} - onSelect={handleSelectAddress} - /> +
); } diff --git a/apps/dm/app/(with-layout)/apply/register/page.tsx b/apps/dm/app/(with-layout)/apply/dmdinfo/page.tsx similarity index 57% rename from apps/dm/app/(with-layout)/apply/register/page.tsx rename to apps/dm/app/(with-layout)/apply/dmdinfo/page.tsx index db1c47cb5..cef0461d2 100644 --- a/apps/dm/app/(with-layout)/apply/register/page.tsx +++ b/apps/dm/app/(with-layout)/apply/dmdinfo/page.tsx @@ -1,4 +1,3 @@ -// app/(with-layout)/apply/register/page.tsx /** * 수요정보등록(수정) 화면 * @@ -37,9 +36,9 @@ export default function DemandRegisterPage() { // 기본정보 const [reqDate, setReqDate] = useState(today); - const [reqQty, setReqQty] = useState(""); - const [usePurpose, setUsePurpose] = useState(""); - const [hopePrice, setHopePrice] = useState(""); + const [reqQty, setReqQty] = useState(""); // 요구수량(㎥/d) + const [usePurpose, setUsePurpose] = useState(""); // 사용용도 + const [hopePrice, setHopePrice] = useState(""); // 희망단가 // 요구수질 const [coliform, setColiform] = useState(""); // 총대장균군수 @@ -63,9 +62,9 @@ export default function DemandRegisterPage() { const [cand3, setCand3] = useState(""); //const [candidateList, setCandidateList] = useState([]); - const useTypesData = useDmStore((state) => state.Sdm.useTypesData); - const getUseTypesData = useDmStore((state) => state.getUseTypesData); - const [openSimilar, setOpenSimilar] = useState(false); + const useTypesData = useDmStore((state) => state.Sdm.useTypesData); // 사용용도 + const getUseTypesData = useDmStore((state) => state.getUseTypesData); // 사용용도 함수 + const [openSimilar, setOpenSimilar] = useState(false); // 유사사례 modal open // 후보지 팝업 메시지 핸들러 const candsRef = useRef<{ name: string; code: string }[]>([]); @@ -115,15 +114,16 @@ export default function DemandRegisterPage() { const getSimilarCaseList = useDmStore((state) => state.getSimilarCaseList); const [farmText, setFarmText] = useState("이하"); - const insertSdmInfoData = useDmStore( - (state) => state.insertSdmInfoData - ); + const insertSdmInfoData = useDmStore( (state) => state.insertSdmInfoData ); // 수요정보등록 useEffect(() => { - getUseTypesData(); + getUseTypesData(); // 사용용도 조회 }, [getUseTypesData]); + // 후보지 선택 팝업이 window.postMessage로 넘긴 선택 결과를 받아 + // 현재 화면의 후보지 입력칸(cand1~3)에 반영한다. useEffect(() => { + // message 이벤트의 payload를 읽어 후보지 목록 상태를 갱신하는 핸들러 const handler = (event: MessageEvent) => { if (!event.data) return; @@ -200,25 +200,26 @@ export default function DemandRegisterPage() { return true; } + // 유사사례 const rows: SimilarCaseRow[] = similarCaseList.map((el, idx) => ({ caseId: String(idx), - projectName: el.ruseBizNm, - period: `${el.bizBgngDate} ~ ${el.bizEndDate}`, + projectName: el.ruseBizNm, // 사업명 + period: `${el.bizBgngDate} ~ ${el.bizEndDate}`, // 사업기간 - supplyFacilityType: el.splyFcltKnd, - supplyName: el.splyFcltNm, - supplyCapacity: Number(el.splyFcltCpct), + supplyFacilityType: el.splyFcltKnd, // 시설종류 + supplyName: el.splyFcltNm, // 공급처명 + supplyCapacity: Number(el.splyFcltCpct), // 공급처 시설용량 - demandName: el.dmdFcltNm, - demandAddress: el.dmdFcltAddr, + demandName: el.dmdFcltNm, // 수요처명 + demandAddress: el.dmdFcltAddr, // 수요처 주소 - facilityCapacity: Number(el.ruseFcltCpct), - pipeKm: Number(el.ruseFcltPplLen), - purpose: el.ruseFcltUsg, + facilityCapacity: Number(el.ruseFcltCpct), // 재이용시설 시설용량 + pipeKm: Number(el.ruseFcltPplLen), // 재이용시설 관로길이 + purpose: el.ruseFcltUsg, // 재이용시설 용도 - supplyAmt: Number(el.ruseFcltSplyCpct), - treatment: el.ruseFcltPrcsMsrc, - usePurpose: el.ruseFcltUsg, + supplyAmt: Number(el.ruseFcltSplyCpct), // 재이용시설 공급(용)량 + treatment: el.ruseFcltPrcsMsrc, // 재이용시설 처리공법 + usePurpose: el.ruseFcltUsg, // 재이용시설 용도 })); const detailsByCaseId: Record = {}; @@ -312,6 +313,7 @@ export default function DemandRegisterPage() { } } + // 후보지 조회 팝업 Open const searchCandidate = (e: React.MouseEvent) => { e.preventDefault(); e.stopPropagation(); @@ -328,28 +330,27 @@ export default function DemandRegisterPage() { window.open(url, "candidatePopup", popupOptions); }; + // 유사기준 const getCriterionCode = (criterion: string) => { switch (criterion) { - case "supplyAmt": - return "S"; - case "money": - return "M"; - case "usePurpose": - return "U"; - default: - return ""; + case "supplyAmt": return "S"; // 공급량 + case "money": return "M"; // 단가? + case "usePurpose": return "U"; // 이용용도 + default: return ""; } }; + // 유사사례 Modal Open const searchSimilarCase = async (e: React.MouseEvent) => { e.preventDefault(); e.stopPropagation(); setOpenSimilar(true); }; + // 수요정보 입력란 초기화 const initQualityForm = () => { setColiform(""); - setNoDetect(false); + setNoDetect(false); // 총대장균군수 불검출 setTn(""); setResidualCl(""); setTp(""); @@ -364,6 +365,7 @@ export default function DemandRegisterPage() { setFarmText("이하"); } + // 사용용도별 초기화 const fncSetOptionValue = (e: React.ChangeEvent) => { const value = e.target.value; initQualityForm(); @@ -422,261 +424,278 @@ export default function DemandRegisterPage() { setUsePurpose(value); } + const pageTitle = "수요정보등록"; + return ( <> -
+
+
+ {/* 서브 타이틀 + 브레드크럼 */} + - {/* 서브 타이틀 + 브레드크럼 */} - - - {/* 컨텐츠 영역 */} -
- - {/* 기본정보 테이블 */} -
- - - - - - - - - - - - - - - - - - - - - -
- - {/* 요구수질 섹션 타이틀 바 */} -
-
- 요구수질 - - {/* 수질기준참고 모달 */} - setOpenRef(false)} - imageSrc="/images/landing/water_quality_ref_1.png" - /> -
-
- - {/* 요구수질 테이블 */} -
- {/* 1행 */} - - - + {/* 컨텐츠 영역 */} +
+ {/* 타이틀 */} +
+

+ {pageTitle} + +

- } - rightLabel="총질소(T-N)(mg/L)" - rightControl={ - - } - /> - + + {/* 구분선 */} +
- {/* 2행 */} - } - rightLabel="총인(T-P)(mg/L)" - rightControl={ - - } - /> - + {/* 필수값 안내 */} +

+ * 는 필수 값입니다. +

- {/* 3행 */} - - } - rightLabel="수소이온농도(pH)" - rightControl={ -
- setPh((p) => ({ ...p, min: v }))} - className="w-32" - /> - ~ - setPh((p) => ({ ...p, max: v }))} - className="w-32" - /> -
- } - /> - + {/* 기본정보 테이블 */} +
+ + + - {/* 4행 */} - - 생물화학적산소요구량 -
- (BOD)(mg/L) - - } - /* leftRequired */ - leftControl={} - rightLabel="염화물(mgCL/L)" - rightControl={} - /> - + - {/* 5행 */} - setOdor(e.target.value)} - className="h-11 w-full max-w-[200px] rounded-md border border-neutral-300 bg-white px-3 text-sm outline-none focus:border-neutral-500" - > - - - - - } - rightLabel="전기전도도(µs/cm)" - rightControl={} - /> - + + + - {/* 6행 */} - } - rightLabel="비고" - rightControl={ -