367 lines
13 KiB
TypeScript
367 lines
13 KiB
TypeScript
"use client";
|
|
|
|
import CaseImageSlider from "@/components/CaseImageSlider";
|
|
|
|
type SewageCase = {
|
|
id: string;
|
|
title: string;
|
|
slides: {
|
|
src: string;
|
|
alt: string;
|
|
}[];
|
|
projectName: string;
|
|
purpose: string[];
|
|
method?: string[];
|
|
details: string[];
|
|
note?: string[];
|
|
};
|
|
|
|
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}`} />;
|
|
}
|
|
|
|
function InfoBlock({
|
|
title,
|
|
items,
|
|
}: {
|
|
title: string;
|
|
items?: string[];
|
|
}) {
|
|
if (!items || items.length === 0) return null;
|
|
|
|
return (
|
|
<div>
|
|
<BlockTitle>{title}</BlockTitle>
|
|
<ul className="mt-4 list-disc space-y-2 pl-8 text-[16px] leading-[1.8] text-[#4F4F4F]">
|
|
{items.map((item, index) => (
|
|
<li key={`${title}-${index}`}>{item}</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function InfoList({ item }: { item: SewageCase }) {
|
|
return (
|
|
<div className="mt-10 space-y-9 px-10">
|
|
<InfoBlock title="사업명" items={[item.projectName]} />
|
|
<InfoBlock title="사업목적" items={item.purpose} />
|
|
<InfoBlock title="사업방식" items={item.method} />
|
|
<InfoBlock title="사업 주요 내용" items={item.details} />
|
|
<InfoBlock title="특이사항" items={item.note} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const sewageCases: SewageCase[] = [
|
|
{
|
|
id: "example-sewage-guri",
|
|
title: "경기도 구리시",
|
|
slides: [
|
|
{
|
|
src: "/images/landing/business/sewage/guri_01.png",
|
|
alt: "구리시 도로자동청소시스템",
|
|
},
|
|
{
|
|
src: "/images/landing/business/sewage/guri_02.png",
|
|
alt: "구리시 도로자동청소시스템 위치도",
|
|
},
|
|
{
|
|
src: "/images/landing/business/sewage/guri_03.png",
|
|
alt: "구리시 도로자동청소시스템 위치도2",
|
|
},
|
|
{
|
|
src: "/images/landing/business/sewage/guri_04.png",
|
|
alt: "구리시 도로자동청소시스템 원리",
|
|
},
|
|
],
|
|
projectName: "구리시 도로자동청소시스템 설치사업",
|
|
purpose: [
|
|
"고농도 미세먼지 발생 및 폭염의 급증에 따라 공공하수처리시설 발생 재이용수 일부를 도로자동청소시스템에 활용하여 미세먼지 저감 및 폭염 취약성 완화",
|
|
],
|
|
details: [
|
|
"총사업비 : 61억원",
|
|
"위치 : 구리시 경춘로 및 갈매중앙로 일대 등",
|
|
"관로 : 5.8km",
|
|
"공급량 : 178㎥/일",
|
|
],
|
|
},
|
|
{
|
|
id: "example-sewage-bucheon",
|
|
title: "경기도 부천시",
|
|
slides: [
|
|
{
|
|
src: "/images/landing/business/sewage/bucheon_01.png",
|
|
alt: "부천시 하수 재이용수 생산시설",
|
|
},
|
|
{
|
|
src: "/images/landing/business/sewage/bucheon_02.png",
|
|
alt: "부천시 하수처리수 재이용 사례",
|
|
},
|
|
],
|
|
projectName: "부천시 하수 재이용수 생산시설 설치 운영",
|
|
purpose: [
|
|
"굴포하수처리시설 하수처리수 재이용수 생산시설 설치 운영을 통해 여월천 등 부천 관내 하천의 건천화 방지, 하천 생태계 보존 및 주민들에게 친수 공간 제공",
|
|
],
|
|
details: [
|
|
"총사업비 : 212억원",
|
|
"위치 : 부천시 여월천, 삼정천, 심곡천 및 시민의 강",
|
|
"관로 : 23.6km",
|
|
"공급량 : 50,000㎥/일",
|
|
],
|
|
},
|
|
{
|
|
id: "example-sewage-suwon",
|
|
title: "경기도 수원시",
|
|
slides: [
|
|
{
|
|
src: "/images/landing/business/sewage/suwon_01.png",
|
|
alt: "수원시 황구지천1",
|
|
},
|
|
{
|
|
src: "/images/landing/business/sewage/suwon_02.png",
|
|
alt: "수원시 황구지천2",
|
|
},
|
|
{
|
|
src: "/images/landing/business/sewage/suwon_03.png",
|
|
alt: "수원시 황구지천 지도",
|
|
},
|
|
],
|
|
projectName: "수원시 황구지천 하수처리수 재이용사업",
|
|
purpose: [
|
|
"황구지천 공공하수처리시설 하수처리수 재이용사업으로 황구 호매실천 및 금곡천 건천화 방지로 주민들에게 친수 공간 제공 및 하천 생태계 보전",
|
|
],
|
|
details: [
|
|
"총사업비 : 110억원",
|
|
"위치 : 수원시 권선구 호매실천, 금곡천",
|
|
"관로 : 3.9km",
|
|
"공급량 : 25,000㎥/일(하수처리시설 용량 : 45,000㎥/일)",
|
|
],
|
|
},
|
|
{
|
|
id: "example-sewage-paju",
|
|
title: "경기도 파주시",
|
|
slides: [
|
|
{
|
|
src: "/images/landing/business/sewage/paju_01.png",
|
|
alt: "파주시 하수처리수 시설 전경1",
|
|
},
|
|
{
|
|
src: "/images/landing/business/sewage/paju_02.png",
|
|
alt: "파주시 하수처리수 시설 전경2",
|
|
},
|
|
],
|
|
projectName: "파주시 하수처리수 재이용사업",
|
|
purpose: [
|
|
"운정 및 금촌하수처리시설의 하수처리수를 막공법으로 재처리하여 파주LCD산업단지 내 3개 업체에 공업용수를 공급(LG디스플레이, 희성전자, 엔비텍)",
|
|
"하수처리수 재이용시설 자체 농축폐수 처리공정 개발 및 적용 성공사례",
|
|
],
|
|
method: ["민간투자사업(시행사 : 파주그린허브(주), 운영사 : 테크로스)"],
|
|
details: [
|
|
"총사업비 : 651억원",
|
|
"위치 : 파주시 금촌동 714번지 일원",
|
|
"관로 : 13.6km",
|
|
"공급량 : 40,000㎥/일(시설용량 : 41,200㎥/일)",
|
|
],
|
|
},
|
|
{
|
|
id: "example-sewage-pohang",
|
|
title: "경상북도 포항시",
|
|
slides: [
|
|
{
|
|
src: "/images/landing/business/sewage/pohang_01.png",
|
|
alt: "포항시 하수처리수 전경1",
|
|
},
|
|
{
|
|
src: "/images/landing/business/sewage/pohang_02.png",
|
|
alt: "포항시 하수처리수 전경2",
|
|
},
|
|
{
|
|
src: "/images/landing/business/sewage/pohang_03.png",
|
|
alt: "포항시 하수처리수 재이용 공급계통",
|
|
},
|
|
],
|
|
projectName: "포항시 하수처리수 재이용사업",
|
|
purpose: [
|
|
"포항시 내 공단 개발 확대로 지속적이고 안정적인 공업용수 공급 추진(포스코, 동국산업 등)",
|
|
],
|
|
method: ["민간투자사업(운영사 : ㈜포웰, 한국수자원공사)"],
|
|
details: [
|
|
"총사업비 : 1,400억원",
|
|
"위치 : 포항시 남구 상도동 125번지 일원",
|
|
"관로 : 11.7km",
|
|
"공급량 : 100,000㎥/일(시설용량 : 100,000㎥/일)",
|
|
"처리공법 : 전처리시설(U/F) + 주처리시설(R/O)",
|
|
],
|
|
},
|
|
{
|
|
id: "example-sewage-ulsan",
|
|
title: "울산광역시",
|
|
slides: [
|
|
{
|
|
src: "/images/landing/business/sewage/ulsan_01.png",
|
|
alt: "울산광역시 폐수처리수 전경1",
|
|
},
|
|
{
|
|
src: "/images/landing/business/sewage/ulsan_02.png",
|
|
alt: "울산광역시 폐수처리수 전경2",
|
|
},
|
|
{
|
|
src: "/images/landing/business/sewage/ulsan_03.png",
|
|
alt: "울산광역시 폐수처리수 시설1",
|
|
},
|
|
{
|
|
src: "/images/landing/business/sewage/ulsan_04.png",
|
|
alt: "울산광역시 폐수처리수 시설2",
|
|
},
|
|
],
|
|
projectName: "울산광역시 폐수처리수 재이용사업",
|
|
purpose: [
|
|
"’18년 갈수기시 낙동강 수질 악화로 울산석유화학단지 용수 공급 부족을 해소하기 위해 미포산단 내 한화케미칼 등 8개사 공업용수 공급",
|
|
],
|
|
method: ["민간투자사업(시행사 :울산화이텍워터(주))"],
|
|
details: [
|
|
"총사업비 : 1,729억원",
|
|
"위치 : 울산광역시 울주군 청량읍 상개로 14 일원",
|
|
"관로 : 11.7km",
|
|
"공급량 : 17,000㎥/일(시설용량 : 86,000㎥/일)",
|
|
"처리공법 : 전처리시설(U/F) + 주처리시설(R/O, EDI)",
|
|
],
|
|
},
|
|
{
|
|
id: "example-sewage-yeosu",
|
|
title: "전라남도 여수시",
|
|
slides: [
|
|
{
|
|
src: "/images/landing/business/sewage/yeosu_01.png",
|
|
alt: "여수시 하수처리수 재이용시설1",
|
|
},
|
|
{
|
|
src: "/images/landing/business/sewage/yeosu_02.png",
|
|
alt: "여수시 하수처리수 재이용시설2",
|
|
},
|
|
],
|
|
projectName: "여수시 하수처리수 재이용사업",
|
|
purpose: [
|
|
"수요자가 원하는 양질의 공업용수를 저렴하게 공급하여 한정된 수자원의 효율적 이용 및 지역적 물 부족 해소, 하수재이용을 통한 오염총량 저감 및 방류수역 수질개선을 위한 여수국가산단 내 공업용수 공급(GS칼텍스, YNCC 등)",
|
|
],
|
|
method: ["민간투자사업(시행사 : 여수그린허브(주), 운영사 : 테크로스)"],
|
|
details: [
|
|
"총사업비 : 750억원",
|
|
"위치 : 여수시 신월로 284 일원",
|
|
"관로 : 18.6km",
|
|
"공급량 : 50,000㎥/일(시설용량 : 50,000㎥/일)",
|
|
"처리공법 : 전처리시설(U/F) + 주처리시설(R/O)",
|
|
],
|
|
},
|
|
{
|
|
id: "example-sewage-boryeong",
|
|
title: "충청남도 보령시",
|
|
slides: [
|
|
{
|
|
src: "/images/landing/business/sewage/boryeong_01.png",
|
|
alt: "보령시 하수처리수 재이용시설1",
|
|
},
|
|
{
|
|
src: "/images/landing/business/sewage/boryeong_02.png",
|
|
alt: "보령시 하수처리수 재이용시설2",
|
|
},
|
|
],
|
|
projectName: "보령시 하수처리수 재이용사업",
|
|
purpose: [
|
|
"한국중부발전(주)의 보령 및 신보령화력발전소에 10,000㎥/일의 탈황용수 공급을 위해 보령하수처리시설의 하수처리수 재이용 사업 추진",
|
|
"국내 유일 하수재이용 공업용수 공급 재정사업으로 2016년 충남 서부권 가뭄 시 지역사회 기여 차원에서 기관간 MOU(기후에너지환경부, 충청남도, 보령시, 한국중부발전(주))를 바탕으로 추진되어 경제성보다 공익성을 바탕으로 국가전력 기반시설의 안정적 운영 도모",
|
|
],
|
|
method: ["재정사업(2017년 한국환경공단과 사업대행 위·수탁협약 체결)"],
|
|
details: [
|
|
"총사업비 : 315억원",
|
|
"위치 : 보령시 대천방조제로 322 일원",
|
|
"관로 : 8.7km",
|
|
"공급량 : 10,000㎥/일(시설용량 : 10,000㎥/일)",
|
|
"처리공법 : 전처리시설(U/F) + 주처리시설(R/O)",
|
|
],
|
|
note: [
|
|
"국내 유일 하수재이용 공업용수 공급 재정사업으로 2016년 충남 서부권 가뭄 시 지역사회 기여 차원에서 기관간 MOU(환경부, 충청남도, 보령시, 한국중부발전㈜)를 바탕으로 추진 되어 경제성보다 공익성을 바탕으로 국가전력 기반시설의 안정적 운영 도모",
|
|
],
|
|
},
|
|
{
|
|
id: "example-sewage-asan",
|
|
title: "충청남도 아산시",
|
|
slides: [
|
|
{
|
|
src: "/images/landing/business/sewage/asan_01.png",
|
|
alt: "아산시 하수처리수 재이용시설",
|
|
},
|
|
{
|
|
src: "/images/landing/business/sewage/asan_02.png",
|
|
alt: "아산시 하수처리수 재이용 공정도",
|
|
},
|
|
],
|
|
projectName: "아산시 하수처리수 재이용사업",
|
|
purpose: [
|
|
"신도시 개발에 따른 인구 급증으로 발생하는 하수를 재처리하여 탕정산업단지(삼성디스플레이)에 공업용수를 안정적으로 공급함으로써 지역기반 및 활성화를 도모",
|
|
],
|
|
method: ["민간투자사업(시행사 : 아산스마트원터, 운영사 : 한국수자원공사)"],
|
|
details: [
|
|
"총사업비 : 297억원",
|
|
"위치 : 아산시 탕정면 갈산리 807 일원",
|
|
"관로 : 4.2km",
|
|
"공급량 : 27,000㎥/일(시설용량 : 45,000㎥/일)",
|
|
"처리공법 : 전처리시설(U/F) + 주처리시설(R/O)",
|
|
],
|
|
},
|
|
];
|
|
|
|
export default function SewageExampleSection() {
|
|
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]">
|
|
{sewageCases.map((item, index) => (
|
|
<section key={item.id} id={item.id} className="scroll-mt-[120px]">
|
|
<SectionTitle>{item.title}</SectionTitle>
|
|
|
|
<CaseImageSlider
|
|
className="mt-8"
|
|
maxWidthClassName="max-w-[1240px]"
|
|
slides={item.slides}
|
|
/>
|
|
|
|
<InfoList item={item} />
|
|
|
|
{index !== sewageCases.length - 1 && <Hr className="my-20" />}
|
|
</section>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
} |