230 lines
9.7 KiB
TypeScript
230 lines
9.7 KiB
TypeScript
// 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>
|
||
);
|
||
}
|