물재이용 랜딩 페이지 앵커 네비게이션 추가 퍼블리싱
This commit is contained in:
LGS
@@ -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: "수요신청" },
|
||||
];
|
||||
|
||||
|
||||
@@ -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<MenuItem[]>([]);
|
||||
|
||||
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 (
|
||||
<div className="flex gap-0">
|
||||
<Lnb title="사례" items={LNB_BUSINESS} />
|
||||
<main className="flex-1 px-[100px] pt-[80px]">
|
||||
{children}
|
||||
</main>
|
||||
<div className="bg-white min-w-[1440px]">
|
||||
|
||||
{/* 좌측 LNB */}
|
||||
<Lnb />
|
||||
|
||||
{/* 컨텐츠 영역 */}
|
||||
<div className="pl-[260px] pt-[83px]">
|
||||
<div className="mx-auto flex max-w-[1660px] gap-16 px-[60px] py-[60px]">
|
||||
|
||||
{/* 본문 */}
|
||||
<main className="min-w-0 flex-1 max-w-[980px]">
|
||||
{children}
|
||||
</main>
|
||||
|
||||
{/* 우측 서브 메뉴 */}
|
||||
<div className="w-[240px] shrink-0">
|
||||
<BusinessSubNav menus={businessMenus} />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -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 (
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="h-5 w-[3px] bg-sky-500" />
|
||||
<h3 className="text-2xl font-bold text-neutral-900">{children}</h3>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
type HrProps = {
|
||||
className?: string;
|
||||
};
|
||||
|
||||
function Hr({ className = "" }: HrProps) {
|
||||
return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
|
||||
}
|
||||
|
||||
// type ImgCardProps = {
|
||||
// src: string;
|
||||
// alt: string;
|
||||
// };
|
||||
|
||||
// function ImgCard({ src, alt }: ImgCardProps) {
|
||||
// return (
|
||||
// <div className="w-full overflow-x-auto">
|
||||
// <img
|
||||
// src={src}
|
||||
// alt={alt}
|
||||
// className="block mx-auto max-w-none"
|
||||
// />
|
||||
// </div>
|
||||
// );
|
||||
// }
|
||||
|
||||
export default function GreywaterPage() {
|
||||
return (
|
||||
<div className="bg-white">
|
||||
<SubPageHeader
|
||||
title="[호주] 생활 속 물 재이용 / 광역 물 재이용수 공급"
|
||||
crumbs={[
|
||||
{ label: "Home", href: "/reuse" },
|
||||
{ label: "물 재이용 사례" },
|
||||
{ label: "해외 재이용 사례" },
|
||||
{ label: "호주", href: "/reuse/business/globalCase/australia" },
|
||||
]}
|
||||
hideFooterLine
|
||||
hideGuideText
|
||||
wrapClassName="!pb-0"
|
||||
/>
|
||||
|
||||
<Hr className="my-7" />
|
||||
|
||||
{/* 슬라이드 이미지 영역 */}
|
||||
<CaseImageSlider
|
||||
className="mt-8"
|
||||
maxWidthClassName="max-w-[760px]"
|
||||
slides={[
|
||||
{ src: "/images/landing/business/globalCase/australia_01.png", alt: "호주 사례 1" },
|
||||
]}
|
||||
/>
|
||||
|
||||
{/* 생활용수로 재이용수의 적극 활용 */}
|
||||
<section className="mt-8">
|
||||
<SectionTitle>생활용수로 재이용수의 적극 활용</SectionTitle>
|
||||
<div className="px-4 mt-6">
|
||||
<ul className="space-y-4 text-base text-[#4F4F4F]">
|
||||
<li>
|
||||
– 재이용수를 공원, 골프장 등의 관개용수로 공급(초록색 지역)
|
||||
</li>
|
||||
<li>
|
||||
– Dual pipe로 재이용수를 특정 주거단지로 공급(보라색 지역)
|
||||
</li>
|
||||
<li>
|
||||
– 현재 7,000여 가구가 재이용수를 사용
|
||||
</li>
|
||||
<li>
|
||||
– 2030년까지 43,000가구로 확대 예정
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Hr className="my-11" />
|
||||
|
||||
{/* 호주 재이용수 광역 활용(퀸즈랜드주 브리즈번) */}
|
||||
<section className="mt-6">
|
||||
<SectionTitle>호주 재이용수 광역 활용(퀸즈랜드주 브리즈번)</SectionTitle>
|
||||
<div className="px-4">
|
||||
<ul className="mt-6 space-y-4 text-base text-gray-600">
|
||||
<li>
|
||||
• SEQ Water Grid는 브리즈번 남동부지역의 식수 공급을 위해 설정한 광역 수로망
|
||||
</li>
|
||||
<li>
|
||||
• 이 광역수로망을 활용하여 물이 부족한 지역으로 물을 공급<br />
|
||||
<ul className="list-inside text-[#767676] ml-4 mt-2">
|
||||
<li>– 1,618억의 사업비 중 92% 국비, 지방비 8% 투입</li>
|
||||
<li>– 재이용수는 24km 관로로 타이난 TSMC로 공급</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
• 12개 댐, 32개 수처리 시설, 3개 재이용시설, 담수화 플랜트 1개, 저수지 28개와 600km 이상의 물 공급 관로를 건설
|
||||
</li>
|
||||
<li>
|
||||
• 지역적으로 강수량이 고르지 않아, 댐의 저수율이 불균등할 때 지역의 물 공급을 보충하는 중요한 역할을 수행
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Hr className="my-11" />
|
||||
|
||||
{/* 특이사항 */}
|
||||
<section className="pb-[200px]">
|
||||
<SectionTitle>특이사항</SectionTitle>
|
||||
<ul className="mt-6 space-y-4 pl-4 text-base text-gray-600">
|
||||
<li>
|
||||
<ul className="list-disc list-outside pl-6 space-y-1 leading-relaxed">
|
||||
<li>호주는 2000~2009년 강수량 감소로 밀레니엄 가뭄이 발생하여 심각한 물 부족 현상이 발생함</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<ul className="list-disc list-outside pl-6 space-y-1 leading-relaxed">
|
||||
<li>호주는 해안 도시에 인구가 밀집하여 거주하고 있으며 인구 증가율이 타 선진국 대비 높아, 향후 도시에 공급할 수자원 확보가 필요함</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<ul className="list-disc list-outside pl-6 space-y-1 leading-relaxed">
|
||||
<li>호주정부는 1990년대부터 하·폐수가 방류될 경우의 환경 피해에 대해 인식하기 시작하고 배출규제와 위원회를 구성하기 시작</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<ul className="list-disc list-outside pl-6 space-y-1 leading-relaxed">
|
||||
<li>연방정부는 주에 인센티브를 주는 방식으로 물 정책을 장려하고 토지소유권과 물 권리를 구분하여 거래를 허용하고 물 재이용 활성화를 위한 Water Smart Australia 프로그램을 시행</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<ul className="list-disc list-outside pl-6 space-y-1 leading-relaxed">
|
||||
<li>호주의 용수공급 체계는 영국과 미국의 특성들이 존재하지만, 주의 특성과 주 정부의 정책 방향에 따라 주마다도 많은 차이가 있음. 특히 대부분의 주에서 수 자원 개발 기능과 수도 공급의 기능을 분리하여 주정부<br/>산하 기관에서 운영하는게 특징</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -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 (
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="h-5 w-[3px] bg-sky-500" />
|
||||
<h3 className="text-2xl font-bold text-neutral-900">{children}</h3>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
type HrProps = {
|
||||
className?: string;
|
||||
};
|
||||
|
||||
function Hr({ className = "" }: HrProps) {
|
||||
return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
|
||||
}
|
||||
|
||||
// type ImgCardProps = {
|
||||
// src: string;
|
||||
// alt: string;
|
||||
// };
|
||||
|
||||
// function ImgCard({ src, alt }: ImgCardProps) {
|
||||
// return (
|
||||
// <div className="w-full overflow-x-auto">
|
||||
// <img
|
||||
// src={src}
|
||||
// alt={alt}
|
||||
// className="block mx-auto max-w-none"
|
||||
// />
|
||||
// </div>
|
||||
// );
|
||||
// }
|
||||
|
||||
export default function GreywaterPage() {
|
||||
return (
|
||||
<div className="bg-white">
|
||||
<SubPageHeader
|
||||
title="[EU] 법률을 제정, EU국가에서 물 재이용 유도"
|
||||
crumbs={[
|
||||
{ label: "Home", href: "/reuse" },
|
||||
{ label: "물 재이용 사례" },
|
||||
{ label: "해외 재이용 사례" },
|
||||
{ label: "EU", href: "/reuse/business/globalCase/eu" },
|
||||
]}
|
||||
hideFooterLine
|
||||
hideGuideText
|
||||
wrapClassName="!pb-0"
|
||||
/>
|
||||
|
||||
<Hr className="my-7" />
|
||||
|
||||
{/* 슬라이드 이미지 영역 */}
|
||||
<CaseImageSlider
|
||||
className="mt-8"
|
||||
maxWidthClassName="max-w-[760px]"
|
||||
slides={[
|
||||
{ src: "/images/landing/business/globalCase/eu_01.png", alt: "EU 사례 1" },
|
||||
]}
|
||||
/>
|
||||
|
||||
{/* 물 재이용에 대한 법률을 제정(2020 제정, 2023 시행) */}
|
||||
<section className="mt-8">
|
||||
<SectionTitle>물 재이용에 대한 법률을 제정(2020 제정, 2023 시행)</SectionTitle>
|
||||
<div className="px-4 mt-6">
|
||||
<ul className="mt-6 space-y-4 text-base text-gray-600">
|
||||
<li>
|
||||
• 유럽 지역의 물 부족 문제를 인식하고 ’20년 물 재이용 법률을 제정 (2020/741)
|
||||
</li>
|
||||
<li>
|
||||
• 2023년부터 모든 EU국가에서 시행
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Hr className="my-11" />
|
||||
|
||||
{/* 유럽연합 회원국 물 재이용 지원정책 */}
|
||||
<section className="mt-6">
|
||||
<SectionTitle>유럽연합 회원국 물 재이용 지원정책</SectionTitle>
|
||||
<div className="px-4">
|
||||
<ul className="mt-6 space-y-4 text-base text-gray-600">
|
||||
<li>
|
||||
• 유럽연합 차원에서 다양한 물 재이용 프로그램 자금 지원<br />
|
||||
<ul className="list-inside space-y-4 text-[#767676] text-sm ml-4 mt-2">
|
||||
<li>– 2021년부터 3년간 Life RECYCLIO 프로그램 지원 → 세부내용 물 재이용 프로그램<br/>
|
||||
<ul className="list-inside space-y-2 text-[#767676] ml-4 mt-2">
|
||||
<li>1. 환경 관련 사업에 자금을 지원하는 Life 프로그램의 일환으로 80만 유로를 지원</li>
|
||||
<li>2. 식품·농업 분야 물 재이용 확대를 위해 기술 이전 및 평가 실시</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>– 물 재이용 정책 수행을 위해 BOOST-INN 180만 유로를 지원<br/>
|
||||
<ul className="list-inside space-y-2 text-[#767676] ml-4 mt-2">
|
||||
<li> *프랑스, 이탈리아, 스페인 등 유럽 선진국 솔루션 공유</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
• EU산하 JRC(공동연구센터)에서 물 재이용 기술제공 지원<br />
|
||||
<ul className="list-inside space-y-2 text-[#767676] text-sm ml-4 mt-2">
|
||||
<li>‘물 재이용 회원 관리 실무 커뮤니티(Water Reuse Management Community of Practice)’ 시범사업 수행</li>
|
||||
<li>유럽 전역에 성공적인 모델 활용 및 혁신적인 물 재이용 솔루션을 확장할 수 있는 기술을 제공</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Hr className="my-11" />
|
||||
|
||||
{/* 특이사항 */}
|
||||
<section className="pb-[200px]">
|
||||
<SectionTitle>특이사항</SectionTitle>
|
||||
<ul className="mt-6 space-y-4 pl-4 text-base text-gray-600">
|
||||
<li>
|
||||
<ul className="list-disc list-outside pl-6 space-y-1 leading-relaxed">
|
||||
<li>2019년 기준 EU 인구의 38%가 물 부족의 영향을 받을 것으로 예상됨. 이 흐름대로면 2030년까지 유럽 유역 전반에 물 부족 문제가 발생하게 될 것으로 예상. 인구 증가, 도시화의 확대, 염분화 및 기후변화들이 수자원 문제들의 주요 요인이며, 식습관 변화와 산업용수 수요 증가 등으로 악화되고 있는 상황</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<ul className="list-disc list-outside pl-6 space-y-1 leading-relaxed">
|
||||
<li>유럽의 물 부족 상황은 지역에 따라 다르게 나타나 스페인을 비롯한 남부유럽 에서 특히 심각함. 전반적으로 북유럽에 비해 남유럽의 물 스트레스가 심하며, 특히 스페인과 포르투갈, 프랑스 동부지역의 물 스트레스가 심각함</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<ul className="list-disc list-outside pl-6 space-y-1 leading-relaxed">
|
||||
<li>유럽 연합에서도 물 부족 문제를 인식하고 2000년 EU Water Framework Directive을 개발, 이후 2020년 재이용에 관한 법률을 제정</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -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 (
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="h-5 w-[3px] bg-sky-500" />
|
||||
<h3 className="text-2xl font-bold text-neutral-900">{children}</h3>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
type HrProps = {
|
||||
className?: string;
|
||||
};
|
||||
|
||||
function Hr({ className = "" }: HrProps) {
|
||||
return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
|
||||
}
|
||||
|
||||
// type ImgCardProps = {
|
||||
// src: string;
|
||||
// alt: string;
|
||||
// };
|
||||
|
||||
// function ImgCard({ src, alt }: ImgCardProps) {
|
||||
// return (
|
||||
// <div className="w-full overflow-x-auto">
|
||||
// <img
|
||||
// src={src}
|
||||
// alt={alt}
|
||||
// className="block mx-auto max-w-none"
|
||||
// />
|
||||
// </div>
|
||||
// );
|
||||
// }
|
||||
|
||||
export default function GreywaterPage() {
|
||||
return (
|
||||
<div className="bg-white">
|
||||
<SubPageHeader
|
||||
title="해외 재이용 사례 개요"
|
||||
crumbs={[
|
||||
{ label: "Home", href: "/reuse" },
|
||||
{ label: "물 재이용 사례" },
|
||||
{ label: "해외 재이용 사례" },
|
||||
{ label: "사례개요", href: "/reuse/business/globalCase/overview" },
|
||||
]}
|
||||
hideFooterLine
|
||||
hideGuideText
|
||||
wrapClassName="!pb-0"
|
||||
/>
|
||||
|
||||
<Hr className="my-7" />
|
||||
|
||||
{/* 슬라이드 이미지 영역 */}
|
||||
<CaseImageSlider
|
||||
className="mt-8"
|
||||
maxWidthClassName="max-w-[760px]"
|
||||
slides={[
|
||||
{ src: "/images/landing/business/globalCase/overview_01.png", alt: "해외 재이용 사례 1" },
|
||||
]}
|
||||
/>
|
||||
|
||||
<section className="mt-6">
|
||||
<div className="rounded-md bg-[#e9f0f1] p-8">
|
||||
<h3 className="text-xl font-bold text-gray-800 leading-relaxed">
|
||||
2024년 하수도 통계 기준 15.6%이며,<br />
|
||||
제2차 물 재이용 기본 계획을 고려한 2030년 목표는 <span className="font-extrabold">17%</span>
|
||||
</h3>
|
||||
|
||||
{/* 진행 바 영역 */}
|
||||
<div className="mt-6 space-y-4">
|
||||
{/* 2024 */}
|
||||
<div className="flex items-center gap-4">
|
||||
<span className="text-sm text-gray-600">’24년도</span>
|
||||
<div className="relative h-7 rounded-r-lg">
|
||||
<div className="h-7 w-[112px] rounded-r-lg bg-gray-400" />
|
||||
</div>
|
||||
<span className="text-sm text-gray-700">15.6%</span>
|
||||
</div>
|
||||
|
||||
{/* 2030 */}
|
||||
<div className="flex items-center gap-4">
|
||||
<span className="text-sm text-gray-600">’30년도</span>
|
||||
<div className="relative">
|
||||
<div className="h-10 w-[327px] rounded-r-lg bg-gradient-to-r from-sky-500 to-green-500" />
|
||||
</div>
|
||||
<span className="text-xl font-bold text-gray-900">17%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 설명 문구 */}
|
||||
<ul className="mt-6 space-y-2 text-base text-gray-600">
|
||||
<li>
|
||||
• 우리나라의 하수 처리 재이용률은 <span className="text-sky-600 ">15% 수준</span>
|
||||
</li>
|
||||
<li>
|
||||
• 대만은 가뭄과 공업용수 증가에 대응하여
|
||||
<span className="text-sky-600 ">
|
||||
{" "}현재 4.3% 수준이며, 16.5%까지 확대 계획 수립
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
{/* 테이블 */}
|
||||
<div className="mt-6">
|
||||
<table className="w-full text-center text-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="bg-[#C2CAD2] px-4 py-3 text-black rounded-t-lg">국가</th>
|
||||
<th className="bg-sky-600 px-4 py-3 text-white rounded-t-lg">해외정보</th>
|
||||
<th className="bg-teal-500 px-4 py-3 text-white rounded-t-lg">현재</th>
|
||||
<th className="bg-green-500 px-4 py-3 text-white rounded-t-lg">미래(목표, 예측치)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-white border border-t-0">
|
||||
<tr className="border-t">
|
||||
<td className="px-4 py-3 font-medium">한국</td>
|
||||
<td className="px-4 py-3 bg-sky-50 text-gray-700">12.1%</td>
|
||||
<td className="px-4 py-3">15.6%</td>
|
||||
<td className="px-4 py-3 bg-sky-50 text-gray-700">17%</td>
|
||||
</tr>
|
||||
<tr className="border-t">
|
||||
<td className="px-4 py-3 font-medium">대만</td>
|
||||
<td className="px-4 py-3 bg-sky-50 text-gray-700">2.4%</td>
|
||||
<td className="px-4 py-3">4.3%</td>
|
||||
<td className="px-4 py-3 bg-sky-50 text-gray-700">16.5%</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Hr className="my-11" />
|
||||
|
||||
{/* 주요 국가의 하수처리수 재이용률 (%) */}
|
||||
<section className="pb-[200px]">
|
||||
<SectionTitle>주요 국가의 하수처리수 재이용률 (%)</SectionTitle>
|
||||
{/* 설명 문구 */}
|
||||
<ul className="mt-6 space-y-2 text-base text-gray-600">
|
||||
<li>
|
||||
• 전 세계적으로 물 재이용은 호주, 유럽, 아프리카, 미국 등 가뭄이 잦거나 심각한 가뭄이 발생한 국가에서 많이 이루어짐
|
||||
</li>
|
||||
<li>
|
||||
• 이스라엘, 쿠웨이트 등 중동 및 북아프리카 지역은 가용 수자원이 제한되어 있어 재이용량 비중도 매우 높은 편
|
||||
</li>
|
||||
</ul>
|
||||
{/* 테이블 (2단 병렬: 좌/우 데이터) */}
|
||||
<div className="mt-6">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-[900px] w-full text-center text-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
{/* 좌측 3컬럼 */}
|
||||
<th className="bg-[#C2CAD2] px-4 py-3 text-black rounded-t-lg">국가명</th>
|
||||
<th className="bg-sky-600 px-4 py-3 text-white rounded-t-lg">지역</th>
|
||||
<th className="bg-green-500 px-4 py-3 text-white rounded-t-lg">재이용률</th>
|
||||
|
||||
{/* 우측 3컬럼 */}
|
||||
<th className="bg-[#C2CAD2] px-4 py-3 text-black rounded-t-lg">국가명</th>
|
||||
<th className="bg-sky-600 px-4 py-3 text-white rounded-t-lg">지역</th>
|
||||
<th className="bg-green-500 px-4 py-3 text-white rounded-t-lg">재이용률</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody className="bg-white border border-t-0">
|
||||
{[
|
||||
{
|
||||
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) => (
|
||||
<tr key={idx} className="border-t">
|
||||
{/* 좌측 */}
|
||||
<td className="px-4 py-3 font-medium text-gray-700">{row.L.c}</td>
|
||||
<td className="px-4 py-3 bg-sky-50 text-gray-700">{row.L.r}</td>
|
||||
<td className="px-4 py-3 bg-green-50 text-gray-700">{row.L.v}</td>
|
||||
|
||||
{/* 우측 */}
|
||||
<td className="px-4 py-3 font-medium text-gray-700">{row.R.c}</td>
|
||||
<td className="px-4 py-3 bg-sky-50 text-gray-700">{row.R.r}</td>
|
||||
<td className="px-4 py-3 bg-green-50 text-gray-700">{row.R.v}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,844 @@
|
||||
"use client";
|
||||
|
||||
import SubPageHeader from "@/components/SubPageHeader";
|
||||
import CaseImageSlider from "@/components/CaseImageSlider";
|
||||
|
||||
function SectionTitle({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="h-5 w-[3px] bg-sky-500" />
|
||||
<h3 className="text-2xl font-bold text-neutral-900">{children}</h3>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Hr({ className = "" }: { className?: string }) {
|
||||
return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
|
||||
}
|
||||
|
||||
export default function GlobalCasePage() {
|
||||
return (
|
||||
<div className="bg-white">
|
||||
<SubPageHeader
|
||||
title="해외 재이용 사례"
|
||||
crumbs={[
|
||||
{ label: "Home", href: "/reuse" },
|
||||
{ label: "물 재이용 사례" },
|
||||
{ label: "해외 재이용 사례" },
|
||||
]}
|
||||
hideFooterLine
|
||||
hideGuideText
|
||||
wrapClassName="!pb-0"
|
||||
/>
|
||||
|
||||
<Hr className="my-7" />
|
||||
|
||||
{/* 사례 개요 */}
|
||||
<section id="overview" className="scroll-mt-[120px]">
|
||||
<SectionTitle>사례 개요</SectionTitle>
|
||||
|
||||
<CaseImageSlider
|
||||
className="mt-8"
|
||||
maxWidthClassName="max-w-[760px]"
|
||||
slides={[
|
||||
{
|
||||
src: "/images/landing/business/globalCase/overview_01.png",
|
||||
alt: "해외 재이용 사례 개요 1",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
<section className="mt-6">
|
||||
<div className="rounded-md bg-[#e9f0f1] p-8">
|
||||
<h3 className="text-xl font-bold leading-relaxed text-gray-800">
|
||||
2024년 하수도 통계 기준 15.6%이며,
|
||||
<br />
|
||||
제2차 물 재이용 기본 계획을 고려한 2030년 목표는{" "}
|
||||
<span className="font-extrabold">17%</span>
|
||||
</h3>
|
||||
|
||||
<div className="mt-6 space-y-4">
|
||||
<div className="flex items-center gap-4">
|
||||
<span className="text-sm text-gray-600">’24년도</span>
|
||||
<div className="relative h-7 rounded-r-lg">
|
||||
<div className="h-7 w-[112px] rounded-r-lg bg-gray-400" />
|
||||
</div>
|
||||
<span className="text-sm text-gray-700">15.6%</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<span className="text-sm text-gray-600">’30년도</span>
|
||||
<div className="relative">
|
||||
<div className="h-10 w-[327px] rounded-r-lg bg-gradient-to-r from-sky-500 to-green-500" />
|
||||
</div>
|
||||
<span className="text-xl font-bold text-gray-900">17%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul className="mt-6 space-y-2 text-base text-gray-600">
|
||||
<li>
|
||||
• 우리나라의 하수 처리 재이용률은{" "}
|
||||
<span className="text-sky-600">15% 수준</span>
|
||||
</li>
|
||||
<li>
|
||||
• 대만은 가뭄과 공업용수 증가에 대응하여
|
||||
<span className="text-sky-600">
|
||||
{" "}
|
||||
현재 4.3% 수준이며, 16.5%까지 확대 계획 수립
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div className="mt-6 overflow-x-auto">
|
||||
<table className="w-full min-w-[640px] text-center text-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="rounded-t-lg bg-[#C2CAD2] px-4 py-3 text-black">
|
||||
국가
|
||||
</th>
|
||||
<th className="rounded-t-lg bg-sky-600 px-4 py-3 text-white">
|
||||
해외정보
|
||||
</th>
|
||||
<th className="rounded-t-lg bg-teal-500 px-4 py-3 text-white">
|
||||
현재
|
||||
</th>
|
||||
<th className="rounded-t-lg bg-green-500 px-4 py-3 text-white">
|
||||
미래(목표, 예측치)
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="border border-t-0 bg-white">
|
||||
<tr className="border-t">
|
||||
<td className="px-4 py-3 font-medium">한국</td>
|
||||
<td className="bg-sky-50 px-4 py-3 text-gray-700">12.1%</td>
|
||||
<td className="px-4 py-3">15.6%</td>
|
||||
<td className="bg-sky-50 px-4 py-3 text-gray-700">17%</td>
|
||||
</tr>
|
||||
<tr className="border-t">
|
||||
<td className="px-4 py-3 font-medium">대만</td>
|
||||
<td className="bg-sky-50 px-4 py-3 text-gray-700">2.4%</td>
|
||||
<td className="px-4 py-3">4.3%</td>
|
||||
<td className="bg-sky-50 px-4 py-3 text-gray-700">16.5%</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Hr className="my-11" />
|
||||
|
||||
<section>
|
||||
<SectionTitle>주요 국가의 하수처리수 재이용률 (%)</SectionTitle>
|
||||
|
||||
<ul className="mt-6 space-y-2 text-base text-gray-600">
|
||||
<li>
|
||||
• 전 세계적으로 물 재이용은 호주, 유럽, 아프리카, 미국 등 가뭄이
|
||||
잦거나 심각한 가뭄이 발생한 국가에서 많이 이루어짐
|
||||
</li>
|
||||
<li>
|
||||
• 이스라엘, 쿠웨이트 등 중동 및 북아프리카 지역은 가용 수자원이
|
||||
제한되어 있어 재이용량 비중도 매우 높은 편
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div className="mt-6 overflow-x-auto">
|
||||
<table className="min-w-[900px] w-full text-center text-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="rounded-t-lg bg-[#C2CAD2] px-4 py-3 text-black">
|
||||
국가명
|
||||
</th>
|
||||
<th className="rounded-t-lg bg-sky-600 px-4 py-3 text-white">
|
||||
지역
|
||||
</th>
|
||||
<th className="rounded-t-lg bg-green-500 px-4 py-3 text-white">
|
||||
재이용률
|
||||
</th>
|
||||
<th className="rounded-t-lg bg-[#C2CAD2] px-4 py-3 text-black">
|
||||
국가명
|
||||
</th>
|
||||
<th className="rounded-t-lg bg-sky-600 px-4 py-3 text-white">
|
||||
지역
|
||||
</th>
|
||||
<th className="rounded-t-lg bg-green-500 px-4 py-3 text-white">
|
||||
재이용률
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody className="border border-t-0 bg-white">
|
||||
{[
|
||||
{
|
||||
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) => (
|
||||
<tr key={idx} className="border-t">
|
||||
<td className="px-4 py-3 font-medium text-gray-700">
|
||||
{row.L.c}
|
||||
</td>
|
||||
<td className="bg-sky-50 px-4 py-3 text-gray-700">
|
||||
{row.L.r}
|
||||
</td>
|
||||
<td className="bg-green-50 px-4 py-3 text-gray-700">
|
||||
{row.L.v}
|
||||
</td>
|
||||
|
||||
<td className="px-4 py-3 font-medium text-gray-700">
|
||||
{row.R.c}
|
||||
</td>
|
||||
<td className="bg-sky-50 px-4 py-3 text-gray-700">
|
||||
{row.R.r}
|
||||
</td>
|
||||
<td className="bg-green-50 px-4 py-3 text-gray-700">
|
||||
{row.R.v}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<Hr className="my-16" />
|
||||
|
||||
{/* 대만 */}
|
||||
<section id="taiwan" className="scroll-mt-[120px]">
|
||||
<SectionTitle>대만</SectionTitle>
|
||||
|
||||
<CaseImageSlider
|
||||
className="mt-8"
|
||||
maxWidthClassName="max-w-[760px]"
|
||||
slides={[
|
||||
{
|
||||
src: "/images/landing/business/globalCase/taiwan_01.png",
|
||||
alt: "대만 사례 1",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
<section className="mt-8">
|
||||
<SectionTitle>재생 수자원 개발법 제정(2015년제정, 2022개정)</SectionTitle>
|
||||
<div className="px-4">
|
||||
<ul className="mt-6 space-y-2 text-base text-gray-600">
|
||||
<li>
|
||||
• 목적: 수자원 지속 가능성 향상, 재생 수자원 활용을 통해 물부족
|
||||
문제 해결
|
||||
</li>
|
||||
<li>
|
||||
• 내용: 재생 수자원 정의·분류, 이용 의무, 이용 제한, 수질 기준 등
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div className="mt-5 rounded-sm bg-[#e9f0f1] p-8">
|
||||
<ul className="space-y-1 text-2xl text-[#1A1A1A]">
|
||||
<li>
|
||||
– 제4조. 물 소비 계획에 따른 재이용수 이용 관련 내용 (일정 비율
|
||||
재이용수 사용 규정)
|
||||
</li>
|
||||
<li>
|
||||
– 제5조. 재이용수의 운영자, 사용자 관련 내용 (지자체에서 하수
|
||||
무상공급 제공 가능)
|
||||
</li>
|
||||
<li>
|
||||
– 제7조. 재이용수 이용 범위, 이용량 재이용수 수질 기준 내용
|
||||
(식품, 제약산업 사용 불가)
|
||||
</li>
|
||||
<li>
|
||||
– 제8조. 재이용수 사업 주체, 책임 등에 관한 내용 (광역인 경우,
|
||||
정부가 지자체 지정)
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Hr className="my-11" />
|
||||
|
||||
<section className="mt-6">
|
||||
<SectionTitle>대만정부 하수재이용 사업 시행</SectionTitle>
|
||||
<div className="px-4">
|
||||
<ul className="mt-6 space-y-4 text-base text-gray-600">
|
||||
<li>
|
||||
• 대만은 물 재이용에 적극적이며 국가주도로 하수재이용 사업
|
||||
시행(안핑)
|
||||
<br />
|
||||
<ul className="ml-4 mt-2 list-inside text-[#767676]">
|
||||
<li>– 1,618억의 사업비 중 92% 국비, 지방비 8% 투입</li>
|
||||
<li>– 재이용수는 24km 관로로 타이난 TSMC로 공급</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>• 안핑을 포함한 16건 공사 완료시 628,100 CMD 공급 가능</li>
|
||||
<li>• 공급단가는 수질과 운영조건에 따라 다르게 책정</li>
|
||||
</ul>
|
||||
|
||||
<div className="mt-3 overflow-x-auto">
|
||||
<p className="py-2 text-center text-2xl">
|
||||
〈대만 재이용 시설별 재이용수 공급단지〉
|
||||
</p>
|
||||
<table className="min-w-[900px] w-full text-center text-sm">
|
||||
<thead className="border">
|
||||
<tr>
|
||||
<th className="bg-[#C2CAD2] px-4 py-3 text-black">사업</th>
|
||||
<th className="bg-sky-600 px-4 py-3 text-white">
|
||||
가격(NTD/㎥)
|
||||
</th>
|
||||
<th className="bg-green-500 px-4 py-3 text-white">
|
||||
가격(원/㎥)
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody className="border border-t-0 bg-white text-[#4F4F4F]">
|
||||
<tr className="border-t">
|
||||
<td className="bg-white px-4 py-3">Fongshan(가오슝)</td>
|
||||
<td className="bg-[#EAF5F5] px-4 py-3">23.39</td>
|
||||
<td className="bg-[#E7F4E2] px-4 py-3">1,038원</td>
|
||||
</tr>
|
||||
<tr className="border-t">
|
||||
<td className="bg-white px-4 py-3">Linhai(가오슝)</td>
|
||||
<td className="bg-[#EAF5F5] px-4 py-3">19.28</td>
|
||||
<td className="bg-[#E7F4E2] px-4 py-3">858원</td>
|
||||
</tr>
|
||||
<tr className="border-t">
|
||||
<td className="bg-white px-4 py-3">Anping(타이난)</td>
|
||||
<td className="bg-[#EAF5F5] px-4 py-3">38.28</td>
|
||||
<td className="bg-[#E7F4E2] px-4 py-3">1,699원</td>
|
||||
</tr>
|
||||
<tr className="border-t">
|
||||
<td className="bg-white px-4 py-3">Yongkang(타이난)</td>
|
||||
<td className="bg-[#EAF5F5] px-4 py-3">23.67</td>
|
||||
<td className="bg-[#E7F4E2] px-4 py-3">1,050원</td>
|
||||
</tr>
|
||||
<tr className="border-t">
|
||||
<td className="bg-white px-4 py-3">Rende(타이난)</td>
|
||||
<td className="bg-[#EAF5F5] px-4 py-3">28.26</td>
|
||||
<td className="bg-[#E7F4E2] px-4 py-3">1,254원</td>
|
||||
</tr>
|
||||
<tr className="border-t">
|
||||
<td className="bg-white px-4 py-3">Shuinan(타이중)</td>
|
||||
<td className="bg-[#EAF5F5] px-4 py-3">15.00</td>
|
||||
<td className="bg-[#E7F4E2] px-4 py-3">668원</td>
|
||||
</tr>
|
||||
<tr className="border-t">
|
||||
<td className="bg-white px-4 py-3">Quaitou(가오슝)</td>
|
||||
<td className="bg-[#EAF5F5] px-4 py-3">35.44</td>
|
||||
<td className="bg-[#E7F4E2] px-4 py-3">1,573원</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Hr className="my-11" />
|
||||
|
||||
<section>
|
||||
<SectionTitle>특이사항</SectionTitle>
|
||||
<ul className="mt-6 space-y-4 pl-4 text-base text-gray-600">
|
||||
<li>
|
||||
<ul className="list-disc list-outside space-y-1 pl-6 leading-relaxed">
|
||||
<li>
|
||||
대만은 풍부한 강수량에도, 지형적 특성으로 인해 수자원 확보에
|
||||
어려움을 겪고 있으며, 대만 남부지역의 경우 우기와 건기 사이의
|
||||
강수량 차이가 큼
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<ul className="list-disc list-outside space-y-1 pl-6 leading-relaxed">
|
||||
<li>
|
||||
대만은 최근 심각한 가뭄이 여러 해에 걸쳐서 발생하고 있으며,
|
||||
강수량 감소와 함께 대만 정부 주도하에 반도체 산업을 국가 핵심
|
||||
산업으로 선정하고 반도체 산업 육성 계획을 세움. 그 결과,
|
||||
2023년 파운드리 시장의 68.3%를 차지하는 반도체 강국으로
|
||||
성장했으며 이로 인한 공업용수 수요가 크게 증가
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<ul className="list-disc list-outside space-y-1 pl-6 leading-relaxed">
|
||||
<li>
|
||||
반도체 산업은 물 소비가 많아, 안정적인 용수공급이 매우
|
||||
중요한데 현재 19개의 반도체 공장이 물이 부족한 대만 남부지역에
|
||||
위치함. 2021년 가뭄 발생 당시, 산업단지 기업들도 용수 공급에
|
||||
어려움을 겪음. 이는 대만 남부 지역의 물 부족, 물 분배 등에
|
||||
대한 문제를 야기함
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<ul className="list-disc list-outside space-y-1 pl-6 leading-relaxed">
|
||||
<li>
|
||||
대만 정부는 산업단지 기업들에게 2023년부터 물에 대한
|
||||
추가요금 부과를 시작했으며, 농업용수에 대해서는 강력한
|
||||
억제정책을 시행함. 안정적인 용수 공급을 위해서 정부와
|
||||
기업에서 자체적으로 재이용수 시설에 대한 투자가 이루어지고
|
||||
있음.
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<ul className="list-disc list-outside space-y-1 pl-6 leading-relaxed">
|
||||
<li>
|
||||
대만은 2004년 기후변화로 인한 물 부족 상황을 해결하기 위해
|
||||
수자원 보호 전략을 승인하고, 2015년 대만 환경부는 재생 수자원
|
||||
개발법을 발표, 2022년에는 한 차례 개정
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<ul className="list-disc list-outside space-y-1 pl-6 leading-relaxed">
|
||||
<li>
|
||||
대만은 물 소비량이 많은 산업(high water consuming
|
||||
industries)과 하수처리장(municipal wastewater treatment
|
||||
plants), 두 곳을 재이용수의 주요 공급원으로 계획
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<Hr className="my-16" />
|
||||
|
||||
{/* 호주 */}
|
||||
<section id="australia" className="scroll-mt-[120px]">
|
||||
<SectionTitle>호주</SectionTitle>
|
||||
|
||||
<CaseImageSlider
|
||||
className="mt-8"
|
||||
maxWidthClassName="max-w-[760px]"
|
||||
slides={[
|
||||
{
|
||||
src: "/images/landing/business/globalCase/australia_01.png",
|
||||
alt: "호주 사례 1",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
<section className="mt-8">
|
||||
<SectionTitle>생활용수로 재이용수의 적극 활용</SectionTitle>
|
||||
<div className="mt-6 px-4">
|
||||
<ul className="space-y-4 text-base text-[#4F4F4F]">
|
||||
<li>– 재이용수를 공원, 골프장 등의 관개용수로 공급(초록색 지역)</li>
|
||||
<li>
|
||||
– Dual pipe로 재이용수를 특정 주거단지로 공급(보라색 지역)
|
||||
</li>
|
||||
<li>– 현재 7,000여 가구가 재이용수를 사용</li>
|
||||
<li>– 2030년까지 43,000가구로 확대 예정</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Hr className="my-11" />
|
||||
|
||||
<section className="mt-6">
|
||||
<SectionTitle>호주 재이용수 광역 활용(퀸즈랜드주 브리즈번)</SectionTitle>
|
||||
<div className="px-4">
|
||||
<ul className="mt-6 space-y-4 text-base text-gray-600">
|
||||
<li>
|
||||
• SEQ Water Grid는 브리즈번 남동부지역의 식수 공급을 위해
|
||||
설정한 광역 수로망
|
||||
</li>
|
||||
<li>
|
||||
• 이 광역수로망을 활용하여 물이 부족한 지역으로 물을 공급
|
||||
<br />
|
||||
<ul className="ml-4 mt-2 list-inside text-[#767676]">
|
||||
<li>– 1,618억의 사업비 중 92% 국비, 지방비 8% 투입</li>
|
||||
<li>– 재이용수는 24km 관로로 타이난 TSMC로 공급</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
• 12개 댐, 32개 수처리 시설, 3개 재이용시설, 담수화 플랜트 1개,
|
||||
저수지 28개와 600km 이상의 물 공급 관로를 건설
|
||||
</li>
|
||||
<li>
|
||||
• 지역적으로 강수량이 고르지 않아, 댐의 저수율이 불균등할 때
|
||||
지역의 물 공급을 보충하는 중요한 역할을 수행
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Hr className="my-11" />
|
||||
|
||||
<section>
|
||||
<SectionTitle>특이사항</SectionTitle>
|
||||
<ul className="mt-6 space-y-4 pl-4 text-base text-gray-600">
|
||||
<li>
|
||||
<ul className="list-disc list-outside space-y-1 pl-6 leading-relaxed">
|
||||
<li>
|
||||
호주는 2000~2009년 강수량 감소로 밀레니엄 가뭄이 발생하여
|
||||
심각한 물 부족 현상이 발생함
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<ul className="list-disc list-outside space-y-1 pl-6 leading-relaxed">
|
||||
<li>
|
||||
호주는 해안 도시에 인구가 밀집하여 거주하고 있으며 인구
|
||||
증가율이 타 선진국 대비 높아, 향후 도시에 공급할 수자원 확보가
|
||||
필요함
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<ul className="list-disc list-outside space-y-1 pl-6 leading-relaxed">
|
||||
<li>
|
||||
호주정부는 1990년대부터 하·폐수가 방류될 경우의 환경 피해에
|
||||
대해 인식하기 시작하고 배출규제와 위원회를 구성하기 시작
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<ul className="list-disc list-outside space-y-1 pl-6 leading-relaxed">
|
||||
<li>
|
||||
연방정부는 주에 인센티브를 주는 방식으로 물 정책을 장려하고
|
||||
토지소유권과 물 권리를 구분하여 거래를 허용하고 물 재이용
|
||||
활성화를 위한 Water Smart Australia 프로그램을 시행
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<ul className="list-disc list-outside space-y-1 pl-6 leading-relaxed">
|
||||
<li>
|
||||
호주의 용수공급 체계는 영국과 미국의 특성들이 존재하지만, 주의
|
||||
특성과 주 정부의 정책 방향에 따라 주마다도 많은 차이가 있음.
|
||||
특히 대부분의 주에서 수 자원 개발 기능과 수도 공급의 기능을
|
||||
분리하여 주정부 산하 기관에서 운영하는게 특징
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<Hr className="my-16" />
|
||||
|
||||
{/* 싱가포르 */}
|
||||
<section id="singapore" className="scroll-mt-[120px]">
|
||||
<SectionTitle>싱가포르</SectionTitle>
|
||||
|
||||
<CaseImageSlider
|
||||
className="mt-8"
|
||||
maxWidthClassName="max-w-[760px]"
|
||||
slides={[
|
||||
{
|
||||
src: "/images/landing/business/globalCase/singapore_01.png",
|
||||
alt: "싱가포르 사례 1",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
<section className="mt-8">
|
||||
<SectionTitle>싱가포르 NEWater 비중 확대</SectionTitle>
|
||||
<div className="mt-6 px-4">
|
||||
<ul className="space-y-4 text-base text-gray-600">
|
||||
<li>
|
||||
• 2003년 공식 NEWater 공장을 가동했으며 신뢰확보를 위해
|
||||
NEWater Visitor Center를 함께 건설
|
||||
</li>
|
||||
<li>• NEWater 전체파이프 공급 → 반도체 공장에서 가장 많이 사용</li>
|
||||
<li>
|
||||
• 2060년까지 NEWater 비중 55%까지 높이는 것이 싱가포르의 목표
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Hr className="my-11" />
|
||||
|
||||
<section className="mt-6">
|
||||
<SectionTitle>싱가포르 재이용수 의무화 및 지원정책</SectionTitle>
|
||||
<div className="px-4">
|
||||
<ul className="mt-6 space-y-4 text-base text-gray-600">
|
||||
<li>
|
||||
• 공업용수 수요가 높은 산업에 대해 물 재이용을 의무화
|
||||
<br />
|
||||
<ul className="ml-4 mt-2 list-inside text-sm text-[#767676]">
|
||||
<li>
|
||||
– 반도체업계 전체 비 재이용수(non-domestic용수) 17% 차지 →
|
||||
공업용수 수요 원인
|
||||
</li>
|
||||
<li>
|
||||
– 2024년 1월 1일부터 연간 최소 60,000㎥를 소비하는 사업자는
|
||||
재이용수 사용 의무화
|
||||
</li>
|
||||
<li>
|
||||
– 반도체 공장의 경우 최소 50% 이상의 재이용수를 요구함(현재는
|
||||
43% 정도)
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
• 재정 지원을 통해 재이용 활성화를 지원
|
||||
<br />
|
||||
<ul className="ml-4 mt-2 list-inside text-sm text-[#767676]">
|
||||
<li>
|
||||
– 재이용 설비를 기준으로 2025년까지 싱가포르 수자원공사의
|
||||
2가지 금융상품 제공
|
||||
<ul className="ml-4 mt-2 list-inside text-[#767676]">
|
||||
<li>1. Water Efficiency Fund</li>
|
||||
<li>2. Industrial Water Solutions Demonstration Fund</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li className="mt-2">
|
||||
– 2025년 기준 지원 한도 상향 → 물 재이용 활성 도모
|
||||
<ul className="ml-4 mt-2 list-inside text-[#767676]">
|
||||
<li>
|
||||
투입비용 50% → 75% 지원 / WSDP: $400만 → $500만
|
||||
</li>
|
||||
<li>
|
||||
물 효율이 높은 장비를 도입하는 데에도 최대 $300만 지원
|
||||
가능
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Hr className="my-11" />
|
||||
|
||||
<section>
|
||||
<SectionTitle>특이사항</SectionTitle>
|
||||
<ul className="mt-6 space-y-4 pl-4 text-base text-gray-600">
|
||||
<li>
|
||||
<ul className="list-disc list-outside space-y-1 pl-6 leading-relaxed">
|
||||
<li>
|
||||
싱가포르는 천연 수자원이 많지 않아, 말레이시아 조호르와 1962년
|
||||
맺은 협약으로 물을 수입해왔으며, 재이용수를 늘리기 위한 노력을
|
||||
계속하고 있음
|
||||
<br />
|
||||
<ul className="ml-4 mt-2 list-inside text-sm text-[#767676]">
|
||||
<li>
|
||||
- 싱가포르는 국토 내에 호수와 하천이적고 집수공간도 적어
|
||||
빗물로 확보할 수 있는 수자원량은 전체 물 수요의 20%에
|
||||
불과함
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<ul className="list-disc list-outside space-y-1 pl-6 leading-relaxed">
|
||||
<li>
|
||||
싱가포르는 도심에 저수지를 건설하 고 건물에 빗물이용시설을
|
||||
건설하여 빗물을 재이용하고 있음
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<ul className="list-disc list-outside space-y-1 pl-6 leading-relaxed">
|
||||
<li>
|
||||
싱가포르는 2002년부터 하수재이용수인 NEWater를 개발, 비음
|
||||
용수와 간접음용수로 활용하고 있음
|
||||
<br />
|
||||
<ul className="ml-4 mt-2 list-inside text-sm/6 text-[#767676]">
|
||||
<li>
|
||||
- 재이용수를 NEWater라는 이름으로 명명하고 NEWater에 대한
|
||||
신뢰 확보를 위해 NEWater 방문자 센터도 건설함
|
||||
</li>
|
||||
<li>
|
||||
- 비음용수로 많이 사용하며 건기에는 NEWater를 저수지에
|
||||
추가하여 원수와 섞음. 원수는 상수도에서 처리 한 후 가정에
|
||||
수돗물로 공급함
|
||||
</li>
|
||||
<li>
|
||||
- NEWater는 전용 파이프를 통해 주로 웨이퍼 제조 공장,
|
||||
산업단지, 상업용 건물에서 산업 및 냉각수로 사용. 제일 많이
|
||||
사용하는 곳은 웨이퍼 제조 공장
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<ul className="list-disc list-outside space-y-1 pl-6 leading-relaxed">
|
||||
<li>
|
||||
2024년 4월 기준 1㎥ 당 공업용수 가격은 $1.66이며,
|
||||
Non-domestic 기준 NEWater 가격은 $2.41
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<ul className="list-disc list-outside space-y-1 pl-6 leading-relaxed">
|
||||
<li>
|
||||
공업용수 가격 $1.66은 수도요금(water tariff)과 수자원세
|
||||
(waterborne tax)로 구분됨. $1.66에는 $1만큼의 수자원세가
|
||||
포함됨
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<ul className="list-disc list-outside space-y-1 pl-6 leading-relaxed">
|
||||
<li>
|
||||
2023년 싱가포르는 산업용수 수요가 높은 산업에 대해 물 재
|
||||
이용을 의무화했으며, 정부는 기금을 통해 물 재이용을 지원함
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<Hr className="my-16" />
|
||||
|
||||
{/* EU */}
|
||||
<section id="eu" className="scroll-mt-[120px] pb-[200px]">
|
||||
<SectionTitle>EU</SectionTitle>
|
||||
|
||||
<CaseImageSlider
|
||||
className="mt-8"
|
||||
maxWidthClassName="max-w-[760px]"
|
||||
slides={[
|
||||
{
|
||||
src: "/images/landing/business/globalCase/eu_01.png",
|
||||
alt: "EU 사례 1",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
<section className="mt-8">
|
||||
<SectionTitle>물 재이용에 대한 법률을 제정(2020 제정, 2023 시행)</SectionTitle>
|
||||
<div className="mt-6 px-4">
|
||||
<ul className="space-y-4 text-base text-gray-600">
|
||||
<li>
|
||||
• 유럽 지역의 물 부족 문제를 인식하고 ’20년 물 재이용 법률을
|
||||
제정 (2020/741)
|
||||
</li>
|
||||
<li>• 2023년부터 모든 EU국가에서 시행</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Hr className="my-11" />
|
||||
|
||||
<section className="mt-6">
|
||||
<SectionTitle>유럽연합 회원국 물 재이용 지원정책</SectionTitle>
|
||||
<div className="px-4">
|
||||
<ul className="mt-6 space-y-4 text-base text-gray-600">
|
||||
<li>
|
||||
• 유럽연합 차원에서 다양한 물 재이용 프로그램 자금 지원
|
||||
<br />
|
||||
<ul className="ml-4 mt-2 list-inside space-y-4 text-sm text-[#767676]">
|
||||
<li>
|
||||
– 2021년부터 3년간 Life RECYCLIO 프로그램 지원 → 세부내용
|
||||
물 재이용 프로그램
|
||||
<ul className="ml-4 mt-2 list-inside space-y-2 text-[#767676]">
|
||||
<li>
|
||||
1. 환경 관련 사업에 자금을 지원하는 Life 프로그램의
|
||||
일환으로 80만 유로를 지원
|
||||
</li>
|
||||
<li>
|
||||
2. 식품·농업 분야 물 재이용 확대를 위해 기술 이전 및 평가
|
||||
실시
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
– 물 재이용 정책 수행을 위해 BOOST-INN 180만 유로를 지원
|
||||
<ul className="ml-4 mt-2 list-inside space-y-2 text-[#767676]">
|
||||
<li>
|
||||
*프랑스, 이탈리아, 스페인 등 유럽 선진국 솔루션 공유
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
• EU산하 JRC(공동연구센터)에서 물 재이용 기술제공 지원
|
||||
<br />
|
||||
<ul className="ml-4 mt-2 list-inside space-y-2 text-sm text-[#767676]">
|
||||
<li>
|
||||
‘물 재이용 회원 관리 실무 커뮤니티(Water Reuse Management
|
||||
Community of Practice)’ 시범사업 수행
|
||||
</li>
|
||||
<li>
|
||||
유럽 전역에 성공적인 모델 활용 및 혁신적인 물 재이용
|
||||
솔루션을 확장할 수 있는 기술을 제공
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Hr className="my-11" />
|
||||
|
||||
<section>
|
||||
<SectionTitle>특이사항</SectionTitle>
|
||||
<ul className="mt-6 space-y-4 pl-4 text-base text-gray-600">
|
||||
<li>
|
||||
<ul className="list-disc list-outside space-y-1 pl-6 leading-relaxed">
|
||||
<li>
|
||||
2019년 기준 EU 인구의 38%가 물 부족의 영향을 받을 것으로
|
||||
예상됨. 이 흐름대로면 2030년까지 유럽 유역 전반에 물 부족
|
||||
문제가 발생하게 될 것으로 예상. 인구 증가, 도시화의 확대,
|
||||
염분화 및 기후변화들이 수자원 문제들의 주요 요인이며, 식습관
|
||||
변화와 산업용수 수요 증가 등으로 악화되고 있는 상황
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<ul className="list-disc list-outside space-y-1 pl-6 leading-relaxed">
|
||||
<li>
|
||||
유럽의 물 부족 상황은 지역에 따라 다르게 나타나 스페인을
|
||||
비롯한 남부유럽 에서 특히 심각함. 전반적으로 북유럽에 비해
|
||||
남유럽의 물 스트레스가 심하며, 특히 스페인과 포르투갈, 프랑스
|
||||
동부지역의 물 스트레스가 심각함
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<ul className="list-disc list-outside space-y-1 pl-6 leading-relaxed">
|
||||
<li>
|
||||
유럽 연합에서도 물 부족 문제를 인식하고 2000년 EU Water
|
||||
Framework Directive을 개발, 이후 2020년 재이용에 관한 법률을
|
||||
제정
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -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 (
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="h-5 w-[3px] bg-sky-500" />
|
||||
<h3 className="text-2xl font-bold text-neutral-900">{children}</h3>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
type HrProps = {
|
||||
className?: string;
|
||||
};
|
||||
|
||||
function Hr({ className = "" }: HrProps) {
|
||||
return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
|
||||
}
|
||||
|
||||
// type ImgCardProps = {
|
||||
// src: string;
|
||||
// alt: string;
|
||||
// };
|
||||
|
||||
// function ImgCard({ src, alt }: ImgCardProps) {
|
||||
// return (
|
||||
// <div className="w-full overflow-x-auto">
|
||||
// <img
|
||||
// src={src}
|
||||
// alt={alt}
|
||||
// className="block mx-auto max-w-none"
|
||||
// />
|
||||
// </div>
|
||||
// );
|
||||
// }
|
||||
|
||||
export default function GreywaterPage() {
|
||||
return (
|
||||
<div className="bg-white">
|
||||
<SubPageHeader
|
||||
title="[싱가포르] 수요가 높은 산업의 물 재이용 의무화"
|
||||
crumbs={[
|
||||
{ label: "Home", href: "/reuse" },
|
||||
{ label: "물 재이용 사례" },
|
||||
{ label: "해외 재이용 사례" },
|
||||
{ label: "싱가포르", href: "/reuse/business/globalCase/singapore" },
|
||||
]}
|
||||
hideFooterLine
|
||||
hideGuideText
|
||||
wrapClassName="!pb-0"
|
||||
/>
|
||||
|
||||
<Hr className="my-7" />
|
||||
|
||||
{/* 슬라이드 이미지 영역 */}
|
||||
<CaseImageSlider
|
||||
className="mt-8"
|
||||
maxWidthClassName="max-w-[760px]"
|
||||
slides={[
|
||||
{ src: "/images/landing/business/globalCase/singapore_01.png", alt: "싱가포르 사례 1" },
|
||||
]}
|
||||
/>
|
||||
|
||||
{/* 싱가포르 NEWater 비중 확대 */}
|
||||
<section className="mt-8">
|
||||
<SectionTitle>싱가포르 NEWater 비중 확대</SectionTitle>
|
||||
<div className="px-4 mt-6">
|
||||
<ul className="mt-6 space-y-4 text-base text-gray-600">
|
||||
<li>
|
||||
• 2003년 공식 NEWater 공장을 가동했으며 신뢰확보를 위해 NEWater Visitor Center를 함께 건설
|
||||
</li>
|
||||
<li>
|
||||
• NEWater 전체파이프 공급 → 반도체 공장에서 가장 많이 사용
|
||||
</li>
|
||||
<li>
|
||||
• 2060년까지 NEWater 비중 55%까지 높이는 것이 싱가포르의 목표
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Hr className="my-11" />
|
||||
|
||||
{/* 싱가포르 재이용수 의무화 및 지원정책 */}
|
||||
<section className="mt-6">
|
||||
<SectionTitle>싱가포르 재이용수 의무화 및 지원정책</SectionTitle>
|
||||
<div className="px-4">
|
||||
<ul className="mt-6 space-y-4 text-base text-gray-600">
|
||||
<li>
|
||||
• 공업용수 수요가 높은 산업에 대해 물 재이용을 의무화<br />
|
||||
<ul className="list-inside text-[#767676] text-sm ml-4 mt-2">
|
||||
<li>– 반도체업계 전체 비 재이용수(non-domestic용수) 17% 차지 → 공업용수 수요 원인</li>
|
||||
<li>– 2024년 1월 1일부터 연간 최소 60,000㎥를 소비하는 사업자는 재이용수 사용 의무화</li>
|
||||
<li>– 반도체 공장의 경우 최소 50% 이상의 재이용수를 요구함(현재는 43% 정도)</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
• 재정 지원을 통해 재이용 활성화를 지원<br />
|
||||
<ul className="list-inside text-[#767676] text-sm ml-4 mt-2">
|
||||
<li>– 재이용 설비를 기준으로 2025년까지 싱가포르 수자원공사의 2가지 금융상품 제공<br/>
|
||||
<ul className="list-inside text-[#767676] ml-4 mt-2">
|
||||
<li>1. Water Efficiency Fund</li>
|
||||
<li>2. Industrial Water Solutions Demonstration Fund</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li className="mt-2">– 2025년 기준 지원 한도 상향 → 물 재이용 활성 도모<br/>
|
||||
<ul className="list-inside text-[#767676] ml-4 mt-2">
|
||||
<li>투입비용 50% → 75% 지원 / WSDP: $400만 → $500만</li>
|
||||
<li>물 효율이 높은 장비를 도입하는 데에도 최대 $300만 지원 가능</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Hr className="my-11" />
|
||||
|
||||
{/* 특이사항 */}
|
||||
<section className="pb-[200px]">
|
||||
<SectionTitle>특이사항</SectionTitle>
|
||||
<ul className="mt-6 space-y-4 pl-4 text-base text-gray-600">
|
||||
<li>
|
||||
<ul className="list-disc list-outside pl-6 space-y-1 leading-relaxed">
|
||||
<li>싱가포르는 천연 수자원이 많지 않아, 말레이시아 조호르와 1962년 맺은 협약으로 물을 수입해왔으며, 재이용수를 늘리기 위한 노력을 계속하고 있음<br/>
|
||||
<ul className="list-inside text-[#767676] text-sm ml-4 mt-2">
|
||||
<li>- 싱가포르는 국토 내에 호수와 하천이적고 집수공간도 적어 빗물로 확보할 수 있는 수자원량은 전체 물 수요의 20%에 불과함</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<ul className="list-disc list-outside pl-6 space-y-1 leading-relaxed">
|
||||
<li>싱가포르는 도심에 저수지를 건설하 고 건물에 빗물이용시설을 건설하여 빗물을 재이용하고 있음</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<ul className="list-disc list-outside pl-6 space-y-1 leading-relaxed">
|
||||
<li>싱가포르는 2002년부터 하수재이용수인 NEWater를 개발, 비음 용수와 간접음용수로 활용하고 있음<br/>
|
||||
<ul className="list-inside text-[#767676] text-sm/6 ml-4 mt-2">
|
||||
<li>- 재이용수를 NEWater라는 이름으로 명명하고 NEWater에 대한 신뢰 확보를 위해 NEWater 방문자 센터도 건설함</li>
|
||||
<li>- 비음용수로 많이 사용하며 건기에는 NEWater를 저수지에 추가하여 원수와 섞음. 원수는 상수도에서 처리 한 후 가정에 수돗물로 공급함</li>
|
||||
<li>- NEWater는 전용 파이프를 통해 주로 웨이퍼 제조 공장, 산업단지, 상업용 건물에서 산업 및 냉각수로 사용. 제일 많이 사용하는 곳은 웨이퍼 제조 공장</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<ul className="list-disc list-outside pl-6 space-y-1 leading-relaxed">
|
||||
<li>2024년 4월 기준 1㎥ 당 공업용수 가격은 $1.66이며, Non-domestic 기준 NEWater 가격은 $2.41</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<ul className="list-disc list-outside pl-6 space-y-1 leading-relaxed">
|
||||
<li>공업용수 가격 $1.66은 수도요금(water tariff)과 수자원세(waterborne tax)로 구분됨. $1.66에는 $1만큼의 수자원세가 포함됨</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<ul className="list-disc list-outside pl-6 space-y-1 leading-relaxed">
|
||||
<li>2023년 싱가포르는 산업용수 수요가 높은 산업에 대해 물 재 이용을 의무화했으며, 정부는 기금을 통해 물 재이용을 지원함</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -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 (
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="h-5 w-[3px] bg-sky-500" />
|
||||
<h3 className="text-2xl font-bold text-neutral-900">{children}</h3>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
type HrProps = {
|
||||
className?: string;
|
||||
};
|
||||
|
||||
function Hr({ className = "" }: HrProps) {
|
||||
return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
|
||||
}
|
||||
|
||||
// type ImgCardProps = {
|
||||
// src: string;
|
||||
// alt: string;
|
||||
// };
|
||||
|
||||
// function ImgCard({ src, alt }: ImgCardProps) {
|
||||
// return (
|
||||
// <div className="w-full overflow-x-auto">
|
||||
// <img
|
||||
// src={src}
|
||||
// alt={alt}
|
||||
// className="block mx-auto max-w-none"
|
||||
// />
|
||||
// </div>
|
||||
// );
|
||||
// }
|
||||
|
||||
export default function GreywaterPage() {
|
||||
return (
|
||||
<div className="bg-white">
|
||||
<SubPageHeader
|
||||
title="[대만] 국가 주도의 공업용수 공급"
|
||||
crumbs={[
|
||||
{ label: "Home", href: "/reuse" },
|
||||
{ label: "물 재이용 사례" },
|
||||
{ label: "해외 재이용 사례" },
|
||||
{ label: "대만", href: "/reuse/business/globalCase/taiwan" },
|
||||
]}
|
||||
hideFooterLine
|
||||
hideGuideText
|
||||
wrapClassName="!pb-0"
|
||||
/>
|
||||
|
||||
<Hr className="my-7" />
|
||||
|
||||
{/* 슬라이드 이미지 영역 */}
|
||||
<CaseImageSlider
|
||||
className="mt-8"
|
||||
maxWidthClassName="max-w-[760px]"
|
||||
slides={[
|
||||
{ src: "/images/landing/business/globalCase/taiwan_01.png", alt: "대만 사례 1" },
|
||||
]}
|
||||
/>
|
||||
|
||||
{/* 재생 수자원 개발법 제정(2015년제정, 2022개정) */}
|
||||
<section className="mt-8">
|
||||
<SectionTitle>재생 수자원 개발법 제정(2015년제정, 2022개정)</SectionTitle>
|
||||
<div className="px-4">
|
||||
<ul className="mt-6 space-y-2 text-base text-gray-600">
|
||||
<li>
|
||||
• 목적: 수자원 지속 가능성 향상, 재생 수자원 활용을 통해 물부족 문제 해결
|
||||
</li>
|
||||
<li>
|
||||
• 내용: 재생 수자원 정의·분류, 이용 의무, 이용 제한, 수질 기준 등
|
||||
</li>
|
||||
</ul>
|
||||
<div className="rounded-sm bg-[#e9f0f1] p-8 mt-5">
|
||||
<ul className="space-y-1 text-2xl text-[#1A1A1A]">
|
||||
<li>
|
||||
– 제4조. 물 소비 계획에 따른 재이용수 이용 관련 내용 (일정 비율 재이용수 사용 규정)
|
||||
</li>
|
||||
<li>
|
||||
– 제5조. 재이용수의 운영자, 사용자 관련 내용 (지자체에서 하수 무상공급 제공 가능)
|
||||
</li>
|
||||
<li>
|
||||
– 제7조. 재이용수 이용 범위, 이용량 재이용수 수질 기준 내용 (식품, 제약산업 사용 불가)
|
||||
</li>
|
||||
<li>
|
||||
– 제8조. 재이용수 사업 주체, 책임 등에 관한 내용 (광역인 경우, 정부가 지자체 지정)
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Hr className="my-11" />
|
||||
|
||||
{/* 대만정부 하수재이용 사업 시행 */}
|
||||
<section className="mt-6">
|
||||
<SectionTitle>대만정부 하수재이용 사업 시행</SectionTitle>
|
||||
<div className="px-4">
|
||||
<ul className="mt-6 space-y-4 text-base text-gray-600">
|
||||
<li>
|
||||
• 대만은 물 재이용에 적극적이며 국가주도로 하수재이용 사업 시행(안핑)<br />
|
||||
<ul className="list-inside text-[#767676] ml-4 mt-2">
|
||||
<li>– 1,618억의 사업비 중 92% 국비, 지방비 8% 투입</li>
|
||||
<li>– 재이용수는 24km 관로로 타이난 TSMC로 공급</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
• 안핑을 포함한 16건 공사 완료시 628,100 CMD 공급 가능
|
||||
</li>
|
||||
<li>
|
||||
• 공급단가는 수질과 운영조건에 따라 다르게 책정
|
||||
</li>
|
||||
</ul>
|
||||
{/* 테이블 (2단 병렬: 좌/우 데이터) */}
|
||||
<div className="mt-3">
|
||||
<div className="overflow-x-auto">
|
||||
<p className="text-center text-2xl py-2">〈대만 재이용 시설별 재이용수 공급단지〉</p>
|
||||
<table className="min-w-[900px] w-full text-center text-sm">
|
||||
<thead className="border">
|
||||
<tr>
|
||||
<th className="bg-[#C2CAD2] px-4 py-3 text-black">사업</th>
|
||||
<th className="bg-sky-600 px-4 py-3 text-white">가격(NTD/㎥)</th>
|
||||
<th className="bg-green-500 px-4 py-3 text-white">가격(원/㎥)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody className="bg-white text-[#4F4F4F] border border-t-0">
|
||||
<tr className="border-t">
|
||||
<td className="px-4 py-3 bg-white">Fongshan(가오슝)</td>
|
||||
<td className="px-4 py-3 bg-[#EAF5F5]">23.39</td>
|
||||
<td className="px-4 py-3 bg-[#E7F4E2]">1,038원</td>
|
||||
</tr>
|
||||
<tr className="border-t">
|
||||
<td className="px-4 py-3 bg-white">Linhai(가오슝)</td>
|
||||
<td className="px-4 py-3 bg-[#EAF5F5]">19.28</td>
|
||||
<td className="px-4 py-3 bg-[#E7F4E2]">858원</td>
|
||||
</tr>
|
||||
<tr className="border-t">
|
||||
<td className="px-4 py-3 bg-white">Anping(타이난)</td>
|
||||
<td className="px-4 py-3 bg-[#EAF5F5]">38.28</td>
|
||||
<td className="px-4 py-3 bg-[#E7F4E2]">1,699원</td>
|
||||
</tr>
|
||||
<tr className="border-t">
|
||||
<td className="px-4 py-3 bg-white">Yongkang(타이난)</td>
|
||||
<td className="px-4 py-3 bg-[#EAF5F5]">23.67</td>
|
||||
<td className="px-4 py-3 bg-[#E7F4E2]">1,050원</td>
|
||||
</tr>
|
||||
<tr className="border-t">
|
||||
<td className="px-4 py-3 bg-white">Rende(타이난)</td>
|
||||
<td className="px-4 py-3 bg-[#EAF5F5]">28.26</td>
|
||||
<td className="px-4 py-3 bg-[#E7F4E2]">1,254원</td>
|
||||
</tr>
|
||||
<tr className="border-t">
|
||||
<td className="px-4 py-3 bg-white">Shuinan(타이중)</td>
|
||||
<td className="px-4 py-3 bg-[#EAF5F5]">15.00</td>
|
||||
<td className="px-4 py-3 bg-[#E7F4E2]">668원</td>
|
||||
</tr>
|
||||
<tr className="border-t">
|
||||
<td className="px-4 py-3 bg-white">Quaitou(가오슝)</td>
|
||||
<td className="px-4 py-3 bg-[#EAF5F5]">35.44</td>
|
||||
<td className="px-4 py-3 bg-[#E7F4E2]">1,573원</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Hr className="my-11" />
|
||||
|
||||
{/* 특이사항 */}
|
||||
<section className="pb-[200px]">
|
||||
<SectionTitle>특이사항</SectionTitle>
|
||||
<ul className="mt-6 space-y-4 pl-4 text-base text-gray-600">
|
||||
<li>
|
||||
<ul className="list-disc list-outside pl-6 space-y-1 leading-relaxed">
|
||||
<li>대만은 풍부한 강수량에도, 지형적 특성으로 인해 수자원 확보에 어려움을 겪고 있으며, 대만 남부지역의 경우 우기와 건기 사이의 강수량 차이가 큼</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<ul className="list-disc list-outside pl-6 space-y-1 leading-relaxed">
|
||||
<li>대만은 최근 심각한 가뭄이 여러 해에 걸쳐서 발생하고 있으며, 강수량 감소와 함께 대만 정부 주도하에 반도체 산업을 국가 핵심 산업으로 선정하고 반도체 산업 육성 계획을 세움. 그 결과, 2023년 파운드리 시장의 68.3%를 차지하는 반도체 강국으로 성장했으며 이로 인한 공업용수 수요가 크게 증가</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<ul className="list-disc list-outside pl-6 space-y-1 leading-relaxed">
|
||||
<li>반도체 산업은 물 소비가 많아, 안정적인 용수공급이 매우 중요한데 현재 19개의 반도체 공장이 물이 부족한 대만 남부지역에 위치함. 2021년 가뭄 발생 당시, 산업단지 기업들도 용수 공급에 어려움을 겪음. 이는 대만 남부 지역의 물 부족, 물 분배 등에 대한 문제를 야기함</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<ul className="list-disc list-outside pl-6 space-y-1 leading-relaxed">
|
||||
<li>대만 정부는 산업단지 기업들에게 2023년부터 물에 대한 추가요금 부과를 시작했으며, 농업용수에 대해서는 강력한 억제정책을 시행함. 안정적인 용수 공급을 위해서 정부와 기업에서 자체적으로 재이용수 시설에 대한 투자가 이루어지고 있음.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<ul className="list-disc list-outside pl-6 space-y-1 leading-relaxed">
|
||||
<li>대만은 2004년 기후변화로 인한 물 부족 상황을 해결하기 위해 수자원 보호 전략을 승인하고, 2015년 대만 환경부는 재생 수자원 개발법을 발표, 2022년에는 한 차례 개정</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<ul className="list-disc list-outside pl-6 space-y-1 leading-relaxed">
|
||||
<li>대만은 물 소비량이 많은 산업(high water consuming industries)과 하수처리장(municipal wastewater treatment plants), 두 곳을 재이용수의 주요 공급원으로 계획</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,232 @@
|
||||
"use client";
|
||||
|
||||
import SubPageHeader from "@/components/SubPageHeader";
|
||||
|
||||
function SectionTitle({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="h-10 w-[4px] bg-sky-500" />
|
||||
<h3 className="text-[38px] font-bold leading-none text-neutral-900">
|
||||
{children}
|
||||
</h3>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function BlockTitle({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="inline-block h-[14px] w-[24px] rounded-full bg-gradient-to-r from-sky-300 to-lime-300" />
|
||||
<h4 className="text-[28px] font-bold text-[#2B2B2B]">{children}</h4>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Hr({ className = "" }: { className?: string }) {
|
||||
return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
|
||||
}
|
||||
|
||||
type SupplyRow = {
|
||||
facility: string;
|
||||
usage: string;
|
||||
amount: string;
|
||||
};
|
||||
|
||||
function SupplyTable({ rows }: { rows: SupplyRow[] }) {
|
||||
return (
|
||||
<div className="mt-8 overflow-x-auto">
|
||||
<table className="w-full min-w-[860px] border border-[#D8DDE3] text-center">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="border border-[#D8DDE3] bg-[#14A9D9] px-4 py-5 text-[24px] font-bold text-white">
|
||||
시설명
|
||||
</th>
|
||||
<th className="border border-[#D8DDE3] bg-[#40B5A5] px-4 py-5 text-[24px] font-bold text-white">
|
||||
이용용도
|
||||
</th>
|
||||
<th className="border border-[#D8DDE3] bg-[#73BF4B] px-4 py-5 text-[24px] font-bold text-white">
|
||||
공급량(㎥)
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{rows.map((row, index) => (
|
||||
<tr key={`${row.facility}-${index}`}>
|
||||
<td className="border border-[#D8DDE3] bg-white px-4 py-4 text-[22px] text-[#4F4F4F]">
|
||||
{row.facility}
|
||||
</td>
|
||||
<td className="border border-[#D8DDE3] bg-white px-4 py-4 text-[22px] text-[#4F4F4F]">
|
||||
{row.usage}
|
||||
</td>
|
||||
<td className="border border-[#D8DDE3] bg-white px-4 py-4 text-[22px] text-[#4F4F4F]">
|
||||
{row.amount}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function InfoList({
|
||||
projectName,
|
||||
purpose,
|
||||
totalCost,
|
||||
treatment,
|
||||
}: {
|
||||
projectName: string;
|
||||
purpose: string;
|
||||
totalCost: string;
|
||||
treatment: string;
|
||||
}) {
|
||||
return (
|
||||
<div className="mt-10 space-y-10">
|
||||
<div>
|
||||
<BlockTitle>사업명</BlockTitle>
|
||||
<ul className="mt-4 list-disc pl-8 text-[22px] leading-[1.8] text-[#4F4F4F]">
|
||||
<li>{projectName}</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<BlockTitle>사업목적</BlockTitle>
|
||||
<ul className="mt-4 list-disc pl-8 text-[22px] leading-[1.8] text-[#4F4F4F]">
|
||||
<li>{purpose}</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<BlockTitle>사업 주요 내용</BlockTitle>
|
||||
<ul className="mt-4 list-disc pl-8 text-[22px] leading-[1.8] text-[#4F4F4F]">
|
||||
<li>총사업비 : {totalCost}</li>
|
||||
<li>처리공법 : {treatment}</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<BlockTitle>사업량</BlockTitle>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function GreywaterPage() {
|
||||
return (
|
||||
<div className="bg-white">
|
||||
<SubPageHeader
|
||||
title="중수 재이용 사례"
|
||||
crumbs={[
|
||||
{ label: "Home", href: "/reuse" },
|
||||
{ label: "물 재이용 사례" },
|
||||
{ label: "중수 재이용 사례" },
|
||||
]}
|
||||
hideFooterLine
|
||||
hideGuideText
|
||||
wrapClassName="!pb-0"
|
||||
/>
|
||||
|
||||
<Hr className="my-7" />
|
||||
|
||||
{/* 안산시 */}
|
||||
<section id="ansan" className="scroll-mt-[120px]">
|
||||
<SectionTitle>경기도 안산시</SectionTitle>
|
||||
|
||||
<InfoList
|
||||
projectName="안산시 중수도 설치사업"
|
||||
purpose="수자원을 효율적으로 활용하여 지속가능성 도모 및 물 절약 실현"
|
||||
totalCost="81억원"
|
||||
treatment="MBR공법"
|
||||
/>
|
||||
|
||||
<SupplyTable
|
||||
rows={[
|
||||
{
|
||||
facility: "경기테크노파크",
|
||||
usage: "청소·화장실용수",
|
||||
amount: "40㎥/일",
|
||||
},
|
||||
{
|
||||
facility: "올림픽수영장",
|
||||
usage: "청소·화장실/세척·살수용수",
|
||||
amount: "35㎥/일",
|
||||
},
|
||||
{
|
||||
facility: "와스타디움",
|
||||
usage: "청소·화장실/조경용수",
|
||||
amount: "90㎥/일",
|
||||
},
|
||||
{
|
||||
facility: "호수실내수영장",
|
||||
usage: "청소·화장실/조경/세척·살수용수",
|
||||
amount: "50㎥/일",
|
||||
},
|
||||
{
|
||||
facility: "한양대학교 에리카캠퍼스",
|
||||
usage: "청소·화장실용수",
|
||||
amount: "370㎥/일",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</section>
|
||||
|
||||
<Hr className="my-20" />
|
||||
|
||||
{/* 용인시 */}
|
||||
<section id="yongin" className="scroll-mt-[120px]">
|
||||
<SectionTitle>경기도 용인시</SectionTitle>
|
||||
|
||||
<InfoList
|
||||
projectName="용인시 중수도 설치사업"
|
||||
purpose="물 부족 등의 비상상황에 대한 대비, 하수라도 사용할 집결 등 수자원의 효율적 활용"
|
||||
totalCost="40억원"
|
||||
treatment="MBR공법"
|
||||
/>
|
||||
|
||||
<SupplyTable
|
||||
rows={[
|
||||
{
|
||||
facility: "여성회관",
|
||||
usage: "청소·화장실용수",
|
||||
amount: "35㎥/일",
|
||||
},
|
||||
{
|
||||
facility: "수지아르피아",
|
||||
usage: "청소·화장실용수",
|
||||
amount: "35㎥/일",
|
||||
},
|
||||
{
|
||||
facility: "지상작전사령부",
|
||||
usage: "청소·화장실/조경/세척·살수용수",
|
||||
amount: "53㎥/일",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</section>
|
||||
|
||||
<Hr className="my-20" />
|
||||
|
||||
{/* 평택시 */}
|
||||
<section id="pyeongtaek" className="scroll-mt-[120px] pb-[200px]">
|
||||
<SectionTitle>경기도 평택시</SectionTitle>
|
||||
|
||||
<InfoList
|
||||
projectName="평택시 중수도 설치사업"
|
||||
purpose="수자원을 효율적으로 활용하여 지속가능성 도모 및 물 절약 실현"
|
||||
totalCost="21억원"
|
||||
treatment="MBR공법"
|
||||
/>
|
||||
|
||||
<SupplyTable
|
||||
rows={[
|
||||
{
|
||||
facility: "평택대학교",
|
||||
usage: "청소·화장실용수",
|
||||
amount: "50㎥/일",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -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 (
|
||||
<div className="flex gap-0">
|
||||
<div className="relative">
|
||||
<Lnb />
|
||||
<main className="flex-1 px-[100px] pt-[80px]">{children}</main>
|
||||
<div className="flex max-w-[1400px] gap-[56px] pl-[60px] py-[80px]">
|
||||
<main className="min-w-0 flex-1">
|
||||
{children}
|
||||
</main>
|
||||
|
||||
{/* 우측 메뉴 영역 */}
|
||||
<BusinessSubNav />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -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 (
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="h-5 w-[3px] bg-sky-500" />
|
||||
<h3 className="text-2xl font-bold text-neutral-900">{children}</h3>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Hr({ className = "" }: { className?: string }) {
|
||||
return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
|
||||
}
|
||||
|
||||
export default function RainPage() {
|
||||
return (
|
||||
<div className="relative bg-white">
|
||||
{/* ✅ 추가 */}
|
||||
<BusinessSubNav />
|
||||
|
||||
<SubPageHeader
|
||||
title="빗물 재이용 사례"
|
||||
crumbs={[
|
||||
{ label: "Home", href: "/main" },
|
||||
{ label: "물 재이용 사례", href: "/example/rain" },
|
||||
{ label: "빗물 재이용 사례" },
|
||||
]}
|
||||
hideFooterLine
|
||||
hideGuideText
|
||||
wrapClassName="!pb-0"
|
||||
/>
|
||||
|
||||
<Hr className="my-7" />
|
||||
|
||||
<section id="suwon" className="scroll-mt-[120px]">
|
||||
<SectionTitle>경기도 수원시</SectionTitle>
|
||||
|
||||
<CaseImageSlider
|
||||
className="mt-8"
|
||||
maxWidthClassName="max-w-[760px]"
|
||||
slides={[
|
||||
{ src: "/images/landing/business/rain/rain_01.png", alt: "수원시 사례 1" },
|
||||
{ src: "/images/landing/business/rain/rain_02.png", alt: "수원시 사례 2" },
|
||||
]}
|
||||
/>
|
||||
</section>
|
||||
|
||||
<Hr className="my-16" />
|
||||
|
||||
<section id="jeju" className="scroll-mt-[120px] pb-[120px]">
|
||||
<SectionTitle>제주특별자치도</SectionTitle>
|
||||
|
||||
<CaseImageSlider
|
||||
className="mt-8"
|
||||
maxWidthClassName="max-w-[760px]"
|
||||
slides={[
|
||||
{ src: "/images/landing/business/rain/jeju_01.png", alt: "제주 사례 1" },
|
||||
{ src: "/images/landing/business/rain/jeju_02.png", alt: "제주 사례 2" },
|
||||
]}
|
||||
/>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -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 (
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="h-5 w-[3px] bg-sky-500" />
|
||||
<h3 className="text-2xl font-bold text-neutral-900">{children}</h3>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
type HrProps = {
|
||||
className?: string;
|
||||
};
|
||||
|
||||
function Hr({ className = "" }: HrProps) {
|
||||
return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
|
||||
}
|
||||
|
||||
// type ImgCardProps = {
|
||||
// src: string;
|
||||
// alt: string;
|
||||
// };
|
||||
|
||||
// function ImgCard({ src, alt }: ImgCardProps) {
|
||||
// return (
|
||||
// <div className="w-full overflow-x-auto">
|
||||
// <img
|
||||
// src={src}
|
||||
// alt={alt}
|
||||
// className="block mx-auto max-w-none"
|
||||
// />
|
||||
// </div>
|
||||
// );
|
||||
// }
|
||||
|
||||
export default function GreywaterPage() {
|
||||
return (
|
||||
<div className="bg-white">
|
||||
<SubPageHeader
|
||||
title="경기도 수원시 빗물이용과 중수도"
|
||||
crumbs={[
|
||||
{ label: "Home", href: "/reuse" },
|
||||
{ label: "물 재이용 사례" },
|
||||
{ label: "빗물 재이용 사례" },
|
||||
{ label: "수원시", href: "/reuse/business/rain/suwon" },
|
||||
]}
|
||||
hideFooterLine
|
||||
hideGuideText
|
||||
wrapClassName="!pb-0"
|
||||
/>
|
||||
|
||||
<Hr className="my-7" />
|
||||
|
||||
{/* 슬라이드 이미지 영역 */}
|
||||
<CaseImageSlider
|
||||
className="mt-8"
|
||||
maxWidthClassName="max-w-[760px]"
|
||||
slides={[
|
||||
{ src: "/images/landing/business/rain/rain_01.png", alt: "수원시 하수 재이용 1" },
|
||||
{ src: "/images/landing/business/rain/rain_02.png", alt: "수원시 하수 재이용 2" },
|
||||
{ src: "/images/landing/business/rain/rain_03.png", alt: "수원시 하수 재이용 3" },
|
||||
{ src: "/images/landing/business/rain/rain_04.png", alt: "수원시 하수 재이용 4" },
|
||||
]}
|
||||
/>
|
||||
|
||||
{/* 사업명 */}
|
||||
<section className="mt-6">
|
||||
<SectionTitle>사업명</SectionTitle>
|
||||
<p className="mt-8 text-base text-gray-600">
|
||||
경기도 수원시 빗물이용과 중수도
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<Hr className="my-11" />
|
||||
|
||||
{/* 사업 방식 */}
|
||||
<section className="pb-[200px]">
|
||||
<SectionTitle>사업 방식</SectionTitle>
|
||||
<p className="mt-8 text-base text-gray-600">
|
||||
(빗물) 월드컵경기장 등 4개소에 노면 빗물분사시스템 및 빗물 공급기를 설치하여 혹서기 도시 열섬효과 및 도로 비산먼지 저감<br/>
|
||||
※ 시설 가동중 도로 노면 온도의 7.2 ~ 26.3℃ 감소 효과 확인(‘21.7월, 수원시청).<br/>
|
||||
다만, 가뭄기나 강우량이 적을 경우 빗물을 원활히 공급하기 다소 곤란<br/><br/>
|
||||
- (중수도) 수원시청, 장안구청, 월드컵경기장에 빗물 연계 중수도를 화장실·조경용수 등으로 사용하여 수도요금 절감(연 7백~30백만원)
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -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 (
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="h-5 w-[3px] bg-sky-500" />
|
||||
<h3 className="text-2xl font-bold text-neutral-900">{children}</h3>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
type HrProps = {
|
||||
className?: string;
|
||||
};
|
||||
|
||||
function Hr({ className = "" }: HrProps) {
|
||||
return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
|
||||
}
|
||||
|
||||
// type ImgCardProps = {
|
||||
// src: string;
|
||||
// alt: string;
|
||||
// };
|
||||
|
||||
// function ImgCard({ src, alt }: ImgCardProps) {
|
||||
// return (
|
||||
// <div className="w-full overflow-x-auto">
|
||||
// <img
|
||||
// src={src}
|
||||
// alt={alt}
|
||||
// className="block mx-auto max-w-none"
|
||||
// />
|
||||
// </div>
|
||||
// );
|
||||
// }
|
||||
|
||||
export default function GreywaterPage() {
|
||||
return (
|
||||
<div className="bg-white">
|
||||
<SubPageHeader
|
||||
title="충남보령 하수 재이용"
|
||||
crumbs={[
|
||||
{ label: "Home", href: "/reuse" },
|
||||
{ label: "물 재이용 사례" },
|
||||
{ label: "하수 재이용 사례" },
|
||||
{ label: "충청남도 보령시", href: "/reuse/business/sewage/bolyeong" },
|
||||
]}
|
||||
hideFooterLine
|
||||
hideGuideText
|
||||
wrapClassName="!pb-0"
|
||||
/>
|
||||
|
||||
<Hr className="my-7" />
|
||||
|
||||
{/* 슬라이드 이미지 영역 */}
|
||||
<CaseImageSlider
|
||||
className="mt-8"
|
||||
maxWidthClassName="max-w-[760px]"
|
||||
slides={[
|
||||
{ src: "/images/landing/business/sewage/bolyeong_01.png", alt: "보령시 하수 재이용 1" },
|
||||
]}
|
||||
/>
|
||||
|
||||
{/* 사업명 */}
|
||||
<section className="mt-6">
|
||||
<SectionTitle>사업명</SectionTitle>
|
||||
<p className="mt-8 text-base text-gray-600">
|
||||
충남 보령 하수재이용<br/>
|
||||
: 보령·신보령화력발전소에 하루 1만톤의 탈황용수 공급을 위해 보령하수처리시설의 하수처리수 재이용 사업 추진
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<Hr className="my-11" />
|
||||
|
||||
{/* 사업 방식 */}
|
||||
<section className="mt-6">
|
||||
<SectionTitle>사업 방식</SectionTitle>
|
||||
<p className="mt-8 text-base text-gray-600">
|
||||
2017년 한국환경공단과 사업대행 위 · 수탁 협약 체결
|
||||
</p>
|
||||
</section>
|
||||
|
||||
{/* 사업 주요 내용 */}
|
||||
<section className="mt-6">
|
||||
<SectionTitle>사업 주요 내용</SectionTitle>
|
||||
<p className="mt-8 text-base text-gray-600">
|
||||
처리공정 : 전처리 UF + 후처리 RO<br/>
|
||||
시설용량 : 1만m³/일<br/>
|
||||
관로 : 8.7km<br/>
|
||||
사업비 : 315억원<br/>
|
||||
위치: 충청남도 보령시 대청방조제로 322 일원
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<Hr className="my-11" />
|
||||
|
||||
{/* 특이사항 */}
|
||||
<section className="pb-[200px]">
|
||||
<SectionTitle>특이사항</SectionTitle>
|
||||
<p className="mt-8 text-base text-gray-600">
|
||||
국내 유일 하수재이용 공업용수 공급 재정사업으로 2016년 충남 서부권 가뭄 시 지역사회 기여 차원에서 기관간 MOU(환경부, 충청남도, 보령시, 한국중부발전㈜)를 바탕으로 추진 되어 경제성보다 공익성을 바탕으로<br/>
|
||||
국가전력 기반시설의 안정적 운영 도모
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -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 (
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="h-5 w-[3px] bg-sky-500" />
|
||||
<h3 className="text-2xl font-bold text-neutral-900">{children}</h3>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
type HrProps = {
|
||||
className?: string;
|
||||
};
|
||||
|
||||
function Hr({ className = "" }: HrProps) {
|
||||
return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
|
||||
}
|
||||
|
||||
// type ImgCardProps = {
|
||||
// src: string;
|
||||
// alt: string;
|
||||
// };
|
||||
|
||||
// function ImgCard({ src, alt }: ImgCardProps) {
|
||||
// return (
|
||||
// <div className="w-full overflow-x-auto">
|
||||
// <img
|
||||
// src={src}
|
||||
// alt={alt}
|
||||
// className="block mx-auto max-w-none"
|
||||
// />
|
||||
// </div>
|
||||
// );
|
||||
// }
|
||||
|
||||
export default function GreywaterPage() {
|
||||
return (
|
||||
<div className="bg-white">
|
||||
<SubPageHeader
|
||||
title="청주시 하수 재이용 시설"
|
||||
crumbs={[
|
||||
{ label: "Home", href: "/reuse" },
|
||||
{ label: "물 재이용 사례" },
|
||||
{ label: "하수 재이용 사례" },
|
||||
{ label: "청주시", href: "/reuse/business/sewage/cheongju" },
|
||||
]}
|
||||
hideFooterLine
|
||||
hideGuideText
|
||||
wrapClassName="!pb-0"
|
||||
/>
|
||||
|
||||
<Hr className="my-7" />
|
||||
|
||||
{/* 슬라이드 이미지 영역 */}
|
||||
<CaseImageSlider
|
||||
className="mt-8"
|
||||
maxWidthClassName="max-w-[760px]"
|
||||
slides={[
|
||||
{ src: "/images/landing/business/sewage/cheongju_01.png", alt: "청주시 하수 재이용 1" },
|
||||
]}
|
||||
/>
|
||||
|
||||
{/* 사업명 */}
|
||||
<section className="mt-6">
|
||||
<SectionTitle>사업명</SectionTitle>
|
||||
<p className="mt-8 text-base text-gray-600">
|
||||
청주시 하수 재이용 시설
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<Hr className="my-11" />
|
||||
|
||||
{/* 사업 주요 내용 */}
|
||||
<section className="pb-[200px]">
|
||||
<SectionTitle>사업 주요 내용</SectionTitle>
|
||||
<p className="mt-8 text-base text-gray-600">
|
||||
청주시 하수처리수 재이용 민간투자사업(BTO)<br/>
|
||||
공급량 : 35,000㎥/일<br/>
|
||||
공급관로 : 8.3㎞<br/>
|
||||
사업비 : 622억원<br/>
|
||||
수요처 : SK하이닉스 등 일반산업단지<br/>
|
||||
지역 (위치) : 충청북도 청주시 흥덕구 가락리 135-9번지 일원<br/>
|
||||
처리용량 : 35.000(m³/일)<br/>
|
||||
적용기술 : 분리막 (UF : 전처리), (RO : 주처리)
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -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 (
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="h-5 w-[3px] bg-sky-500" />
|
||||
<h3 className="text-2xl font-bold text-neutral-900">{children}</h3>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
type HrProps = {
|
||||
className?: string;
|
||||
};
|
||||
|
||||
function Hr({ className = "" }: HrProps) {
|
||||
return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
|
||||
}
|
||||
|
||||
// type ImgCardProps = {
|
||||
// src: string;
|
||||
// alt: string;
|
||||
// };
|
||||
|
||||
// function ImgCard({ src, alt }: ImgCardProps) {
|
||||
// return (
|
||||
// <div className="w-full overflow-x-auto">
|
||||
// <img
|
||||
// src={src}
|
||||
// alt={alt}
|
||||
// className="block mx-auto max-w-none"
|
||||
// />
|
||||
// </div>
|
||||
// );
|
||||
// }
|
||||
|
||||
export default function GreywaterPage() {
|
||||
return (
|
||||
<div className="bg-white">
|
||||
<SubPageHeader
|
||||
title="구리시 도로자동청소시스템"
|
||||
crumbs={[
|
||||
{ label: "Home", href: "/reuse" },
|
||||
{ label: "물 재이용 사례" },
|
||||
{ label: "하수 재이용 사례" },
|
||||
{ label: "구리시", href: "/reuse/business/sewage/guri" },
|
||||
]}
|
||||
hideFooterLine
|
||||
hideGuideText
|
||||
wrapClassName="!pb-0"
|
||||
/>
|
||||
|
||||
<Hr className="my-7" />
|
||||
|
||||
{/* 슬라이드 이미지 영역 */}
|
||||
<CaseImageSlider
|
||||
className="mt-8"
|
||||
maxWidthClassName="max-w-[760px]"
|
||||
slides={[
|
||||
{ src: "/images/landing/business/sewage/guri_01.png", alt: "구리시 도로자동청소시스템 1" },
|
||||
{ src: "/images/landing/business/sewage/guri_02.png", alt: "구리시 도로자동청소시스템 2" },
|
||||
]}
|
||||
/>
|
||||
|
||||
{/* 사업명 */}
|
||||
<section className="mt-6">
|
||||
<SectionTitle>사업명</SectionTitle>
|
||||
<p className="mt-8 text-base text-gray-600">
|
||||
구리시 도로자동청소시스템 설치사업
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<Hr className="my-11" />
|
||||
|
||||
{/* 사업목적 */}
|
||||
<section className="mt-6">
|
||||
<SectionTitle>사업목적</SectionTitle>
|
||||
<p className="mt-8 text-base text-gray-600">
|
||||
고농도 미세먼지 발생 및 폭염의 급증에 따라 공공하수처리시설 발생 재이용수 일부를 도로자동청소시스템에 활용하여 미세먼지 저감 및 폭염 취약성 완화
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<Hr className="my-11" />
|
||||
|
||||
{/* 사업 주요 내용 */}
|
||||
<section className="mt-6">
|
||||
<SectionTitle>사업 주요 내용</SectionTitle>
|
||||
<p className="mt-8 text-base text-gray-600">
|
||||
총사업비 : 61억원<br/>
|
||||
위 치 : 구리시 경춘로 및 갈매중앙로 일대 등<br/>
|
||||
관 로 : 5.8km<br/>
|
||||
공급계획<br/>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<Hr className="my-11" />
|
||||
|
||||
{/* 공급계획 */}
|
||||
<section className="pb-[200px]">
|
||||
<SectionTitle>공급계획</SectionTitle>
|
||||
{/* 데이터 테이블 */}
|
||||
<div className="overflow-x-auto mt-8">
|
||||
<table className="w-full border border-[#E3E7EA] text-center">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="bg-[#01ACE5] text-white font-semibold py-4 border border-gray-300">
|
||||
시설명
|
||||
</th>
|
||||
<th className="bg-[#33B5C8] text-white font-semibold py-4 border border-gray-300">
|
||||
재이용수 용도
|
||||
</th>
|
||||
<th className="bg-[#55BCA2] text-white font-semibold py-4 border border-gray-300">
|
||||
공급량(㎥/일)
|
||||
</th>
|
||||
<th className="bg-[#6DBB4F] text-white font-semibold py-4 border border-gray-300">
|
||||
원수
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td
|
||||
className="bg-white py-6 border border-gray-300 text-gray-700"
|
||||
>
|
||||
도로자동청소시스템
|
||||
</td>
|
||||
<td className="bg-white py-6 border border-gray-300 text-gray-700">
|
||||
세척살수용수
|
||||
</td>
|
||||
<td className="bg-white py-6 border border-gray-300 text-gray-700">
|
||||
178
|
||||
</td>
|
||||
<td className="bg-white py-6 border border-gray-300 text-gray-700">
|
||||
구리 공공하수처리장 재이용수
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -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 (
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="h-5 w-[3px] bg-sky-500" />
|
||||
<h3 className="text-2xl font-bold text-neutral-900">{children}</h3>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
type HrProps = {
|
||||
className?: string;
|
||||
};
|
||||
|
||||
function Hr({ className = "" }: HrProps) {
|
||||
return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
|
||||
}
|
||||
|
||||
// type ImgCardProps = {
|
||||
// src: string;
|
||||
// alt: string;
|
||||
// };
|
||||
|
||||
// function ImgCard({ src, alt }: ImgCardProps) {
|
||||
// return (
|
||||
// <div className="w-full overflow-x-auto">
|
||||
// <img
|
||||
// src={src}
|
||||
// alt={alt}
|
||||
// className="block mx-auto max-w-none"
|
||||
// />
|
||||
// </div>
|
||||
// );
|
||||
// }
|
||||
|
||||
export default function GreywaterPage() {
|
||||
return (
|
||||
<div className="bg-white">
|
||||
<SubPageHeader
|
||||
title="수원시 황구지천 하천유지용수"
|
||||
crumbs={[
|
||||
{ label: "Home", href: "/reuse" },
|
||||
{ label: "물 재이용 사례" },
|
||||
{ label: "하수 재이용 사례" },
|
||||
{ label: "수원시 황구지천", href: "/reuse/business/sewage/hwanggu" },
|
||||
]}
|
||||
hideFooterLine
|
||||
hideGuideText
|
||||
wrapClassName="!pb-0"
|
||||
/>
|
||||
|
||||
<Hr className="my-7" />
|
||||
|
||||
{/* 슬라이드 이미지 영역 */}
|
||||
<CaseImageSlider
|
||||
className="mt-8"
|
||||
maxWidthClassName="max-w-[760px]"
|
||||
slides={[
|
||||
{ src: "/images/landing/business/sewage/hwanggu_01.png", alt: "수원시 황구지천 하수 재이용 1" },
|
||||
{ src: "/images/landing/business/sewage/hwanggu_02.png", alt: "수원시 황구지천 하수 재이용 2" },
|
||||
{ src: "/images/landing/business/sewage/hwanggu_03.png", alt: "수원시 황구지천 하수 재이용 3" },
|
||||
]}
|
||||
/>
|
||||
|
||||
{/* 사업명 */}
|
||||
<section className="mt-6">
|
||||
<SectionTitle>사업명</SectionTitle>
|
||||
<p className="mt-8 text-base text-gray-600">
|
||||
수원시 황수원시 황구지천 하수처리수 재이용사업
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<Hr className="my-11" />
|
||||
|
||||
{/* 사업목적 */}
|
||||
<section className="mt-6">
|
||||
<SectionTitle>사업목적</SectionTitle>
|
||||
<p className="mt-8 text-base text-gray-600">
|
||||
황구지천 공공하수처리시설 하수처리수 재이용사업으로 향후 호매실천 및 금곡천 건천화 방지로 주민들에게 친수 공간 제공 및 하천 생태계 보전
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<Hr className="my-11" />
|
||||
|
||||
{/* 사업 주요 내용 */}
|
||||
<section className="mt-6">
|
||||
<SectionTitle>사업 주요 내용</SectionTitle>
|
||||
<p className="mt-8 text-base text-gray-600">
|
||||
총사업비 : 110억원<br/>
|
||||
위 치 : 수원시 권선구 호매실천, 금곡천<br/>
|
||||
관 로 : 3.9km<br/>
|
||||
공 급 량 : 25,000㎥/일(하수처리시설 용량: 45,000㎥/일)<br/>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<Hr className="my-11" />
|
||||
|
||||
{/* 공급계획 */}
|
||||
<section className="pb-[200px]">
|
||||
<SectionTitle>공급계획</SectionTitle>
|
||||
{/* 데이터 테이블 */}
|
||||
<div className="overflow-x-auto mt-8">
|
||||
<table className="w-full border border-[#E3E7EA] text-center">
|
||||
<thead>
|
||||
<tr>
|
||||
{/* 구분 */}
|
||||
<th className="w-1/4 bg-[#E3E7EA] text-black font-semibold py-4 border border-gray-300">
|
||||
구분
|
||||
</th>
|
||||
|
||||
{/* 공급량 */}
|
||||
<th className="w-2/4 bg-[#1FA3C6] text-white font-semibold py-4 border border-gray-300">
|
||||
공급량
|
||||
</th>
|
||||
|
||||
{/* 비고 */}
|
||||
<th className="w-2/4 bg-[#72B84F] text-white font-semibold py-4 border border-gray-300">
|
||||
비고
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
{/* 좌측 병합 */}
|
||||
<td
|
||||
rowSpan={3}
|
||||
className="bg-white font-medium text-gray-700 border border-gray-300"
|
||||
>
|
||||
하천 등 유지용수
|
||||
</td>
|
||||
|
||||
<td className="bg-white py-6 border border-gray-300 text-gray-700 text-lg font-medium">
|
||||
12,500m³/일
|
||||
</td>
|
||||
|
||||
<td className="bg-white py-6 border border-gray-300 text-gray-700">
|
||||
호매실천 공급
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td className="bg-white py-6 border border-gray-300 text-gray-700 text-lg font-medium">
|
||||
6,250m³/일
|
||||
</td>
|
||||
|
||||
<td className="bg-white py-6 border border-gray-300 text-gray-700">
|
||||
금곡천1 공급
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td className="bg-white py-6 border border-gray-300 text-gray-700 text-lg font-medium">
|
||||
6,250m³/일
|
||||
</td>
|
||||
|
||||
<td className="bg-white py-6 border border-gray-300 text-gray-700">
|
||||
금곡천2 공급
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,477 @@
|
||||
"use client";
|
||||
|
||||
import SubPageHeader from "@/components/SubPageHeader";
|
||||
import CaseImageSlider from "@/components/CaseImageSlider";
|
||||
|
||||
function SectionTitle({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="h-5 w-[3px] bg-sky-500" />
|
||||
<h3 className="text-2xl font-bold text-neutral-900">{children}</h3>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Hr({ className = "" }: { className?: string }) {
|
||||
return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
|
||||
}
|
||||
|
||||
export default function SewagePage() {
|
||||
return (
|
||||
<div className="bg-white">
|
||||
<SubPageHeader
|
||||
title="하수 재이용 사례"
|
||||
crumbs={[
|
||||
{ label: "Home", href: "/reuse" },
|
||||
{ label: "물 재이용 사례" },
|
||||
{ label: "하수 재이용 사례" },
|
||||
]}
|
||||
hideFooterLine
|
||||
hideGuideText
|
||||
wrapClassName="!pb-0"
|
||||
/>
|
||||
|
||||
<Hr className="my-7" />
|
||||
|
||||
{/* 보령 */}
|
||||
<section id="bolyeong" className="scroll-mt-[120px]">
|
||||
<SectionTitle>충청남도 보령시</SectionTitle>
|
||||
|
||||
<CaseImageSlider
|
||||
className="mt-8"
|
||||
maxWidthClassName="max-w-[760px]"
|
||||
slides={[
|
||||
{
|
||||
src: "/images/landing/business/sewage/bolyeong_01.png",
|
||||
alt: "보령시 하수 재이용 1",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
<section className="mt-6">
|
||||
<SectionTitle>사업명</SectionTitle>
|
||||
<p className="mt-8 text-base text-gray-600">
|
||||
충남 보령 하수재이용
|
||||
<br />: 보령·신보령화력발전소에 하루 1만톤의 탈황용수 공급을 위해
|
||||
보령하수처리시설의 하수처리수 재이용 사업 추진
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<Hr className="my-11" />
|
||||
|
||||
<section className="mt-6">
|
||||
<SectionTitle>사업 방식</SectionTitle>
|
||||
<p className="mt-8 text-base text-gray-600">
|
||||
2017년 한국환경공단과 사업대행 위 · 수탁 협약 체결
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className="mt-6">
|
||||
<SectionTitle>사업 주요 내용</SectionTitle>
|
||||
<p className="mt-8 text-base text-gray-600">
|
||||
처리공정 : 전처리 UF + 후처리 RO
|
||||
<br />
|
||||
시설용량 : 1만m³/일
|
||||
<br />
|
||||
관로 : 8.7km
|
||||
<br />
|
||||
사업비 : 315억원
|
||||
<br />
|
||||
위치: 충청남도 보령시 대청방조제로 322 일원
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<Hr className="my-11" />
|
||||
|
||||
<section>
|
||||
<SectionTitle>특이사항</SectionTitle>
|
||||
<p className="mt-8 text-base text-gray-600">
|
||||
국내 유일 하수재이용 공업용수 공급 재정사업으로 2016년 충남 서부권
|
||||
가뭄 시 지역사회 기여 차원에서 기관간 MOU(환경부, 충청남도, 보령시,
|
||||
한국중부발전㈜)를 바탕으로 추진 되어 경제성보다 공익성을 바탕으로
|
||||
<br />
|
||||
국가전력 기반시설의 안정적 운영 도모
|
||||
</p>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<Hr className="my-16" />
|
||||
|
||||
{/* 청주 */}
|
||||
<section id="cheongju" className="scroll-mt-[120px]">
|
||||
<SectionTitle>청주시</SectionTitle>
|
||||
|
||||
<CaseImageSlider
|
||||
className="mt-8"
|
||||
maxWidthClassName="max-w-[760px]"
|
||||
slides={[
|
||||
{
|
||||
src: "/images/landing/business/sewage/cheongju_01.png",
|
||||
alt: "청주시 하수 재이용 1",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
<section className="mt-6">
|
||||
<SectionTitle>사업명</SectionTitle>
|
||||
<p className="mt-8 text-base text-gray-600">
|
||||
청주시 하수 재이용 시설
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<Hr className="my-11" />
|
||||
|
||||
<section>
|
||||
<SectionTitle>사업 주요 내용</SectionTitle>
|
||||
<p className="mt-8 text-base text-gray-600">
|
||||
청주시 하수처리수 재이용 민간투자사업(BTO)
|
||||
<br />
|
||||
공급량 : 35,000㎥/일
|
||||
<br />
|
||||
공급관로 : 8.3㎞
|
||||
<br />
|
||||
사업비 : 622억원
|
||||
<br />
|
||||
수요처 : SK하이닉스 등 일반산업단지
|
||||
<br />
|
||||
지역 (위치) : 충청북도 청주시 흥덕구 가락리 135-9번지 일원
|
||||
<br />
|
||||
처리용량 : 35.000(m³/일)
|
||||
<br />
|
||||
적용기술 : 분리막 (UF : 전처리), (RO : 주처리)
|
||||
</p>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<Hr className="my-16" />
|
||||
|
||||
{/* 구리 */}
|
||||
<section id="guri" className="scroll-mt-[120px]">
|
||||
<SectionTitle>구리시 도로자동청소시스템</SectionTitle>
|
||||
|
||||
<CaseImageSlider
|
||||
className="mt-8"
|
||||
maxWidthClassName="max-w-[760px]"
|
||||
slides={[
|
||||
{
|
||||
src: "/images/landing/business/sewage/guri_01.png",
|
||||
alt: "구리시 도로자동청소시스템 1",
|
||||
},
|
||||
{
|
||||
src: "/images/landing/business/sewage/guri_02.png",
|
||||
alt: "구리시 도로자동청소시스템 2",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
<section className="mt-6">
|
||||
<SectionTitle>사업명</SectionTitle>
|
||||
<p className="mt-8 text-base text-gray-600">
|
||||
구리시 도로자동청소시스템 설치사업
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<Hr className="my-11" />
|
||||
|
||||
<section className="mt-6">
|
||||
<SectionTitle>사업목적</SectionTitle>
|
||||
<p className="mt-8 text-base text-gray-600">
|
||||
고농도 미세먼지 발생 및 폭염의 급증에 따라 공공하수처리시설 발생
|
||||
재이용수 일부를 도로자동청소시스템에 활용하여 미세먼지 저감 및 폭염
|
||||
취약성 완화
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<Hr className="my-11" />
|
||||
|
||||
<section className="mt-6">
|
||||
<SectionTitle>사업 주요 내용</SectionTitle>
|
||||
<p className="mt-8 text-base text-gray-600">
|
||||
총사업비 : 61억원
|
||||
<br />
|
||||
위 치 : 구리시 경춘로 및 갈매중앙로 일대 등
|
||||
<br />
|
||||
관 로 : 5.8km
|
||||
<br />
|
||||
공급계획
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<Hr className="my-11" />
|
||||
|
||||
<section>
|
||||
<SectionTitle>공급계획</SectionTitle>
|
||||
<div className="mt-8 overflow-x-auto">
|
||||
<table className="w-full border border-[#E3E7EA] text-center">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="border border-gray-300 bg-[#01ACE5] py-4 font-semibold text-white">
|
||||
시설명
|
||||
</th>
|
||||
<th className="border border-gray-300 bg-[#33B5C8] py-4 font-semibold text-white">
|
||||
재이용수 용도
|
||||
</th>
|
||||
<th className="border border-gray-300 bg-[#55BCA2] py-4 font-semibold text-white">
|
||||
공급량(㎥/일)
|
||||
</th>
|
||||
<th className="border border-gray-300 bg-[#6DBB4F] py-4 font-semibold text-white">
|
||||
원수
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="border border-gray-300 bg-white py-6 text-gray-700">
|
||||
도로자동청소시스템
|
||||
</td>
|
||||
<td className="border border-gray-300 bg-white py-6 text-gray-700">
|
||||
세척살수용수
|
||||
</td>
|
||||
<td className="border border-gray-300 bg-white py-6 text-gray-700">
|
||||
178
|
||||
</td>
|
||||
<td className="border border-gray-300 bg-white py-6 text-gray-700">
|
||||
구리 공공하수처리장 재이용수
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<Hr className="my-16" />
|
||||
|
||||
{/* 황구지천 */}
|
||||
<section id="hwanggu" className="scroll-mt-[120px]">
|
||||
<SectionTitle>수원시 황구지천</SectionTitle>
|
||||
|
||||
<CaseImageSlider
|
||||
className="mt-8"
|
||||
maxWidthClassName="max-w-[760px]"
|
||||
slides={[
|
||||
{
|
||||
src: "/images/landing/business/sewage/hwanggu_01.png",
|
||||
alt: "수원시 황구지천 하수 재이용 1",
|
||||
},
|
||||
{
|
||||
src: "/images/landing/business/sewage/hwanggu_02.png",
|
||||
alt: "수원시 황구지천 하수 재이용 2",
|
||||
},
|
||||
{
|
||||
src: "/images/landing/business/sewage/hwanggu_03.png",
|
||||
alt: "수원시 황구지천 하수 재이용 3",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
<section className="mt-6">
|
||||
<SectionTitle>사업명</SectionTitle>
|
||||
<p className="mt-8 text-base text-gray-600">
|
||||
수원시 황수원시 황구지천 하수처리수 재이용사업
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<Hr className="my-11" />
|
||||
|
||||
<section className="mt-6">
|
||||
<SectionTitle>사업목적</SectionTitle>
|
||||
<p className="mt-8 text-base text-gray-600">
|
||||
황구지천 공공하수처리시설 하수처리수 재이용사업으로 향후 호매실천 및
|
||||
금곡천 건천화 방지로 주민들에게 친수 공간 제공 및 하천 생태계 보전
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<Hr className="my-11" />
|
||||
|
||||
<section className="mt-6">
|
||||
<SectionTitle>사업 주요 내용</SectionTitle>
|
||||
<p className="mt-8 text-base text-gray-600">
|
||||
총사업비 : 110억원
|
||||
<br />
|
||||
위 치 : 수원시 권선구 호매실천, 금곡천
|
||||
<br />
|
||||
관 로 : 3.9km
|
||||
<br />
|
||||
공 급 량 : 25,000㎥/일(하수처리시설 용량: 45,000㎥/일)
|
||||
<br />
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<Hr className="my-11" />
|
||||
|
||||
<section>
|
||||
<SectionTitle>공급계획</SectionTitle>
|
||||
<div className="mt-8 overflow-x-auto">
|
||||
<table className="w-full border border-[#E3E7EA] text-center">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="w-1/4 border border-gray-300 bg-[#E3E7EA] py-4 font-semibold text-black">
|
||||
구분
|
||||
</th>
|
||||
<th className="w-2/4 border border-gray-300 bg-[#1FA3C6] py-4 font-semibold text-white">
|
||||
공급량
|
||||
</th>
|
||||
<th className="w-2/4 border border-gray-300 bg-[#72B84F] py-4 font-semibold text-white">
|
||||
비고
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td
|
||||
rowSpan={3}
|
||||
className="border border-gray-300 bg-white font-medium text-gray-700"
|
||||
>
|
||||
하천 등 유지용수
|
||||
</td>
|
||||
<td className="border border-gray-300 bg-white py-6 text-lg font-medium text-gray-700">
|
||||
12,500m³/일
|
||||
</td>
|
||||
<td className="border border-gray-300 bg-white py-6 text-gray-700">
|
||||
호매실천 공급
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="border border-gray-300 bg-white py-6 text-lg font-medium text-gray-700">
|
||||
6,250m³/일
|
||||
</td>
|
||||
<td className="border border-gray-300 bg-white py-6 text-gray-700">
|
||||
금곡천1 공급
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="border border-gray-300 bg-white py-6 text-lg font-medium text-gray-700">
|
||||
6,250m³/일
|
||||
</td>
|
||||
<td className="border border-gray-300 bg-white py-6 text-gray-700">
|
||||
금곡천2 공급
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<Hr className="my-16" />
|
||||
|
||||
{/* 파주 */}
|
||||
<section id="paju" className="scroll-mt-[120px]">
|
||||
<SectionTitle>파주시</SectionTitle>
|
||||
|
||||
<CaseImageSlider
|
||||
className="mt-8"
|
||||
maxWidthClassName="max-w-[760px]"
|
||||
slides={[
|
||||
{
|
||||
src: "/images/landing/business/sewage/paju_01.png",
|
||||
alt: "파주시 하수 재이용 1",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
<section className="mt-6">
|
||||
<SectionTitle>사업명</SectionTitle>
|
||||
<p className="mt-8 text-base text-gray-600">
|
||||
경기도 파주시 하수재이용
|
||||
<br />: 운정·금촌하수처리시설의 하수처리수를 막공법(U/F, R/O)으로
|
||||
재처리하여 파주 LCD 산업단지내 3개 업체*에 공업용수 공급
|
||||
<br />
|
||||
*LG디스플레이(P10공장), 희성전자, 엔비텍 등
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<Hr className="my-11" />
|
||||
|
||||
<section className="mt-6">
|
||||
<SectionTitle>사업 배경 및 목적</SectionTitle>
|
||||
<p className="mt-8 text-base text-gray-600">
|
||||
민간투자사업(시행사 : 파주그린허브(주), 운영사 : 테크로스)
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className="mt-6">
|
||||
<SectionTitle>사업 주요 내용</SectionTitle>
|
||||
<p className="mt-8 text-base text-gray-600">
|
||||
처리공정 : 전처리 UF + 후처리 RO
|
||||
<br />
|
||||
공급량 : 4만m³/일
|
||||
<br />
|
||||
관로 : 13.6km
|
||||
<br />
|
||||
사업비 : 651억원
|
||||
<br />
|
||||
위치 : 경기도 파주시 금촌동 714번지 일원
|
||||
<br />
|
||||
시설용량 : 41,20m³/일
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<Hr className="my-11" />
|
||||
|
||||
<section>
|
||||
<SectionTitle>특이사항</SectionTitle>
|
||||
<p className="mt-8 text-base text-gray-600">
|
||||
하수처리수 재이용시설 자체 농축폐수 처리공정 개발 및 적용 성공사례
|
||||
</p>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<Hr className="my-16" />
|
||||
|
||||
{/* 여수 */}
|
||||
<section id="yeosu" className="scroll-mt-[120px] pb-[200px]">
|
||||
<SectionTitle>여수시</SectionTitle>
|
||||
|
||||
<CaseImageSlider
|
||||
className="mt-8"
|
||||
maxWidthClassName="max-w-[760px]"
|
||||
slides={[
|
||||
{
|
||||
src: "/images/landing/business/sewage/yeosu_01.png",
|
||||
alt: "여수시 하수 재이용 1",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
<section className="mt-6">
|
||||
<SectionTitle>사업명</SectionTitle>
|
||||
<p className="mt-8 text-base text-gray-600">
|
||||
여수시 하수처리수 재이용 민간 투자사업(BTO)
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<Hr className="my-11" />
|
||||
|
||||
<section className="mt-6">
|
||||
<SectionTitle>사업 목적</SectionTitle>
|
||||
<p className="mt-8 text-base text-gray-600">
|
||||
수요자가 원하는 양질의 공업용수를 저렴하게 곰급하여 한정된
|
||||
수자원의 효율적 이용 및 지역적 물 부족 해소, 하수재이용을 통한
|
||||
오염총량 저감 및 방류수역 수질개선
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className="mt-6">
|
||||
<SectionTitle>사업 주요 내용</SectionTitle>
|
||||
<p className="mt-8 text-base text-gray-600">
|
||||
총사업비 : GS칼텍스, YNCC(주) 등 750억원
|
||||
<br />
|
||||
시행사 : 여수그린허브(주)
|
||||
<br />
|
||||
운영사 : 테크로스
|
||||
<br />
|
||||
위치: 여수시 신월로 2844일원 (여수 하수처리시설 부지 내)
|
||||
<br />
|
||||
처리공법 : 전처리시설(MF) + 주처리시설(RO)
|
||||
<br />
|
||||
시설용량 및 공급량 : 5만m³/일
|
||||
<br />
|
||||
관로 : 18.6km
|
||||
</p>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -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 (
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="h-5 w-[3px] bg-sky-500" />
|
||||
<h3 className="text-2xl font-bold text-neutral-900">{children}</h3>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
type HrProps = {
|
||||
className?: string;
|
||||
};
|
||||
|
||||
function Hr({ className = "" }: HrProps) {
|
||||
return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
|
||||
}
|
||||
|
||||
// type ImgCardProps = {
|
||||
// src: string;
|
||||
// alt: string;
|
||||
// };
|
||||
|
||||
// function ImgCard({ src, alt }: ImgCardProps) {
|
||||
// return (
|
||||
// <div className="w-full overflow-x-auto">
|
||||
// <img
|
||||
// src={src}
|
||||
// alt={alt}
|
||||
// className="block mx-auto max-w-none"
|
||||
// />
|
||||
// </div>
|
||||
// );
|
||||
// }
|
||||
|
||||
export default function GreywaterPage() {
|
||||
return (
|
||||
<div className="bg-white">
|
||||
<SubPageHeader
|
||||
title="경기도 파주시 하수 재이용"
|
||||
crumbs={[
|
||||
{ label: "Home", href: "/reuse" },
|
||||
{ label: "물 재이용 사례" },
|
||||
{ label: "하수 재이용 사례" },
|
||||
{ label: "파주시", href: "/reuse/business/sewage/paju" },
|
||||
]}
|
||||
hideFooterLine
|
||||
hideGuideText
|
||||
wrapClassName="!pb-0"
|
||||
/>
|
||||
|
||||
<Hr className="my-7" />
|
||||
|
||||
{/* 슬라이드 이미지 영역 */}
|
||||
<CaseImageSlider
|
||||
className="mt-8"
|
||||
maxWidthClassName="max-w-[760px]"
|
||||
slides={[
|
||||
{ src: "/images/landing/business/sewage/paju_01.png", alt: "파주시 하수 재이용 1" },
|
||||
]}
|
||||
/>
|
||||
|
||||
{/* 사업명 */}
|
||||
<section className="mt-6">
|
||||
<SectionTitle>사업명</SectionTitle>
|
||||
<p className="mt-8 text-base text-gray-600">
|
||||
경기도 파주시 하수재이용<br/>
|
||||
: 운정·금촌하수처리시설의 하수처리수를 막공법(U/F, R/O)으로 재처리하여 파주 LCD 산업단지내 3개 업체*에 공업용수 공급<br/>
|
||||
*LG디스플레이(P10공장), 희성전자, 엔비텍 등
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<Hr className="my-11" />
|
||||
|
||||
{/* 사업 배경 및 목적 */}
|
||||
<section className="mt-6">
|
||||
<SectionTitle>사업 배경 및 목적</SectionTitle>
|
||||
<p className="mt-8 text-base text-gray-600">
|
||||
민간투자사업(시행사 : 파주그린허브(주), 운영사 : 테크로스)
|
||||
</p>
|
||||
</section>
|
||||
|
||||
{/* 사업 주요 내용 */}
|
||||
<section className="mt-6">
|
||||
<SectionTitle>사업 주요 내용</SectionTitle>
|
||||
<p className="mt-8 text-base text-gray-600">
|
||||
처리공정 : 전처리 UF + 후처리 RO<br/>
|
||||
공급량 : 4만m³/일<br/>
|
||||
관로 : 13.6km<br/>
|
||||
사업비 : 651억원<br/>
|
||||
위치 : 경기도 파주시 금촌동 714번지 일원<br/>
|
||||
시설용량 : 41,20m³/일
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<Hr className="my-11" />
|
||||
|
||||
{/* 특이사항 */}
|
||||
<section className="pb-[200px]">
|
||||
<SectionTitle>특이사항</SectionTitle>
|
||||
<p className="mt-8 text-base text-gray-600">
|
||||
하수처리수 재이용시설 자체 농축폐수 처리공정 개발 및 적용 성공사례
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -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 (
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="h-5 w-[3px] bg-sky-500" />
|
||||
<h3 className="text-2xl font-bold text-neutral-900">{children}</h3>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
type HrProps = {
|
||||
className?: string;
|
||||
};
|
||||
|
||||
function Hr({ className = "" }: HrProps) {
|
||||
return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
|
||||
}
|
||||
|
||||
// type ImgCardProps = {
|
||||
// src: string;
|
||||
// alt: string;
|
||||
// };
|
||||
|
||||
// function ImgCard({ src, alt }: ImgCardProps) {
|
||||
// return (
|
||||
// <div className="w-full overflow-x-auto">
|
||||
// <img
|
||||
// src={src}
|
||||
// alt={alt}
|
||||
// className="block mx-auto max-w-none"
|
||||
// />
|
||||
// </div>
|
||||
// );
|
||||
// }
|
||||
|
||||
export default function GreywaterPage() {
|
||||
return (
|
||||
<div className="bg-white">
|
||||
<SubPageHeader
|
||||
title="여수시 하수처리수 재이용 민간투자사업(BTO)"
|
||||
crumbs={[
|
||||
{ label: "Home", href: "/reuse" },
|
||||
{ label: "물 재이용 사례" },
|
||||
{ label: "하수 재이용 사례" },
|
||||
{ label: "여수시", href: "/reuse/business/sewage/yeosu" },
|
||||
]}
|
||||
hideFooterLine
|
||||
hideGuideText
|
||||
wrapClassName="!pb-0"
|
||||
/>
|
||||
|
||||
<Hr className="my-7" />
|
||||
|
||||
{/* 슬라이드 이미지 영역 */}
|
||||
<CaseImageSlider
|
||||
className="mt-8"
|
||||
maxWidthClassName="max-w-[760px]"
|
||||
slides={[
|
||||
{ src: "/images/landing/business/sewage/yeosu_01.png", alt: "여수시 하수 재이용 1" },
|
||||
]}
|
||||
/>
|
||||
|
||||
{/* 사업명 */}
|
||||
<section className="mt-6">
|
||||
<SectionTitle>사업명</SectionTitle>
|
||||
<p className="mt-8 text-base text-gray-600">
|
||||
여수시 하수처리수 재이용 민간 투자사업(BTO)
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<Hr className="my-11" />
|
||||
|
||||
{/* 사업 목적 */}
|
||||
<section className="mt-6">
|
||||
<SectionTitle>사업 목적</SectionTitle>
|
||||
<p className="mt-8 text-base text-gray-600">
|
||||
수요자가 원하는 양질의 공업용수를 저렴하게 곰급하여 한정된 수자원의 효율적 이용 및 지역적 물 부족 해소, 하수재이용을 통한 오염총량 저감 및 방류수역 수질개선
|
||||
</p>
|
||||
</section>
|
||||
|
||||
{/* 사업 주요 내용 */}
|
||||
<section className="pb-[200px]">
|
||||
<SectionTitle>사업 주요 내용</SectionTitle>
|
||||
<p className="mt-8 text-base text-gray-600">
|
||||
총사업비 : GS칼텍스, YNCC(주) 등 750억원<br/>
|
||||
시행사 : 여수그린허브(주)<br/>
|
||||
운영사 : 테크로스<br/>
|
||||
위치: 여수시 신월로 2844일원 (여수 하수처리시설 부지 내)<br/>
|
||||
처리공법 : 전처리시설(MF) + 주처리시설(RO)<br/>
|
||||
시설용량 및 공급량 : 5만m³/일<br/>
|
||||
관로 : 18.6km
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -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 (
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="h-5 w-[3px] bg-sky-500" />
|
||||
<h3 className="text-[24px] font-bold text-neutral-900">{children}</h3>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
type HrProps = {
|
||||
className?: string;
|
||||
};
|
||||
|
||||
function Hr({ className = "" }: HrProps) {
|
||||
return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
|
||||
}
|
||||
|
||||
type ImgCardProps = {
|
||||
src: StaticImageData;
|
||||
alt: string;
|
||||
};
|
||||
|
||||
function ImgCard({ src, alt }: ImgCardProps) {
|
||||
return (
|
||||
<div className="w-full overflow-x-auto">
|
||||
<Image
|
||||
src={src}
|
||||
alt={alt}
|
||||
className="block mx-auto max-w-none"
|
||||
style={{ width: "auto", height: "auto" }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function GreywaterPage() {
|
||||
return (
|
||||
<div className="bg-white">
|
||||
<SubPageHeader
|
||||
title="중수도"
|
||||
crumbs={[
|
||||
{ label: "Home", href: "/reuse" },
|
||||
{ label: "물 재이용 소개", href: "/reuse/intro/law" },
|
||||
{ label: "중수도" },
|
||||
]}
|
||||
hideFooterLine
|
||||
hideGuideText
|
||||
wrapClassName="!pb-0"
|
||||
/>
|
||||
|
||||
<Hr className="my-7" />
|
||||
|
||||
{/* 1) 중수 재이용 소개 */}
|
||||
<section className="mt-6">
|
||||
<SectionTitle>중수 재이용 소개</SectionTitle>
|
||||
<div className="mt-8">
|
||||
<ImgCard src={greywaterIntro} alt="중수 재이용 소개" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Hr className="my-11" />
|
||||
|
||||
{/* 2) 중수도 설치 의무 대상 */}
|
||||
<section>
|
||||
<SectionTitle>중수도 설치 의무 대상</SectionTitle>
|
||||
<div className="mt-8">
|
||||
<ImgCard src={greywaterMandatory} alt="중수도 설치 의무 대상 설명" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Hr className="my-11" />
|
||||
|
||||
{/* 3) 중수도 시설기준 및 관리기준 */}
|
||||
<section className="pb-[200px]">
|
||||
<SectionTitle>중수도 시설기준 및 관리기준</SectionTitle>
|
||||
<div className="mt-8">
|
||||
<ImgCard src={greywaterStandard} alt="중수도 시설기준 및 관리기준 설명" />
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -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) {
|
||||
<Image
|
||||
src={src}
|
||||
alt={alt}
|
||||
className="block mx-auto max-w-none"
|
||||
className="mx-auto block max-w-none"
|
||||
style={{ width: "auto", height: "auto" }}
|
||||
priority={false}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
type SectionShellProps = {
|
||||
id: string;
|
||||
title: string;
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
function SectionShell({ id, title, children, className = "" }: SectionShellProps) {
|
||||
return (
|
||||
<section
|
||||
id={id}
|
||||
className={[
|
||||
"scroll-mt-[140px]",
|
||||
className,
|
||||
].join(" ")}
|
||||
>
|
||||
<SectionTitle>{title}</SectionTitle>
|
||||
<div className="mt-8">{children}</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export default function WaterReuseLawPage() {
|
||||
return (
|
||||
<div className="bg-white">
|
||||
<div className="relative bg-white">
|
||||
<BusinessSubNav />
|
||||
|
||||
<SubPageHeader
|
||||
title="물 재이용 법"
|
||||
crumbs={[
|
||||
{ label: "Home", href: "/reuse" },
|
||||
{ label: "물 재이용 소개", href: "/reuse/intro/law" },
|
||||
{ label: "물 재이용 법" },
|
||||
{ label: "Home", href: "/main" },
|
||||
{ label: "물 재이용 소개", href: "/intro/law" },
|
||||
{ label: "물 재이용 법" },
|
||||
]}
|
||||
hideFooterLine
|
||||
hideGuideText
|
||||
wrapClassName="!pb-0"
|
||||
/>
|
||||
|
||||
<Hr className="my-7" />
|
||||
<div className="pr-0">
|
||||
<Hr className="my-7" />
|
||||
|
||||
{/* 1) 법제도/계획 수립 타임라인 */}
|
||||
<section className="mt-6">
|
||||
<SectionTitle>법제도 · 계획 및 기본계획 수립</SectionTitle>
|
||||
<div className="mt-8">
|
||||
<ImgCard src={lawTimeline} alt="법제도 타임라인" />
|
||||
</div>
|
||||
</section>
|
||||
<SectionShell
|
||||
id="law-plan"
|
||||
title="법률 제·개정 및 기본계획 수립"
|
||||
className="mt-6"
|
||||
>
|
||||
<ImgCard src={lawTimeline} alt="법률 제·개정 및 기본계획 수립" />
|
||||
</SectionShell>
|
||||
|
||||
<Hr className="my-11" />
|
||||
<Hr className="my-11" />
|
||||
|
||||
{/* 2) 제2차 계획 대비 실적 현황 (2컬럼) */}
|
||||
<section>
|
||||
<SectionTitle>제 2차 계획 대비 실적 현황</SectionTitle>
|
||||
<div className="mt-8">
|
||||
<ImgCard src={performanceLeft} alt="실적 현황 요약" />
|
||||
</div>
|
||||
</section>
|
||||
<SectionShell
|
||||
id="plan-performance"
|
||||
title="제2차 계획 대비 실적 현황"
|
||||
>
|
||||
<ImgCard src={performanceLeft} alt="제2차 계획 대비 실적 현황" />
|
||||
</SectionShell>
|
||||
|
||||
<Hr className="my-11" />
|
||||
<Hr className="my-11" />
|
||||
|
||||
{/* 3) 국내 관련 현황 */}
|
||||
<section>
|
||||
<SectionTitle>국내 관련 현황</SectionTitle>
|
||||
<div className="mt-8">
|
||||
<ImgCard src={domesticTextbox} alt="국내 관련 현황 설명" />
|
||||
</div>
|
||||
</section>
|
||||
<SectionShell
|
||||
id="domestic-change"
|
||||
title="국내 여건 변화"
|
||||
>
|
||||
<ImgCard src={domesticTextbox} alt="국내 여건 변화" />
|
||||
</SectionShell>
|
||||
|
||||
<Hr className="my-11" />
|
||||
<Hr className="my-11" />
|
||||
|
||||
{/* 4) 정책 변천 추이 */}
|
||||
<section>
|
||||
<SectionTitle>물 재이용 정책 변천 추이</SectionTitle>
|
||||
<div className="mt-8">
|
||||
<ImgCard src={policyTimeline} alt="정책 변천 타임라인" />
|
||||
</div>
|
||||
</section>
|
||||
<SectionShell
|
||||
id="policy-history"
|
||||
title="물 재이용 정책 변화 추이"
|
||||
>
|
||||
<ImgCard src={policyTimeline} alt="물 재이용 정책 변화 추이" />
|
||||
</SectionShell>
|
||||
|
||||
<Hr className="my-11" />
|
||||
<Hr className="my-11" />
|
||||
|
||||
{/* 5) 타 법령과의 관계도 */}
|
||||
<section>
|
||||
<SectionTitle>타법령과의 관계도</SectionTitle>
|
||||
<div className="mt-8">
|
||||
<ImgCard src={relNote} alt="관계도 설명" />
|
||||
</div>
|
||||
</section>
|
||||
<SectionShell
|
||||
id="law-relation"
|
||||
title="타법령과의 관계 검토"
|
||||
>
|
||||
<ImgCard src={relNote} alt="타법령과의 관계 검토" />
|
||||
</SectionShell>
|
||||
|
||||
<Hr className="my-11" />
|
||||
<Hr className="my-11" />
|
||||
|
||||
{/* 6) 국내 연계 현황 */}
|
||||
<section className="pb-[200px]">
|
||||
<SectionTitle>국내 연계 현황</SectionTitle>
|
||||
<div className="mt-8">
|
||||
<SectionShell
|
||||
id="domestic-linkage"
|
||||
title="국내 연계 현황"
|
||||
className="pb-[250px]"
|
||||
>
|
||||
<div className="mx-[20px] mb-8">
|
||||
<p className="text-[24px] font-semibold mb-2">주요 국가계획의 정책방향과 연계한 물 재이용 정책 필요</p>
|
||||
<p className="text-[#4F4F4F]">국가 상위계획의 정책 방향이 기후위기 대응 등 수자원의 공급 안전성을 위한 물 재이용 활성화로 정책 실효성 제고 필요<br />
|
||||
• 물관리 계획(국가수도기본계획, 국가 및 유역하수도종합계획, 하천유역수자원관리계획 등)과의 연계성 확보 → 통합적인 관점에서 물이용 체계 구축 필요
|
||||
<p className="mb-2 text-[24px] font-semibold">
|
||||
주요 국가계획의 정책방향과 연계한 물 재이용 정책 필요
|
||||
</p>
|
||||
<p className="text-[#4F4F4F]">
|
||||
국가 상위계획의 정책 방향이 기후위기 대응 등 수자원의 공급 안전성을 위한
|
||||
물 재이용 활성화로 정책 실효성 제고 필요
|
||||
<br />
|
||||
• 물관리 계획(국가수도기본계획, 국가 및 유역하수도종합계획,
|
||||
하천유역수자원관리계획 등)과의 연계성 확보 → 통합적인 관점에서
|
||||
물이용 체계 구축 필요
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<ImgCard src={linkage} alt="국내 연계 현황" />
|
||||
</div>
|
||||
</section>
|
||||
</SectionShell>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -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 (
|
||||
<div className="flex gap-0">
|
||||
<div className="relative">
|
||||
<Lnb />
|
||||
<main className="flex-1 px-[100px] pt-[80px]">
|
||||
{children}
|
||||
</main>
|
||||
<div className="flex max-w-[1400px] gap-[56px] pl-[60px] py-[80px]">
|
||||
<main className="min-w-0 flex-1">
|
||||
{children}
|
||||
</main>
|
||||
|
||||
{/* 우측 메뉴 영역 */}
|
||||
<BusinessSubNav />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -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) {
|
||||
<Image
|
||||
src={src}
|
||||
alt={alt}
|
||||
className="block mx-auto max-w-none"
|
||||
className="mx-auto block max-w-none"
|
||||
style={{ width: "auto", height: "auto" }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
type SectionShellProps = {
|
||||
id: string;
|
||||
title: string;
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
function SectionShell({
|
||||
id,
|
||||
title,
|
||||
children,
|
||||
className = "",
|
||||
}: SectionShellProps) {
|
||||
return (
|
||||
<section
|
||||
id={id}
|
||||
className={["scroll-mt-[140px]", className].join(" ")}
|
||||
>
|
||||
<SectionTitle>{title}</SectionTitle>
|
||||
<div className="mt-8">{children}</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export default function RainwaterReusePage() {
|
||||
return (
|
||||
<div className="bg-white">
|
||||
<div className="relative bg-white">
|
||||
<BusinessSubNav />
|
||||
|
||||
<SubPageHeader
|
||||
title="빗물 이용시설"
|
||||
crumbs={[
|
||||
{ label: "Home", href: "/reuse" },
|
||||
{ label: "물 재이용 소개", href: "/reuse/intro/law" },
|
||||
{ label: "빗물 이용시설" },
|
||||
{ label: "Home", href: "/main" },
|
||||
{ label: "물 재이용 소개", href: "/intro/law" },
|
||||
{ label: "빗물 이용시설" },
|
||||
]}
|
||||
hideFooterLine
|
||||
hideGuideText
|
||||
wrapClassName="!pb-0"
|
||||
/>
|
||||
|
||||
<Hr className="my-7" />
|
||||
<div className="pr-0">
|
||||
<Hr className="my-7" />
|
||||
|
||||
{/* 1) 빗물 재이용 소개 */}
|
||||
<section className="mt-6">
|
||||
<SectionTitle>빗물 재이용 소개</SectionTitle>
|
||||
<div className="mt-8">
|
||||
<SectionShell
|
||||
id="rain-intro"
|
||||
title="빗물 재이용 소개"
|
||||
className="mt-6"
|
||||
>
|
||||
<ImgCard src={rainreuseIntro} alt="빗물 재이용 소개" />
|
||||
</div>
|
||||
</section>
|
||||
</SectionShell>
|
||||
|
||||
<Hr className="my-11" />
|
||||
<Hr className="my-11" />
|
||||
|
||||
{/* 2) 빗물이용시설 설치 관리 법적 의무 대상 */}
|
||||
<section className="mt-6">
|
||||
<SectionTitle>빗물이용시설 설치 관리 법적 의무 대상</SectionTitle>
|
||||
<div className="mt-8">
|
||||
<ImgCard src={rainreuseMandatory} alt="법적 의무 대상 설명" />
|
||||
</div>
|
||||
</section>
|
||||
<SectionShell
|
||||
id="rain-mandatory"
|
||||
title="빗물이용시설 설치 관리 법적 의무 대상"
|
||||
>
|
||||
<ImgCard
|
||||
src={rainreuseMandatory}
|
||||
alt="빗물이용시설 설치 관리 법적 의무 대상"
|
||||
/>
|
||||
</SectionShell>
|
||||
|
||||
<Hr className="my-11" />
|
||||
<Hr className="my-11" />
|
||||
|
||||
{/* 3) 빗물이용시설 설계 방안 */}
|
||||
<section className="mt-6">
|
||||
<SectionTitle>빗물이용시설 설계 방안</SectionTitle>
|
||||
<div className="mt-8">
|
||||
<ImgCard src={rainwaterDesign} alt="빗물이용시설 설계 방안 설명" />
|
||||
</div>
|
||||
</section>
|
||||
<SectionShell
|
||||
id="rain-design"
|
||||
title="빗물이용시설 설계 방안"
|
||||
>
|
||||
<ImgCard
|
||||
src={rainwaterDesign}
|
||||
alt="빗물이용시설 설계 방안"
|
||||
/>
|
||||
</SectionShell>
|
||||
|
||||
<Hr className="my-11" />
|
||||
<Hr className="my-11" />
|
||||
|
||||
{/* 4) 빗물이용시설 시설기준 및 관리기준 */}
|
||||
<section className="pb-[200px]">
|
||||
<SectionTitle>빗물이용시설 시설기준 및 관리기준</SectionTitle>
|
||||
<div className="mt-8">
|
||||
<ImgCard src={rainwaterStandards} alt="빗물이용시설 시설기준 및 관리기준 설명" />
|
||||
</div>
|
||||
</section>
|
||||
<SectionShell
|
||||
id="rain-standards"
|
||||
title="빗물이용시설 시설기준 및 관리기준"
|
||||
className="pb-[200px]"
|
||||
>
|
||||
<ImgCard
|
||||
src={rainwaterStandards}
|
||||
alt="빗물이용시설 시설기준 및 관리기준"
|
||||
/>
|
||||
</SectionShell>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -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 (
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="h-5 w-[3px] bg-sky-500" />
|
||||
<h3 className="text-[24px] font-bold text-neutral-900">{children}</h3>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Hr({ className = "" }: { className?: string }) {
|
||||
return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
|
||||
}
|
||||
|
||||
function ImgCard({ src, alt }: { src: StaticImageData; alt: string }) {
|
||||
return (
|
||||
<div className="w-full overflow-x-auto">
|
||||
<Image
|
||||
src={src}
|
||||
alt={alt}
|
||||
className="mx-auto block max-w-none"
|
||||
style={{ width: "auto", height: "auto" }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SectionShell({
|
||||
id,
|
||||
title,
|
||||
children,
|
||||
className = "",
|
||||
}: {
|
||||
id: string;
|
||||
title: string;
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
}) {
|
||||
return (
|
||||
<section id={id} className={`scroll-mt-[140px] ${className}`}>
|
||||
<SectionTitle>{title}</SectionTitle>
|
||||
<div className="mt-8">{children}</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export default function ReusePage() {
|
||||
return (
|
||||
<div className="relative bg-white">
|
||||
<BusinessSubNav />
|
||||
|
||||
<SubPageHeader
|
||||
title="중수도"
|
||||
crumbs={[
|
||||
{ label: "Home", href: "/main" },
|
||||
{ label: "물 재이용 소개", href: "/intro/law" },
|
||||
{ label: "중수도" },
|
||||
]}
|
||||
hideFooterLine
|
||||
hideGuideText
|
||||
wrapClassName="!pb-0"
|
||||
/>
|
||||
|
||||
<div className="pr-0">
|
||||
<Hr className="my-7" />
|
||||
|
||||
<SectionShell
|
||||
id="reuse-intro"
|
||||
title="중수 재이용 소개"
|
||||
className="mt-6"
|
||||
>
|
||||
<ImgCard src={greywaterIntro} alt="중수 재이용 소개" />
|
||||
</SectionShell>
|
||||
|
||||
<Hr className="my-11" />
|
||||
|
||||
<SectionShell
|
||||
id="reuse-mandatory"
|
||||
title="중수도 설치 의무 대상"
|
||||
>
|
||||
<ImgCard src={greywaterMandatory} alt="중수도 설치 의무 대상" />
|
||||
</SectionShell>
|
||||
|
||||
<Hr className="my-11" />
|
||||
|
||||
<SectionShell
|
||||
id="reuse-standard"
|
||||
title="중수도 시설기준 및 관리기준"
|
||||
className="pb-[200px]"
|
||||
>
|
||||
<ImgCard src={greywaterStandard} alt="중수도 시설기준 및 관리기준" />
|
||||
</SectionShell>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -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 (
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="h-5 w-[3px] bg-sky-500" />
|
||||
<h3 className="text-[24px] font-bold text-neutral-900">{children}</h3>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
type HrProps = {
|
||||
className?: string;
|
||||
};
|
||||
|
||||
function Hr({ className = "" }: HrProps) {
|
||||
return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
|
||||
}
|
||||
|
||||
type ImgCardProps = {
|
||||
src: StaticImageData;
|
||||
alt: string;
|
||||
};
|
||||
|
||||
function ImgCard({ src, alt }: ImgCardProps) {
|
||||
return (
|
||||
<div className="w-full overflow-x-auto">
|
||||
<Image
|
||||
src={src}
|
||||
alt={alt}
|
||||
className="block mx-auto max-w-none"
|
||||
style={{ width: "auto", height: "auto" }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function TreatedWaterPage() {
|
||||
return (
|
||||
<div className="bg-white">
|
||||
<SubPageHeader
|
||||
title="하수처리수"
|
||||
crumbs={[
|
||||
{ label: "Home", href: "/reuse" },
|
||||
{ label: "물 재이용 소개", href: "/reuse/intro/law" },
|
||||
{ label: "하수처리수" },
|
||||
]}
|
||||
hideFooterLine
|
||||
hideGuideText
|
||||
wrapClassName="!pb-0"
|
||||
/>
|
||||
|
||||
<Hr className="my-7" />
|
||||
|
||||
{/* 1) 하수처리수 */}
|
||||
<section className="mt-6">
|
||||
<SectionTitle>하수처리수</SectionTitle>
|
||||
<div className="mt-8">
|
||||
<ImgCard src={treatedwaterIntro} alt="하수처리수 설명" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Hr className="my-11" />
|
||||
|
||||
{/* 2) 하수처리수 재이용시설 의무 대상 */}
|
||||
<section className="pb-[200px]">
|
||||
<SectionTitle>하수처리수 재이용시설 의무 대상</SectionTitle>
|
||||
<div className="mt-8">
|
||||
<ImgCard src={treatedwaterMandatory} alt="하수처리수 재이용시설 의무 대상 설명" />
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -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 (
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="h-5 w-[3px] bg-sky-500" />
|
||||
<h3 className="text-[24px] font-bold text-neutral-900">{children}</h3>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Hr({ className = "" }: { className?: string }) {
|
||||
return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
|
||||
}
|
||||
|
||||
function ImgCard({ src, alt }: { src: StaticImageData; alt: string }) {
|
||||
return (
|
||||
<div className="w-full overflow-x-auto">
|
||||
<Image
|
||||
src={src}
|
||||
alt={alt}
|
||||
className="mx-auto block max-w-none"
|
||||
style={{ width: "auto", height: "auto" }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SectionShell({
|
||||
id,
|
||||
title,
|
||||
children,
|
||||
className = "",
|
||||
}: {
|
||||
id: string;
|
||||
title: string;
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
}) {
|
||||
return (
|
||||
<section id={id} className={`scroll-mt-[140px] ${className}`}>
|
||||
<SectionTitle>{title}</SectionTitle>
|
||||
<div className="mt-8">{children}</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export default function TreatedWaterPage() {
|
||||
return (
|
||||
<div className="relative bg-white">
|
||||
<BusinessSubNav />
|
||||
|
||||
<SubPageHeader
|
||||
title="하수처리수"
|
||||
crumbs={[
|
||||
{ label: "Home", href: "/main" },
|
||||
{ label: "물 재이용 소개", href: "/intro/law" },
|
||||
{ label: "하수처리수" },
|
||||
]}
|
||||
hideFooterLine
|
||||
hideGuideText
|
||||
wrapClassName="!pb-0"
|
||||
/>
|
||||
|
||||
<div className="pr-0">
|
||||
<Hr className="my-7" />
|
||||
|
||||
<SectionShell
|
||||
id="treated-intro"
|
||||
title="하수처리수 개요"
|
||||
className="mt-6"
|
||||
>
|
||||
<ImgCard src={treatedwaterIntro} alt="하수처리수 개요" />
|
||||
</SectionShell>
|
||||
|
||||
<Hr className="my-11" />
|
||||
|
||||
<SectionShell
|
||||
id="treated-mandatory"
|
||||
title="하수처리수 재이용시설 의무 대상"
|
||||
className="pb-[300px]"
|
||||
>
|
||||
<ImgCard
|
||||
src={treatedwaterMandatory}
|
||||
alt="하수처리수 재이용시설 의무 대상"
|
||||
/>
|
||||
</SectionShell>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -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 (
|
||||
<StoreProvider>
|
||||
<div className="pt-[83px]">{/* TopNav 높이만큼 */}
|
||||
<TopNav />
|
||||
<main className="ml-[260px]">{children}</main>{/* Lnb 너비만큼 */}
|
||||
</div>
|
||||
<TopNav />
|
||||
|
||||
<div className="pt-[83px] flex">
|
||||
{/* ✅ 좌측 LNB */}
|
||||
<Lnb />
|
||||
|
||||
{/* ✅ 본문 */}
|
||||
<main className="ml-[260px] w-full">
|
||||
{children}
|
||||
</main>
|
||||
</div>
|
||||
</StoreProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -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 <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
|
||||
}
|
||||
|
||||
type ImgCardProps = {
|
||||
src: StaticImageData;
|
||||
alt: string;
|
||||
};
|
||||
|
||||
function ImgCard({ src, alt }: ImgCardProps) {
|
||||
function ImgCard({ src, alt }: { src: StaticImageData; alt: string }) {
|
||||
return (
|
||||
<div className="w-full overflow-x-auto">
|
||||
<Image
|
||||
src={src}
|
||||
alt={alt}
|
||||
className="block mx-auto max-w-none"
|
||||
className="mx-auto block max-w-none"
|
||||
style={{ width: "auto", height: "auto" }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function GreywaterPage() {
|
||||
function SectionShell({
|
||||
id,
|
||||
title,
|
||||
children,
|
||||
className = "",
|
||||
}: {
|
||||
id: string;
|
||||
title: string;
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
}) {
|
||||
return (
|
||||
<div className="bg-white">
|
||||
<section id={id} className={`scroll-mt-[140px] ${className}`}>
|
||||
<SectionTitle>{title}</SectionTitle>
|
||||
<div className="mt-8">{children}</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export default function GreywaterStatusPage() {
|
||||
return (
|
||||
<div className="relative bg-white">
|
||||
<BusinessSubNav />
|
||||
|
||||
<SubPageHeader
|
||||
title="중수도(현황)"
|
||||
crumbs={[
|
||||
{ label: "Home", href: "/reuse" },
|
||||
{ label: "물 재이용 현황", href: "/reuse/cases/rain" },
|
||||
{ label: "중수도(현황)" },
|
||||
{ label: "Home", href: "/main" },
|
||||
{ label: "물 재이용 현황", href: "/status/rain" },
|
||||
{ label: "중수도(현황)" },
|
||||
]}
|
||||
hideFooterLine
|
||||
hideGuideText
|
||||
wrapClassName="!pb-0"
|
||||
/>
|
||||
|
||||
<Hr className="my-7" />
|
||||
<div className="pr-0">
|
||||
<Hr className="my-7" />
|
||||
|
||||
{/* 1) 전체 중수도 설치 및 이용 현황 (공장 및 발전시설 제외) */}
|
||||
<section className="mt-6">
|
||||
<SectionTitle>전체 중수도 설치 및 이용 현황 (공장 및 발전시설 제외)</SectionTitle>
|
||||
<div className="mt-8">
|
||||
<ImgCard src={greywaterOverall} alt="전체 중수도 설치 및 이용 현황 설명" />
|
||||
</div>
|
||||
</section>
|
||||
<SectionShell
|
||||
id="status-greywater-overall"
|
||||
title="전체 중수도 설치 및 이용 현황 (공장 및 발전시설 제외)"
|
||||
className="mt-6"
|
||||
>
|
||||
<ImgCard src={greywaterOverall} alt="전체 중수도 설치 및 이용 현황" />
|
||||
</SectionShell>
|
||||
|
||||
<Hr className="my-11" />
|
||||
<Hr className="my-11" />
|
||||
|
||||
{/* 2) 중수공장 및 발전시설 내 중수도 설치 및 이용 현황 */}
|
||||
<section>
|
||||
<SectionTitle>공장 및 발전시설 내 중수도 설치 및 이용 현황</SectionTitle>
|
||||
<div className="mt-8">
|
||||
<ImgCard src={greywaterFactory} alt="공장 및 발전시설 내 중수도 설치 및 이용 현황 설명" />
|
||||
</div>
|
||||
</section>
|
||||
<SectionShell
|
||||
id="status-greywater-factory"
|
||||
title="공장 및 발전시설 내 중수도 설치 및 이용 현황"
|
||||
>
|
||||
<ImgCard src={greywaterFactory} alt="공장 및 발전시설 중수도 현황" />
|
||||
</SectionShell>
|
||||
|
||||
<Hr className="my-11" />
|
||||
<Hr className="my-11" />
|
||||
|
||||
{/* 3) 중수도 건축물별 이용량 현황 */}
|
||||
<section className="pb-16">
|
||||
<SectionTitle>중수도 건축물별 이용량 현황</SectionTitle>
|
||||
<div className="mt-8">
|
||||
<ImgCard src={greywaterBuilding} alt="중수도 건축물별 이용량 현황 설명" />
|
||||
</div>
|
||||
</section>
|
||||
<SectionShell
|
||||
id="status-greywater-building"
|
||||
title="중수도 건축물별 이용량 현황"
|
||||
>
|
||||
<ImgCard src={greywaterBuilding} alt="중수도 건축물별 이용량" />
|
||||
</SectionShell>
|
||||
|
||||
<Hr className="my-11" />
|
||||
<Hr className="my-11" />
|
||||
|
||||
{/* 4) 중수도 용도별 이용량 현황 */}
|
||||
<section className="pb-[200px]">
|
||||
<SectionTitle>중수도 용도별 이용량 현황</SectionTitle>
|
||||
<div className="mt-8">
|
||||
<ImgCard src={greywaterUsage} alt="중수도 용도별 이용량 현황 설명" />
|
||||
</div>
|
||||
</section>
|
||||
<SectionShell
|
||||
id="status-greywater-usage"
|
||||
title="중수도 용도별 이용량 현황"
|
||||
className="pb-[200px]"
|
||||
>
|
||||
<ImgCard src={greywaterUsage} alt="중수도 용도별 이용량" />
|
||||
</SectionShell>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -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 (
|
||||
<div className="flex gap-0">
|
||||
<div className="relative">
|
||||
<Lnb />
|
||||
<main className="flex-1 px-[100px] pt-[80px]">{children}</main>
|
||||
<div className="flex max-w-[1400px] gap-[56px] pl-[60px] py-[80px]">
|
||||
<main className="min-w-0 flex-1">
|
||||
{children}
|
||||
</main>
|
||||
|
||||
{/* 우측 메뉴 영역 */}
|
||||
<BusinessSubNav />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -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 <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
|
||||
}
|
||||
|
||||
type ImgCardProps = {
|
||||
src: StaticImageData;
|
||||
alt: string;
|
||||
};
|
||||
|
||||
function ImgCard({ src, alt }: ImgCardProps) {
|
||||
function ImgCard({ src, alt }: { src: StaticImageData; alt: string }) {
|
||||
return (
|
||||
<div className="w-full overflow-x-auto">
|
||||
<Image
|
||||
src={src}
|
||||
alt={alt}
|
||||
className="block mx-auto max-w-none"
|
||||
className="mx-auto block max-w-none"
|
||||
style={{ width: "auto", height: "auto" }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function GreywaterPage() {
|
||||
function SectionShell({
|
||||
id,
|
||||
title,
|
||||
children,
|
||||
className = "",
|
||||
}: {
|
||||
id: string;
|
||||
title: string;
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
}) {
|
||||
return (
|
||||
<div className="bg-white">
|
||||
<section id={id} className={`scroll-mt-[140px] ${className}`}>
|
||||
<SectionTitle>{title}</SectionTitle>
|
||||
<div className="mt-8">{children}</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export default function RainStatusPage() {
|
||||
return (
|
||||
<div className="relative bg-white">
|
||||
<BusinessSubNav />
|
||||
|
||||
<SubPageHeader
|
||||
title="빗물이용시설(현황)"
|
||||
crumbs={[
|
||||
{ label: "Home", href: "/reuse" },
|
||||
{ label: "물 재이용 현황", href: "/reuse/cases/rain" },
|
||||
{ label: "빗물이용시설(현황)" },
|
||||
{ label: "Home", href: "/main" },
|
||||
{ label: "물 재이용 현황", href: "/status/rain" },
|
||||
{ label: "빗물이용시설(현황)" },
|
||||
]}
|
||||
hideFooterLine
|
||||
hideGuideText
|
||||
wrapClassName="!pb-0"
|
||||
/>
|
||||
|
||||
<Hr className="my-7" />
|
||||
<div className="pr-0">
|
||||
<Hr className="my-7" />
|
||||
|
||||
{/* 1) 빗물이용시설의 건축물별 빗물이용량 현황 */}
|
||||
<section className="mt-6">
|
||||
<SectionTitle>빗물이용시설의 건축물별 빗물이용량 현황</SectionTitle>
|
||||
<div className="mt-8">
|
||||
<ImgCard src={rainwaterBuilding} alt="빗물이용시설의 건축물별 빗물이용량 현황 설명" />
|
||||
</div>
|
||||
</section>
|
||||
<SectionShell
|
||||
id="status-rain-building"
|
||||
title="빗물이용시설의 건축물별 빗물이용량 현황"
|
||||
className="mt-6"
|
||||
>
|
||||
<ImgCard
|
||||
src={rainwaterBuilding}
|
||||
alt="빗물이용시설의 건축물별 빗물이용량 현황"
|
||||
/>
|
||||
</SectionShell>
|
||||
|
||||
<Hr className="my-11" />
|
||||
<Hr className="my-11" />
|
||||
|
||||
{/* 2) 빗물이용시설의 용도별 분포 (2023년 기준) */}
|
||||
<section>
|
||||
<SectionTitle>빗물이용시설의 용도별 분포 (2023년 기준)</SectionTitle>
|
||||
<div className="mt-8">
|
||||
<ImgCard src={rainwaterUsage} alt="빗물이용시설의 용도별 분포 설명" />
|
||||
</div>
|
||||
</section>
|
||||
<SectionShell
|
||||
id="status-rain-purpose-distribution"
|
||||
title="빗물이용시설의 용도별 분포(2023년 기준)"
|
||||
>
|
||||
<ImgCard
|
||||
src={rainwaterUsage}
|
||||
alt="빗물이용시설의 용도별 분포(2023년 기준)"
|
||||
/>
|
||||
</SectionShell>
|
||||
|
||||
<Hr className="my-11" />
|
||||
<Hr className="my-11" />
|
||||
|
||||
{/* 3) 빗물이용시설의 용도별 빗물이용량 현황 */}
|
||||
<section className="pb-[200px]">
|
||||
<SectionTitle>빗물이용시설의 용도별 빗물이용량 현황</SectionTitle>
|
||||
<div className="mt-8">
|
||||
<ImgCard src={rainwaterUsageAmount} alt="빗물이용시설의 용도별 빗물이용량 현황 설명" />
|
||||
</div>
|
||||
</section>
|
||||
<SectionShell
|
||||
id="status-rain-purpose-usage"
|
||||
title="빗물이용시설의 용도별 빗물이용량 현황"
|
||||
className="pb-[200px]"
|
||||
>
|
||||
<ImgCard
|
||||
src={rainwaterUsageAmount}
|
||||
alt="빗물이용시설의 용도별 빗물이용량 현황"
|
||||
/>
|
||||
</SectionShell>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -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 <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
|
||||
}
|
||||
|
||||
type ImgCardProps = {
|
||||
src: StaticImageData;
|
||||
alt: string;
|
||||
};
|
||||
|
||||
function ImgCard({ src, alt }: ImgCardProps) {
|
||||
function ImgCard({ src, alt }: { src: StaticImageData; alt: string }) {
|
||||
return (
|
||||
<div className="w-full overflow-x-auto">
|
||||
<Image
|
||||
src={src}
|
||||
alt={alt}
|
||||
className="block mx-auto max-w-none"
|
||||
className="mx-auto block max-w-none"
|
||||
style={{ width: "auto", height: "auto" }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function GreywaterPage() {
|
||||
function SectionShell({
|
||||
id,
|
||||
title,
|
||||
children,
|
||||
className = "",
|
||||
}: {
|
||||
id: string;
|
||||
title: string;
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
}) {
|
||||
return (
|
||||
<div className="bg-white">
|
||||
<section id={id} className={`scroll-mt-[140px] ${className}`}>
|
||||
<SectionTitle>{title}</SectionTitle>
|
||||
<div className="mt-8">{children}</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export default function TreatedStatusPage() {
|
||||
return (
|
||||
<div className="relative bg-white">
|
||||
<BusinessSubNav />
|
||||
|
||||
<SubPageHeader
|
||||
title="하수처리수 재이용시설(현황)"
|
||||
crumbs={[
|
||||
{ label: "Home", href: "/reuse" },
|
||||
{ label: "물 재이용 현황", href: "/reuse/cases/rain" },
|
||||
{ label: "하수처리수 재이용시설(현황)" },
|
||||
{ label: "Home", href: "/main" },
|
||||
{ label: "물 재이용 현황", href: "/status/rain" },
|
||||
{ label: "하수처리수 재이용시설(현황)" },
|
||||
]}
|
||||
hideFooterLine
|
||||
hideGuideText
|
||||
wrapClassName="!pb-0"
|
||||
/>
|
||||
|
||||
<Hr className="my-7" />
|
||||
<div className="pr-0">
|
||||
<Hr className="my-7" />
|
||||
|
||||
{/* 1) 연도별 하수처리수 재이용 현황 */}
|
||||
<section className="mt-6">
|
||||
<SectionTitle>연도별 하수처리수 재이용 현황</SectionTitle>
|
||||
<div className="mt-8">
|
||||
<ImgCard src={treatedWaterYear} alt="연도별 하수처리수 재이용 현황 설명" />
|
||||
</div>
|
||||
</section>
|
||||
<SectionShell
|
||||
id="status-treated-year"
|
||||
title="연도별 하수처리수 재이용 현황"
|
||||
className="mt-6"
|
||||
>
|
||||
<ImgCard
|
||||
src={treatedWaterYear}
|
||||
alt="연도별 하수처리수 재이용 현황"
|
||||
/>
|
||||
</SectionShell>
|
||||
|
||||
<Hr className="my-11" />
|
||||
<Hr className="my-11" />
|
||||
|
||||
{/* 2) 용도별 하수처리수 재이용 현황 */}
|
||||
<section>
|
||||
<SectionTitle>용도별 하수처리수 재이용 현황</SectionTitle>
|
||||
<div className="mt-8">
|
||||
<ImgCard src={treatedWaterUsage} alt="용도별 하수처리수 재이용 현황 설명" />
|
||||
</div>
|
||||
</section>
|
||||
<SectionShell
|
||||
id="status-treated-usage"
|
||||
title="용도별 하수처리수 재이용 현황"
|
||||
>
|
||||
<ImgCard
|
||||
src={treatedWaterUsage}
|
||||
alt="용도별 하수처리수 재이용 현황"
|
||||
/>
|
||||
</SectionShell>
|
||||
|
||||
<Hr className="my-11" />
|
||||
<Hr className="my-11" />
|
||||
|
||||
{/* 3) 하수처리시설 설치 및 이용 현황 */}
|
||||
<section>
|
||||
<SectionTitle>하수처리시설 설치 및 이용 현황</SectionTitle>
|
||||
<div className="mt-8">
|
||||
<ImgCard src={treatedWaterFacility} alt="하수처리시설 설치 및 이용 현황 설명" />
|
||||
</div>
|
||||
</section>
|
||||
<SectionShell
|
||||
id="status-treated-facility"
|
||||
title="하수처리시설 설치 및 이용 현황"
|
||||
>
|
||||
<ImgCard
|
||||
src={treatedWaterFacility}
|
||||
alt="하수처리시설 설치 및 이용 현황"
|
||||
/>
|
||||
</SectionShell>
|
||||
|
||||
<Hr className="my-11" />
|
||||
<Hr className="my-11" />
|
||||
|
||||
{/* 4) 시도별 하수처리수 재이용 현황 */}
|
||||
<section className="pb-[200px]">
|
||||
<SectionTitle>시도별 하수처리수 재이용 현황</SectionTitle>
|
||||
<div className="mt-8">
|
||||
<ImgCard src={treatedWaterRegion} alt="시도별 하수처리수 재이용 현황 설명" />
|
||||
</div>
|
||||
</section>
|
||||
<SectionShell
|
||||
id="status-treated-region"
|
||||
title="시도별 하수처리수 재이용 현황"
|
||||
className="pb-[200px]"
|
||||
>
|
||||
<ImgCard
|
||||
src={treatedWaterRegion}
|
||||
alt="시도별 하수처리수 재이용 현황"
|
||||
/>
|
||||
</SectionShell>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -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<string, SectionItem[]> = {
|
||||
// #물 재이용 소개 -물 재이용 법-
|
||||
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 (
|
||||
<aside className="fixed right-2 top-1/3 z-50 w-[220px] shrink-0">
|
||||
<ul className="space-y-2">
|
||||
{items.map((item) => {
|
||||
const active = activeId === item.id;
|
||||
|
||||
return (
|
||||
<li key={item.id}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleMove(item.id)}
|
||||
className={[
|
||||
"flex w-full items-center gap-2 rounded-full bg-white px-3 py-2 text-left transition-all duration-200",
|
||||
active
|
||||
? "border border-sky-500 text-[#2B2B2B]"
|
||||
: "text-[#B2B8C2]",
|
||||
].join(" ")}
|
||||
>
|
||||
<span
|
||||
className={[
|
||||
"h-[12px] w-[12px] shrink-0 rounded-full border",
|
||||
active ? "border-sky-500 bg-sky-500" : "border-[#D0D5DD]",
|
||||
].join(" ")}
|
||||
/>
|
||||
<span className={active ? "text-sm font-semibold" : "text-sm"}>
|
||||
{item.label}
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
@@ -47,7 +47,7 @@ const MOCK: Record<TabKey, CaseItem[]> = {
|
||||
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<TabKey, CaseItem[]> = {
|
||||
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<TabKey, CaseItem[]> = {
|
||||
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",
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
+76
-149
@@ -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<string, LnbConfig> = {
|
||||
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<MenuItem[]>([]);
|
||||
const [openMenuCode, setOpenMenuCode] = useState<number | null>(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 (
|
||||
<aside
|
||||
className={[
|
||||
"fixed left-0 top-[83px]", // ✅ 화면 고정 + TopNav 아래로
|
||||
"w-[260px] min-w-[260px] shrink-0",
|
||||
"h-[calc(100vh-83px)]", // ✅ 남은 높이만큼
|
||||
"overflow-y-auto", // ✅ LNB 내부 스크롤
|
||||
"bg-white z-50", // ✅ 겹침 방지
|
||||
].join(" ")}
|
||||
className={[
|
||||
"fixed left-0 top-[83px]",
|
||||
"z-40 h-[calc(100vh-83px)] w-[260px] shrink-0 overflow-y-auto bg-white",
|
||||
].join(" ")}
|
||||
>
|
||||
{/* 타이틀 */}
|
||||
<div className="flex h-[120px] items-center justify-center bg-gradient-to-r from-cyan-500 to-green-500 text-[40px] font-bold text-white">
|
||||
{currentTopMenu?.menuKornNm?.trim().split(/\s+/).pop() ?? ""}
|
||||
{title}
|
||||
</div>
|
||||
|
||||
{/* 메뉴 */}
|
||||
<ul>
|
||||
{secondLevelMenus.map((item) => {
|
||||
const hasChildren = hasAnyChild(item);
|
||||
const active = isMenuActive(pathname, item);
|
||||
|
||||
if (!hasChildren) {
|
||||
return (
|
||||
<li key={item.menuCd}>
|
||||
<Link
|
||||
href={item.urlPath || "#"}
|
||||
className={[
|
||||
"block border-b border-slate-300 px-5 py-4 text-center text-base font-semibold transition-colors",
|
||||
active
|
||||
? "cursor-default bg-white text-sky-500"
|
||||
: "bg-[#F0F0F0] text-[#767676] hover:bg-white hover:text-sky-500",
|
||||
].join(" ")}
|
||||
>
|
||||
{item.menuKornNm}
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
const isOpen = openMenuCode === item.menuCd;
|
||||
const childMenus = item.children ?? [];
|
||||
{menus.map((item) => {
|
||||
const active = isActiveMenu(pathname, item.href);
|
||||
|
||||
return (
|
||||
<li key={item.menuCd}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() =>
|
||||
setOpenMenuCode((prev) => (prev === item.menuCd ? null : item.menuCd))
|
||||
}
|
||||
<li key={item.href}>
|
||||
<Link
|
||||
href={item.href}
|
||||
className={[
|
||||
"flex w-full items-center justify-between border-b border-slate-300 px-5 py-6 text-base font-semibold",
|
||||
active ? "bg-slate-100 text-slate-900" : "bg-slate-100 text-slate-500",
|
||||
"block border-b border-slate-300 px-5 py-5 text-center text-base font-semibold transition-colors",
|
||||
active
|
||||
? "bg-white text-sky-500"
|
||||
: "bg-[#F0F0F0] text-[#767676] hover:bg-white hover:text-sky-500",
|
||||
].join(" ")}
|
||||
aria-expanded={isOpen}
|
||||
aria-current={active ? "page" : undefined}
|
||||
>
|
||||
<span className="w-full text-center">{item.menuKornNm}</span>
|
||||
<span
|
||||
aria-hidden
|
||||
className={[
|
||||
"ml-3 shrink-0 transition-transform duration-200",
|
||||
isOpen ? "rotate-180" : "rotate-0",
|
||||
].join(" ")}
|
||||
>
|
||||
<Image
|
||||
src="/images/landing/drop_arrow.svg"
|
||||
alt="menu toggle icon"
|
||||
width={28}
|
||||
height={28}
|
||||
className="h-7 w-7"
|
||||
/>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<div
|
||||
className={[
|
||||
"grid transition-[grid-template-rows] duration-200 ease-out",
|
||||
isOpen ? "grid-rows-[1fr]" : "grid-rows-[0fr]",
|
||||
].join(" ")}
|
||||
>
|
||||
<div className="overflow-hidden bg-white">
|
||||
<ul>
|
||||
{childMenus.map((child) => {
|
||||
const childActive = isMenuActive(pathname, child);
|
||||
|
||||
return (
|
||||
<li key={child.menuCd}>
|
||||
<Link
|
||||
href={child.urlPath || "#"}
|
||||
className={[
|
||||
"block border-b border-slate-200 bg-slate-50 px-5 py-4 pl-[60px] text-[18px] font-medium transition-colors",
|
||||
childActive
|
||||
? "cursor-default bg-white text-sky-500"
|
||||
: "text-slate-500 hover:bg-white hover:text-sky-500",
|
||||
].join(" ")}
|
||||
>
|
||||
<span className="mr-2 text-current">-</span>
|
||||
{child.menuKornNm}
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{item.label}
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -12,10 +12,10 @@ import { useDmStore } from "@/app/store";
|
||||
const LS_USER_KEY = "user";
|
||||
|
||||
const DEFAULT_NAV_ITEMS: Pick<MenuItem, "menuCd" | "menuKornNm" | "urlPath" | "newWndwYn">[] = [
|
||||
{ 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() {
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 305 KiB After Width: | Height: | Size: 320 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 269 KiB After Width: | Height: | Size: 280 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 154 KiB After Width: | Height: | Size: 151 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 199 KiB After Width: | Height: | Size: 210 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 214 KiB After Width: | Height: | Size: 204 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 526 KiB After Width: | Height: | Size: 528 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 421 KiB After Width: | Height: | Size: 403 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 483 KiB After Width: | Height: | Size: 478 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 124 KiB After Width: | Height: | Size: 126 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 214 KiB After Width: | Height: | Size: 226 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 195 KiB After Width: | Height: | Size: 215 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 197 KiB After Width: | Height: | Size: 195 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 75 KiB After Width: | Height: | Size: 82 KiB |
Reference in New Issue
Block a user