781 lines
28 KiB
TypeScript
781 lines
28 KiB
TypeScript
"use client";
|
||
|
||
import Image from "next/image";
|
||
import CaseImageSlider from "@/components/CaseImageSlider";
|
||
|
||
type Slide = {
|
||
src: string;
|
||
alt: string;
|
||
};
|
||
|
||
type ContentBlock = {
|
||
title: string;
|
||
items: TextItem[];
|
||
};
|
||
|
||
type InfoCard = {
|
||
title: string;
|
||
desc: string;
|
||
};
|
||
|
||
type TableData = {
|
||
headers: string[];
|
||
rows: string[][];
|
||
};
|
||
|
||
type OverviewCompareRow = {
|
||
country: string;
|
||
flag?: string;
|
||
overseas: string;
|
||
current: string;
|
||
future: string;
|
||
};
|
||
|
||
type GlobalCase =
|
||
| {
|
||
type: "overview";
|
||
id: string;
|
||
title: string;
|
||
}
|
||
| {
|
||
type: "default";
|
||
id: string;
|
||
title: string;
|
||
slides: Slide[];
|
||
blocks?: ContentBlock[];
|
||
cards?: InfoCard[];
|
||
table?: TableData;
|
||
};
|
||
|
||
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 BlockTitle({ children }: { children: React.ReactNode }) {
|
||
return (
|
||
<div className="flex items-center gap-2">
|
||
<span className="relative inline-block h-[16px] w-[27px] align-middle">
|
||
<span className="absolute left-0 top-0 h-[16px] w-[16px] rounded-full bg-[#01ACE5]/40" />
|
||
<span className="absolute left-[7px] top-0 h-[16px] w-[16px] rounded-full bg-[#6DBB4F]/40" />
|
||
</span>
|
||
<h4 className="text-[20px] font-semibold text-[#1A1A1A]">{children}</h4>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function Hr({ className = "" }: { className?: string }) {
|
||
return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
|
||
}
|
||
|
||
type TextItem =
|
||
| string
|
||
| {
|
||
text: React.ReactNode;
|
||
depth?: number; // 0: 기본 / 1: 하위 / 2: 더 하위
|
||
};
|
||
|
||
function ContentList({ items }: { items: TextItem[] }) {
|
||
return (
|
||
<ul className="mt-4 space-y-2 text-[16px] leading-[1.8] text-[#4F4F4F]">
|
||
{items.map((item, index) => {
|
||
const isString = typeof item === "string";
|
||
const text = isString ? item : item.text;
|
||
const depth = isString ? 0 : item.depth ?? 0;
|
||
|
||
if (depth === 3) {
|
||
return (
|
||
<li key={index} className="ml-[56px] list-none text-[#777]">
|
||
* {text}
|
||
</li>
|
||
);
|
||
}
|
||
|
||
if (depth === 2) {
|
||
return (
|
||
<li key={index} className="ml-[52px] list-none text-[#666]">
|
||
{text}
|
||
</li>
|
||
);
|
||
}
|
||
|
||
if (depth === 1) {
|
||
return (
|
||
<li key={index} className="ml-[34px] list-none text-[#777]">
|
||
- {text}
|
||
</li>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<li key={index} className="ml-6 list-disc pl-1 font-semibold text-[#555]">
|
||
{text}
|
||
</li>
|
||
);
|
||
})}
|
||
</ul>
|
||
);
|
||
}
|
||
|
||
function ContentBlocks({
|
||
blocks,
|
||
cards,
|
||
table,
|
||
}: {
|
||
blocks?: ContentBlock[];
|
||
cards?: InfoCard[];
|
||
table?: TableData;
|
||
}) {
|
||
if (!blocks?.length) return null;
|
||
|
||
return (
|
||
<div className="mt-10 space-y-9 px-10">
|
||
{blocks.map((block, index) => (
|
||
<div key={`${block.title}-${index}`}>
|
||
<BlockTitle>{block.title}</BlockTitle>
|
||
|
||
{!!block.items.length && (
|
||
<ContentList items={block.items} />
|
||
)}
|
||
|
||
{block.title.includes("재생 수자원 개발법") && (
|
||
<InfoCards cards={cards} />
|
||
)}
|
||
|
||
{block.title.includes("대만 재이용 시설별 재이용수 공급단지") && (
|
||
<DataTable table={table} />
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function InfoCards({ cards }: { cards?: InfoCard[] }) {
|
||
if (!cards?.length) return null;
|
||
|
||
return (
|
||
<div className="mt-8 grid grid-cols-1 gap-5 md:grid-cols-2 xl:grid-cols-4">
|
||
{cards.map((card) => (
|
||
<div
|
||
key={card.title}
|
||
className="rounded-[8px] border-2 border-[#01ACE5] bg-[#EAF5F5] p-5"
|
||
>
|
||
<strong className="block text-[20px] font-bold text-[#333]">
|
||
{card.title}
|
||
</strong>
|
||
<p className="mt-3 text-[15px] leading-[1.6] text-[#555]">
|
||
{card.desc}
|
||
</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function DataTable({ table }: { table?: TableData }) {
|
||
if (!table) return null;
|
||
|
||
return (
|
||
<div className="mt-8 px-[120px]">
|
||
<table className="w-full min-w-[860px] border border-[#D8DDE3] text-center">
|
||
<thead>
|
||
<tr>
|
||
{table.headers.map((header, index) => (
|
||
<th
|
||
key={header}
|
||
className={[
|
||
"border border-[#D8DDE3] px-4 py-3 text-[18px] font-medium",
|
||
index === 0
|
||
? "bg-[#BFC9D2] text-[#222]"
|
||
: index === 1
|
||
? "bg-[#14A9D9] text-white"
|
||
: "bg-[#70BF4B] text-white",
|
||
].join(" ")}
|
||
>
|
||
{header}
|
||
</th>
|
||
))}
|
||
</tr>
|
||
</thead>
|
||
|
||
<tbody>
|
||
{table.rows.map((row, rowIndex) => (
|
||
<tr key={rowIndex}>
|
||
{row.map((cell, cellIndex) => (
|
||
<td
|
||
key={`${rowIndex}-${cellIndex}`}
|
||
className={[
|
||
"border border-[#D8DDE3] px-4 py-3 text-[16px] text-[#4F4F4F]",
|
||
cellIndex === 1
|
||
? "bg-[#EAF7F8]"
|
||
: cellIndex === 2
|
||
? "bg-[#EAF8E6]"
|
||
: "bg-white",
|
||
].join(" ")}
|
||
>
|
||
{cell}
|
||
</td>
|
||
))}
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
/* =========================
|
||
사례개요 전용 컴포넌트
|
||
========================= */
|
||
|
||
const compareRows: OverviewCompareRow[] = [
|
||
{
|
||
country: "한국",
|
||
flag: "/images/landing/business/globalCase/flag_kr.png",
|
||
overseas: "12.1%",
|
||
current: "15.6%",
|
||
future: "17%",
|
||
},
|
||
{
|
||
country: "대만",
|
||
flag: "/images/landing/business/globalCase/flag_tw.png",
|
||
overseas: "2.4%",
|
||
current: "4.3%",
|
||
future: "16.5%",
|
||
},
|
||
];
|
||
|
||
const reuseRateRows = [
|
||
["이스라엘", "중동&북아프리카", "92.3", "튀르키예", "동유럽&중앙아시아", "26.6"],
|
||
["쿠웨이트", "중동&북아프리카", "89.3", "독일", "서유럽", "25.0"],
|
||
["호주", "동아시아&태평양", "49.0", "스페인", "서유럽", "24.4"],
|
||
["싱가포르", "동아시아&태평양", "44.4", "한국", "동아시아&태평양", "12.1"],
|
||
["그리스", "서유럽", "39.1", "미국", "북아메리카", "13.1"],
|
||
["사우디아라비아", "중동&북아프리카", "32.8", "프랑스", "서유럽", "9.5"],
|
||
["이탈리아", "서유럽", "31.7", "대만", "동아시아&태평양", "2.4"],
|
||
["룩셈부르크", "서유럽", "29.1", "일본", "동아시아&태평양", "0.8"],
|
||
["포르투갈", "서유럽", "29.0", "", "", ""],
|
||
];
|
||
|
||
function WaterBullet() {
|
||
return (
|
||
<Image
|
||
src="/images/landing/business/globalCase/icon_bullet_water.png"
|
||
alt="bullet"
|
||
className="h-[33px] w-[27px] mt-1"
|
||
width={27}
|
||
height={33}
|
||
/>
|
||
);
|
||
}
|
||
|
||
function OverviewNoticeBox() {
|
||
return (
|
||
<div className="mx-auto mt-5 max-w-[1000px] rounded-[20px] bg-[#EAF7F8] px-8 py-7">
|
||
<div className="flex items-start gap-2">
|
||
<WaterBullet />
|
||
<div>
|
||
<strong className="block text-[26px] font-extrabold text-[#007FA4]">
|
||
우리나라 하수처리수 재이용률은 15% 수준
|
||
</strong>
|
||
|
||
<ul className="mt-5 list-disc space-y-2 pl-5 text-[16px] leading-[1.7] text-[#555]">
|
||
<li>
|
||
2024년 하수도 통계 기준 <b>15.6%</b>이며, 제2차 물 재이용 기본 계획을 고려한{" "}
|
||
<b style={{ color: "#1A1A1A" }}>2030년 목표는 17%</b>
|
||
</li>
|
||
<li>
|
||
대만은 가뭄과 공업용수 증가에 대응하여 <b style={{ color: "#1A1A1A" }}>현재 4.3% 수준이며, 16.5%까지 확대 계획 수립</b>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function OverviewCompareTable() {
|
||
return (
|
||
<div className="mx-auto mt-5 max-w-[1000px] overflow-x-auto">
|
||
<table className="w-full min-w-[760px] text-center">
|
||
<thead>
|
||
<tr>
|
||
<th className="bg-[#BFC9D2] px-4 py-4 text-[18px] font-medium text-[#222] rounded-tl-[10px] rounded-tr-[10px]">
|
||
국가
|
||
</th>
|
||
<th className="bg-[#14A9D9] px-4 py-4 text-[18px] font-medium text-white rounded-tl-[10px] rounded-tr-[10px]">
|
||
해외정보
|
||
</th>
|
||
<th className="bg-[#55BDA5] px-4 py-4 text-[18px] font-medium text-white rounded-tl-[10px] rounded-tr-[10px]">
|
||
현재
|
||
</th>
|
||
<th className="bg-[#6AB84E] px-4 py-4 text-[18px] font-medium text-white rounded-tl-[10px] rounded-tr-[10px]">
|
||
미래(목표, 예측치)
|
||
</th>
|
||
</tr>
|
||
</thead>
|
||
|
||
<tbody>
|
||
{compareRows.map((row) => (
|
||
<tr key={row.country}>
|
||
<td className="border border-[#AEB9C2] bg-white px-4 py-4 text-[20px] font-bold text-[#333]">
|
||
<div className="flex items-center justify-center gap-3">
|
||
{row.flag && (
|
||
<Image
|
||
key={row.country}
|
||
src={row.flag}
|
||
alt={`${row.country} 국기`}
|
||
className="h-[28px] w-[42px] object-cover"
|
||
width={42}
|
||
height={28}
|
||
/>
|
||
)}
|
||
{row.country}
|
||
</div>
|
||
</td>
|
||
<td className="border border-[#AEB9C2] bg-[#EAF7F8] px-4 py-4 text-[28px] font-bold text-[#4F4F4F]">
|
||
{row.overseas}
|
||
</td>
|
||
<td className="border border-[#AEB9C2] bg-white px-4 py-4 text-[28px] font-bold text-[#4F4F4F]">
|
||
{row.current}
|
||
</td>
|
||
<td className="border border-[#AEB9C2] bg-[#EAF8E6] px-4 py-4 text-[28px] font-bold text-[#4F4F4F]">
|
||
{row.future}
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function OverviewDescriptionBox() {
|
||
return (
|
||
<div className="mx-auto mt-5 max-w-[1000px] rounded-[20px] bg-[#EAF7F8] px-7 py-6">
|
||
<ul className="list-disc space-y-2 pl-5 text-[16px] leading-[1.7] text-[#555]">
|
||
<li>
|
||
전 세계적으로 물 재이용은 호주, 유럽, 아프리카, 미국 등 가뭄이 잦거나 심각한 가뭄이 발생한 국가에서 많이 이루어짐
|
||
</li>
|
||
<li>
|
||
이스라엘, 쿠웨이트 등 중동 및 북아프리카 지역은 가용 수자원이 제한되어 있어 재이용량 비중도 매우 높은 편
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function OverviewReuseRateTable() {
|
||
return (
|
||
<div className="mx-auto mt-5 max-w-[1000px] overflow-x-auto">
|
||
<table className="w-full min-w-[960px] text-center">
|
||
<thead>
|
||
<tr>
|
||
{["국가명", "지역", "재이용률", "국가명", "지역", "재이용률"].map((header, index) => (
|
||
<th
|
||
key={`${header}-${index}`}
|
||
className={[
|
||
"px-4 py-3 text-[17px] font-bold rounded-tl-[10px] rounded-tr-[10px]",
|
||
index % 3 === 0
|
||
? "bg-[#BFC9D2] text-[#222]"
|
||
: index % 3 === 1
|
||
? "bg-[#14A9D9] text-white"
|
||
: "bg-[#6AB84E] text-white",
|
||
].join(" ")}
|
||
>
|
||
{header}
|
||
</th>
|
||
))}
|
||
</tr>
|
||
</thead>
|
||
|
||
<tbody>
|
||
{reuseRateRows.map((row, rowIndex) => (
|
||
<tr key={rowIndex}>
|
||
{row.map((cell, cellIndex) => (
|
||
<td
|
||
key={`${rowIndex}-${cellIndex}`}
|
||
className={[
|
||
"border border-[#AEB9C2] px-4 py-3 text-[15px] text-[#4F4F4F]",
|
||
cellIndex % 3 === 1
|
||
? "bg-[#EAF7F8]"
|
||
: cellIndex % 3 === 2
|
||
? "bg-[#EAF8E6]"
|
||
: "bg-white font-semibold",
|
||
].join(" ")}
|
||
>
|
||
{cell}
|
||
</td>
|
||
))}
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function OverviewSection() {
|
||
return (
|
||
<div className="mt-10 px-10">
|
||
<div>
|
||
<BlockTitle>주요 국가 물 재이용 계획</BlockTitle>
|
||
<OverviewNoticeBox />
|
||
<OverviewCompareTable />
|
||
</div>
|
||
|
||
<div className="mt-8">
|
||
<BlockTitle>주요 국가의 하수처리수 재이용률 (%)</BlockTitle>
|
||
<OverviewDescriptionBox />
|
||
<OverviewReuseRateTable />
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
/* =========================
|
||
데이터
|
||
========================= */
|
||
|
||
const globalCases: GlobalCase[] = [
|
||
{
|
||
type: "overview",
|
||
id: "example-global-overview",
|
||
title: "사례 개요",
|
||
},
|
||
{
|
||
type: "default",
|
||
id: "example-global-taiwan",
|
||
title: "[대만] 국가 주도의 공업용수 공급",
|
||
slides: [
|
||
{
|
||
src: "/images/landing/business/globalCase/taiwan_01.png",
|
||
alt: "대만 국가 주도의 공업용수 공급 1",
|
||
},
|
||
{
|
||
src: "/images/landing/business/globalCase/taiwan_02.png",
|
||
alt: "대만 국가 주도의 공업용수 공급 2",
|
||
},
|
||
{
|
||
src: "/images/landing/business/globalCase/taiwan_03.png",
|
||
alt: "대만 국가 주도의 공업용수 공급 3",
|
||
},
|
||
],
|
||
blocks: [
|
||
{
|
||
title: "재생 수자원 개발법 제정 (2015년제정, 2022개정)",
|
||
items: [
|
||
{ text: "목적: 수자원 지속 가능성 향상, 재생 수자원 활용을 통해 물부족 문제 해결" },
|
||
{ text: "내용: 재생 수자원 정의·분류, 이용 의무, 이용 제한, 수질 기준 등" }
|
||
],
|
||
},
|
||
{
|
||
title: "대만정부 하수재이용 사업 시행",
|
||
items: [
|
||
{ text: "대만은 물 재이용에 적극적이며 국가주도로 하수재이용 사업 시행(안핑)" },
|
||
{ text: "1,518억의 사업비 중 92% 국비, 지방비 8% 투입", depth: 1 },
|
||
{ text: "재이용수는 24km 관로로 타이난 TSMC로 공급", depth: 1 },
|
||
{ text: "안핑을 포함한 16건 공사 완료시 628,100 CMD 공급 가능" },
|
||
{ text: "공급단가는 수질과 운영조건에 따라 다르게 책정" },
|
||
],
|
||
},
|
||
{
|
||
title: "대만 재이용 시설별 재이용수 공급단지",
|
||
items: [],
|
||
},
|
||
{
|
||
title: "특이사항",
|
||
items: [
|
||
"대만은 강수량이 풍부하지만 지역별 편차로 수자원 확보에 어려움을 겪고 있으며, 특히 남부 지역은 우기와 건기의 강수 차이가 큼",
|
||
"최근 수년간 심각한 가뭄이 발생하면서 반도체 산업을 국가 핵심 산업으로 지정, 공업용수 수요가 크게 증가",
|
||
"주요 반도체 공장이 남부에 집중되어 있어 물 부족 문제가 지속적으로 발생, 2021년 가뭄 당시 산업단지 용수 공급에도 차질 발생",
|
||
"정부는 2023년부터 산업용수 추가 요금을 부과하고, 농업용수 규제를 강화하는 등 용수 관리 정책 시행",
|
||
"기후변화 대응을 위해 수자원 보호 및 재이용 정책을 지속적으로 확대",
|
||
"산업용수 다소비 산업과 하수처리수를 재이용수 주요 공급원으로 활용 계획",
|
||
],
|
||
},
|
||
],
|
||
cards: [
|
||
{
|
||
title: "제4조.",
|
||
desc: "물 소비 계획에 따른 재이용수 이용 관련 내용 (일정 비율 재이용수 사용 규정)",
|
||
},
|
||
{
|
||
title: "제5조.",
|
||
desc: "재이용수의 운영자, 사용자 관련 내용 (지자체에서 하수 무상공급 제공 가능)",
|
||
},
|
||
{
|
||
title: "제7조.",
|
||
desc: "재이용수 이용 범위, 이용량 재이용수 수질 기준 내용",
|
||
},
|
||
{
|
||
title: "제8조.",
|
||
desc: "재이용수 사업 주체, 책임 등에 관한 내용 (광역인 경우, 정부가 지자체 지정)",
|
||
},
|
||
],
|
||
table: {
|
||
headers: ["사업", "가격(NTD/㎥)", "가격(원/㎥)"],
|
||
rows: [
|
||
["Fongshan(가오슝)", "23.39", "1,038원"],
|
||
["Linhai(가오슝)", "19.28", "858원"],
|
||
["Anping(타이난)", "38.28", "1,699원"],
|
||
["Yongkang(타이난)", "23.67", "1,050원"],
|
||
["Rende(타이난)", "28.26", "1,254원"],
|
||
["Shuinan(타이중)", "15.00", "668원"],
|
||
["Quaitou(가오슝)", "35.44", "1,573원"],
|
||
],
|
||
},
|
||
},
|
||
{
|
||
type: "default",
|
||
id: "example-global-singapore",
|
||
title: "[싱가포르] 수요가 높은 산업의 물 재이용 의무화",
|
||
slides: [
|
||
{
|
||
src: "/images/landing/business/globalCase/singapore_01.png",
|
||
alt: "싱가포르 NEWater 사례 1",
|
||
},
|
||
{
|
||
src: "/images/landing/business/globalCase/singapore_02.png",
|
||
alt: "싱가포르 NEWater 사례 2",
|
||
},
|
||
{
|
||
src: "/images/landing/business/globalCase/singapore_03.png",
|
||
alt: "싱가포르 NEWater 사례 3",
|
||
},
|
||
],
|
||
blocks: [
|
||
{
|
||
title: "싱가포르 NEWater 비중 확대",
|
||
items: [
|
||
"2003년 공식 NEWater 공장을 가동했으며 신뢰확보를 위해 NEWater Visitor Center를 함께 건설",
|
||
"NEWater 전체파이프 공급 → 반도체 공장에서 가장 많이 사용",
|
||
"2060년까지 NEWater 비중 55%까지 높이는 것이 싱가포르의 목표",
|
||
],
|
||
},
|
||
{
|
||
title: "싱가포르 재이용수 의무화 및 지원정책",
|
||
items: [
|
||
{ text: "공업용수 수요가 높은 산업에 대해 물 재이용을 의무화" },
|
||
{ text: "반도체업계 전체 비 재이용수(non-domestic용수) 17% 차지 → 공업용수 수요 원인", depth: 1 },
|
||
{ text: "2024년 1월 1일부터 연간 최소 60,000㎥를 소비하는 사업자는 재이용수 사용 의무화", depth: 1 },
|
||
{ text: "반도체 공장의 경우 최소 50% 이상의 재이용수를 요구함(현재는 43% 정도)", depth: 1 },
|
||
{ text: "재정 지원을 통해 재이용 활성화를 지원" },
|
||
{ text: "재이용 설비를 기준으로 2025년까지 싱가포르 수자원공사의 2가지 금융상품 제공", depth: 1 },
|
||
{ text: "1. Water Efficiency Fund", depth: 2 },
|
||
{ text: "2. Industrial Water Solutions Demonstration Fund", depth: 2 },
|
||
{ text: "2025년 기준 지원 한도 상향 → 물 재이용 활성 도모", depth: 1 },
|
||
{ text: "투입비용 50% → 75% 지원 / WSDP: $400만 → $500만", depth: 3 },
|
||
{ text: "물 효율이 높은 장비를 도입하는 데에도 최대 $300만 지원 가능", depth: 3 },
|
||
],
|
||
},
|
||
{
|
||
title: "특이사항",
|
||
items: [
|
||
{ text: "싱가포르는 천연 수자원이 많지 않아, 말레이시아 조호르와 1962년 맺은 협약으로 물을 수입해왔으며, 재이용수를 늘리기 위한 노력을 계속하고 있음" },
|
||
{ text: "싱가포르는 국토 내에 호수와 하천이 적고 집수공간도 적어 빗물로 확보할 수 있는 수자원량은 전체 물 수요의 20%에 불과함", depth: 1 },
|
||
|
||
{ text: "싱가포르는 2002년부터 하수 재이용수인 NEWater를 개발, 비음용수와 간접음용수로 활용하고 있음" },
|
||
{ text: "재이용수를 NEWater라는 이름으로 명명하고 NEWater에 대한 신뢰 확보를 위해 NEWater 방문자 센터도 건설함", depth: 1 },
|
||
{ text: "비음용수로 많이 사용하며 건기에는 NEWater를 저수지에 추가하여 원수와 섞음. 원수는 상수도에서 처리 한 후 가정에 수돗물로 공급함", depth: 1 },
|
||
{ text: "NEWater는 전용 파이프를 통해 주로 웨이퍼 제조 공장, 산업단지, 상업용 건물에서 산업 및 냉각수로 사용. 제일 많이 사용하는 곳은 웨이퍼 제조 공장", depth: 1 },
|
||
|
||
{ text: "2024년 4월 기준 1㎥ 당 공업용수 가격은 $1.66이며, Non-domestic 기준 NEWater 가격은 $2.41" },
|
||
{ text: "공업용수 가격 $1.66은 수도요금(water tariff)과 수자원세(waterborne tax)로 구분됨. $1.66에는 $1만큼의 수자원세가 포함됨" },
|
||
{ text: "2023년 싱가포르는 산업용수 수요가 높은 산업에 대해 물 재이용을 의무화했으며, 정부는 기금을 통해 물 재이용을 지원함" },
|
||
],
|
||
},
|
||
],
|
||
},
|
||
{
|
||
type: "default",
|
||
id: "example-global-australia",
|
||
title: "[호주] 생활 속 물 재이용 / 광역 물 재이용수 공급",
|
||
slides: [
|
||
{
|
||
src: "/images/landing/business/globalCase/australia_01.png",
|
||
alt: "호주 생활 속 물 재이용 1",
|
||
},
|
||
{
|
||
src: "/images/landing/business/globalCase/australia_02.png",
|
||
alt: "호주 광역 물 재이용수 공급 2",
|
||
},
|
||
{
|
||
src: "/images/landing/business/globalCase/australia_03.png",
|
||
alt: "호주 광역 물 재이용수 공급 3",
|
||
},
|
||
],
|
||
blocks: [
|
||
{
|
||
title: "생활용수로 재이용수의 적극 활용",
|
||
items: [
|
||
"재이용수를 공원, 골프장 등의 관계용수로 공급(초록색 지역)",
|
||
"Dual pipe로 재이용수를 특정 주거단지로 공급(보라색 지역)",
|
||
"현재 7,000여 가구가 재이용수를 사용",
|
||
"2030년까지 43,000가구로 확대 예정",
|
||
],
|
||
},
|
||
{
|
||
title: "호주 재이용수 광역 활용(퀸즈랜드주 브리즈번)",
|
||
items: [
|
||
{ text: "SEQ Water Grid는 브리즈번 남동부지역의 식수 공급을 위해 설정한 광역 수로망" },
|
||
{ text: "이 광역수로망을 활용하여 물이 부족한 지역으로 물을 공급" },
|
||
|
||
{
|
||
text: (
|
||
<>
|
||
12개 댐, 32개 수처리 시설, 3개 재이용시설, 담수화 플랜트 1개, 저수지 28개와{" "}
|
||
<span className="text-[#01ACE5]">
|
||
600km 이상의 물 공급 관로를 건설
|
||
</span>
|
||
</>
|
||
),
|
||
depth: 1,
|
||
},
|
||
{
|
||
text: (
|
||
<>
|
||
지역적으로 강수량이 고르지 않아,{" "}
|
||
<span className="text-[#01ACE5]">
|
||
댐의 저수율이 불균등 할 때
|
||
</span>{" "}
|
||
지역의 물 공급을 보충하는 중요한 역할 수행
|
||
</>
|
||
),
|
||
depth: 1,
|
||
},
|
||
|
||
{ text: "안핑을 포함한 16건 공사 완료시 628,100 CMD 공급 가능" },
|
||
{ text: "공급단가는 수질과 운영조건에 따라 다르게 책정" },
|
||
],
|
||
},
|
||
{
|
||
title: "특이사항",
|
||
items: [
|
||
"호주는 2000~2009년 강수량 감소로 밀레니엄 가뭄이 발생하여 심각한 물 부족 현상이 발생함",
|
||
"호주는 해안 도시에 인구가 밀집하여 거주하고 있으며 인구 증가율이 타 선진국 대비 높아, 향후 도시에 공급할 수자원 확보가 필요함",
|
||
"호주정부는 1990년대부터 하·폐수가 방류될 경우의 환경 피해에 대해 인식하기 시작하고 배출규제와 위원회를 구성하기 시작",
|
||
"연방정부는 주에 인센티브를 주는 방식으로 물 정책을 장려하고 토지소유권과 물 권리를 구분하여 거래를 허용하고 물 재이용 활성화를 위한 Water Smart Australia 프로그램을 시행",
|
||
"호주의 용수공급 체계는 영국과 미국의 특성들이 존재하지만, 주의 특성과 주정부의 정책 방향에 따라 주마다 많은 차이가 있음",
|
||
],
|
||
},
|
||
],
|
||
},
|
||
{
|
||
type: "default",
|
||
id: "example-global-eu",
|
||
title: "[EU] 법률을 제정, EU국가에서 물 재이용 유도",
|
||
slides: [
|
||
{
|
||
src: "/images/landing/business/globalCase/eu_01.png",
|
||
alt: "EU 물 재이용 기술 사례",
|
||
},
|
||
{
|
||
src: "/images/landing/business/globalCase/eu_02.png",
|
||
alt: "EU 물 재이용 유도 사례",
|
||
},
|
||
],
|
||
blocks: [
|
||
{
|
||
title: "물 재이용에 대한 법률을 제정(2020 제정, 2023 시행)",
|
||
items: [
|
||
"유럽 지역의 물 부족 문제를 인식하고 ’20년 물 재이용 법률을 제정 (2020/741)",
|
||
"2023년부터 모든 EU국가에서 시행",
|
||
],
|
||
},
|
||
{
|
||
title: "유럽연합 회원국 물 재이용 지원정책",
|
||
items: [
|
||
{ text: "유럽연합 차원에서 다양한 물 재이용 프로그램 자금 지원" },
|
||
|
||
{ text: "2021년부터 3년간 Life RECYCLIO 프로그램 지원 → 세부내용 물 재이용 프로그램", depth: 1 },
|
||
|
||
{ text: "1. 환경 관련 사업에 자금을 지원하는 Life 프로그램의 일환으로 80만 유로를 지원", depth: 2 },
|
||
{ text: "2. 식품·농업 분야 물 재이용 확대를 위해 기술 이전 및 평가 실시", depth: 2 },
|
||
|
||
{ text: "물 재이용 정책 수행을 위해 BOOST-INN 180만 유로를 지원", depth: 1 },
|
||
|
||
{ text: "프랑스, 이탈리아, 스페인 등 유럽 선진국 솔루션 공유", depth: 3 },
|
||
|
||
{ text: "EU산하 JRC(공동연구센터)에서 물 재이용 기술제공 지원" },
|
||
|
||
{ text: (
|
||
<>
|
||
‘물 재이용 회원 관리 실무 커뮤니티(Water Reuse Management Community of Practice)’ 시범사업 수행
|
||
<br />
|
||
유럽 전역에 성공적인 모델 활용 및 혁신적인 물 재이용 솔루션을 확장할 수 있는 기술을 제공
|
||
</>
|
||
),
|
||
depth: 1
|
||
}
|
||
],
|
||
},
|
||
{
|
||
title: "특이사항",
|
||
items: [
|
||
"2019년 기준 EU 인구의 38%가 물 부족의 영향을 받을 것으로 예상됨. 이 흐름대로면 2030년까지 유럽 유역 전반에 물 부족 문제가 발생하게 될 것으로 예상. 인구 증가, 도시화의 확대, 염분화 및 기후변화들이 수자원 문제들의 주요 요인이며, 식습관 변화와 산업용수 수요 증가 등으로 악화되고 있는 상황",
|
||
"유럽의 물 부족 상황은 지역에 따라 다르게 나타나 스페인을 비롯한 남부유럽에서 특히 심각함. 전반적으로 북유럽에 비해 남유럽의 물 스트레스가 심하며, 특히 스페인과 포르투갈, 프랑스 동부지역의 물 스트레스가 심각함",
|
||
"유럽 연합에서도 물 부족 문제를 인식하고 2000년 EU Water Framework Directive를 개발, 이후 2020년 재이용에 관한 법률을 제정",
|
||
],
|
||
},
|
||
],
|
||
},
|
||
];
|
||
|
||
function DefaultGlobalSection({
|
||
item,
|
||
}: {
|
||
item: Extract<GlobalCase, { type: "default" }>;
|
||
}) {
|
||
return (
|
||
<>
|
||
<CaseImageSlider
|
||
className="mt-8"
|
||
maxWidthClassName="max-w-[1240px]"
|
||
slides={item.slides}
|
||
/>
|
||
|
||
<ContentBlocks
|
||
blocks={item.blocks}
|
||
cards={item.cards}
|
||
table={item.table}
|
||
/>
|
||
</>
|
||
);
|
||
}
|
||
|
||
export default function GlobalCaseSection() {
|
||
const title = "해외 재이용 사례";
|
||
|
||
return (
|
||
<div className="bg-white">
|
||
<div className="inline-block">
|
||
<h2 className="relative inline-block px-2 text-[28px] font-extrabold leading-none tracking-tight text-slate-900">
|
||
<span className="relative z-10">{title}</span>
|
||
<span className="absolute bottom-[-4px] left-0 z-0 h-3 w-full bg-gradient-to-r from-sky-300 to-green-300" />
|
||
</h2>
|
||
</div>
|
||
|
||
<div className="mt-10 pb-[120px]">
|
||
{globalCases.map((item, index) => (
|
||
<section key={item.id} id={item.id} className="scroll-mt-[120px]">
|
||
<SectionTitle>{item.title}</SectionTitle>
|
||
|
||
{item.type === "overview" ? (
|
||
<OverviewSection />
|
||
) : (
|
||
<DefaultGlobalSection item={item} />
|
||
)}
|
||
|
||
{index !== globalCases.length - 1 && <Hr className="my-20" />}
|
||
</section>
|
||
))}
|
||
</div>
|
||
</div>
|
||
);
|
||
} |