diff --git a/apps/dm/app/(landing)/reuse/_components/TopNav.tsx b/apps/dm/app/(landing)/reuse/_components/TopNav.tsx index 17c6f5e04..781b2d932 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/business/layout.tsx b/apps/dm/app/(landing)/reuse/business/layout.tsx index dc62f77cc..c8017b0db 100644 --- a/apps/dm/app/(landing)/reuse/business/layout.tsx +++ b/apps/dm/app/(landing)/reuse/business/layout.tsx @@ -1,16 +1,70 @@ -// apps/dm/app/(landing)/reuse/business/layout.tsx +"use client"; -import type { ReactNode } from "react"; +import { ReactNode, useEffect, useMemo, useState } from "react"; +import { usePathname } from "next/navigation"; import Lnb from "../_components/Lnb"; -import { LNB_BUSINESS } from "../_constants/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/(with-layout)/example/globalCase/australia/page.tsx b/apps/dm/app/(with-layout)/example/globalCase/australia/page.tsx deleted file mode 100644 index 7766aa62f..000000000 --- a/apps/dm/app/(with-layout)/example/globalCase/australia/page.tsx +++ /dev/null @@ -1,151 +0,0 @@ -// apps/dm/app/(landing)/reuse/business/globalCase/australia/page.tsx -"use client"; - -import SubPageHeader from "@/components/SubPageHeader"; -import CaseImageSlider from "@/components/CaseImageSlider"; - -function SectionTitle({ children }: { children: React.ReactNode }) { - return ( -
- -

{children}

-
- ); -} - -type HrProps = { - className?: string; -}; - -function Hr({ className = "" }: HrProps) { - return
; -} - -// type ImgCardProps = { -// src: string; -// alt: string; -// }; - -// function ImgCard({ src, alt }: ImgCardProps) { -// return ( -//
-// {alt} -//
-// ); -// } - -export default function GreywaterPage() { - return ( -
- - -
- - {/* 슬라이드 이미지 영역 */} - - - {/* 생활용수로 재이용수의 적극 활용 */} -
- 생활용수로 재이용수의 적극 활용 -
-
    -
  • - – 재이용수를 공원, 골프장 등의 관개용수로 공급(초록색 지역) -
    • -
  • - – Dual pipe로 재이용수를 특정 주거단지로 공급(보라색 지역) -
    • -
  • - – 현재 7,000여 가구가 재이용수를 사용 -
    • -
  • - – 2030년까지 43,000가구로 확대 예정 -
    • -
-
-
- -
- - {/* 호주 재이용수 광역 활용(퀸즈랜드주 브리즈번) */} -
- 호주 재이용수 광역 활용(퀸즈랜드주 브리즈번) -
-
    -
  • - • SEQ Water Grid는 브리즈번 남동부지역의 식수 공급을 위해 설정한 광역 수로망 -
    • -
  • - • 이 광역수로망을 활용하여 물이 부족한 지역으로 물을 공급
    -
      -
    • – 1,618억의 사업비 중 92% 국비, 지방비 8% 투입
      • -
    • – 재이용수는 24km 관로로 타이난 TSMC로 공급
      • -
    -
    • -
  • - • 12개 댐, 32개 수처리 시설, 3개 재이용시설, 담수화 플랜트 1개, 저수지 28개와 600km 이상의 물 공급 관로를 건설 -
    • -
  • - • 지역적으로 강수량이 고르지 않아, 댐의 저수율이 불균등할 때 지역의 물 공급을 보충하는 중요한 역할을 수행 -
    • -
-
-
- -
- - {/* 특이사항 */} -
- 특이사항 -
    -
  • -
      -
    • 호주는 2000~2009년 강수량 감소로 밀레니엄 가뭄이 발생하여 심각한 물 부족 현상이 발생함
      • -
    -
    • -
  • -
      -
    • 호주는 해안 도시에 인구가 밀집하여 거주하고 있으며 인구 증가율이 타 선진국 대비 높아, 향후 도시에 공급할 수자원 확보가 필요함
      • -
    -
    • -
  • -
      -
    • 호주정부는 1990년대부터 하·폐수가 방류될 경우의 환경 피해에 대해 인식하기 시작하고 배출규제와 위원회를 구성하기 시작
      • -
    -
    • -
  • -
      -
    • 연방정부는 주에 인센티브를 주는 방식으로 물 정책을 장려하고 토지소유권과 물 권리를 구분하여 거래를 허용하고 물 재이용 활성화를 위한 Water Smart Australia 프로그램을 시행
      • -
    -
    • -
  • -
      -
    • 호주의 용수공급 체계는 영국과 미국의 특성들이 존재하지만, 주의 특성과 주 정부의 정책 방향에 따라 주마다도 많은 차이가 있음. 특히 대부분의 주에서 수 자원 개발 기능과 수도 공급의 기능을 분리하여 주정부
      산하 기관에서 운영하는게 특징
      • -
    -
    • -
-
-
- ); -} diff --git a/apps/dm/app/(with-layout)/example/globalCase/eu/page.tsx b/apps/dm/app/(with-layout)/example/globalCase/eu/page.tsx deleted file mode 100644 index e2930b392..000000000 --- a/apps/dm/app/(with-layout)/example/globalCase/eu/page.tsx +++ /dev/null @@ -1,142 +0,0 @@ -// apps/dm/app/(landing)/reuse/business/globalCase/eu/page.tsx -"use client"; - -import SubPageHeader from "@/components/SubPageHeader"; -import CaseImageSlider from "@/components/CaseImageSlider"; - -function SectionTitle({ children }: { children: React.ReactNode }) { - return ( -
- -

{children}

-
- ); -} - -type HrProps = { - className?: string; -}; - -function Hr({ className = "" }: HrProps) { - return
; -} - -// type ImgCardProps = { -// src: string; -// alt: string; -// }; - -// function ImgCard({ src, alt }: ImgCardProps) { -// return ( -//
-// {alt} -//
-// ); -// } - -export default function GreywaterPage() { - return ( -
- - -
- - {/* 슬라이드 이미지 영역 */} - - - {/* 물 재이용에 대한 법률을 제정(2020 제정, 2023 시행) */} -
- 물 재이용에 대한 법률을 제정(2020 제정, 2023 시행) -
-
    -
  • - • 유럽 지역의 물 부족 문제를 인식하고 ’20년 물 재이용 법률을 제정 (2020/741) -
    • -
  • - • 2023년부터 모든 EU국가에서 시행 -
    • -
-
-
- -
- - {/* 유럽연합 회원국 물 재이용 지원정책 */} -
- 유럽연합 회원국 물 재이용 지원정책 -
-
    -
  • - • 유럽연합 차원에서 다양한 물 재이용 프로그램 자금 지원
    -
      -
    • – 2021년부터 3년간 Life RECYCLIO 프로그램 지원 → 세부내용 물 재이용 프로그램
      -
        -
      • 1. 환경 관련 사업에 자금을 지원하는 Life 프로그램의 일환으로 80만 유로를 지원
        • -
      • 2. 식품·농업 분야 물 재이용 확대를 위해 기술 이전 및 평가 실시
        • -
      -
      • -
    • – 물 재이용 정책 수행을 위해 BOOST-INN 180만 유로를 지원
      -
        -
      • *프랑스, 이탈리아, 스페인 등 유럽 선진국 솔루션 공유
        • -
      -
      • -
    -
    • -
  • - • EU산하 JRC(공동연구센터)에서 물 재이용 기술제공 지원
    -
      -
    • ‘물 재이용 회원 관리 실무 커뮤니티(Water Reuse Management Community of Practice)’ 시범사업 수행
      • -
    • 유럽 전역에 성공적인 모델 활용 및 혁신적인 물 재이용 솔루션을 확장할 수 있는 기술을 제공
      • -
    -
    • -
-
-
- -
- - {/* 특이사항 */} -
- 특이사항 -
    -
  • -
      -
    • 2019년 기준 EU 인구의 38%가 물 부족의 영향을 받을 것으로 예상됨. 이 흐름대로면 2030년까지 유럽 유역 전반에 물 부족 문제가 발생하게 될 것으로 예상. 인구 증가, 도시화의 확대, 염분화 및 기후변화들이 수자원 문제들의 주요 요인이며, 식습관 변화와 산업용수 수요 증가 등으로 악화되고 있는 상황
      • -
    -
    • -
  • -
      -
    • 유럽의 물 부족 상황은 지역에 따라 다르게 나타나 스페인을 비롯한 남부유럽 에서 특히 심각함. 전반적으로 북유럽에 비해 남유럽의 물 스트레스가 심하며, 특히 스페인과 포르투갈, 프랑스 동부지역의 물 스트레스가 심각함
      • -
    -
    • -
  • -
      -
    • 유럽 연합에서도 물 부족 문제를 인식하고 2000년 EU Water Framework Directive을 개발, 이후 2020년 재이용에 관한 법률을 제정
      • -
    -
    • -
-
-
- ); -} diff --git a/apps/dm/app/(with-layout)/example/globalCase/overview/page.tsx b/apps/dm/app/(with-layout)/example/globalCase/overview/page.tsx deleted file mode 100644 index 4d84b0c43..000000000 --- a/apps/dm/app/(with-layout)/example/globalCase/overview/page.tsx +++ /dev/null @@ -1,229 +0,0 @@ -// apps/dm/app/(landing)/reuse/business/globalCase/overview/page.tsx -"use client"; - -import SubPageHeader from "@/components/SubPageHeader"; -import CaseImageSlider from "@/components/CaseImageSlider"; - -function SectionTitle({ children }: { children: React.ReactNode }) { - return ( -
- -

{children}

-
- ); -} - -type HrProps = { - className?: string; -}; - -function Hr({ className = "" }: HrProps) { - return
; -} - -// type ImgCardProps = { -// src: string; -// alt: string; -// }; - -// function ImgCard({ src, alt }: ImgCardProps) { -// return ( -//
-// {alt} -//
-// ); -// } - -export default function GreywaterPage() { - return ( -
- - -
- - {/* 슬라이드 이미지 영역 */} - - -
-
-

- 2024년 하수도 통계 기준 15.6%이며,
- 제2차 물 재이용 기본 계획을 고려한 2030년 목표는 17% -

- - {/* 진행 바 영역 */} -
- {/* 2024 */} -
- ’24년도 -
-
-
- 15.6% -
- - {/* 2030 */} -
- ’30년도 -
-
-
- 17% -
-
-
- - {/* 설명 문구 */} -
    -
  • - • 우리나라의 하수 처리 재이용률은 15% 수준 -
    • -
  • - • 대만은 가뭄과 공업용수 증가에 대응하여 - - {" "}현재 4.3% 수준이며, 16.5%까지 확대 계획 수립 - -
    • -
- - {/* 테이블 */} -
- - - - - - - - - - - - - - - - - - - - - - - -
국가해외정보현재미래(목표, 예측치)
한국12.1%15.6%17%
대만2.4%4.3%16.5%
-
-
- -
- - {/* 주요 국가의 하수처리수 재이용률 (%) */} -
- 주요 국가의 하수처리수 재이용률 (%) - {/* 설명 문구 */} -
    -
  • - • 전 세계적으로 물 재이용은 호주, 유럽, 아프리카, 미국 등 가뭄이 잦거나 심각한 가뭄이 발생한 국가에서 많이 이루어짐 -
    • -
  • - • 이스라엘, 쿠웨이트 등 중동 및 북아프리카 지역은 가용 수자원이 제한되어 있어 재이용량 비중도 매우 높은 편 -
    • -
- {/* 테이블 (2단 병렬: 좌/우 데이터) */} -
-
- - - - {/* 좌측 3컬럼 */} - - - - - {/* 우측 3컬럼 */} - - - - - - - - {[ - { - L: { c: "이스라엘", r: "중동&북아프리카", v: "92.3" }, - R: { c: "튀르키예", r: "동유럽&중앙아시아", v: "26.6" }, - }, - { - L: { c: "쿠웨이트", r: "중동&북아프리카", v: "89.3" }, - R: { c: "독일", r: "서유럽", v: "25.0" }, - }, - { - L: { c: "호주", r: "동아시아&태평양", v: "49.0" }, - R: { c: "스페인", r: "서유럽", v: "24.4" }, - }, - { - L: { c: "싱가포르", r: "동아시아&태평양", v: "44.4" }, - R: { c: "한국", r: "동아시아&태평양", v: "12.1" }, - }, - { - L: { c: "그리스", r: "서유럽", v: "39.1" }, - R: { c: "미국", r: "북아메리카", v: "13.1" }, - }, - { - L: { c: "사우디아라비아", r: "중동&북아프리카", v: "32.8" }, - R: { c: "프랑스", r: "서유럽", v: "9.5" }, - }, - { - L: { c: "이탈리아", r: "서유럽", v: "31.7" }, - R: { c: "대만", r: "동아시아&태평양", v: "2.4" }, - }, - { - L: { c: "룩셈부르크", r: "서유럽", v: "29.1" }, - R: { c: "일본", r: "동아시아&태평양", v: "0.8" }, - }, - { - L: { c: "포르투갈", r: "서유럽", v: "29.0" }, - R: { c: "", r: "", v: "" }, // 마지막 우측은 빈칸(이미지처럼) - }, - ].map((row, idx) => ( - - {/* 좌측 */} - - - - - {/* 우측 */} - - - - - ))} - -
국가명지역재이용률국가명지역재이용률
{row.L.c}{row.L.r}{row.L.v}{row.R.c}{row.R.r}{row.R.v}
-
-
-
-
- ); -} diff --git a/apps/dm/app/(with-layout)/example/globalCase/page.tsx b/apps/dm/app/(with-layout)/example/globalCase/page.tsx new file mode 100644 index 000000000..be17141c5 --- /dev/null +++ b/apps/dm/app/(with-layout)/example/globalCase/page.tsx @@ -0,0 +1,844 @@ +"use client"; + +import SubPageHeader from "@/components/SubPageHeader"; +import CaseImageSlider from "@/components/CaseImageSlider"; + +function SectionTitle({ children }: { children: React.ReactNode }) { + return ( +
+ +

{children}

+
+ ); +} + +function Hr({ className = "" }: { className?: string }) { + return
; +} + +export default function GlobalCasePage() { + return ( +
+ + +
+ + {/* 사례 개요 */} +
+ 사례 개요 + + + +
+
+

+ 2024년 하수도 통계 기준 15.6%이며, +
+ 제2차 물 재이용 기본 계획을 고려한 2030년 목표는{" "} + 17% +

+ +
+
+ ’24년도 +
+
+
+ 15.6% +
+ +
+ ’30년도 +
+
+
+ 17% +
+
+
+ +
    +
  • + • 우리나라의 하수 처리 재이용률은{" "} + 15% 수준 +
    • +
  • + • 대만은 가뭄과 공업용수 증가에 대응하여 + + {" "} + 현재 4.3% 수준이며, 16.5%까지 확대 계획 수립 + +
    • +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
+ 국가 + + 해외정보 + + 현재 + + 미래(목표, 예측치) +
한국12.1%15.6%17%
대만2.4%4.3%16.5%
+
+
+ +
+ +
+ 주요 국가의 하수처리수 재이용률 (%) + +
    +
  • + • 전 세계적으로 물 재이용은 호주, 유럽, 아프리카, 미국 등 가뭄이 + 잦거나 심각한 가뭄이 발생한 국가에서 많이 이루어짐 +
    • +
  • + • 이스라엘, 쿠웨이트 등 중동 및 북아프리카 지역은 가용 수자원이 + 제한되어 있어 재이용량 비중도 매우 높은 편 +
    • +
+ +
+ + + + + + + + + + + + + + {[ + { + L: { c: "이스라엘", r: "중동&북아프리카", v: "92.3" }, + R: { c: "튀르키예", r: "동유럽&중앙아시아", v: "26.6" }, + }, + { + L: { c: "쿠웨이트", r: "중동&북아프리카", v: "89.3" }, + R: { c: "독일", r: "서유럽", v: "25.0" }, + }, + { + L: { c: "호주", r: "동아시아&태평양", v: "49.0" }, + R: { c: "스페인", r: "서유럽", v: "24.4" }, + }, + { + L: { c: "싱가포르", r: "동아시아&태평양", v: "44.4" }, + R: { c: "한국", r: "동아시아&태평양", v: "12.1" }, + }, + { + L: { c: "그리스", r: "서유럽", v: "39.1" }, + R: { c: "미국", r: "북아메리카", v: "13.1" }, + }, + { + L: { c: "사우디아라비아", r: "중동&북아프리카", v: "32.8" }, + R: { c: "프랑스", r: "서유럽", v: "9.5" }, + }, + { + L: { c: "이탈리아", r: "서유럽", v: "31.7" }, + R: { c: "대만", r: "동아시아&태평양", v: "2.4" }, + }, + { + L: { c: "룩셈부르크", r: "서유럽", v: "29.1" }, + R: { c: "일본", r: "동아시아&태평양", v: "0.8" }, + }, + { + L: { c: "포르투갈", r: "서유럽", v: "29.0" }, + R: { c: "", r: "", v: "" }, + }, + ].map((row, idx) => ( + + + + + + + + + + ))} + +
+ 국가명 + + 지역 + + 재이용률 + + 국가명 + + 지역 + + 재이용률 +
+ {row.L.c} + + {row.L.r} + + {row.L.v} + + {row.R.c} + + {row.R.r} + + {row.R.v} +
+
+
+
+ +
+ + {/* 대만 */} +
+ 대만 + + + +
+ 재생 수자원 개발법 제정(2015년제정, 2022개정) +
+
    +
  • + • 목적: 수자원 지속 가능성 향상, 재생 수자원 활용을 통해 물부족 + 문제 해결 +
    • +
  • + • 내용: 재생 수자원 정의·분류, 이용 의무, 이용 제한, 수질 기준 등 +
    • +
+ +
+
    +
  • + – 제4조. 물 소비 계획에 따른 재이용수 이용 관련 내용 (일정 비율 + 재이용수 사용 규정) +
    • +
  • + – 제5조. 재이용수의 운영자, 사용자 관련 내용 (지자체에서 하수 + 무상공급 제공 가능) +
    • +
  • + – 제7조. 재이용수 이용 범위, 이용량 재이용수 수질 기준 내용 + (식품, 제약산업 사용 불가) +
    • +
  • + – 제8조. 재이용수 사업 주체, 책임 등에 관한 내용 (광역인 경우, + 정부가 지자체 지정) +
    • +
+
+
+
+ +
+ +
+ 대만정부 하수재이용 사업 시행 +
+
    +
  • + • 대만은 물 재이용에 적극적이며 국가주도로 하수재이용 사업 + 시행(안핑) +
    +
      +
    • – 1,618억의 사업비 중 92% 국비, 지방비 8% 투입
      • +
    • – 재이용수는 24km 관로로 타이난 TSMC로 공급
      • +
    +
    • +
  • • 안핑을 포함한 16건 공사 완료시 628,100 CMD 공급 가능
    • +
  • • 공급단가는 수질과 운영조건에 따라 다르게 책정
    • +
+ +
+

+ 〈대만 재이용 시설별 재이용수 공급단지〉 +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
사업 + 가격(NTD/㎥) + + 가격(원/㎥) +
Fongshan(가오슝)23.391,038원
Linhai(가오슝)19.28858원
Anping(타이난)38.281,699원
Yongkang(타이난)23.671,050원
Rende(타이난)28.261,254원
Shuinan(타이중)15.00668원
Quaitou(가오슝)35.441,573원
+
+
+
+ +
+ +
+ 특이사항 +
    +
  • +
      +
    • + 대만은 풍부한 강수량에도, 지형적 특성으로 인해 수자원 확보에 + 어려움을 겪고 있으며, 대만 남부지역의 경우 우기와 건기 사이의 + 강수량 차이가 큼 +
      • +
    +
    • +
  • +
      +
    • + 대만은 최근 심각한 가뭄이 여러 해에 걸쳐서 발생하고 있으며, + 강수량 감소와 함께 대만 정부 주도하에 반도체 산업을 국가 핵심 + 산업으로 선정하고 반도체 산업 육성 계획을 세움. 그 결과, + 2023년 파운드리 시장의 68.3%를 차지하는 반도체 강국으로 + 성장했으며 이로 인한 공업용수 수요가 크게 증가 +
      • +
    +
    • +
  • +
      +
    • + 반도체 산업은 물 소비가 많아, 안정적인 용수공급이 매우 + 중요한데 현재 19개의 반도체 공장이 물이 부족한 대만 남부지역에 + 위치함. 2021년 가뭄 발생 당시, 산업단지 기업들도 용수 공급에 + 어려움을 겪음. 이는 대만 남부 지역의 물 부족, 물 분배 등에 + 대한 문제를 야기함 +
      • +
    +
    • +
  • +
      +
    • + 대만 정부는 산업단지 기업들에게 2023년부터 물에 대한 + 추가요금 부과를 시작했으며, 농업용수에 대해서는 강력한 + 억제정책을 시행함. 안정적인 용수 공급을 위해서 정부와 + 기업에서 자체적으로 재이용수 시설에 대한 투자가 이루어지고 + 있음. +
      • +
    +
    • +
  • +
      +
    • + 대만은 2004년 기후변화로 인한 물 부족 상황을 해결하기 위해 + 수자원 보호 전략을 승인하고, 2015년 대만 환경부는 재생 수자원 + 개발법을 발표, 2022년에는 한 차례 개정 +
      • +
    +
    • +
  • +
      +
    • + 대만은 물 소비량이 많은 산업(high water consuming + industries)과 하수처리장(municipal wastewater treatment + plants), 두 곳을 재이용수의 주요 공급원으로 계획 +
      • +
    +
    • +
+
+
+ +
+ + {/* 호주 */} +
+ 호주 + + + +
+ 생활용수로 재이용수의 적극 활용 +
+
    +
  • – 재이용수를 공원, 골프장 등의 관개용수로 공급(초록색 지역)
    • +
  • + – Dual pipe로 재이용수를 특정 주거단지로 공급(보라색 지역) +
    • +
  • – 현재 7,000여 가구가 재이용수를 사용
    • +
  • – 2030년까지 43,000가구로 확대 예정
    • +
+
+
+ +
+ +
+ 호주 재이용수 광역 활용(퀸즈랜드주 브리즈번) +
+
    +
  • + • SEQ Water Grid는 브리즈번 남동부지역의 식수 공급을 위해 + 설정한 광역 수로망 +
    • +
  • + • 이 광역수로망을 활용하여 물이 부족한 지역으로 물을 공급 +
    +
      +
    • – 1,618억의 사업비 중 92% 국비, 지방비 8% 투입
      • +
    • – 재이용수는 24km 관로로 타이난 TSMC로 공급
      • +
    +
    • +
  • + • 12개 댐, 32개 수처리 시설, 3개 재이용시설, 담수화 플랜트 1개, + 저수지 28개와 600km 이상의 물 공급 관로를 건설 +
    • +
  • + • 지역적으로 강수량이 고르지 않아, 댐의 저수율이 불균등할 때 + 지역의 물 공급을 보충하는 중요한 역할을 수행 +
    • +
+
+
+ +
+ +
+ 특이사항 +
    +
  • +
      +
    • + 호주는 2000~2009년 강수량 감소로 밀레니엄 가뭄이 발생하여 + 심각한 물 부족 현상이 발생함 +
      • +
    +
    • +
  • +
      +
    • + 호주는 해안 도시에 인구가 밀집하여 거주하고 있으며 인구 + 증가율이 타 선진국 대비 높아, 향후 도시에 공급할 수자원 확보가 + 필요함 +
      • +
    +
    • +
  • +
      +
    • + 호주정부는 1990년대부터 하·폐수가 방류될 경우의 환경 피해에 + 대해 인식하기 시작하고 배출규제와 위원회를 구성하기 시작 +
      • +
    +
    • +
  • +
      +
    • + 연방정부는 주에 인센티브를 주는 방식으로 물 정책을 장려하고 + 토지소유권과 물 권리를 구분하여 거래를 허용하고 물 재이용 + 활성화를 위한 Water Smart Australia 프로그램을 시행 +
      • +
    +
    • +
  • +
      +
    • + 호주의 용수공급 체계는 영국과 미국의 특성들이 존재하지만, 주의 + 특성과 주 정부의 정책 방향에 따라 주마다도 많은 차이가 있음. + 특히 대부분의 주에서 수 자원 개발 기능과 수도 공급의 기능을 + 분리하여 주정부 산하 기관에서 운영하는게 특징 +
      • +
    +
    • +
+
+
+ +
+ + {/* 싱가포르 */} +
+ 싱가포르 + + + +
+ 싱가포르 NEWater 비중 확대 +
+
    +
  • + • 2003년 공식 NEWater 공장을 가동했으며 신뢰확보를 위해 + NEWater Visitor Center를 함께 건설 +
    • +
  • • NEWater 전체파이프 공급 → 반도체 공장에서 가장 많이 사용
    • +
  • + • 2060년까지 NEWater 비중 55%까지 높이는 것이 싱가포르의 목표 +
    • +
+
+
+ +
+ +
+ 싱가포르 재이용수 의무화 및 지원정책 +
+
    +
  • + • 공업용수 수요가 높은 산업에 대해 물 재이용을 의무화 +
    +
      +
    • + – 반도체업계 전체 비 재이용수(non-domestic용수) 17% 차지 → + 공업용수 수요 원인 +
      • +
    • + – 2024년 1월 1일부터 연간 최소 60,000㎥를 소비하는 사업자는 + 재이용수 사용 의무화 +
      • +
    • + – 반도체 공장의 경우 최소 50% 이상의 재이용수를 요구함(현재는 + 43% 정도) +
      • +
    +
    • +
  • + • 재정 지원을 통해 재이용 활성화를 지원 +
    +
      +
    • + – 재이용 설비를 기준으로 2025년까지 싱가포르 수자원공사의 + 2가지 금융상품 제공 +
        +
      • 1. Water Efficiency Fund
        • +
      • 2. Industrial Water Solutions Demonstration Fund
        • +
      +
      • +
    • + – 2025년 기준 지원 한도 상향 → 물 재이용 활성 도모 +
        +
      • + 투입비용 50% → 75% 지원 / WSDP: $400만 → $500만 +
        • +
      • + 물 효율이 높은 장비를 도입하는 데에도 최대 $300만 지원 + 가능 +
        • +
      +
      • +
    +
    • +
+
+
+ +
+ +
+ 특이사항 +
    +
  • +
      +
    • + 싱가포르는 천연 수자원이 많지 않아, 말레이시아 조호르와 1962년 + 맺은 협약으로 물을 수입해왔으며, 재이용수를 늘리기 위한 노력을 + 계속하고 있음 +
      +
        +
      • + - 싱가포르는 국토 내에 호수와 하천이적고 집수공간도 적어 + 빗물로 확보할 수 있는 수자원량은 전체 물 수요의 20%에 + 불과함 +
        • +
      +
      • +
    +
    • +
  • +
      +
    • + 싱가포르는 도심에 저수지를 건설하 고 건물에 빗물이용시설을 + 건설하여 빗물을 재이용하고 있음 +
      • +
    +
    • +
  • +
      +
    • + 싱가포르는 2002년부터 하수재이용수인 NEWater를 개발, 비음 + 용수와 간접음용수로 활용하고 있음 +
      +
        +
      • + - 재이용수를 NEWater라는 이름으로 명명하고 NEWater에 대한 + 신뢰 확보를 위해 NEWater 방문자 센터도 건설함 +
        • +
      • + - 비음용수로 많이 사용하며 건기에는 NEWater를 저수지에 + 추가하여 원수와 섞음. 원수는 상수도에서 처리 한 후 가정에 + 수돗물로 공급함 +
        • +
      • + - NEWater는 전용 파이프를 통해 주로 웨이퍼 제조 공장, + 산업단지, 상업용 건물에서 산업 및 냉각수로 사용. 제일 많이 + 사용하는 곳은 웨이퍼 제조 공장 +
        • +
      +
      • +
    +
    • +
  • +
      +
    • + 2024년 4월 기준 1㎥ 당 공업용수 가격은 $1.66이며, + Non-domestic 기준 NEWater 가격은 $2.41 +
      • +
    +
    • +
  • +
      +
    • + 공업용수 가격 $1.66은 수도요금(water tariff)과 수자원세 + (waterborne tax)로 구분됨. $1.66에는 $1만큼의 수자원세가 + 포함됨 +
      • +
    +
    • +
  • +
      +
    • + 2023년 싱가포르는 산업용수 수요가 높은 산업에 대해 물 재 + 이용을 의무화했으며, 정부는 기금을 통해 물 재이용을 지원함 +
      • +
    +
    • +
+
+
+ +
+ + {/* EU */} +
+ EU + + + +
+ 물 재이용에 대한 법률을 제정(2020 제정, 2023 시행) +
+
    +
  • + • 유럽 지역의 물 부족 문제를 인식하고 ’20년 물 재이용 법률을 + 제정 (2020/741) +
    • +
  • • 2023년부터 모든 EU국가에서 시행
    • +
+
+
+ +
+ +
+ 유럽연합 회원국 물 재이용 지원정책 +
+
    +
  • + • 유럽연합 차원에서 다양한 물 재이용 프로그램 자금 지원 +
    +
      +
    • + – 2021년부터 3년간 Life RECYCLIO 프로그램 지원 → 세부내용 + 물 재이용 프로그램 +
        +
      • + 1. 환경 관련 사업에 자금을 지원하는 Life 프로그램의 + 일환으로 80만 유로를 지원 +
        • +
      • + 2. 식품·농업 분야 물 재이용 확대를 위해 기술 이전 및 평가 + 실시 +
        • +
      +
      • +
    • + – 물 재이용 정책 수행을 위해 BOOST-INN 180만 유로를 지원 +
        +
      • + *프랑스, 이탈리아, 스페인 등 유럽 선진국 솔루션 공유 +
        • +
      +
      • +
    +
    • +
  • + • EU산하 JRC(공동연구센터)에서 물 재이용 기술제공 지원 +
    +
      +
    • + ‘물 재이용 회원 관리 실무 커뮤니티(Water Reuse Management + Community of Practice)’ 시범사업 수행 +
      • +
    • + 유럽 전역에 성공적인 모델 활용 및 혁신적인 물 재이용 + 솔루션을 확장할 수 있는 기술을 제공 +
      • +
    +
    • +
+
+
+ +
+ +
+ 특이사항 +
    +
  • +
      +
    • + 2019년 기준 EU 인구의 38%가 물 부족의 영향을 받을 것으로 + 예상됨. 이 흐름대로면 2030년까지 유럽 유역 전반에 물 부족 + 문제가 발생하게 될 것으로 예상. 인구 증가, 도시화의 확대, + 염분화 및 기후변화들이 수자원 문제들의 주요 요인이며, 식습관 + 변화와 산업용수 수요 증가 등으로 악화되고 있는 상황 +
      • +
    +
    • +
  • +
      +
    • + 유럽의 물 부족 상황은 지역에 따라 다르게 나타나 스페인을 + 비롯한 남부유럽 에서 특히 심각함. 전반적으로 북유럽에 비해 + 남유럽의 물 스트레스가 심하며, 특히 스페인과 포르투갈, 프랑스 + 동부지역의 물 스트레스가 심각함 +
      • +
    +
    • +
  • +
      +
    • + 유럽 연합에서도 물 부족 문제를 인식하고 2000년 EU Water + Framework Directive을 개발, 이후 2020년 재이용에 관한 법률을 + 제정 +
      • +
    +
    • +
+
+
+
+ ); +} \ No newline at end of file diff --git a/apps/dm/app/(with-layout)/example/globalCase/singapore/page.tsx b/apps/dm/app/(with-layout)/example/globalCase/singapore/page.tsx deleted file mode 100644 index 3d8f35836..000000000 --- a/apps/dm/app/(with-layout)/example/globalCase/singapore/page.tsx +++ /dev/null @@ -1,172 +0,0 @@ -// apps/dm/app/(landing)/reuse/business/globalCase/singapore/page.tsx -"use client"; - -import SubPageHeader from "@/components/SubPageHeader"; -import CaseImageSlider from "@/components/CaseImageSlider"; - -function SectionTitle({ children }: { children: React.ReactNode }) { - return ( -
- -

{children}

-
- ); -} - -type HrProps = { - className?: string; -}; - -function Hr({ className = "" }: HrProps) { - return
; -} - -// type ImgCardProps = { -// src: string; -// alt: string; -// }; - -// function ImgCard({ src, alt }: ImgCardProps) { -// return ( -//
-// {alt} -//
-// ); -// } - -export default function GreywaterPage() { - return ( -
- - -
- - {/* 슬라이드 이미지 영역 */} - - - {/* 싱가포르 NEWater 비중 확대 */} -
- 싱가포르 NEWater 비중 확대 -
-
    -
  • - • 2003년 공식 NEWater 공장을 가동했으며 신뢰확보를 위해 NEWater Visitor Center를 함께 건설 -
    • -
  • - • NEWater 전체파이프 공급 → 반도체 공장에서 가장 많이 사용 -
    • -
  • - • 2060년까지 NEWater 비중 55%까지 높이는 것이 싱가포르의 목표 -
    • -
-
-
- -
- - {/* 싱가포르 재이용수 의무화 및 지원정책 */} -
- 싱가포르 재이용수 의무화 및 지원정책 -
-
    -
  • - • 공업용수 수요가 높은 산업에 대해 물 재이용을 의무화
    -
      -
    • – 반도체업계 전체 비 재이용수(non-domestic용수) 17% 차지 → 공업용수 수요 원인
      • -
    • – 2024년 1월 1일부터 연간 최소 60,000㎥를 소비하는 사업자는 재이용수 사용 의무화
      • -
    • – 반도체 공장의 경우 최소 50% 이상의 재이용수를 요구함(현재는 43% 정도)
      • -
    -
    • -
  • - • 재정 지원을 통해 재이용 활성화를 지원
    -
      -
    • – 재이용 설비를 기준으로 2025년까지 싱가포르 수자원공사의 2가지 금융상품 제공
      -
        -
      • 1. Water Efficiency Fund
        • -
      • 2. Industrial Water Solutions Demonstration Fund
        • -
      -
      • -
    • – 2025년 기준 지원 한도 상향 → 물 재이용 활성 도모
      -
        -
      • 투입비용 50% → 75% 지원 / WSDP: $400만 → $500만
        • -
      • 물 효율이 높은 장비를 도입하는 데에도 최대 $300만 지원 가능
        • -
      -
      • -
    -
    • -
-
-
- -
- - {/* 특이사항 */} -
- 특이사항 -
    -
  • -
      -
    • 싱가포르는 천연 수자원이 많지 않아, 말레이시아 조호르와 1962년 맺은 협약으로 물을 수입해왔으며, 재이용수를 늘리기 위한 노력을 계속하고 있음
      -
        -
      • - 싱가포르는 국토 내에 호수와 하천이적고 집수공간도 적어 빗물로 확보할 수 있는 수자원량은 전체 물 수요의 20%에 불과함
        • -
      -
      • -
    -
    • -
  • -
      -
    • 싱가포르는 도심에 저수지를 건설하 고 건물에 빗물이용시설을 건설하여 빗물을 재이용하고 있음
      • -
    -
    • -
  • -
      -
    • 싱가포르는 2002년부터 하수재이용수인 NEWater를 개발, 비음 용수와 간접음용수로 활용하고 있음
      -
        -
      • - 재이용수를 NEWater라는 이름으로 명명하고 NEWater에 대한 신뢰 확보를 위해 NEWater 방문자 센터도 건설함
        • -
      • - 비음용수로 많이 사용하며 건기에는 NEWater를 저수지에 추가하여 원수와 섞음. 원수는 상수도에서 처리 한 후 가정에 수돗물로 공급함
        • -
      • - NEWater는 전용 파이프를 통해 주로 웨이퍼 제조 공장, 산업단지, 상업용 건물에서 산업 및 냉각수로 사용. 제일 많이 사용하는 곳은 웨이퍼 제조 공장
        • -
      -
      • -
    -
    • -
  • -
      -
    • 2024년 4월 기준 1㎥ 당 공업용수 가격은 $1.66이며, Non-domestic 기준 NEWater 가격은 $2.41
      • -
    -
    • -
  • -
      -
    • 공업용수 가격 $1.66은 수도요금(water tariff)과 수자원세(waterborne tax)로 구분됨. $1.66에는 $1만큼의 수자원세가 포함됨
      • -
    -
    • -
  • -
      -
    • 2023년 싱가포르는 산업용수 수요가 높은 산업에 대해 물 재 이용을 의무화했으며, 정부는 기금을 통해 물 재이용을 지원함
      • -
    -
    • -
-
-
- ); -} diff --git a/apps/dm/app/(with-layout)/example/globalCase/taiwan/page.tsx b/apps/dm/app/(with-layout)/example/globalCase/taiwan/page.tsx deleted file mode 100644 index 91f7b68af..000000000 --- a/apps/dm/app/(with-layout)/example/globalCase/taiwan/page.tsx +++ /dev/null @@ -1,216 +0,0 @@ -// apps/dm/app/(landing)/reuse/business/globalCase/taiwan/page.tsx -"use client"; - -import SubPageHeader from "@/components/SubPageHeader"; -import CaseImageSlider from "@/components/CaseImageSlider"; - -function SectionTitle({ children }: { children: React.ReactNode }) { - return ( -
- -

{children}

-
- ); -} - -type HrProps = { - className?: string; -}; - -function Hr({ className = "" }: HrProps) { - return
; -} - -// type ImgCardProps = { -// src: string; -// alt: string; -// }; - -// function ImgCard({ src, alt }: ImgCardProps) { -// return ( -//
-// {alt} -//
-// ); -// } - -export default function GreywaterPage() { - return ( -
- - -
- - {/* 슬라이드 이미지 영역 */} - - - {/* 재생 수자원 개발법 제정(2015년제정, 2022개정) */} -
- 재생 수자원 개발법 제정(2015년제정, 2022개정) -
-
    -
  • - • 목적: 수자원 지속 가능성 향상, 재생 수자원 활용을 통해 물부족 문제 해결 -
    • -
  • - • 내용: 재생 수자원 정의·분류, 이용 의무, 이용 제한, 수질 기준 등 -
    • -
-
-
    -
  • - – 제4조. 물 소비 계획에 따른 재이용수 이용 관련 내용 (일정 비율 재이용수 사용 규정) -
    • -
  • - – 제5조. 재이용수의 운영자, 사용자 관련 내용 (지자체에서 하수 무상공급 제공 가능) -
    • -
  • - – 제7조. 재이용수 이용 범위, 이용량 재이용수 수질 기준 내용 (식품, 제약산업 사용 불가) -
    • -
  • - – 제8조. 재이용수 사업 주체, 책임 등에 관한 내용 (광역인 경우, 정부가 지자체 지정) -
    • -
-
-
-
- -
- - {/* 대만정부 하수재이용 사업 시행 */} -
- 대만정부 하수재이용 사업 시행 -
-
    -
  • - • 대만은 물 재이용에 적극적이며 국가주도로 하수재이용 사업 시행(안핑)
    -
      -
    • – 1,618억의 사업비 중 92% 국비, 지방비 8% 투입
      • -
    • – 재이용수는 24km 관로로 타이난 TSMC로 공급
      • -
    -
    • -
  • - • 안핑을 포함한 16건 공사 완료시 628,100 CMD 공급 가능 -
    • -
  • - • 공급단가는 수질과 운영조건에 따라 다르게 책정 -
    • -
- {/* 테이블 (2단 병렬: 좌/우 데이터) */} -
-
-

〈대만 재이용 시설별 재이용수 공급단지〉

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
사업가격(NTD/㎥)가격(원/㎥)
Fongshan(가오슝)23.391,038원
Linhai(가오슝)19.28858원
Anping(타이난)38.281,699원
Yongkang(타이난)23.671,050원
Rende(타이난)28.261,254원
Shuinan(타이중)15.00668원
Quaitou(가오슝)35.441,573원
-
-
-
-
- -
- - {/* 특이사항 */} -
- 특이사항 -
    -
  • -
      -
    • 대만은 풍부한 강수량에도, 지형적 특성으로 인해 수자원 확보에 어려움을 겪고 있으며, 대만 남부지역의 경우 우기와 건기 사이의 강수량 차이가 큼
      • -
    -
    • -
  • -
      -
    • 대만은 최근 심각한 가뭄이 여러 해에 걸쳐서 발생하고 있으며, 강수량 감소와 함께 대만 정부 주도하에 반도체 산업을 국가 핵심 산업으로 선정하고 반도체 산업 육성 계획을 세움. 그 결과, 2023년 파운드리 시장의 68.3%를 차지하는 반도체 강국으로 성장했으며 이로 인한 공업용수 수요가 크게 증가
      • -
    -
    • -
  • -
      -
    • 반도체 산업은 물 소비가 많아, 안정적인 용수공급이 매우 중요한데 현재 19개의 반도체 공장이 물이 부족한 대만 남부지역에 위치함. 2021년 가뭄 발생 당시, 산업단지 기업들도 용수 공급에 어려움을 겪음. 이는 대만 남부 지역의 물 부족, 물 분배 등에 대한 문제를 야기함
      • -
    -
    • -
  • -
      -
    • 대만 정부는 산업단지 기업들에게 2023년부터 물에 대한 추가요금 부과를 시작했으며, 농업용수에 대해서는 강력한 억제정책을 시행함. 안정적인 용수 공급을 위해서 정부와 기업에서 자체적으로 재이용수 시설에 대한 투자가 이루어지고 있음.
      • -
    -
    • -
  • -
      -
    • 대만은 2004년 기후변화로 인한 물 부족 상황을 해결하기 위해 수자원 보호 전략을 승인하고, 2015년 대만 환경부는 재생 수자원 개발법을 발표, 2022년에는 한 차례 개정
      • -
    -
    • -
  • -
      -
    • 대만은 물 소비량이 많은 산업(high water consuming industries)과 하수처리장(municipal wastewater treatment plants), 두 곳을 재이용수의 주요 공급원으로 계획
      • -
    -
    • -
-
-
- ); -} diff --git a/apps/dm/app/(with-layout)/example/greywater/page.tsx b/apps/dm/app/(with-layout)/example/greywater/page.tsx new file mode 100644 index 000000000..154d98b06 --- /dev/null +++ b/apps/dm/app/(with-layout)/example/greywater/page.tsx @@ -0,0 +1,232 @@ +"use client"; + +import SubPageHeader from "@/components/SubPageHeader"; + +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 GreywaterPage() { + return ( +
+ + +
+ + {/* 안산시 */} +
+ 경기도 안산시 + + + + +
+ +
+ + {/* 용인시 */} +
+ 경기도 용인시 + + + + +
+ +
+ + {/* 평택시 */} +
+ 경기도 평택시 + + + + +
+
+ ); +} \ No newline at end of file diff --git a/apps/dm/app/(with-layout)/example/layout.tsx b/apps/dm/app/(with-layout)/example/layout.tsx index f117d6792..4c10a66c5 100644 --- a/apps/dm/app/(with-layout)/example/layout.tsx +++ b/apps/dm/app/(with-layout)/example/layout.tsx @@ -1,11 +1,21 @@ +"use client"; + import type { ReactNode } from "react"; import Lnb from "@/components/Lnb"; +import BusinessSubNav from "@/components/BusinessSubNav"; -export default function BusinessLayout({ children }: { children: ReactNode }) { +export default function ExampleLayout({ children }: { children: ReactNode }) { return ( -
+
-
{children}
+
+
+ {children} +
+ + {/* 우측 메뉴 영역 */} + +
); -} +} \ No newline at end of file diff --git a/apps/dm/app/(with-layout)/example/rain/page.tsx b/apps/dm/app/(with-layout)/example/rain/page.tsx new file mode 100644 index 000000000..118bf60c2 --- /dev/null +++ b/apps/dm/app/(with-layout)/example/rain/page.tsx @@ -0,0 +1,69 @@ +"use client"; + +import SubPageHeader from "@/components/SubPageHeader"; +import CaseImageSlider from "@/components/ImageSlider"; +import BusinessSubNav from "@/components/BusinessSubNav"; + +function SectionTitle({ children }: { children: React.ReactNode }) { + return ( +
+ +

{children}

+
+ ); +} + +function Hr({ className = "" }: { className?: string }) { + return
; +} + +export default function RainPage() { + return ( +
+ {/* ✅ 추가 */} + + + + +
+ +
+ 경기도 수원시 + + +
+ +
+ +
+ 제주특별자치도 + + +
+
+ ); +} \ No newline at end of file diff --git a/apps/dm/app/(with-layout)/example/rain/suwon/page.tsx b/apps/dm/app/(with-layout)/example/rain/suwon/page.tsx deleted file mode 100644 index a15b86cf4..000000000 --- a/apps/dm/app/(with-layout)/example/rain/suwon/page.tsx +++ /dev/null @@ -1,93 +0,0 @@ -// apps/dm/app/(landing)/reuse/business/rain/suwon/page.tsx -"use client"; - -import SubPageHeader from "@/components/SubPageHeader"; -import CaseImageSlider from "@/components/CaseImageSlider"; - -function SectionTitle({ children }: { children: React.ReactNode }) { - return ( -
- -

{children}

-
- ); -} - -type HrProps = { - className?: string; -}; - -function Hr({ className = "" }: HrProps) { - return
; -} - -// type ImgCardProps = { -// src: string; -// alt: string; -// }; - -// function ImgCard({ src, alt }: ImgCardProps) { -// return ( -//
-// {alt} -//
-// ); -// } - -export default function GreywaterPage() { - return ( -
- - -
- - {/* 슬라이드 이미지 영역 */} - - - {/* 사업명 */} -
- 사업명 -

- 경기도 수원시 빗물이용과 중수도 -

-
- -
- - {/* 사업 방식 */} -
- 사업 방식 -

- (빗물) 월드컵경기장 등 4개소에 노면 빗물분사시스템 및 빗물 공급기를 설치하여 혹서기 도시 열섬효과 및 도로 비산먼지 저감
- ※ 시설 가동중 도로 노면 온도의 7.2 ~ 26.3℃ 감소 효과 확인(‘21.7월, 수원시청).
- 다만, 가뭄기나 강우량이 적을 경우 빗물을 원활히 공급하기 다소 곤란

- - (중수도) 수원시청, 장안구청, 월드컵경기장에 빗물 연계 중수도를 화장실·조경용수 등으로 사용하여 수도요금 절감(연 7백~30백만원) -

-
-
- ); -} diff --git a/apps/dm/app/(with-layout)/example/sewage/bolyeong/page.tsx b/apps/dm/app/(with-layout)/example/sewage/bolyeong/page.tsx deleted file mode 100644 index 2a6b41045..000000000 --- a/apps/dm/app/(with-layout)/example/sewage/bolyeong/page.tsx +++ /dev/null @@ -1,111 +0,0 @@ -// apps/dm/app/(landing)/reuse/business/sewage/bolyeong/page.tsx -"use client"; - -import SubPageHeader from "@/components/SubPageHeader"; -import CaseImageSlider from "@/components/CaseImageSlider"; - -function SectionTitle({ children }: { children: React.ReactNode }) { - return ( -
- -

{children}

-
- ); -} - -type HrProps = { - className?: string; -}; - -function Hr({ className = "" }: HrProps) { - return
; -} - -// type ImgCardProps = { -// src: string; -// alt: string; -// }; - -// function ImgCard({ src, alt }: ImgCardProps) { -// return ( -//
-// {alt} -//
-// ); -// } - -export default function GreywaterPage() { - return ( -
- - -
- - {/* 슬라이드 이미지 영역 */} - - - {/* 사업명 */} -
- 사업명 -

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

-
- -
- - {/* 사업 방식 */} -
- 사업 방식 -

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

-
- - {/* 사업 주요 내용 */} -
- 사업 주요 내용 -

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

-
- -
- - {/* 특이사항 */} -
- 특이사항 -

- 국내 유일 하수재이용 공업용수 공급 재정사업으로 2016년 충남 서부권 가뭄 시 지역사회 기여 차원에서 기관간 MOU(환경부, 충청남도, 보령시, 한국중부발전㈜)를 바탕으로 추진 되어 경제성보다 공익성을 바탕으로
- 국가전력 기반시설의 안정적 운영 도모 -

-
-
- ); -} diff --git a/apps/dm/app/(with-layout)/example/sewage/cheongju/page.tsx b/apps/dm/app/(with-layout)/example/sewage/cheongju/page.tsx deleted file mode 100644 index 0d648f6b7..000000000 --- a/apps/dm/app/(with-layout)/example/sewage/cheongju/page.tsx +++ /dev/null @@ -1,94 +0,0 @@ -// apps/dm/app/(landing)/reuse/business/sewage/cheongju/page.tsx -"use client"; - -import SubPageHeader from "@/components/SubPageHeader"; -import CaseImageSlider from "@/components/CaseImageSlider"; - -function SectionTitle({ children }: { children: React.ReactNode }) { - return ( -
- -

{children}

-
- ); -} - -type HrProps = { - className?: string; -}; - -function Hr({ className = "" }: HrProps) { - return
; -} - -// type ImgCardProps = { -// src: string; -// alt: string; -// }; - -// function ImgCard({ src, alt }: ImgCardProps) { -// return ( -//
-// {alt} -//
-// ); -// } - -export default function GreywaterPage() { - return ( -
- - -
- - {/* 슬라이드 이미지 영역 */} - - - {/* 사업명 */} -
- 사업명 -

- 청주시 하수 재이용 시설 -

-
- -
- - {/* 사업 주요 내용 */} -
- 사업 주요 내용 -

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

-
-
- ); -} diff --git a/apps/dm/app/(with-layout)/example/sewage/guri/page.tsx b/apps/dm/app/(with-layout)/example/sewage/guri/page.tsx deleted file mode 100644 index 7efa38116..000000000 --- a/apps/dm/app/(with-layout)/example/sewage/guri/page.tsx +++ /dev/null @@ -1,148 +0,0 @@ -// apps/dm/app/(landing)/reuse/business/sewage/guri/page.tsx -"use client"; - -import SubPageHeader from "@/components/SubPageHeader"; -import CaseImageSlider from "@/components/CaseImageSlider"; - -function SectionTitle({ children }: { children: React.ReactNode }) { - return ( -
- -

{children}

-
- ); -} - -type HrProps = { - className?: string; -}; - -function Hr({ className = "" }: HrProps) { - return
; -} - -// type ImgCardProps = { -// src: string; -// alt: string; -// }; - -// function ImgCard({ src, alt }: ImgCardProps) { -// return ( -//
-// {alt} -//
-// ); -// } - -export default function GreywaterPage() { - return ( -
- - -
- - {/* 슬라이드 이미지 영역 */} - - - {/* 사업명 */} -
- 사업명 -

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

-
- -
- - {/* 사업목적 */} -
- 사업목적 -

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

-
- -
- - {/* 사업 주요 내용 */} -
- 사업 주요 내용 -

- 총사업비 : 61억원
- 위 치 : 구리시 경춘로 및 갈매중앙로 일대 등
- 관 로 : 5.8km
- 공급계획
-

-
- -
- - {/* 공급계획 */} -
- 공급계획 - {/* 데이터 테이블 */} -
- - - - - - - - - - - - - - - - - -
- 시설명 - - 재이용수 용도 - - 공급량(㎥/일) - - 원수 -
- 도로자동청소시스템 - - 세척살수용수 - - 178 - - 구리 공공하수처리장 재이용수 -
-
-
- -
- ); -} diff --git a/apps/dm/app/(with-layout)/example/sewage/hwanggu/page.tsx b/apps/dm/app/(with-layout)/example/sewage/hwanggu/page.tsx deleted file mode 100644 index 6f3f72883..000000000 --- a/apps/dm/app/(with-layout)/example/sewage/hwanggu/page.tsx +++ /dev/null @@ -1,173 +0,0 @@ -// apps/dm/app/(landing)/reuse/business/sewage/hwanggu/page.tsx -"use client"; - -import SubPageHeader from "@/components/SubPageHeader"; -import CaseImageSlider from "@/components/CaseImageSlider"; - -function SectionTitle({ children }: { children: React.ReactNode }) { - return ( -
- -

{children}

-
- ); -} - -type HrProps = { - className?: string; -}; - -function Hr({ className = "" }: HrProps) { - return
; -} - -// type ImgCardProps = { -// src: string; -// alt: string; -// }; - -// function ImgCard({ src, alt }: ImgCardProps) { -// return ( -//
-// {alt} -//
-// ); -// } - -export default function GreywaterPage() { - return ( -
- - -
- - {/* 슬라이드 이미지 영역 */} - - - {/* 사업명 */} -
- 사업명 -

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

-
- -
- - {/* 사업목적 */} -
- 사업목적 -

- 황구지천 공공하수처리시설 하수처리수 재이용사업으로 향후 호매실천 및 금곡천 건천화 방지로 주민들에게 친수 공간 제공 및 하천 생태계 보전 -

-
- -
- - {/* 사업 주요 내용 */} -
- 사업 주요 내용 -

- 총사업비 : 110억원
- 위 치 : 수원시 권선구 호매실천, 금곡천
- 관 로 : 3.9km
- 공 급 량 : 25,000㎥/일(하수처리시설 용량: 45,000㎥/일)
-

-
- -
- - {/* 공급계획 */} -
- 공급계획 - {/* 데이터 테이블 */} -
- - - - {/* 구분 */} - - - {/* 공급량 */} - - - {/* 비고 */} - - - - - - - {/* 좌측 병합 */} - - - - - - - - - - - - - - - - - - - -
- 구분 - - 공급량 - - 비고 -
- 하천 등 유지용수 - - 12,500m³/일 - - 호매실천 공급 -
- 6,250m³/일 - - 금곡천1 공급 -
- 6,250m³/일 - - 금곡천2 공급 -
-
-
- -
- ); -} diff --git a/apps/dm/app/(with-layout)/example/sewage/page.tsx b/apps/dm/app/(with-layout)/example/sewage/page.tsx new file mode 100644 index 000000000..13dded59d --- /dev/null +++ b/apps/dm/app/(with-layout)/example/sewage/page.tsx @@ -0,0 +1,477 @@ +"use client"; + +import SubPageHeader from "@/components/SubPageHeader"; +import CaseImageSlider from "@/components/CaseImageSlider"; + +function SectionTitle({ children }: { children: React.ReactNode }) { + return ( +
+ +

{children}

+
+ ); +} + +function Hr({ className = "" }: { className?: string }) { + return
; +} + +export default function SewagePage() { + return ( +
+ + +
+ + {/* 보령 */} +
+ 충청남도 보령시 + + + +
+ 사업명 +

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

+
+ +
+ +
+ 사업 방식 +

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

+
+ +
+ 사업 주요 내용 +

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

+
+ +
+ +
+ 특이사항 +

+ 국내 유일 하수재이용 공업용수 공급 재정사업으로 2016년 충남 서부권 + 가뭄 시 지역사회 기여 차원에서 기관간 MOU(환경부, 충청남도, 보령시, + 한국중부발전㈜)를 바탕으로 추진 되어 경제성보다 공익성을 바탕으로 +
+ 국가전력 기반시설의 안정적 운영 도모 +

+
+
+ +
+ + {/* 청주 */} +
+ 청주시 + + + +
+ 사업명 +

+ 청주시 하수 재이용 시설 +

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

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

+
+
+ +
+ + {/* 구리 */} +
+ 구리시 도로자동청소시스템 + + + +
+ 사업명 +

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

+
+ +
+ +
+ 사업목적 +

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

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

+ 총사업비 : 61억원 +
+ 위 치 : 구리시 경춘로 및 갈매중앙로 일대 등 +
+ 관 로 : 5.8km +
+ 공급계획 +

+
+ +
+ +
+ 공급계획 +
+ + + + + + + + + + + + + + + + + +
+ 시설명 + + 재이용수 용도 + + 공급량(㎥/일) + + 원수 +
+ 도로자동청소시스템 + + 세척살수용수 + + 178 + + 구리 공공하수처리장 재이용수 +
+
+
+
+ +
+ + {/* 황구지천 */} +
+ 수원시 황구지천 + + + +
+ 사업명 +

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

+
+ +
+ +
+ 사업목적 +

+ 황구지천 공공하수처리시설 하수처리수 재이용사업으로 향후 호매실천 및 + 금곡천 건천화 방지로 주민들에게 친수 공간 제공 및 하천 생태계 보전 +

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

+ 총사업비 : 110억원 +
+ 위 치 : 수원시 권선구 호매실천, 금곡천 +
+ 관 로 : 3.9km +
+ 공 급 량 : 25,000㎥/일(하수처리시설 용량: 45,000㎥/일) +
+

+
+ +
+ +
+ 공급계획 +
+ + + + + + + + + + + + + + + + + + + + + + + +
+ 구분 + + 공급량 + + 비고 +
+ 하천 등 유지용수 + + 12,500m³/일 + + 호매실천 공급 +
+ 6,250m³/일 + + 금곡천1 공급 +
+ 6,250m³/일 + + 금곡천2 공급 +
+
+
+
+ +
+ + {/* 파주 */} +
+ 파주시 + + + +
+ 사업명 +

+ 경기도 파주시 하수재이용 +
: 운정·금촌하수처리시설의 하수처리수를 막공법(U/F, R/O)으로 + 재처리하여 파주 LCD 산업단지내 3개 업체*에 공업용수 공급 +
+ *LG디스플레이(P10공장), 희성전자, 엔비텍 등 +

+
+ +
+ +
+ 사업 배경 및 목적 +

+ 민간투자사업(시행사 : 파주그린허브(주), 운영사 : 테크로스) +

+
+ +
+ 사업 주요 내용 +

+ 처리공정 : 전처리 UF + 후처리 RO +
+ 공급량 : 4만m³/일 +
+ 관로 : 13.6km +
+ 사업비 : 651억원 +
+ 위치 : 경기도 파주시 금촌동 714번지 일원 +
+ 시설용량 : 41,20m³/일 +

+
+ +
+ +
+ 특이사항 +

+ 하수처리수 재이용시설 자체 농축폐수 처리공정 개발 및 적용 성공사례 +

+
+
+ +
+ + {/* 여수 */} +
+ 여수시 + + + +
+ 사업명 +

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

+
+ +
+ +
+ 사업 목적 +

+ 수요자가 원하는 양질의 공업용수를 저렴하게 곰급하여 한정된 + 수자원의 효율적 이용 및 지역적 물 부족 해소, 하수재이용을 통한 + 오염총량 저감 및 방류수역 수질개선 +

+
+ +
+ 사업 주요 내용 +

+ 총사업비 : GS칼텍스, YNCC(주) 등 750억원 +
+ 시행사 : 여수그린허브(주) +
+ 운영사 : 테크로스 +
+ 위치: 여수시 신월로 2844일원 (여수 하수처리시설 부지 내) +
+ 처리공법 : 전처리시설(MF) + 주처리시설(RO) +
+ 시설용량 및 공급량 : 5만m³/일 +
+ 관로 : 18.6km +

+
+
+
+ ); +} \ No newline at end of file diff --git a/apps/dm/app/(with-layout)/example/sewage/paju/page.tsx b/apps/dm/app/(with-layout)/example/sewage/paju/page.tsx deleted file mode 100644 index c3bfa2934..000000000 --- a/apps/dm/app/(with-layout)/example/sewage/paju/page.tsx +++ /dev/null @@ -1,112 +0,0 @@ -// apps/dm/app/(landing)/reuse/business/sewage/paju/page.tsx -"use client"; - -import SubPageHeader from "@/components/SubPageHeader"; -import CaseImageSlider from "@/components/CaseImageSlider"; - -function SectionTitle({ children }: { children: React.ReactNode }) { - return ( -
- -

{children}

-
- ); -} - -type HrProps = { - className?: string; -}; - -function Hr({ className = "" }: HrProps) { - return
; -} - -// type ImgCardProps = { -// src: string; -// alt: string; -// }; - -// function ImgCard({ src, alt }: ImgCardProps) { -// return ( -//
-// {alt} -//
-// ); -// } - -export default function GreywaterPage() { - return ( -
- - -
- - {/* 슬라이드 이미지 영역 */} - - - {/* 사업명 */} -
- 사업명 -

- 경기도 파주시 하수재이용
- : 운정·금촌하수처리시설의 하수처리수를 막공법(U/F, R/O)으로 재처리하여 파주 LCD 산업단지내 3개 업체*에 공업용수 공급
- *LG디스플레이(P10공장), 희성전자, 엔비텍 등 -

-
- -
- - {/* 사업 배경 및 목적 */} -
- 사업 배경 및 목적 -

- 민간투자사업(시행사 : 파주그린허브(주), 운영사 : 테크로스) -

-
- - {/* 사업 주요 내용 */} -
- 사업 주요 내용 -

- 처리공정 : 전처리 UF + 후처리 RO
- 공급량 : 4만m³/일
- 관로 : 13.6km
- 사업비 : 651억원
- 위치 : 경기도 파주시 금촌동 714번지 일원
- 시설용량 : 41,20m³/일 -

-
- -
- - {/* 특이사항 */} -
- 특이사항 -

- 하수처리수 재이용시설 자체 농축폐수 처리공정 개발 및 적용 성공사례 -

-
-
- ); -} diff --git a/apps/dm/app/(with-layout)/example/sewage/yeosu/page.tsx b/apps/dm/app/(with-layout)/example/sewage/yeosu/page.tsx deleted file mode 100644 index cd77110a8..000000000 --- a/apps/dm/app/(with-layout)/example/sewage/yeosu/page.tsx +++ /dev/null @@ -1,101 +0,0 @@ -// apps/dm/app/(landing)/reuse/business/sewage/yeosu/page.tsx -"use client"; - -import SubPageHeader from "@/components/SubPageHeader"; -import CaseImageSlider from "@/components/CaseImageSlider"; - -function SectionTitle({ children }: { children: React.ReactNode }) { - return ( -
- -

{children}

-
- ); -} - -type HrProps = { - className?: string; -}; - -function Hr({ className = "" }: HrProps) { - return
; -} - -// type ImgCardProps = { -// src: string; -// alt: string; -// }; - -// function ImgCard({ src, alt }: ImgCardProps) { -// return ( -//
-// {alt} -//
-// ); -// } - -export default function GreywaterPage() { - return ( -
- - -
- - {/* 슬라이드 이미지 영역 */} - - - {/* 사업명 */} -
- 사업명 -

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

-
- -
- - {/* 사업 목적 */} -
- 사업 목적 -

- 수요자가 원하는 양질의 공업용수를 저렴하게 곰급하여 한정된 수자원의 효율적 이용 및 지역적 물 부족 해소, 하수재이용을 통한 오염총량 저감 및 방류수역 수질개선 -

-
- - {/* 사업 주요 내용 */} -
- 사업 주요 내용 -

- 총사업비 : GS칼텍스, YNCC(주) 등 750억원
- 시행사 : 여수그린허브(주)
- 운영사 : 테크로스
- 위치: 여수시 신월로 2844일원 (여수 하수처리시설 부지 내)
- 처리공법 : 전처리시설(MF) + 주처리시설(RO)
- 시설용량 및 공급량 : 5만m³/일
- 관로 : 18.6km -

-
-
- ); -} diff --git a/apps/dm/app/(with-layout)/intro/greywater/page.tsx b/apps/dm/app/(with-layout)/intro/greywater/page.tsx deleted file mode 100644 index fec020ece..000000000 --- a/apps/dm/app/(with-layout)/intro/greywater/page.tsx +++ /dev/null @@ -1,91 +0,0 @@ -// 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 ( -
- -

{children}

-
- ); -} - -type HrProps = { - className?: string; -}; - -function Hr({ className = "" }: HrProps) { - return
; -} - -type ImgCardProps = { - src: StaticImageData; - alt: string; -}; - -function ImgCard({ src, alt }: ImgCardProps) { - return ( -
- {alt} -
- ); -} - -export default function GreywaterPage() { - return ( -
- - -
- - {/* 1) 중수 재이용 소개 */} -
- 중수 재이용 소개 -
- -
-
- -
- - {/* 2) 중수도 설치 의무 대상 */} -
- 중수도 설치 의무 대상 -
- -
-
- -
- - {/* 3) 중수도 시설기준 및 관리기준 */} -
- 중수도 시설기준 및 관리기준 -
- -
-
-
- ); -} diff --git a/apps/dm/app/(with-layout)/intro/law/page.tsx b/apps/dm/app/(with-layout)/intro/law/page.tsx index 0d903a32a..0c6687eb0 100644 --- a/apps/dm/app/(with-layout)/intro/law/page.tsx +++ b/apps/dm/app/(with-layout)/intro/law/page.tsx @@ -1,8 +1,9 @@ -// apps/dm/app/(landing)/reuse/intro/law/page.tsx "use client"; import Image, { type StaticImageData } from "next/image"; import SubPageHeader from "@/components/SubPageHeader"; +import BusinessSubNav from "@/components/BusinessSubNav"; + 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"; @@ -38,93 +39,124 @@ function ImgCard({ src, alt }: ImgCardProps) { {alt}
); } +type SectionShellProps = { + id: string; + title: string; + children: React.ReactNode; + className?: string; +}; + +function SectionShell({ id, title, children, className = "" }: SectionShellProps) { + return ( +
+ {title} +
{children}
+
+ ); +} + export default function WaterReuseLawPage() { return ( -
+
+ + -
+
+
- {/* 1) 법제도/계획 수립 타임라인 */} -
- 법제도 · 계획 및 기본계획 수립 -
- -
-
+ + + -
+
- {/* 2) 제2차 계획 대비 실적 현황 (2컬럼) */} -
- 제 2차 계획 대비 실적 현황 -
- -
-
+ + + -
+
- {/* 3) 국내 관련 현황 */} -
- 국내 관련 현황 -
- -
-
+ + + -
+
- {/* 4) 정책 변천 추이 */} -
- 물 재이용 정책 변천 추이 -
- -
-
+ + + -
+
- {/* 5) 타 법령과의 관계도 */} -
- 타법령과의 관계도 -
- -
-
+ + + -
+
- {/* 6) 국내 연계 현황 */} -
- 국내 연계 현황 -
+
-

주요 국가계획의 정책방향과 연계한 물 재이용 정책 필요

-

국가 상위계획의 정책 방향이 기후위기 대응 등 수자원의 공급 안전성을 위한 물 재이용 활성화로 정책 실효성 제고 필요
- • 물관리 계획(국가수도기본계획, 국가 및 유역하수도종합계획, 하천유역수자원관리계획 등)과의 연계성 확보 → 통합적인 관점에서 물이용 체계 구축 필요 +

+ 주요 국가계획의 정책방향과 연계한 물 재이용 정책 필요 +

+

+ 국가 상위계획의 정책 방향이 기후위기 대응 등 수자원의 공급 안전성을 위한 + 물 재이용 활성화로 정책 실효성 제고 필요 +
+ • 물관리 계획(국가수도기본계획, 국가 및 유역하수도종합계획, + 하천유역수자원관리계획 등)과의 연계성 확보 → 통합적인 관점에서 + 물이용 체계 구축 필요

+ -
-
+ +
); -} +} \ No newline at end of file diff --git a/apps/dm/app/(with-layout)/intro/layout.tsx b/apps/dm/app/(with-layout)/intro/layout.tsx index e025f4c80..4c10a66c5 100644 --- a/apps/dm/app/(with-layout)/intro/layout.tsx +++ b/apps/dm/app/(with-layout)/intro/layout.tsx @@ -1,13 +1,21 @@ +"use client"; + import type { ReactNode } from "react"; import Lnb from "@/components/Lnb"; +import BusinessSubNav from "@/components/BusinessSubNav"; -export default function IntroLayout({ children }: { children: ReactNode }) { +export default function ExampleLayout({ children }: { children: ReactNode }) { return ( -
+
-
- {children} -
+
+
+ {children} +
+ + {/* 우측 메뉴 영역 */} + +
); -} +} \ No newline at end of file diff --git a/apps/dm/app/(with-layout)/intro/rain/page.tsx b/apps/dm/app/(with-layout)/intro/rain/page.tsx index 3f88d7f58..acfb6cacd 100644 --- a/apps/dm/app/(with-layout)/intro/rain/page.tsx +++ b/apps/dm/app/(with-layout)/intro/rain/page.tsx @@ -1,8 +1,9 @@ -// apps/dm/app/(landing)/reuse/intro/law/page.tsx "use client"; import Image, { type StaticImageData } from "next/image"; import SubPageHeader from "@/components/SubPageHeader"; +import BusinessSubNav from "@/components/BusinessSubNav"; + 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"; @@ -36,67 +37,102 @@ function ImgCard({ src, alt }: ImgCardProps) { {alt}
); } +type SectionShellProps = { + id: string; + title: string; + children: React.ReactNode; + className?: string; +}; + +function SectionShell({ + id, + title, + children, + className = "", +}: SectionShellProps) { + return ( +
+ {title} +
{children}
+
+ ); +} + export default function RainwaterReusePage() { return ( -
+
+ + -
+
+
- {/* 1) 빗물 재이용 소개 */} -
- 빗물 재이용 소개 -
+ -
-
+ -
+
- {/* 2) 빗물이용시설 설치 관리 법적 의무 대상 */} -
- 빗물이용시설 설치 관리 법적 의무 대상 -
- -
-
+ + + -
+
- {/* 3) 빗물이용시설 설계 방안 */} -
- 빗물이용시설 설계 방안 -
- -
-
+ + + -
+
- {/* 4) 빗물이용시설 시설기준 및 관리기준 */} -
- 빗물이용시설 시설기준 및 관리기준 -
- -
-
+ + + +
); -} +} \ No newline at end of file diff --git a/apps/dm/app/(with-layout)/intro/reuseWater/page.tsx b/apps/dm/app/(with-layout)/intro/reuseWater/page.tsx new file mode 100644 index 000000000..ab19fe2ed --- /dev/null +++ b/apps/dm/app/(with-layout)/intro/reuseWater/page.tsx @@ -0,0 +1,105 @@ +"use client"; + +import Image, { type StaticImageData } from "next/image"; +import SubPageHeader from "@/components/SubPageHeader"; +import BusinessSubNav from "@/components/BusinessSubNav"; + +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 ReusePage() { + return ( +
+ + + + +
+
+ + + + + +
+ + + + + +
+ + + + +
+
+ ); +} \ No newline at end of file diff --git a/apps/dm/app/(with-layout)/intro/sewage/page.tsx b/apps/dm/app/(with-layout)/intro/sewage/page.tsx deleted file mode 100644 index 526fd4e9c..000000000 --- a/apps/dm/app/(with-layout)/intro/sewage/page.tsx +++ /dev/null @@ -1,80 +0,0 @@ -// 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 ( -
- -

{children}

-
- ); -} - -type HrProps = { - className?: string; -}; - -function Hr({ className = "" }: HrProps) { - return
; -} - -type ImgCardProps = { - src: StaticImageData; - alt: string; -}; - -function ImgCard({ src, alt }: ImgCardProps) { - return ( -
- {alt} -
- ); -} - -export default function TreatedWaterPage() { - return ( -
- - -
- - {/* 1) 하수처리수 */} -
- 하수처리수 -
- -
-
- -
- - {/* 2) 하수처리수 재이용시설 의무 대상 */} -
- 하수처리수 재이용시설 의무 대상 -
- -
-
-
- ); -} diff --git a/apps/dm/app/(with-layout)/intro/treated/page.tsx b/apps/dm/app/(with-layout)/intro/treated/page.tsx new file mode 100644 index 000000000..37221fbd1 --- /dev/null +++ b/apps/dm/app/(with-layout)/intro/treated/page.tsx @@ -0,0 +1,98 @@ +"use client"; + +import Image, { type StaticImageData } from "next/image"; +import SubPageHeader from "@/components/SubPageHeader"; +import BusinessSubNav from "@/components/BusinessSubNav"; + +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 TreatedWaterPage() { + return ( +
+ + + + +
+
+ + + + + +
+ + + + +
+
+ ); +} \ No newline at end of file diff --git a/apps/dm/app/(with-layout)/layout.tsx b/apps/dm/app/(with-layout)/layout.tsx index 2c31919bc..c44aca9ec 100644 --- a/apps/dm/app/(with-layout)/layout.tsx +++ b/apps/dm/app/(with-layout)/layout.tsx @@ -1,19 +1,22 @@ -// app/(with-layout)/layout.tsx -/** - * 메인을 제외한 메뉴안 페이지의 layout - */ - import "../reuse.module.css"; import { StoreProvider } from "../store"; import TopNav from "@/components/TopNav"; +import Lnb from "@/components/Lnb"; export default function WithLayout({ children }: { children: React.ReactNode }) { return ( -
{/* TopNav 높이만큼 */} - -
{children}
{/* Lnb 너비만큼 */} -
+ + +
+ {/* ✅ 좌측 LNB */} + + + {/* ✅ 본문 */} +
+ {children} +
+
); -} +} \ No newline at end of file diff --git a/apps/dm/app/(with-layout)/status/greywater/page.tsx b/apps/dm/app/(with-layout)/status/greywater/page.tsx index b84a6760d..3020288b4 100644 --- a/apps/dm/app/(with-layout)/status/greywater/page.tsx +++ b/apps/dm/app/(with-layout)/status/greywater/page.tsx @@ -1,8 +1,9 @@ -// apps/dm/app/(landing)/reuse/cases/greywater/page.tsx "use client"; import Image, { type StaticImageData } from "next/image"; import SubPageHeader from "@/components/SubPageHeader"; +import BusinessSubNav from "@/components/BusinessSubNav"; + 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"; @@ -17,86 +18,98 @@ function SectionTitle({ children }: { children: React.ReactNode }) { ); } -type HrProps = { - className?: string; -}; - -function Hr({ className = "" }: HrProps) { +function Hr({ className = "" }: { className?: string }) { return
; } -type ImgCardProps = { - src: StaticImageData; - alt: string; -}; - -function ImgCard({ src, alt }: ImgCardProps) { +function ImgCard({ src, alt }: { src: StaticImageData; alt: string }) { return (
{alt}
); } -export default function GreywaterPage() { +function SectionShell({ + id, + title, + children, + className = "", +}: { + id: string; + title: string; + children: React.ReactNode; + className?: string; +}) { return ( -
+
+ {title} +
{children}
+
+ ); +} + +export default function GreywaterStatusPage() { + return ( +
+ + -
+
+
- {/* 1) 전체 중수도 설치 및 이용 현황 (공장 및 발전시설 제외) */} -
- 전체 중수도 설치 및 이용 현황 (공장 및 발전시설 제외) -
- -
-
+ + + -
+
- {/* 2) 중수공장 및 발전시설 내 중수도 설치 및 이용 현황 */} -
- 공장 및 발전시설 내 중수도 설치 및 이용 현황 -
- -
-
+ + + -
+
- {/* 3) 중수도 건축물별 이용량 현황 */} -
- 중수도 건축물별 이용량 현황 -
- -
-
+ + + -
+
- {/* 4) 중수도 용도별 이용량 현황 */} -
- 중수도 용도별 이용량 현황 -
- -
-
+ + + +
); -} +} \ No newline at end of file diff --git a/apps/dm/app/(with-layout)/status/layout.tsx b/apps/dm/app/(with-layout)/status/layout.tsx index 614eb47ed..4c10a66c5 100644 --- a/apps/dm/app/(with-layout)/status/layout.tsx +++ b/apps/dm/app/(with-layout)/status/layout.tsx @@ -1,11 +1,21 @@ +"use client"; + import type { ReactNode } from "react"; import Lnb from "@/components/Lnb"; +import BusinessSubNav from "@/components/BusinessSubNav"; -export default function CasesLayout({ children }: { children: ReactNode }) { +export default function ExampleLayout({ children }: { children: ReactNode }) { return ( -
+
-
{children}
+
+
+ {children} +
+ + {/* 우측 메뉴 영역 */} + +
); -} +} \ No newline at end of file diff --git a/apps/dm/app/(with-layout)/status/rain/page.tsx b/apps/dm/app/(with-layout)/status/rain/page.tsx index aa33147f0..77722e6ba 100644 --- a/apps/dm/app/(with-layout)/status/rain/page.tsx +++ b/apps/dm/app/(with-layout)/status/rain/page.tsx @@ -1,8 +1,9 @@ -// apps/dm/app/(landing)/reuse/cases/rain/page.tsx "use client"; import Image, { type StaticImageData } from "next/image"; import SubPageHeader from "@/components/SubPageHeader"; +import BusinessSubNav from "@/components/BusinessSubNav"; + 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"; @@ -16,76 +17,98 @@ function SectionTitle({ children }: { children: React.ReactNode }) { ); } -type HrProps = { - className?: string; -}; - -function Hr({ className = "" }: HrProps) { +function Hr({ className = "" }: { className?: string }) { return
; } -type ImgCardProps = { - src: StaticImageData; - alt: string; -}; - -function ImgCard({ src, alt }: ImgCardProps) { +function ImgCard({ src, alt }: { src: StaticImageData; alt: string }) { return (
{alt}
); } -export default function GreywaterPage() { +function SectionShell({ + id, + title, + children, + className = "", +}: { + id: string; + title: string; + children: React.ReactNode; + className?: string; +}) { return ( -
+
+ {title} +
{children}
+
+ ); +} + +export default function RainStatusPage() { + return ( +
+ + -
+
+
- {/* 1) 빗물이용시설의 건축물별 빗물이용량 현황 */} -
- 빗물이용시설의 건축물별 빗물이용량 현황 -
- -
-
+ + + -
+
- {/* 2) 빗물이용시설의 용도별 분포 (2023년 기준) */} -
- 빗물이용시설의 용도별 분포 (2023년 기준) -
- -
-
+ + + -
+
- {/* 3) 빗물이용시설의 용도별 빗물이용량 현황 */} -
- 빗물이용시설의 용도별 빗물이용량 현황 -
- -
-
+ + + +
); -} +} \ No newline at end of file diff --git a/apps/dm/app/(with-layout)/status/sewage/page.tsx b/apps/dm/app/(with-layout)/status/sewage/page.tsx index 19214da02..6f4b20e97 100644 --- a/apps/dm/app/(with-layout)/status/sewage/page.tsx +++ b/apps/dm/app/(with-layout)/status/sewage/page.tsx @@ -1,8 +1,9 @@ -// apps/dm/app/(landing)/reuse/cases/treated/page.tsx "use client"; import Image, { type StaticImageData } from "next/image"; import SubPageHeader from "@/components/SubPageHeader"; +import BusinessSubNav from "@/components/BusinessSubNav"; + 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"; @@ -17,86 +18,110 @@ function SectionTitle({ children }: { children: React.ReactNode }) { ); } -type HrProps = { - className?: string; -}; - -function Hr({ className = "" }: HrProps) { +function Hr({ className = "" }: { className?: string }) { return
; } -type ImgCardProps = { - src: StaticImageData; - alt: string; -}; - -function ImgCard({ src, alt }: ImgCardProps) { +function ImgCard({ src, alt }: { src: StaticImageData; alt: string }) { return (
{alt}
); } -export default function GreywaterPage() { +function SectionShell({ + id, + title, + children, + className = "", +}: { + id: string; + title: string; + children: React.ReactNode; + className?: string; +}) { return ( -
+
+ {title} +
{children}
+
+ ); +} + +export default function TreatedStatusPage() { + return ( +
+ + -
+
+
- {/* 1) 연도별 하수처리수 재이용 현황 */} -
- 연도별 하수처리수 재이용 현황 -
- -
-
+ + + -
+
- {/* 2) 용도별 하수처리수 재이용 현황 */} -
- 용도별 하수처리수 재이용 현황 -
- -
-
+ + + -
+
- {/* 3) 하수처리시설 설치 및 이용 현황 */} -
- 하수처리시설 설치 및 이용 현황 -
- -
-
+ + + -
+
- {/* 4) 시도별 하수처리수 재이용 현황 */} -
- 시도별 하수처리수 재이용 현황 -
- -
-
+ + + +
); -} +} \ No newline at end of file diff --git a/apps/dm/components/BusinessSubNav.tsx b/apps/dm/components/BusinessSubNav.tsx new file mode 100644 index 000000000..d3314eb63 --- /dev/null +++ b/apps/dm/components/BusinessSubNav.tsx @@ -0,0 +1,208 @@ +"use client"; + +import { useEffect, useMemo, useState } from "react"; +import { usePathname } from "next/navigation"; + +type SectionItem = { + id: string; + label: string; +}; + +const PAGE_SECTION_MAP: Record = { + // #물 재이용 소개 -물 재이용 법- + law: [ + { 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: "국내 연계 현황" }, + ], + // #물 재이용 소개 - 빗물 이용시설 - + rain: [ + { id: "rain-intro", label: "빗물 재이용 소개" }, + { id: "rain-mandatory", label: "빗물이용시설 설치 관리 법적 의무 대상" }, + { id: "rain-design", label: "빗물이용시설 설계 방안" }, + { id: "rain-standards", label: "빗물이용시설 시설기준 및 관리기준" }, + ], + // #물 재이용 소개 - 중수도 - + reuseWater: [ + { id: "reuse-intro", label: "중수 재이용 소개" }, + { id: "reuse-mandatory", label: "중수도 설치 의무 대상" }, + { id: "reuse-standard", label: "중수도 시설기준 및 관리기준" }, + ], + // #물 재이용 소개 - 하수처리수 - + treated: [ + { id: "treated-intro", label: "하수처리수 개요" }, + { id: "treated-mandatory", label: "하수처리수 재이용시설 의무 대상" }, + ], + + // #물 재이용 현황 - 빗물이용시설(현황) - + statusRain: [ + { id: "status-rain-building", label: "빗물이용시설의 건축물별 빗물이용량 현황" }, + { id: "status-rain-purpose-distribution", label: "빗물이용시설의 용도별 분포(2023년 기준)" }, + { id: "status-rain-purpose-usage", label: "빗물이용시설의 용도별 빗물이용량 현황" }, + ], + // #물 재이용 현황 - 중수도(현황) - + statusGreywater: [ + { id: "status-greywater-overall", label: "전체 중수도 설치 및 이용 현황" }, + { id: "status-greywater-factory", label: "공장 및 발전시설 내 중수도 설치 현황" }, + { id: "status-greywater-building", label: "중수도 건축물별 이용량 현황" }, + { id: "status-greywater-usage", label: "중수도 용도별 이용량 현황" }, + ], + // #물 재이용 현황 - 하수처리수 재이용시설(현황) - + statusTreated: [ + { id: "status-treated-year", label: "연도별 하수처리수 재이용 현황" }, + { id: "status-treated-usage", label: "용도별 하수처리수 재이용 현황" }, + { id: "status-treated-facility", label: "하수처리시설 설치 및 이용 현황" }, + { id: "status-treated-region", label: "시도별 하수처리수 재이용 현황" }, + ], + + // #물 재이용 사례 - 빗물 재이용 사례 - + caseRain: [ + { id: "suwon", label: "경기도 수원시" }, + { id: "jeju", label: "제주특별자치도" }, + ], + // #물 재이용 사례 - 중수 재이용 사례 - + greywater: [ + { id: "ansan", label: "경기도 안산시" }, + { id: "yongin", label: "경기도 용인시" }, + { id: "pyeongtaek", label: "경기도 평택시" }, + ], + // #물 재이용 사례 - 하수 재이용 사례 - + sewage: [ + { id: "bolyeong", label: "충청남도 보령시" }, + { id: "cheongju", label: "청주시" }, + { id: "guri", label: "구리시 도로자동청소시스템" }, + { id: "hwanggu", label: "수원시 황구지천" }, + { id: "paju", label: "파주시" }, + { id: "yeosu", label: "여수시" }, + ], + // #물 재이용 사례 - 하수 재이용 사례 - + globalCase: [ + { id: "overview", label: "사례 개요" }, + { id: "taiwan", label: "대만" }, + { id: "australia", label: "호주" }, + { id: "singapore", label: "싱가포르" }, + { id: "eu", label: "EU" }, + ], +}; + +function getSectionKey(pathname: string): string { + + // 물 재이용 소개 + if (pathname.includes("/intro/law")) return "law"; // 물 재이용 법 + if (pathname.includes("/intro/rain")) return "rain"; // 빗물 이용시설 + if (pathname.includes("/intro/reuseWater")) return "reuseWater"; // 중수도 + if (pathname.includes("/intro/treated")) return "treated"; // 하수처리수 + + // 물 재이용 현황 + if (pathname.includes("/status/rain")) return "statusRain"; + if (pathname.includes("/status/greywater")) return "statusGreywater"; + if (pathname.includes("/status/sewage")) return "statusTreated"; + + // 물 재이용 사례 + if (pathname.includes("/example/rain")) return "caseRain"; + if (pathname.includes("/example/greywater")) return "greywater"; + if (pathname.includes("/example/sewage")) return "sewage"; + if (pathname.includes("/example/global")) return "globalCase"; + + const segments = pathname.split("/").filter(Boolean); + return segments[segments.length - 1] ?? ""; +} + +export default function BusinessSubNav() { + const pathname = usePathname(); + const sectionKey = getSectionKey(pathname); + + const items = useMemo(() => PAGE_SECTION_MAP[sectionKey] ?? [], [sectionKey]); + const [activeId, setActiveId] = useState(""); + + useEffect(() => { + if (!items.length) return; + + const observer = new IntersectionObserver( + (entries) => { + const visible = entries + .filter((entry) => entry.isIntersecting) + .sort((a, b) => b.intersectionRatio - a.intersectionRatio); + + const firstVisible = visible[0]; + if (firstVisible) { + setActiveId(firstVisible.target.id); + } + }, + { + rootMargin: "-120px 0px -55% 0px", + threshold: [0.2, 0.35, 0.5, 0.7], + }, + ); + + const elements = items + .map((item) => document.getElementById(item.id)) + .filter(Boolean) as HTMLElement[]; + + elements.forEach((el) => observer.observe(el)); + + const hash = window.location.hash.replace("#", ""); + const initialActive = + items.find((item) => item.id === hash)?.id ?? items[0]?.id ?? ""; + + setActiveId(initialActive); + + return () => observer.disconnect(); + }, [items]); + + 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 - 120; + + window.scrollTo({ + top, + behavior: "smooth", + }); + }; + + if (!items.length) return null; + + return ( + + ); +} \ No newline at end of file diff --git a/apps/dm/components/CaseTabsCarousel.tsx b/apps/dm/components/CaseTabsCarousel.tsx index ece8f0848..17d369b81 100644 --- a/apps/dm/components/CaseTabsCarousel.tsx +++ b/apps/dm/components/CaseTabsCarousel.tsx @@ -47,7 +47,7 @@ const MOCK: Record = { title: "경기도 수원시 빗물이용과 중수도", desc: "(빗물) 월드컵경기장 등 4개소에 노면 빗물분사시스템 및 빗물 공급기를 설치하여 혹서기…", imageSrc: "/images/landing/rain_01.png", - href: "/reuse/business/rain/suwon", + href: "/example/rain/#suwon", }, // { // id: "rain-2", @@ -70,42 +70,42 @@ const MOCK: Record = { title: "경기도 파주시 하수 재이용", desc: "운정·금촌하수처리시설의 하수처리수를 막공법(U/F, R/O)으로 재처리하여 파주 LCD 산업단지내 3개 업체*에...", imageSrc: "/images/landing/sewage_01.png", - href: "/reuse/business/sewage/paju", + href: "/example/sewage/#paju", }, { id: "sewage-2", title: "충남보령 하수재이용", desc: "보령·신보령화력발전소에 하루 1만톤의 탈황용수 공급을 위해 보령하수처리시설의 하수처리수 재이용 사업...", imageSrc: "/images/landing/sewage_02.png", - href: "/reuse/business/sewage/bolyeong", + href: "/example/sewage/#bolyeong", }, { id: "sewage-3", title: "여수시 하수처리수 재이용", desc: "(빗물) 월드컵경기장 등 4개소에 노면 빗물분사시스템 및 빗물 공급기를 설치하여 혹서기 도시 열섬효과 및 도로...", imageSrc: "/images/landing/sewage_03.png", - href: "/reuse/business/sewage/yeosu", + href: "/example/sewage/#yeosu", }, { id: "sewage-4", title: "청주시 하수 재이용 시설", desc: "청주시 하수처리수 재이용 민간투자사업(BTO) 청주시 하수처리수 재이용 민간투자사업(BTO) 청주시 하수처리수 재이용 민간투자사업(BTO)...", imageSrc: "/images/landing/sewage_04.png", - href: "/reuse/business/sewage/cheongju", + href: "/example/sewage/#cheongju", }, { id: "sewage-5", title: "수원시 황구지천 하천유지용수", desc: "황구지천 공공하수처리시설 하수처리수 재이용사업으로 향후 호매실천 및 금곡천 건천화 방지로...", imageSrc: "/images/landing/sewage_05.png", - href: "/reuse/business/sewage/hwanggu", + href: "/example/sewage/#hwanggu", }, { id: "sewage-6", title: "구리시 도로자동청소시스템", desc: "고농도 미세먼지 발생 및 폭염의 급증에 따라 공공하수처리시설 발생 재이용수 일부를 도로자동청소시스템에 활용...", imageSrc: "/images/landing/sewage_06.png", - href: "/reuse/business/sewage/guri", + href: "/example/sewage/#guri", }, // ...Array.from({ length: 6 }).map((_, i) => ({ // id: `sewage-x-${i}`, @@ -121,35 +121,35 @@ const MOCK: Record = { title: "해외 재이용 사례 개요", desc: "2024년 하수도 통계 기준 15.6%이며, 제2차 물 재이용 기본 계획을 고려한 2030년 목표는 17%, 우리나라의 하수 처리 재이용률은 15% 수준...", imageSrc: "/images/landing/overview_01.png", - href: "reuse/business/globalCase/overview", + href: "/example/globalCase/overview", }, { id: "global-2", title: "[대만] 국가 주도의 공업용수 공급", desc: "대만은 물 재이용에 적극적이며 국가주도로 하수재이용 사업 시행(안핑), 안핑을 포함한 16건 공사 완료시 628,100 CMD 공급 가능...", imageSrc: "/images/landing/taiwan_01.png", - href: "/reuse/business/globalCase/taiwan", + href: "/example/globalCase/taiwan", }, { id: "global-3", title: "[호주] 생활 속 물 재이용 / 광역 물 재이용수 공급", desc: "SEQ Water Grid는 브리즈번 남동부지역의 식수 공급을 위해 설정한 광역 수로망, 이 광역수로망을 활용하여 물이 부족한 지역으로 물을 공급...", imageSrc: "/images/landing/australia_01.png", - href: "/reuse/business/globalCase/australia", + href: "/example/globalCase/australia", }, { id: "global-4", title: "[싱가포르] 수요가 높은 산업의 물 재이용 의무화", desc: "2003년 공식 NEWater 공장을 가동했으며 신뢰확보를 위해 NEWater Visitor Center를 함께 건설, NEWater 전체파이프 공급 → 반도체 공장에서 가장 많이 사용...", imageSrc: "/images/landing/singapore_01.png", - href: "/reuse/business/globalCase/singapore", + href: "/example/globalCase/singapore", }, { id: "global-5", title: "[EU] 법률을 제정, EU국가에서 물 재이용 유도", desc: "유럽 지역의 물 부족 문제를 인식하고 ’20년 물 재이용 법률을 제정 (2020/741), 2023년부터 모든 EU국가에서 시행...", imageSrc: "/images/landing/eu_01.png", - href: "/reuse/business/globalCase/eu", + href: "/example/globalCase/eu", }, ], }; diff --git a/apps/dm/components/Lnb.tsx b/apps/dm/components/Lnb.tsx index b3861fbe0..a38e233fe 100644 --- a/apps/dm/components/Lnb.tsx +++ b/apps/dm/components/Lnb.tsx @@ -1,181 +1,108 @@ "use client"; -import Image from "next/image"; import Link from "next/link"; import { usePathname } from "next/navigation"; -import { useEffect, useMemo, useState } from "react"; -import { - fetchAnonymousMenu, - findActiveTopMenu, - hasAnyChild, - isMenuActive, - type MenuItem, -} from "@/app/store/common"; -export type LnbItem = { +type LnbMenuItem = { label: string; - href?: string; - children?: LnbItem[]; + href: string; }; -function findOpenMenuCode(items: MenuItem[], pathname: string): number | null { - const matched = items.find((item) => { - if (isMenuActive(pathname, item)) return true; - return (item.children ?? []).some((child) => isMenuActive(pathname, child)); - }); +type LnbConfig = { + title: string; + menus: LnbMenuItem[]; +}; - return matched?.menuCd ?? null; +const LNB_MAP: Record = { + intro: { + title: "소개", + menus: [ + { label: "물 재이용 법", href: "/intro/law" }, + { label: "빗물 이용시설", href: "/intro/rain" }, + { label: "중수도", href: "/intro/reuseWater" }, + { label: "하수처리수", href: "/intro/treated" }, + ], + }, + + status: { + title: "현황", + menus: [ + { label: "빗물이용시설(현황)", href: "/status/rain" }, + { label: "중수도(현황)", href: "/status/greywater" }, + { label: "하수처리수 재이용시설(현황)", href: "/status/sewage" }, + ], + }, + + case: { + title: "사례", + menus: [ + { label: "빗물 재이용 사례", href: "/example/rain" }, + { label: "중수 재이용 사례", href: "/example/greywater" }, + { label: "하수 재이용 사례", href: "/example/sewage" }, + { label: "해외 재이용 사례", href: "/example/globalCase" }, + ], + }, + + apply: { + title: "수요신청", + menus: [ + { label: "수요처등록", href: "/apply/dmdco" }, + { label: "수요정보등록", href: "/apply/register" }, + { label: "수요신청현황", href: "/apply/status" }, + ], + }, +}; + +function getCategory(pathname: string): keyof typeof LNB_MAP { + if (pathname.startsWith("/intro")) return "intro"; + if (pathname.startsWith("/status")) return "status"; + if (pathname.startsWith("/example")) return "case"; + if (pathname.startsWith("/apply")) return "apply"; + return "intro"; +} + +function isActiveMenu(pathname: string, href: string) { + return pathname === href || pathname.startsWith(`${href}/`); } export default function Lnb() { const pathname = usePathname(); - const [menus, setMenus] = useState([]); - const [openMenuCode, setOpenMenuCode] = useState(null); - - useEffect(() => { - let isMounted = true; - - (async () => { - try { - const loaded = await fetchAnonymousMenu(); - if (!isMounted) return; - console.log("Fetched LNB menus:", loaded); - setMenus(loaded); - } catch (error) { - console.error("Failed to load DN LNB menu", error); - if (!isMounted) return; - setMenus([]); - } - })(); - - return () => { - isMounted = false; - }; - }, []); - - const currentTopMenu = useMemo( - () => findActiveTopMenu(menus, pathname), - [menus, pathname], - ); - - const secondLevelMenus = useMemo( - () => currentTopMenu?.children ?? [], - [currentTopMenu], - ); -// console.log("LNB render", { pathname, currentTopMenu, secondLevelMenus, menus }); - useEffect(() => { - const defaultOpen = findOpenMenuCode(secondLevelMenus, pathname); - setOpenMenuCode(defaultOpen); - }, [pathname, secondLevelMenus]); + const category = getCategory(pathname); + const { title, menus } = LNB_MAP[category]; return ( ); -} +} \ No newline at end of file diff --git a/apps/dm/components/TopNav.tsx b/apps/dm/components/TopNav.tsx index 9a182560b..9e6f1148c 100644 --- a/apps/dm/components/TopNav.tsx +++ b/apps/dm/components/TopNav.tsx @@ -12,10 +12,10 @@ import { useDmStore } from "@/app/store"; const LS_USER_KEY = "user"; const DEFAULT_NAV_ITEMS: Pick[] = [ - { menuCd: 1, menuKornNm: "물 재이용 소개", urlPath: "/reuse/intro/law", newWndwYn: "N" }, - { menuCd: 2, menuKornNm: "물 재이용 현황", urlPath: "/reuse/cases/rain", newWndwYn: "N" }, - { menuCd: 3, menuKornNm: "물 재이용 사례", urlPath: "/reuse/business/rain/suwon", newWndwYn: "N" }, - { menuCd: 4, menuKornNm: "수요신청", urlPath: "/reuse/apply/place", newWndwYn: "N" }, + { menuCd: 1, menuKornNm: "물 재이용 소개", urlPath: "/intro/law", newWndwYn: "N" }, + { menuCd: 2, menuKornNm: "물 재이용 현황", urlPath: "/status/rain", newWndwYn: "N" }, + { menuCd: 3, menuKornNm: "물 재이용 사례", urlPath: "/examle/rain", newWndwYn: "N" }, + { menuCd: 4, menuKornNm: "수요신청", urlPath: "/apply/place", newWndwYn: "N" }, ]; export default function TopNav() { diff --git a/apps/dm/public/images/landing/cases/treated_water_region.png b/apps/dm/public/images/landing/cases/treated_water_region.png index 977df110b..d503b3720 100644 Binary files a/apps/dm/public/images/landing/cases/treated_water_region.png and b/apps/dm/public/images/landing/cases/treated_water_region.png differ diff --git a/apps/dm/public/images/landing/intro/domestic_textbox.png b/apps/dm/public/images/landing/intro/domestic_textbox.png index 2fa8c0344..7e5ccb619 100644 Binary files a/apps/dm/public/images/landing/intro/domestic_textbox.png and b/apps/dm/public/images/landing/intro/domestic_textbox.png differ diff --git a/apps/dm/public/images/landing/intro/greywater_mandatory.png b/apps/dm/public/images/landing/intro/greywater_mandatory.png index 2e26c928e..8e74b92c5 100644 Binary files a/apps/dm/public/images/landing/intro/greywater_mandatory.png and b/apps/dm/public/images/landing/intro/greywater_mandatory.png differ diff --git a/apps/dm/public/images/landing/intro/greywater_standard.png b/apps/dm/public/images/landing/intro/greywater_standard.png index 8d613467c..ebc3591a1 100644 Binary files a/apps/dm/public/images/landing/intro/greywater_standard.png and b/apps/dm/public/images/landing/intro/greywater_standard.png differ diff --git a/apps/dm/public/images/landing/intro/law_timeline.png b/apps/dm/public/images/landing/intro/law_timeline.png index a232aa2da..67e512e1d 100644 Binary files a/apps/dm/public/images/landing/intro/law_timeline.png and b/apps/dm/public/images/landing/intro/law_timeline.png differ diff --git a/apps/dm/public/images/landing/intro/linkage.png b/apps/dm/public/images/landing/intro/linkage.png index cca2007ee..3a0dd787c 100644 Binary files a/apps/dm/public/images/landing/intro/linkage.png and b/apps/dm/public/images/landing/intro/linkage.png differ diff --git a/apps/dm/public/images/landing/intro/performance_left.png b/apps/dm/public/images/landing/intro/performance_left.png index 6efe9651a..08e9ddc2e 100644 Binary files a/apps/dm/public/images/landing/intro/performance_left.png and b/apps/dm/public/images/landing/intro/performance_left.png differ diff --git a/apps/dm/public/images/landing/intro/policy_timeline.png b/apps/dm/public/images/landing/intro/policy_timeline.png index e21c2a2e9..f3ff90d8a 100644 Binary files a/apps/dm/public/images/landing/intro/policy_timeline.png and b/apps/dm/public/images/landing/intro/policy_timeline.png differ diff --git a/apps/dm/public/images/landing/intro/rainreuse_mandatory.png b/apps/dm/public/images/landing/intro/rainreuse_mandatory.png index 4cc6c00de..6f2e7aa31 100644 Binary files a/apps/dm/public/images/landing/intro/rainreuse_mandatory.png and b/apps/dm/public/images/landing/intro/rainreuse_mandatory.png differ diff --git a/apps/dm/public/images/landing/intro/rainwater_design.png b/apps/dm/public/images/landing/intro/rainwater_design.png index b0f4fb02b..390ae6d1d 100644 Binary files a/apps/dm/public/images/landing/intro/rainwater_design.png and b/apps/dm/public/images/landing/intro/rainwater_design.png differ diff --git a/apps/dm/public/images/landing/intro/rainwater_standards.png b/apps/dm/public/images/landing/intro/rainwater_standards.png index 9b27f5382..f393d7e67 100644 Binary files a/apps/dm/public/images/landing/intro/rainwater_standards.png and b/apps/dm/public/images/landing/intro/rainwater_standards.png differ diff --git a/apps/dm/public/images/landing/intro/rel_note.png b/apps/dm/public/images/landing/intro/rel_note.png index ea9f634c6..b5229682b 100644 Binary files a/apps/dm/public/images/landing/intro/rel_note.png and b/apps/dm/public/images/landing/intro/rel_note.png differ diff --git a/apps/dm/public/images/landing/intro/treatedwater_mandatory.png b/apps/dm/public/images/landing/intro/treatedwater_mandatory.png index dbae8be70..e5a317e44 100644 Binary files a/apps/dm/public/images/landing/intro/treatedwater_mandatory.png and b/apps/dm/public/images/landing/intro/treatedwater_mandatory.png differ