diff --git a/apps/dm/app/(with-layout)/example/page.tsx b/apps/dm/app/(with-layout)/example/page.tsx new file mode 100644 index 000000000..9217a9f54 --- /dev/null +++ b/apps/dm/app/(with-layout)/example/page.tsx @@ -0,0 +1,64 @@ +"use client"; + +import SubPageHeader from "@/components/SubPageHeader"; +import BusinessSubNav from "@/components/BusinessSubNav"; +// import RainExampleSection from "./_components/RainExampleSection"; +// import GreywaterExampleSection from "./_components/GreywaterExampleSection"; +// import SewageExampleSection from "./_components/SewageExampleSection"; +// import GlobalCaseSection from "./_components/GlobalCaseSection"; + +function Hr({ className = "" }: { className?: string }) { + return
; +} + +export default function ExamplePage() { + const sections = [ + { id: "rain-example", label: "빗물 이용 사례" }, + { id: "greywater-example", label: "중수도 사례" }, + { id: "sewage-example", label: "하수처리수 사례" }, + { id: "global-case", label: "해외 사례" }, + ]; + + return ( +
+ + +
+
+ +
+ {/* */} +
+ +
+ +
+ {/* */} +
+ +
+ +
+ {/* */} +
+ +
+ +
+ {/* */} +
+
+ + +
+ ); +} \ No newline at end of file diff --git a/apps/dm/app/(with-layout)/intro/page.tsx b/apps/dm/app/(with-layout)/intro/page.tsx new file mode 100644 index 000000000..f75e418e3 --- /dev/null +++ b/apps/dm/app/(with-layout)/intro/page.tsx @@ -0,0 +1,64 @@ +"use client"; + +import SubPageHeader from "@/components/SubPageHeader"; +import BusinessSubNav from "@/components/BusinessSubNav"; +// import LawSection from "./_components/LawSection"; +// import RainIntroSection from "./_components/RainIntroSection"; +// import GreywaterIntroSection from "./_components/GreywaterIntroSection"; +// import SewageIntroSection from "./_components/SewageIntroSection"; + +function Hr({ className = "" }: { className?: string }) { + return
; +} + +export default function IntroPage() { + const sections = [ + { id: "law", label: "물 재이용 법" }, + { id: "rain", label: "빗물 이용시설" }, + { id: "greywater", label: "중수도" }, + { id: "sewage", label: "하수처리수" }, + ]; + + return ( +
+ + +
+
+ +
+ {/* */} +
+ +
+ +
+ {/* */} +
+ +
+ +
+ {/* */} +
+ +
+ +
+ {/* */} +
+
+ + +
+ ); +} \ No newline at end of file diff --git a/apps/dm/app/(with-layout)/status/_components/GreywaterStatusSection.tsx b/apps/dm/app/(with-layout)/status/_components/GreywaterStatusSection.tsx new file mode 100644 index 000000000..1f5f93b44 --- /dev/null +++ b/apps/dm/app/(with-layout)/status/_components/GreywaterStatusSection.tsx @@ -0,0 +1,461 @@ +"use client"; + +import React from "react"; + +function SectionTitle({ children }: { children: React.ReactNode }) { + return ( +
+ +

{children}

+
+ ); +} + +function Hr({ className = "" }: { className?: string }) { + return
; +} + +function SourceText() { + return ( +

+ 자료: 환경부(2024), 「2023 하수도 통계」 +

+ ); +} + +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 GreywaterStatusSection() { + const title = "중수도(현황)"; + + return ( +
+ {/* 상단 타이틀 */} +
+

+ {title} + +

+
+ +
+ {/* 1) 전체 중수도 설치 및 이용 현황 */} +
+ 전체 중수도 설치 및 이용 현황 + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + {[ + { + group: "전체", + rows: [ + ["시설수 (개소)", "576", "633", "682", "740", "819", "842"], + ["건축연면적 (만m²)", "1,494.2", "1,514.4", "1,524.9", "989.1", "1,104.3", "1,015.4"], + ["처리용량 (만m³/일)", "39.6", "40.0", "51.1", "47.1", "48.9", "50.7"], + ["사용량 (만m³/년)", "2,223.4", "1,165.2", "6,713.0", "4,681.7", "3,918.2", "898.4"], + ], + }, + { + group: "법적 대상", + rows: [ + ["시설수 (개소)", "146", "154", "156", "170", "166", "169"], + ["건축연면적 (만m²)", "674.9", "682.4", "736.1", "421.1", "434.9", "465.5"], + ["처리용량 (만m³/일)", "20.0", "20.1", "31.2", "22.8", "21.2", "24.7"], + ["사용량 (만m³/년)", "1,819.4", "712.8", "6,479.9", "4,416.8", "3,663.1", "616.1"], + ], + }, + { + group: "법적 비대상", + rows: [ + ["시설수 (개소)", "430", "479", "526", "570", "653", "673"], + ["건축연면적 (만m²)", "819.3", "832.0", "788.8", "568.0", "669.4", "549.9"], + ["처리용량 (만m³/일)", "19.6", "19.5", "19.9", "24.3", "27.7", "26.0"], + ["사용량 (만m³/년)", "404.0", "452.4", "233.1", "264.9", "255.1", "282.3"], + ], + }, + ].map((section, sIdx) => ( + + {section.rows.map((row, rIdx) => ( + + {rIdx === 0 && ( + + )} + {row.map((val, i) => { + const isFirstCol = i === 0; + const isHighlightedCol = [1, 3, 5].includes(i); + + return ( + + ))} + + ))} + +
+ 구분 + + 2018 + + 2019 + + 2020 + + 2021 + + 2022 + + 2023 +
+ {section.group} + + ); + })} +
+
+ + +
+
+ +
+ + {/* 2) 공장 및 발전시설 내 중수도 설치 현황 */} +
+ 공장 및 발전시설 내 중수도 설치 현황 + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + {[ + { + group: "전체", + rows: [ + ["시설수 (개소)", "125", "127", "139", "146", "151", "176"], + ["처리용량 (만m³/일)", "141.3", "141.0", "146.7", "189.0", "190.3", "166.5"], + ["사용량 (만m³/년)", "33,712", "29,300", "33,110", "22,284", "21,593", "21,349"], + ], + }, + { + group: "법적 대상", + rows: [ + ["시설수 (개소)", "59", "63", "78", "78", "82", "86"], + ["처리용량 (만m³/일)", "108.6", "109.7", "118.1", "159.5", "142.6", "119.4"], + ["사용량 (만m³/년)", "24,847", "24,021", "28,055", "17,959", "12,241", "12,296"], + ], + }, + { + group: "법적 비대상", + rows: [ + ["시설수 (개소)", "66", "64", "61", "68", "69", "90"], + ["처리용량 (만m³/일)", "32.7", "31.4", "28.7", "29.5", "47.7", "47.1"], + ["사용량 (만m³/년)", "8,864.9", "5,278.8", "5,054.7", "4,324.6", "9,353.3", "9,052.4"], + ], + }, + ].map((section, sIdx) => ( + + {section.rows.map((row, rIdx) => ( + + {rIdx === 0 && ( + + )} + {row.map((val, i) => { + const isFirstCol = i === 0; + const isHighlightedCol = [1, 3, 5].includes(i); + + return ( + + ))} + + ))} + +
+ 구분 + + 2018 + + 2019 + + 2020 + + 2021 + + 2022 + + 2023 +
+ {section.group} + + ); + })} +
+
+ + +
+
+ +
+ + {/* 3) 중수도 건축물별 이용량 현황 */} +
+ 중수도 건축물별 이용량 현황 + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + {[ + ["공동주택", "804.0", "245.8", "255.1", "282.3", "255.1", "282.3"], + ["판매시설", "1,447.5", "477.1", "802.1", "713.0", "972.3", "742.4"], + ["숙박시설", "458.5", "0.4", "177.0", "102.0", "123.3", "140.9"], + ["업무시설", "20.7", "0.3", "14.3", "44.9", "31.5", "37.4"], + ["의료시설", "97.7", "7.2", "63.7", "55.7", "85.1", "70.4"], + ["교육연구시설", "536.6", "1.5", "1,558.4", "772.2", "315.1", "66.7"], + ["운수·물류시설", "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) => ( + + {row.map((val, i) => ( + + ))} + + ))} + +
+ 구분 + + 이용량 (천m³/년) +
+ 2018 + + 2019 + + 2020 + + 2021 + + 2022 + + 2023 +
+ {val} +
+
+ + +
+
+ +
+ + {/* 4) 중수도 용도별 이용량 현황 */} +
+ 중수도 용도별 이용량 현황 + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + {[ + ["공업용수", "33,082", "28,719", "32,312", "21,707", "20,991", "20,470"], + ["세척·살수용수", "860.2", "146.5", "133.8", "100.7", "95.1", "149.9"], + ["조경용수", "403.7", "99.3", "3,297.0", "2,611.1", "1,827.0", "1,116.7"], + ["청소용수", "623.9", "764.2", "1,430.6", "879.7", "1,146.2", "286.0"], + ["수세식화장실용수", "530.0", "646.6", "183.5", "161.2", "216.6", "147.6"], + ["냉·난방용수", "150.1", "56.2", "57.5", "6.4", "0.9", "0.5"], + ["친수용수", "120.8", "18.5", "29.3", "8.2", "4.1", "2.8"], + ["기타", "165.6", "16.1", "43.2", "5.7", "64.0", "73.9"], + ].map((row, idx) => ( + + {row.map((val, i) => ( + + ))} + + ))} + +
+ 구분 + + 이용량 (천m³/년) +
+ 2018 + + 2019 + + 2020 + + 2021 + + 2022 + + 2023 +
+ {val} +
+
+ + +
+
+
+
+ ); +} \ No newline at end of file diff --git a/apps/dm/app/(with-layout)/status/_components/RainStatusSection.tsx b/apps/dm/app/(with-layout)/status/_components/RainStatusSection.tsx new file mode 100644 index 000000000..ec150d55b --- /dev/null +++ b/apps/dm/app/(with-layout)/status/_components/RainStatusSection.tsx @@ -0,0 +1,381 @@ +"use client"; + +import React from "react"; + +// 공통 섹션 타이틀 컴포넌트 +function SectionTitle({ children }: { children: React.ReactNode }) { + return ( +
+ +

{children}

+
+ ); +} + +// 구분선 +function Hr({ className = "" }: { className?: string }) { + return
; +} + +// 출처 텍스트 +function SourceText() { + return ( +

+ 자료: 환경부(2024), 「2023 하수도 통계」 +

+ ); +} + +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 RainStatusSection() { + const title = "빗물이용시설(현황)"; + + return ( +
+ {/* 상단 타이틀 */} +
+

+ {title} + +

+
+ +
+ {/* 1) 빗물이용시설의 건축물별 빗물이용량 현황 */} +
+ 빗물이용시설의 건축물별 빗물이용량 현황 + +
+
+ + + + + + + + + + + + + + + + + {[ + ["골프장", "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) => ( + + {row.map((val, i) => ( + + ))} + + ))} + +
+ 구분 + + 빗물이용량 (천m³/년) +
+ 2018 + + 2019 + + 2020 + + 2021 + + 2022 + + 2023 +
+ {val} +
+
+ + +
+
+ +
+ + {/* 2) 빗물이용시설의 용도별 분포 (2023년 기준) */} +
+ 빗물이용시설의 용도별 분포 (2023년 기준) + +
+
+ + + + + + + + + + + + + + + + + + + + + {[ + ["청소·환경정화용수", "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) => ( + + {row.map((val, i) => { + const isHighlightedCol = [1, 2].includes(i); + + return ( + + ); + })} + + ))} + +
+ 용도 + + 개소수 +
+ (개소) + 		+ 저류용량 +
+ (천m³) + 		+ 빗물이용량 (천m³/년) +
+ 총사용량 + + 공공시설 + + 공동주택 + + 대규모점포 + + 체육시설 + + 학교 + + 골프장 + + 기타 +
+ {val} +
+
+ + +
+
+ +
+ + {/* 3) 빗물이용시설의 용도별 빗물이용량 현황 */} +
+ 빗물이용시설의 용도별 빗물이용량 현황 + +
+
+ + + + + + + + + + + + + + + + + {[ + ["청소·화장실용수", "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) => ( + + {row.map((val, i) => ( + + ))} + + ))} + +
+ 용도 + + 빗물이용량 (천m³/년) +
+ 2018 + + 2019 + + 2020 + + 2021 + + 2022 + + 2023 +
+ {val} +
+
+ + +
+
+
+
+ ); +} \ No newline at end of file diff --git a/apps/dm/app/(with-layout)/status/_components/SewageStatusSection.tsx b/apps/dm/app/(with-layout)/status/_components/SewageStatusSection.tsx new file mode 100644 index 000000000..0a2b34d5d --- /dev/null +++ b/apps/dm/app/(with-layout)/status/_components/SewageStatusSection.tsx @@ -0,0 +1,705 @@ +"use client"; + +import React from "react"; + +function SectionTitle({ children }: { children: React.ReactNode }) { + return ( +
+ +

{children}

+
+ ); +} + +function Hr({ className = "" }: { className?: string }) { + return
; +} + +function SourceText() { + return ( +

+ 자료: 환경부(2024), 「2023 하수도 통계」 +

+ ); +} + +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 SewageStatusSection() { + const title = "하수처리수 재이용시설(현황)"; + + return ( +
+ {/* 상단 타이틀 */} +
+

+ {title} + +

+
+ +
+ {/* 1) 연도별 하수처리수 재이용 현황 */} +
+ 연도별 하수처리수 재이용 현황 + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + {[ + { + group: "전체", + rows: [ + [ + "개소수 (개소)", + "671", + "681", + "698", + "704", + "714", + "717", + ], + [ + "하수처리량 (백만m³/년)", + "7,163.7", + "7,140.4", + "7,375.6", + "7,335.8", + "7,378.9", + "7,537.2", + ], + [ + "재이용량 (백만m³/년)", + "1,112.7", + "1,148.7", + "1,148.7", + "1,127.0", + "1,136.8", + "1,137.5", + ], + [ + "재이용률 (%)", + "17.4", + "16.5", + "15.5", + "14.1", + "14.3", + "14.4", + ], + ], + }, + { + group: "법적 대상", + rows: [ + [ + "개소수 (개소)", + "68", + "82", + "94", + "97", + "101", + "118", + ], + [ + "하수처리량 (백만m³/년)", + "761.2", + "839.0", + "935.3", + "1,158.7", + "1,220.6", + "1,473.6", + ], + [ + "재이용량 (백만m³/년)", + "162.2", + "190.6", + "218.5", + "244.6", + "247.2", + "324.9", + ], + [ + "재이용률 (%)", + "24.7", + "25.4", + "27.8", + "25.7", + "24.2", + "24.1", + ], + ], + }, + { + group: "법적 미대상", + rows: [ + [ + "개소수 (개소)", + "603", + "599", + "604", + "607", + "613", + "599", + ], + [ + "하수처리량 (백만m³/년)", + "6,402.5", + "6,301.4", + "6,440.3", + "6,177.1", + "6,158.3", + "6,063.5", + ], + [ + "재이용량 (백만m³/년)", + "950.6", + "958.1", + "926.2", + "882.4", + "889.5", + "812.7", + ], + [ + "재이용률 (%)", + "16.5", + "15.3", + "13.6", + "12.2", + "12.6", + "12.5", + ], + ], + }, + ].map((section, sIdx) => ( + + {section.rows.map((row, rIdx) => ( + + {rIdx === 0 && ( + + )} + {row.map((val, i) => { + const isFirstCol = i === 0; + const isHighlightedCol = [1, 3, 5].includes(i); + + return ( + + ))} + + ))} + +
+ 구분 + + 2018 + + 2019 + + 2020 + + 2021 + + 2022 + + 2023 +
+ {section.group} + + ); + })} +
+
+ + +
+
+ +
+ + {/* 2) 용도별 하수처리수 재이용 현황 */} +
+ 용도별 하수처리수 재이용 현황 + +
+
+ + + + + + + + + + + + + + + + + + + + + + + {[ + { 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 ( + + + + {row.values.map((val, i) => ( + + ))} + + ); + })} + +
+ 구분 + + 2018 + + 2019 + + 2020 + + 2021 + + 2022 + + 2023 +
+ {isSubItem ? ( + <> +
+
+ + {row.label} + + + ) : ( + + {row.label} + + )} +
+ {val} +
+
+ + +
+
+ +
+ + {/* 3) 하수처리시설 설치 및 이용 현황 */} +
+ 하수처리시설 설치 및 이용 현황 + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + {[ + { + group: "전체", + rows: [ + [ + "시설수 (개소)", + "671", + "681", + "698", + "704", + "714", + "717", + ], + [ + "시설용량 (만m³/일)", + "25,846", + "26,067", + "26,244", + "26,492", + "26,586", + "26,766", + ], + [ + "처리용량 (만m³/일)", + "1,112.7", + "1,148.7", + "1,144.7", + "1,127.0", + "1,136.8", + "1,137.5", + ], + ], + }, + { + group: "법적 대상", + rows: [ + [ + "시설수 (개소)", + "68", + "82", + "94", + "97", + "101", + "118", + ], + [ + "시설용량 (만m³/일)", + "3,088.9", + "3,359.2", + "3,612.6", + "4,412.2", + "4,692.3", + "5,503.8", + ], + [ + "처리용량 (만m³/일)", + "162.2", + "190.6", + "218.5", + "244.6", + "247.2", + "324.9", + ], + ], + }, + { + group: "법적 미대상", + rows: [ + [ + "시설수 (개소)", + "603", + "599", + "604", + "607", + "613", + "599", + ], + [ + "시설용량 (만m³/일)", + "22,757", + "22,708", + "22,631", + "22,080", + "21,894", + "21,262", + ], + [ + "처리용량 (만m³/일)", + "950.6", + "958.1", + "926.2", + "882.4", + "889.5", + "812.7", + ], + ], + }, + ].map((section, sIdx) => ( + + {section.rows.map((row, rIdx) => ( + + {rIdx === 0 && ( + + )} + {row.map((val, i) => { + const isFirstCol = i === 0; + const isHighlightedCol = [1, 3, 5].includes(i); + + return ( + + ))} + + ))} + +
+ 구분 + + 2018 + + 2019 + + 2020 + + 2021 + + 2022 + + 2023 +
+ {section.group} + + ); + })} +
+
+ + +
+
+ +
+ + {/* 4) 시도별 하수처리수 재이용 현황 */} +
+ 시도별 하수처리수 재이용 현황 + +
+
+
+ (단위: 백만m³/일) +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {[ + ["합계", "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) => ( + + {row.map((val, i) => ( + + ))} + + ))} + +
+ 시도 + + 연간 +
+ 하수 +
+ 처리량 + 		+ 재이용현황 + + 재이용률 +
+ (%) + 		+ 비고 +
+ 계 + + 장내 + + 장외 +
+ 소계 + + 하천유지용수 + + 공업용수 + + 농업용수 + + 기타용수 +
+ {val} +
+
+ + +
+
+
+
+ ); +} \ No newline at end of file diff --git a/apps/dm/app/(with-layout)/status/layout.tsx b/apps/dm/app/(with-layout)/status/layout.tsx index 4c10a66c5..63ea923fa 100644 --- a/apps/dm/app/(with-layout)/status/layout.tsx +++ b/apps/dm/app/(with-layout)/status/layout.tsx @@ -8,13 +8,13 @@ export default function ExampleLayout({ children }: { children: ReactNode }) { return (
-
+
{children}
{/* 우측 메뉴 영역 */} - + {/* */}
); diff --git a/apps/dm/app/(with-layout)/status/page.tsx b/apps/dm/app/(with-layout)/status/page.tsx new file mode 100644 index 000000000..ff10dbaea --- /dev/null +++ b/apps/dm/app/(with-layout)/status/page.tsx @@ -0,0 +1,87 @@ +import BusinessSubNav, { type BusinessSubNavMenu } from "@/components/BusinessSubNav"; +import RainStatusSection from "./_components/RainStatusSection"; +import GreywaterStatusSection from "./_components/GreywaterStatusSection"; +import SewageStatusSection from "./_components/SewageStatusSection"; + +const menus: BusinessSubNavMenu[] = [ + { + key: "status-rain", + label: "빗물이용시설(현황)", + current: true, + defaultOpen: true, + sections: [ + { + id: "status-rain-building", + label: "빗물이용시설의 건축물별 빗물이용량 현황", + }, + { + id: "status-rain-purpose-distribution", + label: "빗물이용시설의 용도별 분포 (2023년 기준)", + }, + { + id: "status-rain-purpose-usage", + label: "빗물이용시설의 용도별 빗물이용량 현황", + }, + ], + }, + { + key: "status-greywater", + label: "중수도(현황)", + defaultOpen: false, + sections: [ + { + id: "status-greywater-overall", + label: "전체 중수도 설치 및 이용 현황", + }, + { + id: "status-greywater-factory", + label: "공장 및 발전시설 내 중수도 설치 현황", + }, + { + id: "status-greywater-building", + label: "중수도 건축물별 이용량 현황", + }, + { + id: "status-greywater-usage", + label: "중수도 용도별 이용량 현황", + }, + ], + }, + { + key: "status-sewage", + label: "하수처리수 재이용시설(현황)", + defaultOpen: false, + sections: [ + { + id: "status-treated-year", + label: "연도별 하수처리수 재이용 현황", + }, + { + id: "status-treated-usage", + label: "용도별 하수처리수 재이용 현황", + }, + { + id: "status-treated-facility", + label: "하수처리시설 설치 및 이용 현황", + }, + { + id: "status-treated-region", + label: "시도별 하수처리수 재이용 현황", + }, + ], + }, +]; + +export default function StatusPage() { + return ( +
+ + +
+ + + +
+
+ ); +} \ No newline at end of file diff --git a/apps/dm/app/(with-layout)/status/rain/page.tsx b/apps/dm/app/(with-layout)/status/rain/page.tsx index cee592068..b690f3dee 100644 --- a/apps/dm/app/(with-layout)/status/rain/page.tsx +++ b/apps/dm/app/(with-layout)/status/rain/page.tsx @@ -26,10 +26,6 @@ function SourceText() { ); } -/** - * 업데이트된 테이블 공통 스타일 클래스 - * - table-fixed 속성을 추가하여 열 넓이를 강제로 동일하게 분배합니다. - */ const tableStyles = { container: "w-[1000px] mx-auto overflow-hidden", table: "w-full table-fixed border-collapse text-center text-[16px]", @@ -53,165 +49,169 @@ export default function RainwaterStatusPage() { wrapClassName="!pb-0" /> -
+
- {/* 1) 빗물이용시설의 건축물별 빗물이용량 현황 */} -
- 빗물이용시설의 건축물별 빗물이용량 현황 -
-
- - - - - - - - - - - - - - - - - {[ - ["골프장", "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) => ( - - {row.map((val, i) => ( - - ))} + {/* 1) 빗물이용시설의 건축물별 빗물이용량 현황 */} +
+ 빗물이용시설의 건축물별 빗물이용량 현황 +
+
+
구분빗물이용량 (천m³/년)
201820192020202120222023
- {val} -
+ + + + - ))} - -
+ 구분 + + 빗물이용량 (천m³/년) +
-
- -
-
- -
- - {/* 2) 빗물이용시설의 용도별 분포 (2023년 기준) */} -
- 빗물이용시설의 용도별 분포 (2023년 기준) -
-
- - - - - - - - - - - - - - - - - - - - - {[ - ["청소·환경정화용수", "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) => ( - - {row.map((val, i) => { - const isHighlightedCol = [1, 2].includes(i); - return ( - + + + + + + + + + {[ + ["골프장", "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) => ( + + {row.map((val, i) => ( + - ); - })} - - ))} - -
용도개소수
(개소)		저류용량
(천m³)		빗물이용량 (천m³/년)
총사용량공공시설공동주택대규모점포체육시설학교골프장기타
+ 201820192020202120222023
{val}
+ ))} + + ))} + + +
+
- -
- +
- {/* 3) 빗물이용시설의 용도별 빗물이용량 현황 */} -
- 빗물이용시설의 용도별 빗물이용량 현황 -
-
- - - - - - - - - - - - - - - - - {[ - ["청소·화장실용수", "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) => ( - - {row.map((val, i) => ( - - ))} + {/* 2) 빗물이용시설의 용도별 분포 (2023년 기준) */} +
+ 빗물이용시설의 용도별 분포 (2023년 기준) +
+
+
용도빗물이용량 (천m³/년)
201820192020202120222023
- {val} -
+ + + + + + - ))} - -
용도개소수
(개소)		저류용량
(천m³)		빗물이용량 (천m³/년)
+ + 총사용량 + 공공시설 + 공동주택 + 대규모점포 + 체육시설 + 학교 + 골프장 + 기타 + + + + {[ + ["청소·환경정화용수", "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) => ( + + {row.map((val, i) => { + const isHighlightedCol = [1, 2].includes(i); + return ( + + {val} + + ); + })} + + ))} + + +
+
- -
- + + +
+ + {/* 3) 빗물이용시설의 용도별 빗물이용량 현황 */} +
+ 빗물이용시설의 용도별 빗물이용량 현황 +
+
+ + + + + + + + + + + + + + + + + {[ + ["청소·화장실용수", "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) => ( + + {row.map((val, i) => ( + + ))} + + ))} + +
용도빗물이용량 (천m³/년)
201820192020202120222023
+ {val} +
+
+ +
+
); diff --git a/apps/dm/app/layout.tsx b/apps/dm/app/layout.tsx index 0e45865e7..1fd9ea1cc 100644 --- a/apps/dm/app/layout.tsx +++ b/apps/dm/app/layout.tsx @@ -16,7 +16,7 @@ export default function RootLayout({ 물재이용 대민 -
+
{children}
diff --git a/apps/dm/components/BusinessSubNav.tsx b/apps/dm/components/BusinessSubNav.tsx index d3314eb63..ecfe805b3 100644 --- a/apps/dm/components/BusinessSubNav.tsx +++ b/apps/dm/components/BusinessSubNav.tsx @@ -1,125 +1,54 @@ "use client"; +import Link from "next/link"; import { useEffect, useMemo, useState } from "react"; -import { usePathname } from "next/navigation"; +import { ChevronDown, ChevronUp } from "lucide-react"; -type SectionItem = { +export type AnchorSection = { id: string; label: string; }; -const PAGE_SECTION_MAP: Record = { - // #물 재이용 소개 -물 재이용 법- - law: [ - { id: "law-plan", label: "법률 제·개정 및 기본계획 수립" }, - { id: "plan-performance", label: "제2차 계획 대비 실적 현황" }, - { id: "domestic-change", label: "국내 여건 변화" }, - { id: "policy-history", label: "물 재이용 정책 변화 추이" }, - { id: "law-relation", label: "타법령과의 관계 검토" }, - { id: "domestic-linkage", label: "국내 연계 현황" }, - ], - // #물 재이용 소개 - 빗물 이용시설 - - rain: [ - { id: "rain-intro", label: "빗물 재이용 소개" }, - { id: "rain-mandatory", label: "빗물이용시설 설치 관리 법적 의무 대상" }, - { id: "rain-design", label: "빗물이용시설 설계 방안" }, - { id: "rain-standards", label: "빗물이용시설 시설기준 및 관리기준" }, - ], - // #물 재이용 소개 - 중수도 - - reuseWater: [ - { id: "reuse-intro", label: "중수 재이용 소개" }, - { id: "reuse-mandatory", label: "중수도 설치 의무 대상" }, - { id: "reuse-standard", label: "중수도 시설기준 및 관리기준" }, - ], - // #물 재이용 소개 - 하수처리수 - - treated: [ - { id: "treated-intro", label: "하수처리수 개요" }, - { id: "treated-mandatory", label: "하수처리수 재이용시설 의무 대상" }, - ], - - // #물 재이용 현황 - 빗물이용시설(현황) - - statusRain: [ - { id: "status-rain-building", label: "빗물이용시설의 건축물별 빗물이용량 현황" }, - { id: "status-rain-purpose-distribution", label: "빗물이용시설의 용도별 분포(2023년 기준)" }, - { id: "status-rain-purpose-usage", label: "빗물이용시설의 용도별 빗물이용량 현황" }, - ], - // #물 재이용 현황 - 중수도(현황) - - statusGreywater: [ - { id: "status-greywater-overall", label: "전체 중수도 설치 및 이용 현황" }, - { id: "status-greywater-factory", label: "공장 및 발전시설 내 중수도 설치 현황" }, - { id: "status-greywater-building", label: "중수도 건축물별 이용량 현황" }, - { id: "status-greywater-usage", label: "중수도 용도별 이용량 현황" }, - ], - // #물 재이용 현황 - 하수처리수 재이용시설(현황) - - statusTreated: [ - { id: "status-treated-year", label: "연도별 하수처리수 재이용 현황" }, - { id: "status-treated-usage", label: "용도별 하수처리수 재이용 현황" }, - { id: "status-treated-facility", label: "하수처리시설 설치 및 이용 현황" }, - { id: "status-treated-region", label: "시도별 하수처리수 재이용 현황" }, - ], - - // #물 재이용 사례 - 빗물 재이용 사례 - - caseRain: [ - { id: "suwon", label: "경기도 수원시" }, - { id: "jeju", label: "제주특별자치도" }, - ], - // #물 재이용 사례 - 중수 재이용 사례 - - greywater: [ - { id: "ansan", label: "경기도 안산시" }, - { id: "yongin", label: "경기도 용인시" }, - { id: "pyeongtaek", label: "경기도 평택시" }, - ], - // #물 재이용 사례 - 하수 재이용 사례 - - sewage: [ - { id: "bolyeong", label: "충청남도 보령시" }, - { id: "cheongju", label: "청주시" }, - { id: "guri", label: "구리시 도로자동청소시스템" }, - { id: "hwanggu", label: "수원시 황구지천" }, - { id: "paju", label: "파주시" }, - { id: "yeosu", label: "여수시" }, - ], - // #물 재이용 사례 - 하수 재이용 사례 - - globalCase: [ - { id: "overview", label: "사례 개요" }, - { id: "taiwan", label: "대만" }, - { id: "australia", label: "호주" }, - { id: "singapore", label: "싱가포르" }, - { id: "eu", label: "EU" }, - ], +export type BusinessSubNavMenu = { + key: string; + label: string; + href?: string; + current?: boolean; + defaultOpen?: boolean; + sections?: AnchorSection[]; }; -function getSectionKey(pathname: string): string { +type BusinessSubNavProps = { + menus?: BusinessSubNavMenu[]; + offsetTop?: number; + className?: string; +}; - // 물 재이용 소개 - if (pathname.includes("/intro/law")) return "law"; // 물 재이용 법 - if (pathname.includes("/intro/rain")) return "rain"; // 빗물 이용시설 - if (pathname.includes("/intro/reuseWater")) return "reuseWater"; // 중수도 - if (pathname.includes("/intro/treated")) return "treated"; // 하수처리수 - - // 물 재이용 현황 - if (pathname.includes("/status/rain")) return "statusRain"; - if (pathname.includes("/status/greywater")) return "statusGreywater"; - if (pathname.includes("/status/sewage")) return "statusTreated"; - - // 물 재이용 사례 - if (pathname.includes("/example/rain")) return "caseRain"; - if (pathname.includes("/example/greywater")) return "greywater"; - if (pathname.includes("/example/sewage")) return "sewage"; - if (pathname.includes("/example/global")) return "globalCase"; - - const segments = pathname.split("/").filter(Boolean); - return segments[segments.length - 1] ?? ""; -} - -export default function BusinessSubNav() { - const pathname = usePathname(); - const sectionKey = getSectionKey(pathname); - - const items = useMemo(() => PAGE_SECTION_MAP[sectionKey] ?? [], [sectionKey]); +export default function BusinessSubNav({ + menus = [], + offsetTop = 120, + className = "", +}: BusinessSubNavProps) { const [activeId, setActiveId] = useState(""); + const [openMenus, setOpenMenus] = useState>({}); + + const allSections = useMemo( + () => menus.flatMap((menu) => menu.sections ?? []), + [menus] + ); useEffect(() => { - if (!items.length) return; + const initialOpenState: Record = {}; + + menus.forEach((menu) => { + initialOpenState[menu.key] = menu.defaultOpen ?? menu.current ?? false; + }); + + setOpenMenus(initialOpenState); + }, [menus]); + + useEffect(() => { + if (!allSections.length) return; const observer = new IntersectionObserver( (entries) => { @@ -127,31 +56,47 @@ export default function BusinessSubNav() { .filter((entry) => entry.isIntersecting) .sort((a, b) => b.intersectionRatio - a.intersectionRatio); - const firstVisible = visible[0]; - if (firstVisible) { - setActiveId(firstVisible.target.id); + if (visible[0]) { + setActiveId(visible[0].target.id); } }, { - rootMargin: "-120px 0px -55% 0px", + rootMargin: `-${offsetTop}px 0px -55% 0px`, threshold: [0.2, 0.35, 0.5, 0.7], - }, + } ); - const elements = items - .map((item) => document.getElementById(item.id)) + const targets = allSections + .map((section) => document.getElementById(section.id)) .filter(Boolean) as HTMLElement[]; - elements.forEach((el) => observer.observe(el)); + targets.forEach((el) => observer.observe(el)); const hash = window.location.hash.replace("#", ""); const initialActive = - items.find((item) => item.id === hash)?.id ?? items[0]?.id ?? ""; + allSections.find((section) => section.id === hash)?.id ?? + allSections[0]?.id ?? + ""; setActiveId(initialActive); return () => observer.disconnect(); - }, [items]); + }, [allSections, offsetTop]); + + useEffect(() => { + if (!activeId) return; + + const parentMenu = menus.find((menu) => + (menu.sections ?? []).some((section) => section.id === activeId) + ); + + if (!parentMenu) return; + + setOpenMenus((prev) => ({ + ...prev, + [parentMenu.key]: true, + })); + }, [activeId, menus]); const handleMove = (id: string) => { setActiveId(id); @@ -161,7 +106,7 @@ export default function BusinessSubNav() { window.history.replaceState(null, "", `#${id}`); - const top = target.getBoundingClientRect().top + window.scrollY - 120; + const top = target.getBoundingClientRect().top + window.scrollY - offsetTop; window.scrollTo({ top, @@ -169,40 +114,125 @@ export default function BusinessSubNav() { }); }; - if (!items.length) return null; + const toggleMenu = (key: string) => { + setOpenMenus((prev) => ({ + ...prev, + [key]: !prev[key], + })); + }; + + if (!menus.length) return null; return ( -
); } \ No newline at end of file diff --git a/apps/dm/components/Lnb.tsx b/apps/dm/components/Lnb.tsx index a38e233fe..5627c0685 100644 --- a/apps/dm/components/Lnb.tsx +++ b/apps/dm/components/Lnb.tsx @@ -1,19 +1,16 @@ "use client"; -import Link from "next/link"; -import { usePathname } from "next/navigation"; - -type LnbMenuItem = { +export type LnbMenuItem = { label: string; href: string; }; -type LnbConfig = { +export type LnbConfig = { title: string; menus: LnbMenuItem[]; }; -const LNB_MAP: Record = { +export const LNB_MAP = { intro: { title: "소개", menus: [ @@ -51,9 +48,9 @@ const LNB_MAP: Record = { { label: "수요신청현황", href: "/apply/status" }, ], }, -}; +} satisfies Record; -function getCategory(pathname: string): keyof typeof LNB_MAP { +export function getCategory(pathname: string): keyof typeof LNB_MAP { if (pathname.startsWith("/intro")) return "intro"; if (pathname.startsWith("/status")) return "status"; if (pathname.startsWith("/example")) return "case"; @@ -61,48 +58,11 @@ function getCategory(pathname: string): keyof typeof LNB_MAP { return "intro"; } -function isActiveMenu(pathname: string, href: string) { +export function isActiveMenu(pathname: string, href: string) { return pathname === href || pathname.startsWith(`${href}/`); } +// 왼쪽 메뉴는 더 이상 사용 안 함 export default function Lnb() { - const pathname = usePathname(); - const category = getCategory(pathname); - const { title, menus } = LNB_MAP[category]; - - return ( - - ); + return null; } \ No newline at end of file diff --git a/apps/dm/components/SubPageHeader.tsx b/apps/dm/components/SubPageHeader.tsx index b18ee28a6..ac31d5aaa 100644 --- a/apps/dm/components/SubPageHeader.tsx +++ b/apps/dm/components/SubPageHeader.tsx @@ -26,17 +26,11 @@ export default function SubPageHeader({ hideGuideText = false, }: Props) { return ( -
+
-
- {/* 좌측 타이틀 */} -
-

{title}

-
-
- +
{/* 우측 브레드크럼 */} -
{/* 하단 라인 + 안내문 */} {!hideGuideText && (