물재이용소개/물재이용현황/물재이용사례 섹션 통합버전 및 우측 드롭다운메뉴(앵커스크롤기능포함)

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 (
+    <div className="flex items-center gap-3">
+      <span className="h-5 w-[3px] bg-sky-500" />
+      <h3 className="text-2xl font-bold text-neutral-900">{children}</h3>
+    </div>
+  );
+}
+
+// 구분선
+function Hr({ className = "" }: { className?: string }) {
+  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
+}
+
+export default function GlobalCaseSection() {
+  const title = "해외 재이용 사례";  
+  return (
+    <div className="bg-white">
+      {/* 상단 타이틀 */}
+      <div className="inline-block">
+        <h2 className="relative inline-block px-2 text-[28px] font-extrabold tracking-tight leading-none text-slate-900">
+            <span className="relative z-10">{title}</span>
+            <span className="absolute left-0 bottom-[-4px] z-0 h-3 w-full bg-gradient-to-r from-sky-300 to-green-300" />
+        </h2>
+      </div>
+      <div className="mt-10 pb-[120px]">       
+        <section id="example-global-overview" className="scroll-mt-[120px]">
+            <SectionTitle>사례 개요</SectionTitle>
+
+            <CaseImageSlider
+            className="mt-8"
+            maxWidthClassName="max-w-[760px]"
+            slides={[
+                {
+                src: "/images/landing/business/globalCase/overview_01.png",
+                alt: "해외 재이용 사례 개요 1",
+                },
+            ]}
+            />
+        </section>
+
+        <Hr className="my-16" />
+
+        <section id="example-global-taiwan" className="scroll-mt-[120px]">
+            <SectionTitle>대만</SectionTitle>
+
+            <CaseImageSlider
+            className="mt-8"
+            maxWidthClassName="max-w-[760px]"
+            slides={[
+                {
+                src: "/images/landing/business/globalCase/taiwan_01.png",
+                alt: "대만 사례 1",
+                },
+            ]}
+            />
+        </section>
+
+        <Hr className="my-16" />
+
+        <section id="example-global-australia" className="scroll-mt-[120px]">
+            <SectionTitle>호주</SectionTitle>
+
+            <CaseImageSlider
+            className="mt-8"
+            maxWidthClassName="max-w-[760px]"
+            slides={[
+                {
+                src: "/images/landing/business/globalCase/australia_01.png",
+                alt: "호주 사례 1",
+                },
+            ]}
+            />
+        </section>
+
+        <Hr className="my-16" />
+
+        <section id="example-global-singapore" className="scroll-mt-[120px]">
+            <SectionTitle>싱가포르</SectionTitle>
+
+            <CaseImageSlider
+            className="mt-8"
+            maxWidthClassName="max-w-[760px]"
+            slides={[
+                {
+                src: "/images/landing/business/globalCase/singapore_01.png",
+                alt: "싱가포르 사례 1",
+                },
+            ]}
+            />
+        </section>
+
+        <Hr className="my-16" />
+
+        <section id="example-global-eu" className="scroll-mt-[120px]">
+            <SectionTitle>EU</SectionTitle>
+
+            <CaseImageSlider
+            className="mt-8"
+            maxWidthClassName="max-w-[760px]"
+            slides={[
+                {
+                src: "/images/landing/business/globalCase/eu_01.png",
+                alt: "EU 사례 1",
+                },
+            ]}
+            />
+        </section>
+      </div>
+    </div>
+  );
+}

apps/dm/app/(with-layout)/example/_components/GreywaterExampleSection.tsx

@@ -0,0 +1,191 @@
+"use client";
+
+function SectionTitle({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex items-center gap-3">
+      <span className="h-5 w-[3px] bg-sky-500" />
+      <h3 className="text-2xl font-bold text-neutral-900">{children}</h3>
+    </div>
+  );
+}
+
+function BlockTitle({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex items-center gap-2">
+      <span className="inline-block h-[14px] w-[24px] rounded-full bg-gradient-to-r from-sky-300 to-lime-300" />
+      <h4 className="text-[20px] font-semibold text-[#1A1A1A]">{children}</h4>
+    </div>
+  );
+}
+
+// 구분선
+function Hr({ className = "" }: { className?: string }) {
+  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
+}
+
+type SupplyRow = {
+  facility: string;
+  usage: string;
+  amount: string;
+};
+
+function SupplyTable({ rows }: { rows: SupplyRow[] }) {
+  return (
+    <div className="mt-8 overflow-x-auto">
+      <table className="w-full min-w-[860px] border border-[#D8DDE3] text-center">
+        <thead>
+          <tr>
+            <th className="border border-[#D8DDE3] bg-[#14A9D9] px-4 py-2 text-[18px] font-medium text-white">
+              시설명
+            </th>
+            <th className="border border-[#D8DDE3] bg-[#40B5A5] px-4 py-2 text-[18px] font-medium text-white">
+              이용용도
+            </th>
+            <th className="border border-[#D8DDE3] bg-[#73BF4B] px-4 py-2 text-[18px] font-medium text-white">
+              공급량(㎥)
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((row, index) => (
+            <tr key={`${row.facility}-${index}`}>
+              <td className="border border-[#D8DDE3] bg-white px-4 py-2 text-[16px] text-[#4F4F4F]">
+                {row.facility}
+              </td>
+              <td className="border border-[#D8DDE3] bg-white px-4 py-2 text-[16px] text-[#4F4F4F]">
+                {row.usage}
+              </td>
+              <td className="border border-[#D8DDE3] bg-white px-4 py-2 text-[16px] text-[#4F4F4F]">
+                {row.amount}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+function InfoList({
+  projectName,
+  purpose,
+  totalCost,
+  treatment,
+}: {
+  projectName: string;
+  purpose: string;
+  totalCost: string;
+  treatment: string;
+}) {
+  return (
+    <div className="mt-10 space-y-10">
+      <div>
+        <BlockTitle>사업명</BlockTitle>
+        <ul className="mt-4 list-disc pl-8 text-16px] leading-[1.8] text-[#4F4F4F]">
+          <li>{projectName}</li>
+        </ul>
+      </div>
+
+      <div>
+        <BlockTitle>사업목적</BlockTitle>
+        <ul className="mt-4 list-disc pl-8 text-16px] leading-[1.8] text-[#4F4F4F]">
+          <li>{purpose}</li>
+        </ul>
+      </div>
+
+      <div>
+        <BlockTitle>사업 주요 내용</BlockTitle>
+        <ul className="mt-4 list-disc pl-8 text-16px] leading-[1.8] text-[#4F4F4F]">
+          <li>총사업비 : {totalCost}</li>
+          <li>처리공법 : {treatment}</li>
+        </ul>
+      </div>
+
+      <div>
+        <BlockTitle>사업량</BlockTitle>
+      </div>
+    </div>
+  );
+}
+
+export default function GreywaterExampleSection() {
+  const title = "중수 재이용 사례";
+  return (
+    <div className="bg-white">
+      {/* 상단 타이틀 */}
+      <div className="inline-block">
+        <h2 className="relative inline-block px-2 text-[28px] font-extrabold tracking-tight leading-none text-slate-900">
+            <span className="relative z-10">{title}</span>
+            <span className="absolute left-0 bottom-[-4px] z-0 h-3 w-full bg-gradient-to-r from-sky-300 to-green-300" />
+        </h2>
+      </div>
+      
+      <div className="mt-10 pb-[120px]">
+        <section id="example-greywater-ansan" className="scroll-mt-[120px]">
+            <SectionTitle>경기도 안산시</SectionTitle>
+
+            <InfoList
+            projectName="안산시 중수도 설치사업"
+            purpose="수자원을 효율적으로 활용하여 지속가능성 도모 및 물 절약 실현"
+            totalCost="81억원"
+            treatment="MBR공법"
+            />
+
+            <SupplyTable
+            rows={[
+                { facility: "경기테크노파크", usage: "청소·화장실용수", amount: "40㎥/일" },
+                { facility: "올림픽수영장", usage: "청소·화장실/세척·살수용수", amount: "35㎥/일" },
+                { facility: "와스타디움", usage: "청소·화장실/조경용수", amount: "90㎥/일" },
+                { facility: "호수실내수영장", usage: "청소·화장실/조경/세척·살수용수", amount: "50㎥/일" },
+                { facility: "한양대학교 에리카캠퍼스", usage: "청소·화장실용수", amount: "370㎥/일" },
+            ]}
+            />
+        </section>
+
+        <Hr className="my-20" />
+
+        <section id="example-greywater-yongin" className="scroll-mt-[120px]">
+            <SectionTitle>경기도 용인시</SectionTitle>
+
+            <InfoList
+            projectName="용인시 중수도 설치사업"
+            purpose="물 부족 등의 비상상황에 대한 대비, 하수라도 사용할 집결 등 수자원의 효율적 활용"
+            totalCost="40억원"
+            treatment="MBR공법"
+            />
+
+            <SupplyTable
+            rows={[
+                { facility: "여성회관", usage: "청소·화장실용수", amount: "35㎥/일" },
+                { facility: "수지아르피아", usage: "청소·화장실용수", amount: "35㎥/일" },
+                { facility: "지상작전사령부", usage: "청소·화장실/조경/세척·살수용수", amount: "53㎥/일" },
+            ]}
+            />
+        </section>
+
+        <Hr className="my-20" />
+
+        <section id="example-greywater-pyeongtaek" className="scroll-mt-[120px]">
+            <SectionTitle>경기도 평택시</SectionTitle>
+
+            <InfoList
+            projectName="평택시 중수도 설치사업"
+            purpose="수자원을 효율적으로 활용하여 지속가능성 도모 및 물 절약 실현"
+            totalCost="21억원"
+            treatment="MBR공법"
+            />
+
+            <SupplyTable
+            rows={[
+                {
+                facility: "평택대학교",
+                usage: "청소·화장실용수",
+                amount: "50㎥/일",
+                },
+            ]}
+            />
+        </section>
+      </div>
+    </div>
+  );
+}

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 (
+    <div className="flex items-center gap-3">
+      <span className="h-5 w-[3px] bg-sky-500" />
+      <h3 className="text-2xl font-bold text-neutral-900">{children}</h3>
+    </div>
+  );
+}
+
+// 구분선
+function Hr({ className = "" }: { className?: string }) {
+  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
+}
+
+export default function RainExampleSection() {
+  const title = "빗물 재이용 사례";
+  return (
+    <div className="bg-white">
+      {/* 상단 타이틀 */}
+      <div className="inline-block">
+        <h2 className="relative inline-block px-2 text-[28px] font-extrabold tracking-tight leading-none text-slate-900">
+            <span className="relative z-10">{title}</span>
+            <span className="absolute left-0 bottom-[-4px] z-0 h-3 w-full bg-gradient-to-r from-sky-300 to-green-300" />
+        </h2>
+      </div>
+
+      <section id="example-rain-suwon" className="mt-10 scroll-mt-[120px]">
+        <SectionTitle>경기도 수원시</SectionTitle>
+
+        <CaseImageSlider
+          className="mt-8"
+          maxWidthClassName="max-w-[760px]"
+          slides={[
+            {
+              src: "/images/landing/business/rain/rain_01.png",
+              alt: "수원시 사례 1",
+            },
+            {
+              src: "/images/landing/business/rain/rain_02.png",
+              alt: "수원시 사례 2",
+            },
+          ]}
+        />
+      </section>
+
+      <Hr className="my-16" />
+
+      <section id="example-rain-jeju" className="scroll-mt-[120px]">
+        <SectionTitle>제주특별자치도</SectionTitle>
+
+        <CaseImageSlider
+          className="mt-8"
+          maxWidthClassName="max-w-[760px]"
+          slides={[
+            {
+              src: "/images/landing/business/rain/jeju_01.png",
+              alt: "제주 사례 1",
+            },
+            {
+              src: "/images/landing/business/rain/jeju_02.png",
+              alt: "제주 사례 2",
+            },
+          ]}
+        />
+      </section>
+    </div>
+  );
+}

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 (
+    <div className="flex items-center gap-3">
+      <span className="h-5 w-[3px] bg-sky-500" />
+      <h3 className="text-2xl font-bold text-neutral-900">{children}</h3>
+    </div>
+  );
+}
+
+// 구분선
+function Hr({ className = "" }: { className?: string }) {
+  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
+}
+
+export default function SewageExampleSection() {
+  const title = "하수처리수 재이용 사례";
+  return (
+    <div className="bg-white">
+      {/* 상단 타이틀 */}
+      <div className="inline-block">
+        <h2 className="relative inline-block px-2 text-[28px] font-extrabold tracking-tight leading-none text-slate-900">
+            <span className="relative z-10">{title}</span>
+            <span className="absolute left-0 bottom-[-4px] z-0 h-3 w-full bg-gradient-to-r from-sky-300 to-green-300" />
+        </h2>
+      </div>
+
+      <div className="mt-10">
+        <section id="example-sewage-bolyeong" className="scroll-mt-[120px]">
+            <SectionTitle>충청남도 보령시</SectionTitle>
+
+            <CaseImageSlider
+                className="mt-8"
+                maxWidthClassName="max-w-[760px]"
+                slides={[
+                    {
+                    src: "/images/landing/business/sewage/bolyeong_01.png",
+                    alt: "보령시 하수 재이용 1",
+                    },
+                ]}
+            />
+
+            <section className="mt-6">
+                <SectionTitle>사업명</SectionTitle>
+                <p className="mt-8 text-base text-gray-600">
+                    충남 보령 하수재이용
+                    <br />: 보령·신보령화력발전소에 하루 1만톤의 탈황용수 공급을 위해
+                    보령하수처리시설의 하수처리수 재이용 사업 추진
+                </p>
+            </section>
+
+            <Hr className="my-11" />
+
+            <section className="mt-6">
+                <SectionTitle>사업 방식</SectionTitle>
+                <p className="mt-8 text-base text-gray-600">
+                    2017년 한국환경공단과 사업대행 위 · 수탁 협약 체결
+                </p>
+            </section>
+
+            <section className="mt-6">
+                <SectionTitle>사업 주요 내용</SectionTitle>
+                <p className="mt-8 text-base text-gray-600">
+                    처리공정 : 전처리 UF + 후처리 RO
+                    <br />
+                    시설용량 : 1만m³/일
+                    <br />
+                    관로 : 8.7km
+                    <br />
+                    사업비 : 315억원
+                    <br />
+                    위치: 충청남도 보령시 대청방조제로 322 일원
+                </p>
+            </section>
+
+            <Hr className="my-11" />
+
+            <section>
+                <SectionTitle>특이사항</SectionTitle>
+                <p className="mt-8 text-base text-gray-600">
+                    국내 유일 하수재이용 공업용수 공급 재정사업으로 2016년 충남 서부권
+                    가뭄 시 지역사회 기여 차원에서 기관간 MOU를 바탕으로 추진
+                </p>
+            </section>
+        </section>
+
+        <Hr className="my-16" />
+
+        <section id="example-sewage-cheongju" className="scroll-mt-[120px]">
+            <SectionTitle>청주시</SectionTitle>
+
+            <CaseImageSlider
+                className="mt-8"
+                maxWidthClassName="max-w-[760px]"
+                slides={[
+                    {
+                    src: "/images/landing/business/sewage/cheongju_01.png",
+                    alt: "청주시 하수 재이용 1",
+                    },
+                ]}
+            />
+
+            <section className="mt-6">
+                <SectionTitle>사업명</SectionTitle>
+                <p className="mt-8 text-base text-gray-600">청주시 하수 재이용 시설</p>
+            </section>
+
+            <Hr className="my-11" />
+
+            <section>
+                <SectionTitle>사업 주요 내용</SectionTitle>
+                <p className="mt-8 text-base text-gray-600">
+                    청주시 하수처리수 재이용 민간투자사업(BTO)
+                    <br />
+                    공급량 : 35,000㎥/일
+                    <br />
+                    공급관로 : 8.3㎞
+                    <br />
+                    사업비 : 622억원
+                    <br />
+                    수요처 : SK하이닉스 등 일반산업단지
+                    <br />
+                    지역 : 충청북도 청주시 흥덕구 가락리 135-9번지 일원
+                    <br />
+                    적용기술 : 분리막 UF, RO
+                </p>
+            </section>
+        </section>
+
+        <Hr className="my-16" />
+
+        <section id="example-sewage-guri" className="scroll-mt-[120px]">
+            <SectionTitle>구리시 도로자동청소시스템</SectionTitle>
+
+            <CaseImageSlider
+                className="mt-8"
+                maxWidthClassName="max-w-[760px]"
+                slides={[
+                    {
+                    src: "/images/landing/business/sewage/guri_01.png",
+                    alt: "구리시 도로자동청소시스템 1",
+                    },
+                    {
+                    src: "/images/landing/business/sewage/guri_02.png",
+                    alt: "구리시 도로자동청소시스템 2",
+                    },
+                ]}
+            />
+
+            <section className="mt-6">
+                <SectionTitle>사업명</SectionTitle>
+                <p className="mt-8 text-base text-gray-600">
+                    구리시 도로자동청소시스템 설치사업
+                </p>
+            </section>
+
+            <Hr className="my-11" />
+
+            <section className="mt-6">
+                <SectionTitle>사업목적</SectionTitle>
+                <p className="mt-8 text-base text-gray-600">
+                    공공하수처리시설 발생 재이용수 일부를 도로자동청소시스템에 활용하여
+                    미세먼지 저감 및 폭염 취약성 완화
+                </p>
+            </section>
+        </section>
+
+        <Hr className="my-16" />
+
+        <section id="example-sewage-hwanggu" className="scroll-mt-[120px]">
+            <SectionTitle>수원시 황구지천</SectionTitle>
+
+            <CaseImageSlider
+                className="mt-8"
+                maxWidthClassName="max-w-[760px]"
+                slides={[
+                    {
+                    src: "/images/landing/business/sewage/hwanggu_01.png",
+                    alt: "수원시 황구지천 하수 재이용 1",
+                    },
+                    {
+                    src: "/images/landing/business/sewage/hwanggu_02.png",
+                    alt: "수원시 황구지천 하수 재이용 2",
+                    },
+                    {
+                    src: "/images/landing/business/sewage/hwanggu_03.png",
+                    alt: "수원시 황구지천 하수 재이용 3",
+                    },
+                ]}
+            />
+
+            <section className="mt-6">
+                <SectionTitle>사업명</SectionTitle>
+                <p className="mt-8 text-base text-gray-600">
+                    수원시 황구지천 하수처리수 재이용사업
+                </p>
+            </section>
+        </section>
+
+        <Hr className="my-16" />
+
+        <section id="example-sewage-paju" className="scroll-mt-[120px]">
+            <SectionTitle>파주시</SectionTitle>
+
+            <CaseImageSlider
+                className="mt-8"
+                maxWidthClassName="max-w-[760px]"
+                slides={[
+                    {
+                    src: "/images/landing/business/sewage/paju_01.png",
+                    alt: "파주시 하수 재이용 1",
+                    },
+                ]}
+            />
+
+            <section className="mt-6">
+                <SectionTitle>사업명</SectionTitle>
+                <p className="mt-8 text-base text-gray-600">
+                    경기도 파주시 하수재이용
+                    <br />
+                    운정·금촌하수처리시설의 하수처리수를 막공법으로 재처리하여 파주 LCD
+                    산업단지에 공업용수 공급
+                </p>
+            </section>
+        </section>
+
+        <Hr className="my-16" />
+
+        <section id="example-sewage-yeosu" className="scroll-mt-[120px]">
+            <SectionTitle>여수시</SectionTitle>
+
+            <CaseImageSlider
+                className="mt-8"
+                maxWidthClassName="max-w-[760px]"
+                slides={[
+                    {
+                    src: "/images/landing/business/sewage/yeosu_01.png",
+                    alt: "여수시 하수 재이용 1",
+                    },
+                ]}
+            />
+
+            <section className="mt-6">
+                <SectionTitle>사업명</SectionTitle>
+                <p className="mt-8 text-base text-gray-600">
+                    여수시 하수처리수 재이용 민간 투자사업(BTO)
+                </p>
+            </section>
+        </section>
+      </div>
+    </div>
+  );
+}

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 (
     <div className="relative">
       <Lnb />
-      <div className="flex max-w-[1400px] gap-[56px] pl-[60px] py-[80px]">
+      <div className="flex max-w-[1400px] gap-[56px] py-[50px]">
         <main className="min-w-0 flex-1">
           {children}
         </main>
 
         {/* 우측 메뉴 영역 */}
-        <BusinessSubNav />
+        {/* <BusinessSubNav /> */}
       </div>
     </div>
   );

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 <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
 }
 
 export default function ExamplePage() {
-  const sections = [
-    { id: "rain-example", label: "빗물 이용 사례" },
-    { id: "greywater-example", label: "중수도 사례" },
-    { id: "sewage-example", label: "하수처리수 사례" },
-    { id: "global-case", label: "해외 사례" },
-  ];
-
   return (
-    <div className="relative bg-white">
+    <div className="relative">
+      {/* 상단 헤더 */}
       <SubPageHeader
         title="물 재이용 사례"
         crumbs={[
           { label: "Home", href: "/main" },
           { label: "물 재이용 사례" },
         ]}
-        hideFooterLine
-        hideGuideText
-        wrapClassName="!pb-0"
       />
 
-      <div className="relative pr-[100px]">
-        <Hr className="my-7" />
+      {/* 우측 앵커 네비 */}  
+      <BusinessSubNav menus={menus} offsetTop={120} />
 
-        <section id="rain-example" className="scroll-mt-[120px]">
-          {/* <RainExampleSection /> */}
-        </section>
-
-        <Hr className="my-14" />
-
-        <section id="greywater-example" className="scroll-mt-[120px]">
-          {/* <GreywaterExampleSection /> */}
-        </section>
-
-        <Hr className="my-14" />
-
-        <section id="sewage-example" className="scroll-mt-[120px]">
-          {/* <SewageExampleSection /> */}
-        </section>
-
-        <Hr className="my-14" />
-
-        <section id="global-case" className="scroll-mt-[120px] pb-[220px]">
-          {/* <GlobalCaseSection /> */}
-        </section>
+      <div className="max-w-[1300px] pb-24">
+        <RainExampleSection />
+        <Hr className="my-16" />
+        <GreywaterExampleSection />
+        <Hr className="my-16" />
+        <SewageExampleSection />
+        <Hr className="my-16" />
+        <GlobalCaseSection />
       </div>
-
-      <BusinessSubNav title="사례" sections={sections} />
     </div>
   );
 }

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 (
+    <div className="flex items-center gap-3">
+      <span className="h-5 w-[3px] bg-sky-500" />
+      <h3 className="text-[24px] font-bold text-neutral-900">{children}</h3>
+    </div>
+  );
+}
+
+function Hr({ className = "" }: { className?: string }) {
+  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
+}
+
+function ImgCard({ src, alt }: { src: StaticImageData; alt: string }) {
+  return (
+    <div className="w-full overflow-x-auto">
+      <Image
+        src={src}
+        alt={alt}
+        className="mx-auto block max-w-none"
+        style={{ width: "auto", height: "auto" }}
+      />
+    </div>
+  );
+}
+
+function SectionShell({
+  id,
+  title,
+  children,
+  className = "",
+}: {
+  id: string;
+  title: string;
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <section id={id} className={`scroll-mt-[120px] ${className}`}>
+      <SectionTitle>{title}</SectionTitle>
+      <div className="mt-8">{children}</div>
+    </section>
+  );
+}
+
+export default function LawIntroSection() {
+  const title = "물 재이용 법";
+
+  return (
+    <div className="bg-white">
+      <div className="inline-block">
+        <h2 className="relative inline-block px-2 text-[28px] font-extrabold leading-none tracking-tight text-slate-900">
+          <span className="relative z-10">{title}</span>
+          <span className="absolute bottom-[-4px] left-0 z-0 h-3 w-full bg-gradient-to-r from-sky-300 to-green-300" />
+        </h2>
+      </div>
+
+      <div className="mt-10">
+        <SectionShell
+          id="law-plan"
+          title="법률 제·개정 및 기본계획 수립"
+          className="mt-10"
+        >
+          <ImgCard src={lawPlan} alt="법률 제·개정 및 기본계획 수립" />
+        </SectionShell>
+
+        <Hr className="my-11" />
+
+        <SectionShell
+          id="plan-performance"
+          title="제2차 계획 대비 실적 현황"
+        >
+          <ImgCard src={planPerformance} alt="제2차 계획 대비 실적 현황" />
+        </SectionShell>
+
+        <Hr className="my-11" />
+
+        <SectionShell id="domestic-change" title="우리나라의 수자원 현황 및 물이용 여건">
+          <ImgCard src={domesticChange} alt="우리나라의 수자원 현황 및 물이용 여건" />
+        </SectionShell>
+
+        <Hr className="my-11" />
+
+        <SectionShell
+          id="policy-history"
+          title="물 재이용 정책 변화 추이"
+        >
+          <ImgCard src={policyHistory} alt="물 재이용 정책 변화 추이" />
+        </SectionShell>
+
+        <Hr className="my-11" />
+
+        <SectionShell
+          id="law-relation"
+          title="타법령과의 관계 검토"
+        >
+          <ImgCard src={lawRelation} alt="타법령과의 관계 검토" />
+        </SectionShell>
+
+        <Hr className="my-11" />
+
+        <SectionShell
+          id="domestic-linkage"
+          title="주요 국가계획의 정책방향과 연계한 물 재이용 정책 필요"
+        >
+          <ImgCard src={domesticLinkage} alt="주요 국가계획의 정책방향과 연계한 물 재이용 정책 필요" />
+        </SectionShell>
+      </div>
+    </div>
+  );
+}

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 (
+    <div className="flex items-center gap-3">
+      <span className="h-5 w-[3px] bg-sky-500" />
+      <h3 className="text-[24px] font-bold text-neutral-900">{children}</h3>
+    </div>
+  );
+}
+
+function Hr({ className = "" }: { className?: string }) {
+  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
+}
+
+function ImgCard({ src, alt }: { src: StaticImageData; alt: string }) {
+  return (
+    <div className="w-full overflow-x-auto">
+      <Image
+        src={src}
+        alt={alt}
+        className="mx-auto block max-w-none"
+        style={{ width: "auto", height: "auto" }}
+      />
+    </div>
+  );
+}
+
+function SectionShell({
+  id,
+  title,
+  children,
+  className = "",
+}: {
+  id: string;
+  title: string;
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <section id={id} className={`scroll-mt-[120px] ${className}`}>
+      <SectionTitle>{title}</SectionTitle>
+      <div className="mt-8">{children}</div>
+    </section>
+  );
+}
+
+export default function RainIntroSection() {
+  const title = "빗물 이용시설";
+
+  return (
+    <div className="mt-[120px] bg-white">
+      <div className="inline-block">
+        <h2 className="relative inline-block px-2 text-[28px] font-extrabold leading-none tracking-tight text-slate-900">
+          <span className="relative z-10">{title}</span>
+          <span className="absolute bottom-[-4px] left-0 z-0 h-3 w-full bg-gradient-to-r from-sky-300 to-green-300" />
+        </h2>
+      </div>
+
+      <div className="mt-10">
+        <SectionShell id="rain-intro" title="빗물 재이용 소개" className="mt-10">
+          <ImgCard src={rainSummary} alt="빗물 재이용 소개" />
+        </SectionShell>
+
+        <Hr className="my-11" />
+
+        <SectionShell
+          id="rain-mandatory"
+          title="빗물이용시설 설치 관리 법적 의무 대상"
+        >
+          <ImgCard src={rainDuty} alt="빗물이용시설 설치 관리 법적 의무 대상" />
+        </SectionShell>
+
+        <Hr className="my-11" />
+
+        <SectionShell id="rain-design" title="빗물이용시설 설계 방안">
+          <ImgCard src={rainDesign} alt="빗물이용시설 설계 방안" />
+        </SectionShell>
+
+        <Hr className="my-11" />
+
+        <SectionShell
+          id="rain-standards"
+          title="빗물이용시설 시설기준 및 관리기준"
+        >
+          <ImgCard src={rainStandard} alt="빗물이용시설 시설기준 및 관리기준" />
+        </SectionShell>
+      </div>
+    </div>
+  );
+}

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 (
+    <div className="flex items-center gap-3">
+      <span className="h-5 w-[3px] bg-sky-500" />
+      <h3 className="text-[24px] font-bold text-neutral-900">{children}</h3>
+    </div>
+  );
+}
+
+function Hr({ className = "" }: { className?: string }) {
+  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
+}
+
+function ImgCard({ src, alt }: { src: StaticImageData; alt: string }) {
+  return (
+    <div className="w-full overflow-x-auto">
+      <Image
+        src={src}
+        alt={alt}
+        className="mx-auto block max-w-none"
+        style={{ width: "auto", height: "auto" }}
+      />
+    </div>
+  );
+}
+
+function SectionShell({
+  id,
+  title,
+  children,
+  className = "",
+}: {
+  id: string;
+  title: string;
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <section id={id} className={`scroll-mt-[120px] ${className}`}>
+      <SectionTitle>{title}</SectionTitle>
+      <div className="mt-8">{children}</div>
+    </section>
+  );
+}
+
+export default function ReuseWaterIntroSection() {
+  const title = "중수도";
+
+  return (
+    <div className="mt-[120px] bg-white">
+      <div className="inline-block">
+        <h2 className="relative inline-block px-2 text-[28px] font-extrabold leading-none tracking-tight text-slate-900">
+          <span className="relative z-10">{title}</span>
+          <span className="absolute bottom-[-4px] left-0 z-0 h-3 w-full bg-gradient-to-r from-sky-300 to-green-300" />
+        </h2>
+      </div>
+
+      <div className="mt-10">
+        <SectionShell
+          id="greywater-intro"
+          title="중수 재이용 소개"
+          className="mt-10"
+        >
+          <ImgCard src={greywaterIntro} alt="중수 재이용 소개" />
+        </SectionShell>
+
+        <Hr className="my-11" />
+
+        <SectionShell
+          id="greywater-mandatory"
+          title="중수도 설치 의무 대상"
+        >
+          <ImgCard src={greywaterMandatory} alt="중수도 설치 의무 대상" />
+        </SectionShell>
+
+        <Hr className="my-11" />
+
+        <SectionShell
+          id="greywater-standard"
+          title="중수도 시설기준 및 관리기준"
+        >
+          <ImgCard src={greywaterStandard} alt="중수도 시설기준 및 관리기준" />
+        </SectionShell>
+      </div>
+    </div>
+  );
+}

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 (
+    <div className="flex items-center gap-3">
+      <span className="h-5 w-[3px] bg-sky-500" />
+      <h3 className="text-[24px] font-bold text-neutral-900">{children}</h3>
+    </div>
+  );
+}
+
+function Hr({ className = "" }: { className?: string }) {
+  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
+}
+
+function ImgCard({ src, alt }: { src: StaticImageData; alt: string }) {
+  return (
+    <div className="w-full overflow-x-auto">
+      <Image
+        src={src}
+        alt={alt}
+        className="mx-auto block max-w-none"
+        style={{ width: "auto", height: "auto" }}
+      />
+    </div>
+  );
+}
+
+function SectionShell({
+  id,
+  title,
+  children,
+  className = "",
+}: {
+  id: string;
+  title: string;
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <section id={id} className={`scroll-mt-[120px] ${className}`}>
+      <SectionTitle>{title}</SectionTitle>
+      <div className="mt-8">{children}</div>
+    </section>
+  );
+}
+
+export default function TreatedIntroSection() {
+  const title = "하수처리수";
+
+  return (
+    <div className="mt-[120px] bg-white">
+      <div className="inline-block">
+        <h2 className="relative inline-block px-2 text-[28px] font-extrabold leading-none tracking-tight text-slate-900">
+          <span className="relative z-10">{title}</span>
+          <span className="absolute bottom-[-4px] left-0 z-0 h-3 w-full bg-gradient-to-r from-sky-300 to-green-300" />
+        </h2>
+      </div>
+
+      <div className="mt-10">
+        <SectionShell
+          id="treatedwater-intro"
+          title="하수처리수 소개"
+          className="mt-10"
+        >
+          <ImgCard src={treatedwaterIntro} alt="하수처리수" />
+        </SectionShell>
+
+        <Hr className="my-11" />
+
+        <SectionShell
+          id="treatedwater-mandatory"
+          title="하수처리수 재이용시설 의무 대상"
+        >
+          <ImgCard
+            src={treatedwaterMandatory}
+            alt="하수처리수 재이용시설 의무 대상"
+          />
+        </SectionShell>
+      </div>
+    </div>
+  );
+}

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 (
     <div className="relative bg-white">
-      <BusinessSubNav />
+      {/* <BusinessSubNav /> */}
 
       <SubPageHeader
         title="물 재이용 법"

apps/dm/app/(with-layout)/intro/layout.tsx

@@ -2,19 +2,18 @@
 
 import type { ReactNode } from "react";
 import Lnb from "@/components/Lnb";
-import BusinessSubNav from "@/components/BusinessSubNav";
 
 export default function ExampleLayout({ children }: { children: ReactNode }) {
   return (
     <div className="relative">
       <Lnb />
-      <div className="flex max-w-[1400px] gap-[56px] pl-[60px] py-[80px]">
+      <div className="flex max-w-[1400px] gap-[56px] py-[50px]">
         <main className="min-w-0 flex-1">
           {children}
         </main>
 
         {/* 우측 메뉴 영역 */}
-        <BusinessSubNav />
+        {/* <BusinessSubNav /> */}
       </div>
     </div>
   );

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 <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
-}
+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 (
-    <div className="relative bg-white">
+    <div className="relative">
+      {/* 상단 헤더 */}
       <SubPageHeader
         title="물 재이용 소개"
         crumbs={[
           { label: "Home", href: "/main" },
-          { label: "물 재이용 소개" },
+          { label: "물 재이용 소개", href: "/intro" },
         ]}
-        hideFooterLine
-        hideGuideText
-        wrapClassName="!pb-0"
       />
+      {/* 우측 앵커 네비 */}
+      <BusinessSubNav menus={menus} offsetTop={120} />
 
-      <div className="relative pr-[100px]">
-        <Hr className="my-7" />
-
-        <section id="law" className="scroll-mt-[120px]">
-          {/* <LawSection /> */}
-        </section>
-
-        <Hr className="my-14" />
-
-        <section id="rain" className="scroll-mt-[120px]">
-          {/* <RainIntroSection /> */}
-        </section>
-
-        <Hr className="my-14" />
-
-        <section id="greywater" className="scroll-mt-[120px]">
-          {/* <GreywaterIntroSection /> */}
-        </section>
-
-        <Hr className="my-14" />
-
-        <section id="sewage" className="scroll-mt-[120px] pb-[220px]">
-          {/* <SewageIntroSection /> */}
-        </section>
+      {/* 본문 */}
+      <div className="max-w-[1300px] pb-24">
+        <LawIntroSection />
+        <RainIntroSection />
+        <ReuseWaterIntroSection />
+        <TreatedIntroSection />
       </div>
-
-      <BusinessSubNav title="소개" sections={sections} />
     </div>
   );
 }

apps/dm/app/(with-layout)/intro/rain/page.tsx

@@ -1,3 +1,4 @@
+// DM 물 재이용 소개(빗물 이용시설) 페이지
 "use client";
 
 import Image, { type StaticImageData } from "next/image";

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";

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";

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 (

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 (
     <div className="relative">
+      {/* 상단 헤더 */}
+      <SubPageHeader
+        title="물 재이용 현황"
+        crumbs={[
+          { label: "Home", href: "/main" },
+          { label: "물 재이용 현황", href: "/status" },
+        ]}
+      />
+      {/* 우측 앵커 네비 */}
       <BusinessSubNav menus={menus} offsetTop={120} />
 
-      <div className="max-w-[1200px] pb-24">
+      <div className="max-w-[1300px] pb-24">
         <RainStatusSection />
         <GreywaterStatusSection />
         <SewageStatusSection />

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<string, boolean> = {};
+
+        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 (
             <div
               key={menu.key}
-              className="border-b border-[#E8EEF2] last:border-b-0"
             >
-              <div className="flex items-center justify-between px-5 py-5">
+              <div className="flex items-center justify-between px-5 py-2">
                 {menu.href ? (
                   <Link
                     href={menu.href}
                     className={[
-                      "text-[16px] font-extrabold tracking-[-0.02em]",
+                      "text-[16px] font-medium tracking-[-0.02em]",
                       isCurrentGroup || menu.current
                         ? "text-sky-500"
-                        : "text-[#6B7280]",
+                        : "text-[#767676]",
                     ].join(" ")}
                   >
                     {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({
                             />
                             <span
                               className={[
-                                "break-keep text-[14px] font-semibold leading-[1.45] transition-colors",
+                                "break-keep text-[14px] leading-[1.45] transition-colors",
                                 active
                                   ? "text-[#4A4A4A]"
                                   : "text-[#D1D7DE] hover:text-[#7B8794]",

apps/dm/components/SubPageHeader.tsx

@@ -46,12 +46,12 @@ export default function SubPageHeader({
           </nav>          
         </div>
         {/* 하단 라인 + 안내문 */}
-        {!hideGuideText && (
+        {/* {!hideGuideText && (
           <div className="mt-6 border-t border-black/10 pt-4 text-sm text-black/70">
             <span className="text-red-400">*</span>
             {note.replace("*", "")}
           </div>
-        )}  
+        )}   */}
       </div>
     </section>
   );