ONAANDALL/frontend
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
968bf94de2e5e311050fb01a6d894ef6f9a6432f
frontend/apps/dm/app/(base-layout)/pages/wrExample/page.tsx
T

365 lines
21 KiB
TypeScript
Raw Blame History

import Image from "next/image";
export default function WrExamplePage() {
return (
<div className="bg-[#F2F2F2]">
<div className="relative w-[950px] mx-auto pt-[50px] font-sans">
<h2 className="font-NotoSansKR relative text-center text-4xl font-bold text-gray-900 mb-6">
<span className="absolute left-1/2 top-[-15px] -translate-x-1/2 w-24 h-2 rounded-full"></span>
물 재이용사례
</h2>
</div>
<div className="bg-[#F2F2F2] text-gray-800">
<div className="relative w-[950px] mx-auto pt-[50px] font-sans">
{/* 카드 1 */}
<div className="card-wrap mb-24" id="card1">
<h2 className="font-NotoSansKR relative text-center text-4xl font-bold 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>
사업사례 1
</h2>
<div className="bg-white border border-gray-300 rounded-xl p-[60px] pt-[70px] pb-[70px]">
{/* 사업명 */}
<section>
<h2 className="font-NotoSansKR text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">사업명</h2>
<p className="font-NotoSansKR text-2xl font-semibold text-gray-800 leading-relaxed">
경기권역 반도체 사업장 물 재이용 사업<br />
: 삼성전자 반도체 사업장 하수재이용수 공급(재이용시설 설치, 공급망 구축 등)
</p>
</section>
{/* 사업 배경 및 목적 */}
<section className="mt-8">
<h2 className="font-NotoSansKR text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">사업 배경 및 목적</h2>
<p className="font-NotoSansKR text-2xl font-semibold text-gray-800 leading-relaxed">
삼성전자는 환경경영전략 실현과 반도체 공장의 안정적 용수 공급을 위해 하수 재이용수를 공업용수로 도입하기로 결정
</p>
</section>
{/* 사업 주요 내용 */}
<section className="mt-8">
<h2 className="font-NotoSansKR text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">사업 주요 내용</h2>
<p className="font-NotoSansKR text-2xl font-semibold text-gray-800 leading-relaxed">
1단계 사업[화성·오산(12만㎥/일) → 삼성 화성·기흥(29년 공급)]<br />
2단계 사업[수원(21만㎥/일) → 삼성 평택(30년 공급)]
</p>
</section>
{/* 특이사항 */}
<section className="mt-8">
<h2 className="font-NotoSansKR text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">특이사항</h2>
<p className="font-NotoSansKR text-2xl font-semibold text-gray-800 leading-relaxed">
본 사업은 광역 하수 재이용 공급망 구축의 첫 사업으로 초기 민관협의체를 구성·운영 후 관계기관(환경부, 경기도, 지자체, 공단, 수공, 삼성전자) 간 MOU 체결을 통해 사업을 추진하였으며, 반도체 사업장에 하수 재이용수를 공업용수로 공급하는 국내 첫 사업으로 위협부담 해소를 위해 사업을 단계별로 시행
</p>
</section>
{/* 단계별 시각 정보 */}
<section className="bg-white px-4 mt-8">
<Image
src="/img/wrExample/img_ex_01_1.png"
alt="사업단계 설명"
width={800}
height={400}
className="w-[100%] mx-auto mb-8"
/>
</section>
</div>
</div>
{/* 카드2 */}
<div className="card-wrap mb-24" id="card2">
<h2 className="font-NotoSansKR relative text-center text-4xl font-bold 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>
사업사례 2
</h2>
<div className="bg-white border border-gray-300 rounded-xl p-[60px] pt-[70px] pb-[70px]">
{/* 사업명 */}
<section>
<h2 className="font-NotoSansKR text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">사업명</h2>
<p className="font-NotoSansKR text-2xl font-semibold text-gray-800 leading-relaxed">
경기도 파주시 하수재이용<br />
: 운정·금촌하수처리시설의 하수처리수를 막공법(U/F, R/O)으로 재처리하여 파주 LCD 산업단지내 3개 업체*에 공업용수 공급<br /><br />
*LG디스플레이(P10공장), 희성전자, 엔비텍 등
</p>
</section>
{/* 사업 방식 */}
<section className="mt-8">
<h2 className="font-NotoSansKR text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">사업 방식</h2>
<p className="font-NotoSansKR text-2xl font-semibold text-gray-800 leading-relaxed">
민간투자사업(시행사 : 파주그린허브(주), 운영사 : 테크로스)
</p>
</section>
{/* 사업 주요 내용 */}
<section className="mt-8">
<h2 className="font-NotoSansKR text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">사업 주요 내용</h2>
<p className="font-NotoSansKR text-2xl font-semibold text-gray-800 leading-relaxed">
처리공정 : 전처리분리막(U/F) + 역삼투서비(R/O)<br />
공급량 : 4만m³/일<br />
관로 : 13.6km<br />
사업비 : 651억원
</p>
</section>
{/* 특이사항 */}
<section className="mt-8">
<h2 className="font-NotoSansKR text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">특이사항</h2>
<p className="font-NotoSansKR text-2xl font-semibold text-gray-800 leading-relaxed">
하수처리수 재이용시설 자체 농축폐수 처리공정 개발 및 적용 성공사례
</p>
<div className="grid grid-cols-1 gap-0 items-start">
{/* 좌측 이미지 */}
<div>
<Image
src="/img/wrExample/img_ex_02_1.png"
alt="적용 성공사례 지도"
width={1000}
height={1200}
className="w-[100%] mx-auto"
/>
</div>
{/* 우측 표 */}
<div className="space-y-3">
{/* 하수처리수 공급 */}
<div>
<table className="min-w-full h-[500px]text-center border border-black">
<colgroup>
<col style={{ width: "20%" }} />
<col style={{ width: "40%" }} />
<col style={{ width: "40%" }} />
</colgroup>
<tbody>
<tr>
<td colSpan={3} className="font-NotoSansKR bg-[#ffc000] h-[30px] text-xl text-white font-semibold text-center pt-[6px] pb-[6px] px-0">하수처리수 공급</td>
</tr>
<tr className="text-xl h-[30px]">
<td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">위치</td>
<td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">금촌하수</td>
<td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">운정하수</td>
</tr>
<tr className="text-sm">
<td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">시설용량</td>
<td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">44,000㎥/일</td>
<td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">60,000㎥/일</td>
</tr>
<tr className="text-sm">
<td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">유입량</td>
<td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">27,000㎥/일<br />자연유하</td>
<td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">30,000㎥/일<br />이송펌프장</td>
</tr>
</tbody>
</table>
{/* 첫 화살표 (자연유하 / 관로이송) */}
<div className="flex h-[30px] justify-between items-center my-3 px-4">
<div className="flex text-xl items-center gap-1 text-orange-600 font-bold pl-6">
<span className="font-NotoSansKR">자연유하: 161m</span>
<Image
src="/img/wrExample/img_arrow_down_1.png"
alt="오른쪽 화살표"
width={24}
height={24}
className="h-6 w-6"
/>
</div>
<div className="flex text-xl items-center gap-1 text-orange-600 font-bold">
<Image
src="/img/wrExample/img_arrow_down_1.png"
alt="왼쪽 화살표"
width={24}
height={24}
className="h-6 w-6"
/>
<span className="font-NotoSansKR">관로이송: 3.2km</span>
</div>
</div>
</div>
{/* 물재이용 처리시설 */}
<div>
<table className="min-w-full text-center border border-black">
<colgroup>
<col style={{ width: "50%" }} />
<col style={{ width: "50%" }} />
</colgroup>
<tbody>
<tr>
<td colSpan={2} className="font-NotoSansKR bg-[#00b050] text-xl h-[30px] text-white font-semibold text-center pt-[6px] pb-[6px] px-0">물재이용 처리시설</td>
</tr>
<tr className="text-sm">
<td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">유입유량</td>
<td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">57,000㎥/일</td>
</tr>
<tr className="text-sm">
<td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">재이용시설</td>
<td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">40,000㎥/일</td>
</tr>
<tr className="text-sm">
<td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">농축폐수처리</td>
<td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">17,000㎥/일</td>
</tr>
</tbody>
</table>
{/* 두 번째 화살표 (공급관로) */}
<div className="flex flex-col items-center my-3">
<div className="flex h-[30px] items-center gap-1 text-xl text-blue-600 font-semibold">
<span className="font-NotoSansKR">공급관로 L=10.4km</span>
<Image
src="/img/wrExample/img_arrow_down_2.png"
alt="아래 화살표"
width={24}
height={24}
className="h-6 w-6"
/>
</div>
</div>
</div>
{/* 수요처 공급 */}
<div>
<table className="min-w-full text-center border border-black">
<colgroup>
<col style={{ width: "50%" }} />
<col style={{ width: "50%" }} />
</colgroup>
<tbody>
<tr>
<td colSpan={2} className="font-NotoSansKR bg-[#3399ff] h-[30px] text-xl text-white font-semibold text-center pt-[6px] pb-[6px] px-0">수요처 공급</td>
</tr>
<tr className="text-sm">
<td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">수요처</td>
<td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">LG디스플레이 외 2개사</td>
</tr>
<tr className="text-sm">
<td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">수요량</td>
<td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">40,000㎥/일</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
</div>
</div>
{/* 카드3 */}
<div className="card-wrap mb-24" id="card3">
<h2 className="font-NotoSansKR relative text-center text-4xl font-bold 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>
사업사례 3
</h2>
<div className="bg-white border border-gray-300 rounded-xl p-[60px] pt-[70px] pb-[70px]">
{/* 사업명 */}
<section>
<h2 className="font-NotoSansKR text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">사업명</h2>
<p className="font-NotoSansKR text-2xl font-semibold text-gray-800 leading-relaxed">
충남 보령 하수재이용<br />
: 보령·신보령화력발전소에 하루 1만톤의 탈황용수 공급을 위해 보령하수처리시설의 하수처리수 재이용 사업 추진
</p>
</section>
{/* 사업 방식 */}
<section className="mt-8">
<h2 className="font-NotoSansKR text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">사업 방식</h2>
<p className="font-NotoSansKR text-2xl font-semibold text-gray-800 leading-relaxed">
2017년 한국환경공단과 사업대행 위 · 수탁 협약 체결
</p>
</section>
{/* 사업 주요 내용 */}
<section className="mt-8">
<h2 className="font-NotoSansKR text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">사업 주요 내용</h2>
<p className="font-NotoSansKR text-2xl font-semibold text-gray-800 leading-relaxed">
처리공정 : 전처리분리막(U/F) + 역삼투서비(R/O)<br />
공급량 : 1만m3/일<br />
관로 : 8.7km<br />
사업비 : 315억원(국비 216억원, 재원협의(안))
</p>
</section>
{/* 특이사항 */}
<section className="mt-8">
<h2 className="font-NotoSansKR text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">특이사항</h2>
<p className="font-NotoSansKR text-2xl font-semibold text-gray-800 leading-relaxed">
국내 유일 하수재이용 공업용수 공급 재정사업으로 2016년 충남 서부권 가뭄 시 지역사회 기여 차원에서 기관간 MOU (환경부, 충청남도, 보령시, 한국중부발전㈜)를 바탕
으로 추진 되어 경제성보다 공익성을 바탕으로 국가전력 기반시설의 안정적 운영 도모
</p>
<div className="p-2">
<Image
src="/img/wrExample/img_ex_03_1.png"
alt="국가전력 기반시설 설명"
width={700}
height={350}
className="w-[100%] mx-auto"
/>
</div>
</section>
</div>
</div>
{/* 카드4 */}
<div className="card-wrap mb-24" id="card4">
<h2 className="font-NotoSansKR relative text-center text-4xl font-bold 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>
사업사례 4
</h2>
<div className="bg-white border border-gray-300 rounded-xl p-[60px] pt-[70px] pb-[70px]">
{/* 사업명 */}
<section>
<h2 className="font-NotoSansKR text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">사업명</h2>
<p className="font-NotoSansKR text-2xl font-semibold text-gray-800 leading-relaxed">
경기도 수원시 빗물이용과 중수도
</p>
</section>
{/* 사업 내용 */}
<section className="mt-8">
<h2 className="font-NotoSansKR text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">사업 내용</h2>
<p className="font-NotoSansKR text-2xl font-semibold text-gray-800 leading-relaxed">
(빗물) 월드컵경기장 등 4개소에 노면 빗물분사시스템 및 빗물 공급기를 설치하여 혹서기 도시 열섬효과 및 도로 비산먼지 저감<br />
&nbsp;&nbsp;※ 시설 가동중 도로 노면 온도의 7.2 ~ 26.3℃ 감소 효과 확인(21.7월, 수원시청).<br />
&nbsp;&nbsp;다만, 가뭄기나 강우량이 적을 경우 빗물을 원활히 공급하기 다소 곤란<br /><br />
- (중수도) 수원시청, 장안구청, 월드컵경기장에 빗물 연계 중수도를 화장실·조경용수 등으로 사용하여 수도요금 절감(연 7백~30백만원)
</p>
<div className="grid grid-cols-1 md:grid-cols-2 gap-2 items-start p-2">
<div>
<Image
src="/img/wrExample/img_ex_04_1.png"
alt="월드컵경기장 인근도로 노면 살수 이미지"
width={350}
height={250}
className="w-[100%] mx-auto"
/>
<span className="font-NotoSansKR text-xl block text-center font-semibold my-2">＜월드컵경기장 인근도로 노면 살수＞</span>
</div>
<div>
<Image
src="/img/wrExample/img_ex_04_2.png"
alt="주유기 모양의 빗물 공급기 이미지"
width={350}
height={250}
className="w-[100%] mx-auto"
/>
<span className="font-NotoSansKR text-xl block text-center font-semibold my-2">＜주유기 모양의 빗물 공급기＞</span>
</div>
<div>
<Image
src="/img/wrExample/img_ex_04_3.png"
alt="빗물주유기에서 살수용수 공급 이미지"
width={350}
height={250}
className="w-[100%] mx-auto"
/>
<span className="font-NotoSansKR text-xl block text-center font-semibold my-2">＜빗물주유기에서 살수용수 공급＞</span>
</div>
<div>
<Image
src="/img/wrExample/img_ex_04_4.png"
alt="빗물 공급기 및 빗물분사장치 위치"
width={350}
height={250}
className="w-[100%] mx-auto"
/>
<span className="font-NotoSansKR text-xl block text-center font-semibold my-2">＜빗물 공급기 및 빗물분사장치 위치＞</span>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
</div>
);
}
Reference in New Issue View Git Blame Copy Permalink