fix: 기존 표 이미지 제거 및 직접코딩
This commit is contained in:
이규현
@@ -1,14 +1,18 @@
|
||||
"use client";
|
||||
|
||||
import Image, { type StaticImageData } from "next/image";
|
||||
import SubPageHeader from "@/components/SubPageHeader";
|
||||
<<<<<<< Updated upstream
|
||||
import BusinessSubNav from "@/components/BusinessSubNav";
|
||||
|
||||
import greywaterOverall from "@/public/images/landing/cases/greywater_overall.png";
|
||||
import greywaterFactory from "@/public/images/landing/cases/greywater_factory.png";
|
||||
import greywaterBuilding from "@/public/images/landing/cases/greywater_building.png";
|
||||
import greywaterUsage from "@/public/images/landing/cases/greywater_usage.png";
|
||||
=======
|
||||
import React from "react";
|
||||
>>>>>>> Stashed changes
|
||||
|
||||
// 공통 섹션 타이틀 컴포넌트
|
||||
function SectionTitle({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<div className="flex items-center gap-3">
|
||||
@@ -18,10 +22,15 @@ function SectionTitle({ children }: { children: React.ReactNode }) {
|
||||
);
|
||||
}
|
||||
|
||||
<<<<<<< Updated upstream
|
||||
=======
|
||||
// 구분선
|
||||
>>>>>>> Stashed changes
|
||||
function Hr({ className = "" }: { className?: string }) {
|
||||
return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
|
||||
}
|
||||
|
||||
<<<<<<< Updated upstream
|
||||
function ImgCard({ src, alt }: { src: StaticImageData; alt: string }) {
|
||||
return (
|
||||
<div className="w-full overflow-x-auto">
|
||||
@@ -64,6 +73,38 @@ export default function GreywaterStatusPage() {
|
||||
crumbs={[
|
||||
{ label: "Home", href: "/main" },
|
||||
{ label: "물 재이용 현황", href: "/status/rain" },
|
||||
=======
|
||||
// 출처 텍스트
|
||||
function SourceText() {
|
||||
return (
|
||||
<p className="mt-7 text-center text-[13px] text-neutral-500">
|
||||
자료: 환경부(2024), 「2023 하수도 통계」
|
||||
</p>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* 공통 테이블 스타일
|
||||
* - table-fixed: 열 넓이를 고정하고 균등 분배하기 위해 추가
|
||||
* - 폰트 사이즈: 16px로 수정
|
||||
*/
|
||||
const tableStyles = {
|
||||
container: "w-[1000px] mx-auto overflow-hidden",
|
||||
table: "w-full table-fixed border-collapse text-center text-[16px]",
|
||||
th: "border border-[#858F98] py-3 font-bold text-neutral-800",
|
||||
td: "border border-[#858F98] py-3 text-neutral-700 font-medium break-keep",
|
||||
headerBg: "bg-[#E3E7EA]",
|
||||
};
|
||||
|
||||
export default function GreywaterPage() {
|
||||
return (
|
||||
<div className="bg-white">
|
||||
<SubPageHeader
|
||||
title="중수도(현황)"
|
||||
crumbs={[
|
||||
{ label: "Home", href: "/reuse" },
|
||||
{ label: "물 재이용 현황", href: "/reuse/cases/rain" },
|
||||
>>>>>>> Stashed changes
|
||||
{ label: "중수도(현황)" },
|
||||
]}
|
||||
hideFooterLine
|
||||
@@ -74,6 +115,7 @@ export default function GreywaterStatusPage() {
|
||||
<div className="pr-0">
|
||||
<Hr className="my-7" />
|
||||
|
||||
<<<<<<< Updated upstream
|
||||
<SectionShell
|
||||
id="status-greywater-overall"
|
||||
title="전체 중수도 설치 및 이용 현황 (공장 및 발전시설 제외)"
|
||||
@@ -81,27 +123,270 @@ export default function GreywaterStatusPage() {
|
||||
>
|
||||
<ImgCard src={greywaterOverall} alt="전체 중수도 설치 및 이용 현황" />
|
||||
</SectionShell>
|
||||
=======
|
||||
{/* 1) 전체 중수도 설치 및 이용 현황 (공장 및 발전시설 제외) */}
|
||||
<section className="mt-10">
|
||||
<SectionTitle>전체 중수도 설치 및 이용 현황 (공장 및 발전시설 제외)</SectionTitle>
|
||||
<div className="mt-10">
|
||||
<div className={tableStyles.container}>
|
||||
<table className={tableStyles.table}>
|
||||
{/* colgroup으로 열 너비를 최상단에서 완벽히 제어합니다 */}
|
||||
<colgroup>
|
||||
<col style={{ width: '130px' }} />
|
||||
<col style={{ width: '160px' }} />
|
||||
<col />
|
||||
<col />
|
||||
<col />
|
||||
<col />
|
||||
<col />
|
||||
<col />
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th colSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`}>구분</th>
|
||||
<th className={`${tableStyles.th} bg-[#01ACE5] text-white`}>2018</th>
|
||||
<th className={`${tableStyles.th} bg-[#14AFCD] text-white`}>2019</th>
|
||||
<th className={`${tableStyles.th} bg-[#28B2B4] text-white`}>2020</th>
|
||||
<th className={`${tableStyles.th} bg-[#3CB59A] text-white`}>2021</th>
|
||||
<th className={`${tableStyles.th} bg-[#50B880] text-white`}>2022</th>
|
||||
<th className={`${tableStyles.th} bg-[#6DBB4F] text-white`}>2023</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{[
|
||||
{
|
||||
group: "전체",
|
||||
rows: [
|
||||
["시설수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>", "576", "633", "682", "740", "819", "842"],
|
||||
["건축연면적 <span class='text-[13px] font-normal text-[#767676]'>(만m²)</span>", "1,494.2", "1,514.4", "1,524.9", "989.1", "1,104.3", "1,015.4"],
|
||||
["처리용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>", "39.6", "40.0", "51.1", "47.1", "48.9", "50.7"],
|
||||
["사용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/년)</span>", "2,224.0", "1,166.0", "4,377.3", "3,196.5", "2,752.5", "898.0"],
|
||||
]
|
||||
},
|
||||
{
|
||||
group: "법적 대상",
|
||||
rows: [
|
||||
["시설수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>", "196", "214", "253", "273", "287", "325"],
|
||||
["건축연면적 <span class='text-[13px] font-normal text-[#767676]'>(만m²)</span>", "649.7", "668.6", "720.9", "743.2", "760.4", "822.0"],
|
||||
["처리용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>", "20.0", "20.5", "21.1", "21.1", "21.2", "24.7"],
|
||||
["사용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/년)</span>", "614.7", "491.9", "518.1", "362.5", "349.6", "654.1"],
|
||||
]
|
||||
},
|
||||
{
|
||||
group: "법적 미대상",
|
||||
rows: [
|
||||
["시설수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>", "380", "419", "429", "467", "532", "517"],
|
||||
["건축연면적 <span class='text-[13px] font-normal text-[#767676]'>(만m²)</span>", "844.5", "845.8", "804.0", "245.8", "255.1", "282.3"],
|
||||
["처리용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>", "19.6", "19.5", "30.0", "26.0", "27.7", "26.0"],
|
||||
["사용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/년)</span>", "1,609.3", "674.1", "3,859.2", "2,834.0", "2,402.9", "243.9"],
|
||||
]
|
||||
}
|
||||
].map((section, sIdx) => (
|
||||
<React.Fragment key={sIdx}>
|
||||
{section.rows.map((row, rIdx) => (
|
||||
<tr key={`${sIdx}-${rIdx}`} className="bg-white">
|
||||
{rIdx === 0 && (
|
||||
<td
|
||||
rowSpan={section.rows.length}
|
||||
className={`${tableStyles.td} ${tableStyles.headerBg} !text-[18px] !font-bold !text-neutral-900`}
|
||||
>
|
||||
{section.group}
|
||||
</td>
|
||||
)}
|
||||
{row.map((val, i) => {
|
||||
const isFirstCol = i === 0;
|
||||
const isHighlightedCol = [1, 3, 5].includes(i);
|
||||
return (
|
||||
<td
|
||||
key={i}
|
||||
className={`${tableStyles.td} ${isFirstCol ? "!font-bold !text-neutral-900" : ""} ${isHighlightedCol ? "bg-[#EAF5F5]" : ""}`}
|
||||
dangerouslySetInnerHTML={{ __html: val }}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</tr>
|
||||
))}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<SourceText />
|
||||
</div>
|
||||
</section>
|
||||
>>>>>>> Stashed changes
|
||||
|
||||
<Hr className="my-11" />
|
||||
|
||||
<<<<<<< Updated upstream
|
||||
<SectionShell
|
||||
id="status-greywater-factory"
|
||||
title="공장 및 발전시설 내 중수도 설치 및 이용 현황"
|
||||
>
|
||||
<ImgCard src={greywaterFactory} alt="공장 및 발전시설 중수도 현황" />
|
||||
</SectionShell>
|
||||
=======
|
||||
{/* 2) 공장 및 발전시설 내 중수도 설치 및 이용 현황 */}
|
||||
<section>
|
||||
<SectionTitle>공장 및 발전시설 내 중수도 설치 및 이용 현황</SectionTitle>
|
||||
<div className="mt-8">
|
||||
<div className={tableStyles.container}>
|
||||
<table className={tableStyles.table}>
|
||||
<colgroup>
|
||||
<col style={{ width: '130px' }} />
|
||||
<col style={{ width: '160px' }} />
|
||||
<col />
|
||||
<col />
|
||||
<col />
|
||||
<col />
|
||||
<col />
|
||||
<col />
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th colSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`}>구분</th>
|
||||
<th className={`${tableStyles.th} bg-[#01ACE5] text-white`}>2018</th>
|
||||
<th className={`${tableStyles.th} bg-[#14AFCD] text-white`}>2019</th>
|
||||
<th className={`${tableStyles.th} bg-[#28B2B4] text-white`}>2020</th>
|
||||
<th className={`${tableStyles.th} bg-[#3CB59A] text-white`}>2021</th>
|
||||
<th className={`${tableStyles.th} bg-[#50B880] text-white`}>2022</th>
|
||||
<th className={`${tableStyles.th} bg-[#6DBB4F] text-white`}>2023</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{[
|
||||
{
|
||||
group: "전체",
|
||||
rows: [
|
||||
["시설수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>", "125", "127", "139", "146", "151", "176"],
|
||||
["처리용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>", "141.3", "141.0", "146.7", "189.0", "190.3", "166.5"],
|
||||
["사용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/년)</span>", "33,712", "29,300", "33,110", "22,284", "21,593", "21,349"],
|
||||
]
|
||||
},
|
||||
{
|
||||
group: "법적 대상",
|
||||
rows: [
|
||||
["시설수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>", "59", "63", "78", "78", "82", "86"],
|
||||
["처리용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>", "108.6", "109.7", "118.1", "159.5", "142.6", "119.4"],
|
||||
["사용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/년)</span>", "24,847", "24,021", "28,055", "17,959", "12,239", "12,297"],
|
||||
]
|
||||
},
|
||||
{
|
||||
group: "법적 미대상",
|
||||
rows: [
|
||||
["시설수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>", "66", "64", "61", "68", "69", "90"],
|
||||
["처리용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>", "32.7", "31.4", "28.7", "29.5", "47.7", "47.1"],
|
||||
["사용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/년)</span>", "8,864.9", "5,278.8", "5,054.7", "4,324.6", "9,353.3", "9,052.4"],
|
||||
]
|
||||
}
|
||||
].map((section, sIdx) => (
|
||||
<React.Fragment key={sIdx}>
|
||||
{section.rows.map((row, rIdx) => (
|
||||
<tr key={`${sIdx}-${rIdx}`} className="bg-white">
|
||||
{rIdx === 0 && (
|
||||
<td
|
||||
rowSpan={section.rows.length}
|
||||
className={`${tableStyles.td} ${tableStyles.headerBg} !text-[18px] !font-bold !text-neutral-900`}
|
||||
>
|
||||
{section.group}
|
||||
</td>
|
||||
)}
|
||||
{row.map((val, i) => {
|
||||
const isFirstCol = i === 0;
|
||||
const isHighlightedCol = [1, 3, 5].includes(i);
|
||||
return (
|
||||
<td
|
||||
key={i}
|
||||
className={`${tableStyles.td} ${isFirstCol ? "!font-bold !text-neutral-900" : ""} ${isHighlightedCol ? "bg-[#EAF5F5]" : ""}`}
|
||||
dangerouslySetInnerHTML={{ __html: val }}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</tr>
|
||||
))}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<SourceText />
|
||||
</div>
|
||||
</section>
|
||||
>>>>>>> Stashed changes
|
||||
|
||||
<Hr className="my-11" />
|
||||
|
||||
<<<<<<< Updated upstream
|
||||
<SectionShell
|
||||
id="status-greywater-building"
|
||||
title="중수도 건축물별 이용량 현황"
|
||||
>
|
||||
<ImgCard src={greywaterBuilding} alt="중수도 건축물별 이용량" />
|
||||
</SectionShell>
|
||||
=======
|
||||
{/* 3) 중수도 건축물별 이용량 현황 */}
|
||||
<section className="pb-16">
|
||||
<SectionTitle>중수도 건축물별 이용량 현황</SectionTitle>
|
||||
<div className="mt-8">
|
||||
<div className={tableStyles.container}>
|
||||
<table className={tableStyles.table}>
|
||||
<colgroup>
|
||||
<col style={{ width: '160px' }} />
|
||||
<col />
|
||||
<col />
|
||||
<col />
|
||||
<col />
|
||||
<col />
|
||||
<col />
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`}>구분</th>
|
||||
<th colSpan={6} className={`${tableStyles.th} ${tableStyles.headerBg} py-2`}>이용량 (천m³/년)</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th className={`${tableStyles.th} bg-[#01ACE5] text-white`}>2018</th>
|
||||
<th className={`${tableStyles.th} bg-[#14AFCD] text-white`}>2019</th>
|
||||
<th className={`${tableStyles.th} bg-[#28B2B4] text-white`}>2020</th>
|
||||
<th className={`${tableStyles.th} bg-[#3CB59A] text-white`}>2021</th>
|
||||
<th className={`${tableStyles.th} bg-[#50B880] text-white`}>2022</th>
|
||||
<th className={`${tableStyles.th} bg-[#6DBB4F] text-white`}>2023</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{[
|
||||
["공장·발전시설", "33,712.3", "29,300.6", "33,109.9", "22,284.1", "21,593.3", "21,349.6"],
|
||||
["교정시설", "1.3", "-", "0.4", "0.1", "0.1", "0.1"],
|
||||
["대규모점포", "393.0", "241.5", "259.3", "211.5", "369.2", "119.2"],
|
||||
["방송국·전신국", "9.7", "1.1", "12.7", "7.2", "7.4", "2.3"],
|
||||
["숙박·목욕장", "269.6", "234.4", "250.3", "128.1", "125.8", "104.9"],
|
||||
["업무시설", "338.2", "211.4", "268.0", "138.2", "116.4", "61.4"],
|
||||
["운수·물류시설", "759.2", "34.2", "459.8", "259.8", "252.8", "410.4"],
|
||||
["기타", "453.1", "443.3", "3,126.8", "2,451.5", "1,880.8", "199.7"],
|
||||
["합계", "35,936.3", "30,466.6", "37,487.2", "25,480.6", "24,345.8", "22,247.6"],
|
||||
].map((row, idx) => (
|
||||
<tr key={idx} className={idx === 8 ? "bg-white font-bold" : "bg-white"}>
|
||||
{row.map((val, i) => (
|
||||
<td
|
||||
key={i}
|
||||
className={`${tableStyles.td} ${i === 0 ? "!font-bold !text-neutral-900" : ""} ${[1, 3, 5].includes(i) ? "bg-[#EAF5F5]" : ""}`}
|
||||
>
|
||||
{val}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<SourceText />
|
||||
</div>
|
||||
</section>
|
||||
>>>>>>> Stashed changes
|
||||
|
||||
<Hr className="my-11" />
|
||||
|
||||
<<<<<<< Updated upstream
|
||||
<SectionShell
|
||||
id="status-greywater-usage"
|
||||
title="중수도 용도별 이용량 현황"
|
||||
@@ -110,6 +395,64 @@ export default function GreywaterStatusPage() {
|
||||
<ImgCard src={greywaterUsage} alt="중수도 용도별 이용량" />
|
||||
</SectionShell>
|
||||
</div>
|
||||
=======
|
||||
{/* 4) 중수도 용도별 이용량 현황 */}
|
||||
<section className="pb-[200px]">
|
||||
<SectionTitle>중수도 용도별 이용량 현황</SectionTitle>
|
||||
<div className="mt-8">
|
||||
<div className={tableStyles.container}>
|
||||
<table className={tableStyles.table}>
|
||||
<colgroup>
|
||||
<col style={{ width: '160px' }} />
|
||||
<col />
|
||||
<col />
|
||||
<col />
|
||||
<col />
|
||||
<col />
|
||||
<col />
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`}>구분</th>
|
||||
<th colSpan={6} className={`${tableStyles.th} ${tableStyles.headerBg} py-2`}>이용량 (천m³/년)</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th className={`${tableStyles.th} bg-[#01ACE5] text-white`}>2018</th>
|
||||
<th className={`${tableStyles.th} bg-[#14AFCD] text-white`}>2019</th>
|
||||
<th className={`${tableStyles.th} bg-[#28B2B4] text-white`}>2020</th>
|
||||
<th className={`${tableStyles.th} bg-[#3CB59A] text-white`}>2021</th>
|
||||
<th className={`${tableStyles.th} bg-[#50B880] text-white`}>2022</th>
|
||||
<th className={`${tableStyles.th} bg-[#6DBB4F] text-white`}>2023</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{[
|
||||
["공업용수", "33,082", "28,719", "32,312", "21,707", "20,991", "20,470"],
|
||||
["세척·살수용수", "860.2", "146.5", "133.8", "100.7", "95.1", "149.9"],
|
||||
["조경용수", "313.9", "326.4", "307.6", "67.3", "63.2", "65.9"],
|
||||
["청소·화장실용수", "1,650.7", "1,272", "1,345.7", "1,340", "1,435.8", "1,459.7"],
|
||||
["친수용수", "28.6", "0.5", "2,807.9", "2,258.1", "1,643.6", "9.1"],
|
||||
["미기재", "0.2", "2.0", "580.1", "7.3", "116.2", "92.4"],
|
||||
["합계", "35,935.6", "30,466.4", "37,487.1", "25,480.4", "24,344.9", "22,247"],
|
||||
].map((row, idx) => (
|
||||
<tr key={idx} className={idx === 6 ? "bg-white font-bold" : "bg-white"}>
|
||||
{row.map((val, i) => (
|
||||
<td
|
||||
key={i}
|
||||
className={`${tableStyles.td} ${i === 0 ? "!font-bold !text-neutral-900" : ""} ${[1, 3, 5].includes(i) ? "bg-[#EAF5F5]" : ""}`}
|
||||
>
|
||||
{val}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<SourceText />
|
||||
</div>
|
||||
</section>
|
||||
>>>>>>> Stashed changes
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,13 +1,16 @@
|
||||
"use client";
|
||||
|
||||
import Image, { type StaticImageData } from "next/image";
|
||||
import SubPageHeader from "@/components/SubPageHeader";
|
||||
<<<<<<< Updated upstream
|
||||
import BusinessSubNav from "@/components/BusinessSubNav";
|
||||
|
||||
import rainwaterBuilding from "@/public/images/landing/cases/rainwater_building.png";
|
||||
import rainwaterUsage from "@/public/images/landing/cases/rainwater_usage.png";
|
||||
import rainwaterUsageAmount from "@/public/images/landing/cases/rainwater_usage_amount.png";
|
||||
=======
|
||||
>>>>>>> Stashed changes
|
||||
|
||||
// 공통 섹션 타이틀 컴포넌트
|
||||
function SectionTitle({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<div className="flex items-center gap-3">
|
||||
@@ -17,10 +20,15 @@ function SectionTitle({ children }: { children: React.ReactNode }) {
|
||||
);
|
||||
}
|
||||
|
||||
<<<<<<< Updated upstream
|
||||
=======
|
||||
// 구분선
|
||||
>>>>>>> Stashed changes
|
||||
function Hr({ className = "" }: { className?: string }) {
|
||||
return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
|
||||
}
|
||||
|
||||
<<<<<<< Updated upstream
|
||||
function ImgCard({ src, alt }: { src: StaticImageData; alt: string }) {
|
||||
return (
|
||||
<div className="w-full overflow-x-auto">
|
||||
@@ -63,6 +71,37 @@ export default function RainStatusPage() {
|
||||
crumbs={[
|
||||
{ label: "Home", href: "/main" },
|
||||
{ label: "물 재이용 현황", href: "/status/rain" },
|
||||
=======
|
||||
// 출처 텍스트
|
||||
function SourceText() {
|
||||
return (
|
||||
<p className="mt-7 text-center text-[13px] text-neutral-500">
|
||||
자료: 환경부(2024), 「2023 하수도 통계」
|
||||
</p>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* 업데이트된 테이블 공통 스타일 클래스
|
||||
* - table-fixed 속성을 추가하여 열 넓이를 강제로 동일하게 분배합니다.
|
||||
*/
|
||||
const tableStyles = {
|
||||
container: "w-[1000px] mx-auto overflow-hidden",
|
||||
table: "w-full table-fixed border-collapse text-center text-[16px]",
|
||||
th: "border border-[#858F98] py-3 font-bold text-neutral-800",
|
||||
td: "border border-[#858F98] py-3 text-neutral-700 font-medium break-keep",
|
||||
headerBg: "bg-[#E3E7EA]",
|
||||
};
|
||||
|
||||
export default function RainwaterStatusPage() {
|
||||
return (
|
||||
<div className="bg-white">
|
||||
<SubPageHeader
|
||||
title="빗물이용시설(현황)"
|
||||
crumbs={[
|
||||
{ label: "Home", href: "/reuse" },
|
||||
{ label: "물 재이용 현황", href: "/reuse/cases/rain" },
|
||||
>>>>>>> Stashed changes
|
||||
{ label: "빗물이용시설(현황)" },
|
||||
]}
|
||||
hideFooterLine
|
||||
@@ -73,6 +112,7 @@ export default function RainStatusPage() {
|
||||
<div className="pr-0">
|
||||
<Hr className="my-7" />
|
||||
|
||||
<<<<<<< Updated upstream
|
||||
<SectionShell
|
||||
id="status-rain-building"
|
||||
title="빗물이용시설의 건축물별 빗물이용량 현황"
|
||||
@@ -83,9 +123,59 @@ export default function RainStatusPage() {
|
||||
alt="빗물이용시설의 건축물별 빗물이용량 현황"
|
||||
/>
|
||||
</SectionShell>
|
||||
=======
|
||||
{/* 1) 빗물이용시설의 건축물별 빗물이용량 현황 */}
|
||||
<section className="mt-10">
|
||||
<SectionTitle>빗물이용시설의 건축물별 빗물이용량 현황</SectionTitle>
|
||||
<div className="mt-10">
|
||||
<div className={tableStyles.container}>
|
||||
<table className={tableStyles.table}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`} style={{ width: '160px' }}>구분</th>
|
||||
<th colSpan={6} className={`${tableStyles.th} ${tableStyles.headerBg} py-2`}>빗물이용량 (천m³/년)</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th className={`${tableStyles.th} bg-[#01ACE5] text-white`} style={{ width: '140px' }}>2018</th>
|
||||
<th className={`${tableStyles.th} bg-[#17AFC7] text-white`} style={{ width: '140px' }}>2019</th>
|
||||
<th className={`${tableStyles.th} bg-[#2CB2A9] text-white`} style={{ width: '140px' }}>2020</th>
|
||||
<th className={`${tableStyles.th} bg-[#42B58B] text-white`} style={{ width: '140px' }}>2021</th>
|
||||
<th className={`${tableStyles.th} bg-[#57B86D] text-white`} style={{ width: '140px' }}>2022</th>
|
||||
<th className={`${tableStyles.th} bg-[#81C784] text-white`} style={{ width: '140px' }}>2023</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{[
|
||||
["골프장", "6,771.8", "6,417.4", "8,371.6", "10,215.4", "11,360", "10,191.6"],
|
||||
["공공시설", "364", "325.2", "201.9", "244.6", "209.9", "299.6"],
|
||||
["공동주택", "291", "840.5", "804.2", "2,393.0", "2,386", "2,428.4"],
|
||||
["대규모점포", "169.9", "214.4", "58.4", "427.2", "371", "293.3"],
|
||||
["체육시설", "52.6", "44.7", "48.6", "75.3", "71.8", "77.6"],
|
||||
["학교", "33", "25.5", "22", "155.8", "165.4", "32.6"],
|
||||
["기타", "311.6", "901.2", "344.5", "537.8", "564", "621.2"],
|
||||
].map((row, idx) => (
|
||||
<tr key={idx} className="bg-white">
|
||||
{row.map((val, i) => (
|
||||
<td
|
||||
key={i}
|
||||
className={`${tableStyles.td} ${i === 0 ? "!font-bold !text-neutral-900" : ""} ${[1, 3, 5].includes(i) ? "bg-[#EAF5F5]" : ""}`}
|
||||
>
|
||||
{val}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<SourceText />
|
||||
</div>
|
||||
</section>
|
||||
>>>>>>> Stashed changes
|
||||
|
||||
<Hr className="my-11" />
|
||||
|
||||
<<<<<<< Updated upstream
|
||||
<SectionShell
|
||||
id="status-rain-purpose-distribution"
|
||||
title="빗물이용시설의 용도별 분포(2023년 기준)"
|
||||
@@ -95,9 +185,68 @@ export default function RainStatusPage() {
|
||||
alt="빗물이용시설의 용도별 분포(2023년 기준)"
|
||||
/>
|
||||
</SectionShell>
|
||||
=======
|
||||
{/* 2) 빗물이용시설의 용도별 분포 (2023년 기준) */}
|
||||
<section>
|
||||
<SectionTitle>빗물이용시설의 용도별 분포 (2023년 기준)</SectionTitle>
|
||||
<div className="mt-8">
|
||||
<div className={tableStyles.container}>
|
||||
<table className={tableStyles.table}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`} style={{ width: '160px' }}>용도</th>
|
||||
<th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`} style={{ width: '84px' }}>개소수<br/>(개소)</th>
|
||||
<th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`} style={{ width: '84px' }}>저류용량<br/>(천m³)</th>
|
||||
<th colSpan={8} className={`${tableStyles.th} ${tableStyles.headerBg} py-2`}>빗물이용량 (천m³/년)</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th className={`${tableStyles.th} bg-[#01ACE5] text-white py-2 text-[13px]`} style={{ width: '84px' }}>총사용량</th>
|
||||
<th className={`${tableStyles.th} bg-[#10AED0] text-white py-2 text-[13px]`} style={{ width: '84px' }}>공공시설</th>
|
||||
<th className={`${tableStyles.th} bg-[#20B0BA] text-white py-2 text-[13px]`} style={{ width: '84px' }}>공동주택</th>
|
||||
<th className={`${tableStyles.th} bg-[#2FB2A5] text-white py-2 text-[13px]`} style={{ width: '84px' }}>대규모점포</th>
|
||||
<th className={`${tableStyles.th} bg-[#3FB58F] text-white py-2 text-[13px]`} style={{ width: '84px' }}>체육시설</th>
|
||||
<th className={`${tableStyles.th} bg-[#4EB77A] text-white py-2 text-[13px]`} style={{ width: '84px' }}>학교</th>
|
||||
<th className={`${tableStyles.th} bg-[#5EB964] text-white py-2 text-[13px]`} style={{ width: '84px' }}>골프장</th>
|
||||
<th className={`${tableStyles.th} bg-[#6DBB4F] text-white py-2 text-[13px]`} style={{ width: '84px' }}>기타</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{[
|
||||
["청소·환경정화용수", "195", "32.7", "108.8", "24.9", "5.8", "2.6", "4.4", "2.9", "-", "68.1"],
|
||||
["세척·살수용수", "12", "1.4", "37", "35", "-", "-", "1.9", "-", "-", "0.2"],
|
||||
["조경용수", "3,165", "7,440.8", "13,554.1", "168.1", "2,421.9", "290.7", "66.2", "29", "10,044", "534.3"],
|
||||
["냉·난방수", "8", "1.6", "0.1", "-", "-", "-", "-", "0.1", "-", "-"],
|
||||
["공업용수", "6", "14.9", "53.2", "52.8", "-", "-", "-", "-", "-", "0.4"],
|
||||
["농업용수", "6.0", "0.5", "0.6", "-", "-", "-", "-", "-", "-", "0.6"],
|
||||
["기타", "48", "306.1", "155.6", "2.8", "-", "-", "0.6", "0.5", "147.5", "4.2"],
|
||||
["미기재", "103", "22.9", "34.8", "16.0", "0.6", "-", "4.6", "0.2", "-", "13.5"],
|
||||
["합계", "3,543", "7,820.8", "13,944.7", "299.6", "2,428.4", "293.3", "77.6", "32.6", "10,191.6", "621.2"],
|
||||
].map((row, idx) => (
|
||||
<tr key={idx} className={idx === 8 ? "bg-white font-bold" : "bg-white"}>
|
||||
{row.map((val, i) => {
|
||||
const isHighlightedCol = [1, 2].includes(i);
|
||||
return (
|
||||
<td
|
||||
key={i}
|
||||
className={`${tableStyles.td} ${i === 0 ? "!font-bold !text-neutral-900" : ""} ${isHighlightedCol ? "bg-[#EAF5F5]" : ""}`}
|
||||
>
|
||||
{val}
|
||||
</td>
|
||||
);
|
||||
})}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<SourceText />
|
||||
</div>
|
||||
</section>
|
||||
>>>>>>> Stashed changes
|
||||
|
||||
<Hr className="my-11" />
|
||||
|
||||
<<<<<<< Updated upstream
|
||||
<SectionShell
|
||||
id="status-rain-purpose-usage"
|
||||
title="빗물이용시설의 용도별 빗물이용량 현황"
|
||||
@@ -109,6 +258,55 @@ export default function RainStatusPage() {
|
||||
/>
|
||||
</SectionShell>
|
||||
</div>
|
||||
=======
|
||||
{/* 3) 빗물이용시설의 용도별 빗물이용량 현황 */}
|
||||
<section className="pb-[200px]">
|
||||
<SectionTitle>빗물이용시설의 용도별 빗물이용량 현황</SectionTitle>
|
||||
<div className="mt-8">
|
||||
<div className={tableStyles.container}>
|
||||
<table className={tableStyles.table}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`} style={{ width: '160px' }}>용도</th>
|
||||
<th colSpan={6} className={`${tableStyles.th} ${tableStyles.headerBg} py-2`}>빗물이용량 (천m³/년)</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th className={`${tableStyles.th} bg-[#01ACE5] text-white`} style={{ width: '140px' }}>2018</th>
|
||||
<th className={`${tableStyles.th} bg-[#14AFCD] text-white`} style={{ width: '140px' }}>2019</th>
|
||||
<th className={`${tableStyles.th} bg-[#28B2B4] text-white`} style={{ width: '140px' }}>2020</th>
|
||||
<th className={`${tableStyles.th} bg-[#3CB59A] text-white`} style={{ width: '140px' }}>2021</th>
|
||||
<th className={`${tableStyles.th} bg-[#50B880] text-white`} style={{ width: '140px' }}>2022</th>
|
||||
<th className={`${tableStyles.th} bg-[#6DBB4F] text-white`} style={{ width: '140px' }}>2023</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{[
|
||||
["청소·화장실용수", "126.5", "134.1", "96.5", "153.9", "140.5", "108.8"],
|
||||
["세척·살수용수", "14.8", "14.6", "9.5", "49.8", "49.7", "37.0"],
|
||||
["조경용수", "7,629.8", "8,496.2", "9,415.4", "13,360.4", "14,466.3", "13,554.1"],
|
||||
["친수용수", "1.0", "0.1", "0.1", "0.1", "0.1", "0.1"],
|
||||
["공업용수", "152.0", "77.0", "77.0", "75.4", "0.4", "53.2"],
|
||||
["농업용수", "4.4", "4.3", "4.3", "4.3", "0.6", "0.6"],
|
||||
["기타", "37.7", "42.6", "230.7", "394.3", "463.2", "155.6"],
|
||||
].map((row, idx) => (
|
||||
<tr key={idx} className="bg-white">
|
||||
{row.map((val, i) => (
|
||||
<td
|
||||
key={i}
|
||||
className={`${tableStyles.td} ${i === 0 ? "!font-bold !text-neutral-900" : ""} ${[1, 3, 5].includes(i) ? "bg-[#EAF5F5]" : ""}`}
|
||||
>
|
||||
{val}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<SourceText />
|
||||
</div>
|
||||
</section>
|
||||
>>>>>>> Stashed changes
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,14 +1,18 @@
|
||||
"use client";
|
||||
|
||||
import Image, { type StaticImageData } from "next/image";
|
||||
import React from "react";
|
||||
import SubPageHeader from "@/components/SubPageHeader";
|
||||
<<<<<<< Updated upstream
|
||||
import BusinessSubNav from "@/components/BusinessSubNav";
|
||||
|
||||
import treatedWaterYear from "@/public/images/landing/cases/treated_water_year.png";
|
||||
import treatedWaterUsage from "@/public/images/landing/cases/treated_water_usage.png";
|
||||
import treatedWaterFacility from "@/public/images/landing/cases/treated_water_facility.png";
|
||||
import treatedWaterRegion from "@/public/images/landing/cases/treated_water_region.png";
|
||||
=======
|
||||
>>>>>>> Stashed changes
|
||||
|
||||
// 공통 섹션 타이틀 컴포넌트
|
||||
function SectionTitle({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<div className="flex items-center gap-3">
|
||||
@@ -18,10 +22,15 @@ function SectionTitle({ children }: { children: React.ReactNode }) {
|
||||
);
|
||||
}
|
||||
|
||||
<<<<<<< Updated upstream
|
||||
=======
|
||||
// 구분선
|
||||
>>>>>>> Stashed changes
|
||||
function Hr({ className = "" }: { className?: string }) {
|
||||
return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
|
||||
}
|
||||
|
||||
<<<<<<< Updated upstream
|
||||
function ImgCard({ src, alt }: { src: StaticImageData; alt: string }) {
|
||||
return (
|
||||
<div className="w-full overflow-x-auto">
|
||||
@@ -46,6 +55,31 @@ function SectionShell({
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
}) {
|
||||
=======
|
||||
// 출처 텍스트
|
||||
function SourceText() {
|
||||
return (
|
||||
<p className="mt-7 text-center text-[13px] text-neutral-500">
|
||||
자료: 환경부(2024), 「2023 하수도 통계」
|
||||
</p>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* 공통 테이블 스타일
|
||||
* - table-fixed: 열 넓이를 고정하고 균등 분배하기 위해 추가
|
||||
* - 폰트 사이즈: 16px로 수정
|
||||
*/
|
||||
const tableStyles = {
|
||||
container: "w-[1000px] mx-auto overflow-hidden",
|
||||
table: "w-full table-fixed border-collapse text-center text-[16px]",
|
||||
th: "border border-[#858F98] py-3 font-bold text-neutral-800",
|
||||
td: "border border-[#858F98] py-3 text-neutral-700 font-medium break-keep",
|
||||
headerBg: "bg-[#E3E7EA]",
|
||||
};
|
||||
|
||||
export default function TreatedWaterPage() {
|
||||
>>>>>>> Stashed changes
|
||||
return (
|
||||
<section id={id} className={`scroll-mt-[140px] ${className}`}>
|
||||
<SectionTitle>{title}</SectionTitle>
|
||||
@@ -74,6 +108,7 @@ export default function TreatedStatusPage() {
|
||||
<div className="pr-0">
|
||||
<Hr className="my-7" />
|
||||
|
||||
<<<<<<< Updated upstream
|
||||
<SectionShell
|
||||
id="status-treated-year"
|
||||
title="연도별 하수처리수 재이용 현황"
|
||||
@@ -84,9 +119,101 @@ export default function TreatedStatusPage() {
|
||||
alt="연도별 하수처리수 재이용 현황"
|
||||
/>
|
||||
</SectionShell>
|
||||
=======
|
||||
{/* 1) 연도별 하수처리수 재이용 현황 */}
|
||||
<section className="mt-10">
|
||||
<SectionTitle>연도별 하수처리수 재이용 현황</SectionTitle>
|
||||
<div className="mt-10">
|
||||
<div className={tableStyles.container}>
|
||||
<table className={tableStyles.table}>
|
||||
<colgroup>
|
||||
<col style={{ width: '130px' }} />
|
||||
<col style={{ width: '180px' }} />
|
||||
<col />
|
||||
<col />
|
||||
<col />
|
||||
<col />
|
||||
<col />
|
||||
<col />
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th colSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`}>구분</th>
|
||||
<th className={`${tableStyles.th} bg-[#01ACE5] text-white`}>2018</th>
|
||||
<th className={`${tableStyles.th} bg-[#14AFCD] text-white`}>2019</th>
|
||||
<th className={`${tableStyles.th} bg-[#28B2B4] text-white`}>2020</th>
|
||||
<th className={`${tableStyles.th} bg-[#3CB59A] text-white`}>2021</th>
|
||||
<th className={`${tableStyles.th} bg-[#50B880] text-white`}>2022</th>
|
||||
<th className={`${tableStyles.th} bg-[#6DBB4F] text-white`}>2023</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{[
|
||||
{
|
||||
group: "전체",
|
||||
rows: [
|
||||
["개소수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>", "671", "681", "698", "704", "714", "717"],
|
||||
["하수처리량 <span class='text-[13px] font-normal text-[#767676]'>(백만m³/년)</span>", "7,163.7", "7,140.4", "7,375.6", "7,335.8", "7,378.9", "7,537.2"],
|
||||
["재이용량 <span class='text-[13px] font-normal text-[#767676]'>(백만m³/년)</span>", "1,112.7", "1,148.7", "1,148.7", "1,127.0", "1,136.8", "1,137.5"],
|
||||
["재이용률 <span class='text-[13px] font-normal text-[#767676]'>(%)</span>", "17.4", "16.5", "15.5", "14.1", "14.3", "14.4"],
|
||||
]
|
||||
},
|
||||
{
|
||||
group: "법적 대상",
|
||||
rows: [
|
||||
["개소수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>", "68", "82", "94", "97", "101", "118"],
|
||||
["하수처리량 <span class='text-[13px] font-normal text-[#767676]'>(백만m³/년)</span>", "761.2", "839.0", "935.3", "1,158.7", "1,220.6", "1,473.6"],
|
||||
["재이용량 <span class='text-[13px] font-normal text-[#767676]'>(백만m³/년)</span>", "162.2", "190.6", "218.5", "244.6", "247.2", "324.9"],
|
||||
["재이용률 <span class='text-[13px] font-normal text-[#767676]'>(%)</span>", "24.7", "25.4", "27.8", "25.7", "24.2", "24.1"],
|
||||
]
|
||||
},
|
||||
{
|
||||
group: "법적 미대상",
|
||||
rows: [
|
||||
["개소수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>", "603", "599", "604", "607", "613", "599"],
|
||||
["하수처리량 <span class='text-[13px] font-normal text-[#767676]'>(백만m³/년)</span>", "6,402.5", "6,301.4", "6,440.3", "6,177.1", "6,158.3", "6,063.5"],
|
||||
["재이용량 <span class='text-[13px] font-normal text-[#767676]'>(백만m³/년)</span>", "950.6", "958.1", "926.2", "882.4", "889.5", "812.7"],
|
||||
["재이용률 <span class='text-[13px] font-normal text-[#767676]'>(%)</span>", "16.5", "15.3", "13.6", "12.2", "12.6", "12.5"],
|
||||
]
|
||||
}
|
||||
].map((section, sIdx) => (
|
||||
<React.Fragment key={sIdx}>
|
||||
{section.rows.map((row, rIdx) => (
|
||||
<tr key={`${sIdx}-${rIdx}`} className="bg-white">
|
||||
{rIdx === 0 && (
|
||||
<td
|
||||
rowSpan={section.rows.length}
|
||||
className={`${tableStyles.td} ${tableStyles.headerBg} !text-[18px] !font-bold !text-neutral-900`}
|
||||
>
|
||||
{section.group}
|
||||
</td>
|
||||
)}
|
||||
{row.map((val, i) => {
|
||||
const isFirstCol = i === 0;
|
||||
const isHighlightedCol = [1, 3, 5].includes(i);
|
||||
return (
|
||||
<td
|
||||
key={i}
|
||||
className={`${tableStyles.td} ${isFirstCol ? "!font-bold !text-neutral-900" : ""} ${isHighlightedCol ? "bg-[#EAF5F5]" : ""}`}
|
||||
dangerouslySetInnerHTML={{ __html: val }}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</tr>
|
||||
))}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<SourceText />
|
||||
</div>
|
||||
</section>
|
||||
>>>>>>> Stashed changes
|
||||
|
||||
<Hr className="my-11" />
|
||||
|
||||
<<<<<<< Updated upstream
|
||||
<SectionShell
|
||||
id="status-treated-usage"
|
||||
title="용도별 하수처리수 재이용 현황"
|
||||
@@ -96,9 +223,89 @@ export default function TreatedStatusPage() {
|
||||
alt="용도별 하수처리수 재이용 현황"
|
||||
/>
|
||||
</SectionShell>
|
||||
=======
|
||||
{/* 2) 용도별 하수처리수 재이용 현황 */}
|
||||
<section>
|
||||
<SectionTitle>용도별 하수처리수 재이용 현황</SectionTitle>
|
||||
<div className="mt-8">
|
||||
<div className={tableStyles.container}>
|
||||
<table className={tableStyles.table}>
|
||||
<colgroup>
|
||||
<col style={{ width: '180px' }} />
|
||||
<col />
|
||||
<col />
|
||||
<col />
|
||||
<col />
|
||||
<col />
|
||||
<col />
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th className={`${tableStyles.th} ${tableStyles.headerBg}`}>구분</th>
|
||||
<th className={`${tableStyles.th} bg-[#01ACE5] text-white`}>2018</th>
|
||||
<th className={`${tableStyles.th} bg-[#14AFCD] text-white`}>2019</th>
|
||||
<th className={`${tableStyles.th} bg-[#28B2B4] text-white`}>2020</th>
|
||||
<th className={`${tableStyles.th} bg-[#3CB59A] text-white`}>2021</th>
|
||||
<th className={`${tableStyles.th} bg-[#50B880] text-white`}>2022</th>
|
||||
<th className={`${tableStyles.th} bg-[#6DBB4F] text-white`}>2023</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{[
|
||||
{ label: "총 재이용량", type: "total", values: ["1,112.7", "1,148.7", "1,144.7", "1,127.0", "1,136.8", "1,137.5"] },
|
||||
{ label: "장내 재이용", type: "category", values: ["520.6", "519.8", "513.9", "520.3", "502.2", "490.0"] },
|
||||
{ label: "세척수", type: "red-item", values: ["177.9", "174.4", "169.4", "180.9", "196.8", "191.2"] },
|
||||
{ label: "냉각수", type: "red-item", values: ["45.5", "46.8", "50.4", "40.6", "38.3", "41.7"] },
|
||||
{ label: "청소수", type: "red-item", values: ["17.6", "21.2", "21.2", "21.7", "20.8", "20.5"] },
|
||||
{ label: "조경용수", type: "red-item", values: ["0.1", "0.1", "-", "-", "-", "-"] },
|
||||
{ label: "회생용수", type: "red-item", values: ["15.8", "16.7", "17.8", "15.7", "14.4", "14.0"] },
|
||||
{ label: "장내급수도", type: "red-item", values: ["2.4", "-", "-", "-", "-", "-"] },
|
||||
{ label: "장내기타용수", type: "red-item", values: ["261.3", "260.6", "255.0", "261.1", "231.8", "222.6"] },
|
||||
{ label: "장외 재이용", type: "category", values: ["592.1", "628.9", "630.8", "606.7", "634.6", "647.5"] },
|
||||
{ label: "청소·화장실용수", type: "blue-item", values: ["0.6", "0.4", "0.4", "0.4", "0.4", "0.4"] },
|
||||
{ label: "세척·살수용수", type: "blue-item", values: ["5.6", "9.9", "2.9", "2.1", "3.0", "3.6"] },
|
||||
{ label: "조경용수", type: "blue-item", values: ["10.3", "16.4", "5.9", "4.5", "8.9", "9.5"] },
|
||||
{ label: "친수용수", type: "blue-item", values: ["7.8", "3.1", "3.1", "3.0", "10.9", "10.5"] },
|
||||
{ label: "하천유지용수", type: "blue-item", values: ["480.5", "482.5", "496.2", "442.7", "471.7", "484.0"] },
|
||||
{ label: "농업용수", type: "blue-item", values: ["12.2", "11.9", "13.4", "10.7", "10.6", "11.4"] },
|
||||
{ label: "지하수 충전", type: "blue-item", values: ["0.0", "0.0", "0.0", "13.4", "0.0", "0.0"] },
|
||||
{ label: "공업용수", type: "blue-item", values: ["75.2", "104.6", "108.9", "129.9", "129.0", "128.1"] },
|
||||
].map((row, idx) => {
|
||||
const isSubItem = row.type === "red-item" || row.type === "blue-item";
|
||||
const isLastInGroup = idx === 8 || idx === 17;
|
||||
|
||||
return (
|
||||
<tr key={idx} className="bg-white">
|
||||
<td className={`${tableStyles.td} relative`}>
|
||||
{isSubItem ? (
|
||||
<>
|
||||
<div className={`absolute left-[1px] w-[16px] bg-white z-10 top-[-2px] ${isLastInGroup ? 'bottom-[0px]' : 'bottom-[-2px]'}`} />
|
||||
<div className={`absolute left-[16px] w-[4px] z-20 ${row.type === 'red-item' ? 'bg-[#FF8B8B]' : 'bg-[#4ECBFF]'} top-[-2px] ${isLastInGroup ? 'bottom-[0px]' : 'bottom-[-2px]'}`} />
|
||||
<span className="text-[#4f4f4f] font-bold block w-full text-center relative z-30 translate-x-[8px]">{row.label}</span>
|
||||
</>
|
||||
) : (
|
||||
<span className="font-bold text-neutral-900 block w-full text-center">{row.label}</span>
|
||||
)}
|
||||
</td>
|
||||
{row.values.map((val, i) => (
|
||||
<td key={i} className={`${tableStyles.td} ${[0, 2, 4].includes(i) ? "bg-[#EAF5F5]" : ""}`}>
|
||||
{val}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<SourceText />
|
||||
</div>
|
||||
</section>
|
||||
>>>>>>> Stashed changes
|
||||
|
||||
<Hr className="my-11" />
|
||||
|
||||
<<<<<<< Updated upstream
|
||||
<SectionShell
|
||||
id="status-treated-facility"
|
||||
title="하수처리시설 설치 및 이용 현황"
|
||||
@@ -108,9 +315,98 @@ export default function TreatedStatusPage() {
|
||||
alt="하수처리시설 설치 및 이용 현황"
|
||||
/>
|
||||
</SectionShell>
|
||||
=======
|
||||
{/* 3) 하수처리시설 설치 및 이용 현황 */}
|
||||
<section>
|
||||
<SectionTitle>하수처리시설 설치 및 이용 현황</SectionTitle>
|
||||
<div className="mt-8">
|
||||
<div className={tableStyles.container}>
|
||||
<table className={tableStyles.table}>
|
||||
<colgroup>
|
||||
<col style={{ width: '130px' }} />
|
||||
<col style={{ width: '160px' }} />
|
||||
<col />
|
||||
<col />
|
||||
<col />
|
||||
<col />
|
||||
<col />
|
||||
<col />
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th colSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`}>구분</th>
|
||||
<th className={`${tableStyles.th} bg-[#01ACE5] text-white`}>2018</th>
|
||||
<th className={`${tableStyles.th} bg-[#14AFCD] text-white`}>2019</th>
|
||||
<th className={`${tableStyles.th} bg-[#28B2B4] text-white`}>2020</th>
|
||||
<th className={`${tableStyles.th} bg-[#3CB59A] text-white`}>2021</th>
|
||||
<th className={`${tableStyles.th} bg-[#50B880] text-white`}>2022</th>
|
||||
<th className={`${tableStyles.th} bg-[#6DBB4F] text-white`}>2023</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{[
|
||||
{
|
||||
group: "전체",
|
||||
rows: [
|
||||
["시설수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>", "671", "681", "698", "704", "714", "717"],
|
||||
["시설용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>", "25,846", "26,067", "26,244", "26,492", "26,586", "26,766"],
|
||||
["처리용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>", "1,112.7", "1,148.7", "1,144.7", "1,127.0", "1,136.8", "1,137.5"],
|
||||
]
|
||||
},
|
||||
{
|
||||
group: "법적 대상",
|
||||
rows: [
|
||||
["시설수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>", "68", "82", "94", "97", "101", "118"],
|
||||
["시설용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>", "3,088.9", "3,359.2", "3,612.6", "4,412.2", "4,692.3", "5,503.8"],
|
||||
["처리용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>", "162.2", "190.6", "218.5", "244.6", "247.2", "324.9"],
|
||||
]
|
||||
},
|
||||
{
|
||||
group: "법적 미대상",
|
||||
rows: [
|
||||
["시설수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>", "603", "599", "604", "607", "613", "599"],
|
||||
["시설용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>", "22,757", "22,708", "22,631", "22,080", "21,894", "21,262"],
|
||||
["처리용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>", "950.6", "958.1", "926.2", "882.4", "889.5", "812.7"],
|
||||
]
|
||||
}
|
||||
].map((section, sIdx) => (
|
||||
<React.Fragment key={sIdx}>
|
||||
{section.rows.map((row, rIdx) => (
|
||||
<tr key={`${sIdx}-${rIdx}`} className="bg-white">
|
||||
{rIdx === 0 && (
|
||||
<td
|
||||
rowSpan={section.rows.length}
|
||||
className={`${tableStyles.td} ${tableStyles.headerBg} !text-[18px] !font-bold !text-neutral-900`}
|
||||
>
|
||||
{section.group}
|
||||
</td>
|
||||
)}
|
||||
{row.map((val, i) => {
|
||||
const isFirstCol = i === 0;
|
||||
const isHighlightedCol = [1, 3, 5].includes(i);
|
||||
return (
|
||||
<td
|
||||
key={i}
|
||||
className={`${tableStyles.td} ${isFirstCol ? "!font-bold !text-neutral-900" : ""} ${isHighlightedCol ? "bg-[#EAF5F5]" : ""}`}
|
||||
dangerouslySetInnerHTML={{ __html: val }}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</tr>
|
||||
))}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<SourceText />
|
||||
</div>
|
||||
</section>
|
||||
>>>>>>> Stashed changes
|
||||
|
||||
<Hr className="my-11" />
|
||||
|
||||
<<<<<<< Updated upstream
|
||||
<SectionShell
|
||||
id="status-treated-region"
|
||||
title="시도별 하수처리수 재이용 현황"
|
||||
@@ -122,6 +418,89 @@ export default function TreatedStatusPage() {
|
||||
/>
|
||||
</SectionShell>
|
||||
</div>
|
||||
=======
|
||||
{/* 4) 시도별 하수처리수 재이용 현황 */}
|
||||
<section className="pb-[200px]">
|
||||
<SectionTitle>시도별 하수처리수 재이용 현황</SectionTitle>
|
||||
<div className="mt-8">
|
||||
<div className={tableStyles.container}>
|
||||
<div className="text-right text-[13px] mb-2 text-neutral-600">(단위: 백만m³/일)</div>
|
||||
<table className={tableStyles.table}>
|
||||
<colgroup>
|
||||
<col style={{ width: '160px' }} />
|
||||
<col />
|
||||
<col />
|
||||
<col />
|
||||
<col />
|
||||
<col />
|
||||
<col />
|
||||
<col />
|
||||
<col />
|
||||
<col />
|
||||
<col />
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th rowSpan={3} className={`${tableStyles.th} ${tableStyles.headerBg}`}>시도</th>
|
||||
<th rowSpan={3} className={`${tableStyles.th} ${tableStyles.headerBg}`}>연간<br/>하수<br/>처리량</th>
|
||||
<th colSpan={7} className={`${tableStyles.th} ${tableStyles.headerBg} py-2`}>재이용현황</th>
|
||||
<th rowSpan={3} className={`${tableStyles.th} ${tableStyles.headerBg}`}>재이용률<br/>(%)</th>
|
||||
<th rowSpan={3} className={`${tableStyles.th} ${tableStyles.headerBg}`}>비고</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`}>계</th>
|
||||
<th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`}>장내</th>
|
||||
<th colSpan={5} className={`${tableStyles.th} ${tableStyles.headerBg} py-1`}>장외</th>
|
||||
</tr>
|
||||
<tr>
|
||||
{/* 💡 하천유지용수는 14px, 나머지 하위 헤더는 16px로 적용 */}
|
||||
<th className={`${tableStyles.th} bg-[#01ACE5] text-white py-2 text-[16px]`}>소계</th>
|
||||
<th className={`${tableStyles.th} bg-[#1FB1C2] text-white py-2 text-[13px]`}>하천유지용수</th>
|
||||
<th className={`${tableStyles.th} bg-[#3EB59F] text-white py-2 text-[16px]`}>공업용수</th>
|
||||
<th className={`${tableStyles.th} bg-[#5DB97C] text-white py-2 text-[16px]`}>농업용수</th>
|
||||
<th className={`${tableStyles.th} bg-[#6DBB4F] text-white py-2 text-[16px]`}>기타용수</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{[
|
||||
["합계", "7,537.2", "1,137.5", "490.0", "647.5", "484.0", "128.1", "11.4", "24.0", "15.1%", ""],
|
||||
["서울특별시", "1,567.0", "114.9", "59.3", "55.6", "55.1", "-", "-", "0.5", "7.3%", ""],
|
||||
["부산광역시", "491.5", "146.2", "120.7", "25.5", "25.3", "-", "-", "0.2", "29.7%", ""],
|
||||
["대구광역시", "432.7", "102.4", "38.2", "64.2", "64.1", "-", "-", "0.1", "23.7%", ""],
|
||||
["인천광역시", "302.3", "57.7", "11.6", "46.1", "29.2", "12.1", "0.5", "4.3", "19.1%", ""],
|
||||
["광주광역시", "211.1", "28.7", "6.5", "22.3", "22.2", "-", "-", "0.1", "13.6%", ""],
|
||||
["대전광역시", "244.6", "11.9", "11.9", "0.68", "0.0", "-", "-", "0.1", "4.9%", ""],
|
||||
["울산광역시", "235.1", "36.1", "6.1", "29.9", "29.7", "0.2", "-", "-", "15.3%", ""],
|
||||
["세종특별자치시", "38.5", "2.5", "2.0", "0.5", "0.4", "-", "0.2", "-", "6.6%", ""],
|
||||
["경기도", "1,926.8", "313.3", "122.2", "191.0", "153.0", "33.3", "0.4", "4.3", "16.3%", ""],
|
||||
["강원도", "230.4", "19.6", "15.4", "4.2", "2.1", "-", "-", "2.1", "8.5%", ""],
|
||||
["충청북도", "190.9", "15.6", "6.3", "9.2", "7.4", "0.6", "-", "1.2", "8.2%", ""],
|
||||
["충청남도", "241.5", "41.4", "9.8", "31.5", "17.7", "8.6", "4.5", "0.8", "17.1%", ""],
|
||||
["전라북도", "292.4", "42.7", "7.5", "35.1", "33.5", "0.2", "1.0", "0.5", "14.6%", ""],
|
||||
["전라남도", "254.0", "23.6", "12.3", "11.3", "8.7", "0.0", "1.0", "1.6", "9.3%", ""],
|
||||
["경상북도", "378.4", "129.1", "33.7", "95.3", "20.8", "72.5", "0.8", "1.3", "34.1%", ""],
|
||||
["경상남도", "411.3", "50.1", "25.0", "25.0", "14.7", "0.5", "3.0", "6.9", "12.2%", ""],
|
||||
["제주특별자치도", "88.6", "1.7", "1.5", "0.12", "-", "-", "0.1", "-", "1.9%", ""],
|
||||
].map((row, idx) => (
|
||||
<tr key={idx} className="bg-white">
|
||||
{/* 💡 연간하수처리량(index 1), 장내(index 3), 재이용률(index 9) 컬러 하이라이트 적용 */}
|
||||
{row.map((val, i) => (
|
||||
<td
|
||||
key={i}
|
||||
className={`${tableStyles.td} ${i === 0 ? "!font-bold !text-neutral-900" : ""} ${[1, 3, 9].includes(i) ? "bg-[#EAF5F5]" : ""}`}
|
||||
>
|
||||
{val}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<SourceText />
|
||||
</div>
|
||||
</section>
|
||||
>>>>>>> Stashed changes
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user