340 lines
19 KiB
TypeScript
340 lines
19 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useRef, useState } from 'react';
|
|
import Image from 'next/image';
|
|
|
|
const NAVS = [
|
|
{ id: 'card1', label: '물재이용이란' },
|
|
{ id: 'card2', label: '물재이용 필요성' },
|
|
{ id: 'card3', label: '빗물 재이용' },
|
|
{ id: 'card4', label: '중수 재이용' },
|
|
{ id: 'card5', label: '하수 재이용' },
|
|
{ id: 'card6', label: '물재이용 목표' },
|
|
];
|
|
|
|
export default function WrAboutPage() {
|
|
const [activeIdx, setActiveIdx] = useState(0);
|
|
const navRefs = useRef<(HTMLLIElement | null)[]>([]);
|
|
const cardRefs = useRef<(HTMLElement | null)[]>([]);
|
|
|
|
// 클릭 시 이동
|
|
const handleNavClick = (idx: number) => {
|
|
setActiveIdx(idx);
|
|
const targetCard = cardRefs.current[idx];
|
|
if (targetCard) {
|
|
targetCard.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
}
|
|
};
|
|
|
|
// 키보드 이벤트 처리
|
|
const handleKeyDown = (e: React.KeyboardEvent, idx: number) => {
|
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
e.preventDefault();
|
|
handleNavClick(idx);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
const observerOptions = {
|
|
root: null,
|
|
rootMargin: '-200px 0px 0px 0px', // 상단에서 200px 지점을 기준으로
|
|
threshold: 0
|
|
};
|
|
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach((entry) => {
|
|
if (entry.isIntersecting) {
|
|
const idx = cardRefs.current.findIndex(ref => ref === entry.target);
|
|
if (idx !== -1) {
|
|
setActiveIdx(idx);
|
|
}
|
|
}
|
|
});
|
|
}, observerOptions);
|
|
|
|
// 각 카드 요소를 관찰
|
|
const cardsSnapshot = [...cardRefs.current];
|
|
|
|
cardsSnapshot.forEach((card) => {
|
|
if (card) {
|
|
observer.observe(card);
|
|
}
|
|
});
|
|
|
|
return () => {
|
|
cardsSnapshot.forEach((card) => {
|
|
if (card) {
|
|
observer.unobserve(card);
|
|
}
|
|
});
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<div className='bg-[#F2F2F2]'>
|
|
<main className="relative w-[950px] mx-auto pt-[100px] font-sans">
|
|
{/* 사이드바 */}
|
|
<nav className="fixed left-[290px] top-[195px] w-[210px] z-50" aria-label="물재이용 정보 섹션 내비게이션">
|
|
<ul role="list" className="relative space-y-6">
|
|
{NAVS.map((nav, idx) => (
|
|
<li
|
|
key={nav.id}
|
|
ref={(el) => { navRefs.current[idx] = el; }}
|
|
role="listitem"
|
|
tabIndex={0}
|
|
aria-current={idx === activeIdx ? 'true' : 'false'}
|
|
aria-label={`현재 위치: ${nav.label}`}
|
|
onClick={() => handleNavClick(idx)}
|
|
onKeyDown={(e) => handleKeyDown(e, idx)}
|
|
className={`font-NotoSansKR nav-item relative pl-6 text-2xl font-bold text-[#383838] cursor-pointer transition-all duration-300
|
|
after:content-[''] after:absolute after:top-6 after:left-[0.5rem] after:w-[2px] after:h-[24px] after:bg-[#C5C5C5] last:after:hidden
|
|
${idx === activeIdx ? 'text-4xl font-bold text-[#383838]' : ''}`}
|
|
>
|
|
<span className={`absolute left-[0.5rem] top-1 w-4 h-4 rounded-full -translate-x-1/2 transition-all duration-300
|
|
${idx === activeIdx ? 'bg-blue-500 border-blue-500' : 'bg-white border-gray-400 border'}`}></span>
|
|
{nav.label}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</nav>
|
|
|
|
<article ref={(el) => { cardRefs.current[0] = el; }} className="card-wrap pl-[100px] mb-24 !pt-0" id="card1" aria-labelledby="card1-title">
|
|
<h2 id="card1-title" className="font-NotoSansKR relative text-center text-4xl font-medium text-gray-900 mb-6">
|
|
<span className="absolute left-1/2 top-[-15px] -translate-x-1/2 w-24 h-2 bg-blue-500 rounded-full"></span>
|
|
물재이용이란
|
|
</h2>
|
|
<section aria-labelledby="card1-desc" className="bg-white border border-gray-300 rounded-xl p-[60px] pt-[70px] pb-[70px] ">
|
|
<h1 id="card1-desc" className="font-NotoSansKR text-[#269DDA] text-5xl font-bold mb-8">물 재이용이 무엇인가요?</h1>
|
|
<p className="font-NotoSansKR text-[#231815] text-2xl mb-10 leading-relaxed">
|
|
물 재이용은 빗물, 오수, 하수처리수, 폐수처리수 및 발전소 온배수를<br />
|
|
물 재이용시설을 이용하여 처리하고, 그 처리된 물을 생활, 공업, 농업, 조경,<br />
|
|
하천 유지 등의 용도로 이용하는 것을 말합니다.
|
|
</p>
|
|
<Image
|
|
src="/img/wrAbout/img_01_1.png"
|
|
alt="이 이미지는 물 재이용 시스템의 개요를 나타냅니다. 가정, 공공기관, 하수처리장 등에서 발생한 생활하수, 빗물, 하수처리수를 물 재이용 시설에서 처리한 후, 청소나 화장실, 농업, 살수차, 하천 유지, 공장, 공원 및 골프장 등 다양한 용도로 활용하는 과정을 도식화한 것입니다."
|
|
width={800}
|
|
height={400}
|
|
className="w-[90%] mx-auto mb-8 rounded"
|
|
/>
|
|
<p className="font-NotoSansKR text-center font-normal text-2xl">
|
|
환경부는 2011년에 '물의 재이용 촉진 및 지원에 관한 법률'을 제정하여<br />
|
|
한국환경공단과 함께 물 재이용 확대 및 촉진을 위해 노력하고 있습니다.
|
|
</p>
|
|
</section>
|
|
</article>
|
|
|
|
{/* 카드2 */}
|
|
<article ref={(el) => { cardRefs.current[1] = el; }} className="card-wrap pl-[100px] mb-24" id="card2" aria-labelledby="card2-title">
|
|
<h2 id="card2-title" className="font-NotoSansKR relative text-center text-4xl font-medium text-gray-900 mb-6">
|
|
<span className="absolute left-1/2 top-[-15px] -translate-x-1/2 w-24 h-2 bg-blue-500 rounded-full"></span>
|
|
물재이용 필요성
|
|
</h2>
|
|
<section aria-labelledby="card2-desc" className="bg-white border border-gray-300 rounded-xl p-[60px] pt-[70px] pb-[70px] ">
|
|
<h1 id="card2-desc" className="font-NotoSansKR text-[#D63F1F] text-5xl font-semibold mb-8">물 재이용, 왜 필요한가요?</h1>
|
|
<p className="font-NotoSansKR text-2xl font-normal mb-10 leading-relaxed">
|
|
빗물, 중수, 하수처리수는 지속적으로 이용 가능한 순환자원입니다.<br />
|
|
물 재이용을 통한 효율적인 수자원 활용은 물 스트레스국가인 우리나라에서<br />가뭄대응능력 향상 및 하천수질보전을 위해 반드시 필요한 일입니다.
|
|
</p>
|
|
<Image
|
|
src="/img/wrAbout/img_02_1.png"
|
|
alt="이 이미지는 기후변화로 인한 온도 상승 추이를 설명한다. 왼쪽에는 지구 그림과 온도계가 함께 표시되어 있으며, 지구 평균 기온은 지난 100년간 약 0.9℃ 상승했음을 나타낸다. 오른쪽에는 대한민국 지도와 함께 온도계가 있으며, 지난 100년간 약 1.8℃ 상승했음을 보여준다. 이는 지구 평균보다 2배 높은 수치이며, 자료 출처는 「기후변화 평가보고서 2020, 환경부·기상청」이다."
|
|
width={800}
|
|
height={400}
|
|
className="w-[90%] mx-auto mb-8 w-[80%]"
|
|
/>
|
|
<p className="font-NotoSansKR text-2xl mb-10 leading-relaxed">
|
|
- 우리나라의 기후변화 진행속도는 세계 평균을 상회하고 있습니다.<br />
|
|
- 기후변화로 인한 국지적인 가뭄은 더욱 자주, 더욱 심하게 일어나고 있으며, 우리의 물 안보를 위협하고 있습니다.
|
|
</p>
|
|
<Image
|
|
src="/img/wrAbout/img_02_2.png"
|
|
alt="세계 평균 1인당 강수량은 15,044m³이며, 대한민국은 2,546m³로 약 1/6 수준입니다. 계절별 강수량은 봄 10%, 여름 70%, 가을 15%, 겨울 5%입니다. 이는 여름철에 강수량이 집중되는 문제를 나타냅니다."
|
|
width={800}
|
|
height={400}
|
|
className="w-[90%] mx-auto mb-8"
|
|
/>
|
|
<p className="font-NotoSansKR text-2xl mb-10 leading-relaxed">
|
|
- 우리나라의 1인당 강수량은 2,546㎥ 으로 세계 평균 15,044㎥의 약 1/6 수준입니다.<br />
|
|
- 우리나라 강수량의 70%는 여름철에 집중되어 있어 이용 가능한 수자원확보가 어렵습니다.
|
|
</p>
|
|
<Image
|
|
src="/img/wrAbout/img_02_3.png"
|
|
alt="물 재이용은 환경을 보호하며 지속 가능한 발전이 가능하게 하고, 안정적인 수자원 확보, 깨끗하고 경제적인 공업용수 공급, 하천 수질 개선을 통한 생태계 회복에 기여합니다."
|
|
width={800}
|
|
height={400}
|
|
className="w-[93%] mx-auto"
|
|
/>
|
|
</section>
|
|
</article>
|
|
|
|
{/* 카드3 */}
|
|
<article ref={(el) => { cardRefs.current[2] = el; }} className="card-wrap pl-[100px] mb-24" id="card3" aria-labelledby="card3-title">
|
|
<h2 id="card3-title" className="font-NotoSansKR relative text-center text-4xl font-medium text-gray-900 mb-6">
|
|
<span className="absolute left-1/2 top-[-15px] -translate-x-1/2 w-24 h-2 bg-blue-500 rounded-full"></span>
|
|
빗물 재이용
|
|
</h2>
|
|
<section aria-labelledby="card3-desc" className="bg-white border border-gray-300 rounded-xl p-[60px] pt-[70px] pb-[70px] ">
|
|
<h1 id="card3-desc" className="font-NotoSansKR leading-snug text-[#269DDA] text-5xl font-bold mb-6">친환경 수자원 빗물,<br />편리하게 사용할 수 있어요!</h1>
|
|
<p className="font-NotoSansKR text-2xl mb-10 leading-relaxed">가뭄을 극복하고 홍수를 예방하기 위해<br />비가 내릴 때 빗물을 모아두었다가 사용합니다.</p>
|
|
<Image
|
|
src="/img/wrAbout/img_03_1.png"
|
|
alt="주택 지붕에 내린 빗물을 저장조에 모아 조경용수, 화장실용수, 세척·살수용수로 재활용하는 과정을 보여줍니다."
|
|
width={800}
|
|
height={400}
|
|
className="w-[90%] mx-auto mb-6"
|
|
/>
|
|
<Image
|
|
src="/img/wrAbout/img_03_2.png"
|
|
alt="빗물이용"
|
|
width={200}
|
|
height={100}
|
|
className="mb-5 w-[20%]"
|
|
/>
|
|
<p className="font-NotoSansKR text-2xl leading-relaxed">
|
|
- 의무 설치대상: 지붕면적 1,000㎡ 이상의 운동장, 체육관, 공공업무시설 등<br />
|
|
- 설 치 기 준: 집수시설, 처리시설, 빗물 저류조(지붕 집수면적 x 0.05m 이상)<br />
|
|
- 활 용 용 도: 골프장 등의 조경용수, 화장실용수, 세척·살수용수 등
|
|
</p>
|
|
</section>
|
|
</article>
|
|
|
|
{/* 카드4 */}
|
|
<article ref={(el) => { cardRefs.current[3] = el; }} className="card-wrap pl-[100px] mb-24" id="card4" aria-labelledby="card4-title">
|
|
<h2 id="card4-title" className="font-NotoSansKR relative text-center text-4xl font-medium text-gray-900 mb-6">
|
|
<span className="absolute left-1/2 top-[-15px] -translate-x-1/2 w-24 h-2 bg-blue-500 rounded-full"></span>
|
|
중수 재이용
|
|
</h2>
|
|
<section aria-labelledby="card4-desc" className="bg-white border border-gray-300 rounded-xl p-[60px] pt-[70px] pb-[70px] ">
|
|
<h1 id="card4-desc" className="font-NotoSansKR leading-snug text-[#9771B0] text-5xl font-bold mb-6">요모조모 쓸모 많은 중수,<br />알뜰하게 재이용할 수 있어요!</h1>
|
|
<p className="font-NotoSansKR text-2xl mb-10 leading-relaxed">한번 사용한 물을 중수도 시설을 통해 재생하여<br />개별적 또는 지역적으로 재이용할 수 있습니다.</p>
|
|
<Image
|
|
src="/img/wrAbout/img_04_1.png"
|
|
alt="욕실, 세면대, 주방, 세탁기 등에서 발생한 생활용수를 중수도 시설에서 처리하여 화장실 변기용수와 조경용수로 재이용하는 시스템 흐름도입니다."
|
|
width={800}
|
|
height={400}
|
|
className="w-[90%] mx-auto mb-6"
|
|
/>
|
|
<Image
|
|
src="/img/wrAbout/img_04_2.png"
|
|
alt="중수재이용"
|
|
width={200}
|
|
height={100}
|
|
className="mb-5 w-[20%]"
|
|
/>
|
|
<p className="font-NotoSansKR text-2xl leading-relaxed">
|
|
- 의무 설치대상: 일정규모 이상의 대규모점포, 숙박/목욕장, 공장, 각종 개발사업 등<br />
|
|
- 의무 재이용량: 물 사용량의 10% 이상<br />
|
|
- 활 용 용 도: 청소·화장실용수, 세척·살수용수, 조경용수, 공업용수 등
|
|
</p>
|
|
</section>
|
|
</article>
|
|
|
|
{/* 카드5 */}
|
|
<article ref={(el) => { cardRefs.current[4] = el; }} className="card-wrap pl-[100px] mb-24" id="card5" aria-labelledby="card5-title">
|
|
<h2 id="card5-title" className="font-NotoSansKR relative text-center text-4xl font-medium text-gray-900 mb-6">
|
|
<span className="absolute left-1/2 top-[-15px] -translate-x-1/2 w-24 h-2 bg-blue-500 rounded-full"></span>
|
|
하수 재이용
|
|
</h2>
|
|
<section aria-labelledby="card5-desc" className="bg-white border border-gray-300 rounded-xl p-[60px] pt-[70px] pb-[70px] ">
|
|
<h1 id="card5-desc" className="font-NotoSansKR leading-snug text-[#00818A] text-5xl font-bold mb-6">아직 할 일이 많은 하수처리수,<br />풍족하게 재이용할 수 있어요!</h1>
|
|
<p className="font-NotoSansKR text-2xl mb-10 leading-relaxed">사용하고 버려져 공공하수처리장으로 모여든 물은<br />용도에 맞는 처리 후 재이용 할 수 있습니다.</p>
|
|
<Image
|
|
src="/img/wrAbout/img_05_1.png"
|
|
alt="주택과 건물에서 발생한 하수가 공공하수처리장을 거쳐 처리된 후, 물 재이용 시설에서 정화되어 공업용수, 하천유지용수, 농업용수, 세척·살수용수로 재활용됩니다."
|
|
width={800}
|
|
height={400}
|
|
className="w-[90%] mx-auto mb-6"
|
|
/>
|
|
<Image
|
|
src="/img/wrAbout/img_05_2.png"
|
|
alt="하수처리 재이용"
|
|
width={200}
|
|
height={100}
|
|
className="mb-5 w-[20%]"
|
|
/>
|
|
<p className="font-NotoSansKR text-2xl leading-relaxed">
|
|
- 의무 이용대상: 공공하수처리장(시설용량 5,000㎥/일 이상)<br />
|
|
- 의무 재이용량: 일 하수처리량의 10% 이상<br />
|
|
- 활 용 용 도: 공업용수, 하천유지용수, 농업용수 등
|
|
</p>
|
|
</section>
|
|
</article>
|
|
|
|
{/* 카드6 */}
|
|
<article ref={(el) => { cardRefs.current[5] = el; }} className="card-wrap pl-[100px] mb-24" id="card6" aria-labelledby="card6-title">
|
|
<h2 id="card6-title" className="font-NotoSansKR relative text-center text-4xl font-medium text-gray-900 mb-6">
|
|
<span className="absolute left-1/2 top-[-15px] -translate-x-1/2 w-24 h-2 bg-blue-500 rounded-full"></span>
|
|
물재이용 목표
|
|
</h2>
|
|
<section aria-labelledby="card6-desc" className="bg-white border border-gray-300 rounded-xl p-[60px] pt-[70px] pb-[70px] ">
|
|
<h1 id="card6-desc" className="font-NotoSansKR leading-snug text-[#269DDA] text-5xl font-bold mb-6">2030년 물 재이용 목표를 위해<br />모두의 관심과 노력이 필요합니다.</h1>
|
|
<p className="font-NotoSansKR text-2xl mb-6 leading-relaxed">
|
|
환경부는 2030년까지의 제2차 물 재이용 기본계획을 수립하여<br />한국환경공단과 함께 물 재이용 확대 및 촉진을 위해 노력하고 있습니다.
|
|
</p>
|
|
<Image
|
|
src="/img/wrAbout/img_06_1.png"
|
|
alt="지속가능한 물 재이용 정착으로 건전한 물순환 확산"
|
|
width={800}
|
|
height={400}
|
|
className="w-[80%] mx-auto mb-6"
|
|
/>
|
|
<div className="flex gap-3 flex-wrap justify-between bg-gray-100 p-6 rounded-lg mb-8">
|
|
<div className="flex-1 text-center">
|
|
<Image
|
|
src="/img/wrAbout/icon_01.png"
|
|
alt=""
|
|
width={70}
|
|
height={70}
|
|
className="mx-auto mb-4 w-[auto] h-[70px]"
|
|
/>
|
|
<h3 className="font-NotoSansKR text-center font-medium text-nowrap mb-2 text-2xl">도시 물 순환이용<br />체계로의 전환</h3>
|
|
<ul className="font-NotoSansKR text-xl text-gray-600 leading-relaxed space-y-1">
|
|
<li className="text-nowrap">- 지속가능한 물 순환이용체계 구축</li>
|
|
<li>- 물 재이용시설 관리체계 강화</li>
|
|
</ul>
|
|
</div>
|
|
<div className="flex-1 text-center">
|
|
<Image
|
|
src="/img/wrAbout/icon_02.png"
|
|
alt=""
|
|
width={70}
|
|
height={70}
|
|
className="mx-auto mb-4 w-[auto] h-[70px]"
|
|
/>
|
|
<h3 className="font-NotoSansKR text-center font-medium text-nowrap mb-2 text-2xl">유역기반 하수처리수 재이용<br />수요확대 및 공급체계 구축</h3>
|
|
<ul className="font-NotoSansKR text-xl text-gray-600 leading-relaxed space-y-1">
|
|
<li>- 유역기반 통합물관리 연계 강화</li>
|
|
<li>- 하수처리수 재이용 공업용수 공급 활성화</li>
|
|
<li>- 하수처리수 재이용을 활용한 물순환 촉진</li>
|
|
</ul>
|
|
</div>
|
|
<div className="flex-1 text-center">
|
|
<Image
|
|
src="/img/wrAbout/icon_03.png"
|
|
alt=""
|
|
width={70}
|
|
height={70}
|
|
className="mx-auto mb-4 w-[auto] h-[70px]"
|
|
/>
|
|
<h3 className="font-NotoSansKR text-center font-medium text-nowrap mb-2 text-2xl">물 재이용 인식제고<br />및 산업발전 기반 마련</h3>
|
|
<ul className="font-NotoSansKR text-xl text-gray-600 leading-relaxed space-y-1">
|
|
<li>- 물 재이용 교육 및 대국민 홍보 강화</li>
|
|
<li>- 핵심기술 육성 및 산업발전 지원 강화</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<Image
|
|
src="/img/wrAbout/img_06_2.png"
|
|
alt="물 재이용량은 2014년 13.3억톤에서 2030년 25.9억톤까지 증가할 것으로 예상됩니다. 그에 따른 기대 효과로는 연간 상수대체 17.9억톤, 물산업 시장성장 약 2조3,541억 원, 건천화된 73개 하천 해소, 약 20,550명의 고용 효과가 포함됩니다."
|
|
width={800}
|
|
height={400}
|
|
className="w-[90%] mx-auto"
|
|
/>
|
|
</section>
|
|
</article>
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|