From 73e1499583a666d9bb6da3951e4bf66bea182fa9 Mon Sep 17 00:00:00 2001 From: LGS Date: Tue, 28 Apr 2026 16:38:34 +0900 Subject: [PATCH] =?UTF-8?q?=EB=AC=BC=EC=9E=AC=EC=9D=B4=EC=9A=A9=EC=86=8C?= =?UTF-8?q?=EA=B0=9C/=EB=AC=BC=EC=9E=AC=EC=9D=B4=EC=9A=A9=ED=98=84?= =?UTF-8?q?=ED=99=A9/=EB=AC=BC=EC=9E=AC=EC=9D=B4=EC=9A=A9=EC=82=AC?= =?UTF-8?q?=EB=A1=80=20=EC=84=B9=EC=85=98=20=ED=86=B5=ED=95=A9=EB=B2=84?= =?UTF-8?q?=EC=A0=84=20=EB=B0=8F=20=EC=9A=B0=EC=B8=A1=20=EB=93=9C=EB=A1=AD?= =?UTF-8?q?=EB=8B=A4=EC=9A=B4=EB=A9=94=EB=89=B4(=EC=95=B5=EC=BB=A4?= =?UTF-8?q?=EC=8A=A4=ED=81=AC=EB=A1=A4=EA=B8=B0=EB=8A=A5=ED=8F=AC=ED=95=A8?= =?UTF-8?q?)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../example/_components/GlobalCaseSection.tsx | 116 ++++++++ .../_components/GreywaterExampleSection.tsx | 191 +++++++++++++ .../_components/RainExampleSection.tsx | 72 +++++ .../_components/SewageExampleSection.tsx | 256 ++++++++++++++++++ apps/dm/app/(with-layout)/example/layout.tsx | 6 +- apps/dm/app/(with-layout)/example/page.tsx | 107 +++++--- .../intro/_components/LawIntroSection.tsx | 123 +++++++++ .../intro/_components/RainIntroSection.tsx | 99 +++++++ .../_components/ReuseWaterIntroSection.tsx | 96 +++++++ .../intro/_components/TreatedIntroSection.tsx | 89 ++++++ apps/dm/app/(with-layout)/intro/law/page.tsx | 5 +- apps/dm/app/(with-layout)/intro/layout.tsx | 5 +- apps/dm/app/(with-layout)/intro/page.tsx | 118 ++++---- apps/dm/app/(with-layout)/intro/rain/page.tsx | 1 + .../(with-layout)/intro/reuseWater/page.tsx | 2 +- .../app/(with-layout)/intro/treated/page.tsx | 2 +- apps/dm/app/(with-layout)/status/layout.tsx | 1 - apps/dm/app/(with-layout)/status/page.tsx | 15 +- apps/dm/components/BusinessSubNav.tsx | 34 ++- apps/dm/components/SubPageHeader.tsx | 4 +- .../rain/{rain_03.png => jeju_01.png} | Bin .../rain/{rain_04.png => jeju_02.png} | Bin 22 files changed, 1220 insertions(+), 122 deletions(-) create mode 100644 apps/dm/app/(with-layout)/example/_components/GlobalCaseSection.tsx create mode 100644 apps/dm/app/(with-layout)/example/_components/GreywaterExampleSection.tsx create mode 100644 apps/dm/app/(with-layout)/example/_components/RainExampleSection.tsx create mode 100644 apps/dm/app/(with-layout)/example/_components/SewageExampleSection.tsx create mode 100644 apps/dm/app/(with-layout)/intro/_components/LawIntroSection.tsx create mode 100644 apps/dm/app/(with-layout)/intro/_components/RainIntroSection.tsx create mode 100644 apps/dm/app/(with-layout)/intro/_components/ReuseWaterIntroSection.tsx create mode 100644 apps/dm/app/(with-layout)/intro/_components/TreatedIntroSection.tsx rename apps/dm/public/images/landing/business/rain/{rain_03.png => jeju_01.png} (100%) rename apps/dm/public/images/landing/business/rain/{rain_04.png => jeju_02.png} (100%) diff --git a/apps/dm/app/(with-layout)/example/_components/GlobalCaseSection.tsx b/apps/dm/app/(with-layout)/example/_components/GlobalCaseSection.tsx new file mode 100644 index 000000000..5d981d7de --- /dev/null +++ b/apps/dm/app/(with-layout)/example/_components/GlobalCaseSection.tsx @@ -0,0 +1,116 @@ +"use client"; + +import CaseImageSlider from "@/components/CaseImageSlider"; + +function SectionTitle({ children }: { children: React.ReactNode }) { + return ( +
+ +

{children}

+
+ ); +} + +// 구분선 +function Hr({ className = "" }: { className?: string }) { + return
; +} + +export default function GlobalCaseSection() { + const title = "해외 재이용 사례"; + return ( +
+ {/* 상단 타이틀 */} +
+

+ {title} + +

+
+
+
+ 사례 개요 + + +
+ +
+ +
+ 대만 + + +
+ +
+ +
+ 호주 + + +
+ +
+ +
+ 싱가포르 + + +
+ +
+ +
+ EU + + +
+
+
+ ); +} \ No newline at end of file diff --git a/apps/dm/app/(with-layout)/example/_components/GreywaterExampleSection.tsx b/apps/dm/app/(with-layout)/example/_components/GreywaterExampleSection.tsx new file mode 100644 index 000000000..374e3ddd4 --- /dev/null +++ b/apps/dm/app/(with-layout)/example/_components/GreywaterExampleSection.tsx @@ -0,0 +1,191 @@ +"use client"; + +function SectionTitle({ children }: { children: React.ReactNode }) { + return ( +
+ +

{children}

+
+ ); +} + +function BlockTitle({ children }: { children: React.ReactNode }) { + return ( +
+ +

{children}

+
+ ); +} + +// 구분선 +function Hr({ className = "" }: { className?: string }) { + return
; +} + +type SupplyRow = { + facility: string; + usage: string; + amount: string; +}; + +function SupplyTable({ rows }: { rows: SupplyRow[] }) { + return ( +
+ + + + + + + + + + {rows.map((row, index) => ( + + + + + + ))} + +
+ 시설명 + + 이용용도 + + 공급량(㎥) +
+ {row.facility} + + {row.usage} + + {row.amount} +
+
+ ); +} + +function InfoList({ + projectName, + purpose, + totalCost, + treatment, +}: { + projectName: string; + purpose: string; + totalCost: string; + treatment: string; +}) { + return ( +
+
+ 사업명 +
    +
  • {projectName}
    • +
+
+ +
+ 사업목적 +
    +
  • {purpose}
    • +
+
+ +
+ 사업 주요 내용 +
    +
  • 총사업비 : {totalCost}
    • +
  • 처리공법 : {treatment}
    • +
+
+ +
+ 사업량 +
+
+ ); +} + +export default function GreywaterExampleSection() { + const title = "중수 재이용 사례"; + return ( +
+ {/* 상단 타이틀 */} +
+

+ {title} + +

+
+ +
+
+ 경기도 안산시 + + + + +
+ +
+ +
+ 경기도 용인시 + + + + +
+ +
+ +
+ 경기도 평택시 + + + + +
+
+
+ ); +} \ No newline at end of file diff --git a/apps/dm/app/(with-layout)/example/_components/RainExampleSection.tsx b/apps/dm/app/(with-layout)/example/_components/RainExampleSection.tsx new file mode 100644 index 000000000..d73fdf1a2 --- /dev/null +++ b/apps/dm/app/(with-layout)/example/_components/RainExampleSection.tsx @@ -0,0 +1,72 @@ +"use client"; + +import CaseImageSlider from "@/components/CaseImageSlider"; + +function SectionTitle({ children }: { children: React.ReactNode }) { + return ( +
+ +

{children}

+
+ ); +} + +// 구분선 +function Hr({ className = "" }: { className?: string }) { + return
; +} + +export default function RainExampleSection() { + const title = "빗물 재이용 사례"; + return ( +
+ {/* 상단 타이틀 */} +
+

+ {title} + +

+
+ +
+ 경기도 수원시 + + +
+ +
+ +
+ 제주특별자치도 + + +
+
+ ); +} \ No newline at end of file diff --git a/apps/dm/app/(with-layout)/example/_components/SewageExampleSection.tsx b/apps/dm/app/(with-layout)/example/_components/SewageExampleSection.tsx new file mode 100644 index 000000000..72ac9741a --- /dev/null +++ b/apps/dm/app/(with-layout)/example/_components/SewageExampleSection.tsx @@ -0,0 +1,256 @@ +"use client"; + +import CaseImageSlider from "@/components/CaseImageSlider"; + +function SectionTitle({ children }: { children: React.ReactNode }) { + return ( +
+ +

{children}

+
+ ); +} + +// 구분선 +function Hr({ className = "" }: { className?: string }) { + return
; +} + +export default function SewageExampleSection() { + const title = "하수처리수 재이용 사례"; + return ( +
+ {/* 상단 타이틀 */} +
+

+ {title} + +

+
+ +
+
+ 충청남도 보령시 + + + +
+ 사업명 +

+ 충남 보령 하수재이용 +
: 보령·신보령화력발전소에 하루 1만톤의 탈황용수 공급을 위해 + 보령하수처리시설의 하수처리수 재이용 사업 추진 +

+
+ +
+ +
+ 사업 방식 +

+ 2017년 한국환경공단과 사업대행 위 · 수탁 협약 체결 +

+
+ +
+ 사업 주요 내용 +

+ 처리공정 : 전처리 UF + 후처리 RO +
+ 시설용량 : 1만m³/일 +
+ 관로 : 8.7km +
+ 사업비 : 315억원 +
+ 위치: 충청남도 보령시 대청방조제로 322 일원 +

+
+ +
+ +
+ 특이사항 +

+ 국내 유일 하수재이용 공업용수 공급 재정사업으로 2016년 충남 서부권 + 가뭄 시 지역사회 기여 차원에서 기관간 MOU를 바탕으로 추진 +

+
+
+ +
+ +
+ 청주시 + + + +
+ 사업명 +

청주시 하수 재이용 시설

+
+ +
+ +
+ 사업 주요 내용 +

+ 청주시 하수처리수 재이용 민간투자사업(BTO) +
+ 공급량 : 35,000㎥/일 +
+ 공급관로 : 8.3㎞ +
+ 사업비 : 622억원 +
+ 수요처 : SK하이닉스 등 일반산업단지 +
+ 지역 : 충청북도 청주시 흥덕구 가락리 135-9번지 일원 +
+ 적용기술 : 분리막 UF, RO +

+
+
+ +
+ +
+ 구리시 도로자동청소시스템 + + + +
+ 사업명 +

+ 구리시 도로자동청소시스템 설치사업 +

+
+ +
+ +
+ 사업목적 +

+ 공공하수처리시설 발생 재이용수 일부를 도로자동청소시스템에 활용하여 + 미세먼지 저감 및 폭염 취약성 완화 +

+
+
+ +
+ +
+ 수원시 황구지천 + + + +
+ 사업명 +

+ 수원시 황구지천 하수처리수 재이용사업 +

+
+
+ +
+ +
+ 파주시 + + + +
+ 사업명 +

+ 경기도 파주시 하수재이용 +
+ 운정·금촌하수처리시설의 하수처리수를 막공법으로 재처리하여 파주 LCD + 산업단지에 공업용수 공급 +

+
+
+ +
+ +
+ 여수시 + + + +
+ 사업명 +

+ 여수시 하수처리수 재이용 민간 투자사업(BTO) +

+
+
+
+
+ ); +} \ No newline at end of file diff --git a/apps/dm/app/(with-layout)/example/layout.tsx b/apps/dm/app/(with-layout)/example/layout.tsx index 4c10a66c5..7e6db8f54 100644 --- a/apps/dm/app/(with-layout)/example/layout.tsx +++ b/apps/dm/app/(with-layout)/example/layout.tsx @@ -2,19 +2,19 @@ import type { ReactNode } from "react"; import Lnb from "@/components/Lnb"; -import BusinessSubNav from "@/components/BusinessSubNav"; +// import BusinessSubNav from "@/components/BusinessSubNav"; export default function ExampleLayout({ children }: { children: ReactNode }) { return (
-
+
{children}
{/* 우측 메뉴 영역 */} - + {/* */}
); diff --git a/apps/dm/app/(with-layout)/example/page.tsx b/apps/dm/app/(with-layout)/example/page.tsx index 9217a9f54..9386012b1 100644 --- a/apps/dm/app/(with-layout)/example/page.tsx +++ b/apps/dm/app/(with-layout)/example/page.tsx @@ -1,64 +1,85 @@ -"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"; +import BusinessSubNav, { type BusinessSubNavMenu } from "@/components/BusinessSubNav"; + +import RainExampleSection from "./_components/RainExampleSection"; +import GreywaterExampleSection from "./_components/GreywaterExampleSection"; +import SewageExampleSection from "./_components/SewageExampleSection"; +import GlobalCaseSection from "./_components/GlobalCaseSection"; + +const menus: BusinessSubNavMenu[] = [ + { + key: "example-rain", + label: "빗물 재이용 사례", + sections: [ + { id: "example-rain-suwon", label: "경기도 수원시" }, + { id: "example-rain-jeju", label: "제주특별자치도" }, + ], + }, + { + key: "example-greywater", + label: "중수 재이용 사례", + defaultOpen: false, + sections: [ + { id: "example-greywater-ansan", label: "경기도 안산시" }, + { id: "example-greywater-yongin", label: "경기도 용인시" }, + { id: "example-greywater-pyeongtaek", label: "경기도 평택시" }, + ], + }, + { + key: "example-sewage", + label: "하수처리수 재이용 사례", + defaultOpen: false, + sections: [ + { id: "example-sewage-bolyeong", label: "충청남도 보령시" }, + { id: "example-sewage-cheongju", label: "청주시" }, + { id: "example-sewage-guri", label: "구리시 도로자동청소시스템" }, + { id: "example-sewage-hwanggu", label: "수원시 황구지천" }, + { id: "example-sewage-paju", label: "파주시" }, + { id: "example-sewage-yeosu", label: "여수시" }, + ], + }, + { + key: "example-global", + label: "해외 재이용 사례", + defaultOpen: false, + sections: [ + { id: "example-global-overview", label: "사례 개요" }, + { id: "example-global-taiwan", label: "대만" }, + { id: "example-global-australia", label: "호주" }, + { id: "example-global-singapore", label: "싱가포르" }, + { id: "example-global-eu", label: "EU" }, + ], + }, +]; 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/_components/LawIntroSection.tsx b/apps/dm/app/(with-layout)/intro/_components/LawIntroSection.tsx new file mode 100644 index 000000000..de39aa798 --- /dev/null +++ b/apps/dm/app/(with-layout)/intro/_components/LawIntroSection.tsx @@ -0,0 +1,123 @@ +"use client"; + +import React from "react"; +import Image, { type StaticImageData } from "next/image"; + +import lawPlan from "@/public/images/landing/intro/law_timeline.png"; +import planPerformance from "@/public/images/landing/intro/performance_left.png"; +import domesticChange from "@/public/images/landing/intro/domestic_textbox.png"; +import policyHistory from "@/public/images/landing/intro/policy_timeline.png"; +import lawRelation from "@/public/images/landing/intro/rel_note.png"; +import domesticLinkage from "@/public/images/landing/intro/linkage.png"; + +function SectionTitle({ children }: { children: React.ReactNode }) { + return ( +
+ +

{children}

+
+ ); +} + +function Hr({ className = "" }: { className?: string }) { + return
; +} + +function ImgCard({ src, alt }: { src: StaticImageData; alt: string }) { + return ( +
+ {alt} +
+ ); +} + +function SectionShell({ + id, + title, + children, + className = "", +}: { + id: string; + title: string; + children: React.ReactNode; + className?: string; +}) { + return ( +
+ {title} +
{children}
+
+ ); +} + +export default function LawIntroSection() { + const title = "물 재이용 법"; + + return ( +
+
+

+ {title} + +

+
+ +
+ + + + +
+ + + + + +
+ + + + + +
+ + + + + +
+ + + + + +
+ + + + +
+
+ ); +} \ No newline at end of file diff --git a/apps/dm/app/(with-layout)/intro/_components/RainIntroSection.tsx b/apps/dm/app/(with-layout)/intro/_components/RainIntroSection.tsx new file mode 100644 index 000000000..4de564a54 --- /dev/null +++ b/apps/dm/app/(with-layout)/intro/_components/RainIntroSection.tsx @@ -0,0 +1,99 @@ +"use client"; + +import React from "react"; +import Image, { type StaticImageData } from "next/image"; + +import rainSummary from "@/public/images/landing/intro/rainreuse_intro.png"; +import rainDuty from "@/public/images/landing/intro/rainreuse_mandatory.png"; +import rainDesign from "@/public/images/landing/intro/rainwater_design.png"; +import rainStandard from "@/public/images/landing/intro/rainwater_standards.png"; + +function SectionTitle({ children }: { children: React.ReactNode }) { + return ( +
+ +

{children}

+
+ ); +} + +function Hr({ className = "" }: { className?: string }) { + return
; +} + +function ImgCard({ src, alt }: { src: StaticImageData; alt: string }) { + return ( +
+ {alt} +
+ ); +} + +function SectionShell({ + id, + title, + children, + className = "", +}: { + id: string; + title: string; + children: React.ReactNode; + className?: string; +}) { + return ( +
+ {title} +
{children}
+
+ ); +} + +export default function RainIntroSection() { + const title = "빗물 이용시설"; + + return ( +
+
+

+ {title} + +

+
+ +
+ + + + +
+ + + + + +
+ + + + + +
+ + + + +
+
+ ); +} \ No newline at end of file diff --git a/apps/dm/app/(with-layout)/intro/_components/ReuseWaterIntroSection.tsx b/apps/dm/app/(with-layout)/intro/_components/ReuseWaterIntroSection.tsx new file mode 100644 index 000000000..03b01e398 --- /dev/null +++ b/apps/dm/app/(with-layout)/intro/_components/ReuseWaterIntroSection.tsx @@ -0,0 +1,96 @@ +"use client"; + +import React from "react"; +import Image, { type StaticImageData } from "next/image"; + +import greywaterIntro from "@/public/images/landing/intro/greywater_intro.png"; +import greywaterMandatory from "@/public/images/landing/intro/greywater_mandatory.png"; +import greywaterStandard from "@/public/images/landing/intro/greywater_standard.png"; + +function SectionTitle({ children }: { children: React.ReactNode }) { + return ( +
+ +

{children}

+
+ ); +} + +function Hr({ className = "" }: { className?: string }) { + return
; +} + +function ImgCard({ src, alt }: { src: StaticImageData; alt: string }) { + return ( +
+ {alt} +
+ ); +} + +function SectionShell({ + id, + title, + children, + className = "", +}: { + id: string; + title: string; + children: React.ReactNode; + className?: string; +}) { + return ( +
+ {title} +
{children}
+
+ ); +} + +export default function ReuseWaterIntroSection() { + const title = "중수도"; + + return ( +
+
+

+ {title} + +

+
+ +
+ + + + +
+ + + + + +
+ + + + +
+
+ ); +} \ No newline at end of file diff --git a/apps/dm/app/(with-layout)/intro/_components/TreatedIntroSection.tsx b/apps/dm/app/(with-layout)/intro/_components/TreatedIntroSection.tsx new file mode 100644 index 000000000..ff3ece0fc --- /dev/null +++ b/apps/dm/app/(with-layout)/intro/_components/TreatedIntroSection.tsx @@ -0,0 +1,89 @@ +"use client"; + +import React from "react"; +import Image, { type StaticImageData } from "next/image"; + +import treatedwaterIntro from "@/public/images/landing/intro/treatedwater_intro.png"; +import treatedwaterMandatory from "@/public/images/landing/intro/treatedwater_mandatory.png"; + +function SectionTitle({ children }: { children: React.ReactNode }) { + return ( +
+ +

{children}

+
+ ); +} + +function Hr({ className = "" }: { className?: string }) { + return
; +} + +function ImgCard({ src, alt }: { src: StaticImageData; alt: string }) { + return ( +
+ {alt} +
+ ); +} + +function SectionShell({ + id, + title, + children, + className = "", +}: { + id: string; + title: string; + children: React.ReactNode; + className?: string; +}) { + return ( +
+ {title} +
{children}
+
+ ); +} + +export default function TreatedIntroSection() { + const title = "하수처리수"; + + return ( +
+
+

+ {title} + +

+
+ +
+ + + + +
+ + + + +
+
+ ); +} \ No newline at end of file diff --git a/apps/dm/app/(with-layout)/intro/law/page.tsx b/apps/dm/app/(with-layout)/intro/law/page.tsx index 0c6687eb0..63f504af4 100644 --- a/apps/dm/app/(with-layout)/intro/law/page.tsx +++ b/apps/dm/app/(with-layout)/intro/law/page.tsx @@ -1,8 +1,9 @@ +// DM 물 재이용 소개(물 재이용 법) 페이지 "use client"; import Image, { type StaticImageData } from "next/image"; import SubPageHeader from "@/components/SubPageHeader"; -import BusinessSubNav from "@/components/BusinessSubNav"; +// import BusinessSubNav from "@/components/BusinessSubNav"; import lawTimeline from "@/public/images/landing/intro/law_timeline.png"; import performanceLeft from "@/public/images/landing/intro/performance_left.png"; @@ -72,7 +73,7 @@ function SectionShell({ id, title, children, className = "" }: SectionShellProps export default function WaterReuseLawPage() { return (
- + {/* */} -
+
{children}
{/* 우측 메뉴 영역 */} - + {/* */}
); diff --git a/apps/dm/app/(with-layout)/intro/page.tsx b/apps/dm/app/(with-layout)/intro/page.tsx index f75e418e3..5ee955604 100644 --- a/apps/dm/app/(with-layout)/intro/page.tsx +++ b/apps/dm/app/(with-layout)/intro/page.tsx @@ -1,64 +1,86 @@ -"use client"; - +// DM 물 재이용 소개 페이지 +import BusinessSubNav, { type BusinessSubNavMenu } from "@/components/BusinessSubNav"; 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"; +import LawIntroSection from "./_components/LawIntroSection"; +import RainIntroSection from "./_components/RainIntroSection"; +import ReuseWaterIntroSection from "./_components/ReuseWaterIntroSection"; +import TreatedIntroSection from "./_components/TreatedIntroSection"; -function Hr({ className = "" }: { className?: string }) { - return
; -} +const menus: BusinessSubNavMenu[] = [ + { + key: "intro-law", + label: "물 재이용 법", + sections: [ + { 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: "주요 국가계획의 정책방향과 연계한 물 재이용 정책 필요" }, + ], + }, + { + key: "intro-rain", + label: "빗물 이용시설", + defaultOpen: false, + sections: [ + { id: "rain-intro", label: "빗물 재이용 소개" }, + { + id: "rain-mandatory", + label: "빗물이용시설 설치 관리 법적 의무 대상", + }, + { id: "rain-design", label: "빗물이용시설 설계 방안" }, + { + id: "rain-standards", + label: "빗물이용시설 시설기준 및 관리기준", + }, + ], + }, + { + key: "intro-greywater", + label: "중수도", + defaultOpen: false, + sections: [ + { id: "greywater-intro", label: "중수 재이용 소개" }, + { id: "greywater-mandatory", label: "중수도 설치 의무 대상" }, + { id: "greywater-standard", label: "중수도 시설기준 및 관리기준" }, + ], + }, + { + key: "intro-treated", + label: "하수처리수", + defaultOpen: false, + sections: [ + { id: "treatedwater-intro", label: "하수처리수 소개" }, + { + id: "treatedwater-mandatory", + label: "하수처리수 재이용시설 의무 대상", + }, + ], + }, +]; 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)/intro/rain/page.tsx b/apps/dm/app/(with-layout)/intro/rain/page.tsx index acfb6cacd..bbcf708e1 100644 --- a/apps/dm/app/(with-layout)/intro/rain/page.tsx +++ b/apps/dm/app/(with-layout)/intro/rain/page.tsx @@ -1,3 +1,4 @@ +// DM 물 재이용 소개(빗물 이용시설) 페이지 "use client"; import Image, { type StaticImageData } from "next/image"; diff --git a/apps/dm/app/(with-layout)/intro/reuseWater/page.tsx b/apps/dm/app/(with-layout)/intro/reuseWater/page.tsx index ab19fe2ed..b7e0c6731 100644 --- a/apps/dm/app/(with-layout)/intro/reuseWater/page.tsx +++ b/apps/dm/app/(with-layout)/intro/reuseWater/page.tsx @@ -1,5 +1,5 @@ +// DM 물 재이용 소개(중수도) 페이지 "use client"; - import Image, { type StaticImageData } from "next/image"; import SubPageHeader from "@/components/SubPageHeader"; import BusinessSubNav from "@/components/BusinessSubNav"; diff --git a/apps/dm/app/(with-layout)/intro/treated/page.tsx b/apps/dm/app/(with-layout)/intro/treated/page.tsx index 37221fbd1..7f4280ff1 100644 --- a/apps/dm/app/(with-layout)/intro/treated/page.tsx +++ b/apps/dm/app/(with-layout)/intro/treated/page.tsx @@ -1,5 +1,5 @@ +// DM 물 재이용 소개(하수처리수) 페이지 "use client"; - import Image, { type StaticImageData } from "next/image"; import SubPageHeader from "@/components/SubPageHeader"; import BusinessSubNav from "@/components/BusinessSubNav"; diff --git a/apps/dm/app/(with-layout)/status/layout.tsx b/apps/dm/app/(with-layout)/status/layout.tsx index 63ea923fa..6ce4ebbe3 100644 --- a/apps/dm/app/(with-layout)/status/layout.tsx +++ b/apps/dm/app/(with-layout)/status/layout.tsx @@ -2,7 +2,6 @@ import type { ReactNode } from "react"; import Lnb from "@/components/Lnb"; -import BusinessSubNav from "@/components/BusinessSubNav"; export default function ExampleLayout({ children }: { children: ReactNode }) { return ( diff --git a/apps/dm/app/(with-layout)/status/page.tsx b/apps/dm/app/(with-layout)/status/page.tsx index ff10dbaea..1043827dd 100644 --- a/apps/dm/app/(with-layout)/status/page.tsx +++ b/apps/dm/app/(with-layout)/status/page.tsx @@ -1,4 +1,6 @@ +// DM 물 재이용 현황 페이지 import BusinessSubNav, { type BusinessSubNavMenu } from "@/components/BusinessSubNav"; +import SubPageHeader from "@/components/SubPageHeader"; import RainStatusSection from "./_components/RainStatusSection"; import GreywaterStatusSection from "./_components/GreywaterStatusSection"; import SewageStatusSection from "./_components/SewageStatusSection"; @@ -7,8 +9,6 @@ const menus: BusinessSubNavMenu[] = [ { key: "status-rain", label: "빗물이용시설(현황)", - current: true, - defaultOpen: true, sections: [ { id: "status-rain-building", @@ -75,9 +75,18 @@ const menus: BusinessSubNavMenu[] = [ export default function StatusPage() { return (
+ {/* 상단 헤더 */} + + {/* 우측 앵커 네비 */} -
+
diff --git a/apps/dm/components/BusinessSubNav.tsx b/apps/dm/components/BusinessSubNav.tsx index ecfe805b3..6b4246412 100644 --- a/apps/dm/components/BusinessSubNav.tsx +++ b/apps/dm/components/BusinessSubNav.tsx @@ -83,19 +83,24 @@ export default function BusinessSubNav({ return () => observer.disconnect(); }, [allSections, offsetTop]); - useEffect(() => { - if (!activeId) return; + useEffect(() => { + if (!activeId) return; const parentMenu = menus.find((menu) => - (menu.sections ?? []).some((section) => section.id === activeId) + (menu.sections ?? []).some((section) => section.id === activeId) ); if (!parentMenu) return; - setOpenMenus((prev) => ({ - ...prev, - [parentMenu.key]: true, - })); + setOpenMenus(() => { + const nextOpenState: Record = {}; + + menus.forEach((menu) => { + nextOpenState[menu.key] = menu.key === parentMenu.key; + }); + + return nextOpenState; + }); }, [activeId, menus]); const handleMove = (id: string) => { @@ -136,17 +141,16 @@ export default function BusinessSubNav({ return (
-
+
{menu.href ? ( {menu.label} @@ -158,10 +162,10 @@ export default function BusinessSubNav({ if (hasChildren) toggleMenu(menu.key); }} className={[ - "text-left text-[16px] font-extrabold tracking-[-0.02em]", + "text-left text-[16px] font-medium tracking-[-0.02em]", isCurrentGroup || menu.current ? "text-sky-500" - : "text-[#6B7280]", + : "text-[#767676]", ].join(" ")} > {menu.label} @@ -176,7 +180,7 @@ export default function BusinessSubNav({ "ml-2 shrink-0", isCurrentGroup || menu.current ? "text-sky-500" - : "text-[#6B7280]", + : "text-[#767676]", ].join(" ")} aria-label={`${menu.label} 드롭다운 토글`} > @@ -214,7 +218,7 @@ export default function BusinessSubNav({ />
{/* 하단 라인 + 안내문 */} - {!hideGuideText && ( + {/* {!hideGuideText && (
* {note.replace("*", "")}
- )} + )} */}
); diff --git a/apps/dm/public/images/landing/business/rain/rain_03.png b/apps/dm/public/images/landing/business/rain/jeju_01.png similarity index 100% rename from apps/dm/public/images/landing/business/rain/rain_03.png rename to apps/dm/public/images/landing/business/rain/jeju_01.png diff --git a/apps/dm/public/images/landing/business/rain/rain_04.png b/apps/dm/public/images/landing/business/rain/jeju_02.png similarity index 100% rename from apps/dm/public/images/landing/business/rain/rain_04.png rename to apps/dm/public/images/landing/business/rain/jeju_02.png