383 lines
13 KiB
TypeScript
383 lines
13 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useRef } from "react";
|
|
|
|
export default function RainExampleSection() {
|
|
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 rain-example-sections">
|
|
<section id="example-rain-suwon" 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/rain/suwon_01.png" alt="수원시 빗물이용시설 사례 1" />
|
|
</div>
|
|
<div class="image-slide">
|
|
<img src="/images/landing/business/rain/suwon_02.png" alt="수원시 빗물이용시설 사례 2" />
|
|
</div>
|
|
</div>
|
|
<div class="image-slider-page">
|
|
<div class="image-slide">
|
|
<img src="/images/landing/business/rain/suwon_03.png" alt="수원시 빗물이용시설 사례 3" />
|
|
</div>
|
|
<div class="image-slide">
|
|
<img src="/images/landing/business/rain/suwon_04.png" alt="수원시 빗물이용시설 사례 4" />
|
|
</div>
|
|
</div>
|
|
<div class="image-slider-page">
|
|
<div class="image-slide">
|
|
<img src="/images/landing/business/rain/suwon_05.png" alt="수원시 빗물이용시설 사례 5" />
|
|
</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>월드컵경기장 등 4개소에 노면 빗물분사시스템 및 빗물공급기를 설치하여 축서기 도시 열섬효과 및 도로 비산먼지 저감</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>총사업비 : 20억원</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>
|
|
|
|
<div class="table-wrap">
|
|
<table class="contents-table rain-table">
|
|
<thead>
|
|
<tr>
|
|
<th class="th-blue">시설명</th>
|
|
<th class="th-teal">저류조용량(㎥)</th>
|
|
<th class="th-mint">빗물공급기</th>
|
|
<th class="th-green">빗물분사장치(m)</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>광교중학교</td>
|
|
<td>4,500</td>
|
|
<td rowspan="4">1대</td>
|
|
<td>160</td>
|
|
</tr>
|
|
<tr>
|
|
<td>수원월드컵경기장</td>
|
|
<td>12,000</td>
|
|
<td>451</td>
|
|
</tr>
|
|
<tr>
|
|
<td>수원종합운동장</td>
|
|
<td>10,000</td>
|
|
<td>231</td>
|
|
</tr>
|
|
<tr>
|
|
<td>수원컨벤션센터</td>
|
|
<td>3,600</td>
|
|
<td>460</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<section id="example-rain-jeju" 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/rain/jeju_01.png" alt="제주특별자치도 빗물이용시설 사례 1" />
|
|
</div>
|
|
<div class="image-slide">
|
|
<img src="/images/landing/business/rain/jeju_02.png" alt="제주특별자치도 빗물이용시설 사례 2" />
|
|
</div>
|
|
</div>
|
|
<div class="image-slider-page">
|
|
<div class="image-slide">
|
|
<img src="/images/landing/business/rain/jeju_03.png" alt="제주특별자치도 빗물이용시설 사례 3" />
|
|
</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>총사업비 : 278억원</li>
|
|
<li>위치 : 제주특별자치도 서귀포시 남원읍 위미리 일원</li>
|
|
<li>사업량 : 저류조 7,000㎥, 배수갑 500㎡, 관로 21.7km</li>
|
|
<li>사업기간 : 2024. 5. ~ 2028. 12.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
return (
|
|
<div
|
|
ref={rootRef}
|
|
className="bg-white"
|
|
dangerouslySetInnerHTML={{ __html: contentsHtml }}
|
|
/>
|
|
);
|
|
}
|