131 lines
4.2 KiB
TypeScript
131 lines
4.2 KiB
TypeScript
// apps/dm/app/(landing)/reuse/intro/law/page.tsx
|
|
"use client";
|
|
|
|
import Image, { type StaticImageData } from "next/image";
|
|
import SubPageHeader from "@/components/SubPageHeader";
|
|
import lawTimeline from "@/public/images/landing/intro/law_timeline.png";
|
|
import performanceLeft from "@/public/images/landing/intro/performance_left.png";
|
|
import domesticTextbox from "@/public/images/landing/intro/domestic_textbox.png";
|
|
import policyTimeline from "@/public/images/landing/intro/policy_timeline.png";
|
|
import relNote from "@/public/images/landing/intro/rel_note.png";
|
|
import linkage from "@/public/images/landing/intro/linkage.png";
|
|
|
|
function SectionTitle({ children }: { children: React.ReactNode }) {
|
|
return (
|
|
<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 WaterReuseLawPage() {
|
|
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={lawTimeline} alt="법제도 타임라인" />
|
|
</div>
|
|
</section>
|
|
|
|
<Hr className="my-11" />
|
|
|
|
{/* 2) 제2차 계획 대비 실적 현황 (2컬럼) */}
|
|
<section>
|
|
<SectionTitle>제 2차 계획 대비 실적 현황</SectionTitle>
|
|
<div className="mt-8">
|
|
<ImgCard src={performanceLeft} alt="실적 현황 요약" />
|
|
</div>
|
|
</section>
|
|
|
|
<Hr className="my-11" />
|
|
|
|
{/* 3) 국내 관련 현황 */}
|
|
<section>
|
|
<SectionTitle>국내 관련 현황</SectionTitle>
|
|
<div className="mt-8">
|
|
<ImgCard src={domesticTextbox} alt="국내 관련 현황 설명" />
|
|
</div>
|
|
</section>
|
|
|
|
<Hr className="my-11" />
|
|
|
|
{/* 4) 정책 변천 추이 */}
|
|
<section>
|
|
<SectionTitle>물 재이용 정책 변천 추이</SectionTitle>
|
|
<div className="mt-8">
|
|
<ImgCard src={policyTimeline} alt="정책 변천 타임라인" />
|
|
</div>
|
|
</section>
|
|
|
|
<Hr className="my-11" />
|
|
|
|
{/* 5) 타 법령과의 관계도 */}
|
|
<section>
|
|
<SectionTitle>타법령과의 관계도</SectionTitle>
|
|
<div className="mt-8">
|
|
<ImgCard src={relNote} alt="관계도 설명" />
|
|
</div>
|
|
</section>
|
|
|
|
<Hr className="my-11" />
|
|
|
|
{/* 6) 국내 연계 현황 */}
|
|
<section className="pb-[200px]">
|
|
<SectionTitle>국내 연계 현황</SectionTitle>
|
|
<div className="mt-8">
|
|
<div className="mx-[20px] mb-8">
|
|
<p className="text-[24px] font-semibold mb-2">주요 국가계획의 정책방향과 연계한 물 재이용 정책 필요</p>
|
|
<p className="text-[#4F4F4F]">국가 상위계획의 정책 방향이 기후위기 대응 등 수자원의 공급 안전성을 위한 물 재이용 활성화로 정책 실효성 제고 필요<br />
|
|
• 물관리 계획(국가수도기본계획, 국가 및 유역하수도종합계획, 하천유역수자원관리계획 등)과의 연계성 확보 → 통합적인 관점에서 물이용 체계 구축 필요
|
|
</p>
|
|
</div>
|
|
<ImgCard src={linkage} alt="국내 연계 현황" />
|
|
</div>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|