583 lines
31 KiB
TypeScript
583 lines
31 KiB
TypeScript
"use client";
|
||
|
||
import { useEffect, useRef } from "react";
|
||
|
||
export default function SewageExampleSection() {
|
||
const rootRef = useRef<HTMLDivElement>(null);
|
||
|
||
useEffect(() => {
|
||
const root = rootRef.current;
|
||
if (!root) return;
|
||
|
||
const cleanups: Array<() => void> = [];
|
||
const sliders = Array.from(root.querySelectorAll(".image-slider"));
|
||
|
||
sliders.forEach((sliderElement) => {
|
||
const slider = sliderElement as HTMLElement;
|
||
const viewport = slider.querySelector(
|
||
".image-slider-viewport",
|
||
) as HTMLElement | null;
|
||
const track = slider.querySelector(".image-slider-track") as HTMLElement | null;
|
||
const dotsWrap = slider.querySelector(
|
||
".image-slider-dots",
|
||
) as HTMLElement | null;
|
||
const pages = Array.from(
|
||
slider.querySelectorAll(".image-slider-page"),
|
||
) as HTMLElement[];
|
||
|
||
if (!viewport || !track || !dotsWrap || pages.length === 0) return;
|
||
|
||
let page = 0;
|
||
let dragging = false;
|
||
let isHover = false;
|
||
let startX = 0;
|
||
let deltaX = 0;
|
||
let timer: number | null = null;
|
||
|
||
const autoPlayMs = Number(slider.dataset.autoplay ?? "4500");
|
||
const canSlide = pages.length > 1;
|
||
|
||
if (!canSlide) {
|
||
dotsWrap.style.display = "none";
|
||
} else {
|
||
dotsWrap.style.display = "";
|
||
}
|
||
|
||
const render = () => {
|
||
track.style.transform = `translateX(-${page * 100}%)`;
|
||
|
||
Array.from(dotsWrap.querySelectorAll("button")).forEach((dot, index) => {
|
||
dot.classList.toggle("is-active", index === page);
|
||
});
|
||
};
|
||
|
||
const goTo = (nextPage: number) => {
|
||
if (!canSlide) return;
|
||
|
||
if (nextPage < 0) page = pages.length - 1;
|
||
else if (nextPage >= pages.length) page = 0;
|
||
else page = nextPage;
|
||
|
||
render();
|
||
};
|
||
|
||
const stopTimer = () => {
|
||
if (timer !== null) {
|
||
window.clearInterval(timer);
|
||
timer = null;
|
||
}
|
||
};
|
||
|
||
const startTimer = () => {
|
||
stopTimer();
|
||
if (!canSlide || dragging || isHover) return;
|
||
|
||
timer = window.setInterval(() => {
|
||
page = page + 1 >= pages.length ? 0 : page + 1;
|
||
render();
|
||
}, autoPlayMs);
|
||
};
|
||
|
||
const dotButtons = pages.map((_, index) => {
|
||
const button = document.createElement("button");
|
||
button.type = "button";
|
||
button.className = "image-slider-dot";
|
||
|
||
const onClick = () => {
|
||
goTo(index);
|
||
startTimer();
|
||
};
|
||
|
||
button.addEventListener("click", onClick);
|
||
dotsWrap.appendChild(button);
|
||
|
||
cleanups.push(() => {
|
||
button.removeEventListener("click", onClick);
|
||
});
|
||
|
||
return button;
|
||
});
|
||
|
||
const onMouseEnter = () => {
|
||
isHover = true;
|
||
stopTimer();
|
||
};
|
||
|
||
const onMouseLeave = () => {
|
||
isHover = false;
|
||
startTimer();
|
||
};
|
||
|
||
const onPointerDown = (event: PointerEvent) => {
|
||
if (!canSlide) return;
|
||
|
||
dragging = true;
|
||
startX = event.clientX;
|
||
deltaX = 0;
|
||
viewport.setPointerCapture(event.pointerId);
|
||
};
|
||
|
||
const onPointerMove = (event: PointerEvent) => {
|
||
if (!dragging) return;
|
||
deltaX = event.clientX - startX;
|
||
};
|
||
|
||
const onPointerUp = () => {
|
||
if (!dragging) return;
|
||
|
||
dragging = false;
|
||
|
||
if (deltaX > 50) goTo(page - 1);
|
||
if (deltaX < -50) goTo(page + 1);
|
||
|
||
deltaX = 0;
|
||
startTimer();
|
||
};
|
||
|
||
viewport.addEventListener("mouseenter", onMouseEnter);
|
||
viewport.addEventListener("mouseleave", onMouseLeave);
|
||
viewport.addEventListener("pointerdown", onPointerDown);
|
||
viewport.addEventListener("pointermove", onPointerMove);
|
||
viewport.addEventListener("pointerup", onPointerUp);
|
||
viewport.addEventListener("pointercancel", onPointerUp);
|
||
|
||
cleanups.push(() => {
|
||
stopTimer();
|
||
viewport.removeEventListener("mouseenter", onMouseEnter);
|
||
viewport.removeEventListener("mouseleave", onMouseLeave);
|
||
viewport.removeEventListener("pointerdown", onPointerDown);
|
||
viewport.removeEventListener("pointermove", onPointerMove);
|
||
viewport.removeEventListener("pointerup", onPointerUp);
|
||
viewport.removeEventListener("pointercancel", onPointerUp);
|
||
dotButtons.forEach((button) => button.remove());
|
||
});
|
||
|
||
render();
|
||
startTimer();
|
||
});
|
||
|
||
return () => {
|
||
cleanups.forEach((cleanup) => cleanup());
|
||
};
|
||
}, []);
|
||
|
||
const contentsHtml = `
|
||
<div class="contents-page">
|
||
<div class="page-title">
|
||
<h2>
|
||
<span class="title-text">하수처리수 재이용 사례</span>
|
||
<span class="title-bg"> </span>
|
||
</h2>
|
||
</div>
|
||
|
||
<div class="sections sewage-example-sections">
|
||
<section id="example-sewage-guri" class="section first">
|
||
<div class="section-title">
|
||
<span class="section-bar"> </span>
|
||
<h3>경기도 구리시</h3>
|
||
</div>
|
||
|
||
<div class="image-slider" data-autoplay="4500">
|
||
<div class="image-slider-inner">
|
||
<div class="image-slider-viewport">
|
||
<div class="image-slider-track">
|
||
<div class="image-slider-page">
|
||
<div class="image-slide"><img src="/images/landing/business/sewage/guri_01.png" alt="구리시 도로자동청소시스템" /></div>
|
||
<div class="image-slide"><img src="/images/landing/business/sewage/guri_02.png" alt="구리시 도로자동청소시스템 위치도" /></div>
|
||
</div>
|
||
<div class="image-slider-page">
|
||
<div class="image-slide"><img src="/images/landing/business/sewage/guri_03.png" alt="구리시 도로자동청소시스템 위치도2" /></div>
|
||
<div class="image-slide"><img src="/images/landing/business/sewage/guri_04.png" alt="구리시 도로자동청소시스템 원리" /></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="image-slider-dots"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="content-group">
|
||
<div class="content-block">
|
||
<div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky"> </span><span class="bubble bubble-green"> </span></span><h4>사업명</h4></div>
|
||
<ul class="bullet-list"><li>구리시 도로자동청소시스템 설치사업</li></ul>
|
||
</div>
|
||
<div class="content-block">
|
||
<div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky"> </span><span class="bubble bubble-green"> </span></span><h4>사업목적</h4></div>
|
||
<ul class="bullet-list"><li>고농도 미세먼지 발생 및 폭염의 급증에 따라 공공하수처리시설 발생 재이용수 일부를 도로자동청소시스템에 활용하여 미세먼지 저감 및 폭염 취약성 완화</li></ul>
|
||
</div>
|
||
<div class="content-block">
|
||
<div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky"> </span><span class="bubble bubble-green"> </span></span><h4>사업 주요 내용</h4></div>
|
||
<ul class="bullet-list">
|
||
<li>총사업비 : 61억원</li>
|
||
<li>위치 : 구리시 경춘로 및 갈매중앙로 일대 등</li>
|
||
<li>관로 : 5.8km</li>
|
||
<li>공급량 : 178㎥/일</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="divider"></div>
|
||
|
||
<section id="example-sewage-bucheon" class="section">
|
||
<div class="section-title"><span class="section-bar"> </span><h3>경기도 부천시</h3></div>
|
||
<div class="image-slider" data-autoplay="4500">
|
||
<div class="image-slider-inner">
|
||
<div class="image-slider-viewport">
|
||
<div class="image-slider-track">
|
||
<div class="image-slider-page">
|
||
<div class="image-slide"><img src="/images/landing/business/sewage/bucheon_01.png" alt="부천시 하수 재이용수 생산시설" /></div>
|
||
<div class="image-slide"><img src="/images/landing/business/sewage/bucheon_02.png" alt="부천시 하수처리수 재이용 사례" /></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="image-slider-dots"></div>
|
||
</div>
|
||
</div>
|
||
<div class="content-group">
|
||
<div class="content-block">
|
||
<div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky"> </span><span class="bubble bubble-green"> </span></span><h4>사업명</h4></div>
|
||
<ul class="bullet-list"><li>부천시 하수 재이용수 생산시설 설치 운영</li></ul>
|
||
</div>
|
||
<div class="content-block">
|
||
<div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky"> </span><span class="bubble bubble-green"> </span></span><h4>사업목적</h4></div>
|
||
<ul class="bullet-list"><li>굴포하수처리시설 하수처리수 재이용수 생산시설 설치 운영을 통해 여월천 등 부천 관내 하천의 건천화 방지, 하천 생태계 보존 및 주민들에게 친수 공간 제공</li></ul>
|
||
</div>
|
||
<div class="content-block">
|
||
<div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky"> </span><span class="bubble bubble-green"> </span></span><h4>사업 주요 내용</h4></div>
|
||
<ul class="bullet-list">
|
||
<li>총사업비 : 212억원</li>
|
||
<li>위치 : 부천시 여월천, 삼정천, 심곡천 및 시민의 강</li>
|
||
<li>관로 : 23.6km</li>
|
||
<li>공급량 : 50,000㎥/일</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="divider"></div>
|
||
|
||
<section id="example-sewage-suwon" class="section">
|
||
<div class="section-title"><span class="section-bar"> </span><h3>경기도 수원시</h3></div>
|
||
<div class="image-slider" data-autoplay="4500">
|
||
<div class="image-slider-inner">
|
||
<div class="image-slider-viewport">
|
||
<div class="image-slider-track">
|
||
<div class="image-slider-page">
|
||
<div class="image-slide"><img src="/images/landing/business/sewage/suwon_01.png" alt="수원시 황구지천1" /></div>
|
||
<div class="image-slide"><img src="/images/landing/business/sewage/suwon_02.png" alt="수원시 황구지천2" /></div>
|
||
</div>
|
||
<div class="image-slider-page">
|
||
<div class="image-slide"><img src="/images/landing/business/sewage/suwon_03.png" alt="수원시 황구지천 지도" /></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="image-slider-dots"></div>
|
||
</div>
|
||
</div>
|
||
<div class="content-group">
|
||
<div class="content-block">
|
||
<div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky"> </span><span class="bubble bubble-green"> </span></span><h4>사업명</h4></div>
|
||
<ul class="bullet-list"><li>수원시 황구지천 하수처리수 재이용사업</li></ul>
|
||
</div>
|
||
<div class="content-block">
|
||
<div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky"> </span><span class="bubble bubble-green"> </span></span><h4>사업목적</h4></div>
|
||
<ul class="bullet-list"><li>황구지천 공공하수처리시설 하수처리수 재이용사업으로 황구 호매실천 및 금곡천 건천화 방지로 주민들에게 친수 공간 제공 및 하천 생태계 보전</li></ul>
|
||
</div>
|
||
<div class="content-block">
|
||
<div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky"> </span><span class="bubble bubble-green"> </span></span><h4>사업 주요 내용</h4></div>
|
||
<ul class="bullet-list">
|
||
<li>총사업비 : 110억원</li>
|
||
<li>위치 : 수원시 권선구 호매실천, 금곡천</li>
|
||
<li>관로 : 3.9km</li>
|
||
<li>공급량 : 25,000㎥/일(하수처리시설 용량 : 45,000㎥/일)</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="divider"></div>
|
||
|
||
<section id="example-sewage-paju" class="section">
|
||
<div class="section-title"><span class="section-bar"> </span><h3>경기도 파주시</h3></div>
|
||
<div class="image-slider" data-autoplay="4500">
|
||
<div class="image-slider-inner">
|
||
<div class="image-slider-viewport">
|
||
<div class="image-slider-track">
|
||
<div class="image-slider-page">
|
||
<div class="image-slide"><img src="/images/landing/business/sewage/paju_01.png" alt="파주시 하수처리수 시설 전경1" /></div>
|
||
<div class="image-slide"><img src="/images/landing/business/sewage/paju_02.png" alt="파주시 하수처리수 시설 전경2" /></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="image-slider-dots"></div>
|
||
</div>
|
||
</div>
|
||
<div class="content-group">
|
||
<div class="content-block">
|
||
<div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky"> </span><span class="bubble bubble-green"> </span></span><h4>사업명</h4></div>
|
||
<ul class="bullet-list"><li>파주시 하수처리수 재이용사업</li></ul>
|
||
</div>
|
||
<div class="content-block">
|
||
<div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky"> </span><span class="bubble bubble-green"> </span></span><h4>사업목적</h4></div>
|
||
<ul class="bullet-list">
|
||
<li>운정 및 금촌하수처리시설의 하수처리수를 막공법으로 재처리하여 파주LCD산업단지 내 3개 업체에 공업용수를 공급(LG디스플레이, 희성전자, 엔비텍)</li>
|
||
<li>하수처리수 재이용시설 자체 농축폐수 처리공정 개발 및 적용 성공사례</li>
|
||
</ul>
|
||
</div>
|
||
<div class="content-block">
|
||
<div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky"> </span><span class="bubble bubble-green"> </span></span><h4>사업방식</h4></div>
|
||
<ul class="bullet-list"><li>민간투자사업(시행사 : 파주그린허브(주), 운영사 : 테크로스)</li></ul>
|
||
</div>
|
||
<div class="content-block">
|
||
<div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky"> </span><span class="bubble bubble-green"> </span></span><h4>사업 주요 내용</h4></div>
|
||
<ul class="bullet-list">
|
||
<li>총사업비 : 651억원</li>
|
||
<li>위치 : 파주시 금촌동 714번지 일원</li>
|
||
<li>관로 : 13.6km</li>
|
||
<li>공급량 : 40,000㎥/일(시설용량 : 41,200㎥/일)</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="divider"></div>
|
||
|
||
<section id="example-sewage-pohang" class="section">
|
||
<div class="section-title"><span class="section-bar"> </span><h3>경상북도 포항시</h3></div>
|
||
<div class="image-slider" data-autoplay="4500">
|
||
<div class="image-slider-inner">
|
||
<div class="image-slider-viewport">
|
||
<div class="image-slider-track">
|
||
<div class="image-slider-page">
|
||
<div class="image-slide"><img src="/images/landing/business/sewage/pohang_01.png" alt="포항시 하수처리수 전경1" /></div>
|
||
<div class="image-slide"><img src="/images/landing/business/sewage/pohang_02.png" alt="포항시 하수처리수 전경2" /></div>
|
||
</div>
|
||
<div class="image-slider-page">
|
||
<div class="image-slide"><img src="/images/landing/business/sewage/pohang_03.png" alt="포항시 하수처리수 재이용 공급계통" /></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="image-slider-dots"></div>
|
||
</div>
|
||
</div>
|
||
<div class="content-group">
|
||
<div class="content-block">
|
||
<div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky"> </span><span class="bubble bubble-green"> </span></span><h4>사업명</h4></div>
|
||
<ul class="bullet-list"><li>포항시 하수처리수 재이용사업</li></ul>
|
||
</div>
|
||
<div class="content-block">
|
||
<div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky"> </span><span class="bubble bubble-green"> </span></span><h4>사업목적</h4></div>
|
||
<ul class="bullet-list"><li>포항시 내 공단 개발 확대로 지속적이고 안정적인 공업용수 공급 추진(포스코, 동국산업 등)</li></ul>
|
||
</div>
|
||
<div class="content-block">
|
||
<div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky"> </span><span class="bubble bubble-green"> </span></span><h4>사업방식</h4></div>
|
||
<ul class="bullet-list"><li>민간투자사업(운영사 : ㈜포웰, 한국수자원공사)</li></ul>
|
||
</div>
|
||
<div class="content-block">
|
||
<div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky"> </span><span class="bubble bubble-green"> </span></span><h4>사업 주요 내용</h4></div>
|
||
<ul class="bullet-list">
|
||
<li>총사업비 : 1,400억원</li>
|
||
<li>위치 : 포항시 남구 상도동 125번지 일원</li>
|
||
<li>관로 : 11.7km</li>
|
||
<li>공급량 : 100,000㎥/일(시설용량 : 100,000㎥/일)</li>
|
||
<li>처리공법 : 전처리시설(U/F) + 주처리시설(R/O)</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="divider"></div>
|
||
|
||
<section id="example-sewage-ulsan" class="section">
|
||
<div class="section-title"><span class="section-bar"> </span><h3>울산광역시</h3></div>
|
||
<div class="image-slider" data-autoplay="4500">
|
||
<div class="image-slider-inner">
|
||
<div class="image-slider-viewport">
|
||
<div class="image-slider-track">
|
||
<div class="image-slider-page">
|
||
<div class="image-slide"><img src="/images/landing/business/sewage/ulsan_01.png" alt="울산광역시 폐수처리수 전경1" /></div>
|
||
<div class="image-slide"><img src="/images/landing/business/sewage/ulsan_02.png" alt="울산광역시 폐수처리수 전경2" /></div>
|
||
</div>
|
||
<div class="image-slider-page">
|
||
<div class="image-slide"><img src="/images/landing/business/sewage/ulsan_03.png" alt="울산광역시 폐수처리수 시설1" /></div>
|
||
<div class="image-slide"><img src="/images/landing/business/sewage/ulsan_04.png" alt="울산광역시 폐수처리수 시설2" /></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="image-slider-dots"></div>
|
||
</div>
|
||
</div>
|
||
<div class="content-group">
|
||
<div class="content-block">
|
||
<div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky"> </span><span class="bubble bubble-green"> </span></span><h4>사업명</h4></div>
|
||
<ul class="bullet-list"><li>울산광역시 폐수처리수 재이용사업</li></ul>
|
||
</div>
|
||
<div class="content-block">
|
||
<div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky"> </span><span class="bubble bubble-green"> </span></span><h4>사업목적</h4></div>
|
||
<ul class="bullet-list"><li>’18년 갈수기시 낙동강 수질 악화로 울산석유화학단지 용수 공급 부족을 해소하기 위해 미포산단 내 한화케미칼 등 8개사 공업용수 공급</li></ul>
|
||
</div>
|
||
<div class="content-block">
|
||
<div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky"> </span><span class="bubble bubble-green"> </span></span><h4>사업방식</h4></div>
|
||
<ul class="bullet-list"><li>민간투자사업(시행사 :울산화이텍워터(주))</li></ul>
|
||
</div>
|
||
<div class="content-block">
|
||
<div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky"> </span><span class="bubble bubble-green"> </span></span><h4>사업 주요 내용</h4></div>
|
||
<ul class="bullet-list">
|
||
<li>총사업비 : 1,729억원</li>
|
||
<li>위치 : 울산광역시 울주군 청량읍 상개로 14 일원</li>
|
||
<li>관로 : 11.7km</li>
|
||
<li>공급량 : 17,000㎥/일(시설용량 : 86,000㎥/일)</li>
|
||
<li>처리공법 : 전처리시설(U/F) + 주처리시설(R/O, EDI)</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="divider"></div>
|
||
|
||
<section id="example-sewage-yeosu" class="section">
|
||
<div class="section-title"><span class="section-bar"> </span><h3>전라남도 여수시</h3></div>
|
||
<div class="image-slider" data-autoplay="4500">
|
||
<div class="image-slider-inner">
|
||
<div class="image-slider-viewport">
|
||
<div class="image-slider-track">
|
||
<div class="image-slider-page">
|
||
<div class="image-slide"><img src="/images/landing/business/sewage/yeosu_01.png" alt="여수시 하수처리수 재이용시설1" /></div>
|
||
<div class="image-slide"><img src="/images/landing/business/sewage/yeosu_02.png" alt="여수시 하수처리수 재이용시설2" /></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="image-slider-dots"></div>
|
||
</div>
|
||
</div>
|
||
<div class="content-group">
|
||
<div class="content-block">
|
||
<div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky"> </span><span class="bubble bubble-green"> </span></span><h4>사업명</h4></div>
|
||
<ul class="bullet-list"><li>여수시 하수처리수 재이용사업</li></ul>
|
||
</div>
|
||
<div class="content-block">
|
||
<div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky"> </span><span class="bubble bubble-green"> </span></span><h4>사업목적</h4></div>
|
||
<ul class="bullet-list"><li>수요자가 원하는 양질의 공업용수를 저렴하게 공급하여 한정된 수자원의 효율적 이용 및 지역적 물 부족 해소, 하수재이용을 통한 오염총량 저감 및 방류수역 수질개선을 위한 여수국가산단 내 공업용수 공급(GS칼텍스, YNCC 등)</li></ul>
|
||
</div>
|
||
<div class="content-block">
|
||
<div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky"> </span><span class="bubble bubble-green"> </span></span><h4>사업방식</h4></div>
|
||
<ul class="bullet-list"><li>민간투자사업(시행사 : 여수그린허브(주), 운영사 : 테크로스)</li></ul>
|
||
</div>
|
||
<div class="content-block">
|
||
<div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky"> </span><span class="bubble bubble-green"> </span></span><h4>사업 주요 내용</h4></div>
|
||
<ul class="bullet-list">
|
||
<li>총사업비 : 750억원</li>
|
||
<li>위치 : 여수시 신월로 284 일원</li>
|
||
<li>관로 : 18.6km</li>
|
||
<li>공급량 : 50,000㎥/일(시설용량 : 50,000㎥/일)</li>
|
||
<li>처리공법 : 전처리시설(U/F) + 주처리시설(R/O)</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="divider"></div>
|
||
|
||
<section id="example-sewage-boryeong" class="section">
|
||
<div class="section-title"><span class="section-bar"> </span><h3>충청남도 보령시</h3></div>
|
||
<div class="image-slider" data-autoplay="4500">
|
||
<div class="image-slider-inner">
|
||
<div class="image-slider-viewport">
|
||
<div class="image-slider-track">
|
||
<div class="image-slider-page">
|
||
<div class="image-slide"><img src="/images/landing/business/sewage/boryeong_01.png" alt="보령시 하수처리수 재이용시설1" /></div>
|
||
<div class="image-slide"><img src="/images/landing/business/sewage/boryeong_02.png" alt="보령시 하수처리수 재이용시설2" /></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="image-slider-dots"></div>
|
||
</div>
|
||
</div>
|
||
<div class="content-group">
|
||
<div class="content-block">
|
||
<div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky"> </span><span class="bubble bubble-green"> </span></span><h4>사업명</h4></div>
|
||
<ul class="bullet-list"><li>보령시 하수처리수 재이용사업</li></ul>
|
||
</div>
|
||
<div class="content-block">
|
||
<div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky"> </span><span class="bubble bubble-green"> </span></span><h4>사업목적</h4></div>
|
||
<ul class="bullet-list">
|
||
<li>한국중부발전(주)의 보령 및 신보령화력발전소에 10,000㎥/일의 탈황용수 공급을 위해 보령하수처리시설의 하수처리수 재이용 사업 추진</li>
|
||
<li>국내 유일 하수재이용 공업용수 공급 재정사업으로 2016년 충남 서부권 가뭄 시 지역사회 기여 차원에서 기관간 MOU(기후에너지환경부, 충청남도, 보령시, 한국중부발전(주))를 바탕으로 추진되어 경제성보다 공익성을 바탕으로 국가전력 기반시설의 안정적 운영 도모</li>
|
||
</ul>
|
||
</div>
|
||
<div class="content-block">
|
||
<div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky"> </span><span class="bubble bubble-green"> </span></span><h4>사업방식</h4></div>
|
||
<ul class="bullet-list"><li>재정사업(2017년 한국환경공단과 사업대행 위·수탁협약 체결)</li></ul>
|
||
</div>
|
||
<div class="content-block">
|
||
<div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky"> </span><span class="bubble bubble-green"> </span></span><h4>사업 주요 내용</h4></div>
|
||
<ul class="bullet-list">
|
||
<li>총사업비 : 315억원</li>
|
||
<li>위치 : 보령시 대천방조제로 322 일원</li>
|
||
<li>관로 : 8.7km</li>
|
||
<li>공급량 : 10,000㎥/일(시설용량 : 10,000㎥/일)</li>
|
||
<li>처리공법 : 전처리시설(U/F) + 주처리시설(R/O)</li>
|
||
</ul>
|
||
</div>
|
||
<div class="content-block">
|
||
<div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky"> </span><span class="bubble bubble-green"> </span></span><h4>특이사항</h4></div>
|
||
<ul class="bullet-list"><li>국내 유일 하수재이용 공업용수 공급 재정사업으로 2016년 충남 서부권 가뭄 시 지역사회 기여 차원에서 기관간 MOU(환경부, 충청남도, 보령시, 한국중부발전㈜)를 바탕으로 추진 되어 경제성보다 공익성을 바탕으로 국가전력 기반시설의 안정적 운영 도모</li></ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="divider"></div>
|
||
|
||
<section id="example-sewage-asan" class="section">
|
||
<div class="section-title"><span class="section-bar"> </span><h3>충청남도 아산시</h3></div>
|
||
<div class="image-slider" data-autoplay="4500">
|
||
<div class="image-slider-inner">
|
||
<div class="image-slider-viewport">
|
||
<div class="image-slider-track">
|
||
<div class="image-slider-page">
|
||
<div class="image-slide"><img src="/images/landing/business/sewage/asan_01.png" alt="아산시 하수처리수 재이용시설" /></div>
|
||
<div class="image-slide"><img src="/images/landing/business/sewage/asan_02.png" alt="아산시 하수처리수 재이용 공정도" /></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="image-slider-dots"></div>
|
||
</div>
|
||
</div>
|
||
<div class="content-group">
|
||
<div class="content-block">
|
||
<div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky"> </span><span class="bubble bubble-green"> </span></span><h4>사업명</h4></div>
|
||
<ul class="bullet-list"><li>아산시 하수처리수 재이용사업</li></ul>
|
||
</div>
|
||
<div class="content-block">
|
||
<div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky"> </span><span class="bubble bubble-green"> </span></span><h4>사업목적</h4></div>
|
||
<ul class="bullet-list"><li>신도시 개발에 따른 인구 급증으로 발생하는 하수를 재처리하여 탕정산업단지(삼성디스플레이)에 공업용수를 안정적으로 공급함으로써 지역기반 및 활성화를 도모</li></ul>
|
||
</div>
|
||
<div class="content-block">
|
||
<div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky"> </span><span class="bubble bubble-green"> </span></span><h4>사업방식</h4></div>
|
||
<ul class="bullet-list"><li>민간투자사업(시행사 : 아산스마트원터, 운영사 : 한국수자원공사)</li></ul>
|
||
</div>
|
||
<div class="content-block">
|
||
<div class="block-title"><span class="block-title-icon"><span class="bubble bubble-sky"> </span><span class="bubble bubble-green"> </span></span><h4>사업 주요 내용</h4></div>
|
||
<ul class="bullet-list">
|
||
<li>총사업비 : 297억원</li>
|
||
<li>위치 : 아산시 탕정면 갈산리 807 일원</li>
|
||
<li>관로 : 4.2km</li>
|
||
<li>공급량 : 27,000㎥/일(시설용량 : 45,000㎥/일)</li>
|
||
<li>처리공법 : 전처리시설(U/F) + 주처리시설(R/O)</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
return (
|
||
<div
|
||
ref={rootRef}
|
||
className="bg-white"
|
||
dangerouslySetInnerHTML={{ __html: contentsHtml }}
|
||
/>
|
||
);
|
||
}
|