Merge branch 'iipbs/sn/dev' of https://www.onasys.co.kr:3000/ONAANDALL/frontend into iipbs/sn/dev

apps/dm/.env.mindone

@@ -8,8 +8,8 @@ NEXT_PUBLIC_PROXY_HOST = http://con.mind-one.co.kr:11315
 NEXT_PUBLIC_CM_LOGIN_PAGE_URL = http://dev.onasys.co.kr:3000/auth/login
 SERVER_API_URL = http://dev.onasys.co.kr:8000
 CS_SERVER_API_URL = http://dev.onasys.co.kr:8000
-FO_SERVER_API_URL = http://con.mind-one.co.kr:11083/operation-service/api/v1
-WR_SERVER_API_URL = http://con.mind-one.co.kr:11083/reuse-service/api/v1
+FO_SERVER_API_URL = http://con.mind-one.co.kr:11083/operation-service
+WR_SERVER_API_URL = http://con.mind-one.co.kr:11083/reuse-service
 NEXT_PUBLIC_GEOSERVER_URL = http://rsone.iptime.org:10010/geoserver
 NEXT_PUBLIC_LX_GEOSERVER_URL = http://con.mind-one.co.kr:11306/geoserver
 NEXT_PUBLIC_CS_TUS_UPLOAD = /attach-service/api/v1/tus/upload

apps/dm/.env.production

@@ -9,8 +9,8 @@ NEXT_PUBLIC_REFRESH_TOKEN = refresh-token
 #NEXT_PUBLIC_CM_LOGIN_PAGE_URL = https://devqueen.hasuon.or.kr/auth/login
 SERVER_API_URL = http://apigateway.iipbs-was.svc.cluster.local:8000
 CS_SERVER_API_URL = http://apigateway.iipbs-was.svc.cluster.local:8000
-FO_SERVER_API_URL = http://apigateway.iipbs-was.svc.cluster.local:8000/operation-service/api/v1
-WR_SERVER_API_URL = http://apigateway.iipbs-was.svc.cluster.local:8000/reuse-service/api/v1
+FO_SERVER_API_URL = http://apigateway.iipbs-was.svc.cluster.local:8000/operation-service
+WR_SERVER_API_URL = http://apigateway.iipbs-was.svc.cluster.local:8000/reuse-service
 NEXT_PUBLIC_GEOSERVER_URL = http://172.29.143.87:8080/geoserver
 NEXT_PUBLIC_LX_GEOSERVER_URL = http://172.29.143.87:8080/geoserver_swl
 NEXT_PUBLIC_CS_TUS_UPLOAD = /attach-service/api/v1/tus/upload

apps/dm/app/(landing)/reuse/cases/_components/RainStatusSection.tsx

@@ -1,133 +1,99 @@
-"use client";
+'use client';
 
-import React from "react";
+import React from 'react';
 
 // 공통 섹션 타이틀 컴포넌트
 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 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 }) {
+function Hr({ className = '' }: { className?: string }) {
   return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
 }
 
 // 출처 텍스트
 function SourceText() {
-  return (
-    <p className="mt-7 text-center text-[13px] text-neutral-500">
-      자료: 환경부(2024), 「2023 하수도 통계」
-    </p>
-  );
+  return <p className='mt-7 text-center text-[13px] text-neutral-500'>자료: 환경부(2024), 「2023 하수도 통계」</p>;
 }
 
 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]",
+  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 = "빗물이용시설(현황)";
+  const title = '빗물이용시설(현황)';
 
   return (
-    <div className="bg-white">
+    <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" />
+      <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]">
+      <div className='mt-10 pb-[120px]'>
         {/* 1) 빗물이용시설의 건축물별 빗물이용량 현황 */}
-        <section id="status-rain-building" className="mt-10 scroll-mt-[120px]">
+        <section id='status-rain-building' className='mt-10 scroll-mt-[120px]'>
           <SectionTitle>빗물이용시설의 건축물별 빗물이용량 현황</SectionTitle>
 
-          <div className="mt-10">
+          <div className='mt-10'>
             <div className={tableStyles.container}>
               <table className={tableStyles.table}>
                 <thead>
                   <tr>
-                    <th
-                      rowSpan={2}
-                      className={`${tableStyles.th} ${tableStyles.headerBg}`}
-                      style={{ width: "160px" }}
-                    >
+                    <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`} style={{ width: '160px' }}>
                       구분
                     </th>
-                    <th
-                      colSpan={6}
-                      className={`${tableStyles.th} ${tableStyles.headerBg} py-2`}
-                    >
+                    <th colSpan={6} className={`${tableStyles.th} ${tableStyles.headerBg} py-2`}>
                       빗물이용량 (천m³/년)
                     </th>
                   </tr>
                   <tr>
-                    <th
-                      className={`${tableStyles.th} bg-[#01ACE5] text-white`}
-                      style={{ width: "140px" }}
-                    >
+                    <th className={`${tableStyles.th} bg-[#01ACE5] text-white`} style={{ width: '140px' }}>
                       2018
                     </th>
-                    <th
-                      className={`${tableStyles.th} bg-[#17AFC7] text-white`}
-                      style={{ width: "140px" }}
-                    >
+                    <th className={`${tableStyles.th} bg-[#17AFC7] text-white`} style={{ width: '140px' }}>
                       2019
                     </th>
-                    <th
-                      className={`${tableStyles.th} bg-[#2CB2A9] text-white`}
-                      style={{ width: "140px" }}
-                    >
+                    <th className={`${tableStyles.th} bg-[#2CB2A9] text-white`} style={{ width: '140px' }}>
                       2020
                     </th>
-                    <th
-                      className={`${tableStyles.th} bg-[#42B58B] text-white`}
-                      style={{ width: "140px" }}
-                    >
+                    <th className={`${tableStyles.th} bg-[#42B58B] text-white`} style={{ width: '140px' }}>
                       2021
                     </th>
-                    <th
-                      className={`${tableStyles.th} bg-[#57B86D] text-white`}
-                      style={{ width: "140px" }}
-                    >
+                    <th className={`${tableStyles.th} bg-[#57B86D] text-white`} style={{ width: '140px' }}>
                       2022
                     </th>
-                    <th
-                      className={`${tableStyles.th} bg-[#81C784] text-white`}
-                      style={{ width: "140px" }}
-                    >
+                    <th className={`${tableStyles.th} bg-[#81C784] text-white`} style={{ width: '140px' }}>
                       2023
                     </th>
                   </tr>
                 </thead>
                 <tbody>
                   {[
-                    ["골프장", "6,771.8", "6,417.4", "8,371.6", "10,215.4", "11,360", "10,191.6"],
-                    ["공공시설", "364", "325.2", "201.9", "244.6", "209.9", "299.6"],
-                    ["공동주택", "291", "840.5", "804.2", "2,393.0", "2,386", "2,428.4"],
-                    ["대규모점포", "169.9", "214.4", "58.4", "427.2", "371", "293.3"],
-                    ["체육시설", "52.6", "44.7", "48.6", "75.3", "71.8", "77.6"],
-                    ["학교", "33", "25.5", "22", "155.8", "165.4", "32.6"],
-                    ["기타", "311.6", "901.2", "344.5", "537.8", "564", "621.2"],
+                    ['골프장', '6,771.8', '6,417.4', '8,371.6', '10,215.4', '11,360', '10,191.6'],
+                    ['공공시설', '364', '325.2', '201.9', '244.6', '209.9', '299.6'],
+                    ['공동주택', '291', '840.5', '804.2', '2,393.0', '2,386', '2,428.4'],
+                    ['대규모점포', '169.9', '214.4', '58.4', '427.2', '371', '293.3'],
+                    ['체육시설', '52.6', '44.7', '48.6', '75.3', '71.8', '77.6'],
+                    ['학교', '33', '25.5', '22', '155.8', '165.4', '32.6'],
+                    ['기타', '311.6', '901.2', '344.5', '537.8', '564', '621.2'],
                   ].map((row, idx) => (
-                    <tr key={idx} className="bg-white">
+                    <tr key={idx} className='bg-white'>
                       {row.map((val, i) => (
-                        <td
-                          key={i}
-                          className={`${tableStyles.td} ${
-                            i === 0 ? "!font-bold !text-neutral-900" : ""
-                          } ${[1, 3, 5].includes(i) ? "bg-[#EAF5F5]" : ""}`}
-                        >
+                        <td key={i} className={`${tableStyles.td} ${i === 0 ? '!font-bold !text-neutral-900' : ''} ${[1, 3, 5].includes(i) ? 'bg-[#EAF5F5]' : ''}`}>
                           {val}
                         </td>
                       ))}
@@ -141,129 +107,79 @@ export default function RainStatusSection() {
           </div>
         </section>
 
-        <Hr className="my-11" />
+        <Hr className='my-11' />
 
         {/* 2) 빗물이용시설의 용도별 분포 (2023년 기준) */}
-        <section
-          id="status-rain-purpose-distribution"
-          className="scroll-mt-[120px]"
-        >
+        <section id='status-rain-purpose-distribution' className='scroll-mt-[120px]'>
           <SectionTitle>빗물이용시설의 용도별 분포 (2023년 기준)</SectionTitle>
 
-          <div className="mt-8">
+          <div className='mt-8'>
             <div className={tableStyles.container}>
               <table className={tableStyles.table}>
                 <thead>
                   <tr>
-                    <th
-                      rowSpan={2}
-                      className={`${tableStyles.th} ${tableStyles.headerBg}`}
-                      style={{ width: "160px" }}
-                    >
+                    <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`} style={{ width: '160px' }}>
                       용도
                     </th>
-                    <th
-                      rowSpan={2}
-                      className={`${tableStyles.th} ${tableStyles.headerBg}`}
-                      style={{ width: "84px" }}
-                    >
+                    <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`} style={{ width: '84px' }}>
                       개소수
                       <br />
                       (개소)
                     </th>
-                    <th
-                      rowSpan={2}
-                      className={`${tableStyles.th} ${tableStyles.headerBg}`}
-                      style={{ width: "84px" }}
-                    >
-                      저류용량
+                    <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`} style={{ width: '84px' }}>
+                      저류조용량
                       <br />
                       (천m³)
                     </th>
-                    <th
-                      colSpan={8}
-                      className={`${tableStyles.th} ${tableStyles.headerBg} py-2`}
-                    >
+                    <th colSpan={8} className={`${tableStyles.th} ${tableStyles.headerBg} py-2`}>
                       빗물이용량 (천m³/년)
                     </th>
                   </tr>
                   <tr>
-                    <th
-                      className={`${tableStyles.th} bg-[#01ACE5] py-2 text-[13px] text-white`}
-                      style={{ width: "84px" }}
-                    >
+                    <th className={`${tableStyles.th} bg-[#01ACE5] py-2 text-[13px] text-white`} style={{ width: '84px' }}>
                       총사용량
                     </th>
-                    <th
-                      className={`${tableStyles.th} bg-[#10AED0] py-2 text-[13px] text-white`}
-                      style={{ width: "84px" }}
-                    >
+                    <th className={`${tableStyles.th} bg-[#10AED0] py-2 text-[13px] text-white`} style={{ width: '84px' }}>
                       공공시설
                     </th>
-                    <th
-                      className={`${tableStyles.th} bg-[#20B0BA] py-2 text-[13px] text-white`}
-                      style={{ width: "84px" }}
-                    >
+                    <th className={`${tableStyles.th} bg-[#20B0BA] py-2 text-[13px] text-white`} style={{ width: '84px' }}>
                       공동주택
                     </th>
-                    <th
-                      className={`${tableStyles.th} bg-[#2FB2A5] py-2 text-[13px] text-white`}
-                      style={{ width: "84px" }}
-                    >
+                    <th className={`${tableStyles.th} bg-[#2FB2A5] py-2 text-[13px] text-white`} style={{ width: '84px' }}>
                       대규모점포
                     </th>
-                    <th
-                      className={`${tableStyles.th} bg-[#3FB58F] py-2 text-[13px] text-white`}
-                      style={{ width: "84px" }}
-                    >
+                    <th className={`${tableStyles.th} bg-[#3FB58F] py-2 text-[13px] text-white`} style={{ width: '84px' }}>
                       체육시설
                     </th>
-                    <th
-                      className={`${tableStyles.th} bg-[#4EB77A] py-2 text-[13px] text-white`}
-                      style={{ width: "84px" }}
-                    >
+                    <th className={`${tableStyles.th} bg-[#4EB77A] py-2 text-[13px] text-white`} style={{ width: '84px' }}>
                       학교
                     </th>
-                    <th
-                      className={`${tableStyles.th} bg-[#5EB964] py-2 text-[13px] text-white`}
-                      style={{ width: "84px" }}
-                    >
+                    <th className={`${tableStyles.th} bg-[#5EB964] py-2 text-[13px] text-white`} style={{ width: '84px' }}>
                       골프장
                     </th>
-                    <th
-                      className={`${tableStyles.th} bg-[#6DBB4F] py-2 text-[13px] text-white`}
-                      style={{ width: "84px" }}
-                    >
+                    <th className={`${tableStyles.th} bg-[#6DBB4F] py-2 text-[13px] text-white`} style={{ width: '84px' }}>
                       기타
                     </th>
                   </tr>
                 </thead>
                 <tbody>
                   {[
-                    ["청소·환경정화용수", "195", "32.7", "108.8", "24.9", "5.8", "2.6", "4.4", "2.9", "-", "68.1"],
-                    ["세척·살수용수", "12", "1.4", "37", "35", "-", "-", "1.9", "-", "-", "0.2"],
-                    ["조경용수", "3,165", "7,440.8", "13,554.1", "168.1", "2,421.9", "290.7", "66.2", "29", "10,044", "534.3"],
-                    ["냉·난방수", "8", "1.6", "0.1", "-", "-", "-", "-", "0.1", "-", "-"],
-                    ["공업용수", "6", "14.9", "53.2", "52.8", "-", "-", "-", "-", "-", "0.4"],
-                    ["농업용수", "6.0", "0.5", "0.6", "-", "-", "-", "-", "-", "-", "0.6"],
-                    ["기타", "48", "306.1", "155.6", "2.8", "-", "-", "0.6", "0.5", "147.5", "4.2"],
-                    ["미기재", "103", "22.9", "34.8", "16.0", "0.6", "-", "4.6", "0.2", "-", "13.5"],
-                    ["합계", "3,543", "7,820.8", "13,944.7", "299.6", "2,428.4", "293.3", "77.6", "32.6", "10,191.6", "621.2"],
+                    ['청소·환경정화용수', '195', '32.7', '108.8', '24.9', '5.8', '2.6', '4.4', '2.9', '-', '68.1'],
+                    ['세척·살수용수', '12', '1.4', '37', '35', '-', '-', '1.9', '-', '-', '0.2'],
+                    ['조경용수', '3,165', '7,440.8', '13,554.1', '168.1', '2,421.9', '290.7', '66.2', '29', '10,044', '534.3'],
+                    ['냉·난방수', '8', '1.6', '0.1', '-', '-', '-', '-', '0.1', '-', '-'],
+                    ['공업용수', '6', '14.9', '53.2', '52.8', '-', '-', '-', '-', '-', '0.4'],
+                    ['농업용수', '6.0', '0.5', '0.6', '-', '-', '-', '-', '-', '-', '0.6'],
+                    ['기타', '48', '306.1', '155.6', '2.8', '-', '-', '0.6', '0.5', '147.5', '4.2'],
+                    ['미기재', '103', '22.9', '34.8', '16.0', '0.6', '-', '4.6', '0.2', '-', '13.5'],
+                    ['합계', '3,543', '7,820.8', '13,944.7', '299.6', '2,428.4', '293.3', '77.6', '32.6', '10,191.6', '621.2'],
                   ].map((row, idx) => (
-                    <tr
-                      key={idx}
-                      className={idx === 8 ? "bg-white font-bold" : "bg-white"}
-                    >
+                    <tr key={idx} className={idx === 8 ? 'bg-white font-bold' : 'bg-white'}>
                       {row.map((val, i) => {
                         const isHighlightedCol = [1, 2].includes(i);
 
                         return (
-                          <td
-                            key={i}
-                            className={`${tableStyles.td} ${
-                              i === 0 ? "!font-bold !text-neutral-900" : ""
-                            } ${isHighlightedCol ? "bg-[#EAF5F5]" : ""}`}
-                          >
+                          <td key={i} className={`${tableStyles.td} ${i === 0 ? '!font-bold !text-neutral-900' : ''} ${isHighlightedCol ? 'bg-[#EAF5F5]' : ''}`}>
                             {val}
                           </td>
                         );
@@ -278,91 +194,58 @@ export default function RainStatusSection() {
           </div>
         </section>
 
-        <Hr className="my-11" />
+        <Hr className='my-11' />
 
         {/* 3) 빗물이용시설의 용도별 빗물이용량 현황 */}
-        <section
-          id="status-rain-purpose-usage"
-          className="scroll-mt-[120px]"
-        >
+        <section id='status-rain-purpose-usage' className='scroll-mt-[120px]'>
           <SectionTitle>빗물이용시설의 용도별 빗물이용량 현황</SectionTitle>
 
-          <div className="mt-8">
+          <div className='mt-8'>
             <div className={tableStyles.container}>
               <table className={tableStyles.table}>
                 <thead>
                   <tr>
-                    <th
-                      rowSpan={2}
-                      className={`${tableStyles.th} ${tableStyles.headerBg}`}
-                      style={{ width: "160px" }}
-                    >
+                    <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`} style={{ width: '160px' }}>
                       용도
                     </th>
-                    <th
-                      colSpan={6}
-                      className={`${tableStyles.th} ${tableStyles.headerBg} py-2`}
-                    >
+                    <th colSpan={6} className={`${tableStyles.th} ${tableStyles.headerBg} py-2`}>
                       빗물이용량 (천m³/년)
                     </th>
                   </tr>
                   <tr>
-                    <th
-                      className={`${tableStyles.th} bg-[#01ACE5] text-white`}
-                      style={{ width: "140px" }}
-                    >
+                    <th className={`${tableStyles.th} bg-[#01ACE5] text-white`} style={{ width: '140px' }}>
                       2018
                     </th>
-                    <th
-                      className={`${tableStyles.th} bg-[#14AFCD] text-white`}
-                      style={{ width: "140px" }}
-                    >
+                    <th className={`${tableStyles.th} bg-[#14AFCD] text-white`} style={{ width: '140px' }}>
                       2019
                     </th>
-                    <th
-                      className={`${tableStyles.th} bg-[#28B2B4] text-white`}
-                      style={{ width: "140px" }}
-                    >
+                    <th className={`${tableStyles.th} bg-[#28B2B4] text-white`} style={{ width: '140px' }}>
                       2020
                     </th>
-                    <th
-                      className={`${tableStyles.th} bg-[#3CB59A] text-white`}
-                      style={{ width: "140px" }}
-                    >
+                    <th className={`${tableStyles.th} bg-[#3CB59A] text-white`} style={{ width: '140px' }}>
                       2021
                     </th>
-                    <th
-                      className={`${tableStyles.th} bg-[#50B880] text-white`}
-                      style={{ width: "140px" }}
-                    >
+                    <th className={`${tableStyles.th} bg-[#50B880] text-white`} style={{ width: '140px' }}>
                       2022
                     </th>
-                    <th
-                      className={`${tableStyles.th} bg-[#6DBB4F] text-white`}
-                      style={{ width: "140px" }}
-                    >
+                    <th className={`${tableStyles.th} bg-[#6DBB4F] text-white`} style={{ width: '140px' }}>
                       2023
                     </th>
                   </tr>
                 </thead>
                 <tbody>
                   {[
-                    ["청소·화장실용수", "126.5", "134.1", "96.5", "153.9", "140.5", "108.8"],
-                    ["세척·살수용수", "14.8", "14.6", "9.5", "49.8", "49.7", "37.0"],
-                    ["조경용수", "7,629.8", "8,496.2", "9,415.4", "13,360.4", "14,466.3", "13,554.1"],
-                    ["친수용수", "1.0", "0.1", "0.1", "0.1", "0.1", "0.1"],
-                    ["공업용수", "152.0", "77.0", "77.0", "75.4", "0.4", "53.2"],
-                    ["농업용수", "4.4", "4.3", "4.3", "4.3", "0.6", "0.6"],
-                    ["기타", "37.7", "42.6", "230.7", "394.3", "463.2", "155.6"],
+                    ['청소·화장실용수', '126.5', '134.1', '96.5', '153.9', '140.5', '108.8'],
+                    ['세척·살수용수', '14.8', '14.6', '9.5', '49.8', '49.7', '37.0'],
+                    ['조경용수', '7,629.8', '8,496.2', '9,415.4', '13,360.4', '14,466.3', '13,554.1'],
+                    ['친수용수', '1.0', '0.1', '0.1', '0.1', '0.1', '0.1'],
+                    ['공업용수', '152.0', '77.0', '77.0', '75.4', '0.4', '53.2'],
+                    ['농업용수', '4.4', '4.3', '4.3', '4.3', '0.6', '0.6'],
+                    ['기타', '37.7', '42.6', '230.7', '394.3', '463.2', '155.6'],
                   ].map((row, idx) => (
-                    <tr key={idx} className="bg-white">
+                    <tr key={idx} className='bg-white'>
                       {row.map((val, i) => (
-                        <td
-                          key={i}
-                          className={`${tableStyles.td} ${
-                            i === 0 ? "!font-bold !text-neutral-900" : ""
-                          } ${[1, 3, 5].includes(i) ? "bg-[#EAF5F5]" : ""}`}
-                        >
+                        <td key={i} className={`${tableStyles.td} ${i === 0 ? '!font-bold !text-neutral-900' : ''} ${[1, 3, 5].includes(i) ? 'bg-[#EAF5F5]' : ''}`}>
                           {val}
                         </td>
                       ))}
@@ -378,4 +261,4 @@ export default function RainStatusSection() {
       </div>
     </div>
   );
-}
+}

apps/dm/app/(landing)/reuse/cases/_components/SewageStatusSection.tsx

@@ -1,60 +1,56 @@
-"use client";
+'use client';
 
-import React from "react";
+import React from 'react';
 
 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 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 }) {
+function Hr({ className = '' }: { className?: string }) {
   return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
 }
 
 function SourceText() {
-  return (
-    <p className="mt-7 text-center text-[13px] text-neutral-500">
-      자료: 환경부(2024), 「2023 하수도 통계」
-    </p>
-  );
+  return <p className='mt-7 text-center text-[13px] text-neutral-500'>자료: 환경부(2024), 「2023 하수도 통계」</p>;
 }
 
 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]",
+  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 = "하수처리수 재이용시설(현황)";
+  const title = '하수처리수 재이용시설(현황)';
 
   return (
-    <div className="relative bg-white">
+    <div className='relative 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" />
+      <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">
+      <div className='mt-10'>
         {/* 1) 연도별 하수처리수 재이용 현황 */}
-        <section id="status-treated-year" className="mt-10 scroll-mt-[120px]">
+        <section id='status-treated-year' className='mt-10 scroll-mt-[120px]'>
           <SectionTitle>연도별 하수처리수 재이용 현황</SectionTitle>
 
-          <div className="mt-10">
+          <div className='mt-10'>
             <div className={tableStyles.container}>
               <table className={tableStyles.table}>
                 <colgroup>
-                  <col style={{ width: "130px" }} />
-                  <col style={{ width: "180px" }} />
+                  <col style={{ width: '130px' }} />
+                  <col style={{ width: '180px' }} />
                   <col />
                   <col />
                   <col />
@@ -64,166 +60,52 @@ export default function SewageStatusSection() {
                 </colgroup>
                 <thead>
                   <tr>
-                    <th
-                      colSpan={2}
-                      className={`${tableStyles.th} ${tableStyles.headerBg}`}
-                    >
+                    <th colSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`}>
                       구분
                     </th>
-                    <th className={`${tableStyles.th} bg-[#01ACE5] text-white`}>
-                      2018
-                    </th>
-                    <th className={`${tableStyles.th} bg-[#14AFCD] text-white`}>
-                      2019
-                    </th>
-                    <th className={`${tableStyles.th} bg-[#28B2B4] text-white`}>
-                      2020
-                    </th>
-                    <th className={`${tableStyles.th} bg-[#3CB59A] text-white`}>
-                      2021
-                    </th>
-                    <th className={`${tableStyles.th} bg-[#50B880] text-white`}>
-                      2022
-                    </th>
-                    <th className={`${tableStyles.th} bg-[#6DBB4F] text-white`}>
-                      2023
-                    </th>
+                    <th className={`${tableStyles.th} bg-[#01ACE5] text-white`}>2018</th>
+                    <th className={`${tableStyles.th} bg-[#14AFCD] text-white`}>2019</th>
+                    <th className={`${tableStyles.th} bg-[#28B2B4] text-white`}>2020</th>
+                    <th className={`${tableStyles.th} bg-[#3CB59A] text-white`}>2021</th>
+                    <th className={`${tableStyles.th} bg-[#50B880] text-white`}>2022</th>
+                    <th className={`${tableStyles.th} bg-[#6DBB4F] text-white`}>2023</th>
                   </tr>
                 </thead>
                 <tbody>
                   {[
                     {
-                      group: "전체",
+                      group: '전체',
                       rows: [
-                        [
-                          "개소수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>",
-                          "671",
-                          "681",
-                          "698",
-                          "704",
-                          "714",
-                          "717",
-                        ],
-                        [
-                          "하수처리량 <span class='text-[13px] font-normal text-[#767676]'>(백만m³/년)</span>",
-                          "7,163.7",
-                          "7,140.4",
-                          "7,375.6",
-                          "7,335.8",
-                          "7,378.9",
-                          "7,537.2",
-                        ],
-                        [
-                          "재이용량 <span class='text-[13px] font-normal text-[#767676]'>(백만m³/년)</span>",
-                          "1,112.7",
-                          "1,148.7",
-                          "1,148.7",
-                          "1,127.0",
-                          "1,136.8",
-                          "1,137.5",
-                        ],
-                        [
-                          "재이용률 <span class='text-[13px] font-normal text-[#767676]'>(%)</span>",
-                          "17.4",
-                          "16.5",
-                          "15.5",
-                          "14.1",
-                          "14.3",
-                          "14.4",
-                        ],
+                        ["개소수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>", '671', '681', '698', '704', '714', '717'],
+                        ["하수처리량 <span class='text-[13px] font-normal text-[#767676]'>(백만m³/년)</span>", '7,163.7', '7,140.4', '7,375.6', '7,335.8', '7,378.9', '7,537.2'],
+                        ["재이용량 <span class='text-[13px] font-normal text-[#767676]'>(백만m³/년)</span>", '1,112.7', '1,148.7', '1,148.7', '1,127.0', '1,136.8', '1,137.5'],
+                        ["재이용률 <span class='text-[13px] font-normal text-[#767676]'>(%)</span>", '17.4', '16.5', '15.5', '14.1', '14.3', '14.4'],
                       ],
                     },
                     {
-                      group: "법적 대상",
+                      group: '법적 대상',
                       rows: [
-                        [
-                          "개소수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>",
-                          "68",
-                          "82",
-                          "94",
-                          "97",
-                          "101",
-                          "118",
-                        ],
-                        [
-                          "하수처리량 <span class='text-[13px] font-normal text-[#767676]'>(백만m³/년)</span>",
-                          "761.2",
-                          "839.0",
-                          "935.3",
-                          "1,158.7",
-                          "1,220.6",
-                          "1,473.6",
-                        ],
-                        [
-                          "재이용량 <span class='text-[13px] font-normal text-[#767676]'>(백만m³/년)</span>",
-                          "162.2",
-                          "190.6",
-                          "218.5",
-                          "244.6",
-                          "247.2",
-                          "324.9",
-                        ],
-                        [
-                          "재이용률 <span class='text-[13px] font-normal text-[#767676]'>(%)</span>",
-                          "24.7",
-                          "25.4",
-                          "27.8",
-                          "25.7",
-                          "24.2",
-                          "24.1",
-                        ],
+                        ["개소수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>", '68', '82', '94', '97', '101', '118'],
+                        ["하수처리량 <span class='text-[13px] font-normal text-[#767676]'>(백만m³/년)</span>", '761.2', '839.0', '935.3', '1,158.7', '1,220.6', '1,473.6'],
+                        ["재이용량 <span class='text-[13px] font-normal text-[#767676]'>(백만m³/년)</span>", '162.2', '190.6', '218.5', '244.6', '247.2', '324.9'],
+                        ["재이용률 <span class='text-[13px] font-normal text-[#767676]'>(%)</span>", '24.7', '25.4', '27.8', '25.7', '24.2', '24.1'],
                       ],
                     },
                     {
-                      group: "법적 미대상",
+                      group: '법적 미대상',
                       rows: [
-                        [
-                          "개소수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>",
-                          "603",
-                          "599",
-                          "604",
-                          "607",
-                          "613",
-                          "599",
-                        ],
-                        [
-                          "하수처리량 <span class='text-[13px] font-normal text-[#767676]'>(백만m³/년)</span>",
-                          "6,402.5",
-                          "6,301.4",
-                          "6,440.3",
-                          "6,177.1",
-                          "6,158.3",
-                          "6,063.5",
-                        ],
-                        [
-                          "재이용량 <span class='text-[13px] font-normal text-[#767676]'>(백만m³/년)</span>",
-                          "950.6",
-                          "958.1",
-                          "926.2",
-                          "882.4",
-                          "889.5",
-                          "812.7",
-                        ],
-                        [
-                          "재이용률 <span class='text-[13px] font-normal text-[#767676]'>(%)</span>",
-                          "16.5",
-                          "15.3",
-                          "13.6",
-                          "12.2",
-                          "12.6",
-                          "12.5",
-                        ],
+                        ["개소수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>", '603', '599', '604', '607', '613', '599'],
+                        ["하수처리량 <span class='text-[13px] font-normal text-[#767676]'>(백만m³/년)</span>", '6,402.5', '6,301.4', '6,440.3', '6,177.1', '6,158.3', '6,063.5'],
+                        ["재이용량 <span class='text-[13px] font-normal text-[#767676]'>(백만m³/년)</span>", '950.6', '958.1', '926.2', '882.4', '889.5', '812.7'],
+                        ["재이용률 <span class='text-[13px] font-normal text-[#767676]'>(%)</span>", '16.5', '15.3', '13.6', '12.2', '12.6', '12.5'],
                       ],
                     },
                   ].map((section, sIdx) => (
                     <React.Fragment key={sIdx}>
                       {section.rows.map((row, rIdx) => (
-                        <tr key={`${sIdx}-${rIdx}`} className="bg-white">
+                        <tr key={`${sIdx}-${rIdx}`} className='bg-white'>
                           {rIdx === 0 && (
-                            <td
-                              rowSpan={section.rows.length}
-                              className={`${tableStyles.td} ${tableStyles.headerBg} !text-[18px] !font-bold !text-neutral-900`}
-                            >
+                            <td rowSpan={section.rows.length} className={`${tableStyles.td} ${tableStyles.headerBg} !text-[18px] !font-bold !text-neutral-900`}>
                               {section.group}
                             </td>
                           )}
@@ -234,9 +116,7 @@ export default function SewageStatusSection() {
                             return (
                               <td
                                 key={i}
-                                className={`${tableStyles.td} ${
-                                  isFirstCol ? "!font-bold !text-neutral-900" : ""
-                                } ${isHighlightedCol ? "bg-[#EAF5F5]" : ""}`}
+                                className={`${tableStyles.td} ${isFirstCol ? '!font-bold !text-neutral-900' : ''} ${isHighlightedCol ? 'bg-[#EAF5F5]' : ''}`}
                                 dangerouslySetInnerHTML={{ __html: val }}
                               />
                             );
@@ -253,17 +133,17 @@ export default function SewageStatusSection() {
           </div>
         </section>
 
-        <Hr className="my-11" />
+        <Hr className='my-11' />
 
         {/* 2) 용도별 하수처리수 재이용 현황 */}
-        <section id="status-treated-usage" className="scroll-mt-[120px]">
+        <section id='status-treated-usage' className='scroll-mt-[120px]'>
           <SectionTitle>용도별 하수처리수 재이용 현황</SectionTitle>
 
-          <div className="mt-8">
+          <div className='mt-8'>
             <div className={tableStyles.container}>
               <table className={tableStyles.table}>
                 <colgroup>
-                  <col style={{ width: "180px" }} />
+                  <col style={{ width: '180px' }} />
                   <col />
                   <col />
                   <col />
@@ -273,88 +153,59 @@ export default function SewageStatusSection() {
                 </colgroup>
                 <thead>
                   <tr>
-                    <th className={`${tableStyles.th} ${tableStyles.headerBg}`}>
-                      구분
-                    </th>
-                    <th className={`${tableStyles.th} bg-[#01ACE5] text-white`}>
-                      2018
-                    </th>
-                    <th className={`${tableStyles.th} bg-[#14AFCD] text-white`}>
-                      2019
-                    </th>
-                    <th className={`${tableStyles.th} bg-[#28B2B4] text-white`}>
-                      2020
-                    </th>
-                    <th className={`${tableStyles.th} bg-[#3CB59A] text-white`}>
-                      2021
-                    </th>
-                    <th className={`${tableStyles.th} bg-[#50B880] text-white`}>
-                      2022
-                    </th>
-                    <th className={`${tableStyles.th} bg-[#6DBB4F] text-white`}>
-                      2023
-                    </th>
+                    <th className={`${tableStyles.th} ${tableStyles.headerBg}`}>구분</th>
+                    <th className={`${tableStyles.th} bg-[#01ACE5] text-white`}>2018</th>
+                    <th className={`${tableStyles.th} bg-[#14AFCD] text-white`}>2019</th>
+                    <th className={`${tableStyles.th} bg-[#28B2B4] text-white`}>2020</th>
+                    <th className={`${tableStyles.th} bg-[#3CB59A] text-white`}>2021</th>
+                    <th className={`${tableStyles.th} bg-[#50B880] text-white`}>2022</th>
+                    <th className={`${tableStyles.th} bg-[#6DBB4F] text-white`}>2023</th>
                   </tr>
                 </thead>
                 <tbody>
                   {[
-                    { label: "총 재이용량", type: "total", values: ["1,112.7", "1,148.7", "1,144.7", "1,127.0", "1,136.8", "1,137.5"] },
-                    { label: "장내 재이용", type: "category", values: ["520.6", "519.8", "513.9", "520.3", "502.2", "490.0"] },
-                    { label: "세척수", type: "red-item", values: ["177.9", "174.4", "169.4", "180.9", "196.8", "191.2"] },
-                    { label: "냉각수", type: "red-item", values: ["45.5", "46.8", "50.4", "40.6", "38.3", "41.7"] },
-                    { label: "청소수", type: "red-item", values: ["17.6", "21.2", "21.2", "21.7", "20.8", "20.5"] },
-                    { label: "조경용수", type: "red-item", values: ["0.1", "0.1", "-", "-", "-", "-"] },
-                    { label: "회생용수", type: "red-item", values: ["15.8", "16.7", "17.8", "15.7", "14.4", "14.0"] },
-                    { label: "장내급수도", type: "red-item", values: ["2.4", "-", "-", "-", "-", "-"] },
-                    { label: "장내기타용수", type: "red-item", values: ["261.3", "260.6", "255.0", "261.1", "231.8", "222.6"] },
-                    { label: "장외 재이용", type: "category", values: ["592.1", "628.9", "630.8", "606.7", "634.6", "647.5"] },
-                    { label: "청소·화장실용수", type: "blue-item", values: ["0.6", "0.4", "0.4", "0.4", "0.4", "0.4"] },
-                    { label: "세척·살수용수", type: "blue-item", values: ["5.6", "9.9", "2.9", "2.1", "3.0", "3.6"] },
-                    { label: "조경용수", type: "blue-item", values: ["10.3", "16.4", "5.9", "4.5", "8.9", "9.5"] },
-                    { label: "친수용수", type: "blue-item", values: ["7.8", "3.1", "3.1", "3.0", "10.9", "10.5"] },
-                    { label: "하천유지용수", type: "blue-item", values: ["480.5", "482.5", "496.2", "442.7", "471.7", "484.0"] },
-                    { label: "농업용수", type: "blue-item", values: ["12.2", "11.9", "13.4", "10.7", "10.6", "11.4"] },
-                    { label: "지하수 충전", type: "blue-item", values: ["0.0", "0.0", "0.0", "13.4", "0.0", "0.0"] },
-                    { label: "공업용수", type: "blue-item", values: ["75.2", "104.6", "108.9", "129.9", "129.0", "128.1"] },
+                    { 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 isSubItem = row.type === 'red-item' || row.type === 'blue-item';
                     const isLastInGroup = idx === 8 || idx === 17;
 
                     return (
-                      <tr key={idx} className="bg-white">
+                      <tr key={idx} className='bg-white'>
                         <td className={`${tableStyles.td} relative`}>
                           {isSubItem ? (
                             <>
+                              <div className={`absolute left-[1px] w-[16px] bg-white z-10 top-[-2px] ${isLastInGroup ? 'bottom-[0px]' : 'bottom-[-2px]'}`} />
                               <div
-                                className={`absolute left-[1px] w-[16px] bg-white z-10 top-[-2px] ${
-                                  isLastInGroup ? "bottom-[0px]" : "bottom-[-2px]"
+                                className={`absolute left-[16px] w-[4px] z-20 ${row.type === 'red-item' ? 'bg-[#FF8B8B]' : 'bg-[#4ECBFF]'} top-[-2px] ${
+                                  isLastInGroup ? 'bottom-[0px]' : 'bottom-[-2px]'
                                 }`}
                               />
-                              <div
-                                className={`absolute left-[16px] w-[4px] z-20 ${
-                                  row.type === "red-item" ? "bg-[#FF8B8B]" : "bg-[#4ECBFF]"
-                                } top-[-2px] ${
-                                  isLastInGroup ? "bottom-[0px]" : "bottom-[-2px]"
-                                }`}
-                              />
-                              <span className="text-[#4f4f4f] font-bold block w-full text-center relative z-30 translate-x-[8px]">
-                                {row.label}
-                              </span>
+                              <span className='text-[#4f4f4f] font-bold block w-full text-center relative z-30 translate-x-[8px]'>{row.label}</span>
                             </>
                           ) : (
-                            <span className="font-bold text-neutral-900 block w-full text-center">
-                              {row.label}
-                            </span>
+                            <span className='font-bold text-neutral-900 block w-full text-center'>{row.label}</span>
                           )}
                         </td>
 
                         {row.values.map((val, i) => (
-                          <td
-                            key={i}
-                            className={`${tableStyles.td} ${
-                              [0, 2, 4].includes(i) ? "bg-[#EAF5F5]" : ""
-                            }`}
-                          >
+                          <td key={i} className={`${tableStyles.td} ${[0, 2, 4].includes(i) ? 'bg-[#EAF5F5]' : ''}`}>
                             {val}
                           </td>
                         ))}
@@ -369,18 +220,18 @@ export default function SewageStatusSection() {
           </div>
         </section>
 
-        <Hr className="my-11" />
+        <Hr className='my-11' />
 
         {/* 3) 하수처리시설 설치 및 이용 현황 */}
-        <section id="status-treated-facility" className="scroll-mt-[120px]">
+        <section id='status-treated-facility' className='scroll-mt-[120px]'>
           <SectionTitle>하수처리시설 설치 및 이용 현황</SectionTitle>
 
-          <div className="mt-8">
+          <div className='mt-8'>
             <div className={tableStyles.container}>
               <table className={tableStyles.table}>
                 <colgroup>
-                  <col style={{ width: "130px" }} />
-                  <col style={{ width: "160px" }} />
+                  <col style={{ width: '130px' }} />
+                  <col style={{ width: '160px' }} />
                   <col />
                   <col />
                   <col />
@@ -390,139 +241,49 @@ export default function SewageStatusSection() {
                 </colgroup>
                 <thead>
                   <tr>
-                    <th
-                      colSpan={2}
-                      className={`${tableStyles.th} ${tableStyles.headerBg}`}
-                    >
+                    <th colSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`}>
                       구분
                     </th>
-                    <th className={`${tableStyles.th} bg-[#01ACE5] text-white`}>
-                      2018
-                    </th>
-                    <th className={`${tableStyles.th} bg-[#14AFCD] text-white`}>
-                      2019
-                    </th>
-                    <th className={`${tableStyles.th} bg-[#28B2B4] text-white`}>
-                      2020
-                    </th>
-                    <th className={`${tableStyles.th} bg-[#3CB59A] text-white`}>
-                      2021
-                    </th>
-                    <th className={`${tableStyles.th} bg-[#50B880] text-white`}>
-                      2022
-                    </th>
-                    <th className={`${tableStyles.th} bg-[#6DBB4F] text-white`}>
-                      2023
-                    </th>
+                    <th className={`${tableStyles.th} bg-[#01ACE5] text-white`}>2018</th>
+                    <th className={`${tableStyles.th} bg-[#14AFCD] text-white`}>2019</th>
+                    <th className={`${tableStyles.th} bg-[#28B2B4] text-white`}>2020</th>
+                    <th className={`${tableStyles.th} bg-[#3CB59A] text-white`}>2021</th>
+                    <th className={`${tableStyles.th} bg-[#50B880] text-white`}>2022</th>
+                    <th className={`${tableStyles.th} bg-[#6DBB4F] text-white`}>2023</th>
                   </tr>
                 </thead>
                 <tbody>
                   {[
                     {
-                      group: "전체",
+                      group: '전체',
                       rows: [
-                        [
-                          "시설수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>",
-                          "671",
-                          "681",
-                          "698",
-                          "704",
-                          "714",
-                          "717",
-                        ],
-                        [
-                          "시설용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>",
-                          "25,846",
-                          "26,067",
-                          "26,244",
-                          "26,492",
-                          "26,586",
-                          "26,766",
-                        ],
-                        [
-                          "처리용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>",
-                          "1,112.7",
-                          "1,148.7",
-                          "1,144.7",
-                          "1,127.0",
-                          "1,136.8",
-                          "1,137.5",
-                        ],
+                        ["시설수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>", '671', '681', '698', '704', '714', '717'],
+                        ["시설용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>", '25,846', '26,067', '26,244', '26,492', '26,586', '26,766'],
+                        ["처리용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>", '1,112.7', '1,148.7', '1,144.7', '1,127.0', '1,136.8', '1,137.5'],
                       ],
                     },
                     {
-                      group: "법적 대상",
+                      group: '법적 대상',
                       rows: [
-                        [
-                          "시설수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>",
-                          "68",
-                          "82",
-                          "94",
-                          "97",
-                          "101",
-                          "118",
-                        ],
-                        [
-                          "시설용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>",
-                          "3,088.9",
-                          "3,359.2",
-                          "3,612.6",
-                          "4,412.2",
-                          "4,692.3",
-                          "5,503.8",
-                        ],
-                        [
-                          "처리용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>",
-                          "162.2",
-                          "190.6",
-                          "218.5",
-                          "244.6",
-                          "247.2",
-                          "324.9",
-                        ],
+                        ["시설수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>", '68', '82', '94', '97', '101', '118'],
+                        ["시설용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>", '3,088.9', '3,359.2', '3,612.6', '4,412.2', '4,692.3', '5,503.8'],
+                        ["처리용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>", '162.2', '190.6', '218.5', '244.6', '247.2', '324.9'],
                       ],
                     },
                     {
-                      group: "법적 미대상",
+                      group: '법적 미대상',
                       rows: [
-                        [
-                          "시설수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>",
-                          "603",
-                          "599",
-                          "604",
-                          "607",
-                          "613",
-                          "599",
-                        ],
-                        [
-                          "시설용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>",
-                          "22,757",
-                          "22,708",
-                          "22,631",
-                          "22,080",
-                          "21,894",
-                          "21,262",
-                        ],
-                        [
-                          "처리용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>",
-                          "950.6",
-                          "958.1",
-                          "926.2",
-                          "882.4",
-                          "889.5",
-                          "812.7",
-                        ],
+                        ["시설수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>", '603', '599', '604', '607', '613', '599'],
+                        ["시설용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>", '22,757', '22,708', '22,631', '22,080', '21,894', '21,262'],
+                        ["처리용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>", '950.6', '958.1', '926.2', '882.4', '889.5', '812.7'],
                       ],
                     },
                   ].map((section, sIdx) => (
                     <React.Fragment key={sIdx}>
                       {section.rows.map((row, rIdx) => (
-                        <tr key={`${sIdx}-${rIdx}`} className="bg-white">
+                        <tr key={`${sIdx}-${rIdx}`} className='bg-white'>
                           {rIdx === 0 && (
-                            <td
-                              rowSpan={section.rows.length}
-                              className={`${tableStyles.td} ${tableStyles.headerBg} !text-[18px] !font-bold !text-neutral-900`}
-                            >
+                            <td rowSpan={section.rows.length} className={`${tableStyles.td} ${tableStyles.headerBg} !text-[18px] !font-bold !text-neutral-900`}>
                               {section.group}
                             </td>
                           )}
@@ -533,9 +294,7 @@ export default function SewageStatusSection() {
                             return (
                               <td
                                 key={i}
-                                className={`${tableStyles.td} ${
-                                  isFirstCol ? "!font-bold !text-neutral-900" : ""
-                                } ${isHighlightedCol ? "bg-[#EAF5F5]" : ""}`}
+                                className={`${tableStyles.td} ${isFirstCol ? '!font-bold !text-neutral-900' : ''} ${isHighlightedCol ? 'bg-[#EAF5F5]' : ''}`}
                                 dangerouslySetInnerHTML={{ __html: val }}
                               />
                             );
@@ -552,24 +311,19 @@ export default function SewageStatusSection() {
           </div>
         </section>
 
-        <Hr className="my-11" />
+        <Hr className='my-11' />
 
         {/* 4) 시도별 하수처리수 재이용 현황 */}
-        <section
-          id="status-treated-region"
-          className="scroll-mt-[120px]"
-        >
+        <section id='status-treated-region' className='scroll-mt-[120px]'>
           <SectionTitle>시도별 하수처리수 재이용 현황</SectionTitle>
 
-          <div className="mt-8">
+          <div className='mt-8'>
             <div className={tableStyles.container}>
-              <div className="mb-2 text-right text-[13px] text-neutral-600">
-                (단위: 백만m³/일)
-              </div>
+              <div className='mb-2 text-right text-[13px] text-neutral-600'>(단위: 백만m³/년)</div>
 
               <table className={tableStyles.table}>
                 <colgroup>
-                  <col style={{ width: "160px" }} />
+                  <col style={{ width: '160px' }} />
                   <col />
                   <col />
                   <col />
@@ -583,110 +337,71 @@ export default function SewageStatusSection() {
                 </colgroup>
                 <thead>
                   <tr>
-                    <th
-                      rowSpan={3}
-                      className={`${tableStyles.th} ${tableStyles.headerBg}`}
-                    >
+                    <th rowSpan={3} className={`${tableStyles.th} ${tableStyles.headerBg}`}>
                       시도
                     </th>
-                    <th
-                      rowSpan={3}
-                      className={`${tableStyles.th} ${tableStyles.headerBg}`}
-                    >
+                    <th rowSpan={3} className={`${tableStyles.th} ${tableStyles.headerBg}`}>
                       연간
                       <br />
                       하수
                       <br />
                       처리량
                     </th>
-                    <th
-                      colSpan={7}
-                      className={`${tableStyles.th} ${tableStyles.headerBg} py-2`}
-                    >
+                    <th colSpan={7} className={`${tableStyles.th} ${tableStyles.headerBg} py-2`}>
                       재이용현황
                     </th>
-                    <th
-                      rowSpan={3}
-                      className={`${tableStyles.th} ${tableStyles.headerBg}`}
-                    >
+                    <th rowSpan={3} className={`${tableStyles.th} ${tableStyles.headerBg}`}>
                       재이용률
                       <br />
                       (%)
                     </th>
-                    <th
-                      rowSpan={3}
-                      className={`${tableStyles.th} ${tableStyles.headerBg}`}
-                    >
+                    <th rowSpan={3} className={`${tableStyles.th} ${tableStyles.headerBg}`}>
                       비고
                     </th>
                   </tr>
                   <tr>
-                    <th
-                      rowSpan={2}
-                      className={`${tableStyles.th} ${tableStyles.headerBg}`}
-                    >
+                    <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`}>
                       계
                     </th>
-                    <th
-                      rowSpan={2}
-                      className={`${tableStyles.th} ${tableStyles.headerBg}`}
-                    >
+                    <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`}>
                       장내
                     </th>
-                    <th
-                      colSpan={5}
-                      className={`${tableStyles.th} ${tableStyles.headerBg} py-1`}
-                    >
+                    <th colSpan={5} className={`${tableStyles.th} ${tableStyles.headerBg} py-1`}>
                       장외
                     </th>
                   </tr>
                   <tr>
-                    <th className={`${tableStyles.th} bg-[#01ACE5] text-white py-2 text-[16px]`}>
-                      소계
-                    </th>
-                    <th className={`${tableStyles.th} bg-[#1FB1C2] text-white py-2 text-[13px]`}>
-                      하천유지용수
-                    </th>
-                    <th className={`${tableStyles.th} bg-[#3EB59F] text-white py-2 text-[16px]`}>
-                      공업용수
-                    </th>
-                    <th className={`${tableStyles.th} bg-[#5DB97C] text-white py-2 text-[16px]`}>
-                      농업용수
-                    </th>
-                    <th className={`${tableStyles.th} bg-[#6DBB4F] text-white py-2 text-[16px]`}>
-                      기타용수
-                    </th>
+                    <th className={`${tableStyles.th} bg-[#01ACE5] text-white py-2 text-[16px]`}>소계</th>
+                    <th className={`${tableStyles.th} bg-[#1FB1C2] text-white py-2 text-[13px]`}>하천유지용수</th>
+                    <th className={`${tableStyles.th} bg-[#3EB59F] text-white py-2 text-[16px]`}>공업용수</th>
+                    <th className={`${tableStyles.th} bg-[#5DB97C] text-white py-2 text-[16px]`}>농업용수</th>
+                    <th className={`${tableStyles.th} bg-[#6DBB4F] text-white py-2 text-[16px]`}>기타용수</th>
                   </tr>
                 </thead>
                 <tbody>
                   {[
-                    ["합계", "7,537.2", "1,137.5", "490.0", "647.5", "484.0", "128.1", "11.4", "24.0", "15.1%", ""],
-                    ["서울특별시", "1,567.0", "114.9", "59.3", "55.6", "55.1", "-", "-", "0.5", "7.3%", ""],
-                    ["부산광역시", "491.5", "146.2", "120.7", "25.5", "25.3", "-", "-", "0.2", "29.7%", ""],
-                    ["대구광역시", "432.7", "102.4", "38.2", "64.2", "64.1", "-", "-", "0.1", "23.7%", ""],
-                    ["인천광역시", "302.3", "57.7", "11.6", "46.1", "29.2", "12.1", "0.5", "4.3", "19.1%", ""],
-                    ["광주광역시", "211.1", "28.7", "6.5", "22.3", "22.2", "-", "-", "0.1", "13.6%", ""],
-                    ["대전광역시", "244.6", "11.9", "11.9", "0.68", "0.0", "-", "-", "0.1", "4.9%", ""],
-                    ["울산광역시", "235.1", "36.1", "6.1", "29.9", "29.7", "0.2", "-", "-", "15.3%", ""],
-                    ["세종특별자치시", "38.5", "2.5", "2.0", "0.5", "0.4", "-", "0.2", "-", "6.6%", ""],
-                    ["경기도", "1,926.8", "313.3", "122.2", "191.0", "153.0", "33.3", "0.4", "4.3", "16.3%", ""],
-                    ["강원도", "230.4", "19.6", "15.4", "4.2", "2.1", "-", "-", "2.1", "8.5%", ""],
-                    ["충청북도", "190.9", "15.6", "6.3", "9.2", "7.4", "0.6", "-", "1.2", "8.2%", ""],
-                    ["충청남도", "241.5", "41.4", "9.8", "31.5", "17.7", "8.6", "4.5", "0.8", "17.1%", ""],
-                    ["전라북도", "292.4", "42.7", "7.5", "35.1", "33.5", "0.2", "1.0", "0.5", "14.6%", ""],
-                    ["전라남도", "254.0", "23.6", "12.3", "11.3", "8.7", "0.0", "1.0", "1.6", "9.3%", ""],
-                    ["경상북도", "378.4", "129.1", "33.7", "95.3", "20.8", "72.5", "0.8", "1.3", "34.1%", ""],
-                    ["경상남도", "411.3", "50.1", "25.0", "25.0", "14.7", "0.5", "3.0", "6.9", "12.2%", ""],
-                    ["제주특별자치도", "88.6", "1.7", "1.5", "0.12", "-", "-", "0.1", "-", "1.9%", ""],
+                    ['합계', '7,537.2', '1,137.5', '490.0', '647.5', '484.0', '128.1', '11.4', '24.0', '15.1%', ''],
+                    ['서울특별시', '1,567.0', '114.9', '59.3', '55.6', '55.1', '-', '-', '0.5', '7.3%', ''],
+                    ['부산광역시', '491.5', '146.2', '120.7', '25.5', '25.3', '-', '-', '0.2', '29.7%', ''],
+                    ['대구광역시', '432.7', '102.4', '38.2', '64.2', '64.1', '-', '-', '0.1', '23.7%', ''],
+                    ['인천광역시', '302.3', '57.7', '11.6', '46.1', '29.2', '12.1', '0.5', '4.3', '19.1%', ''],
+                    ['광주광역시', '211.1', '28.7', '6.5', '22.3', '22.2', '-', '-', '0.1', '13.6%', ''],
+                    ['대전광역시', '244.6', '11.9', '11.9', '0.68', '0.0', '-', '-', '0.1', '4.9%', ''],
+                    ['울산광역시', '235.1', '36.1', '6.1', '29.9', '29.7', '0.2', '-', '-', '15.3%', ''],
+                    ['세종특별자치시', '38.5', '2.5', '2.0', '0.5', '0.4', '-', '0.2', '-', '6.6%', ''],
+                    ['경기도', '1,926.8', '313.3', '122.2', '191.0', '153.0', '33.3', '0.4', '4.3', '16.3%', ''],
+                    ['강원도', '230.4', '19.6', '15.4', '4.2', '2.1', '-', '-', '2.1', '8.5%', ''],
+                    ['충청북도', '190.9', '15.6', '6.3', '9.2', '7.4', '0.6', '-', '1.2', '8.2%', ''],
+                    ['충청남도', '241.5', '41.4', '9.8', '31.5', '17.7', '8.6', '4.5', '0.8', '17.1%', ''],
+                    ['전라북도', '292.4', '42.7', '7.5', '35.1', '33.5', '0.2', '1.0', '0.5', '14.6%', ''],
+                    ['전라남도', '254.0', '23.6', '12.3', '11.3', '8.7', '0.0', '1.0', '1.6', '9.3%', ''],
+                    ['경상북도', '378.4', '129.1', '33.7', '95.3', '20.8', '72.5', '0.8', '1.3', '34.1%', ''],
+                    ['경상남도', '411.3', '50.1', '25.0', '25.0', '14.7', '0.5', '3.0', '6.9', '12.2%', ''],
+                    ['제주특별자치도', '88.6', '1.7', '1.5', '0.12', '-', '-', '0.1', '-', '1.9%', ''],
                   ].map((row, idx) => (
-                    <tr key={idx} className="bg-white">
+                    <tr key={idx} className='bg-white'>
                       {row.map((val, i) => (
-                        <td
-                          key={i}
-                          className={`${tableStyles.td} ${
-                            i === 0 ? "!font-bold !text-neutral-900" : ""
-                          } ${[1, 3, 9].includes(i) ? "bg-[#EAF5F5]" : ""}`}
-                        >
+                        <td key={i} className={`${tableStyles.td} ${i === 0 ? '!font-bold !text-neutral-900' : ''} ${[1, 3, 9].includes(i) ? 'bg-[#EAF5F5]' : ''}`}>
                           {val}
                         </td>
                       ))}
@@ -702,4 +417,4 @@ export default function SewageStatusSection() {
       </div>
     </div>
   );
-}
+}

apps/dm/app/(landing)/reuse/intro/_components/LawIntroSection.tsx

@@ -1,123 +1,92 @@
-"use client";
+'use client';
 
-import React from "react";
-import Image, { type StaticImageData } from "next/image";
+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";
+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 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 }) {
+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 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;
-}) {
+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>
+      <div className='mt-8'>{children}</div>
     </section>
   );
 }
 
 export default function LawIntroSection() {
-  const title = "물 재이용 법";
+  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" />
+    <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="법률 제·개정 및 기본계획 수립" />
+      <div className='mt-10'>
+        <SectionShell id='law-plan' title='법률 제·개정 및 기본계획 수립' className='mt-10'>
+          <ImgCard src={lawPlan} alt='법률 제·개정 및 기본계획 수립' />
         </SectionShell>
 
-        <Hr className="my-11" />
+        <Hr className='my-11' />
 
-        <SectionShell
-          id="plan-performance"
-          title="제2차 계획 대비 실적 현황"
-        >
-          <ImgCard src={planPerformance} alt="제2차 계획 대비 실적 현황" />
+        <SectionShell id='plan-performance' title='제2차 계획 대비 실적 현황'>
+          <ImgCard src={planPerformance} alt='제2차 계획 대비 실적 현황' />
         </SectionShell>
 
-        <Hr className="my-11" />
+        <Hr className='my-11' />
 
-        <SectionShell id="domestic-change" title="우리나라의 수자원 현황 및 물이용 여건">
-          <ImgCard src={domesticChange} alt="우리나라의 수자원 현황 및 물이용 여건" />
+        <SectionShell id='domestic-change' title='우리나라의 수자원 현황 및 물이용 여건'>
+          <ImgCard src={domesticChange} alt='우리나라의 수자원 현황 및 물이용 여건' />
         </SectionShell>
 
-        <Hr className="my-11" />
+        <Hr className='my-11' />
 
-        <SectionShell
-          id="policy-history"
-          title="물 재이용 정책 변화 추이"
-        >
-          <ImgCard src={policyHistory} alt="물 재이용 정책 변화 추이" />
+        <SectionShell id='policy-history' title='물 재이용 정책 변화 추이'>
+          <ImgCard src={policyHistory} alt='물 재이용 정책 변화 추이' />
         </SectionShell>
 
-        <Hr className="my-11" />
+        <Hr className='my-11' />
 
-        <SectionShell
-          id="law-relation"
-          title="타법령과의 관계 검토"
-        >
-          <ImgCard src={lawRelation} alt="타법령과의 관계 검토" />
+        <SectionShell id='law-relation' title='타법령과의 관계 검토'>
+          <ImgCard src={lawRelation} alt='타법령과의 관계 검토' />
         </SectionShell>
 
-        <Hr className="my-11" />
+        <Hr className='my-11' />
 
-        <SectionShell
-          id="domestic-linkage"
-          title="주요 국가계획의 정책방향과 연계한 물 재이용 정책 필요"
-        >
-          <ImgCard src={domesticLinkage} alt="주요 국가계획의 정책방향과 연계한 물 재이용 정책 필요" />
+        <SectionShell id='domestic-linkage' title='주요 국가계획의 정책방향과 연계한 물 재이용 정책 필요'>
+          <ImgCard src={domesticLinkage} alt='주요 국가계획의 정책방향과 연계한 물 재이용 정책 필요' />
         </SectionShell>
       </div>
     </div>
   );
-}
+}

apps/dm/app/(landing)/reuse/intro/law/page.tsx

@@ -1,20 +1,20 @@
 // apps/dm/app/(landing)/reuse/intro/law/page.tsx
-"use client";
+'use client';
 
-import Image, { type StaticImageData } from "next/image";
-import SubPageHeader from "../../_components/SubPageHeader";
-import lawTimeline from "@/public/images/landing/intro/law_timeline.png";
-import performanceLeft from "@/public/images/landing/intro/performance_left.png";
-import domesticTextbox from "@/public/images/landing/intro/domestic_textbox.png";
-import policyTimeline from "@/public/images/landing/intro/policy_timeline.png";
-import relNote from "@/public/images/landing/intro/rel_note.png";
-import linkage from "@/public/images/landing/intro/linkage.png";
+import Image, { type StaticImageData } from 'next/image';
+import SubPageHeader from '../../_components/SubPageHeader';
+import lawTimeline from '@/public/images/landing/intro/law_timeline.png';
+import performanceLeft from '@/public/images/landing/intro/performance_left.png';
+import domesticTextbox from '@/public/images/landing/intro/domestic_textbox.png';
+import policyTimeline from '@/public/images/landing/intro/policy_timeline.png';
+import relNote from '@/public/images/landing/intro/rel_note.png';
+import linkage 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 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>
   );
 }
@@ -23,7 +23,7 @@ type HrProps = {
   className?: string;
 };
 
-function Hr({ className = "" }: HrProps) {
+function Hr({ className = '' }: HrProps) {
   return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
 }
 
@@ -34,95 +34,87 @@ type ImgCardProps = {
 
 function ImgCard({ src, alt }: ImgCardProps) {
   return (
-    <div className="w-full overflow-x-auto">
-      <Image
-        src={src}
-        alt={alt}
-        className="block mx-auto max-w-none"
-        style={{ width: "auto", height: "auto" }}
-      />
+    <div className='w-full overflow-x-auto'>
+      <Image src={src} alt={alt} className='block mx-auto max-w-none' style={{ width: 'auto', height: 'auto' }} />
     </div>
   );
 }
 
 export default function WaterReuseLawPage() {
   return (
-    <div className="bg-white">  
+    <div className='bg-white'>
       <SubPageHeader
-        title="물 재이용 법"
-        crumbs={[
-            { label: "Home", href: "/reuse" },
-            { label: "물 재이용 소개", href: "/reuse/intro/law" },
-            { label: "물 재이용 법" },
-        ]}
+        title='물 재이용 법'
+        crumbs={[{ label: 'Home', href: '/reuse' }, { label: '물 재이용 소개', href: '/reuse/intro/law' }, { label: '물 재이용 법' }]}
         hideFooterLine
         hideGuideText
-        wrapClassName="!pb-0"
+        wrapClassName='!pb-0'
       />
 
-      <Hr className="my-7" />
+      <Hr className='my-7' />
 
       {/* 1) 법제도/계획 수립 타임라인 */}
-      <section className="mt-6">
+      <section className='mt-6'>
         <SectionTitle>법제도 · 계획 및 기본계획 수립</SectionTitle>
-        <div className="mt-8">
-          <ImgCard src={lawTimeline} alt="법제도 타임라인" />
+        <div className='mt-8'>
+          <ImgCard src={lawTimeline} alt='법제도 타임라인' />
         </div>
       </section>
 
-      <Hr className="my-11" />
+      <Hr className='my-11' />
 
       {/* 2) 제2차 계획 대비 실적 현황 (2컬럼) */}
       <section>
         <SectionTitle>제 2차 계획 대비 실적 현황</SectionTitle>
-        <div className="mt-8">
-          <ImgCard src={performanceLeft} alt="실적 현황 요약" />
+        <div className='mt-8'>
+          <ImgCard src={performanceLeft} alt='실적 현황 요약' />
         </div>
       </section>
 
-      <Hr className="my-11" />
+      <Hr className='my-11' />
 
       {/* 3) 국내 관련 현황 */}
       <section>
         <SectionTitle>국내 관련 현황</SectionTitle>
-        <div className="mt-8">
-          <ImgCard src={domesticTextbox} alt="국내 관련 현황 설명" />
+        <div className='mt-8'>
+          <ImgCard src={domesticTextbox} alt='국내 관련 현황 설명' />
         </div>
       </section>
 
-      <Hr className="my-11" />
+      <Hr className='my-11' />
 
       {/* 4) 정책 변천 추이 */}
       <section>
         <SectionTitle>물 재이용 정책 변천 추이</SectionTitle>
-        <div className="mt-8">
-          <ImgCard src={policyTimeline} alt="정책 변천 타임라인" />
+        <div className='mt-8'>
+          <ImgCard src={policyTimeline} alt='정책 변천 타임라인' />
         </div>
       </section>
 
-      <Hr className="my-11" />
+      <Hr className='my-11' />
 
       {/* 5) 타 법령과의 관계도 */}
       <section>
         <SectionTitle>타법령과의 관계도</SectionTitle>
-        <div className="mt-8">
-          <ImgCard src={relNote} alt="관계도 설명" />
+        <div className='mt-8'>
+          <ImgCard src={relNote} alt='관계도 설명' />
         </div>
       </section>
 
-      <Hr className="my-11" />
+      <Hr className='my-11' />
 
       {/* 6) 국내 연계 현황 */}
-      <section className="pb-[200px]">
+      <section className='pb-[200px]'>
         <SectionTitle>국내 연계 현황</SectionTitle>
-        <div className="mt-8">
-          <div className="mx-[20px] mb-8">
-            <p className="text-[24px] font-semibold mb-2">주요 국가계획의 정책방향과 연계한 물 재이용 정책 필요</p>
-            <p className="text-[#4F4F4F]">국가 상위계획의 정책 방향이 기후위기 대응 등 수자원의 공급 안전성을 위한 물 재이용 활성화로 정책 실효성 제고 필요<br />
-                • 물관리 계획(국가수도기본계획, 국가 및 유역하수도종합계획, 하천유역수자원관리계획 등)과의 연계성 확보 → 통합적인 관점에서 물이용 체계 구축 필요
+        <div className='mt-8'>
+          <div className='mx-[20px] mb-8'>
+            <p className='text-[24px] font-semibold mb-2'>주요 국가계획의 정책방향과 연계한 물 재이용 정책 필요</p>
+            <p className='text-[#4F4F4F]'>
+              국가 상위계획의 정책 방향이 기후위기 대응 등 수자원의 공급 안전성을 위한 물 재이용 활성화로 정책 실효성 제고 필요
+              <br />• 물관리 계획(국가수도기본계획, 국가 및 유역하수도종합계획, 하천유역수자원관리계획 등)과의 연계성 확보 → 통합적인 관점에서 물이용 체계 구축 필요
             </p>
           </div>
-          <ImgCard src={linkage} alt="국내 연계 현황" />
+          <ImgCard src={linkage} alt='국내 연계 현황' />
         </div>
       </section>
     </div>

apps/dm/app/(with-layout)/apply/status/page.tsx

@@ -185,7 +185,9 @@ export default function DemandStatusPage() {
       const userData = JSON.parse(user) as SessionUser;
       const dmdInfoId = userData.dmdInfoId?.trim();
       if (dmdInfoId) {
-        getSdmInfoStatusList(dmdInfoId);
+        void getSdmInfoStatusList(dmdInfoId).then((active) => {
+          if (!active) window.location.href = "/";
+        });
       }
     } catch (error) {
       console.error("Error parsing user data:", error);
@@ -341,7 +343,9 @@ export default function DemandStatusPage() {
         if (res) {
           const user = JSON.parse(sessionStorage.getItem("user") || "{}");
           if (user?.dmdInfoId) {
-            getSdmInfoStatusList(user.dmdInfoId);
+            void getSdmInfoStatusList(user.dmdInfoId).then((active) => {
+              if (!active) window.location.href = "/";
+            });
           }
           setIsEditMode(false);
         }

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

@@ -1,4 +1,4 @@
-"use client";
+'use client';
 
 export default function LawIntroSection() {
   const contentsHtml = `
@@ -84,10 +84,5 @@ export default function LawIntroSection() {
     </div>
   `;
 
-  return (
-    <div
-      className="bg-white"
-      dangerouslySetInnerHTML={{ __html: contentsHtml }}
-    />
-  );
+  return <div className='bg-white' dangerouslySetInnerHTML={{ __html: contentsHtml }} />;
 }

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

@@ -1,22 +1,22 @@
 // DM 물 재이용 소개(물 재이용 법) 페이지
-"use client";
+'use client';
 
-import Image, { type StaticImageData } from "next/image";
-import SubPageHeader from "@/components/SubPageHeader";
+import Image, { type StaticImageData } from 'next/image';
+import SubPageHeader from '@/components/SubPageHeader';
 // 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";
-import domesticTextbox from "@/public/images/landing/intro/domestic_textbox.png";
-import policyTimeline from "@/public/images/landing/intro/policy_timeline.png";
-import relNote from "@/public/images/landing/intro/rel_note.png";
-import linkage from "@/public/images/landing/intro/linkage.png";
+import lawTimeline from '@/public/images/landing/intro/law_timeline.png';
+import performanceLeft from '@/public/images/landing/intro/performance_left.png';
+import domesticTextbox from '@/public/images/landing/intro/domestic_textbox.png';
+import policyTimeline from '@/public/images/landing/intro/policy_timeline.png';
+import relNote from '@/public/images/landing/intro/rel_note.png';
+import linkage 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 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>
   );
 }
@@ -25,7 +25,7 @@ type HrProps = {
   className?: string;
 };
 
-function Hr({ className = "" }: HrProps) {
+function Hr({ className = '' }: HrProps) {
   return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
 }
 
@@ -36,14 +36,8 @@ type ImgCardProps = {
 
 function ImgCard({ src, alt }: ImgCardProps) {
   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" }}
-        priority={false}
-      />
+    <div className='w-full overflow-x-auto'>
+      <Image src={src} alt={alt} className='mx-auto block max-w-none' style={{ width: 'auto', height: 'auto' }} priority={false} />
     </div>
   );
 }
@@ -55,109 +49,73 @@ type SectionShellProps = {
   className?: string;
 };
 
-function SectionShell({ id, title, children, className = "" }: SectionShellProps) {
+function SectionShell({ id, title, children, className = '' }: SectionShellProps) {
   return (
-    <section
-      id={id}
-      className={[
-        "scroll-mt-[140px]",
-        className,
-      ].join(" ")}
-    >
+    <section id={id} className={['scroll-mt-[140px]', className].join(' ')}>
       <SectionTitle>{title}</SectionTitle>
-      <div className="mt-8">{children}</div>
+      <div className='mt-8'>{children}</div>
     </section>
   );
 }
 
 export default function WaterReuseLawPage() {
   return (
-    <div className="relative bg-white">
+    <div className='relative bg-white'>
       {/* <BusinessSubNav /> */}
 
       <SubPageHeader
-        title="물 재이용 법"
-        crumbs={[
-          { label: "Home", href: "/main" },
-          { label: "물 재이용 소개", href: "/intro/law" },
-          { label: "물 재이용 법" },
-        ]}
+        title='물 재이용 법'
+        crumbs={[{ label: 'Home', href: '/main' }, { label: '물 재이용 소개', href: '/intro/law' }, { label: '물 재이용 법' }]}
         hideFooterLine
         hideGuideText
-        wrapClassName="!pb-0"
+        wrapClassName='!pb-0'
       />
 
-      <div className="pr-0">
-        <Hr className="my-7" />
+      <div className='pr-0'>
+        <Hr className='my-7' />
 
-        <SectionShell
-          id="law-plan"
-          title="법률 제·개정 및 기본계획 수립"
-          className="mt-6"
-        >
-          <ImgCard src={lawTimeline} alt="법률 제·개정 및 기본계획 수립" />
+        <SectionShell id='law-plan' title='법률 제·개정 및 기본계획 수립' className='mt-6'>
+          <ImgCard src={lawTimeline} alt='법률 제·개정 및 기본계획 수립' />
         </SectionShell>
 
-        <Hr className="my-11" />
+        <Hr className='my-11' />
 
-        <SectionShell
-          id="plan-performance"
-          title="제2차 계획 대비 실적 현황"
-        >
-          <ImgCard src={performanceLeft} alt="제2차 계획 대비 실적 현황" />
+        <SectionShell id='plan-performance' title='제2차 계획 대비 실적 현황'>
+          <ImgCard src={performanceLeft} alt='제2차 계획 대비 실적 현황' />
         </SectionShell>
 
-        <Hr className="my-11" />
+        <Hr className='my-11' />
 
-        <SectionShell
-          id="domestic-change"
-          title="국내 여건 변화"
-        >
-          <ImgCard src={domesticTextbox} alt="국내 여건 변화" />
+        <SectionShell id='domestic-change' title='국내 여건 변화'>
+          <ImgCard src={domesticTextbox} alt='국내 여건 변화' />
         </SectionShell>
 
-        <Hr className="my-11" />
+        <Hr className='my-11' />
 
-        <SectionShell
-          id="policy-history"
-          title="물 재이용 정책 변화 추이"
-        >
-          <ImgCard src={policyTimeline} alt="물 재이용 정책 변화 추이" />
+        <SectionShell id='policy-history' title='물 재이용 정책 변화 추이'>
+          <ImgCard src={policyTimeline} alt='물 재이용 정책 변화 추이' />
         </SectionShell>
 
-        <Hr className="my-11" />
+        <Hr className='my-11' />
 
-        <SectionShell
-          id="law-relation"
-          title="타법령과의 관계 검토"
-        >
-          <ImgCard src={relNote} alt="타법령과의 관계 검토" />
+        <SectionShell id='law-relation' title='타법령과의 관계 검토'>
+          <ImgCard src={relNote} alt='타법령과의 관계 검토' />
         </SectionShell>
 
-        <Hr className="my-11" />
+        <Hr className='my-11' />
 
-        <SectionShell
-          id="domestic-linkage"
-          title="국내 연계 현황"
-          className="pb-[250px]"
-        >
-          <div className="mx-[20px] mb-8">
-            <p className="mb-2 text-[24px] font-semibold">
-              주요 국가계획의 정책방향과 연계한 물 재이용 정책 필요
-            </p>
-            <p className="text-[#4F4F4F]">
-              국가 상위계획의 정책 방향이 기후위기 대응 등 수자원의 공급 안전성을 위한
-              물 재이용 활성화로 정책 실효성 제고 필요
-              <br />
-              • 물관리 계획(국가수도기본계획, 국가 및 유역하수도종합계획,
-              하천유역수자원관리계획 등)과의 연계성 확보 → 통합적인 관점에서
-              물이용 체계 구축 필요
+        <SectionShell id='domestic-linkage' title='국내 연계 현황' className='pb-[250px]'>
+          <div className='mx-[20px] mb-8'>
+            <p className='mb-2 text-[24px] font-semibold'>주요 국가계획의 정책방향과 연계한 물 재이용 정책 필요</p>
+            <p className='text-[#4F4F4F]'>
+              국가 상위계획의 정책 방향이 기후위기 대응 등 수자원의 공급 안전성을 위한 물 재이용 활성화로 정책 실효성 제고 필요
+              <br />• 물관리 계획(국가수도기본계획, 국가 및 유역하수도종합계획, 하천유역수자원관리계획 등)과의 연계성 확보 → 통합적인 관점에서 물이용 체계 구축 필요
             </p>
           </div>
 
-          <ImgCard src={linkage} alt="국내 연계 현황" />
+          <ImgCard src={linkage} alt='국내 연계 현황' />
         </SectionShell>
       </div>
     </div>
   );
-}
+}

apps/dm/app/(with-layout)/status/_components/RainStatusSection.tsx

@@ -1,30 +1,24 @@
-"use client";
+'use client';
 
-import { useEffect, useMemo } from "react";
+import { useEffect, useMemo } from 'react';
 // import SubPageHeader from "@/components/SubPageHeader";
-import Image from "next/image";
-import { useDmStore } from "@/app/store";
-import { formatUsage } from "@/app/common/transValueFormat";
-import type {
-  DmStatusBildTpYearsType,
-  DmStatusUsgBildTpType,
-  DmStatusUsgYearsType,
-  TableHeaderType,
-} from "@/app/store/dm-status/type";
-
+import Image from 'next/image';
+import { useDmStore } from '@/app/store';
+import { formatUsage } from '@/app/common/transValueFormat';
+import type { DmStatusBildTpYearsType, DmStatusUsgBildTpType, DmStatusUsgYearsType, TableHeaderType } from '@/app/store/dm-status/type';
 
 // 공통 섹션 타이틀 컴포넌트
 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 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 }) {
+function Hr({ className = '' }: { className?: string }) {
   return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
 }
 
@@ -32,62 +26,49 @@ function Hr({ className = "" }: { className?: string }) {
 function RainIntroSummary() {
   const items = [
     {
-      icon: "/images/landing/icon_chart.png",
-      title: "지속적인 이용량 증가",
-      desc: "2018년 약 797만m³이었던 빗물 이용량은 5년 사이 약 75% 증가하여 수자원 절약에 기여하고 있습니다.",
+      icon: '/images/landing/icon_chart.png',
+      title: '지속적인 이용량 증가',
+      desc: '2018년 약 797만m³이었던 빗물 이용량은 5년 사이 약 75% 증가하여 수자원 절약에 기여하고 있습니다.',
     },
     {
-      icon: "/images/landing/icon_hand.png",
-      title: "조경용수의 핵심 자원",
-      desc: "재이용되는 빗물의 약 97%가 조경용수로 활용되고 있으며 이는 공원, 아파트 단지 등의 녹지 관리에 중요한 역할을 합니다.",
+      icon: '/images/landing/icon_hand.png',
+      title: '조경용수의 핵심 자원',
+      desc: '재이용되는 빗물의 약 97%가 조경용수로 활용되고 있으며 이는 공원, 아파트 단지 등의 녹지 관리에 중요한 역할을 합니다.',
     },
     {
-      icon: "/images/landing/icon_building.png",
-      title: "민간·공공의 협력",
-      desc: "골프장과 같은 대규모 스포츠 시설은 물론, 최근에는 공동주택·아파트 등 내 이용량이 급증하며 일상생활 속 빗물 활용이 확산되는 추세입니다.",
+      icon: '/images/landing/icon_building.png',
+      title: '민간·공공의 협력',
+      desc: '골프장과 같은 대규모 스포츠 시설은 물론, 최근에는 공동주택·아파트 등 내 이용량이 급증하며 일상생활 속 빗물 활용이 확산되는 추세입니다.',
     },
   ];
 
   return (
-    <div className="mb-[70px] px-[160px]">
-      <div className="grid grid-cols-[1fr_400px] items-center gap-[60px]">
+    <div className='mb-[70px] px-[160px]'>
+      <div className='grid grid-cols-[1fr_400px] items-center gap-[60px]'>
         {/* 좌측 */}
         <div>
-          <h3 className="text-[40px] font-extrabold leading-[1.35] tracking-[-0.04em] text-neutral-900">
+          <h3 className='text-[40px] font-extrabold leading-[1.35] tracking-[-0.04em] text-neutral-900'>
             기후위기 시대의 수자원 확보,
             <br />
-            <span className="inline-block bg-gradient-to-b from-[#6DBB4F] to-[#01ACE5] bg-clip-text text-transparent">
-              빗물 재이용
-            </span>
-            이 앞장섭니다.
+            <span className='inline-block bg-gradient-to-b from-[#6DBB4F] to-[#01ACE5] bg-clip-text text-transparent'>빗물 재이용</span>이 앞장섭니다.
           </h3>
 
-          <p className="mt-5 text-[16px] leading-[1.8] tracking-[-0.04em] text-neutral-600">
+          <p className='mt-5 text-[16px] leading-[1.8] tracking-[-0.04em] text-neutral-600'>
             2023년 기준 전국 3,500여 개 시설에서
             <br />
             연간 약 1,394만m³의 빗물을 소중한 자원으로 다시 활용하고 있습니다.
           </p>
 
-          <div className="mt-10 space-y-8">
+          <div className='mt-10 space-y-8'>
             {items.map((item) => (
-              <div key={item.title} className="flex gap-3 items-center">
-                <div className="flex h-12 w-12 shrink-0 items-center justify-center">
-                  <Image
-                    src={item.icon}
-                    alt=""
-                    width={48}
-                    height={48}
-                    className="object-contain"
-                  />
+              <div key={item.title} className='flex gap-3 items-center'>
+                <div className='flex h-12 w-12 shrink-0 items-center justify-center'>
+                  <Image src={item.icon} alt='' width={48} height={48} className='object-contain' />
                 </div>
 
                 <div>
-                  <strong className="block text-[18px] font-extrabold text-neutral-900">
-                    {item.title}
-                  </strong>
-                  <p className="mt-2 text-[16px] leading-[1.7] text-neutral-600 tracking-tighter">
-                    {item.desc}
-                  </p>
+                  <strong className='block text-[18px] font-extrabold text-neutral-900'>{item.title}</strong>
+                  <p className='mt-2 text-[16px] leading-[1.7] text-neutral-600 tracking-tighter'>{item.desc}</p>
                 </div>
               </div>
             ))}
@@ -95,15 +76,8 @@ function RainIntroSummary() {
         </div>
 
         {/* 우측 이미지 */}
-        <div className="flex items-center justify-center">
-          <Image
-            src="/images/landing/rain_status_img.png"
-            alt="빗물 재이용 개념도"
-            width={400}
-            height={343}
-            className="h-auto w-full max-w-[400px] object-contain"
-            priority
-          />
+        <div className='flex items-center justify-center'>
+          <Image src='/images/landing/rain_status_img.png' alt='빗물 재이용 개념도' width={400} height={343} className='h-auto w-full max-w-[400px] object-contain' priority />
         </div>
       </div>
     </div>
@@ -111,31 +85,15 @@ function RainIntroSummary() {
 }
 
 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]",
+  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]',
 };
 
-const headerColors6 = [
-  "bg-[#01ACE5]",
-  "bg-[#17AFC7]",
-  "bg-[#2CB2A9]",
-  "bg-[#42B58B]",
-  "bg-[#57B86D]",
-  "bg-[#81C784]",
-];
-const headerColors8 = [
-  "bg-[#01ACE5]",
-  "bg-[#10AED0]",
-  "bg-[#20B0BA]",
-  "bg-[#2FB2A5]",
-  "bg-[#3FB58F]",
-  "bg-[#4EB77A]",
-  "bg-[#5EB964]",
-  "bg-[#6DBB4F]",
-];
+const headerColors6 = ['bg-[#01ACE5]', 'bg-[#17AFC7]', 'bg-[#2CB2A9]', 'bg-[#42B58B]', 'bg-[#57B86D]', 'bg-[#81C784]'];
+const headerColors8 = ['bg-[#01ACE5]', 'bg-[#10AED0]', 'bg-[#20B0BA]', 'bg-[#2FB2A5]', 'bg-[#3FB58F]', 'bg-[#4EB77A]', 'bg-[#5EB964]', 'bg-[#6DBB4F]'];
 export default function RainStatusSection() {
   const getRainyByBildTpYears = useDmStore((state) => state.getRainyByBildTpYears);
   const getRainyByUsgBildTp = useDmStore((state) => state.getRainyByUsgBildTp);
@@ -148,19 +106,11 @@ export default function RainStatusSection() {
   const rainyByUsgBildTp = useDmStore((state) => state.rainy.rainyByUsgBildTp);
   const rainyByUsgYearsHeader = useDmStore((state) => state.rainy.rainyByUsgYearsHeader);
   const rainyByUsgYears = useDmStore((state) => state.rainy.rainyByUsgYears);
-  const partBildTpHeader = useMemo(
-    () => rainyByUsgBildTpHeader.slice(3).map((header) => header.title),
-    [rainyByUsgBildTpHeader]
-  );
-  
+  const partBildTpHeader = useMemo(() => rainyByUsgBildTpHeader.slice(3).map((header) => header.title), [rainyByUsgBildTpHeader]);
 
   // 출처 텍스트
   function SourceText() {
-    return (
-      <p className="mt-7 text-center text-[13px] text-neutral-500">
-        자료: 하수도정보시스템 {selectYear} 하수도 통계
-      </p>
-    );
+    return <p className='mt-7 text-center text-[13px] text-neutral-500'>자료: 하수도정보시스템 {selectYear} 하수도 통계</p>;
   }
 
   useEffect(() => {
@@ -171,32 +121,22 @@ export default function RainStatusSection() {
 
   const renderPartHeaders = (headers: string[], headerColors: string[]) => {
     return headers.map((header, index) => (
-      <th
-        key={header}
-        className={`${tableStyles.th} ${headerColors[index] ?? "bg-[#81C784]"} text-white`}
-        style={{ width: "140px" }}
-      >
+      <th key={header} className={`${tableStyles.th} ${headerColors[index] ?? 'bg-[#81C784]'} text-white`} style={{ width: '140px' }}>
         {header}
       </th>
     ));
   };
 
-  const renderBuildingUsageCells = (
-    row: DmStatusBildTpYearsType | DmStatusUsgYearsType | DmStatusUsgYearsType,
-    headers: TableHeaderType[]
-  ) => {
+  const renderBuildingUsageCells = (row: DmStatusBildTpYearsType | DmStatusUsgYearsType | DmStatusUsgYearsType, headers: TableHeaderType[]) => {
     const rowData = row as Record<string, string | number>;
     const firstHeaderId = headers[0]?.id;
-    const rowKey = firstHeaderId ? String(rowData[firstHeaderId] ?? "") : "";
+    const rowKey = firstHeaderId ? String(rowData[firstHeaderId] ?? '') : '';
 
     return headers.map((header, index) => {
       const value = rowData[header.id];
 
       return (
-        <td
-          key={`${rowKey}-${header.id}`}
-          className={`${tableStyles.td} ${index === 0 ? "!font-bold !text-neutral-900" : ""} ${[1, 3, 5].includes(index) ? "bg-[#EAF5F5]" : ""}`}
-        >
+        <td key={`${rowKey}-${header.id}`} className={`${tableStyles.td} ${index === 0 ? '!font-bold !text-neutral-900' : ''} ${[1, 3, 5].includes(index) ? 'bg-[#EAF5F5]' : ''}`}>
           {index === 0 ? value : formatUsage(value as string | number, 1000, 1)}
         </td>
       );
@@ -206,102 +146,99 @@ export default function RainStatusSection() {
   const renderRainyByUsgBildTpCells = (row: DmStatusUsgBildTpType) => {
     return rainyByUsgBildTpHeader.map((header, index) => {
       const value = row[header.id as keyof DmStatusUsgBildTpType];
-      const displayValue =
-        index === 0
-          ? value
-          : header.id === "CNT"
-            ? Number(value).toLocaleString("ko-KR")
-            : formatUsage(value as string | number, 1000, 1);
+      const displayValue = index === 0 ? value : header.id === 'CNT' ? Number(value).toLocaleString('ko-KR') : formatUsage(value as string | number, 1000, 1);
 
       return (
-        <td
-          key={`${row.USG_NM}-${header.id}`}
-          className={`${tableStyles.td} ${index === 0 ? "!font-bold !text-neutral-900" : ""} ${[1, 2].includes(index) ? "bg-[#EAF5F5]" : ""}`}
-        >
-          {displayValue == 0.0 ? "-" : displayValue}
+        <td key={`${row.USG_NM}-${header.id}`} className={`${tableStyles.td} ${index === 0 ? '!font-bold !text-neutral-900' : ''} ${[1, 2].includes(index) ? 'bg-[#EAF5F5]' : ''}`}>
+          {displayValue == 0.0 ? '-' : displayValue}
         </td>
       );
     });
   };
-  
-  const title = "빗물이용시설(현황)";
+
+  const title = '빗물이용시설(현황)';
 
   return (
-    <div className="bg-white">
+    <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" />
+      <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-[70px] pb-[120px]">
+      <div className='mt-[70px] pb-[120px]'>
         {/* 1) 빗물이용시설의 건축물별 빗물이용량 현황 */}
         <section>
           {/* 인트로 영역 */}
           <RainIntroSummary />
-          
-          <div id="status-rain-building" className="scroll-mt-[120px]">
+
+          <div id='status-rain-building' className='scroll-mt-[120px]'>
             <SectionTitle>빗물이용시설의 건축물별 빗물이용량 현황</SectionTitle>
 
-            <div className="mt-10">
-                <div className={tableStyles.container}>
+            <div className='mt-10'>
+              <div className={tableStyles.container}>
                 <table className={tableStyles.table}>
-                    <thead>
+                  <thead>
                     <tr>
-                        <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`} style={{ width: "160px" }}>
+                      <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`} style={{ width: '160px' }}>
                         구분
-                        </th>
-                        <th colSpan={rainyYears.length || 6} className={`${tableStyles.th} ${tableStyles.headerBg} py-2`}>
+                      </th>
+                      <th colSpan={rainyYears.length || 6} className={`${tableStyles.th} ${tableStyles.headerBg} py-2`}>
                         빗물이용량 (천m³/년)
-                        </th>
+                      </th>
                     </tr>
-                    <tr>
-                        {renderPartHeaders(rainyYears, headerColors6)}
-                    </tr>
-                    </thead>
-                    <tbody>
+                    <tr>{renderPartHeaders(rainyYears, headerColors6)}</tr>
+                  </thead>
+                  <tbody>
                     {rainyByBildTpYears.map((row, idx) => (
-                        <tr key={idx} className="bg-white">
+                      <tr key={idx} className='bg-white'>
                         {renderBuildingUsageCells(row, rainyByBildTpYearsHeader)}
-                        </tr>
+                      </tr>
                     ))}
-                    </tbody>
+                  </tbody>
                 </table>
-                </div>
+              </div>
 
-                <SourceText />
+              <SourceText />
             </div>
           </div>
         </section>
 
-        <Hr className="my-11" />
+        <Hr className='my-11' />
 
         {/* 2) 빗물이용시설의 용도별 분포 (xxxx년 기준) */}
-        <section
-          id="status-rain-purpose-distribution"
-          className="scroll-mt-[120px]"
-        >
+        <section id='status-rain-purpose-distribution' className='scroll-mt-[120px]'>
           <SectionTitle>빗물이용시설의 용도별 분포 ({selectYear}년 기준)</SectionTitle>
 
-          <div className="mt-8">
+          <div className='mt-8'>
             <div className={tableStyles.container}>
               <table className={tableStyles.table}>
                 <thead>
                   <tr>
-                    <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`} style={{ width: "160px" }}>용도</th>
-                    <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`} style={{ width: "84px" }}>개소수<br />(개소)</th>
-                    <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`} style={{ width: "84px" }}>저류용량<br />(천m³)</th>
-                    <th colSpan={8} className={`${tableStyles.th} ${tableStyles.headerBg} py-2`}>빗물이용량 (천m³/년)</th>
-                  </tr>
-                  <tr>
-                    {renderPartHeaders(partBildTpHeader, headerColors8)}
+                    <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`} style={{ width: '160px' }}>
+                      용도
+                    </th>
+                    <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`} style={{ width: '84px' }}>
+                      개소수
+                      <br />
+                      (개소)
+                    </th>
+                    <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`} style={{ width: '84px' }}>
+                      저류조용량
+                      <br />
+                      (천m³)
+                    </th>
+                    <th colSpan={8} className={`${tableStyles.th} ${tableStyles.headerBg} py-2`}>
+                      빗물이용량 (천m³/년)
+                    </th>
                   </tr>
+                  <tr>{renderPartHeaders(partBildTpHeader, headerColors8)}</tr>
                 </thead>
                 <tbody>
                   {rainyByUsgBildTp.map((row, idx) => (
-                    <tr key={`${row.USG_NM}-${idx}`} className="bg-white">
+                    <tr key={`${row.USG_NM}-${idx}`} className='bg-white'>
                       {renderRainyByUsgBildTpCells(row)}
                     </tr>
                   ))}
@@ -313,30 +250,29 @@ export default function RainStatusSection() {
           </div>
         </section>
 
-        <Hr className="my-11" />
+        <Hr className='my-11' />
 
         {/* 3) 빗물이용시설의 용도별 빗물이용량 현황 */}
-        <section
-          id="status-rain-purpose-usage"
-          className="scroll-mt-[120px]"
-        >
+        <section id='status-rain-purpose-usage' className='scroll-mt-[120px]'>
           <SectionTitle>빗물이용시설의 용도별 빗물이용량 현황</SectionTitle>
 
-          <div className="mt-8">
+          <div className='mt-8'>
             <div className={tableStyles.container}>
               <table className={tableStyles.table}>
                 <thead>
                   <tr>
-                    <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`} style={{ width: "160px" }}>용도</th>
-                    <th colSpan={6} className={`${tableStyles.th} ${tableStyles.headerBg} py-2`}>빗물이용량 (천m³/년)</th>
-                  </tr>
-                  <tr>
-                    {renderPartHeaders(rainyYears, headerColors6)}
+                    <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`} style={{ width: '160px' }}>
+                      용도
+                    </th>
+                    <th colSpan={6} className={`${tableStyles.th} ${tableStyles.headerBg} py-2`}>
+                      빗물이용량 (천m³/년)
+                    </th>
                   </tr>
+                  <tr>{renderPartHeaders(rainyYears, headerColors6)}</tr>
                 </thead>
                 <tbody>
                   {rainyByUsgYears.map((row, idx) => (
-                    <tr key={idx} className="bg-white">
+                    <tr key={idx} className='bg-white'>
                       {renderBuildingUsageCells(row, rainyByUsgYearsHeader)}
                     </tr>
                   ))}
@@ -350,4 +286,4 @@ export default function RainStatusSection() {
       </div>
     </div>
   );
-}
+}

apps/dm/app/(with-layout)/status/_components/SewageStatusSection.tsx

@@ -1,116 +1,97 @@
 /**
  * 하수처리수
  */
-"use client";
+'use client';
 
-import React from "react";
-import Image from "next/image";
-import { useEffect } from "react";
-import { useDmStore } from "@/app/store";
-import { formatUsage } from "@/app/common/transValueFormat";
-import type {
-  DmStatusLawYearsType,
-  DmStatusBildTpYearsType,
-  DmStatusUsgYearsType,
-  DmStatusSidoUsgType,
-  TableHeaderType,
-} from "@/app/store/dm-status/type";
-import { Col2Name } from "@/app/store/dm-status/type";
+import React from 'react';
+import Image from 'next/image';
+import { useEffect } from 'react';
+import { useDmStore } from '@/app/store';
+import { formatUsage } from '@/app/common/transValueFormat';
+import type { DmStatusLawYearsType, DmStatusBildTpYearsType, DmStatusUsgYearsType, DmStatusSidoUsgType, TableHeaderType } from '@/app/store/dm-status/type';
+import { Col2Name } from '@/app/store/dm-status/type';
 
 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 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 }) {
+function Hr({ className = '' }: { className?: string }) {
   return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
 }
 
 function SewageIntroSummary() {
   const items = [
     {
-      icon: "/images/landing/icon_cycle_water.png",
-      title: "안정적인 재이용률 유지",
+      icon: '/images/landing/icon_cycle_water.png',
+      title: '안정적인 재이용률 유지',
       desc: (
-          <>
+        <>
           연간 약 1,136백만m³의 하수처리수가 재이용되고 있으며,
-          <br/>
+          <br />
           약 15%에 달하는 높은 재이용률을 통해
-          <br/>
+          <br />
           수자원 선순환 체계를 구축하고 있습니다.
-          </>
+        </>
       ),
     },
     {
-      icon: "/images/landing/icon_water_flow.png",
-      title: "메마른 하천을 살리는 물",
+      icon: '/images/landing/icon_water_flow.png',
+      title: '메마른 하천을 살리는 물',
       desc: (
-          <>
+        <>
           재이용되는 물의 가장 많은 부분이 하천유지용수로 사용되어
-          <br/>
+          <br />
           도심 속 하천의 생태계를 보호하고 쾌적한 수변 환경을 조성합니다.
-          </>
+        </>
       ),
     },
     {
-      icon: "/images/landing/icon_location.png",
-      title: "지역별 균형 있는 활용",
+      icon: '/images/landing/icon_location.png',
+      title: '지역별 균형 있는 활용',
       desc: (
-          <>
+        <>
           전국적으로 고르게 시설이 확충되고 있으며, 특히 경기 지역을 중심으로
-          <br/>
+          <br />
           대규모 공업용수 공급망을 구축하여
-          <br/>
+          <br />
           지역 경제와 환경 보호를 동시에 실현하고 있습니다.
-          </>
+        </>
       ),
     },
   ];
 
   return (
-    <div className="mb-[70px] px-[160px]">
-      <div className="grid grid-cols-[1fr_400px] items-center gap-0">
+    <div className='mb-[70px] px-[160px]'>
+      <div className='grid grid-cols-[1fr_400px] items-center gap-0'>
         {/* 좌측 */}
         <div>
-          <h3 className="text-[40px] font-extrabold leading-[1.35] tracking-[-0.14em] text-neutral-900">
+          <h3 className='text-[40px] font-extrabold leading-[1.35] tracking-[-0.14em] text-neutral-900'>
             버려지는 하수에서 찾는 새로운 가치,
             <br />
-            <span className="inline-block bg-gradient-to-b from-[#6DBB4F] to-[#01ACE5] bg-clip-text text-transparent">
-              하수처리수 재이용
-            </span>
-            이 도시를 숨쉬게 합니다.
+            <span className='inline-block bg-gradient-to-b from-[#6DBB4F] to-[#01ACE5] bg-clip-text text-transparent'>하수처리수 재이용</span>이 도시를 숨쉬게 합니다.
           </h3>
 
-          <p className="mt-5 text-[16px] leading-[1.8] text-neutral-600">
+          <p className='mt-5 text-[16px] leading-[1.8] text-neutral-600'>
             하수처리장에서 정화된 물은 하천의 수량을 조절하고
             <br />
             산업 현장에 용수를 공급하는 소중한 자원입니다.
           </p>
 
-          <div className="mt-10 space-y-8">
+          <div className='mt-10 space-y-8'>
             {items.map((item) => (
-              <div key={item.title} className="flex gap-4 items-center">
-                <div className="mt-1 flex h-12 w-12 shrink-0 items-center justify-center">
-                  <Image
-                    src={item.icon}
-                    alt=""
-                    width={48}
-                    height={48}
-                    className="object-contain"
-                  />
+              <div key={item.title} className='flex gap-4 items-center'>
+                <div className='mt-1 flex h-12 w-12 shrink-0 items-center justify-center'>
+                  <Image src={item.icon} alt='' width={48} height={48} className='object-contain' />
                 </div>
 
                 <div>
-                  <strong className="block text-[18px] font-extrabold text-neutral-900">
-                    {item.title}
-                  </strong>
-                  <p className="mt-2 text-[16px] leading-[1.7] text-neutral-600">
-                    {item.desc}
-                  </p>
+                  <strong className='block text-[18px] font-extrabold text-neutral-900'>{item.title}</strong>
+                  <p className='mt-2 text-[16px] leading-[1.7] text-neutral-600'>{item.desc}</p>
                 </div>
               </div>
             ))}
@@ -118,15 +99,8 @@ function SewageIntroSummary() {
         </div>
 
         {/* 우측 이미지 */}
-        <div className="flex items-center justify-center">
-          <Image
-            src="/images/landing/sewage_status_img.png"
-            alt="하수처리수 재이용 개념도"
-            width={420}
-            height={360}
-            className="h-auto w-full max-w-[420px] object-contain"
-            priority
-          />
+        <div className='flex items-center justify-center'>
+          <Image src='/images/landing/sewage_status_img.png' alt='하수처리수 재이용 개념도' width={420} height={360} className='h-auto w-full max-w-[420px] object-contain' priority />
         </div>
       </div>
     </div>
@@ -134,31 +108,24 @@ function SewageIntroSummary() {
 }
 
 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]",
+  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]',
 };
 
-const headerColors6 = [
-  "bg-[#01ACE5]",
-  "bg-[#17AFC7]",
-  "bg-[#2CB2A9]",
-  "bg-[#42B58B]",
-  "bg-[#57B86D]",
-  "bg-[#81C784]",
-];
+const headerColors6 = ['bg-[#01ACE5]', 'bg-[#17AFC7]', 'bg-[#2CB2A9]', 'bg-[#42B58B]', 'bg-[#57B86D]', 'bg-[#81C784]'];
 
 export default function SewageStatusSection() {
   const getPbnstByLawYears = useDmStore((state) => state.getPbnstByLawYears);
-  const getPbnstByUsgYears = useDmStore((state) => state.getPbnstByUsgYears); 
-  const getPbnstByCpcYears = useDmStore((state) => state.getPbnstByCpcYears); 
-  const getPbnstBySido = useDmStore((state) => state.getPbnstBySido); 
+  const getPbnstByUsgYears = useDmStore((state) => state.getPbnstByUsgYears);
+  const getPbnstByCpcYears = useDmStore((state) => state.getPbnstByCpcYears);
+  const getPbnstBySido = useDmStore((state) => state.getPbnstBySido);
   const pbnstYears = useDmStore((state) => state.pbnst.pbnstYears);
   const selectYear = pbnstYears.slice(-1)[0];
   const pbnstByLawYearsHeader = useDmStore((state) => state.pbnst.pbnstByLawYearsHeader);
-  const pbnstByLawYears = useDmStore((state) => state.pbnst.pbnstByLawYears); 
+  const pbnstByLawYears = useDmStore((state) => state.pbnst.pbnstByLawYears);
   const pbnstByUsgYearsHeader = useDmStore((state) => state.pbnst.pbnstByUsgYearsHeader);
   const pbnstByUsgYears = useDmStore((state) => state.pbnst.pbnstByUsgYears);
   const pbnstByCpcYearsHeader = useDmStore((state) => state.pbnst.pbnstByCpcYearsHeader);
@@ -168,15 +135,11 @@ export default function SewageStatusSection() {
 
   // 출처 텍스트
   function SourceText() {
-    return (
-      <p className="mt-7 text-center text-[13px] text-neutral-500">
-        자료: 하수도정보시스템 {selectYear} 하수도 통계
-      </p>
-    );
+    return <p className='mt-7 text-center text-[13px] text-neutral-500'>자료: 하수도정보시스템 {selectYear} 하수도 통계</p>;
   }
-  
+
   useEffect(() => {
-    void getPbnstByLawYears(); 
+    void getPbnstByLawYears();
     void getPbnstByUsgYears();
     void getPbnstByCpcYears();
     void getPbnstBySido();
@@ -184,10 +147,7 @@ export default function SewageStatusSection() {
 
   const renderPartHeaders = (headers: string[], headerColors: string[]) => {
     return headers.map((header, index) => (
-      <th
-        key={header}
-        className={`${tableStyles.th} ${headerColors[index] ?? "bg-[#81C784]"} text-white`}
-      >
+      <th key={header} className={`${tableStyles.th} ${headerColors[index] ?? 'bg-[#81C784]'} text-white`}>
         {header}
       </th>
     ));
@@ -198,10 +158,10 @@ export default function SewageStatusSection() {
     row: DmStatusLawYearsType,
     data: DmStatusLawYearsType[],
     headers: TableHeaderType[],
-    unitSize: number = 1, // 단위 변경 1000 인 경우, 100,000 -> 100 으로 변경
+    unitSize: number = 1 // 단위 변경 1000 인 경우, 100,000 -> 100 으로 변경
   ) => {
     const rowData = row as Record<string, string | number>;
-    const currentCol1 = String(rowData["COL1"] ?? "");
+    const currentCol1 = String(rowData['COL1'] ?? '');
 
     // 이전 값
     const prevCol1 = rowIdx > 0 ? data[rowIdx - 1]?.COL1 : null;
@@ -220,56 +180,38 @@ export default function SewageStatusSection() {
       const value = rowData[header.id];
 
       // COL1 처리 (rowspan 핵심)
-      if (header.id === "COL1") {
+      if (header.id === 'COL1') {
         // 이전과 같으면 렌더링 안함
         if (currentCol1 === prevCol1) return null;
 
         return (
-          <td
-            key={`${rowIdx}-${header.id}`}
-            rowSpan={getRowSpan()}
-            className={`${tableStyles.td} !font-bold !text-neutral-900`}
-          >
+          <td key={`${rowIdx}-${header.id}`} rowSpan={getRowSpan()} className={`${tableStyles.td} !font-bold !text-neutral-900`}>
             {value}
           </td>
         );
-      } else if (header.id === "COL2") {
-        return (
-          <td
-            key={`${rowIdx}-${header.id}`}
-            className={`${tableStyles.td} !font-bold !text-neutral-900`}
-            dangerouslySetInnerHTML={{ __html: Col2Name[value as string] ?? "" }}
-          />
-        );
+      } else if (header.id === 'COL2') {
+        return <td key={`${rowIdx}-${header.id}`} className={`${tableStyles.td} !font-bold !text-neutral-900`} dangerouslySetInnerHTML={{ __html: Col2Name[value as string] ?? '' }} />;
       }
-      
+
       return (
-        <td
-          key={`${rowIdx}-${header.id}`}
-          className={`${tableStyles.td} ${[0, 2, 4].includes(index) ? "bg-[#EAF5F5]" : ""}`}
-        >
-          {(String(rowData["COL2"]).indexOf("CNT") > -1)
-            ? Number(value).toLocaleString("ko-KR")
-            : ((String(rowData["COL2"]).indexOf("REUSERT") > -1)
+        <td key={`${rowIdx}-${header.id}`} className={`${tableStyles.td} ${[0, 2, 4].includes(index) ? 'bg-[#EAF5F5]' : ''}`}>
+          {String(rowData['COL2']).indexOf('CNT') > -1
+            ? Number(value).toLocaleString('ko-KR')
+            : String(rowData['COL2']).indexOf('REUSERT') > -1
               ? formatUsage(value as string | number, 1, 1)
-              : formatUsage(value as string | number, unitSize, 1))
-          }
+              : formatUsage(value as string | number, unitSize, 1)}
         </td>
       );
     });
   };
 
-  const renderPbnstUsgCells = (
-    rowIdx: number,
-    row: DmStatusBildTpYearsType | DmStatusUsgYearsType,
-    headers: TableHeaderType[]
-  ) => {
+  const renderPbnstUsgCells = (rowIdx: number, row: DmStatusBildTpYearsType | DmStatusUsgYearsType, headers: TableHeaderType[]) => {
     const rowData = row as Record<string, string | number>;
     const isLastInGroup = rowIdx === 8 || rowIdx === 17;
 
-    const getType = (colNm:string) => {
+    const getType = (colNm: string) => {
       const last3 = colNm.slice(-3); // 끝 3자리
-      const prefix = last3[0];       // S 또는 D
+      const prefix = last3[0]; // S 또는 D
 
       if (prefix === 'S') {
         const num = parseInt(last3.slice(1), 10); // 숫자
@@ -282,149 +224,117 @@ export default function SewageStatusSection() {
 
     return headers.map((header, index) => {
       const value = rowData[header.id];
-      const colNm = String(rowData["COL_NM"] ?? "");
+      const colNm = String(rowData['COL_NM'] ?? '');
       const type = getType(colNm);
-      const isSubItem = type === "red-item" || type === "blue-item";
-      
+      const isSubItem = type === 'red-item' || type === 'blue-item';
+
       if (index === 0) {
         // console.log(header.id, value);
         return (
           <td key={`${rowIdx}-${header.id}`} className={`${tableStyles.td} relative`}>
             {isSubItem ? (
               <>
-                <div
-                  className={`absolute left-[1px] w-[16px] bg-white z-10 top-[-2px] ${
-                    isLastInGroup ? "bottom-[0px]" : "bottom-[-2px]"
-                  }`}
-                />
-                <div
-                  className={`absolute left-[16px] w-[4px] z-20 ${
-                    type === "red-item" ? "bg-[#FF8B8B]" : "bg-[#4ECBFF]"
-                  } top-[-2px] ${
-                    isLastInGroup ? "bottom-[0px]" : "bottom-[-2px]"
-                  }`}
-                />
-                <span className="text-[#4f4f4f] font-bold block w-full text-center relative z-30 translate-x-[8px]">
-                  {value}
-                </span>
+                <div className={`absolute left-[1px] w-[16px] bg-white z-10 top-[-2px] ${isLastInGroup ? 'bottom-[0px]' : 'bottom-[-2px]'}`} />
+                <div className={`absolute left-[16px] w-[4px] z-20 ${type === 'red-item' ? 'bg-[#FF8B8B]' : 'bg-[#4ECBFF]'} top-[-2px] ${isLastInGroup ? 'bottom-[0px]' : 'bottom-[-2px]'}`} />
+                <span className='text-[#4f4f4f] font-bold block w-full text-center relative z-30 translate-x-[8px]'>{value}</span>
               </>
             ) : (
-              <span className="font-bold text-neutral-900 block w-full text-center">
-                {value}
-              </span>
+              <span className='font-bold text-neutral-900 block w-full text-center'>{value}</span>
             )}
           </td>
-        );  
-      } 
+        );
+      }
 
       return (
-        <td
-          key={`${rowIdx}-${header.id}`}
-          className={`${tableStyles.td} ${index === 0 ? "!font-bold !text-neutral-900" : ""} ${[0, 2, 4].includes(index) ? "bg-[#EAF5F5]" : ""}`}
-        >
+        <td key={`${rowIdx}-${header.id}`} className={`${tableStyles.td} ${index === 0 ? '!font-bold !text-neutral-900' : ''} ${[0, 2, 4].includes(index) ? 'bg-[#EAF5F5]' : ''}`}>
           {formatUsage(value as string | number, 1000, 1)}
         </td>
       );
-      
     });
   };
 
-  const renderSidoUsgCells = (
-    rowIdx: number,
-    row: DmStatusSidoUsgType,
-    headers: TableHeaderType[]
-  ) => {
+  const renderSidoUsgCells = (rowIdx: number, row: DmStatusSidoUsgType, headers: TableHeaderType[]) => {
     const rowData = row as Record<string, string | number>;
 
     return headers.map((header, index) => {
       let value = rowData[header.id];
-      value = (index === 0||index ===9) ? value : formatUsage(value as string | number, 1000, 1);
-      value = value === "0.0"? "-" : value;
+      value = index === 0 || index === 9 ? value : formatUsage(value as string | number, 1000, 1);
+      value = value === '0.0' ? '-' : value;
 
       return (
-        <td
-          key={`${rowIdx}-${header.id}`}
-          className={`${tableStyles.td} ${index === 0 ? "!font-bold !text-neutral-900" : ""} ${[1, 9].includes(index) ? "bg-[#EAF5F5]" : ""}`}
-        >
+        <td key={`${rowIdx}-${header.id}`} className={`${tableStyles.td} ${index === 0 ? '!font-bold !text-neutral-900' : ''} ${[1, 9].includes(index) ? 'bg-[#EAF5F5]' : ''}`}>
           {value}
         </td>
       );
     });
   };
 
-  const title = "하수처리수 재이용시설(현황)";
+  const title = '하수처리수 재이용시설(현황)';
 
   return (
-    <div className="bg-white">
+    <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" />
+      <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-[70px] pb-[120px]">
+      <div className='mt-[70px] pb-[120px]'>
         {/* 1) 연도별 하수처리수 재이용 현황 */}
         <section>
-            {/* 인트로 */}
-            <SewageIntroSummary />
+          {/* 인트로 */}
+          <SewageIntroSummary />
 
-            <div id="status-treated-year" className="scroll-mt-[120px]">
-                <SectionTitle>연도별 하수처리수 재이용 현황</SectionTitle>
-                <div className="mt-10">
-                    <div className={tableStyles.container}>
-                    <table className={tableStyles.table}>
-                        <colgroup>
-                        <col style={{ width: "130px" }} />
-                        <col style={{ width: "180px" }} />
-                        <col />
-                        <col />
-                        <col />
-                        <col />
-                        <col />
-                        <col />
-                        </colgroup>
-                        <thead>
-                        <tr>
-                            <th
-                            colSpan={2}
-                            className={`${tableStyles.th} ${tableStyles.headerBg}`}
-                            >
-                            구분
-                            </th>
-                            {renderPartHeaders(pbnstYears, headerColors6)}
-                        </tr>
-                        </thead>
-                        <tbody>
-                          {pbnstByLawYears.map((row, idx, arr) => (
-                              <tr key={idx}>
-                              {renderCells(idx, row, arr, pbnstByLawYearsHeader, 1000)}
-                              </tr>
-                          ))}
-                        </tbody>
-                    </table>
-                    </div>
+          <div id='status-treated-year' className='scroll-mt-[120px]'>
+            <SectionTitle>연도별 하수처리수 재이용 현황</SectionTitle>
+            <div className='mt-10'>
+              <div className={tableStyles.container}>
+                <table className={tableStyles.table}>
+                  <colgroup>
+                    <col style={{ width: '130px' }} />
+                    <col style={{ width: '180px' }} />
+                    <col />
+                    <col />
+                    <col />
+                    <col />
+                    <col />
+                    <col />
+                  </colgroup>
+                  <thead>
+                    <tr>
+                      <th colSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`}>
+                        구분
+                      </th>
+                      {renderPartHeaders(pbnstYears, headerColors6)}
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {pbnstByLawYears.map((row, idx, arr) => (
+                      <tr key={idx}>{renderCells(idx, row, arr, pbnstByLawYearsHeader, 1000)}</tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
 
-                    <SourceText />
-                </div>
+              <SourceText />
             </div>
+          </div>
         </section>
 
-        <Hr className="my-11" />
+        <Hr className='my-11' />
 
         {/* 2) 용도별 하수처리수 재이용 현황 */}
-        <section id="status-treated-usage" className="scroll-mt-[120px]">
+        <section id='status-treated-usage' className='scroll-mt-[120px]'>
           <SectionTitle>용도별 하수처리수 재이용 현황</SectionTitle>
 
-          <div className="mt-8">
+          <div className='mt-8'>
             <div className={tableStyles.container}>
-              <div className="mb-2 text-right text-[13px] text-neutral-600">
-                (단위: 백만m³/일)
-              </div>
+              <div className='mb-2 text-right text-[13px] text-neutral-600'>(단위: 백만m³/년)</div>
               <table className={tableStyles.table}>
                 <colgroup>
-                  <col style={{ width: "180px" }} />
+                  <col style={{ width: '180px' }} />
                   <col />
                   <col />
                   <col />
@@ -434,17 +344,15 @@ export default function SewageStatusSection() {
                 </colgroup>
                 <thead>
                   <tr>
-                    <th className={`${tableStyles.th} ${tableStyles.headerBg}`}>
-                      구분
-                    </th>
+                    <th className={`${tableStyles.th} ${tableStyles.headerBg}`}>구분</th>
                     {renderPartHeaders(pbnstYears, headerColors6)}
                   </tr>
                 </thead>
                 <tbody>
                   {pbnstByUsgYears.map((row, idx) => (
-                      <tr key={idx}  className="bg-white">
+                    <tr key={idx} className='bg-white'>
                       {renderPbnstUsgCells(idx, row, pbnstByUsgYearsHeader)}
-                      </tr>
+                    </tr>
                   ))}
                 </tbody>
               </table>
@@ -454,18 +362,18 @@ export default function SewageStatusSection() {
           </div>
         </section>
 
-        <Hr className="my-11" />
+        <Hr className='my-11' />
 
         {/* 3) 하수처리시설 설치 및 이용 현황 */}
-        <section id="status-treated-facility" className="scroll-mt-[120px]">
+        <section id='status-treated-facility' className='scroll-mt-[120px]'>
           <SectionTitle>하수처리시설 설치 및 이용 현황</SectionTitle>
 
-          <div className="mt-8">
+          <div className='mt-8'>
             <div className={tableStyles.container}>
               <table className={tableStyles.table}>
                 <colgroup>
-                  <col style={{ width: "130px" }} />
-                  <col style={{ width: "160px" }} />
+                  <col style={{ width: '130px' }} />
+                  <col style={{ width: '160px' }} />
                   <col />
                   <col />
                   <col />
@@ -475,10 +383,7 @@ export default function SewageStatusSection() {
                 </colgroup>
                 <thead>
                   <tr>
-                    <th
-                      colSpan={2}
-                      className={`${tableStyles.th} ${tableStyles.headerBg}`}
-                    >
+                    <th colSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`}>
                       구분
                     </th>
                     {renderPartHeaders(pbnstYears, headerColors6)}
@@ -486,9 +391,7 @@ export default function SewageStatusSection() {
                 </thead>
                 <tbody>
                   {pbnstByCpcYears.map((row, idx, arr) => (
-                      <tr key={idx}>
-                      {renderCells(idx, row, arr, pbnstByCpcYearsHeader, 10000)}
-                      </tr>
+                    <tr key={idx}>{renderCells(idx, row, arr, pbnstByCpcYearsHeader, 10000)}</tr>
                   ))}
                 </tbody>
               </table>
@@ -498,24 +401,19 @@ export default function SewageStatusSection() {
           </div>
         </section>
 
-        <Hr className="my-11" />
+        <Hr className='my-11' />
 
         {/* 4) 시도별 하수처리수 재이용 현황 */}
-        <section
-          id="status-treated-region"
-          className="scroll-mt-[120px]"
-        >
+        <section id='status-treated-region' className='scroll-mt-[120px]'>
           <SectionTitle>시도별 하수처리수 재이용 현황</SectionTitle>
 
-          <div className="mt-8">
+          <div className='mt-8'>
             <div className={tableStyles.container}>
-              <div className="mb-2 text-right text-[13px] text-neutral-600">
-                (단위: 백만m³/일)
-              </div>
+              <div className='mb-2 text-right text-[13px] text-neutral-600'>(단위: 백만m³/년)</div>
 
               <table className={tableStyles.table}>
                 <colgroup>
-                  <col style={{ width: "160px" }} />
+                  <col style={{ width: '160px' }} />
                   <col />
                   <col />
                   <col />
@@ -529,54 +427,53 @@ export default function SewageStatusSection() {
                 </colgroup>
                 <thead>
                   <tr>
-                    <th rowSpan={3} className={`${tableStyles.th} ${tableStyles.headerBg}`}> 시도 </th>
-                    <th rowSpan={3} className={`${tableStyles.th} ${tableStyles.headerBg}`} >
-                      연간<br />하수<br />처리량
+                    <th rowSpan={3} className={`${tableStyles.th} ${tableStyles.headerBg}`}>
+                      {' '}
+                      시도{' '}
                     </th>
-                    <th colSpan={7} className={`${tableStyles.th} ${tableStyles.headerBg} py-2`} >
+                    <th rowSpan={3} className={`${tableStyles.th} ${tableStyles.headerBg}`}>
+                      연간
+                      <br />
+                      하수
+                      <br />
+                      처리량
+                    </th>
+                    <th colSpan={7} className={`${tableStyles.th} ${tableStyles.headerBg} py-2`}>
                       재이용현황
                     </th>
-                    <th rowSpan={3} className={`${tableStyles.th} ${tableStyles.headerBg}`} >
-                      재이용률<br />(%)
+                    <th rowSpan={3} className={`${tableStyles.th} ${tableStyles.headerBg}`}>
+                      재이용률
+                      <br />
+                      (%)
                     </th>
-                    <th rowSpan={3} className={`${tableStyles.th} ${tableStyles.headerBg}`} >
+                    <th rowSpan={3} className={`${tableStyles.th} ${tableStyles.headerBg}`}>
                       비고
                     </th>
                   </tr>
                   <tr>
-                    <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`} >
+                    <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`}>
                       계
                     </th>
-                    <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`} >
+                    <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`}>
                       장내
                     </th>
-                    <th colSpan={5} className={`${tableStyles.th} ${tableStyles.headerBg} py-1`} >
+                    <th colSpan={5} className={`${tableStyles.th} ${tableStyles.headerBg} py-1`}>
                       장외
                     </th>
                   </tr>
                   <tr>
-                    <th className={`${tableStyles.th} bg-[#01ACE5] text-white py-2 text-[16px]`}>
-                      소계
-                    </th>
-                    <th className={`${tableStyles.th} bg-[#1FB1C2] text-white py-2 text-[13px]`}>
-                      하천유지용수
-                    </th>
-                    <th className={`${tableStyles.th} bg-[#3EB59F] text-white py-2 text-[16px]`}>
-                      공업용수
-                    </th>
-                    <th className={`${tableStyles.th} bg-[#5DB97C] text-white py-2 text-[16px]`}>
-                      농업용수
-                    </th>
-                    <th className={`${tableStyles.th} bg-[#6DBB4F] text-white py-2 text-[16px]`}>
-                      기타용수
-                    </th>
+                    <th className={`${tableStyles.th} bg-[#01ACE5] text-white py-2 text-[16px]`}>소계</th>
+                    <th className={`${tableStyles.th} bg-[#1FB1C2] text-white py-2 text-[13px]`}>하천유지용수</th>
+                    <th className={`${tableStyles.th} bg-[#3EB59F] text-white py-2 text-[16px]`}>공업용수</th>
+                    <th className={`${tableStyles.th} bg-[#5DB97C] text-white py-2 text-[16px]`}>농업용수</th>
+                    <th className={`${tableStyles.th} bg-[#6DBB4F] text-white py-2 text-[16px]`}>기타용수</th>
                   </tr>
                 </thead>
                 <tbody>
                   {pbnstBySido.map((row, idx) => (
-                      <tr key={idx}  className="bg-white">
+                    <tr key={idx} className='bg-white'>
                       {renderSidoUsgCells(idx, row, pbnstBySidoHeader)}
-                      </tr>
+                    </tr>
                   ))}
                 </tbody>
               </table>

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

@@ -1,60 +1,36 @@
-"use client";
+'use client';
 
-import { useEffect, useMemo } from "react";
-import SubPageHeader from "@/components/SubPageHeader";
-import { useDmStore } from "@/app/store";
-import { formatUsage } from "@/app/common/transValueFormat";
-import type {
-  DmStatusBildTpYearsType,
-  DmStatusUsgBildTpType,
-  DmStatusUsgYearsType,
-  TableHeaderType,
-} from "@/app/store/dm-status/type";
+import { useEffect, useMemo } from 'react';
+import SubPageHeader from '@/components/SubPageHeader';
+import { useDmStore } from '@/app/store';
+import { formatUsage } from '@/app/common/transValueFormat';
+import type { DmStatusBildTpYearsType, DmStatusUsgBildTpType, DmStatusUsgYearsType, TableHeaderType } from '@/app/store/dm-status/type';
 
 // 공통 섹션 타이틀 컴포넌트
 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 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 }) {
+function Hr({ className = '' }: { className?: string }) {
   return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
 }
 
-
-
 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]",
+  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]',
 };
 
-const headerColors6 = [
-  "bg-[#01ACE5]",
-  "bg-[#17AFC7]",
-  "bg-[#2CB2A9]",
-  "bg-[#42B58B]",
-  "bg-[#57B86D]",
-  "bg-[#81C784]",
-];
-const headerColors8 = [
-  "bg-[#01ACE5]",
-  "bg-[#10AED0]",
-  "bg-[#20B0BA]",
-  "bg-[#2FB2A5]",
-  "bg-[#3FB58F]",
-  "bg-[#4EB77A]",
-  "bg-[#5EB964]",
-  "bg-[#6DBB4F]",
-];
-
+const headerColors6 = ['bg-[#01ACE5]', 'bg-[#17AFC7]', 'bg-[#2CB2A9]', 'bg-[#42B58B]', 'bg-[#57B86D]', 'bg-[#81C784]'];
+const headerColors8 = ['bg-[#01ACE5]', 'bg-[#10AED0]', 'bg-[#20B0BA]', 'bg-[#2FB2A5]', 'bg-[#3FB58F]', 'bg-[#4EB77A]', 'bg-[#5EB964]', 'bg-[#6DBB4F]'];
 
 export default function RainwaterStatusPage() {
   const getRainyByBildTpYears = useDmStore((state) => state.getRainyByBildTpYears);
@@ -68,19 +44,11 @@ export default function RainwaterStatusPage() {
   const rainyByUsgBildTp = useDmStore((state) => state.rainy.rainyByUsgBildTp);
   const rainyByUsgYearsHeader = useDmStore((state) => state.rainy.rainyByUsgYearsHeader);
   const rainyByUsgYears = useDmStore((state) => state.rainy.rainyByUsgYears);
-  const partBildTpHeader = useMemo(
-    () => rainyByUsgBildTpHeader.slice(3).map((header) => header.title),
-    [rainyByUsgBildTpHeader]
-  );
-  
+  const partBildTpHeader = useMemo(() => rainyByUsgBildTpHeader.slice(3).map((header) => header.title), [rainyByUsgBildTpHeader]);
 
   // 출처 텍스트
   function SourceText() {
-    return (
-      <p className="mt-7 text-center text-[13px] text-neutral-500">
-        자료: 환경부(2024), 「{selectYear} 하수도 통계」
-      </p>
-    );
+    return <p className='mt-7 text-center text-[13px] text-neutral-500'>자료: 환경부(2024), 「{selectYear} 하수도 통계」</p>;
   }
 
   useEffect(() => {
@@ -91,32 +59,22 @@ export default function RainwaterStatusPage() {
 
   const renderPartHeaders = (headers: string[], headerColors: string[]) => {
     return headers.map((header, index) => (
-      <th
-        key={header}
-        className={`${tableStyles.th} ${headerColors[index] ?? "bg-[#81C784]"} text-white`}
-        style={{ width: "140px" }}
-      >
+      <th key={header} className={`${tableStyles.th} ${headerColors[index] ?? 'bg-[#81C784]'} text-white`} style={{ width: '140px' }}>
         {header}
       </th>
     ));
   };
 
-  const renderBuildingUsageCells = (
-    row: DmStatusBildTpYearsType | DmStatusUsgYearsType | DmStatusUsgYearsType,
-    headers: TableHeaderType[]
-  ) => {
+  const renderBuildingUsageCells = (row: DmStatusBildTpYearsType | DmStatusUsgYearsType | DmStatusUsgYearsType, headers: TableHeaderType[]) => {
     const rowData = row as Record<string, string | number>;
     const firstHeaderId = headers[0]?.id;
-    const rowKey = firstHeaderId ? String(rowData[firstHeaderId] ?? "") : "";
+    const rowKey = firstHeaderId ? String(rowData[firstHeaderId] ?? '') : '';
 
     return headers.map((header, index) => {
       const value = rowData[header.id];
 
       return (
-        <td
-          key={`${rowKey}-${header.id}`}
-          className={`${tableStyles.td} ${index === 0 ? "!font-bold !text-neutral-900" : ""} ${[1, 3, 5].includes(index) ? "bg-[#EAF5F5]" : ""}`}
-        >
+        <td key={`${rowKey}-${header.id}`} className={`${tableStyles.td} ${index === 0 ? '!font-bold !text-neutral-900' : ''} ${[1, 3, 5].includes(index) ? 'bg-[#EAF5F5]' : ''}`}>
           {index === 0 ? value : formatUsage(value as string | number, 1000, 1)}
         </td>
       );
@@ -126,63 +84,49 @@ export default function RainwaterStatusPage() {
   const renderRainyByUsgBildTpCells = (row: DmStatusUsgBildTpType) => {
     return rainyByUsgBildTpHeader.map((header, index) => {
       const value = row[header.id as keyof DmStatusUsgBildTpType];
-      const displayValue =
-        index === 0
-          ? value
-          : header.id === "CNT"
-            ? Number(value).toLocaleString("ko-KR")
-            : formatUsage(value as string | number, 1000, 1);
+      const displayValue = index === 0 ? value : header.id === 'CNT' ? Number(value).toLocaleString('ko-KR') : formatUsage(value as string | number, 1000, 1);
 
       return (
-        <td
-          key={`${row.USG_NM}-${header.id}`}
-          className={`${tableStyles.td} ${index === 0 ? "!font-bold !text-neutral-900" : ""} ${[1, 2].includes(index) ? "bg-[#EAF5F5]" : ""}`}
-        >
-          {displayValue == 0.0 ? "-" : displayValue}
+        <td key={`${row.USG_NM}-${header.id}`} className={`${tableStyles.td} ${index === 0 ? '!font-bold !text-neutral-900' : ''} ${[1, 2].includes(index) ? 'bg-[#EAF5F5]' : ''}`}>
+          {displayValue == 0.0 ? '-' : displayValue}
         </td>
       );
     });
   };
 
   return (
-    <div className="bg-white">
+    <div className='bg-white'>
       <SubPageHeader
-        title="빗물이용시설(현황)"
-        crumbs={[
-          { label: "Home", href: "/reuse" },
-          { label: "물 재이용 현황", href: "/reuse/cases/rain" },
-          { label: "빗물이용시설(현황)" },
-        ]}
+        title='빗물이용시설(현황)'
+        crumbs={[{ label: 'Home', href: '/reuse' }, { label: '물 재이용 현황', href: '/reuse/cases/rain' }, { label: '빗물이용시설(현황)' }]}
         hideFooterLine
         hideGuideText
-        wrapClassName="!pb-0"
+        wrapClassName='!pb-0'
       />
 
-      <div className="pr-[100px]">
-        <Hr className="my-7" />
+      <div className='pr-[100px]'>
+        <Hr className='my-7' />
 
         {/* 1) 빗물이용시설의 건축물별 빗물이용량 현황 */}
-        <section id="status-rain-building" className="mt-10 scroll-mt-[120px]">
+        <section id='status-rain-building' className='mt-10 scroll-mt-[120px]'>
           <SectionTitle>빗물이용시설의 건축물별 빗물이용량 현황</SectionTitle>
-          <div className="mt-10">
+          <div className='mt-10'>
             <div className={tableStyles.container}>
               <table className={tableStyles.table}>
                 <thead>
                   <tr>
-                    <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`} style={{ width: "160px" }}>
+                    <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`} style={{ width: '160px' }}>
                       구분
                     </th>
                     <th colSpan={rainyYears.length || 6} className={`${tableStyles.th} ${tableStyles.headerBg} py-2`}>
                       빗물이용량 (천m³/년)
                     </th>
                   </tr>
-                  <tr>
-                    {renderPartHeaders(rainyYears, headerColors6)}
-                  </tr>
+                  <tr>{renderPartHeaders(rainyYears, headerColors6)}</tr>
                 </thead>
                 <tbody>
                   {rainyByBildTpYears.map((row, idx) => (
-                    <tr key={idx} className="bg-white">
+                    <tr key={idx} className='bg-white'>
                       {renderBuildingUsageCells(row, rainyByBildTpYearsHeader)}
                     </tr>
                   ))}
@@ -193,28 +137,38 @@ export default function RainwaterStatusPage() {
           </div>
         </section>
 
-        <Hr className="my-11" />
+        <Hr className='my-11' />
 
         {/* 2) 빗물이용시설의 용도별 분포 (2023년 기준) */}
-        <section id="status-rain-purpose-distribution" className="scroll-mt-[120px]">
+        <section id='status-rain-purpose-distribution' className='scroll-mt-[120px]'>
           <SectionTitle>빗물이용시설의 용도별 분포 ({selectYear}년 기준)</SectionTitle>
-          <div className="mt-8">
+          <div className='mt-8'>
             <div className={tableStyles.container}>
               <table className={tableStyles.table}>
                 <thead>
                   <tr>
-                    <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`} style={{ width: "160px" }}>용도</th>
-                    <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`} style={{ width: "84px" }}>개소수<br />(개소)</th>
-                    <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`} style={{ width: "84px" }}>저류용량<br />(천m³)</th>
-                    <th colSpan={8} className={`${tableStyles.th} ${tableStyles.headerBg} py-2`}>빗물이용량 (천m³/년)</th>
-                  </tr>
-                  <tr>
-                    {renderPartHeaders(partBildTpHeader, headerColors8)}
+                    <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`} style={{ width: '160px' }}>
+                      용도
+                    </th>
+                    <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`} style={{ width: '84px' }}>
+                      개소수
+                      <br />
+                      (개소)
+                    </th>
+                    <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`} style={{ width: '84px' }}>
+                      저류조용량
+                      <br />
+                      (천m³)
+                    </th>
+                    <th colSpan={8} className={`${tableStyles.th} ${tableStyles.headerBg} py-2`}>
+                      빗물이용량 (천m³/년)
+                    </th>
                   </tr>
+                  <tr>{renderPartHeaders(partBildTpHeader, headerColors8)}</tr>
                 </thead>
                 <tbody>
                   {rainyByUsgBildTp.map((row, idx) => (
-                    <tr key={`${row.USG_NM}-${idx}`} className="bg-white">
+                    <tr key={`${row.USG_NM}-${idx}`} className='bg-white'>
                       {renderRainyByUsgBildTpCells(row)}
                     </tr>
                   ))}
@@ -225,26 +179,28 @@ export default function RainwaterStatusPage() {
           </div>
         </section>
 
-        <Hr className="my-11" />
+        <Hr className='my-11' />
 
         {/* 3) 빗물이용시설의 용도별 빗물이용량 현황 */}
-        <section id="status-rain-purpose-usage" className="pb-[200px] scroll-mt-[120px]">
+        <section id='status-rain-purpose-usage' className='pb-[200px] scroll-mt-[120px]'>
           <SectionTitle>빗물이용시설의 용도별 빗물이용량 현황</SectionTitle>
-          <div className="mt-8">
+          <div className='mt-8'>
             <div className={tableStyles.container}>
               <table className={tableStyles.table}>
                 <thead>
                   <tr>
-                    <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`} style={{ width: "160px" }}>용도</th>
-                    <th colSpan={6} className={`${tableStyles.th} ${tableStyles.headerBg} py-2`}>빗물이용량 (천m³/년)</th>
-                  </tr>
-                  <tr>
-                    {renderPartHeaders(rainyYears, headerColors6)}
+                    <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`} style={{ width: '160px' }}>
+                      용도
+                    </th>
+                    <th colSpan={6} className={`${tableStyles.th} ${tableStyles.headerBg} py-2`}>
+                      빗물이용량 (천m³/년)
+                    </th>
                   </tr>
+                  <tr>{renderPartHeaders(rainyYears, headerColors6)}</tr>
                 </thead>
                 <tbody>
                   {rainyByUsgYears.map((row, idx) => (
-                    <tr key={idx} className="bg-white">
+                    <tr key={idx} className='bg-white'>
                       {renderBuildingUsageCells(row, rainyByUsgYearsHeader)}
                     </tr>
                   ))}

apps/dm/app/(with-layout)/status/sewage/page.tsx

@@ -1,30 +1,26 @@
-"use client";
+'use client';
 
-import React from "react";
-import SubPageHeader from "@/components/SubPageHeader";
+import React from 'react';
+import SubPageHeader from '@/components/SubPageHeader';
 
 // 공통 섹션 타이틀 컴포넌트
 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 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 }) {
+function Hr({ className = '' }: { className?: string }) {
   return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
 }
 
 // 출처 텍스트
 function SourceText() {
-  return (
-    <p className="mt-7 text-center text-[13px] text-neutral-500">
-      자료: 환경부(2024), 「2023 하수도 통계」
-    </p>
-  );
+  return <p className='mt-7 text-center text-[13px] text-neutral-500'>자료: 환경부(2024), 「2023 하수도 통계」</p>;
 }
 
 /**
@@ -33,11 +29,11 @@ function SourceText() {
  * - 폰트 사이즈: 16px로 수정
  */
 const tableStyles = {
-  container: "w-[1000px] mx-auto overflow-hidden",
-  table: "w-full table-fixed border-collapse text-center text-[16px]",
-  th: "border border-[#858F98] py-3 font-bold text-neutral-800",
-  td: "border border-[#858F98] py-3 text-neutral-700 font-medium break-keep",
-  headerBg: "bg-[#E3E7EA]",
+  container: 'w-[1000px] mx-auto overflow-hidden',
+  table: 'w-full table-fixed border-collapse text-center text-[16px]',
+  th: 'border border-[#858F98] py-3 font-bold text-neutral-800',
+  td: 'border border-[#858F98] py-3 text-neutral-700 font-medium break-keep',
+  headerBg: 'bg-[#E3E7EA]',
 };
 
 // export default function TreatedWaterPage() {
@@ -51,368 +47,382 @@ const tableStyles = {
 
 export default function TreatedStatusPage() {
   return (
-    <div className="relative bg-white">
+    <div className='relative bg-white'>
       {/* <BusinessSubNav /> */}
 
       <SubPageHeader
-        title="하수처리수 재이용시설(현황)"
-        crumbs={[
-          { label: "Home", href: "/main" },
-          { label: "물 재이용 현황", href: "/status/rain" },
-          { label: "하수처리수 재이용시설(현황)" },
-        ]}
+        title='하수처리수 재이용시설(현황)'
+        crumbs={[{ label: 'Home', href: '/main' }, { label: '물 재이용 현황', href: '/status/rain' }, { label: '하수처리수 재이용시설(현황)' }]}
         hideFooterLine
         hideGuideText
-        wrapClassName="!pb-0"
+        wrapClassName='!pb-0'
       />
 
-      <div className="pr-0">
-        <Hr className="my-7" />
+      <div className='pr-0'>
+        <Hr className='my-7' />
 
-      {/* 1) 연도별 하수처리수 재이용 현황 */}
-      <section className="mt-10">
-        <SectionTitle>연도별 하수처리수 재이용 현황</SectionTitle>
-        <div className="mt-10">
-          <div className={tableStyles.container}>
-            <table className={tableStyles.table}>
-              <colgroup>
-                <col style={{ width: '130px' }} />
-                <col style={{ width: '180px' }} />
-                <col />
-                <col />
-                <col />
-                <col />
-                <col />
-                <col />
-              </colgroup>
-              <thead>
-                <tr>
-                  <th colSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`}>구분</th>
-                  <th className={`${tableStyles.th} bg-[#01ACE5] text-white`}>2018</th>
-                  <th className={`${tableStyles.th} bg-[#14AFCD] text-white`}>2019</th>
-                  <th className={`${tableStyles.th} bg-[#28B2B4] text-white`}>2020</th>
-                  <th className={`${tableStyles.th} bg-[#3CB59A] text-white`}>2021</th>
-                  <th className={`${tableStyles.th} bg-[#50B880] text-white`}>2022</th>
-                  <th className={`${tableStyles.th} bg-[#6DBB4F] text-white`}>2023</th>
-                </tr>
-              </thead>
-              <tbody>
-                {[
-                  {
-                    group: "전체",
-                    rows: [
-                      ["개소수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>", "671", "681", "698", "704", "714", "717"],
-                      ["하수처리량 <span class='text-[13px] font-normal text-[#767676]'>(백만m³/년)</span>", "7,163.7", "7,140.4", "7,375.6", "7,335.8", "7,378.9", "7,537.2"],
-                      ["재이용량 <span class='text-[13px] font-normal text-[#767676]'>(백만m³/년)</span>", "1,112.7", "1,148.7", "1,148.7", "1,127.0", "1,136.8", "1,137.5"],
-                      ["재이용률 <span class='text-[13px] font-normal text-[#767676]'>(%)</span>", "17.4", "16.5", "15.5", "14.1", "14.3", "14.4"],
-                    ]
-                  },
-                  {
-                    group: "법적 대상",
-                    rows: [
-                      ["개소수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>", "68", "82", "94", "97", "101", "118"],
-                      ["하수처리량 <span class='text-[13px] font-normal text-[#767676]'>(백만m³/년)</span>", "761.2", "839.0", "935.3", "1,158.7", "1,220.6", "1,473.6"],
-                      ["재이용량 <span class='text-[13px] font-normal text-[#767676]'>(백만m³/년)</span>", "162.2", "190.6", "218.5", "244.6", "247.2", "324.9"],
-                      ["재이용률 <span class='text-[13px] font-normal text-[#767676]'>(%)</span>", "24.7", "25.4", "27.8", "25.7", "24.2", "24.1"],
-                    ]
-                  },
-                  {
-                    group: "법적 미대상",
-                    rows: [
-                      ["개소수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>", "603", "599", "604", "607", "613", "599"],
-                      ["하수처리량 <span class='text-[13px] font-normal text-[#767676]'>(백만m³/년)</span>", "6,402.5", "6,301.4", "6,440.3", "6,177.1", "6,158.3", "6,063.5"],
-                      ["재이용량 <span class='text-[13px] font-normal text-[#767676]'>(백만m³/년)</span>", "950.6", "958.1", "926.2", "882.4", "889.5", "812.7"],
-                      ["재이용률 <span class='text-[13px] font-normal text-[#767676]'>(%)</span>", "16.5", "15.3", "13.6", "12.2", "12.6", "12.5"],
-                    ]
-                  }
-                ].map((section, sIdx) => (
-                  <React.Fragment key={sIdx}>
-                    {section.rows.map((row, rIdx) => (
-                      <tr key={`${sIdx}-${rIdx}`} className="bg-white">
-                        {rIdx === 0 && (
-                          <td 
-                            rowSpan={section.rows.length} 
-                            className={`${tableStyles.td} ${tableStyles.headerBg} !text-[18px] !font-bold !text-neutral-900`}
-                          >
-                            {section.group}
-                          </td>
-                        )}
-                        {row.map((val, i) => {
-                          const isFirstCol = i === 0;
-                          const isHighlightedCol = [1, 3, 5].includes(i);
-                          return (
-                            <td 
-                              key={i} 
-                              className={`${tableStyles.td} ${isFirstCol ? "!font-bold !text-neutral-900" : ""} ${isHighlightedCol ? "bg-[#EAF5F5]" : ""}`}
-                              dangerouslySetInnerHTML={{ __html: val }}
-                            />
-                          );
-                        })}
-                      </tr>
-                    ))}
-                  </React.Fragment>
-                ))}
-              </tbody>
-            </table>
+        {/* 1) 연도별 하수처리수 재이용 현황 */}
+        <section className='mt-10'>
+          <SectionTitle>연도별 하수처리수 재이용 현황</SectionTitle>
+          <div className='mt-10'>
+            <div className={tableStyles.container}>
+              <table className={tableStyles.table}>
+                <colgroup>
+                  <col style={{ width: '130px' }} />
+                  <col style={{ width: '180px' }} />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                </colgroup>
+                <thead>
+                  <tr>
+                    <th colSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`}>
+                      구분
+                    </th>
+                    <th className={`${tableStyles.th} bg-[#01ACE5] text-white`}>2018</th>
+                    <th className={`${tableStyles.th} bg-[#14AFCD] text-white`}>2019</th>
+                    <th className={`${tableStyles.th} bg-[#28B2B4] text-white`}>2020</th>
+                    <th className={`${tableStyles.th} bg-[#3CB59A] text-white`}>2021</th>
+                    <th className={`${tableStyles.th} bg-[#50B880] text-white`}>2022</th>
+                    <th className={`${tableStyles.th} bg-[#6DBB4F] text-white`}>2023</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {[
+                    {
+                      group: '전체',
+                      rows: [
+                        ["개소수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>", '671', '681', '698', '704', '714', '717'],
+                        ["하수처리량 <span class='text-[13px] font-normal text-[#767676]'>(백만m³/년)</span>", '7,163.7', '7,140.4', '7,375.6', '7,335.8', '7,378.9', '7,537.2'],
+                        ["재이용량 <span class='text-[13px] font-normal text-[#767676]'>(백만m³/년)</span>", '1,112.7', '1,148.7', '1,148.7', '1,127.0', '1,136.8', '1,137.5'],
+                        ["재이용률 <span class='text-[13px] font-normal text-[#767676]'>(%)</span>", '17.4', '16.5', '15.5', '14.1', '14.3', '14.4'],
+                      ],
+                    },
+                    {
+                      group: '법적 대상',
+                      rows: [
+                        ["개소수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>", '68', '82', '94', '97', '101', '118'],
+                        ["하수처리량 <span class='text-[13px] font-normal text-[#767676]'>(백만m³/년)</span>", '761.2', '839.0', '935.3', '1,158.7', '1,220.6', '1,473.6'],
+                        ["재이용량 <span class='text-[13px] font-normal text-[#767676]'>(백만m³/년)</span>", '162.2', '190.6', '218.5', '244.6', '247.2', '324.9'],
+                        ["재이용률 <span class='text-[13px] font-normal text-[#767676]'>(%)</span>", '24.7', '25.4', '27.8', '25.7', '24.2', '24.1'],
+                      ],
+                    },
+                    {
+                      group: '법적 미대상',
+                      rows: [
+                        ["개소수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>", '603', '599', '604', '607', '613', '599'],
+                        ["하수처리량 <span class='text-[13px] font-normal text-[#767676]'>(백만m³/년)</span>", '6,402.5', '6,301.4', '6,440.3', '6,177.1', '6,158.3', '6,063.5'],
+                        ["재이용량 <span class='text-[13px] font-normal text-[#767676]'>(백만m³/년)</span>", '950.6', '958.1', '926.2', '882.4', '889.5', '812.7'],
+                        ["재이용률 <span class='text-[13px] font-normal text-[#767676]'>(%)</span>", '16.5', '15.3', '13.6', '12.2', '12.6', '12.5'],
+                      ],
+                    },
+                  ].map((section, sIdx) => (
+                    <React.Fragment key={sIdx}>
+                      {section.rows.map((row, rIdx) => (
+                        <tr key={`${sIdx}-${rIdx}`} className='bg-white'>
+                          {rIdx === 0 && (
+                            <td rowSpan={section.rows.length} className={`${tableStyles.td} ${tableStyles.headerBg} !text-[18px] !font-bold !text-neutral-900`}>
+                              {section.group}
+                            </td>
+                          )}
+                          {row.map((val, i) => {
+                            const isFirstCol = i === 0;
+                            const isHighlightedCol = [1, 3, 5].includes(i);
+                            return (
+                              <td
+                                key={i}
+                                className={`${tableStyles.td} ${isFirstCol ? '!font-bold !text-neutral-900' : ''} ${isHighlightedCol ? 'bg-[#EAF5F5]' : ''}`}
+                                dangerouslySetInnerHTML={{ __html: val }}
+                              />
+                            );
+                          })}
+                        </tr>
+                      ))}
+                    </React.Fragment>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+            <SourceText />
           </div>
-          <SourceText />
-        </div>
-      </section>
+        </section>
 
-        <Hr className="my-11" />
+        <Hr className='my-11' />
 
-      {/* 2) 용도별 하수처리수 재이용 현황 */}
-      <section>
-        <SectionTitle>용도별 하수처리수 재이용 현황</SectionTitle>
-        <div className="mt-8">
-          <div className={tableStyles.container}>
-            <table className={tableStyles.table}>
-              <colgroup>
-                <col style={{ width: '180px' }} />
-                <col />
-                <col />
-                <col />
-                <col />
-                <col />
-                <col />
-              </colgroup>
-              <thead>
-                <tr>
-                  <th className={`${tableStyles.th} ${tableStyles.headerBg}`}>구분</th>
-                  <th className={`${tableStyles.th} bg-[#01ACE5] text-white`}>2018</th>
-                  <th className={`${tableStyles.th} bg-[#14AFCD] text-white`}>2019</th>
-                  <th className={`${tableStyles.th} bg-[#28B2B4] text-white`}>2020</th>
-                  <th className={`${tableStyles.th} bg-[#3CB59A] text-white`}>2021</th>
-                  <th className={`${tableStyles.th} bg-[#50B880] text-white`}>2022</th>
-                  <th className={`${tableStyles.th} bg-[#6DBB4F] text-white`}>2023</th>
-                </tr>
-              </thead>
-              <tbody>
-                {[
-                  { label: "총 재이용량", type: "total", values: ["1,112.7", "1,148.7", "1,144.7", "1,127.0", "1,136.8", "1,137.5"] },
-                  { label: "장내 재이용", type: "category", values: ["520.6", "519.8", "513.9", "520.3", "502.2", "490.0"] },
-                  { label: "세척수", type: "red-item", values: ["177.9", "174.4", "169.4", "180.9", "196.8", "191.2"] },
-                  { label: "냉각수", type: "red-item", values: ["45.5", "46.8", "50.4", "40.6", "38.3", "41.7"] },
-                  { label: "청소수", type: "red-item", values: ["17.6", "21.2", "21.2", "21.7", "20.8", "20.5"] },
-                  { label: "조경용수", type: "red-item", values: ["0.1", "0.1", "-", "-", "-", "-"] },
-                  { label: "회생용수", type: "red-item", values: ["15.8", "16.7", "17.8", "15.7", "14.4", "14.0"] },
-                  { label: "장내급수도", type: "red-item", values: ["2.4", "-", "-", "-", "-", "-"] },
-                  { label: "장내기타용수", type: "red-item", values: ["261.3", "260.6", "255.0", "261.1", "231.8", "222.6"] },
-                  { label: "장외 재이용", type: "category", values: ["592.1", "628.9", "630.8", "606.7", "634.6", "647.5"] },
-                  { label: "청소·화장실용수", type: "blue-item", values: ["0.6", "0.4", "0.4", "0.4", "0.4", "0.4"] },
-                  { label: "세척·살수용수", type: "blue-item", values: ["5.6", "9.9", "2.9", "2.1", "3.0", "3.6"] },
-                  { label: "조경용수", type: "blue-item", values: ["10.3", "16.4", "5.9", "4.5", "8.9", "9.5"] },
-                  { label: "친수용수", type: "blue-item", values: ["7.8", "3.1", "3.1", "3.0", "10.9", "10.5"] },
-                  { label: "하천유지용수", type: "blue-item", values: ["480.5", "482.5", "496.2", "442.7", "471.7", "484.0"] },
-                  { label: "농업용수", type: "blue-item", values: ["12.2", "11.9", "13.4", "10.7", "10.6", "11.4"] },
-                  { label: "지하수 충전", type: "blue-item", values: ["0.0", "0.0", "0.0", "13.4", "0.0", "0.0"] },
-                  { label: "공업용수", type: "blue-item", values: ["75.2", "104.6", "108.9", "129.9", "129.0", "128.1"] },
-                ].map((row, idx) => {
-                  const isSubItem = row.type === "red-item" || row.type === "blue-item";
-                  const isLastInGroup = idx === 8 || idx === 17;
+        {/* 2) 용도별 하수처리수 재이용 현황 */}
+        <section>
+          <SectionTitle>용도별 하수처리수 재이용 현황</SectionTitle>
+          <div className='mt-8'>
+            <div className={tableStyles.container}>
+              <table className={tableStyles.table}>
+                <colgroup>
+                  <col style={{ width: '180px' }} />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                </colgroup>
+                <thead>
+                  <tr>
+                    <th className={`${tableStyles.th} ${tableStyles.headerBg}`}>구분</th>
+                    <th className={`${tableStyles.th} bg-[#01ACE5] text-white`}>2018</th>
+                    <th className={`${tableStyles.th} bg-[#14AFCD] text-white`}>2019</th>
+                    <th className={`${tableStyles.th} bg-[#28B2B4] text-white`}>2020</th>
+                    <th className={`${tableStyles.th} bg-[#3CB59A] text-white`}>2021</th>
+                    <th className={`${tableStyles.th} bg-[#50B880] text-white`}>2022</th>
+                    <th className={`${tableStyles.th} bg-[#6DBB4F] text-white`}>2023</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {[
+                    { label: '총 재이용량', type: 'total', values: ['1,112.7', '1,148.7', '1,144.7', '1,127.0', '1,136.8', '1,137.5'] },
+                    { label: '장내 재이용', type: 'category', values: ['520.6', '519.8', '513.9', '520.3', '502.2', '490.0'] },
+                    { label: '세척수', type: 'red-item', values: ['177.9', '174.4', '169.4', '180.9', '196.8', '191.2'] },
+                    { label: '냉각수', type: 'red-item', values: ['45.5', '46.8', '50.4', '40.6', '38.3', '41.7'] },
+                    { label: '청소수', type: 'red-item', values: ['17.6', '21.2', '21.2', '21.7', '20.8', '20.5'] },
+                    { label: '조경용수', type: 'red-item', values: ['0.1', '0.1', '-', '-', '-', '-'] },
+                    { label: '회생용수', type: 'red-item', values: ['15.8', '16.7', '17.8', '15.7', '14.4', '14.0'] },
+                    { label: '장내급수도', type: 'red-item', values: ['2.4', '-', '-', '-', '-', '-'] },
+                    { label: '장내기타용수', type: 'red-item', values: ['261.3', '260.6', '255.0', '261.1', '231.8', '222.6'] },
+                    { label: '장외 재이용', type: 'category', values: ['592.1', '628.9', '630.8', '606.7', '634.6', '647.5'] },
+                    { label: '청소·화장실용수', type: 'blue-item', values: ['0.6', '0.4', '0.4', '0.4', '0.4', '0.4'] },
+                    { label: '세척·살수용수', type: 'blue-item', values: ['5.6', '9.9', '2.9', '2.1', '3.0', '3.6'] },
+                    { label: '조경용수', type: 'blue-item', values: ['10.3', '16.4', '5.9', '4.5', '8.9', '9.5'] },
+                    { label: '친수용수', type: 'blue-item', values: ['7.8', '3.1', '3.1', '3.0', '10.9', '10.5'] },
+                    { label: '하천유지용수', type: 'blue-item', values: ['480.5', '482.5', '496.2', '442.7', '471.7', '484.0'] },
+                    { label: '농업용수', type: 'blue-item', values: ['12.2', '11.9', '13.4', '10.7', '10.6', '11.4'] },
+                    { label: '지하수 충전', type: 'blue-item', values: ['0.0', '0.0', '0.0', '13.4', '0.0', '0.0'] },
+                    { label: '공업용수', type: 'blue-item', values: ['75.2', '104.6', '108.9', '129.9', '129.0', '128.1'] },
+                  ].map((row, idx) => {
+                    const isSubItem = row.type === 'red-item' || row.type === 'blue-item';
+                    const isLastInGroup = idx === 8 || idx === 17;
 
-                  return (
-                    <tr key={idx} className="bg-white">
-                      <td className={`${tableStyles.td} relative`}>
-                        {isSubItem ? (
-                          <>
-                            <div className={`absolute left-[1px] w-[16px] bg-white z-10 top-[-2px] ${isLastInGroup ? 'bottom-[0px]' : 'bottom-[-2px]'}`} />
-                            <div className={`absolute left-[16px] w-[4px] z-20 ${row.type === 'red-item' ? 'bg-[#FF8B8B]' : 'bg-[#4ECBFF]'} top-[-2px] ${isLastInGroup ? 'bottom-[0px]' : 'bottom-[-2px]'}`} />
-                            <span className="text-[#4f4f4f] font-bold block w-full text-center relative z-30 translate-x-[8px]">{row.label}</span>
-                          </>
-                        ) : (
-                          <span className="font-bold text-neutral-900 block w-full text-center">{row.label}</span>
-                        )}
-                      </td>
-                      {row.values.map((val, i) => (
-                        <td key={i} className={`${tableStyles.td} ${[0, 2, 4].includes(i) ? "bg-[#EAF5F5]" : ""}`}>
+                    return (
+                      <tr key={idx} className='bg-white'>
+                        <td className={`${tableStyles.td} relative`}>
+                          {isSubItem ? (
+                            <>
+                              <div className={`absolute left-[1px] w-[16px] bg-white z-10 top-[-2px] ${isLastInGroup ? 'bottom-[0px]' : 'bottom-[-2px]'}`} />
+                              <div
+                                className={`absolute left-[16px] w-[4px] z-20 ${row.type === 'red-item' ? 'bg-[#FF8B8B]' : 'bg-[#4ECBFF]'} top-[-2px] ${isLastInGroup ? 'bottom-[0px]' : 'bottom-[-2px]'}`}
+                              />
+                              <span className='text-[#4f4f4f] font-bold block w-full text-center relative z-30 translate-x-[8px]'>{row.label}</span>
+                            </>
+                          ) : (
+                            <span className='font-bold text-neutral-900 block w-full text-center'>{row.label}</span>
+                          )}
+                        </td>
+                        {row.values.map((val, i) => (
+                          <td key={i} className={`${tableStyles.td} ${[0, 2, 4].includes(i) ? 'bg-[#EAF5F5]' : ''}`}>
+                            {val}
+                          </td>
+                        ))}
+                      </tr>
+                    );
+                  })}
+                </tbody>
+              </table>
+            </div>
+            <SourceText />
+          </div>
+        </section>
+
+        <Hr className='my-11' />
+
+        {/* 3) 하수처리시설 설치 및 이용 현황 */}
+        <section>
+          <SectionTitle>하수처리시설 설치 및 이용 현황</SectionTitle>
+          <div className='mt-8'>
+            <div className={tableStyles.container}>
+              <table className={tableStyles.table}>
+                <colgroup>
+                  <col style={{ width: '130px' }} />
+                  <col style={{ width: '160px' }} />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                </colgroup>
+                <thead>
+                  <tr>
+                    <th colSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`}>
+                      구분
+                    </th>
+                    <th className={`${tableStyles.th} bg-[#01ACE5] text-white`}>2018</th>
+                    <th className={`${tableStyles.th} bg-[#14AFCD] text-white`}>2019</th>
+                    <th className={`${tableStyles.th} bg-[#28B2B4] text-white`}>2020</th>
+                    <th className={`${tableStyles.th} bg-[#3CB59A] text-white`}>2021</th>
+                    <th className={`${tableStyles.th} bg-[#50B880] text-white`}>2022</th>
+                    <th className={`${tableStyles.th} bg-[#6DBB4F] text-white`}>2023</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {[
+                    {
+                      group: '전체',
+                      rows: [
+                        ["시설수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>", '671', '681', '698', '704', '714', '717'],
+                        ["시설용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>", '25,846', '26,067', '26,244', '26,492', '26,586', '26,766'],
+                        ["처리용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>", '1,112.7', '1,148.7', '1,144.7', '1,127.0', '1,136.8', '1,137.5'],
+                      ],
+                    },
+                    {
+                      group: '법적 대상',
+                      rows: [
+                        ["시설수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>", '68', '82', '94', '97', '101', '118'],
+                        ["시설용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>", '3,088.9', '3,359.2', '3,612.6', '4,412.2', '4,692.3', '5,503.8'],
+                        ["처리용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>", '162.2', '190.6', '218.5', '244.6', '247.2', '324.9'],
+                      ],
+                    },
+                    {
+                      group: '법적 미대상',
+                      rows: [
+                        ["시설수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>", '603', '599', '604', '607', '613', '599'],
+                        ["시설용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>", '22,757', '22,708', '22,631', '22,080', '21,894', '21,262'],
+                        ["처리용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>", '950.6', '958.1', '926.2', '882.4', '889.5', '812.7'],
+                      ],
+                    },
+                  ].map((section, sIdx) => (
+                    <React.Fragment key={sIdx}>
+                      {section.rows.map((row, rIdx) => (
+                        <tr key={`${sIdx}-${rIdx}`} className='bg-white'>
+                          {rIdx === 0 && (
+                            <td rowSpan={section.rows.length} className={`${tableStyles.td} ${tableStyles.headerBg} !text-[18px] !font-bold !text-neutral-900`}>
+                              {section.group}
+                            </td>
+                          )}
+                          {row.map((val, i) => {
+                            const isFirstCol = i === 0;
+                            const isHighlightedCol = [1, 3, 5].includes(i);
+                            return (
+                              <td
+                                key={i}
+                                className={`${tableStyles.td} ${isFirstCol ? '!font-bold !text-neutral-900' : ''} ${isHighlightedCol ? 'bg-[#EAF5F5]' : ''}`}
+                                dangerouslySetInnerHTML={{ __html: val }}
+                              />
+                            );
+                          })}
+                        </tr>
+                      ))}
+                    </React.Fragment>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+            <SourceText />
+          </div>
+        </section>
+
+        <Hr className='my-11' />
+
+        {/* 4) 시도별 하수처리수 재이용 현황 */}
+        <section className='pb-[200px]'>
+          <SectionTitle>시도별 하수처리수 재이용 현황</SectionTitle>
+          <div className='mt-8'>
+            <div className={tableStyles.container}>
+              <div className='text-right text-[13px] mb-2 text-neutral-600'>(단위: 백만m³/년)</div>
+              <table className={tableStyles.table}>
+                <colgroup>
+                  <col style={{ width: '160px' }} />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                </colgroup>
+                <thead>
+                  <tr>
+                    <th rowSpan={3} className={`${tableStyles.th} ${tableStyles.headerBg}`}>
+                      시도
+                    </th>
+                    <th rowSpan={3} className={`${tableStyles.th} ${tableStyles.headerBg}`}>
+                      연간
+                      <br />
+                      하수
+                      <br />
+                      처리량
+                    </th>
+                    <th colSpan={7} className={`${tableStyles.th} ${tableStyles.headerBg} py-2`}>
+                      재이용현황
+                    </th>
+                    <th rowSpan={3} className={`${tableStyles.th} ${tableStyles.headerBg}`}>
+                      재이용률
+                      <br />
+                      (%)
+                    </th>
+                    <th rowSpan={3} className={`${tableStyles.th} ${tableStyles.headerBg}`}>
+                      비고
+                    </th>
+                  </tr>
+                  <tr>
+                    <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`}>
+                      계
+                    </th>
+                    <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`}>
+                      장내
+                    </th>
+                    <th colSpan={5} className={`${tableStyles.th} ${tableStyles.headerBg} py-1`}>
+                      장외
+                    </th>
+                  </tr>
+                  <tr>
+                    {/* 💡 하천유지용수는 14px, 나머지 하위 헤더는 16px로 적용 */}
+                    <th className={`${tableStyles.th} bg-[#01ACE5] text-white py-2 text-[16px]`}>소계</th>
+                    <th className={`${tableStyles.th} bg-[#1FB1C2] text-white py-2 text-[13px]`}>하천유지용수</th>
+                    <th className={`${tableStyles.th} bg-[#3EB59F] text-white py-2 text-[16px]`}>공업용수</th>
+                    <th className={`${tableStyles.th} bg-[#5DB97C] text-white py-2 text-[16px]`}>농업용수</th>
+                    <th className={`${tableStyles.th} bg-[#6DBB4F] text-white py-2 text-[16px]`}>기타용수</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {[
+                    ['합계', '7,537.2', '1,137.5', '490.0', '647.5', '484.0', '128.1', '11.4', '24.0', '15.1%', ''],
+                    ['서울특별시', '1,567.0', '114.9', '59.3', '55.6', '55.1', '-', '-', '0.5', '7.3%', ''],
+                    ['부산광역시', '491.5', '146.2', '120.7', '25.5', '25.3', '-', '-', '0.2', '29.7%', ''],
+                    ['대구광역시', '432.7', '102.4', '38.2', '64.2', '64.1', '-', '-', '0.1', '23.7%', ''],
+                    ['인천광역시', '302.3', '57.7', '11.6', '46.1', '29.2', '12.1', '0.5', '4.3', '19.1%', ''],
+                    ['광주광역시', '211.1', '28.7', '6.5', '22.3', '22.2', '-', '-', '0.1', '13.6%', ''],
+                    ['대전광역시', '244.6', '11.9', '11.9', '0.68', '0.0', '-', '-', '0.1', '4.9%', ''],
+                    ['울산광역시', '235.1', '36.1', '6.1', '29.9', '29.7', '0.2', '-', '-', '15.3%', ''],
+                    ['세종특별자치시', '38.5', '2.5', '2.0', '0.5', '0.4', '-', '0.2', '-', '6.6%', ''],
+                    ['경기도', '1,926.8', '313.3', '122.2', '191.0', '153.0', '33.3', '0.4', '4.3', '16.3%', ''],
+                    ['강원도', '230.4', '19.6', '15.4', '4.2', '2.1', '-', '-', '2.1', '8.5%', ''],
+                    ['충청북도', '190.9', '15.6', '6.3', '9.2', '7.4', '0.6', '-', '1.2', '8.2%', ''],
+                    ['충청남도', '241.5', '41.4', '9.8', '31.5', '17.7', '8.6', '4.5', '0.8', '17.1%', ''],
+                    ['전라북도', '292.4', '42.7', '7.5', '35.1', '33.5', '0.2', '1.0', '0.5', '14.6%', ''],
+                    ['전라남도', '254.0', '23.6', '12.3', '11.3', '8.7', '0.0', '1.0', '1.6', '9.3%', ''],
+                    ['경상북도', '378.4', '129.1', '33.7', '95.3', '20.8', '72.5', '0.8', '1.3', '34.1%', ''],
+                    ['경상남도', '411.3', '50.1', '25.0', '25.0', '14.7', '0.5', '3.0', '6.9', '12.2%', ''],
+                    ['제주특별자치도', '88.6', '1.7', '1.5', '0.12', '-', '-', '0.1', '-', '1.9%', ''],
+                  ].map((row, idx) => (
+                    <tr key={idx} className='bg-white'>
+                      {/* 💡 연간하수처리량(index 1), 장내(index 3), 재이용률(index 9) 컬러 하이라이트 적용 */}
+                      {row.map((val, i) => (
+                        <td key={i} className={`${tableStyles.td} ${i === 0 ? '!font-bold !text-neutral-900' : ''} ${[1, 3, 9].includes(i) ? 'bg-[#EAF5F5]' : ''}`}>
                           {val}
                         </td>
                       ))}
                     </tr>
-                  );
-                })}
-              </tbody>
-            </table>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+            <SourceText />
           </div>
-          <SourceText />
-        </div>
-      </section>
-
-        <Hr className="my-11" />
-
-      {/* 3) 하수처리시설 설치 및 이용 현황 */}
-      <section>
-        <SectionTitle>하수처리시설 설치 및 이용 현황</SectionTitle>
-        <div className="mt-8">
-          <div className={tableStyles.container}>
-            <table className={tableStyles.table}>
-              <colgroup>
-                <col style={{ width: '130px' }} />
-                <col style={{ width: '160px' }} />
-                <col />
-                <col />
-                <col />
-                <col />
-                <col />
-                <col />
-              </colgroup>
-              <thead>
-                <tr>
-                  <th colSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`}>구분</th>
-                  <th className={`${tableStyles.th} bg-[#01ACE5] text-white`}>2018</th>
-                  <th className={`${tableStyles.th} bg-[#14AFCD] text-white`}>2019</th>
-                  <th className={`${tableStyles.th} bg-[#28B2B4] text-white`}>2020</th>
-                  <th className={`${tableStyles.th} bg-[#3CB59A] text-white`}>2021</th>
-                  <th className={`${tableStyles.th} bg-[#50B880] text-white`}>2022</th>
-                  <th className={`${tableStyles.th} bg-[#6DBB4F] text-white`}>2023</th>
-                </tr>
-              </thead>
-              <tbody>
-                {[
-                  {
-                    group: "전체",
-                    rows: [
-                      ["시설수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>", "671", "681", "698", "704", "714", "717"],
-                      ["시설용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>", "25,846", "26,067", "26,244", "26,492", "26,586", "26,766"],
-                      ["처리용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>", "1,112.7", "1,148.7", "1,144.7", "1,127.0", "1,136.8", "1,137.5"],
-                    ]
-                  },
-                  {
-                    group: "법적 대상",
-                    rows: [
-                      ["시설수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>", "68", "82", "94", "97", "101", "118"],
-                      ["시설용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>", "3,088.9", "3,359.2", "3,612.6", "4,412.2", "4,692.3", "5,503.8"],
-                      ["처리용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>", "162.2", "190.6", "218.5", "244.6", "247.2", "324.9"],
-                    ]
-                  },
-                  {
-                    group: "법적 미대상",
-                    rows: [
-                      ["시설수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>", "603", "599", "604", "607", "613", "599"],
-                      ["시설용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>", "22,757", "22,708", "22,631", "22,080", "21,894", "21,262"],
-                      ["처리용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>", "950.6", "958.1", "926.2", "882.4", "889.5", "812.7"],
-                    ]
-                  }
-                ].map((section, sIdx) => (
-                  <React.Fragment key={sIdx}>
-                    {section.rows.map((row, rIdx) => (
-                      <tr key={`${sIdx}-${rIdx}`} className="bg-white">
-                        {rIdx === 0 && (
-                          <td 
-                            rowSpan={section.rows.length} 
-                            className={`${tableStyles.td} ${tableStyles.headerBg} !text-[18px] !font-bold !text-neutral-900`}
-                          >
-                            {section.group}
-                          </td>
-                        )}
-                        {row.map((val, i) => {
-                          const isFirstCol = i === 0;
-                          const isHighlightedCol = [1, 3, 5].includes(i);
-                          return (
-                            <td 
-                              key={i} 
-                              className={`${tableStyles.td} ${isFirstCol ? "!font-bold !text-neutral-900" : ""} ${isHighlightedCol ? "bg-[#EAF5F5]" : ""}`}
-                              dangerouslySetInnerHTML={{ __html: val }}
-                            />
-                          );
-                        })}
-                      </tr>
-                    ))}
-                  </React.Fragment>
-                ))}
-              </tbody>
-            </table>
-          </div>
-          <SourceText />
-        </div>
-      </section>
-
-        <Hr className="my-11" />
-
-      {/* 4) 시도별 하수처리수 재이용 현황 */}
-      <section className="pb-[200px]">
-        <SectionTitle>시도별 하수처리수 재이용 현황</SectionTitle>
-        <div className="mt-8">
-          <div className={tableStyles.container}>
-            <div className="text-right text-[13px] mb-2 text-neutral-600">(단위: 백만m³/일)</div>
-            <table className={tableStyles.table}>
-              <colgroup>
-                <col style={{ width: '160px' }} />
-                <col />
-                <col />
-                <col />
-                <col />
-                <col />
-                <col />
-                <col />
-                <col />
-                <col />
-                <col />
-              </colgroup>
-              <thead>
-                <tr>
-                  <th rowSpan={3} className={`${tableStyles.th} ${tableStyles.headerBg}`}>시도</th>
-                  <th rowSpan={3} className={`${tableStyles.th} ${tableStyles.headerBg}`}>연간<br/>하수<br/>처리량</th>
-                  <th colSpan={7} className={`${tableStyles.th} ${tableStyles.headerBg} py-2`}>재이용현황</th>
-                  <th rowSpan={3} className={`${tableStyles.th} ${tableStyles.headerBg}`}>재이용률<br/>(%)</th>
-                  <th rowSpan={3} className={`${tableStyles.th} ${tableStyles.headerBg}`}>비고</th>
-                </tr>
-                <tr>
-                  <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`}>계</th>
-                  <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`}>장내</th>
-                  <th colSpan={5} className={`${tableStyles.th} ${tableStyles.headerBg} py-1`}>장외</th>
-                </tr>
-                <tr>
-                  {/* 💡 하천유지용수는 14px, 나머지 하위 헤더는 16px로 적용 */}
-                  <th className={`${tableStyles.th} bg-[#01ACE5] text-white py-2 text-[16px]`}>소계</th>
-                  <th className={`${tableStyles.th} bg-[#1FB1C2] text-white py-2 text-[13px]`}>하천유지용수</th>
-                  <th className={`${tableStyles.th} bg-[#3EB59F] text-white py-2 text-[16px]`}>공업용수</th>
-                  <th className={`${tableStyles.th} bg-[#5DB97C] text-white py-2 text-[16px]`}>농업용수</th>
-                  <th className={`${tableStyles.th} bg-[#6DBB4F] text-white py-2 text-[16px]`}>기타용수</th>
-                </tr>
-              </thead>
-              <tbody>
-                {[
-                  ["합계", "7,537.2", "1,137.5", "490.0", "647.5", "484.0", "128.1", "11.4", "24.0", "15.1%", ""],
-                  ["서울특별시", "1,567.0", "114.9", "59.3", "55.6", "55.1", "-", "-", "0.5", "7.3%", ""],
-                  ["부산광역시", "491.5", "146.2", "120.7", "25.5", "25.3", "-", "-", "0.2", "29.7%", ""],
-                  ["대구광역시", "432.7", "102.4", "38.2", "64.2", "64.1", "-", "-", "0.1", "23.7%", ""],
-                  ["인천광역시", "302.3", "57.7", "11.6", "46.1", "29.2", "12.1", "0.5", "4.3", "19.1%", ""],
-                  ["광주광역시", "211.1", "28.7", "6.5", "22.3", "22.2", "-", "-", "0.1", "13.6%", ""],
-                  ["대전광역시", "244.6", "11.9", "11.9", "0.68", "0.0", "-", "-", "0.1", "4.9%", ""],
-                  ["울산광역시", "235.1", "36.1", "6.1", "29.9", "29.7", "0.2", "-", "-", "15.3%", ""],
-                  ["세종특별자치시", "38.5", "2.5", "2.0", "0.5", "0.4", "-", "0.2", "-", "6.6%", ""],
-                  ["경기도", "1,926.8", "313.3", "122.2", "191.0", "153.0", "33.3", "0.4", "4.3", "16.3%", ""],
-                  ["강원도", "230.4", "19.6", "15.4", "4.2", "2.1", "-", "-", "2.1", "8.5%", ""],
-                  ["충청북도", "190.9", "15.6", "6.3", "9.2", "7.4", "0.6", "-", "1.2", "8.2%", ""],
-                  ["충청남도", "241.5", "41.4", "9.8", "31.5", "17.7", "8.6", "4.5", "0.8", "17.1%", ""],
-                  ["전라북도", "292.4", "42.7", "7.5", "35.1", "33.5", "0.2", "1.0", "0.5", "14.6%", ""],
-                  ["전라남도", "254.0", "23.6", "12.3", "11.3", "8.7", "0.0", "1.0", "1.6", "9.3%", ""],
-                  ["경상북도", "378.4", "129.1", "33.7", "95.3", "20.8", "72.5", "0.8", "1.3", "34.1%", ""],
-                  ["경상남도", "411.3", "50.1", "25.0", "25.0", "14.7", "0.5", "3.0", "6.9", "12.2%", ""],
-                  ["제주특별자치도", "88.6", "1.7", "1.5", "0.12", "-", "-", "0.1", "-", "1.9%", ""],
-                ].map((row, idx) => (
-                  <tr key={idx} className="bg-white">
-                    {/* 💡 연간하수처리량(index 1), 장내(index 3), 재이용률(index 9) 컬러 하이라이트 적용 */}
-                    {row.map((val, i) => (
-                      <td 
-                        key={i} 
-                        className={`${tableStyles.td} ${i === 0 ? "!font-bold !text-neutral-900" : ""} ${[1, 3, 9].includes(i) ? "bg-[#EAF5F5]" : ""}`}
-                      >
-                        {val}
-                      </td>
-                    ))}
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-          <SourceText />
-        </div>
-      </section>
-
+        </section>
       </div>
     </div>
   );
-}
+}

apps/dm/app/store/common/index.tsx

@@ -211,18 +211,32 @@ const selectMiddleRegionData: SelectDataType[] = [
  * STORE - API
  */
 
+/** API 선택 목록의 빈 값과 중복 값을 제거하고 전체 항목을 한 번만 추가한다. */
+function normalizeSelectData<T extends SelectDataType>(items: T[], allItem: T): T[] {
+  const uniqueItems = new Map<string, T>();
+
+  items.forEach((item) => {
+    const val = String(item.val ?? '').trim();
+
+    if (!val || val === '0' || uniqueItems.has(val)) return;
+    uniqueItems.set(val, { ...item, val });
+  });
+
+  return [allItem, ...uniqueItems.values()];
+}
+
 // 시도 API 호출 함수 추가
 const fetchSidoData = async (): Promise<SelectDataType[]> => {
   try {
     const res = await getFetch(fetchType.FO, '/addr/city');
     const data = res.data;
-    selectSidoData = [
-      { text: "전체", val: '0'},
-      ...data.map((item: sidoDataType) => ({
-          text: item.sido || '',
-          val: String(item.adstDstrCd) || ''
-      }))
-    ];
+    selectSidoData = normalizeSelectData(
+      data.map((item: sidoDataType) => ({
+        text: item.sido || '',
+        val: String(item.adstDstrCd) || ''
+      })),
+      { text: "전체", val: '0' }
+    );
     return selectSidoData;
   } catch (error) {
       console.error('시도 데이터를 가져오는데 실패했습니다:', error);
@@ -235,14 +249,13 @@ const fetchSigunData = async (): Promise<SelectDataType[]> => {
   try {
     const res = await getFetch(fetchType.FO, '/addr/sgg');
     const data = res.data;
-    selectSigunData = [
-      { text: "전체", val: '0' },
-      ...data
-      .map((item: sigunDataType) => ({
-          text: item.gugun || '',
-          val: String(item.adstDstrCd) || ''
-      }))
-    ];
+    selectSigunData = normalizeSelectData(
+      data.map((item: sigunDataType) => ({
+        text: item.gugun || '',
+        val: String(item.adstDstrCd) || ''
+      })),
+      { text: "전체", val: '0' }
+    );
     return selectSigunData;
   } catch (error) {
     console.error('시군구 데이터를 가져오는데 실패했습니다:', error);
@@ -255,13 +268,13 @@ const fetchRegionData = async (): Promise<SelectDataType[]> => {
   try {
     const res = await getFetch(fetchType.FO, '/addr/sarea');
     const data = res.data;
-    return [
-      { text: "전체", val: '0'},
-      ...data.map((item: regionDataType) => ({
+    return normalizeSelectData(
+      data.map((item: regionDataType) => ({
         text: item.rvbsn || '',
         val: String(item.rvbsnCd) || ''
-      }))
-    ];
+      })),
+      { text: "전체", val: '0' }
+    );
   } catch (error) {
     console.error('권역 데이터를 가져오는데 실패했습니다:', error);
     return selectRegionData;
@@ -273,14 +286,13 @@ const fetchMiddleRegionData = async (): Promise<SelectDataType[]> => {
   try {
     const res = await getFetch(fetchType.FO, '/addr/midArea');
     const data = res.data;
-    return [
-      { text: "전체", val: '0' },
-      ...data
-      .map((item: middleRegionDataType) => ({
+    return normalizeSelectData(
+      data.map((item: middleRegionDataType) => ({
         text: item.mdmbsn || '',
         val: String(item.rvbsnCd) || ''
-      }))
-    ];
+      })),
+      { text: "전체", val: '0' }
+    );
   } catch (error) {
     console.error('중권역 데이터를 가져오는데 실패했습니다:', error);
     return selectMiddleRegionData;
@@ -292,14 +304,13 @@ const fetchUnitWaterShedData = async (): Promise<SelectDataType[]> => {
   try {
     const res = await getFetch(fetchType.FO, '/addr/largeArea');
     const data = res.data;
-    return [
-      { text: "전체", val: '0' },
-      ...data
-      .map((item: unitWaterShedDataType) => ({
+    return normalizeSelectData(
+      data.map((item: unitWaterShedDataType) => ({
         text: item.lgbsn || '',
         val: String(item.rvbsnCd) || ''
-      }))
-    ];
+      })),
+      { text: "전체", val: '0' }
+    );
   } catch (error) {
     console.error('단위유역 데이터를 가져오는데 실패했습니다:', error);
     return selectUnitWaterShedData;
@@ -311,15 +322,14 @@ const fetchEnvPartData = async (): Promise<envPartSelectDataType[]> => {
   try {
     const res = await getFetch(fetchType.FO, '/addr/govArea');
     const data = res.data;
-    selectEnvPartData = [
-      { text: "전체", val: '0', adstDliStrCd: '' },
-      ...data
-      .map((item: envPartDataType) => ({
+    selectEnvPartData = normalizeSelectData(
+      data.map((item: envPartDataType) => ({
         text: item.lclgvrnmntNm || '',
         val: String(item.lclgvrnmntCd) || '',
         adstDliStrCd: item.adstDliStrCd || ''
-      }))
-    ];
+      })),
+      { text: "전체", val: '0', adstDliStrCd: '' }
+    );
     return selectEnvPartData;
   } catch (error) {
     console.error('환경청 데이터를 가져오는데 실패했습니다:', error);

apps/dm/app/store/sdmMng/index.tsx

@@ -134,22 +134,23 @@ export type SupplyCandidate = {
 
 
 export type DemandMatchings = {
-  splyFcltFk: string | '';
-  splyFcltFlg: string | '';
-  pbnstRuseFcltBizFk: number | '';
-  splyBgngDay: string | '';
-  splyEndDay: string | '';
-  splyCpct: number | '';
-  splyFmYn: string | '';
-  useUsgCd: string | '';
-  dmdInfoSn: number | '';
-  splyCndtList: string | '';
-  mtchnCmptnYmd: string | '';
-  rvwCmptnYmd: string | '';
-  regDt: string | '';
-  rgtr: string | '';
-  mdfcnDt: string | '';
-  mdfr: string | '';
+  splyFcltFk: string | ''; // 공급시설 외래키
+  splyFcltFlg: string | ''; // 공급시설 진행상태
+  pbnstRuseFcltBizFk: number | ''; // 공공하수 재이용시설 사업 외래키
+  splyBgngDay: string | ''; // 공급시작일
+  splyEndDay: string | ''; // 공급종료일
+  splyCpct: number | ''; // 계약 공급량
+  splyFmYn: string | ''; // 공급 유량계 유무
+  useUsgCd: string | ''; // 사용용도 코드
+  dmdInfoSn: number | ''; // 수요정보 일련번호
+  ruseUtztnFcltNm?: string | ''; // 재이용시설명
+  splyCndtList: string | ''; // 공급 후보지 목록
+  mtchnCmptnYmd: string | ''; // 매칭 완료일자
+  rvwCmptnYmd: string | ''; // 검토 완료일자
+  regDt: string | ''; // 등록일시
+  rgtr: string | ''; // 등록자
+  mdfcnDt: string | ''; // 수정일시
+  mdfr: string | ''; // 수정자
 }
 
 // 유사사례
@@ -503,6 +504,14 @@ const postSdmData = async (data: DemandCompType) => {
 // 수요정보 등록
 const postSdmInfoData = async (data: SdmInfoFormData): Promise<boolean> => {
   try {
+    const activeDemand = data.dmdInfoId
+      ? await getSdmInfoStatusList(data.dmdInfoId)
+      : null;
+    if (!activeDemand?.dmdInfoId) {
+      sessionStorage.removeItem("user");
+      alert('사용 중지되었거나 등록되지 않은 수요처입니다. 다시 로그인해 주세요.');
+      return false;
+    }
     await postFetch("/reuseFc/request/demandInfo", data);
     alert('수요 정보 등록에 성공하였습니다.');
     return true;
@@ -516,6 +525,14 @@ const postSdmInfoData = async (data: SdmInfoFormData): Promise<boolean> => {
 // 수요정보 수정
 const fetchUpdateSdmInfoData = async (data: SdmInfoFormData): Promise<boolean> => {
   try {
+    const activeDemand = data.dmdInfoId
+      ? await getSdmInfoStatusList(data.dmdInfoId)
+      : null;
+    if (!activeDemand?.dmdInfoId) {
+      sessionStorage.removeItem("user");
+      alert('사용 중지되었거나 등록되지 않은 수요처입니다. 다시 로그인해 주세요.');
+      return false;
+    }
     await postFetch("/reuseFc/request/updateDemandInfo", data);
     alert('수요 정보 수정에 성공하였습니다.');
     return true;
@@ -584,14 +601,19 @@ const getDemandCompList = async (searchText: string, pageCnt: number) => {
   }
 }
 
-const getSdmInfoStatusList = async (dmdInfoId: string) => {
+type DemandStatusResponse = DemandCompType & {
+  demandInfo?: DemandCompBizType[];
+  demandMatchings?: DemandMatchings[];
+};
+
+const getSdmInfoStatusList = async (dmdInfoId: string): Promise<DemandStatusResponse | null> => {
   try {
     const url = '/reuseFc/request/' + dmdInfoId + '?infoListYn=Y';
     const res = await getFetch(fetchType.WR, url);
-    return res?.data || [];
+    return res?.data ?? null;
   } catch (error) {
     console.error(error + ' 수요정보 신청현황을 불러오지 못했습니다.');
-    return [];
+    return null;
   }
 }
 
@@ -620,7 +642,7 @@ export type SdmActions = {
   updateSdmInfoData: (data: SdmInfoFormData) => Promise<boolean>;
   getDemandCompList: (searchText: string, pageCnt: number) => Promise<void>;
   actionLogin: (data: DemandCompType) => Promise<boolean>;
-  getSdmInfoStatusList: (dmdInfoId: string) => Promise<void>;
+  getSdmInfoStatusList: (dmdInfoId: string) => Promise<boolean>;
   getSimilarCaseList: (part: string, value: number | string) => Promise<void>;
   actionLogout: () => Promise<void>;
 
@@ -736,19 +758,25 @@ export const SdmReducer = (set: any): SdmActions => {
     getSdmInfoStatusList: async (dmdInfoId: string) => {
       const res = await getSdmInfoStatusList(dmdInfoId);
 
-      if (res.length === 0) {
+      if (!res?.dmdInfoId) {
+        sessionStorage.removeItem("user");
         set((state: SdmType) => ({
           Sdm: {
             ...state.Sdm,
             sdmInfoStatusList: [],
+            successLogin: false,
+            loginUser: null,
           }
         }))
-        return;
+        toast.error("사용 중지되었거나 등록되지 않은 수요처입니다.");
+        return false;
       }
       //const sdmInfoStatusList : DemandCompBizType[] = [];
 
-      const sdmInfoStatusList: DemandCompBizType[] = res.demandInfo.map((el: DemandCompBizType, index: number) => {
-        const matchingInfo = res.demandMatchings.find((matching: DemandMatchings) => matching.dmdInfoSn === el.dmdInfoSn);
+      const demandInfo = Array.isArray(res.demandInfo) ? res.demandInfo : [];
+      const demandMatchings = Array.isArray(res.demandMatchings) ? res.demandMatchings : [];
+      const sdmInfoStatusList: DemandCompBizType[] = demandInfo.map((el: DemandCompBizType, index: number) => {
+        const matchingInfo = demandMatchings.find((matching: DemandMatchings) => matching.dmdInfoSn === el.dmdInfoSn);
         const status = matchingInfo?.splyFcltFlg?.trim() === 'Sub' ? '검토' : matchingInfo?.splyFcltFlg?.trim() === 'matched' ? '매칭완료' : '신청';
         const ruseUtztnFcltNm = matchingInfo?.ruseUtztnFcltNm ? matchingInfo.ruseUtztnFcltNm : '';
 
@@ -781,6 +809,7 @@ export const SdmReducer = (set: any): SdmActions => {
           sdmInfoStatusList: sdmInfoStatusList,
         }
       }))
+      return true;
     },
 
     actionLogin: async (data: DemandCompType): Promise<boolean> => {

apps/fo/.env.local

@@ -8,8 +8,10 @@ NEXT_PUBLIC_PROXY_HOST = http://localhost:3000
 NEXT_PUBLIC_SUB_DOMAIN = http://localhost:13000
 #NEXT_PUBLIC_CM_LOGIN_PAGE_URL = http://localhost:3001/auth/login
 SERVER_API_URL = http://con.mind-one.co.kr:11083/operation-service/api/v1
-FO_SERVER_API_URL = http://con.mind-one.co.kr:11083/operation-service/api/v1
-WR_SERVER_API_URL = http://con.mind-one.co.kr:11083/reuse-service/api/v1
+# FO_SERVER_API_URL = http://con.mind-one.co.kr:11083/operation-service/api/v1
+FO_SERVER_API_URL = http://localhost:3000/operation-service/api/v1
+# WR_SERVER_API_URL = http://con.mind-one.co.kr:11083/reuse-service/api/v1
+WR_SERVER_API_URL = http://localhost:3000/reuse-service/api/v1
 CS_SERVER_API_URL = http://dev.onasys.co.kr:8000
 NEXT_PUBLIC_GEOSERVER_URL = https://hasudo.geo.rsonesoft.com/geoserver
 NEXT_PUBLIC_LX_GEOSERVER_URL = http://con.mind-one.co.kr:11306/geoserver

apps/fo/app/store/common/index.tsx

@@ -237,6 +237,26 @@ export const COD_YEAR = 2021;
  * STORE - API
  */
 
+/** API 선택 목록을 값 기준으로 정규화하고 프런트 표준 전체 항목을 한 번만 추가한다. */
+const normalizeSelectData = (items: SelectDataType[]): SelectDataType[] => {
+  const uniqueItems = new Map<string, SelectDataType>();
+
+  items.forEach((item) => {
+    const val = String(item.val ?? '').trim();
+    if (!val || val === '0' || uniqueItems.has(val)) return;
+
+    uniqueItems.set(val, {
+      ...item,
+      val,
+    });
+  });
+
+  return [
+    { text: '전체', val: '0' },
+    ...uniqueItems.values(),
+  ];
+};
+
 // 처리시설 계획정보 호출 (알에스원)
 export const planInfoUrl = '/dc-service/api/v1/nowDmgMtncGnsvy';
 
@@ -263,13 +283,12 @@ const fetchSidoData = async (): Promise<SelectDataType[]> => {
   try {
     const res = await getFetch('fo', '/addr/city');
     const data = res.data;
-    selectSidoData = [
-      { text: "전체", val: '0' },
-      ...data.map((item: sidoDataType) => ({
+    selectSidoData = normalizeSelectData(
+      data.map((item: sidoDataType) => ({
         text: item.sido || '',
         val: String(item.adstDstrCd) || ''
-      }))
-    ];
+      })),
+    );
     return selectSidoData;
   } catch (error) {
     console.error('시도 데이터를 가져오는데 실패했습니다:', error);
@@ -282,14 +301,12 @@ const fetchSigunData = async (): Promise<SelectDataType[]> => {
   try {
     const res = await getFetch('fo', '/addr/sgg');
     const data = res.data;
-    selectSigunData = [
-      { text: "전체", val: '0' },
-      ...data
-        .map((item: sigunDataType) => ({
-          text: item.gugun || '',
-          val: String(item.adstDstrCd) || ''
-        }))
-    ];
+    selectSigunData = normalizeSelectData(
+      data.map((item: sigunDataType) => ({
+        text: item.gugun || '',
+        val: String(item.adstDstrCd) || ''
+      })),
+    );
     return selectSigunData;
   } catch (error) {
     console.error('시군구 데이터를 가져오는데 실패했습니다:', error);
@@ -302,13 +319,12 @@ const fetchRegionData = async (): Promise<SelectDataType[]> => {
   try {
     const res = await getFetch('fo', '/addr/sarea');
     const data = res.data;
-    return [
-      { text: "전체", val: '0' },
-      ...data.map((item: regionDataType) => ({
+    return normalizeSelectData(
+      data.map((item: regionDataType) => ({
         text: item.rvbsn || '',
         val: String(item.rvbsnCd) || ''
-      }))
-    ];
+      })),
+    );
   } catch (error) {
     console.error('권역 데이터를 가져오는데 실패했습니다:', error);
     return selectRegionData;

apps/sn/AGENTS.md

@@ -6,6 +6,39 @@
 현재 목표는 리팩토링 전용 작업이 아니라, 하수관로 운영관리 시스템 2차사업 고도화를 수행하는 것이다.
 즉, 기존 `sn` 화면과 흐름을 안정적으로 유지하면서 2차 요구사항에 해당하는 화면 개발, 기능 확장, 백엔드 연동 보완을 수행해야 한다.
 
+## 사용자 작업 범위: UI/UX 및 퍼블리싱
+
+현재 사용자와 진행하는 작업의 기본 범위는 UI/UX 및 프론트엔드 퍼블리싱으로 제한한다.
+사용자가 별도로 명시하지 않는 한 아래 기준을 모든 후속 작업에 적용한다.
+
+### 허용 범위
+
+- 화면 레이아웃과 시각적 위계 조정
+- JSX 마크업, Tailwind CSS, CSS 스타일 수정
+- 색상, 여백, 간격, 크기, 타이포그래피, 아이콘, 테두리, 배경 조정
+- 반응형 화면, 접근성, 포커스와 시각적 상태 개선
+- 표시 전용 컴포넌트 구성과 퍼블리싱 품질 개선
+- 기존 화면 내용과 동작을 유지하는 범위의 UI 구조 정리
+
+### 기본 금지 범위
+
+- 백엔드 코드, API 계약, 요청·응답 데이터 구조 변경
+- `.env*`, middleware, 프록시, 인증과 권한 설정 변경
+- 업무 로직, 상태 모델, 데이터 가공 및 저장 흐름 변경
+- 데이터베이스, 서버 프로세스와 배포 설정 변경
+- 패키지 설치·업데이트와 의존성 구조 변경
+- 사용자 요청 없이 화면의 문구, 데이터 항목, 기능 동작 변경
+
+금지 범위의 변경이 필요해 보이면 직접 수정하지 않고 원인과 필요한 작업만 사용자에게 설명한다.
+
+### UI 검증 안전 기준
+
+- 사용자가 실행한 개발 서버가 있는지 실제 앱 포트까지 먼저 확인한다.
+- 개발 서버 실행 중에는 같은 앱의 `next build`를 실행하지 않는다.
+- UI 작업의 기본 검증은 실행 중인 개발 서버의 HMR, 브라우저 화면 확인, `git diff --check`로 제한한다.
+- 개발 서버 종료, `.next` 정리, 전체 빌드와 프로세스 재시작은 사용자가 명시적으로 승인한 경우에만 수행한다.
+- UI 변경 전후에 기존 문구, 데이터, 이벤트와 업무 동작이 유지되는지 확인한다.
+
 ---
 
 ## 공통 시작 기준
@@ -195,6 +228,8 @@ VSCode나 별도 터미널에서 `sn` Next 개발 서버가 실행 중이면 `ne
 
 ### 프론트엔드 실행 프로세스 관리
 
+- 모든 세션·역할·문서/검증 섹션에 공통 D:/workspace/AGENTS.md의 테스트 임시 파일·결과 파일 정리 기준을 적용한다. 일회성 검증 스크립트·캡처·Network/서버 로그·원시 결과 파일은 최종 보고서에 요약 후 삭제한다. 정식 회귀 테스트·최종 산출물·사용자 원본/복구 백업은 유지한다. 사용자 dev server가 쓰는 .next·공유 캐시·node_modules는 임시 검증물이라는 이유로 포괄 삭제하지 않는다.
+
 - Codex 에이전트가 작업 또는 검증을 위해 직접 기동한 `next dev`, `dev:sn`, Turborepo dev와 기타 프론트엔드 장시간 실행 프로세스는 작업 종료 전에 반드시 종료한다.
 - 셸, 백그라운드, 숨김 창 등 VSCode 밖에서 에이전트가 기동한 프로세스도 종료 대상이다.
 - 사용자가 VSCode 또는 별도 터미널에서 직접 실행한 프론트엔드 개발 서버는 임의로 종료·재시작·교체하지 않는다. 종료가 필요하면 먼저 사용자에게 확인한다.

apps/sn/app/(map-layout)/map/components/InputSection.tsx

@@ -1,3 +1,4 @@
+/** 시설 상세정보 화면의 운영정보 입력 영역을 공통 형식으로 표시한다. */
 import {
   Table,
   TableHeader,

apps/sn/app/(map-layout)/map/components/agedPipe/AgedPipeLayerSettingPanel.tsx

@@ -1,3 +1,7 @@
+/**
+ * 화면명: 노후관로 레이어 설정
+ * 사업차수와 구조적·운영적 상태등급별 지도 표시 조건을 설정한다.
+ */
 "use client";
 
 import { useEffect, useState } from "react";
@@ -54,23 +58,18 @@ export default function AgedPipeLayerSettingPanel({
   };
 
   const inputClass =
-    "h-[20px] !rounded border border-input bg-background px-[1px] text-center text-[1.1rem] leading-none text-foreground";
-  const numberInputClass = inputClass + " w-[40px]";
+    "h-[26px] !rounded border border-input bg-background px-2 py-0 text-center text-[12px] leading-none text-foreground";
+  const numberInputClass = inputClass + " min-w-0 flex-1";
   const applyButtonClass =
-    "grid h-[16px] w-[16px] shrink-0 place-items-center rounded-full bg-primary text-[0.85rem] font-bold leading-none text-primary-foreground";
-  const indicator = (
-    <span className="h-2 w-2 shrink-0 rounded-full bg-primary" />
-  );
-
+    "h-[26px] shrink-0 rounded border border-[#A9C5E5] bg-[#EDF4FC] px-2 py-0 text-[12px] font-medium leading-none text-[#2463A6]";
   const settingRow = (
-    <div className="flex min-h-[26px] items-center gap-1 whitespace-nowrap text-[1.15rem] font-medium text-label">
-      <div className="flex min-w-0 items-center gap-1">
-        {indicator}
+    <div className="flex min-h-[26px] flex-col items-stretch gap-1.5 whitespace-nowrap text-[1.15rem] font-medium text-label">
+      <div className="flex min-w-0 items-center">
         <label htmlFor="aged-pipe-elapsed-years" className="shrink-0">
           노후관로 경과년도(년)
         </label>
       </div>
-      <div className="ml-auto flex shrink-0 items-center gap-1">
+      <div className="flex w-full items-center gap-1">
         <input
           id="aged-pipe-elapsed-years"
           className={numberInputClass}
@@ -95,7 +94,7 @@ export default function AgedPipeLayerSettingPanel({
           title="적용"
           aria-label="경과년도 적용"
         >
-          <span className="relative left-[1px]">✓</span>
+          확인
         </button>
       </div>
     </div>

apps/sn/app/(map-layout)/map/components/agedPipe/AgedPipePopupPage.tsx

@@ -1,3 +1,7 @@
+/**
+ * 화면명: 노후관로 목록
+ * 노후관로를 검색하고 목록·엑셀 다운로드·지도 위치 확인 기능을 제공한다.
+ */
 "use client";
 
 import { useCallback, useEffect, useMemo, useState } from "react";
@@ -57,7 +61,7 @@ export default function AgedPipePopupPage() {
   const sggOptions = useMemo(
     () =>
       filters.ctpvCd === "0"
-        ? sgg
+        ? []
         : sgg.filter((item) =>
             String(item.val).startsWith(filters.ctpvCd.slice(0, 2)),
           ),

apps/sn/app/(map-layout)/map/components/agedPipe/agedPipeExport.ts

@@ -1,3 +1,4 @@
+/** 노후관로 목록의 엑셀 다운로드 데이터와 서식을 생성한다. */
 "use client";
 
 import { postBlobData } from "@/components/lib/api";

apps/sn/app/(map-layout)/map/components/agedPipe/agedPipeUtils.ts

@@ -1,3 +1,4 @@
+/** 노후관로 검색 조건, 표시값 변환 및 지도 연계 유틸을 제공한다. */
 "use client";
 
 import type { SelectDataType } from "@common/business_components";

apps/sn/app/(map-layout)/map/components/agedPipeStatusByCtpv/AgedPipeStatusByCtpvPopupPage.tsx

@@ -1,15 +1,29 @@
+/**
+ * 화면명: 시도별 노후관로현황
+ * 기준연도별 시도 단위 노후관로 현황을 조회하고 엑셀로 내려받는다.
+ */
 "use client";
 
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { Button, Input } from "@common/components";
-import { StandardPopupLayout } from "@common/business_components";
+import {
+  getStandardRowNumber,
+  StandardDataTable,
+  StandardPopupLayout,
+} from "@common/business_components";
+import {
+  getCoreRowModel,
+  getPaginationRowModel,
+  useReactTable,
+  type ColumnDef,
+  type PaginationState,
+} from "@tanstack/react-table";
 import { getRawJson } from "@/components/lib/api";
 import LoadingOverlay from "@/components/ui/LoadingBar";
 import { useAlertStore } from "@/shared/lib";
 import { windowPopupDefinitions } from "@/features/windowPopup/model/popupDefinitions";
 import {
   AGED_PIPE_STATUS_BY_CTPV_DEFAULT_ELAPSED_YEARS,
-  buildAgedPipeStatusByCtpvHeadList,
   buildAgedPipeStatusYearOptions,
   getAgedPipeStatusByCtpvValidationMessage,
   normalizeAgedPipeStatusByCtpvResponse,
@@ -20,7 +34,6 @@ import {
   type AgedPipeStatusByCtpvRow,
 } from "./agedPipeStatusByCtpvUtils";
 import { downloadAgedPipeStatusByCtpvExcel } from "./agedPipeStatusByCtpvExport";
-import MapPopupDataTable from "@/features/windowPopup/ui/MapPopupDataTable";
 import PopupSearchPanel from "@/features/windowPopup/ui/PopupSearchPanel";
 
 // CS 목록과 동일하게 한 페이지에는 최대 10개 시도만 표시한다.
@@ -52,22 +65,57 @@ export default function AgedPipeStatusByCtpvPopupPage() {
   const [currentPage, setCurrentPage] = useState(1);
 
   const yearOptions = useMemo(() => buildAgedPipeStatusYearOptions(), []);
-  const headList = useMemo(
+  const columns = useMemo<ColumnDef<AgedPipeStatusByCtpvRow>[]>(
     () => [
-      { id: "rowNumber", title: "순번", widthPercent: 7 },
-      ...buildAgedPipeStatusByCtpvHeadList(years),
+      {
+        id: "rowNumber",
+        header: "순번",
+        cell: ({ row }) =>
+          getStandardRowNumber({
+            total: rows.length,
+            rowIndex: row.index,
+          }),
+      },
+      { accessorKey: "ctpvNm", header: "시도" },
+      ...years.map((year) => ({
+        id: `year_${year}`,
+        header: `${year}년`,
+        columns: [
+          {
+            accessorKey: `year${year}TotalLengthKm`,
+            header: "전체관로연장(km)",
+          },
+          {
+            accessorKey: `year${year}AgedLengthKm`,
+            header: "노후관로연장(km)",
+          },
+          {
+            accessorKey: `year${year}AgedRate`,
+            header: "노후화율(%)",
+          },
+        ],
+      })),
     ],
-    [years],
-  );
-  const pageRows = useMemo(
-    () =>
-      rows.slice(
-        (currentPage - 1) * AGED_PIPE_STATUS_PAGE_SIZE,
-        currentPage * AGED_PIPE_STATUS_PAGE_SIZE,
-      ),
-    [currentPage, rows],
+    [rows.length, years],
   );
 
+  const pagination: PaginationState = {
+    pageIndex: currentPage - 1,
+    pageSize: AGED_PIPE_STATUS_PAGE_SIZE,
+  };
+  const table = useReactTable({
+    data: rows,
+    columns,
+    state: { pagination },
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onPaginationChange: (updater) => {
+      const next =
+        typeof updater === "function" ? updater(pagination) : updater;
+      setCurrentPage(next.pageIndex + 1);
+    },
+  });
+
   const loadRows = useCallback(
     async (nextFilters: AgedPipeStatusByCtpvFilters) => {
       setIsLoading(true);
@@ -79,7 +127,7 @@ export default function AgedPipeStatusByCtpvPopupPage() {
           elapsedYears: String(normalized.elapsedYears),
         });
         const rawResponse = await getRawJson(
-          `v1/swagePpl/aged-status-by-ctpv?${queryParams.toString()}`,
+          `v1/swagePpl/agedStatusByCtpv?${queryParams.toString()}`,
         );
         const response = normalizeAgedPipeStatusByCtpvResponse(
           rawResponse,
@@ -249,23 +297,18 @@ export default function AgedPipeStatusByCtpvPopupPage() {
         </div>
       </PopupSearchPanel>
 
-      <MapPopupDataTable
-        rows={
-          pageRows as Array<AgedPipeStatusByCtpvRow & Record<string, unknown>>
-        }
-        headlist={headList}
+      <StandardDataTable
+        table={table}
+        className="!w-full !max-w-full"
         title="시도별 노후관로 목록"
-        total={rows.length}
-        page={currentPage}
-        pageSize={AGED_PIPE_STATUS_PAGE_SIZE}
-        onPageChange={setCurrentPage}
-        scrollMode={years.length > 2 ? "horizontal" : "none"}
-        minTableWidth={years.length > 2 ? "120rem" : "100%"}
+        scrollMode="horizontal"
+        minTableWidth={years.length > 0 ? "120rem" : "100%"}
         actions={
           <Button type="button" onClick={handleDownload}>
             엑셀다운로드
           </Button>
         }
+        flushOuterMargin
       />
     </StandardPopupLayout>
   );

apps/sn/app/(map-layout)/map/components/agedPipeStatusByCtpv/agedPipeStatusByCtpvExport.ts

@@ -1,32 +1,81 @@
+/** 시도별 노후관로 현황의 연도 그룹형 엑셀 데이터를 생성한다. */
 "use client";
 
-import { postBlobData } from "@/components/lib/api";
-import { fileDownload } from "@/components/lib/utils/fileDownload";
+import * as XLSX from "xlsx";
+import { getRawJson } from "@/components/lib/api";
 import {
   getAgedPipeStatusByCtpvValidationMessage,
   normalizeAgedPipeStatusByCtpvFilters,
   type AgedPipeStatusByCtpvFilters,
+  type AgedPipeStatusByCtpvResponse,
 } from "./agedPipeStatusByCtpvUtils";
 
-/** 시도별 노후관로현황 XLSX 다운로드를 요청한다. */
+/** 적용조건의 시도별 노후관로현황 전체를 조회해 연도 그룹 Excel로 생성한다. */
 export const downloadAgedPipeStatusByCtpvExcel = async (
   filters: AgedPipeStatusByCtpvFilters,
 ) => {
   const validationMessage = getAgedPipeStatusByCtpvValidationMessage(filters);
   if (validationMessage) throw new Error(validationMessage);
-
-  const normalizedFilters = normalizeAgedPipeStatusByCtpvFilters(filters);
-  const { blob, fileName } = await postBlobData(
-    "v1/swagePpl/aged-status-by-ctpv/exportJobs/download",
-    {
-      startYear: normalizedFilters.startYear,
-      endYear: normalizedFilters.endYear,
-      elapsedYears: normalizedFilters.elapsedYears,
-      format: "xlsx",
-    },
+  const normalized = normalizeAgedPipeStatusByCtpvFilters(filters);
+  const params = new URLSearchParams({
+    startYear: String(normalized.startYear),
+    endYear: String(normalized.endYear),
+    elapsedYears: String(normalized.elapsedYears),
+  });
+  const response: any = await getRawJson(
+    `v1/swagePpl/agedStatusByCtpv?${params.toString()}`,
   );
+  const payload = (response?.data ?? response) as AgedPipeStatusByCtpvResponse;
+  const years = Array.isArray(payload?.years)
+    ? payload.years.map(Number).filter(Number.isFinite)
+    : [];
+  const rows = Array.isArray(payload?.rows) ? payload.rows : [];
+  if (rows.length === 0) throw new Error("다운로드할 데이터가 없습니다.");
 
-  const resolvedFileName = fileName || "시도별_노후관로현황.xlsx";
-  fileDownload(blob, resolvedFileName);
-  return resolvedFileName;
+  const headers = ["순번", "시도"];
+  years.forEach((year) => headers.push(`${year}년`, "", ""));
+  const subHeaders = ["", ""];
+  years.forEach(() =>
+    subHeaders.push("전체관로연장(km)", "노후관로연장(km)", "노후화율(%)"),
+  );
+  const data = rows.map((row, rowIndex) => {
+    const statsByYear = new Map(
+      (row.yearStats ?? []).map((stat) => [Number(stat.year), stat]),
+    );
+    const values: Array<string | number> = [rowIndex + 1, row.ctpvNm || "-"];
+    years.forEach((year) => {
+      const stat = statsByYear.get(year);
+      values.push(
+        stat ? Number(stat.totalLengthKm ?? 0) : "-",
+        stat ? Number(stat.agedLengthKm ?? 0) : "-",
+        stat ? Number(stat.agedRate ?? 0) : "-",
+      );
+    });
+    return values;
+  });
+
+  const worksheet = XLSX.utils.aoa_to_sheet([headers, subHeaders, ...data]);
+  worksheet["!merges"] = [
+    { s: { r: 0, c: 0 }, e: { r: 1, c: 0 } },
+    { s: { r: 0, c: 1 }, e: { r: 1, c: 1 } },
+    ...years.map((_, index) => ({
+      s: { r: 0, c: 2 + index * 3 },
+      e: { r: 0, c: 4 + index * 3 },
+    })),
+  ];
+  worksheet["!cols"] = [
+    { wch: 8 },
+    { wch: 18 },
+    ...years.flatMap(() => [{ wch: 18 }, { wch: 18 }, { wch: 14 }]),
+  ];
+  worksheet["!autofilter"] = {
+    ref: `A2:${XLSX.utils.encode_col(headers.length - 1)}${data.length + 2}`,
+  };
+  const workbook = XLSX.utils.book_new();
+  XLSX.utils.book_append_sheet(workbook, worksheet, "시도별 노후관로현황");
+  XLSX.writeFile(workbook, "시도별_노후관로현황.xlsx", {
+    bookType: "xlsx",
+    compression: true,
+    cellStyles: true,
+  });
 };

apps/sn/app/(map-layout)/map/components/agedPipeStatusByCtpv/agedPipeStatusByCtpvUtils.ts

@@ -1,3 +1,4 @@
+/** 시도별 노후관로 현황의 조회 연도와 그룹 컬럼을 구성한다. */
 "use client";
 
 import type { UiHeadProps } from "@common/business_components/ui";
@@ -65,16 +66,16 @@ export const normalizeAgedPipeStatusByCtpvFilters = (
   filters: Partial<AgedPipeStatusByCtpvFilters>,
 ): AgedPipeStatusByCtpvFilters => {
   const currentYear = new Date().getFullYear();
-  let startYear = Math.trunc(Number(filters.startYear ?? currentYear));
-  let endYear = Math.trunc(Number(filters.endYear ?? startYear));
+  let startYear = Math.trunc(Number(filters.startYear ?? currentYear - 2));
+  let endYear = Math.trunc(Number(filters.endYear ?? currentYear));
   let elapsedYears = Math.trunc(
     Number(
       filters.elapsedYears ?? AGED_PIPE_STATUS_BY_CTPV_DEFAULT_ELAPSED_YEARS,
     ),
   );
 
-  if (!Number.isFinite(startYear)) startYear = currentYear;
-  if (!Number.isFinite(endYear)) endYear = startYear;
+  if (!Number.isFinite(startYear)) startYear = currentYear - 2;
+  if (!Number.isFinite(endYear)) endYear = currentYear;
   if (
     !Number.isFinite(elapsedYears) ||
     elapsedYears < 1 ||

apps/sn/app/(map-layout)/map/components/analysisMenu/AnalysisPopupMenu.tsx

@@ -1,9 +1,13 @@
+/**
+ * 화면명: 분석도구 메뉴
+ * 지도에서 실행할 분석·현황 팝업 메뉴를 펼치고 선택한다.
+ */
 "use client";
 
-import { useEffect, useState, type ComponentType, type ReactNode } from "react";
+import { type ComponentType, type ReactNode,useEffect, useState } from "react";
+
 import {
   ChartColumnBig,
-  ChevronDown,
   ChevronUp,
   PanelsTopLeft,
   PencilRuler,
@@ -12,13 +16,15 @@ import {
   TriangleAlert,
   Waves,
 } from "lucide-react";
-import { getRawJson } from "@/components/lib/api";
+
 import { createPredictionAnalysisTimeRange } from "@/features/fldngPredcPrst/model/analysisTimeRange";
 import {
   windowPopupDefinitions,
   type WindowPopupKey,
 } from "@/features/windowPopup/model/popupDefinitions";
 
+import { getRawJson } from "@/components/lib/api";
+
 type Props = {
   onOpenPopup: (popupKey: WindowPopupKey) => Window | null;
   onOpenInfoSearch: () => void;
@@ -32,10 +38,10 @@ type MenuIconProps = {
   isActive: boolean;
 };
 
-const InftwtMenuIcon = ({ isActive }: MenuIconProps) => (
+const InftwtMenuIcon = () => (
   <svg
     viewBox="0 0 24 24"
-    className={`h-[15px] w-[15px] shrink-0 ${isActive ? "text-primary" : "text-label"}`}
+    className="h-[15px] w-[15px] shrink-0 text-current"
     aria-hidden="true"
     fill="none"
   >
@@ -167,31 +173,44 @@ export default function AnalysisPopupMenu({
   }, [initialActiveKey]);
 
   return (
-    <div className="absolute right-[15px] top-[8px] z-[45]">
-      <div className="flex w-[154px] flex-col overflow-hidden rounded-[6px] border border-border bg-background shadow-[0_8px_18px_rgba(15,23,42,0.14)]">
-        <div className="flex h-[36px] shrink-0 items-center justify-between gap-2 border-b border-border bg-secondary pl-[10px] pr-[4px] text-[13px] font-bold text-foreground">
-          <div className="flex items-center gap-2">
-            <PanelsTopLeft className="h-4 w-4 text-primary" />
-            <span>분석도구</span>
+    <div className="pointer-events-none absolute right-[68px] top-[16px] z-[45] flex flex-col items-end gap-[8px]">
+      <button
+        type="button"
+        className={`pointer-events-auto flex h-[40px] w-[40px] shrink-0 items-center justify-center overflow-hidden rounded-[3px] p-0 shadow-[0_1px_2px_rgba(60,64,67,0.3),0_1px_3px_1px_rgba(60,64,67,0.15)] ${
+          isOpen
+            ? "bg-primary text-primary-foreground"
+            : "bg-background text-label hover:bg-primary hover:text-primary-foreground"
+        }`}
+        onClick={() => setIsOpen((value) => !value)}
+        title={isOpen ? "분석 메뉴 숨기기" : "분석도구"}
+        aria-label={isOpen ? "분석 메뉴 숨기기" : "분석 메뉴 보이기"}
+        aria-expanded={isOpen}
+        aria-controls="analysis-popup-menu"
+      >
+        <PanelsTopLeft className="h-[20px] w-[20px]" aria-hidden="true" />
+      </button>
+
+      {isOpen ? (
+        <div
+          id="analysis-popup-menu"
+          className="pointer-events-auto flex w-max min-w-[154px] flex-col overflow-hidden rounded-[6px] bg-background shadow-[0_1px_2px_rgba(60,64,67,0.3),0_1px_3px_1px_rgba(60,64,67,0.15)]"
+        >
+          <div className="flex h-[36px] shrink-0 items-center justify-between gap-2 border-b border-border bg-background pl-[10px] pr-[4px] text-[13px] font-bold text-foreground">
+            <div className="flex items-center gap-2">
+              <PanelsTopLeft className="h-4 w-4 text-primary" />
+              <span>분석도구</span>
+            </div>
+            <button
+              type="button"
+              className="flex h-[28px] w-[28px] shrink-0 items-center justify-center rounded-[4px] text-label hover:bg-accent hover:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"
+              onClick={() => setIsOpen(false)}
+              title="분석 메뉴 숨기기"
+              aria-label="분석 메뉴 숨기기"
+            >
+              <ChevronUp className="h-4 w-4" aria-hidden="true" />
+            </button>
           </div>
 
-          <button
-            type="button"
-            className="flex h-[28px] w-[28px] shrink-0 items-center justify-center rounded-[4px] text-label transition hover:bg-accent hover:text-primary"
-            onClick={() => setIsOpen((value) => !value)}
-            title={isOpen ? "분석 메뉴 숨기기" : "분석 메뉴 보이기"}
-            aria-label={isOpen ? "분석 메뉴 숨기기" : "분석 메뉴 보이기"}
-            aria-expanded={isOpen}
-          >
-            {isOpen ? (
-              <ChevronUp className="h-4 w-4" />
-            ) : (
-              <ChevronDown className="h-4 w-4" />
-            )}
-          </button>
-        </div>
-
-        {isOpen ? (
           <div className="flex flex-col gap-[3px] p-[6px]">
             {ANALYSIS_POPUP_ITEMS.map((item) => {
               const Icon = item.icon;
@@ -208,7 +227,7 @@ export default function AnalysisPopupMenu({
                 <button
                   key={item.key}
                   type="button"
-                  className={`relative flex h-[33px] items-center gap-[7px] rounded-[5px] border px-[8px] pl-[10px] text-left text-[12px] font-semibold transition ${
+                  className={`relative flex h-[33px] items-center gap-[7px] rounded-[5px] border px-[8px] pl-[10px] text-left text-[12px] font-semibold transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ${
                     isActive
                       ? "border-primary bg-secondary font-bold text-primary before:absolute before:bottom-[7px] before:left-0 before:top-[7px] before:w-[3px] before:rounded-r-[2px] before:bg-primary"
                       : "border-transparent bg-background text-foreground hover:border-border hover:bg-accent hover:text-primary"
@@ -244,19 +263,17 @@ export default function AnalysisPopupMenu({
                 >
                   {item.renderIcon ? item.renderIcon({ isActive }) : null}
                   {Icon ? (
-                    <Icon
-                      className={`h-[15px] w-[15px] shrink-0 ${
-                        isActive ? "text-primary" : "text-label"
-                      }`}
-                    />
+                    <Icon className="h-[15px] w-[15px] shrink-0 text-current" />
                   ) : null}
-                  <span className="whitespace-nowrap">{label}</span>
+                  <span className="whitespace-nowrap" title={label}>
+                    {label}
+                  </span>
                 </button>
               );
             })}
           </div>
-        ) : null}
-      </div>
+        </div>
+      ) : null}
     </div>
   );
 }

apps/sn/app/(map-layout)/map/components/common/codeMapper.ts

@@ -1,3 +1,4 @@
+/** 지도 시설 상세정보의 코드값을 업무 표시명으로 변환한다. */
 import { MS_SWAGE_PPL_USE_CODES, MS_SWAGE_PPL_CODES, MS_SWAGE_MHL_CODES, MS_SWAGE_MHL_USE_CODES, DRTW_SEWAGE_PUMP_USE_CODES } from './table';
 
 interface CodeMapperProps {
@@ -159,4 +160,4 @@ export const reverseCodeMapper = ({ layerName, data }: CodeMapperProps): any =>
 };
 
 // 기본 내보내기
-export default { codeMapper, reverseCodeMapper };
+export default { codeMapper, reverseCodeMapper };

apps/sn/app/(map-layout)/map/components/common/index.ts

@@ -1,3 +1,4 @@
+/** 선택한 지도 레이어 종류에 맞는 시설 상세 컴포넌트를 반환한다. */
 import MsSwagePpl from "../popupComponent/MsSwagePpl"; // 하수관로
 import sewagePump from "../popupComponent/sewagePump"; // 하수펌프
 import smh from "../popupComponent/smh";

apps/sn/app/(map-layout)/map/components/common/table.ts

@@ -1,3 +1,4 @@
+/** 지도 시설 상세 및 목록에서 사용하는 컬럼·코드 정의를 제공한다. */
 // 하수관로
 export const MsSwagePplCol = [
   { id: 'fclt_mng_no', title: '시설관리번호' },

apps/sn/app/(map-layout)/map/components/exmn/ExmnLayerSettingPanel.tsx

@@ -1,3 +1,7 @@
+/**
+ * 화면명: 관로조사 레이어 설정
+ * 사업차수와 조사 종류·상태등급별 지도 표시 조건을 설정한다.
+ */
 "use client";
 
 import type { ExmnMapFilters, ExmnMapJobType } from "./exmnMapTypes";
@@ -30,7 +34,7 @@ export default function ExmnLayerSettingPanel({
     });
   };
   const selectClass =
-    "h-[20px] w-[62px] rounded border border-input bg-background px-[1px] text-center text-[1.1rem] leading-none text-foreground outline-none focus:border-primary";
+    "h-[26px] w-full rounded border border-input bg-background px-2 py-0 text-center text-[12px] leading-none text-foreground outline-none focus:border-primary";
   const labelClass = "shrink-0 text-[1.15rem] font-medium text-label";
   const title = jobType === "PPL" ? "관로조사" : "맨홀조사";
 
@@ -41,8 +45,8 @@ export default function ExmnLayerSettingPanel({
       onEnabledChange={onEnabledChange}
       onClose={onClose}
     >
-      <div className="space-y-[1px]">
-        <label className="flex min-h-[24px] items-center justify-between ">
+      <div className="space-y-[6px]">
+        <label className="flex min-h-[24px] flex-col items-stretch gap-1">
           <span className={`flex items-center gap-1 ${labelClass}`}>
             <span
               className={`h-2 w-2 rounded-full ${jobType === "PPL" ? "bg-[#facc15]" : "bg-[#8b5cf6]"}`}
@@ -59,7 +63,7 @@ export default function ExmnLayerSettingPanel({
             onChange={(event) => updateFilter("bizCycl", event.target.value)}
           />
         </label>
-        <label className="flex min-h-[24px] items-center justify-between ">
+        <label className="flex min-h-[24px] flex-col items-stretch gap-1">
           <span className={labelClass}>구조적 상태등급</span>
           <select
             className={selectClass}
@@ -75,7 +79,7 @@ export default function ExmnLayerSettingPanel({
             ))}
           </select>
         </label>
-        <label className="flex min-h-[24px] items-center justify-between ">
+        <label className="flex min-h-[24px] flex-col items-stretch gap-1">
           <span className={labelClass}>운영적 상태등급</span>
           <select
             className={selectClass}

apps/sn/app/(map-layout)/map/components/exmn/ExmnSurveyResultSection.tsx

@@ -1,3 +1,7 @@
+/**
+ * 화면명: 관로조사 결과
+ * 선택 시설의 조사 결과와 상세 판정 정보를 표시한다.
+ */
 "use client";
 
 import {

apps/sn/app/(map-layout)/map/components/exmn/exmnMapApi.ts

@@ -1,3 +1,4 @@
+/** 관로조사 지도 데이터 조회 API와 응답 변환 함수를 제공한다. */
 import { getRawJson } from "../../../../components/lib/api";
 import type { ExmnMapFilters, ExmnMapJobType } from "./exmnMapTypes";
 

apps/sn/app/(map-layout)/map/components/exmn/exmnMapTypes.ts

@@ -1,3 +1,4 @@
+/** 관로조사 지도 화면에서 사용하는 타입·상수와 표시 조건을 정의한다. */
 export const EXMN_RESULT_ROOT_NODE_ID = "SN_EXMN_RESULT";
 export const EXMN_RESULT_PPL_NODE_ID = "SN_EXMN_RESULT_PPL";
 export const EXMN_RESULT_MNHL_NODE_ID = "SN_EXMN_RESULT_MNHL";

apps/sn/app/(map-layout)/map/components/fldngHstry/FldngHstryDetailPanel.tsx

@@ -1,11 +1,12 @@
+/**
+ * 화면명: 침수흔적도 상세정보
+ * 지도에서 선택한 침수흔적의 기본정보·강우정보·피해정보를 표시한다.
+ */
 "use client";
 
 import { useMemo, useState } from "react";
-import {
-  formatFloodArea,
-  formatFloodDepth,
-  type FldngHstryItem,
-} from "./fldngHstryTypes";
+import type { FldngHstryItem } from "./fldngHstryTypes";
+import { formatFldngHstryArea, formatFldngHstryDepth } from "./fldngHstryUtils";
 
 type Props = {
   detail: FldngHstryItem;
@@ -50,8 +51,8 @@ export default function FldngHstryDetailPanel({
   const yearRows = useMemo(
     () =>
       [
-        ["침수심", `${detail.floodDepthM.toFixed(2)} m`],
-        ["침수면적", formatFloodArea(detail.floodAreaHa)],
+        ["침수심", `${formatFldngHstryDepth(detail.floodDepthM)} m`],
+        ["침수면적", formatFldngHstryArea(detail.floodAreaHa)],
         ["침수년도", `${detail.floodYear}년`],
         ["등급", detail.gradeLabel],
         ["침수구역", detail.districtName],
@@ -63,7 +64,7 @@ export default function FldngHstryDetailPanel({
     () =>
       [
         ["침수재해명", detail.disasterName],
-        ["침수면적", formatFloodArea(detail.floodAreaHa)],
+        ["침수면적", formatFldngHstryArea(detail.floodAreaHa)],
         ["침수원인상세명", detail.causeDetailName],
         ["침수시작년월일", detail.startDate],
         ["침수종료년월일", detail.endDate],

apps/sn/app/(map-layout)/map/components/fldngHstry/FldngHstryFeatureClick.tsx

@@ -0,0 +1,397 @@
+/**
+ * 화면명: 침수흔적위선 연계정보
+ * 우측 정보 화면의 심선·위선 목록, 선택 상태와 화면 생명주기 캐시를 관리한다.
+ */
+"use client";
+
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type { RefObject } from "react";
+import GisApp from "@common/business_components/ui/map/lib/gis.core";
+import type Feature from "ol/Feature.js";
+import VectorSource from "ol/source/Vector.js";
+
+import { loadFldngHstryDetail } from "./fldngHstryClient";
+import {
+  FLDNG_HSTRY_DEPTH_LAYER_TYPE,
+  FLDNG_HSTRY_LAYER_TYPE,
+  type FldngHstryDetailCacheValue,
+} from "./fldngHstryTypes";
+
+type FldngHstryGisLayer = {
+  searchLayer?: { getSource?: () => VectorSource | null } | null;
+  clearSearchLayer: (option: unknown) => void;
+  ensureSearchLayer: (option: unknown) => {
+    set: (key: string, value: unknown) => void;
+    setSource: (source: VectorSource) => void;
+  };
+  showSearchResultsFromGeoJSON: (
+    layerTypeName: string,
+    featureId: string,
+  ) => void | Promise<void>;
+};
+
+type FldngHstryScrollButtonProps = {
+  targetRef: RefObject<HTMLDivElement | null>;
+  direction: -1 | 1;
+  label: string;
+  children: string;
+};
+
+const FLDNG_HSTRY_SCROLL_CLICK_DISTANCE = 120;
+const FLDNG_HSTRY_SCROLL_HOLD_DELAY = 300;
+const FLDNG_HSTRY_SCROLL_HOLD_SPEED = 4;
+
+/** 짧게 누르면 한 칸, 길게 누르면 목록을 해당 방향으로 계속 이동한다. */
+const FldngHstryScrollButton = ({
+  targetRef,
+  direction,
+  label,
+  children,
+}: FldngHstryScrollButtonProps) => {
+  const holdTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const animationFrameRef = useRef<number | null>(null);
+  const pointerClickHandledRef = useRef(false);
+
+  const stopContinuousScroll = useCallback(() => {
+    if (holdTimerRef.current !== null) {
+      clearTimeout(holdTimerRef.current);
+      holdTimerRef.current = null;
+    }
+    if (animationFrameRef.current !== null) {
+      cancelAnimationFrame(animationFrameRef.current);
+      animationFrameRef.current = null;
+    }
+  }, []);
+
+  const scrollOnce = useCallback(() => {
+    targetRef.current?.scrollBy({
+      left: direction * FLDNG_HSTRY_SCROLL_CLICK_DISTANCE,
+      behavior: "smooth",
+    });
+  }, [direction, targetRef]);
+
+  const startContinuousScroll = useCallback(() => {
+    const scroll = () => {
+      const target = targetRef.current;
+      if (!target) {
+        stopContinuousScroll();
+        return;
+      }
+      target.scrollLeft += direction * FLDNG_HSTRY_SCROLL_HOLD_SPEED;
+      animationFrameRef.current = requestAnimationFrame(scroll);
+    };
+    animationFrameRef.current = requestAnimationFrame(scroll);
+  }, [direction, stopContinuousScroll, targetRef]);
+
+  useEffect(() => stopContinuousScroll, [stopContinuousScroll]);
+
+  return (
+    <button
+      type="button"
+      aria-label={label}
+      className="shrink-0 select-none px-1 text-lg leading-none text-foreground"
+      onPointerDown={(event) => {
+        if (event.button !== 0) return;
+        stopContinuousScroll();
+        pointerClickHandledRef.current = true;
+        event.currentTarget.setPointerCapture(event.pointerId);
+        scrollOnce();
+        holdTimerRef.current = setTimeout(
+          startContinuousScroll,
+          FLDNG_HSTRY_SCROLL_HOLD_DELAY,
+        );
+      }}
+      onPointerUp={stopContinuousScroll}
+      onPointerCancel={() => {
+        stopContinuousScroll();
+        pointerClickHandledRef.current = false;
+      }}
+      onLostPointerCapture={stopContinuousScroll}
+      onClick={() => {
+        if (pointerClickHandledRef.current) {
+          pointerClickHandledRef.current = false;
+          return;
+        }
+        scrollOnce();
+      }}
+    >
+      {children}
+    </button>
+  );
+};
+
+const cloneFldngHstryFeature = (feature: Feature) => {
+  const clonedFeature = feature.clone();
+  const featureId = feature.getId();
+  if (featureId !== undefined) clonedFeature.setId(featureId);
+  return clonedFeature;
+};
+
+const displayCachedFldngHstryFeatures = (
+  gisLayer: FldngHstryGisLayer,
+  layerTypeName: string,
+  features: Feature[],
+) => {
+  const matched = Object.values(GisApp.layerCode ?? {}).find(
+    (item: any) => item?.lyrTyNm === layerTypeName,
+  ) as any;
+  if (!matched || features.length === 0) return;
+
+  gisLayer.clearSearchLayer(matched);
+  const layer = gisLayer.ensureSearchLayer(matched);
+  layer.set("gobjTy", matched.gobjTy);
+  const clonedFeatures = features.map(cloneFldngHstryFeature);
+  layer.setSource(new VectorSource({ features: clonedFeatures }));
+  (GisApp.Module.select as any)?.selectFeature(clonedFeatures[0], false);
+};
+
+const showFldngHstryFeature = async (
+  cache: Map<string, Promise<Feature[]>>,
+  gisLayer: FldngHstryGisLayer,
+  layerTypeName: string,
+  featureId: string,
+) => {
+  const cacheKey = `${layerTypeName}:${featureId}`;
+  const cachedRequest = cache.get(cacheKey);
+  if (cachedRequest) {
+    displayCachedFldngHstryFeatures(
+      gisLayer,
+      layerTypeName,
+      await cachedRequest,
+    );
+    return;
+  }
+
+  await gisLayer.showSearchResultsFromGeoJSON(layerTypeName, featureId);
+  const source = gisLayer.searchLayer?.getSource?.();
+  if (!source) return;
+
+  const featureRequest = new Promise<Feature[]>((resolve, reject) => {
+    const resolveFeatures = () => {
+      const features = source.getFeatures();
+      if (features.length > 0) {
+        resolve(features.map(cloneFldngHstryFeature));
+      } else {
+        reject(new Error("침수흔적 위치 정보가 없습니다."));
+      }
+    };
+    const rejectFeatures = () =>
+      reject(new Error("침수흔적 위치 조회에 실패했습니다."));
+
+    if (source.getFeatures().length > 0) {
+      resolveFeatures();
+      return;
+    }
+    source.once("featuresloadend", resolveFeatures);
+    source.once("featuresloaderror", rejectFeatures);
+  });
+
+  cache.set(cacheKey, featureRequest);
+  try {
+    await featureRequest;
+  } catch (error) {
+    cache.delete(cacheKey);
+    console.warn(error);
+  }
+};
+
+export const useFldngHstryFeatureClick = () => {
+  const fldngHstryDetailCacheRef = useRef(
+    new Map<string, Promise<FldngHstryDetailCacheValue>>(),
+  );
+  const fldngHstryFeatureCacheRef = useRef(
+    new Map<string, Promise<Feature[]>>(),
+  );
+  const [fldngHstryDepthRows, setFldngHstryDepthRows] = useState<
+    Record<string, unknown>[]
+  >([]);
+  const [fldngHstryWtlvRows, setFldngHstryWtlvRows] = useState<
+    Record<string, unknown>[]
+  >([]);
+  const [selectedFldngHstryDepthFid, setSelectedFldngHstryDepthFid] = useState<
+    string | null
+  >(null);
+  const [selectedFldngHstryWtlvFid, setSelectedFldngHstryWtlvFid] = useState<
+    string | null
+  >(null);
+  const fldngHstryDepthYearListRef = useRef<HTMLDivElement>(null);
+  const fldngHstryWtlvListRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const detailCache = fldngHstryDetailCacheRef.current;
+    const featureCache = fldngHstryFeatureCacheRef.current;
+    return () => {
+      detailCache.clear();
+      featureCache.clear();
+    };
+  }, []);
+
+  const resetFldngHstryFeatureClick = useCallback(() => {
+    setFldngHstryDepthRows([]);
+    setFldngHstryWtlvRows([]);
+    setSelectedFldngHstryDepthFid(null);
+    setSelectedFldngHstryWtlvFid(null);
+  }, []);
+
+  const loadFldngHstryFeatureClickDetail = useCallback(
+    async (fldngHstryFid: string) => {
+      const cacheKey = `${FLDNG_HSTRY_LAYER_TYPE}:${fldngHstryFid}`;
+      let request = fldngHstryDetailCacheRef.current.get(cacheKey);
+      if (!request) {
+        request = loadFldngHstryDetail(fldngHstryFid);
+        fldngHstryDetailCacheRef.current.set(cacheKey, request);
+      }
+
+      const detail = await request;
+      if (!detail.complete) fldngHstryDetailCacheRef.current.delete(cacheKey);
+      setFldngHstryDepthRows(detail.fldngHstryDepthRows);
+      setFldngHstryWtlvRows(detail.fldngHstryWtlvRows);
+      setSelectedFldngHstryDepthFid(null);
+      setSelectedFldngHstryWtlvFid(null);
+      return detail;
+    },
+    [],
+  );
+
+  const headName = useMemo(
+    () => (
+      <div className="flex w-full min-w-0 flex-col items-start gap-2">
+        <span>기본정보</span>
+        {fldngHstryDepthRows.length > 0 && (
+          <div className="flex w-full items-center gap-1">
+            <span className="w-9 shrink-0 text-[1.1rem] font-semibold">
+              심선
+            </span>
+            <FldngHstryScrollButton
+              targetRef={fldngHstryDepthYearListRef}
+              direction={-1}
+              label="이전 연도"
+            >
+              ‹
+            </FldngHstryScrollButton>
+            <div
+              ref={fldngHstryDepthYearListRef}
+              className="flex min-w-0 flex-1 gap-2 overflow-x-auto whitespace-nowrap [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+            >
+              {[...fldngHstryDepthRows]
+                .map((row, index) => ({
+                  row,
+                  index,
+                  year: String(
+                    row.fldng_yr ?? row.fldngYr ?? row.yr ?? "",
+                  ).trim(),
+                }))
+                .filter(({ year }) => Boolean(year))
+                .sort((left, right) => {
+                  const yearOrder = left.year.localeCompare(
+                    right.year,
+                    undefined,
+                    { numeric: true },
+                  );
+                  return yearOrder !== 0 ? yearOrder : left.index - right.index;
+                })
+                .map(({ row, index, year }) => {
+                  const depthFid = String(
+                    row.fldng_dpth_map_sn ?? row.fid ?? "",
+                  ).trim();
+                  return (
+                    <button
+                      key={`${depthFid || "row"}-${index}`}
+                      type="button"
+                      onClick={async () => {
+                        if (!depthFid) return;
+                        setSelectedFldngHstryDepthFid(depthFid);
+                        setSelectedFldngHstryWtlvFid(null);
+                        await showFldngHstryFeature(
+                          fldngHstryFeatureCacheRef.current,
+                          GisApp.Module.layer as any,
+                          FLDNG_HSTRY_DEPTH_LAYER_TYPE,
+                          `${FLDNG_HSTRY_DEPTH_LAYER_TYPE}.${depthFid.replace(new RegExp(`^${FLDNG_HSTRY_DEPTH_LAYER_TYPE}\\.`), "")}`,
+                        );
+                      }}
+                      className={`shrink-0 rounded border px-3 py-1 text-[1.2rem] font-medium leading-5 ${selectedFldngHstryDepthFid === depthFid ? "border-blue-600 bg-white text-blue-700" : "border-border bg-muted text-muted-foreground"}`}
+                    >
+                      {year}년
+                    </button>
+                  );
+                })}
+            </div>
+            <FldngHstryScrollButton
+              targetRef={fldngHstryDepthYearListRef}
+              direction={1}
+              label="다음 연도"
+            >
+              ›
+            </FldngHstryScrollButton>
+          </div>
+        )}
+        {fldngHstryWtlvRows.length > 0 && (
+          <div className="flex w-full items-center gap-1">
+            <span className="w-9 shrink-0 text-[1.1rem] font-semibold">
+              위선
+            </span>
+            <FldngHstryScrollButton
+              targetRef={fldngHstryWtlvListRef}
+              direction={-1}
+              label="이전 위선"
+            >
+              ‹
+            </FldngHstryScrollButton>
+            <div
+              ref={fldngHstryWtlvListRef}
+              className="flex min-w-0 flex-1 gap-2 overflow-x-auto whitespace-nowrap [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+            >
+              {fldngHstryWtlvRows.map((row, index) => {
+                const waterLevelFid = String(row.fid ?? "").trim();
+                const disasterName = String(
+                  row.fldng_dstr_nm ?? row.fldngDstrNm ?? "",
+                ).trim();
+                return (
+                  <button
+                    key={`${waterLevelFid || "wtlv"}-${index}`}
+                    type="button"
+                    onClick={async () => {
+                      if (!waterLevelFid) return;
+                      setSelectedFldngHstryWtlvFid(waterLevelFid);
+                      setSelectedFldngHstryDepthFid(null);
+                      await showFldngHstryFeature(
+                        fldngHstryFeatureCacheRef.current,
+                        GisApp.Module.layer as any,
+                        FLDNG_HSTRY_LAYER_TYPE,
+                        `${FLDNG_HSTRY_LAYER_TYPE}.${waterLevelFid.replace(new RegExp(`^${FLDNG_HSTRY_LAYER_TYPE}\\.`), "")}`,
+                      );
+                    }}
+                    className={`shrink-0 rounded border px-3 py-1 text-[1.2rem] font-medium leading-5 ${selectedFldngHstryWtlvFid === waterLevelFid ? "border-blue-600 bg-white text-blue-700" : "border-border bg-muted text-muted-foreground"}`}
+                  >
+                    {disasterName || "재해명 없음"}
+                  </button>
+                );
+              })}
+            </div>
+            <FldngHstryScrollButton
+              targetRef={fldngHstryWtlvListRef}
+              direction={1}
+              label="다음 위선"
+            >
+              ›
+            </FldngHstryScrollButton>
+          </div>
+        )}
+      </div>
+    ),
+    [
+      fldngHstryDepthRows,
+      fldngHstryWtlvRows,
+      selectedFldngHstryDepthFid,
+      selectedFldngHstryWtlvFid,
+    ],
+  );
+
+  return {
+    hasFldngHstryLinkedFeatures:
+      fldngHstryDepthRows.length > 0 || fldngHstryWtlvRows.length > 0,
+    fldngHstryFeatureClickHeadName: headName,
+    loadFldngHstryFeatureClickDetail,
+    resetFldngHstryFeatureClick,
+  };
+};

apps/sn/app/(map-layout)/map/components/fldngHstry/FldngHstryLayerSettingPanel.tsx

@@ -1,16 +1,21 @@
+/**
+ * 화면명: 침수흔적도 레이어 설정
+ * 침수흔적위선·심선의 표시 여부와 조회 연도 범위를 설정한다.
+ */
 "use client";
 
 import { SelectBox } from "@common/business_components/ui";
 import {
-  FLOOD_HISTORY_MIN_YEAR,
-  normalizeFloodHistoryYearRange,
-  type FloodHistoryYearRange,
+  FLDNG_HSTRY_MIN_YEAR,
+  type FldngHstryYearRange,
 } from "./fldngHstryTypes";
+import { normalizeFldngHstryYearRange } from "./fldngHstryUtils";
+import LayerSettingCard from "../layerSetting/LayerSettingCard";
 
 type Props = {
-  yearRange: FloodHistoryYearRange;
+  yearRange: FldngHstryYearRange;
   enabled: boolean;
-  onYearRangeChange: (yearRange: FloodHistoryYearRange) => void;
+  onYearRangeChange: (yearRange: FldngHstryYearRange) => void;
   onEnabledChange: (enabled: boolean) => void;
   onClose: () => void;
 };
@@ -23,10 +28,10 @@ export default function FldngHstryLayerSettingPanel({
   onEnabledChange,
   onClose,
 }: Props) {
-  const normalizedRange = normalizeFloodHistoryYearRange(yearRange);
+  const normalizedRange = normalizeFldngHstryYearRange(yearRange);
   const currentYear = new Date().getFullYear();
   const yearOptions = Array.from(
-    { length: currentYear - FLOOD_HISTORY_MIN_YEAR + 1 },
+    { length: currentYear - FLDNG_HSTRY_MIN_YEAR + 1 },
     (_, index) => String(currentYear - index),
   );
   const startYearOptions = yearOptions
@@ -36,11 +41,11 @@ export default function FldngHstryLayerSettingPanel({
     .filter((year) => Number(year) >= Number(normalizedRange.startYear))
     .map((year) => ({ val: year, text: year }));
   const yearSelectClass =
-    "h-[20px] w-[62px] !rounded border border-input bg-background px-[1px] text-center text-[1.1rem] leading-none text-foreground";
+    "!h-[26px] w-full !rounded border border-input bg-background px-2 py-0 text-center text-[12px] leading-none text-foreground";
 
-  const changeYear = (key: keyof FloodHistoryYearRange, value: string) => {
+  const changeYear = (key: keyof FldngHstryYearRange, value: string) => {
     onYearRangeChange(
-      normalizeFloodHistoryYearRange({
+      normalizeFldngHstryYearRange({
         ...normalizedRange,
         [key]: value,
       }),
@@ -48,41 +53,16 @@ export default function FldngHstryLayerSettingPanel({
   };
 
   return (
-    <div className="w-full overflow-visible rounded-[6px] border border-border bg-background shadow-blur">
-      <div className="flex min-h-[28px] items-center justify-between border-b border-border px-2">
-        <span className="text-[1.15rem] font-semibold text-label">
-          침수흔적도
-        </span>
-        <div className="flex shrink-0 items-center gap-2">
-          <button
-            type="button"
-            role="switch"
-            aria-checked={enabled}
-            aria-label="침수년도 필터 적용 여부"
-            title={enabled ? "침수년도 필터 적용 중" : "침수년도 필터 미적용"}
-            className={`relative h-[16px] w-[28px] rounded-full border transition-colors ${enabled ? "border-primary bg-primary" : "border-[#94a3b8] bg-[#cbd5e1]"}`}
-            onClick={() => onEnabledChange(!enabled)}
-          >
-            <span
-              className={`absolute top-1/2 h-[12px] w-[12px] -translate-y-1/2 rounded-full bg-white shadow-sm transition-[left] ${enabled ? "left-[14px]" : "left-[2px]"}`}
-            />
-          </button>
-          <button
-            type="button"
-            aria-label="침수년도 설정 닫기"
-            title="닫기"
-            className="grid h-[20px] w-[20px] place-items-center bg-transparent text-[1.3rem] leading-none text-muted-foreground hover:text-foreground"
-            onClick={onClose}
-          >
-            ×
-          </button>
-        </div>
-      </div>
-      <div className="flex min-h-[30px] items-center gap-1.5 px-2 py-1 text-[1.15rem] font-medium text-label">
-        <span className="h-2 w-2 shrink-0 rounded-full bg-primary" />
+    <LayerSettingCard
+      title="침수흔적도"
+      enabled={enabled}
+      onEnabledChange={onEnabledChange}
+      onClose={onClose}
+    >
+      <div className="flex flex-col gap-1.5 font-medium text-label">
         <span className="shrink-0">침수년도</span>
-        <div className="ml-auto flex shrink-0 items-center gap-1.5">
-          <div className="w-[62px]">
+        <div className="flex w-full items-center gap-1.5">
+          <div className="min-w-0 flex-1">
             <SelectBox
               className="w-full"
               selectClass={yearSelectClass}
@@ -97,7 +77,7 @@ export default function FldngHstryLayerSettingPanel({
           <span className="px-[1px] text-[0.95rem] font-normal text-muted-foreground">
             ~
           </span>
-          <div className="w-[62px]">
+          <div className="min-w-0 flex-1">
             <SelectBox
               className="w-full"
               selectClass={yearSelectClass}
@@ -111,6 +91,6 @@ export default function FldngHstryLayerSettingPanel({
           </div>
         </div>
       </div>
-    </div>
+    </LayerSettingCard>
   );
 }

apps/sn/app/(map-layout)/map/components/fldngHstry/FldngHstryPopupPage.tsx

@@ -1,5 +1,6 @@
 /**
- * 침수발생이력 popup
+ * 화면명: 침수발생이력 목록
+ * 침수발생이력을 검색하고 엑셀 다운로드 및 지도 위치 확인 기능을 제공한다.
  */
 "use client";
 
@@ -16,22 +17,24 @@ import LoadingOverlay from "@/components/ui/LoadingBar";
 import MapPopupDataTable from "@/features/windowPopup/ui/MapPopupDataTable";
 import PopupSearchPanel from "@/features/windowPopup/ui/PopupSearchPanel";
 import {
-  FLOOD_HISTORY_LAYER_TYPE,
+  FLDNG_HSTRY_LAYER_TYPE,
   FLDNG_HSTRY_DEFAULT_FILTERS,
   FLDNG_HSTRY_DOWNLOAD_BATCH_SIZE,
   FLDNG_HSTRY_DOWNLOAD_HEADERS,
   FLDNG_HSTRY_LIST_HEADLIST,
   FLDNG_HSTRY_PAGE_SIZE,
   FLDNG_HSTRY_ROW_SELECT_MESSAGE,
+  type FldngHstryApiItem,
+  type FldngHstryFilters,
+  type FldngHstryTableRow,
+} from "./fldngHstryTypes";
+import {
   attachFldngHstryGeometry,
   buildFldngHstryListQueryString,
   buildFldngHstryYearOptions,
   normalizeFldngHstryFilters,
   toFldngHstryTableRows,
-  type FldngHstryApiItem,
-  type FldngHstryFilters,
-  type FldngHstryTableRow,
-} from "./fldngHstryTypes";
+} from "./fldngHstryUtils";
 
 const unwrapPayload = <T,>(response: any): T =>
   (response?.data ?? response) as T;
@@ -49,8 +52,8 @@ const resolveOptionText = (
 
 const resolveFldngHstryMapFeatureFid = (row: FldngHstryTableRow) => {
   const fid = String(row.fid ?? "").trim();
-  if (fid.startsWith(`${FLOOD_HISTORY_LAYER_TYPE}.`)) return fid;
-  if (fid) return `${FLOOD_HISTORY_LAYER_TYPE}.${fid}`;
+  if (fid.startsWith(`${FLDNG_HSTRY_LAYER_TYPE}.`)) return fid;
+  if (fid) return `${FLDNG_HSTRY_LAYER_TYPE}.${fid}`;
 
   return "";
 };
@@ -122,11 +125,10 @@ export default function FldngHstryPopupPage() {
 
   const fldngYearOptions = useMemo(() => buildFldngHstryYearOptions(), []);
 
-
   const sggOptions = useMemo(
     () =>
       filters.ctpvCd === "0"
-        ? sgg
+        ? []
         : sgg.filter((item) =>
             String(item.val).startsWith(filters.ctpvCd.slice(0, 2)),
           ),
@@ -156,11 +158,15 @@ export default function FldngHstryPopupPage() {
           ...hydrated,
           ctpvNm:
             resolveOptionText(hydrated.ctpvCd ?? "", ctpv as any, 2) ||
-            String((hydrated as any).ctpvNm ?? (hydrated as any).ctpv_nm ?? "").trim() ||
+            String(
+              (hydrated as any).ctpvNm ?? (hydrated as any).ctpv_nm ?? "",
+            ).trim() ||
             String(hydrated.ctpvCd ?? "").trim(),
           sggNm:
             resolveOptionText(hydrated.sggCd ?? "", sgg as any, 5) ||
-            String((hydrated as any).sggNm ?? (hydrated as any).sgg_nm ?? "").trim() ||
+            String(
+              (hydrated as any).sggNm ?? (hydrated as any).sgg_nm ?? "",
+            ).trim() ||
             String(hydrated.sggCd ?? "").trim(),
         };
       });
@@ -232,7 +238,7 @@ export default function FldngHstryPopupPage() {
         {
           type: WINDOW_POPUP_MESSAGE_TYPE.MAP_SEARCH_SELECT_FEATURE,
           payload: {
-            layerNm: FLOOD_HISTORY_LAYER_TYPE,
+            layerNm: FLDNG_HSTRY_LAYER_TYPE,
             fid: mapFeatureFid,
           },
         },
@@ -261,8 +267,7 @@ export default function FldngHstryPopupPage() {
     try {
       const response = await fetchAllPages({
         batchSize: FLDNG_HSTRY_DOWNLOAD_BATCH_SIZE,
-        fetchPage: (page, size) =>
-          fetchRows(page + 1, appliedFilters, size),
+        fetchPage: (page, size) => fetchRows(page + 1, appliedFilters, size),
         getItems: (page) => page.rows,
         getTotal: (page) => page.total,
       });
@@ -361,7 +366,9 @@ export default function FldngHstryPopupPage() {
         </label>
 
         <label className="flex items-center gap-2">
-          <span className="whitespace-nowrap text-[1.3rem] text-label">강우시작일</span>
+          <span className="whitespace-nowrap text-[1.3rem] text-label">
+            강우시작일
+          </span>
           <Input
             className="w-[11rem]"
             type="date"
@@ -369,13 +376,32 @@ export default function FldngHstryPopupPage() {
             min={filters.floodYear ? `${filters.floodYear}-01-01` : undefined}
             max={filters.floodYear ? `${filters.floodYear}-12-31` : undefined}
             disabled={!filters.floodYear}
-            onChange={(event) => setFilters((current) => ({ ...current, rainStartDate: event.target.value }))}
+            onChange={(event) =>
+              setFilters((current) => ({
+                ...current,
+                rainStartDate: event.target.value,
+              }))
+            }
           />
         </label>
 
         <label className="flex items-center gap-2">
-          <span className="whitespace-nowrap text-[1.3rem] text-label">침수지구명</span>
-          <Input type="text" value={filters.districtName} onChange={(event) => setFilters((current) => ({ ...current, districtName: event.target.value }))} onKeyDown={(event) => { if (event.key === "Enter") void handleSearch(1); }} />
+          <span className="whitespace-nowrap text-[1.3rem] text-label">
+            침수지구명
+          </span>
+          <Input
+            type="text"
+            value={filters.districtName}
+            onChange={(event) =>
+              setFilters((current) => ({
+                ...current,
+                districtName: event.target.value,
+              }))
+            }
+            onKeyDown={(event) => {
+              if (event.key === "Enter") void handleSearch(1);
+            }}
+          />
         </label>
 
         <label className="flex items-center gap-2">
@@ -431,7 +457,7 @@ export default function FldngHstryPopupPage() {
         onRowClick={handleRowClick}
         rowId={(row, index) => String(row.fid ?? index)}
         scrollMode="horizontal"
-        minTableWidth="220rem"
+        minTableWidth="140rem"
         actions={
           <Button type="button" onClick={() => void handleDownload()}>
             엑셀다운로드

apps/sn/app/(map-layout)/map/components/fldngHstry/fldngHstryClient.ts

@@ -0,0 +1,61 @@
+/** 침수흔적 강우분석과 연결된 심선·위선 목록 조회를 담당한다. */
+
+import { getData } from "@/components/lib/api";
+
+import type { FldngHstryDetailCacheValue } from "./fldngHstryTypes";
+
+const normalizeFldngHstryRainAnalysisPayload = (data: any) => {
+  if (!data || typeof data !== "object") return {};
+  return {
+    rain_bgng_tm: data.rainBgngTm ?? data.rain_bgng_tm ?? null,
+    rainBgngTm: data.rainBgngTm ?? data.rain_bgng_tm ?? null,
+    rain_end_tm: data.rainEndTm ?? data.rain_end_tm ?? null,
+    rainEndTm: data.rainEndTm ?? data.rain_end_tm ?? null,
+    rain_tot: data.rainTot ?? data.rain_tot ?? null,
+    rainTot: data.rainTot ?? data.rain_tot ?? null,
+    rain_str: data.rainStr ?? data.rain_str ?? null,
+    rainStr: data.rainStr ?? data.rain_str ?? null,
+  };
+};
+
+export const loadFldngHstryDetail = async (
+  fldngHstryFid: string,
+): Promise<FldngHstryDetailCacheValue> => {
+  const [rainResult, depthResult] = await Promise.allSettled([
+    getData(`v1/fldng/hstry/rainAnls/${encodeURIComponent(fldngHstryFid)}`),
+    getData(`v1/fldng/hstry/depthMap/${encodeURIComponent(fldngHstryFid)}`),
+  ]);
+
+  if (rainResult.status === "rejected") {
+    console.warn("침수강우분석 조회 실패:", rainResult.reason);
+  }
+  if (depthResult.status === "rejected") {
+    console.warn("침수깊이지도 조회 실패:", depthResult.reason);
+  }
+
+  const depthPayload =
+    depthResult.status === "fulfilled"
+      ? (depthResult.value?.data ?? depthResult.value)
+      : null;
+  const depthItems = Array.isArray(depthPayload)
+    ? depthPayload
+    : depthPayload?.depthMaps;
+  const waterLevelItems = Array.isArray(depthPayload?.waterLevelMaps)
+    ? depthPayload.waterLevelMaps
+    : [];
+
+  return {
+    rainAnalysis:
+      rainResult.status === "fulfilled"
+        ? normalizeFldngHstryRainAnalysisPayload(rainResult.value)
+        : {},
+    fldngHstryDepthRows: Array.isArray(depthItems)
+      ? depthItems.filter((row) => row && typeof row === "object")
+      : [],
+    fldngHstryWtlvRows: waterLevelItems.filter(
+      (row: unknown) => row && typeof row === "object",
+    ),
+    complete:
+      rainResult.status === "fulfilled" && depthResult.status === "fulfilled",
+  };
+};

apps/sn/app/(map-layout)/map/components/fldngHstry/fldngHstryTypes.ts

@@ -1,62 +1,27 @@
-"use client";
-
+/** 침수흔적 화면에서 사용하는 타입·상수와 화면 설정값을 정의한다. */
 import type { UiHeadProps } from "@common/business_components/ui";
 
-export const FLOOD_HISTORY_POPUP_KEY = "fldngHstryPopup";
+export const FLDNG_HSTRY_POPUP_KEY = "fldngHstryPopup";
 export const FLDNG_HSTRY_ROW_SELECT_MESSAGE = "SN_FLOOD_HISTORY_ROW_SELECT";
-export const FLOOD_HISTORY_LAYER_TYPE = "tb_ms_fldng_wtlv_map";
-export const FLOOD_HISTORY_DEPTH_LAYER_TYPE = "tb_ms_fldng_dpth_map";
-export const FLOOD_HISTORY_PREVIEW_LAYER_TYPE = "tb_sn_flood_trace_mock";
-export const FLOOD_HISTORY_LAYER_NAME = "침수흔적위선";
-export const FLOOD_HISTORY_DEPTH_LAYER_NAME = "침수흔적심선";
-export const FLOOD_HISTORY_ROOT_NAME = "침수흔적도";
-export const FLOOD_HISTORY_AREA_LAYER_ID = "SN_FLOOD_HISTORY_AREA";
-export const FLOOD_HISTORY_DEPTH_LAYER_ID = "SN_FLOOD_HISTORY_DEPTH";
+export const FLDNG_HSTRY_LAYER_TYPE = "tb_ms_fldng_wtlv_map";
+export const FLDNG_HSTRY_DEPTH_LAYER_TYPE = "tb_ms_fldng_dpth_map";
+export const FLDNG_HSTRY_PREVIEW_LAYER_TYPE = "tb_sn_flood_trace_mock";
+export const FLDNG_HSTRY_LAYER_NAME = "침수흔적위선";
+export const FLDNG_HSTRY_DEPTH_LAYER_NAME = "침수흔적심선";
+export const FLDNG_HSTRY_ROOT_NAME = "침수흔적도";
+export const FLDNG_HSTRY_AREA_LAYER_ID = "SN_FLOOD_HISTORY_AREA";
+export const FLDNG_HSTRY_DEPTH_LAYER_ID = "SN_FLOOD_HISTORY_DEPTH";
 export const FLDNG_HSTRY_PAGE_SIZE = 10;
 export const FLDNG_HSTRY_DOWNLOAD_BATCH_SIZE = 2000;
-export const FLOOD_HISTORY_MIN_YEAR = 2002;
+export const FLDNG_HSTRY_MIN_YEAR = 2002;
 
-/** 지도 침수흔적위선·심선이 공통으로 사용하는 침수년도 범위다. */
-export type FloodHistoryYearRange = {
-  startYear: string;
-  endYear: string;
+export type FldngHstryDetailCacheValue = {
+  rainAnalysis: Record<string, unknown>;
+  fldngHstryDepthRows: Record<string, unknown>[];
+  fldngHstryWtlvRows: Record<string, unknown>[];
+  complete: boolean;
 };
-
-/** 침수년도 설정의 초기 범위는 데이터 최소연도부터 현재년도까지다. */
-export const buildFloodHistoryDefaultYearRange = (
-  currentYear = new Date().getFullYear(),
-): FloodHistoryYearRange => ({
-  startYear: String(FLOOD_HISTORY_MIN_YEAR),
-  endYear: String(currentYear),
-});
-
-/** 연도 설정값을 4자리 숫자로 정규화하고 유효하지 않으면 기본 범위를 사용한다. */
-export const normalizeFloodHistoryYearRange = (
-  range?: Partial<FloodHistoryYearRange> | null,
-  fallback: FloodHistoryYearRange = buildFloodHistoryDefaultYearRange(),
-): FloodHistoryYearRange => {
-  const normalizeYear = (value: unknown) =>
-    String(value ?? "")
-      .replace(/[^0-9]/g, "")
-      .slice(0, 4);
-  const startYear = normalizeYear(range?.startYear);
-  const endYear = normalizeYear(range?.endYear);
-  return {
-    startYear: /^\d{4}$/.test(startYear) ? startYear : fallback.startYear,
-    endYear: /^\d{4}$/.test(endYear) ? endYear : fallback.endYear,
-  };
-};
-
-/** 위선·심선 WFS에 동일하게 결합할 침수년도 CQL 조건을 생성한다. */
-export const buildFloodHistoryYearCql = (
-  range: FloodHistoryYearRange,
-  enabled: boolean,
-) => {
-  if (!enabled) return "";
-  const normalized = normalizeFloodHistoryYearRange(range);
-  return `(fldng_yr >= '${normalized.startYear}' AND fldng_yr <= '${normalized.endYear}')`;
-};
-
+export type FldngHstryYearRange = { startYear: string; endYear: string };
 export type FldngHstryFilters = {
   ctpvCd: string;
   sggCd: string;
@@ -65,47 +30,44 @@ export type FldngHstryFilters = {
   rainStartDate: string;
   districtName: string;
 };
-
 export type FldngHstryDepthZone = {
   zoneId: string;
   depthLabel: string;
   color: string;
   ring: [number, number][];
 };
-
 export type FldngHstryApiItem = {
-  fid: string; // FID
-  fldngMapFid?: string; // 침수흔적도지도 FID
-  fldngWtlvMapSn?: number | null; // 침수흔적도지도 일련번호
-  taskClCd?: string; // 업무 구분 코드
-  fldngDstrNm?: string; // 침수재해명
-  exmnYr?: string; // 조사년도
-  avgFldngWtlv?: number | null; // 평균침수위
-  fldngArea?: number | null; // 침수면적
-  dtlOcrnCsCn?: string; // 상세발생원인내용
-  stdgCd?: string; // 표준지역코드
-  ctpvCd?: string; // 시도코드
-  sggCd?: string; // 시군구코드
-  dataSn?: number | null; // 데이터 일련번호
-  bgngYmd?: string; // 시작일자
-  endYmd?: string; // 종료일자
-  fldngBgngHm?: string; // 침수시작시분
-  fldngEndHm?: string; // 침수종료시분
-  fldngCsDtlCd?: string; // 침수원인상세코드
-  fldngDstrctNm?: string; // 침수지구명
-  damAmt?: number | null; // 피해금액
-  fldngHr?: number | null; // 침수시간
-  fldngYr?: string; // 침수년도
-  cstrnFbctnYn?: string; // 공사여부
-  atchFileSn?: number | null; // 첨부파일 일련번호
-  confArea?: number | null; // 확정면적
-  confLen?: number | null; // 확정연장
-  rainBgngTm?: string | null; // 강우시작일시
-  rainEndTm?: string | null; // 강우종료일시
-  rainTot?: number | null; // 총강우량
-  rainStr?: number | null; // 강우강도
+  fid: string;
+  fldngMapFid?: string;
+  fldngWtlvMapSn?: number | null;
+  taskClCd?: string;
+  fldngDstrNm?: string;
+  exmnYr?: string;
+  avgFldngWtlv?: number | null;
+  fldngArea?: number | null;
+  dtlOcrnCsCn?: string;
+  stdgCd?: string;
+  ctpvCd?: string;
+  sggCd?: string;
+  dataSn?: number | null;
+  bgngYmd?: string;
+  endYmd?: string;
+  fldngBgngHm?: string;
+  fldngEndHm?: string;
+  fldngCsDtlCd?: string;
+  fldngDstrctNm?: string;
+  damAmt?: number | null;
+  fldngHr?: number | null;
+  fldngYr?: string;
+  cstrnFbctnYn?: string;
+  atchFileSn?: number | null;
+  confArea?: number | null;
+  confLen?: number | null;
+  rainBgngTm?: string | null;
+  rainEndTm?: string | null;
+  rainTot?: number | null;
+  rainStr?: number | null;
 };
-
 export type FldngHstryItem = FldngHstryApiItem & {
   historyId: string;
   ctpvNm: string;
@@ -135,7 +97,6 @@ export type FldngHstryItem = FldngHstryApiItem & {
   areaRing: [number, number][];
   depthZones: FldngHstryDepthZone[];
 };
-
 export type FldngHstryTableRow = FldngHstryItem & {
   rowNo: number;
   floodYearDisplay: string;
@@ -158,7 +119,6 @@ export const FLDNG_HSTRY_DEFAULT_FILTERS: FldngHstryFilters = {
   rainStartDate: "",
   districtName: "",
 };
-
 export const FLDNG_HSTRY_DEPTH_LEGEND_ITEMS = [
   { color: "#fff27a", label: "0.0~0.5m" },
   { color: "#c2f13d", label: "0.5~1.0m" },
@@ -166,25 +126,23 @@ export const FLDNG_HSTRY_DEPTH_LEGEND_ITEMS = [
   { color: "#8f8bff", label: "2.0~5.0m" },
   { color: "#f2528b", label: "5.0m 이상" },
 ] as const;
-
 export const FLDNG_HSTRY_LIST_HEADLIST: UiHeadProps[] = [
-  { id: "rowNo", title: "순번", widthPercent: 3 },
-  { id: "floodYearDisplay", title: "침수\n년도", widthPercent: 4 },
-  { id: "ctpvNm", title: "시도", widthPercent: 7 },
-  { id: "sggNm", title: "시군구", widthPercent: 8 },
-  { id: "disasterName", title: "침수재해명", widthPercent: 20 },
-  { id: "rainBgngTmDisplay", title: "강우\n시작일시", widthPercent: 9 },
-  { id: "rainEndTmDisplay", title: "강우\n종료일시", widthPercent: 9 },
-  { id: "rainTotDisplay", title: "총강우량(mm)", widthPercent: 8 },
-  { id: "rainStrDisplay", title: "강우강도(mm/hr)", widthPercent: 8 },
-  { id: "floodHourDisplay", title: "침수시간", widthPercent: 7 },
-  { id: "districtName", title: "침수지구명", widthPercent: 10 },
-  { id: "avgFloodDepthDisplay", title: "평균\n침수위", widthPercent: 7 },
-  { id: "floodAreaDisplay", title: "침수\n면적\(ha)", widthPercent: 7 },
-  { id: "exmnYearDisplay", title: "조사년도", widthPercent: 6 },
-  { id: "damageAmountDisplay", title: "피해금액", widthPercent: 9 },
+  { id: "rowNo", title: "순번" },
+  { id: "floodYearDisplay", title: "침수\n년도" },
+  { id: "ctpvNm", title: "시도" },
+  { id: "sggNm", title: "시군구" },
+  { id: "disasterName", title: "침수재해명" },
+  { id: "rainBgngTmDisplay", title: "강우\n시작일시" },
+  { id: "rainEndTmDisplay", title: "강우\n종료일시" },
+  { id: "rainTotDisplay", title: "총강우량(mm)" },
+  { id: "rainStrDisplay", title: "강우강도(mm/hr)" },
+  { id: "floodHourDisplay", title: "침수시간" },
+  { id: "districtName", title: "침수지구명" },
+  { id: "avgFloodDepthDisplay", title: "평균\n침수위" },
+  { id: "floodAreaDisplay", title: "침수\n면적(ha)" },
+  { id: "exmnYearDisplay", title: "조사년도" },
+  { id: "damageAmountDisplay", title: "피해금액" },
 ];
-
 export const FLDNG_HSTRY_DOWNLOAD_HEADERS: Record<string, string> = {
   rowNo: "순번",
   floodYearDisplay: "침수년도",
@@ -204,373 +162,3 @@ export const FLDNG_HSTRY_DOWNLOAD_HEADERS: Record<string, string> = {
   exmnYearDisplay: "조사년도",
   damageAmountDisplay: "피해금액",
 };
-
-const toRadian = (degree: number) => (degree * Math.PI) / 180;
-
-const createIrregularRing = ({
-  centerX,
-  centerY,
-  radiusX,
-  radiusY,
-  scales,
-  rotationDeg = 0,
-}: {
-  centerX: number;
-  centerY: number;
-  radiusX: number;
-  radiusY: number;
-  scales: number[];
-  rotationDeg?: number;
-}): [number, number][] => {
-  const rotation = toRadian(rotationDeg);
-  const points = scales.map((scale, index) => {
-    const angle = rotation + (Math.PI * 2 * index) / scales.length;
-    const jitterX = radiusX * scale * Math.cos(angle);
-    const jitterY = radiusY * scale * Math.sin(angle);
-    return [centerX + jitterX, centerY + jitterY] as [number, number];
-  });
-
-  return points.length > 0 ? [...points, points[0]!] : [];
-};
-
-const toNumericSeed = (value: string) =>
-  Array.from(value).reduce(
-    (sum, char, index) => sum + char.charCodeAt(0) * (index + 1),
-    0,
-  );
-
-const buildGeometrySeed = (fid: string) => {
-  const seed = toNumericSeed(fid);
-  return {
-    centerX: 1050000 + (seed % 120000),
-    centerY: 1680000 + (seed % 150000),
-    width: 14000 + (seed % 9000),
-    height: 11000 + (seed % 7000),
-  };
-};
-
-const createFldngHstryDepthZones = (
-  historyId: string,
-  centerX: number,
-  centerY: number,
-): FldngHstryDepthZone[] => {
-  return [
-    {
-      zoneId: `${historyId}-depth-1`,
-      depthLabel: "0.0~0.5m",
-      color: "#fff27a",
-      ring: createIrregularRing({
-        centerX: centerX - 2600,
-        centerY: centerY - 1200,
-        radiusX: 2900,
-        radiusY: 2300,
-        rotationDeg: -18,
-        scales: [1.02, 0.78, 0.9, 1.08, 0.86, 0.72, 0.94, 1.04],
-      }),
-    },
-    {
-      zoneId: `${historyId}-depth-2`,
-      depthLabel: "0.5~1.0m",
-      color: "#c2f13d",
-      ring: createIrregularRing({
-        centerX: centerX + 1800,
-        centerY: centerY - 600,
-        radiusX: 3500,
-        radiusY: 2800,
-        rotationDeg: 12,
-        scales: [1.04, 0.88, 1.02, 0.8, 0.92, 1.08, 0.84, 0.95],
-      }),
-    },
-    {
-      zoneId: `${historyId}-depth-3`,
-      depthLabel: "1.0~2.0m",
-      color: "#67d8ff",
-      ring: createIrregularRing({
-        centerX,
-        centerY: centerY + 1800,
-        radiusX: 4700,
-        radiusY: 3900,
-        rotationDeg: 8,
-        scales: [1.12, 0.86, 0.94, 1.06, 0.82, 0.97, 1.04, 0.9, 1.08, 0.84],
-      }),
-    },
-    {
-      zoneId: `${historyId}-depth-4`,
-      depthLabel: "2.0~5.0m",
-      color: "#8f8bff",
-      ring: createIrregularRing({
-        centerX: centerX + 3200,
-        centerY: centerY + 3200,
-        radiusX: 2600,
-        radiusY: 2000,
-        rotationDeg: 26,
-        scales: [1.05, 0.82, 1.08, 0.88, 0.96, 0.78, 1.02, 0.9],
-      }),
-    },
-    {
-      zoneId: `${historyId}-depth-5`,
-      depthLabel: "5.0m 이상",
-      color: "#f2528b",
-      ring: createIrregularRing({
-        centerX: centerX + 400,
-        centerY: centerY - 3600,
-        radiusX: 1200,
-        radiusY: 1050,
-        rotationDeg: -10,
-        scales: [1.0, 0.8, 1.06, 0.84, 0.94, 0.76, 0.98],
-      }),
-    },
-  ];
-};
-
-const normalizeDate = (value?: string | null) => {
-  const source = String(value ?? "").trim();
-  if (!/^\d{8}$/.test(source)) return "";
-  return `${source.slice(0, 4)}-${source.slice(4, 6)}-${source.slice(6, 8)}`;
-};
-
-const normalizeHm = (value?: string | null) => {
-  const digits = String(value ?? "").replace(/[^0-9]/g, "");
-  if (!digits) return "";
-  if (digits.length === 1) return `0${digits}:00`;
-  if (digits.length === 2) return `${digits}:00`;
-  if (digits.length === 3)
-    return `0${digits.slice(0, 1)}:${digits.slice(1, 3)}`;
-  return `${digits.slice(0, 2)}:${digits.slice(2, 4)}`;
-};
-
-const normalizeDateTime = (value?: string | null) => {
-  const source = String(value ?? "").trim();
-  if (!source) return "";
-  if (/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}$/.test(source)) return source;
-  const date = new Date(source);
-  if (Number.isNaN(date.getTime()))
-    return source.slice(0, 16).replace("T", " ");
-  const yyyy = date.getFullYear();
-  const mm = `${date.getMonth() + 1}`.padStart(2, "0");
-  const dd = `${date.getDate()}`.padStart(2, "0");
-  const hh = `${date.getHours()}`.padStart(2, "0");
-  const mi = `${date.getMinutes()}`.padStart(2, "0");
-  return `${yyyy}-${mm}-${dd} ${hh}:${mi}`;
-};
-
-const formatNumber = (value?: number | null, digits = 1, suffix = "") => {
-  const numeric = Number(value ?? 0);
-  if (!Number.isFinite(numeric)) return `0${suffix}`;
-  return `${numeric.toFixed(digits)}${suffix}`;
-};
-
-const formatInteger = (value?: number | null, suffix = "") => {
-  const numeric = Number(value ?? 0);
-  if (!Number.isFinite(numeric)) return `0${suffix}`;
-  return `${numeric.toLocaleString("ko-KR")}${suffix}`;
-};
-
-const formatOptionalNumber = (
-  value?: number | null,
-  digits = 1,
-  suffix = "",
-) => {
-  if (value === null || value === undefined) return "-";
-  const numeric = Number(value);
-  if (!Number.isFinite(numeric)) return "-";
-  return `${numeric.toFixed(digits)}${suffix}`;
-};
-
-const buildCauseDetailName = (item: FldngHstryApiItem) => {
-  const direct = String(item.dtlOcrnCsCn ?? "").trim();
-  if (direct) return direct;
-  const code = String(item.fldngCsDtlCd ?? "").trim();
-  return code ? `원인코드 ${code}` : "-";
-};
-
-const buildGradeLabel = (avgFloodDepthM: number) => {
-  if (avgFloodDepthM >= 2) return "3등급";
-  if (avgFloodDepthM >= 1) return "2등급";
-  return "1등급";
-};
-
-export const normalizeFldngHstryFilters = (
-  filters: FldngHstryFilters,
-): FldngHstryFilters => ({
-  ctpvCd: String(filters.ctpvCd ?? "0") || "0",
-  sggCd: String(filters.sggCd ?? "0") || "0",
-  floodYear: String(filters.floodYear ?? "")
-    .replace(/[^0-9]/g, "")
-    .slice(0, 4),
-  disasterName: String(filters.disasterName ?? "").trim(),
-  rainStartDate: String(filters.rainStartDate ?? "").trim(),
-  districtName: String(filters.districtName ?? "").trim(),
-});
-
-export const buildFldngHstryYearOptions = () => {
-  const currentYear = new Date().getFullYear();
-  return Array.from({ length: 30 }, (_, index) => String(currentYear - index));
-};
-
-export const buildFldngHstryListQueryString = (
-  filters: FldngHstryFilters,
-  page: number,
-  size: number,
-) => {
-  const normalized = normalizeFldngHstryFilters(filters);
-  const params = new URLSearchParams({
-    page: String(page - 1),
-    size: String(size),
-  });
-
-  if (normalized.ctpvCd !== "0")
-    params.set("ctpvCd", normalized.ctpvCd.slice(0, 2));
-  if (normalized.sggCd !== "0")
-    params.set("sggCd", normalized.sggCd.slice(0, 5));
-  if (normalized.floodYear) params.set("fldngYr", normalized.floodYear);
-  if (normalized.disasterName)
-    params.set("fldngDstrNm", normalized.disasterName);
-  if (normalized.rainStartDate)
-    params.set("rainBgngTm", normalized.rainStartDate);
-  if (normalized.districtName)
-    params.set("fldngDstrctNm", normalized.districtName);
-  return params.toString();
-};
-
-export const formatFloodArea = (value: number) =>
-  Number(value ?? 0).toLocaleString("ko-KR", {
-    minimumFractionDigits: 0,
-    maximumFractionDigits: 2,
-  });
-
-export const formatFloodDepth = (value: number) => value.toFixed(2);
-
-export const attachFldngHstryGeometry = (
-  item: FldngHstryApiItem,
-): FldngHstryItem => {
-  const historyId = String(item.fid ?? "");
-  const geometrySeed = buildGeometrySeed(historyId);
-  const startDate = normalizeDate(item.bgngYmd);
-  const endDate = normalizeDate(item.endYmd);
-  const startTime = normalizeHm(item.fldngBgngHm);
-  const endTime = normalizeHm(item.fldngEndHm);
-  const avgFloodDepthM = Number(item.avgFldngWtlv ?? 0);
-  const floodAreaHa = Number(item.fldngArea ?? 0);
-
-  return {
-    ...item,
-    historyId,
-    ctpvNm: "",
-    sggNm: "",
-    floodYear: String(item.fldngYr ?? "").trim(),
-    exmnYear: String(item.exmnYr ?? "").trim(),
-    disasterName: String(item.fldngDstrNm ?? "").trim(),
-    districtName: String(item.fldngDstrctNm ?? "").trim(),
-    floodAreaHa,
-    avgFloodDepthM,
-    floodDepthM: avgFloodDepthM,
-    gradeLabel: buildGradeLabel(avgFloodDepthM),
-    startDate,
-    endDate,
-    startTime,
-    endTime,
-    floodHour: formatNumber(Number(item.fldngHr ?? 0), 1),
-    causeDetailCode: String(item.fldngCsDtlCd ?? "").trim(),
-    causeDetailName: buildCauseDetailName(item),
-    damageAmount: formatInteger(Number(item.damAmt ?? 0)),
-    rainStartDateTime: normalizeDateTime(item.rainBgngTm),
-    rainEndDateTime: normalizeDateTime(item.rainEndTm),
-    rainStartTime: normalizeDateTime(item.rainBgngTm).slice(11, 16),
-    rainEndTime: normalizeDateTime(item.rainEndTm).slice(11, 16),
-    totalRainfallMm: Number(item.rainTot ?? 0),
-    rainfallIntensityMmHr: Number(item.rainStr ?? 0),
-    areaRing: createIrregularRing({
-      centerX: geometrySeed.centerX,
-      centerY: geometrySeed.centerY,
-      radiusX: geometrySeed.width / 2,
-      radiusY: geometrySeed.height / 2,
-      rotationDeg: 9,
-      scales: [1.08, 0.9, 1.04, 0.82, 0.98, 1.12, 0.88, 0.96, 1.03, 0.86],
-    }),
-    depthZones: createFldngHstryDepthZones(
-      historyId,
-      geometrySeed.centerX,
-      geometrySeed.centerY,
-    ),
-  };
-};
-
-export const toFldngHstryTableRows = (
-  items: FldngHstryItem[],
-  page: number,
-  pageSize = FLDNG_HSTRY_PAGE_SIZE,
-): FldngHstryTableRow[] =>
-  items.map((item, index) => ({
-    ...item,
-    rowNo: (page - 1) * pageSize + index + 1,
-    floodYearDisplay: item.floodYear || "-",
-    floodHourDisplay: item.floodHour || "-",
-    avgFloodDepthDisplay: formatFloodDepth(item.avgFloodDepthM),
-    floodAreaDisplay: formatFloodArea(item.floodAreaHa),
-    exmnYearDisplay: item.exmnYear || "-",
-    damageAmountDisplay: item.damageAmount || "-",
-    rainBgngTmDisplay: item.rainStartDateTime || "-",
-    rainEndTmDisplay: item.rainEndDateTime || "-",
-    rainTotDisplay: formatOptionalNumber(item.rainTot, 1),
-    rainStrDisplay: formatOptionalNumber(item.rainStr, 1),
-  }));
-
-const resolveFldngHstryNodeName = (node: any) =>
-  String(
-    node?.text ??
-      node?.data?.lyrNm ??
-      node?.data?.name ??
-      node?.lyrNm ??
-      node?.name ??
-      "",
-  ).trim();
-
-const resolveFldngHstryLayerType = (node: any) =>
-  String(
-    node?.data?.lyrTyNm ??
-      node?.data?.lyrTypeNm ??
-      node?.lyrTyNm ??
-      node?.lyrTypeNm ??
-      "",
-  ).trim();
-
-export const isFldngHstryNode = (node: any) => {
-  const name = resolveFldngHstryNodeName(node);
-  const layerType = resolveFldngHstryLayerType(node);
-  return (
-    name === FLOOD_HISTORY_LAYER_NAME ||
-    name === FLOOD_HISTORY_DEPTH_LAYER_NAME ||
-    layerType === FLOOD_HISTORY_LAYER_TYPE ||
-    layerType === FLOOD_HISTORY_DEPTH_LAYER_TYPE ||
-    layerType === FLOOD_HISTORY_PREVIEW_LAYER_TYPE
-  );
-};
-
-/** 침수흔적위선 체크 상태를 심선과 분리해 판별한다. */
-export const isFloodHistoryWaterLevelNode = (node: any) => {
-  const name = resolveFldngHstryNodeName(node);
-  const layerType = resolveFldngHstryLayerType(node);
-  return (
-    name === FLOOD_HISTORY_LAYER_NAME || layerType === FLOOD_HISTORY_LAYER_TYPE
-  );
-};
-
-/** 침수흔적심선 체크 상태를 위선과 분리해 판별한다. */
-export const isFloodHistoryDepthNode = (node: any) => {
-  const name = resolveFldngHstryNodeName(node);
-  const layerType = resolveFldngHstryLayerType(node);
-  return (
-    name === FLOOD_HISTORY_DEPTH_LAYER_NAME ||
-    layerType === FLOOD_HISTORY_DEPTH_LAYER_TYPE
-  );
-};
-
-export const isFldngHstryRootNode = (node: any) =>
-  resolveFldngHstryNodeName(node) === FLOOD_HISTORY_ROOT_NAME;
-
-export const isFloodHistoryNode = isFldngHstryNode;
-export const FLOOD_HISTORY_ROW_SELECT_MESSAGE = FLDNG_HSTRY_ROW_SELECT_MESSAGE;
-export const FLOOD_HISTORY_PAGE_SIZE = FLDNG_HSTRY_PAGE_SIZE;
-export const FLOOD_HISTORY_DOWNLOAD_BATCH_SIZE =
-  FLDNG_HSTRY_DOWNLOAD_BATCH_SIZE;

apps/sn/app/(map-layout)/map/components/fldngHstry/fldngHstryUtils.ts

@@ -0,0 +1,440 @@
+/** 침수흔적 검색조건·표시값·geometry·레이어 판별 변환을 제공한다. */
+
+import { appendApiSearchParams } from "@/shared/util/util";
+
+import {
+  FLDNG_HSTRY_PAGE_SIZE,
+  FLDNG_HSTRY_DEPTH_LAYER_NAME,
+  FLDNG_HSTRY_DEPTH_LAYER_TYPE,
+  FLDNG_HSTRY_LAYER_NAME,
+  FLDNG_HSTRY_LAYER_TYPE,
+  FLDNG_HSTRY_MIN_YEAR,
+  FLDNG_HSTRY_PREVIEW_LAYER_TYPE,
+  FLDNG_HSTRY_ROOT_NAME,
+  type FldngHstryApiItem,
+  type FldngHstryDepthZone,
+  type FldngHstryFilters,
+  type FldngHstryItem,
+  type FldngHstryTableRow,
+  type FldngHstryYearRange,
+} from "./fldngHstryTypes";
+
+export const normalizeFldngHstryWtlvDisplayId = (value: unknown) => {
+  const normalized = String(value ?? "").trim();
+  const prefix = `${FLDNG_HSTRY_LAYER_TYPE}.`;
+  return normalized.startsWith(prefix)
+    ? normalized.slice(prefix.length)
+    : normalized;
+};
+
+export const normalizeFldngHstryWtlvApiFid = (value: unknown) => {
+  const normalized = String(value ?? "").trim();
+  return normalized ? normalizeFldngHstryWtlvDisplayId(normalized) : "";
+};
+
+export const formatFldngHstryDateTime = (
+  dateValue: unknown,
+  timeValue: unknown,
+) => {
+  const rawDate = String(dateValue ?? "").trim();
+  const rawTime = String(timeValue ?? "").trim();
+  const normalizedDate = /^\d{8}$/.test(rawDate)
+    ? `${rawDate.slice(0, 4)}-${rawDate.slice(4, 6)}-${rawDate.slice(6, 8)}`
+    : rawDate;
+  const timeDigits = rawTime.replace(/[^0-9]/g, "");
+  const normalizedTime = !timeDigits
+    ? ""
+    : timeDigits.length <= 2
+      ? `${timeDigits.padStart(2, "0")}:00`
+      : `${timeDigits.padStart(4, "0").slice(0, 2)}:${timeDigits.padStart(4, "0").slice(2, 4)}`;
+  return [normalizedDate, normalizedTime].filter(Boolean).join(" ");
+};
+
+export const buildFldngHstryDefaultYearRange = (
+  currentYear = new Date().getFullYear(),
+): FldngHstryYearRange => ({
+  startYear: String(FLDNG_HSTRY_MIN_YEAR),
+  endYear: String(currentYear),
+});
+
+export const normalizeFldngHstryYearRange = (
+  range?: Partial<FldngHstryYearRange> | null,
+  fallback: FldngHstryYearRange = buildFldngHstryDefaultYearRange(),
+): FldngHstryYearRange => {
+  const normalizeYear = (value: unknown) =>
+    String(value ?? "")
+      .replace(/[^0-9]/g, "")
+      .slice(0, 4);
+  const startYear = normalizeYear(range?.startYear);
+  const endYear = normalizeYear(range?.endYear);
+  return {
+    startYear: /^\d{4}$/.test(startYear) ? startYear : fallback.startYear,
+    endYear: /^\d{4}$/.test(endYear) ? endYear : fallback.endYear,
+  };
+};
+
+export const buildFldngHstryYearCql = (
+  range: FldngHstryYearRange,
+  enabled: boolean,
+) => {
+  if (!enabled) return "";
+  const normalized = normalizeFldngHstryYearRange(range);
+  return `(fldng_yr >= '${normalized.startYear}' AND fldng_yr <= '${normalized.endYear}')`;
+};
+
+const toRadian = (degree: number) => (degree * Math.PI) / 180;
+
+const createIrregularRing = ({
+  centerX,
+  centerY,
+  radiusX,
+  radiusY,
+  scales,
+  rotationDeg = 0,
+}: {
+  centerX: number;
+  centerY: number;
+  radiusX: number;
+  radiusY: number;
+  scales: number[];
+  rotationDeg?: number;
+}): [number, number][] => {
+  const rotation = toRadian(rotationDeg);
+  const points = scales.map((scale, index) => {
+    const angle = rotation + (Math.PI * 2 * index) / scales.length;
+    return [
+      centerX + radiusX * scale * Math.cos(angle),
+      centerY + radiusY * scale * Math.sin(angle),
+    ] as [number, number];
+  });
+  return points.length > 0 ? [...points, points[0]!] : [];
+};
+
+const toNumericSeed = (value: string) =>
+  Array.from(value).reduce(
+    (sum, char, index) => sum + char.charCodeAt(0) * (index + 1),
+    0,
+  );
+
+const buildGeometrySeed = (fid: string) => {
+  const seed = toNumericSeed(fid);
+  return {
+    centerX: 1050000 + (seed % 120000),
+    centerY: 1680000 + (seed % 150000),
+    width: 14000 + (seed % 9000),
+    height: 11000 + (seed % 7000),
+  };
+};
+
+const createFldngHstryDepthZones = (
+  historyId: string,
+  centerX: number,
+  centerY: number,
+): FldngHstryDepthZone[] => [
+  {
+    zoneId: `${historyId}-depth-1`,
+    depthLabel: "0.0~0.5m",
+    color: "#fff27a",
+    ring: createIrregularRing({
+      centerX: centerX - 2600,
+      centerY: centerY - 1200,
+      radiusX: 2900,
+      radiusY: 2300,
+      rotationDeg: -18,
+      scales: [1.02, 0.78, 0.9, 1.08, 0.86, 0.72, 0.94, 1.04],
+    }),
+  },
+  {
+    zoneId: `${historyId}-depth-2`,
+    depthLabel: "0.5~1.0m",
+    color: "#c2f13d",
+    ring: createIrregularRing({
+      centerX: centerX + 1800,
+      centerY: centerY - 600,
+      radiusX: 3500,
+      radiusY: 2800,
+      rotationDeg: 12,
+      scales: [1.04, 0.88, 1.02, 0.8, 0.92, 1.08, 0.84, 0.95],
+    }),
+  },
+  {
+    zoneId: `${historyId}-depth-3`,
+    depthLabel: "1.0~2.0m",
+    color: "#67d8ff",
+    ring: createIrregularRing({
+      centerX,
+      centerY: centerY + 1800,
+      radiusX: 4700,
+      radiusY: 3900,
+      rotationDeg: 8,
+      scales: [1.12, 0.86, 0.94, 1.06, 0.82, 0.97, 1.04, 0.9, 1.08, 0.84],
+    }),
+  },
+  {
+    zoneId: `${historyId}-depth-4`,
+    depthLabel: "2.0~5.0m",
+    color: "#8f8bff",
+    ring: createIrregularRing({
+      centerX: centerX + 3200,
+      centerY: centerY + 3200,
+      radiusX: 2600,
+      radiusY: 2000,
+      rotationDeg: 26,
+      scales: [1.05, 0.82, 1.08, 0.88, 0.96, 0.78, 1.02, 0.9],
+    }),
+  },
+  {
+    zoneId: `${historyId}-depth-5`,
+    depthLabel: "5.0m 이상",
+    color: "#f2528b",
+    ring: createIrregularRing({
+      centerX: centerX + 400,
+      centerY: centerY - 3600,
+      radiusX: 1200,
+      radiusY: 1050,
+      rotationDeg: -10,
+      scales: [1, 0.8, 1.06, 0.84, 0.94, 0.76, 0.98],
+    }),
+  },
+];
+
+const normalizeDate = (value?: string | null) => {
+  const source = String(value ?? "").trim();
+  return /^\d{8}$/.test(source)
+    ? `${source.slice(0, 4)}-${source.slice(4, 6)}-${source.slice(6, 8)}`
+    : "";
+};
+
+const normalizeHm = (value?: string | null) => {
+  const digits = String(value ?? "").replace(/[^0-9]/g, "");
+  if (!digits) return "";
+  if (digits.length === 1) return `0${digits}:00`;
+  if (digits.length === 2) return `${digits}:00`;
+  if (digits.length === 3)
+    return `0${digits.slice(0, 1)}:${digits.slice(1, 3)}`;
+  return `${digits.slice(0, 2)}:${digits.slice(2, 4)}`;
+};
+
+const normalizeDateTime = (value?: string | null) => {
+  const source = String(value ?? "").trim();
+  if (!source) return "";
+  if (/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}$/.test(source)) return source;
+  const date = new Date(source);
+  if (Number.isNaN(date.getTime()))
+    return source.slice(0, 16).replace("T", " ");
+  const yyyy = date.getFullYear();
+  const mm = `${date.getMonth() + 1}`.padStart(2, "0");
+  const dd = `${date.getDate()}`.padStart(2, "0");
+  const hh = `${date.getHours()}`.padStart(2, "0");
+  const mi = `${date.getMinutes()}`.padStart(2, "0");
+  return `${yyyy}-${mm}-${dd} ${hh}:${mi}`;
+};
+
+const formatNumber = (value?: number | null, digits = 1, suffix = "") => {
+  const numeric = Number(value ?? 0);
+  return Number.isFinite(numeric)
+    ? `${numeric.toFixed(digits)}${suffix}`
+    : `0${suffix}`;
+};
+
+const formatInteger = (value?: number | null, suffix = "") => {
+  const numeric = Number(value ?? 0);
+  return Number.isFinite(numeric)
+    ? `${numeric.toLocaleString("ko-KR")}${suffix}`
+    : `0${suffix}`;
+};
+
+const formatOptionalNumber = (
+  value?: number | null,
+  digits = 1,
+  suffix = "",
+) => {
+  if (value === null || value === undefined) return "-";
+  const numeric = Number(value);
+  return Number.isFinite(numeric) ? `${numeric.toFixed(digits)}${suffix}` : "-";
+};
+
+const buildCauseDetailName = (item: FldngHstryApiItem) => {
+  const direct = String(item.dtlOcrnCsCn ?? "").trim();
+  if (direct) return direct;
+  const code = String(item.fldngCsDtlCd ?? "").trim();
+  return code ? `원인코드 ${code}` : "-";
+};
+
+const buildGradeLabel = (avgFloodDepthM: number) => {
+  if (avgFloodDepthM >= 2) return "3등급";
+  if (avgFloodDepthM >= 1) return "2등급";
+  return "1등급";
+};
+
+export const normalizeFldngHstryFilters = (
+  filters: FldngHstryFilters,
+): FldngHstryFilters => ({
+  ctpvCd: String(filters.ctpvCd ?? "0") || "0",
+  sggCd: String(filters.sggCd ?? "0") || "0",
+  floodYear: String(filters.floodYear ?? "")
+    .replace(/[^0-9]/g, "")
+    .slice(0, 4),
+  disasterName: String(filters.disasterName ?? "").trim(),
+  rainStartDate: String(filters.rainStartDate ?? "").trim(),
+  districtName: String(filters.districtName ?? "").trim(),
+});
+
+export const buildFldngHstryYearOptions = () => {
+  const currentYear = new Date().getFullYear();
+  return Array.from({ length: 30 }, (_, index) => String(currentYear - index));
+};
+
+export const buildFldngHstryListQueryString = (
+  filters: FldngHstryFilters,
+  page: number,
+  size: number,
+) => {
+  const normalized = normalizeFldngHstryFilters(filters);
+  const params = new URLSearchParams({
+    page: String(page - 1),
+    size: String(size),
+  });
+  appendApiSearchParams(params, {
+    ctpvCd: normalized.ctpvCd === "0" ? "0" : normalized.ctpvCd.slice(0, 2),
+    sggCd: normalized.sggCd === "0" ? "0" : normalized.sggCd.slice(0, 5),
+    fldngYr: normalized.floodYear,
+    fldngDstrNm: normalized.disasterName,
+    rainBgngTm: normalized.rainStartDate,
+    fldngDstrctNm: normalized.districtName,
+  });
+  return params.toString();
+};
+
+export const formatFldngHstryArea = (value: number) =>
+  Number(value ?? 0).toLocaleString("ko-KR", {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 2,
+  });
+
+export const formatFldngHstryDepth = (value: number) => value.toFixed(2);
+
+export const attachFldngHstryGeometry = (
+  item: FldngHstryApiItem,
+): FldngHstryItem => {
+  const historyId = String(item.fid ?? "");
+  const geometrySeed = buildGeometrySeed(historyId);
+  const startDate = normalizeDate(item.bgngYmd);
+  const endDate = normalizeDate(item.endYmd);
+  const startTime = normalizeHm(item.fldngBgngHm);
+  const endTime = normalizeHm(item.fldngEndHm);
+  const avgFloodDepthM = Number(item.avgFldngWtlv ?? 0);
+  const floodAreaHa = Number(item.fldngArea ?? 0);
+  return {
+    ...item,
+    historyId,
+    ctpvNm: "",
+    sggNm: "",
+    floodYear: String(item.fldngYr ?? "").trim(),
+    exmnYear: String(item.exmnYr ?? "").trim(),
+    disasterName: String(item.fldngDstrNm ?? "").trim(),
+    districtName: String(item.fldngDstrctNm ?? "").trim(),
+    floodAreaHa,
+    avgFloodDepthM,
+    floodDepthM: avgFloodDepthM,
+    gradeLabel: buildGradeLabel(avgFloodDepthM),
+    startDate,
+    endDate,
+    startTime,
+    endTime,
+    floodHour: formatNumber(Number(item.fldngHr ?? 0), 1),
+    causeDetailCode: String(item.fldngCsDtlCd ?? "").trim(),
+    causeDetailName: buildCauseDetailName(item),
+    damageAmount: formatInteger(Number(item.damAmt ?? 0)),
+    rainStartDateTime: normalizeDateTime(item.rainBgngTm),
+    rainEndDateTime: normalizeDateTime(item.rainEndTm),
+    rainStartTime: normalizeDateTime(item.rainBgngTm).slice(11, 16),
+    rainEndTime: normalizeDateTime(item.rainEndTm).slice(11, 16),
+    totalRainfallMm: Number(item.rainTot ?? 0),
+    rainfallIntensityMmHr: Number(item.rainStr ?? 0),
+    areaRing: createIrregularRing({
+      centerX: geometrySeed.centerX,
+      centerY: geometrySeed.centerY,
+      radiusX: geometrySeed.width / 2,
+      radiusY: geometrySeed.height / 2,
+      rotationDeg: 9,
+      scales: [1.08, 0.9, 1.04, 0.82, 0.98, 1.12, 0.88, 0.96, 1.03, 0.86],
+    }),
+    depthZones: createFldngHstryDepthZones(
+      historyId,
+      geometrySeed.centerX,
+      geometrySeed.centerY,
+    ),
+  };
+};
+
+export const toFldngHstryTableRows = (
+  items: FldngHstryItem[],
+  page: number,
+  pageSize = FLDNG_HSTRY_PAGE_SIZE,
+): FldngHstryTableRow[] =>
+  items.map((item, index) => ({
+    ...item,
+    rowNo: (page - 1) * pageSize + index + 1,
+    floodYearDisplay: item.floodYear || "-",
+    floodHourDisplay: item.floodHour || "-",
+    avgFloodDepthDisplay: formatFldngHstryDepth(item.avgFloodDepthM),
+    floodAreaDisplay: formatFldngHstryArea(item.floodAreaHa),
+    exmnYearDisplay: item.exmnYear || "-",
+    damageAmountDisplay: item.damageAmount || "-",
+    rainBgngTmDisplay: item.rainStartDateTime || "-",
+    rainEndTmDisplay: item.rainEndDateTime || "-",
+    rainTotDisplay: formatOptionalNumber(item.rainTot, 1),
+    rainStrDisplay: formatOptionalNumber(item.rainStr, 1),
+  }));
+
+const resolveFldngHstryNodeName = (node: any) =>
+  String(
+    node?.text ??
+      node?.data?.lyrNm ??
+      node?.data?.name ??
+      node?.lyrNm ??
+      node?.name ??
+      "",
+  ).trim();
+
+const resolveFldngHstryLayerType = (node: any) =>
+  String(
+    node?.data?.lyrTyNm ??
+      node?.data?.lyrTypeNm ??
+      node?.lyrTyNm ??
+      node?.lyrTypeNm ??
+      "",
+  ).trim();
+
+export const isFldngHstryNode = (node: any) => {
+  const name = resolveFldngHstryNodeName(node);
+  const layerType = resolveFldngHstryLayerType(node);
+  return (
+    name === FLDNG_HSTRY_LAYER_NAME ||
+    name === FLDNG_HSTRY_DEPTH_LAYER_NAME ||
+    layerType === FLDNG_HSTRY_LAYER_TYPE ||
+    layerType === FLDNG_HSTRY_DEPTH_LAYER_TYPE ||
+    layerType === FLDNG_HSTRY_PREVIEW_LAYER_TYPE
+  );
+};
+
+export const isFldngHstryWtlvNode = (node: any) => {
+  const name = resolveFldngHstryNodeName(node);
+  const layerType = resolveFldngHstryLayerType(node);
+  return (
+    name === FLDNG_HSTRY_LAYER_NAME || layerType === FLDNG_HSTRY_LAYER_TYPE
+  );
+};
+
+export const isFldngHstryDepthNode = (node: any) => {
+  const name = resolveFldngHstryNodeName(node);
+  const layerType = resolveFldngHstryLayerType(node);
+  return (
+    name === FLDNG_HSTRY_DEPTH_LAYER_NAME ||
+    layerType === FLDNG_HSTRY_DEPTH_LAYER_TYPE
+  );
+};
+
+export const isFldngHstryRootNode = (node: any) =>
+  resolveFldngHstryNodeName(node) === FLDNG_HSTRY_ROOT_NAME;

apps/sn/app/(map-layout)/map/components/floodDngrMap/FloodDngrMapPopupPage.tsx

@@ -1,3 +1,7 @@
+/**
+ * 화면명: 도시침수지도 목록
+ * 빈도별 도시침수지도를 검색하고 목록·엑셀·지도 보기 기능을 제공한다.
+ */
 "use client";
 
 import { useCallback, useEffect, useMemo, useState } from "react";
@@ -101,7 +105,7 @@ export default function FloodDngrMapPopupPage() {
             availableSggCodes.has(String(item.val).trim().slice(0, 5)),
           );
     return filters.ctpvCd === "0"
-      ? scopedOptions
+      ? []
       : scopedOptions.filter((item) =>
           String(item.val).startsWith(filters.ctpvCd.slice(0, 2)),
         );
@@ -151,7 +155,7 @@ export default function FloodDngrMapPopupPage() {
           FLOOD_DNGR_MAP_PAGE_SIZE,
         );
         const response = await getFloodDngrMapJson(
-          `/sewerage-service/api/v1/fldng/flood-dngr-map?${queryString}`,
+          `/sewerage-service/api/v1/fldng/floodDngrMap?${queryString}`,
         );
         const payload = response as {
           items?: FloodDngrMapApiItem[];
@@ -186,7 +190,7 @@ export default function FloodDngrMapPopupPage() {
   const loadAdministrativeScope = useCallback(async () => {
     try {
       const response = await getFloodDngrMapJson(
-        "/sewerage-service/api/v1/fldng/flood-dngr-map/scope",
+        "/sewerage-service/api/v1/fldng/floodDngrMap/scope",
       );
       if (!Array.isArray(response)) {
         throw new Error(
@@ -220,7 +224,7 @@ export default function FloodDngrMapPopupPage() {
         sbmrgFrqExpln: row.sbmrgFrqExpln,
       });
       const response = await getFloodDngrMapJson(
-        `/sewerage-service/api/v1/fldng/flood-dngr-map/group/extent?${params.toString()}`,
+        `/sewerage-service/api/v1/fldng/floodDngrMap/group/extent?${params.toString()}`,
       );
       const payload = response as FloodDngrMapExtent;
       const extent = [
@@ -390,8 +394,6 @@ export default function FloodDngrMapPopupPage() {
         onPageChange={(page) => void loadRows(page, appliedFilters)}
         onRowClick={(row) => void handleRowClick(row)}
         rowId={(row, index) => `${row.sggCd}-${row.sbmrgFrqExpln}-${index}`}
-        scrollMode="horizontal"
-        minTableWidth="120rem"
       />
     </StandardPopupLayout>
   );

apps/sn/app/(map-layout)/map/components/floodDngrMap/floodDngrMapTypes.ts

@@ -1,6 +1,8 @@
+/** 도시침수지도 화면의 검색 조건, 범례, 컬럼과 응답 변환을 정의한다. */
 "use client";
 
 import type { UiHeadProps } from "@common/business_components/ui";
+import { appendApiSearchParams } from "@/shared/util/util";
 
 export const FLOOD_DNGR_MAP_POPUP_KEY = "floodDngrMapPopup";
 export const FLOOD_DNGR_MAP_LAYER_TYPE = "tb_ms_flood_dngr_map";
@@ -89,16 +91,12 @@ export const buildFloodDngrMapListQueryString = (
     page: String(page),
     size: String(size),
   });
-  if (filters.ctpvCd && filters.ctpvCd !== "0")
-    params.set("ctpvCd", filters.ctpvCd.slice(0, 2));
-  if (filters.sggCd && filters.sggCd !== "0")
-    params.set("sggCd", filters.sggCd.slice(0, 5));
-  if (filters.sbmrgDpthlCd && filters.sbmrgDpthlCd !== "0") {
-    params.set("sbmrgDpthlCd", filters.sbmrgDpthlCd);
-  }
-  if (filters.sbmrgFrqExpln && filters.sbmrgFrqExpln !== "0") {
-    params.set("sbmrgFrqExpln", filters.sbmrgFrqExpln);
-  }
+  appendApiSearchParams(params, {
+    ctpvCd: filters.ctpvCd === "0" ? "0" : filters.ctpvCd.slice(0, 2),
+    sggCd: filters.sggCd === "0" ? "0" : filters.sggCd.slice(0, 5),
+    sbmrgDpthlCd: filters.sbmrgDpthlCd,
+    sbmrgFrqExpln: filters.sbmrgFrqExpln,
+  });
   return params.toString();
 };
 

apps/sn/app/(map-layout)/map/components/gisEdit/GisEditPipeSessionPopup.tsx

@@ -1,3 +1,7 @@
+/**
+ * 화면명: 하수관로 편집정보
+ * 편집 중인 하수관로의 기본정보와 입력정보를 표시하고 수정한다.
+ */
 "use client";
 
 import { useEffect, useMemo, useState } from "react";
@@ -283,7 +287,7 @@ export default function GisEditPipeSessionPopup({
 
     const fetchMngInstOptions = async () => {
       try {
-        const result = await getData("v1/fcltppl/mngInsts");
+        const result = await getData("v1/fcltPpl/mngInsts");
         if (!isMounted) return;
         setMngInstOptions(Array.isArray(result) ? result : []);
       } catch {
@@ -347,7 +351,7 @@ export default function GisEditPipeSessionPopup({
         const safeFcltMngNo = encodeURIComponent(fcltMngNo);
         const safeMngInstCd = encodeURIComponent(mngInstCd);
         const result = await getData(
-          `v1/fcltppl/${safeFcltMngNo}/${safeMngInstCd}`,
+          `v1/fcltPpl/${safeFcltMngNo}/${safeMngInstCd}`,
         );
         if (!isMounted || !result) return;
 

apps/sn/app/(map-layout)/map/components/gisEdit/GisEditSessionPanel.tsx

@@ -1,3 +1,7 @@
+/**
+ * 화면명: 하수관로 편집 세션
+ * 현재 편집 대상과 변경 상태를 표시하고 저장·취소 동작을 제공한다.
+ */
 "use client";
 
 import { Button } from "@common/components";

apps/sn/app/(map-layout)/map/components/gisEdit/GisEditToolbar.tsx

@@ -1,3 +1,7 @@
+/**
+ * 화면명: 하수관로 편집 도구
+ * 관로 추가·이동·꼭지점 편집·삭제 도구를 선택하고 제어한다.
+ */
 "use client";
 
 import { Check, Move, PenTool, Plus, Trash2, X } from "lucide-react";
@@ -55,7 +59,7 @@ export default function GisEditToolbar({
       data-testid="gis-edit-toolbar"
       className="absolute bottom-4 left-1/2 z-[60] flex w-[min(980px,calc(100%-2rem))] -translate-x-1/2 flex-col"
     >
-      <div className="card card-border !m-0 flex !bg-background !p-[0.8rem] shadow-[0_8px_24px_rgba(23,42,70,0.18)]">
+      <div className="card !m-0 flex !border-0 !bg-background !p-[0.8rem] shadow-[0_1px_2px_rgba(60,64,67,0.3),0_1px_3px_1px_rgba(60,64,67,0.15)]">
         <div className="flex w-full items-center gap-3 overflow-hidden">
           <div className="flex w-[168px] shrink-0 flex-col justify-center border-r border-border pr-3">
             <span className="whitespace-nowrap text-[1.3rem] font-semibold leading-5 text-label">

apps/sn/app/(map-layout)/map/components/gisEdit/gisEditTypes.ts

@@ -1,111 +1,2 @@
-export type GisEditTool = "ADD" | "MOVE" | "VERTEX_EDIT" | "DELETE";
-
-export type GisEditGeometryType = "Point" | "LineString" | "Polygon";
-
-export type GisEditPreviewColors = {
-  pointColor: string;
-  lineColor: string;
-  fillColor: string;
-};
-
-export type GisEditFeatureRef = {
-  fcltMngNo?: string;
-  mngInstCd?: string;
-  fid?: string;
-};
-
-export type GisEditPipeBasicInfo = {
-  [key: string]: string | null | undefined;
-  fcltMngNo?: string | null;
-  mngInstCd?: string | null;
-  instMngNo?: string | null;
-  instlYmd?: string | null;
-  mapshtNo?: string | null;
-  pdmtVl?: string | null;
-  prlgVl?: string | null;
-  usgCd?: string | null;
-  mqltCd?: string | null;
-  avgGrdn?: string | null;
-  drtwMltvArea?: string | null;
-  exclnMltvArea?: string | null;
-  tmptDpth?: string | null;
-  tmptMhlMngNo?: string | null;
-  scendDpth?: string | null;
-  scendMhlMngNo?: string | null;
-  trflnCnt?: string | null;
-  vrtcLen?: string | null;
-  wdthLen?: string | null;
-  instlMbdyCd?: string | null;
-  swtrmtZoneNm?: string | null;
-  mltvZoneNm?: string | null;
-  mltvDtdvNm?: string | null;
-  lineCd?: string | null;
-  floCd?: string | null;
-  layCd?: string | null;
-};
-
-export type GisEditLayerInfo = {
-  layerId: string;
-  layerName: string;
-  geometryType: GisEditGeometryType;
-  editableYn: "Y" | "N";
-  allowedTools: GisEditTool[];
-  previewColors: GisEditPreviewColors;
-  disabledReason?: string;
-};
-
-export type GisEditChange = {
-  changeId: string;
-  editType: GisEditTool;
-  layerId: string;
-  layerName: string;
-  objectId?: string;
-  fid?: string;
-  baseEditSn?: string;
-  featureRef?: GisEditFeatureRef;
-  objectLabel: string;
-  beforeGeometry?: Record<string, unknown> | null;
-  afterGeometry?: Record<string, unknown> | null;
-  featureProperties?: Record<string, unknown> | null;
-  basicInfo?: GisEditPipeBasicInfo | null;
-  basicInfoSavedAt?: string | null;
-  attributeOnly?: boolean;
-  summary: string;
-  createdAt: string;
-  source: "MAP_SELECTION" | "MAP_CENTER" | "MAP_DRAW";
-};
-
-export type GisEditSavePayload = {
-  screenId: string;
-  layerId: string;
-  layerName: string;
-  saveTargetType: "VERSION" | "FINAL";
-  view: {
-    srs: string;
-    bbox: string | null;
-  };
-  changes: Array<{
-    changeId: string;
-    editType: GisEditTool;
-    objectId?: string;
-    clientTempId?: string;
-    fid?: string;
-    baseEditSn?: string;
-    featureRef?: GisEditFeatureRef;
-    attributes?: GisEditPipeBasicInfo | null;
-    beforeGeometry?: Record<string, unknown> | null;
-    afterGeometry?: Record<string, unknown> | null;
-    geometry?: Record<string, unknown> | null;
-  }>;
-};
-
-export type GisEditSessionSnapshot = {
-  isEditMode: boolean;
-  selectedLayerName: string;
-  activeTool: GisEditTool | null;
-  isSnapEnabled: boolean;
-  changes: GisEditChange[];
-  lastSavedPayload: GisEditSavePayload | null;
-  canUndo: boolean;
-  focusedChangeId: string | null;
-};
+/** GIS 편집 모델은 기능이 소유하고 기존 화면 import 경로는 유지한다. */
+export * from "@/features/gisEdit/model/types";

apps/sn/app/(map-layout)/map/components/gisEdit/useGisEdit.ts

@@ -1,484 +1,37 @@
+/** 하수관로 GIS 편집 도구의 선택 상태와 변경 내역을 관리하는 훅이다. */
 "use client";
 
 import { useCallback, useMemo, useRef, useState } from "react";
-import GeoJSON from "ol/format/GeoJSON.js";
+import {
+  type GisEditInteractionRequest,
+  isActionableChange,
+  isGeometryChange,
+  buildPreviewFocusMessage,
+  FLOW_DIRECTION_SRS,
+  SCREEN_ID,
+  buildPipeSaveAttributes,
+  EMPTY_GIS_EDIT_PIPE_BASIC_INFO,
+  normalizeGeometryType,
+  collectEditableLayers,
+  toGeometryObject,
+  buildBbox,
+  getFeatureLayerId,
+  getFeatureObjectId,
+  getFeatureObjectLabel,
+  getFeatureRef,
+  getFeatureProperties,
+  normalizePipeGeometry,
+  createChangeId,
+} from "@/features/gisEdit";
+export { EMPTY_GIS_EDIT_PIPE_BASIC_INFO } from "@/features/gisEdit";
 
 import type {
   GisEditChange,
-  GisEditFeatureRef,
-  GisEditGeometryType,
-  GisEditLayerInfo,
   GisEditPipeBasicInfo,
-  GisEditPreviewColors,
   GisEditSavePayload,
   GisEditTool,
 } from "./gisEditTypes";
 
-type GisEditInteractionRequest = {
-  changeId: string;
-  editType: "MOVE" | "VERTEX_EDIT";
-};
-
-const isActionableChange = (change: GisEditChange) =>
-  !change.attributeOnly || Boolean(change.basicInfoSavedAt);
-
-const isGeometryChange = (change: GisEditChange) =>
-  !change.attributeOnly && change.editType !== "ADD";
-
-const buildPreviewFocusMessage = (
-  change: Pick<GisEditChange, "editType" | "layerName" | "objectLabel">,
-) => {
-  if (change.editType === "MOVE") {
-    return `${change.layerName} ${change.objectLabel} 미리보기 객체를 드래그해 위치를 조정하세요.`;
-  }
-  if (change.editType === "VERTEX_EDIT") {
-    return `${change.layerName} ${change.objectLabel}의 주황색 실꼭지점을 드래그하거나, 선분 위 흰색 midpoint를 끌어 새 꼭지점을 추가하세요.`;
-  }
-  if (change.editType === "DELETE") {
-    return `${change.layerName} ${change.objectLabel} 삭제 미리보기를 유지 중입니다.`;
-  }
-  return `${change.layerName} ${change.objectLabel} 신규 객체 미리보기를 확인하세요.`;
-};
-
-const EDITABLE_LAYER_RULES: Record<
-  string,
-  Omit<GisEditLayerInfo, "layerId" | "editableYn">
-> = {
-  tb_ms_swage_ppl: {
-    layerName: "하수관로",
-    geometryType: "LineString",
-    allowedTools: ["ADD", "MOVE", "VERTEX_EDIT", "DELETE"],
-    previewColors: {
-      pointColor: "rgba(22, 163, 74, 0.92)",
-      lineColor: "rgba(22, 163, 74, 0.95)",
-      fillColor: "rgba(22, 163, 74, 0.18)",
-    },
-  },
-  tb_ms_swage_mhl: {
-    layerName: "하수맨홀",
-    geometryType: "Point",
-    allowedTools: ["ADD", "MOVE", "DELETE"],
-    previewColors: {
-      pointColor: "rgba(5, 150, 105, 0.92)",
-      lineColor: "rgba(5, 150, 105, 0.95)",
-      fillColor: "rgba(5, 150, 105, 0.18)",
-    },
-  },
-  tb_ms_swage_pmstn: {
-    layerName: "하수펌프장",
-    geometryType: "Point",
-    allowedTools: ["ADD", "MOVE", "DELETE"],
-    previewColors: {
-      pointColor: "rgba(59, 130, 246, 0.92)",
-      lineColor: "rgba(59, 130, 246, 0.95)",
-      fillColor: "rgba(59, 130, 246, 0.18)",
-    },
-  },
-  tb_il_swage_prcs_fclt: {
-    layerName: "하수처리시설",
-    geometryType: "Point",
-    allowedTools: ["ADD", "MOVE", "DELETE"],
-    previewColors: {
-      pointColor: "rgba(168, 85, 247, 0.92)",
-      lineColor: "rgba(168, 85, 247, 0.95)",
-      fillColor: "rgba(168, 85, 247, 0.18)",
-    },
-  },
-  tb_ms_swage_prcs_zone: {
-    layerName: "하수처리구역",
-    geometryType: "Polygon",
-    allowedTools: ["ADD", "MOVE", "VERTEX_EDIT", "DELETE"],
-    previewColors: {
-      pointColor: "rgba(249, 115, 22, 0.92)",
-      lineColor: "rgba(249, 115, 22, 0.95)",
-      fillColor: "rgba(249, 115, 22, 0.22)",
-    },
-  },
-  tb_ms_stofcbr: {
-    layerName: "우수토실",
-    geometryType: "Point",
-    allowedTools: ["ADD", "MOVE", "DELETE"],
-    previewColors: {
-      pointColor: "rgba(234, 88, 12, 0.92)",
-      lineColor: "rgba(234, 88, 12, 0.95)",
-      fillColor: "rgba(234, 88, 12, 0.18)",
-    },
-  },
-  om_dt_untrt_swg_rain: {
-    layerName: "중점우수토실",
-    geometryType: "Point",
-    allowedTools: ["ADD", "MOVE", "DELETE"],
-    previewColors: {
-      pointColor: "rgba(220, 38, 38, 0.92)",
-      lineColor: "rgba(220, 38, 38, 0.95)",
-      fillColor: "rgba(220, 38, 38, 0.18)",
-    },
-  },
-};
-
-const FLOW_DIRECTION_SRS = "EPSG:5179";
-const SCREEN_ID = "SN_MN010301";
-const GIS_EDIT_ALLOWED_LAYER_IDS = new Set(["tb_ms_swage_ppl"]);
-const GIS_EDIT_PIPE_ATTRIBUTE_FIELD_IDS = [
-  "mngInstCd",
-  "fcltMngNo",
-  "instMngNo",
-  "instlYmd",
-  "mapshtNo",
-  "pdmtVl",
-  "prlgVl",
-  "usgCd",
-  "mqltCd",
-  "avgGrdn",
-  "drtwMltvArea",
-  "exclnMltvArea",
-  "tmptDpth",
-  "tmptMhlMngNo",
-  "scendDpth",
-  "scendMhlMngNo",
-  "trflnCnt",
-  "vrtcLen",
-  "wdthLen",
-  "instlMbdyCd",
-  "swtrmtZoneNm",
-  "mltvZoneNm",
-  "mltvDtdvNm",
-  "lineCd",
-  "floCd",
-  "layCd",
-] as const;
-
-const buildPipeSaveAttributes = (basicInfo: GisEditPipeBasicInfo | null | undefined) => {
-  if (!basicInfo) return undefined;
-
-  return GIS_EDIT_PIPE_ATTRIBUTE_FIELD_IDS.reduce<GisEditPipeBasicInfo>((acc, fieldId) => {
-    if (!Object.prototype.hasOwnProperty.call(basicInfo, fieldId)) return acc;
-
-    const value = basicInfo[fieldId];
-    const normalizedValue = fieldId === "instlYmd" ? String(value ?? "").replaceAll("-", "") : value;
-    acc[fieldId] =
-      typeof normalizedValue === "string" && normalizedValue.trim() === ""
-        ? null
-        : normalizedValue;
-    return acc;
-  }, {});
-};
-
-export const EMPTY_GIS_EDIT_PIPE_BASIC_INFO: GisEditPipeBasicInfo = {
-  mngInstCd: "",
-  fcltMngNo: "",
-  instMngNo: "",
-  instlYmd: "",
-  usgCd: "",
-  instlMbdyCd: "",
-  swtrmtZoneNm: "",
-  mltvZoneNm: "",
-  mltvDtdvNm: "",
-  lineCd: "",
-  floCd: "",
-  layCd: "",
-};
-
-const normalizeLayerIdCandidate = (value: unknown) => {
-  const raw = String(value ?? "").trim();
-  if (!raw) return "";
-
-  const withoutNamespace = raw.includes(":") ? raw.split(":").pop() ?? raw : raw;
-  return withoutNamespace.split(".")[0] ?? withoutNamespace;
-};
-
-// 현재 레이어 트리 구조 안에서 실제 편집 대상으로 풀 수 있는 레이어만 추출한다.
-const getLayerTypeName = (layerInfo: any) =>
-  String(layerInfo?.lyrTyNm ?? layerInfo?.lyrTypeNm ?? layerInfo?.lyr_type_nm ?? "").trim();
-
-const getLayerName = (layerInfo: any) =>
-  String(layerInfo?.lyrNm ?? layerInfo?.name ?? "").trim();
-
-const normalizeGeometryType = (value: unknown): GisEditGeometryType => {
-  const normalized = String(value ?? "").toLowerCase();
-  if (normalized.includes("polygon")) return "Polygon";
-  if (normalized.includes("line")) return "LineString";
-  return "Point";
-};
-
-const getColorString = (value: unknown) => {
-  const resolved = String(value ?? "").trim();
-  return resolved || null;
-};
-
-const withAlpha = (color: string | null | undefined, alpha: number) => {
-  const resolvedColor = String(color ?? "").trim();
-  if (!resolvedColor) return null;
-
-  const rgbaMatch = resolvedColor.match(/^rgba?\(([^)]+)\)$/i);
-  if (rgbaMatch) {
-    const [red = "40", green = "90", blue = "180"] = (rgbaMatch[1] ?? "")
-      .split(",")
-      .map((part) => part.trim());
-    return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
-  }
-
-  const hexMatch = resolvedColor.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
-  if (hexMatch) {
-    const hex = hexMatch[1] ?? "";
-    const normalized = hex.length === 3
-      ? hex.split("").map((char) => char + char).join("")
-      : hex;
-    const red = parseInt(normalized.slice(0, 2), 16);
-    const green = parseInt(normalized.slice(2, 4), 16);
-    const blue = parseInt(normalized.slice(4, 6), 16);
-    return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
-  }
-
-  return resolvedColor;
-};
-
-const resolvePreviewColors = (
-  layerInfo: any,
-  fallback: GisEditPreviewColors,
-): GisEditPreviewColors => {
-  const lineColor =
-    withAlpha(
-      getColorString(
-        layerInfo?.lineColr ??
-        layerInfo?.line_colr ??
-        layerInfo?.lineColor ??
-        layerInfo?.fontInsdColr ??
-        layerInfo?.font_insd_colr,
-      ),
-      0.95,
-    ) ?? fallback.lineColor;
-  const pointColor =
-    withAlpha(
-      getColorString(
-        layerInfo?.lineColr ??
-        layerInfo?.line_colr ??
-        layerInfo?.fontInsdColr ??
-        layerInfo?.font_insd_colr ??
-        layerInfo?.fontExtnlColr ??
-        layerInfo?.font_extnl_colr,
-      ),
-      0.92,
-    ) ?? fallback.pointColor;
-  const fillColor =
-    withAlpha(
-      getColorString(
-        layerInfo?.spacColr ??
-        layerInfo?.spac_colr ??
-        layerInfo?.spaceColor ??
-        layerInfo?.lineColr ??
-        layerInfo?.line_colr,
-      ),
-      0.22,
-    ) ?? fallback.fillColor;
-
-  return {
-    pointColor,
-    lineColor,
-    fillColor,
-  };
-};
-
-// 현행 운영 기준상 GIS 편집은 하수관로만 다루므로 treeData에서도 해당 레이어만 추린다.
-const collectEditableLayers = (treeData: any[]): GisEditLayerInfo[] => {
-  const results = new Map<string, GisEditLayerInfo>();
-
-  const visit = (items: any[]) => {
-    items.forEach((item) => {
-      const data = item?.data ?? item;
-      const layerTypeName = getLayerTypeName(data);
-      const layerRule = EDITABLE_LAYER_RULES[layerTypeName];
-
-      if (
-        layerRule &&
-        GIS_EDIT_ALLOWED_LAYER_IDS.has(layerTypeName) &&
-        !results.has(layerTypeName)
-      ) {
-        results.set(layerTypeName, {
-          layerId: layerTypeName,
-          layerName: layerRule.layerName,
-          geometryType: layerRule.geometryType,
-          editableYn: "Y",
-          allowedTools: layerRule.allowedTools,
-          previewColors: resolvePreviewColors(data, layerRule.previewColors),
-        });
-      }
-
-      if (Array.isArray(item?.children)) {
-        visit(item.children);
-      }
-      if (Array.isArray(data?.children)) {
-        visit(data.children);
-      }
-    });
-  };
-
-  visit(Array.isArray(treeData) ? treeData : []);
-
-  if (results.size === 0) {
-    Object.entries(EDITABLE_LAYER_RULES).forEach(([layerId, layerRule]) => {
-      if (!GIS_EDIT_ALLOWED_LAYER_IDS.has(layerId)) return;
-      results.set(layerId, {
-        layerId,
-        layerName: layerRule.layerName,
-        geometryType: layerRule.geometryType,
-        editableYn: "Y",
-        allowedTools: layerRule.allowedTools,
-        previewColors: layerRule.previewColors,
-      });
-    });
-  }
-
-  return Array.from(results.values());
-};
-
-// 지도에서 선택한 OpenLayers Feature의 현재 geometry를 저장 payload 형태로 스냅샷한다.
-const toGeometryObject = (featureData: any) => {
-  if (!featureData || typeof featureData.getGeometry !== "function") return null;
-
-  try {
-    return new GeoJSON().writeGeometryObject(featureData.getGeometry(), {
-      featureProjection: FLOW_DIRECTION_SRS,
-      dataProjection: FLOW_DIRECTION_SRS,
-    }) as Record<string, unknown>;
-  } catch (error) {
-    console.error("GIS 편집 geometry 변환 실패:", error);
-    return null;
-  }
-};
-
-// 저장 시점의 지도 범위를 함께 남겨 BE가 편집 세션 컨텍스트를 해석할 수 있게 한다.
-const buildBbox = (map: any) => {
-  try {
-    const size = map?.getSize?.();
-    const view = map?.getView?.();
-    if (!size || !view?.calculateExtent) return null;
-    return view.calculateExtent(size).map((value: number) => value.toFixed(3)).join(",");
-  } catch (error) {
-    console.error("GIS 편집 BBOX 계산 실패:", error);
-    return null;
-  }
-};
-
-const getFeatureLayerId = (featureData: any) => {
-  if (typeof featureData?.get === "function") {
-    const previewLayerId = normalizeLayerIdCandidate(featureData.get("layerId"));
-    if (previewLayerId) return previewLayerId;
-  }
-  if (typeof featureData?.getId === "function") {
-    return normalizeLayerIdCandidate(featureData.getId());
-  }
-  if (typeof featureData?.id_ === "string") {
-    return normalizeLayerIdCandidate(featureData.id_);
-  }
-  return normalizeLayerIdCandidate(featureData?.lyrTypeNm ?? featureData?.lyrTyNm ?? "");
-};
-
-const stripLayerPrefix = (value: unknown) => {
-  const raw = String(value ?? "").trim();
-  if (!raw) return "";
-
-  const withoutNamespace = raw.includes(":") ? raw.split(":").pop() ?? raw : raw;
-  if (withoutNamespace.startsWith("tb_ms_swage_ppl.")) {
-    return withoutNamespace.slice("tb_ms_swage_ppl.".length);
-  }
-  return withoutNamespace;
-};
-
-const getFeatureFid = (featureData: any) =>
-  stripLayerPrefix(
-    featureData?.get?.("fid") ??
-      featureData?.values_?.fid ??
-      featureData?.fid ??
-      featureData?.getId?.() ??
-      featureData?.id_ ??
-      "",
-  );
-
-const getFeatureObjectId = (featureData: any) =>
-  String(
-    getFeatureFid(featureData) ||
-      String(
-        featureData?.get?.("objectId") ??
-          featureData?.values_?.fclt_mng_no ??
-          featureData?.values_?.swtrmt_fclt_cd ??
-          featureData?.fcltMngNo ??
-          featureData?.fid ??
-          "",
-      ),
-  ).trim();
-
-const getFeatureObjectLabel = (featureData: any) => {
-  const values = featureData?.values_ ?? {};
-  return String(
-    featureData?.get?.("fclt_mng_no") ??
-      values?.fclt_mng_no ??
-      featureData?.fcltMngNo ??
-      featureData?.get?.("objectId") ??
-      values?.swtrmt_fclt_cd ??
-      getFeatureFid(featureData) ??
-      "",
-  ).trim();
-};
-
-const getFeatureRef = (featureData: any): GisEditFeatureRef | undefined => {
-  const mapValues = featureData?.values_ ?? {};
-  const featureRef: GisEditFeatureRef = {
-    fcltMngNo: String(
-      featureData?.get?.("fclt_mng_no") ??
-      mapValues?.fclt_mng_no ??
-      featureData?.fcltMngNo ??
-      "",
-    ).trim() || undefined,
-    mngInstCd: String(
-      featureData?.get?.("mng_inst_cd") ??
-      mapValues?.mng_inst_cd ??
-      featureData?.mngInstCd ??
-      "",
-    ).trim() || undefined,
-    fid: getFeatureFid(featureData) || undefined,
-  };
-
-  if (!featureRef.fcltMngNo && !featureRef.mngInstCd && !featureRef.fid) {
-    return undefined;
-  }
-
-  return featureRef;
-};
-
-// 선택한 원본 관로의 속성 snapshot을 보관해 preview 재선택 시 상세정보가 비지 않게 한다.
-const getFeatureProperties = (featureData: any): Record<string, unknown> | null => {
-  const values = featureData?.values_ ?? featureData?.getProperties?.() ?? featureData;
-  if (!values || typeof values !== "object") return null;
-
-  const { geometry, ...properties } = values;
-  return properties;
-};
-
-const normalizePipeGeometry = (
-  layerId: string,
-  geometry: Record<string, unknown> | null,
-): Record<string, unknown> | null => {
-  if (layerId !== "tb_ms_swage_ppl" || !geometry) return geometry;
-  if (geometry.type !== "LineString") return geometry;
-
-  const coordinates = geometry.coordinates;
-  if (!Array.isArray(coordinates)) return geometry;
-
-  return {
-    ...geometry,
-    type: "MultiLineString",
-    coordinates: [coordinates],
-  };
-};
-
-const createChangeId = (prefix: string, sequence: number) => {
-  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
-    return `${prefix}-${crypto.randomUUID()}`;
-  }
-  return `${prefix}-${Date.now()}-${sequence}`;
-};
-
 export const useGisEdit = (treeData: any[]) => {
   const editableLayers = useMemo(() => collectEditableLayers(treeData), [treeData]);
   // GIS 편집 모드 on/off는 우측 분석 메뉴의 GIS 편집 버튼과 직접 연결된다.

apps/sn/app/(map-layout)/map/components/gisEdit/useGisEditCommonCodes.ts

@@ -1,3 +1,4 @@
+/** 하수관로 GIS 편집에 필요한 공통코드를 조회하는 훅이다. */
 "use client";
 
 import { useEffect, useState } from "react";

apps/sn/app/(map-layout)/map/components/gisManagement/GisManagementPopupPage.tsx

@@ -1,3 +1,7 @@
+/**
+ * 화면명: GIS 관리
+ * GIS 자료 업로드 이력을 조회하고 등록·검증·반영 기능을 제공한다.
+ */
 "use client";
 
 import type { ChangeEvent } from "react";
@@ -6,16 +10,7 @@ import {
   StandardPopupLayout,
   type UiHeadProps,
 } from "@common/business_components";
-import {
-  Button,
-  Input,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@common/components";
+import { Button, Input } from "@common/components";
 
 import {
   getBlobDataWithHeaders,
@@ -25,43 +20,23 @@ import {
 } from "@/components/lib/api";
 import LoadingOverlay from "@/components/ui/LoadingBar";
 import { windowPopupDefinitions } from "@/features/windowPopup/model/popupDefinitions";
-import { WINDOW_POPUP_MESSAGE_TYPE } from "@/features/windowPopup/model/types";
 import MapPopupDataTable from "@/features/windowPopup/ui/MapPopupDataTable";
 import { useAlertStore } from "@/shared/lib";
 import { useUserStore } from "@/shared/lib/use-user-store";
 import GisUploadPreviewMap from "./GisUploadPreviewMap";
 import PopupSearchPanel from "@/features/windowPopup/ui/PopupSearchPanel";
 import { useGisManagementCommonCodes } from "./useGisManagementCommonCodes";
+import type { UploadFacilityType, MngInstOption, UploadHistoryItem, GisUploadResponse, ValidationErrorItem, ViewMode } from "@/features/gisManagement/model/upload-types";
+import { getLocalizedValidationErrorMessage, getFileExtension, formatDateTime, toScopeKey, buildManagementLabel, getErrorMessage } from "@/features/gisManagement/lib/upload-display";
+import { createGisDownloadClient, saveBlob } from "@/features/gisManagement/api/gis-download";
+import { postRefreshMessageToOpener } from "@/features/gisManagement/lib/popup-refresh";
 
-type UploadFacilityType = {
-  facilityTypeCode: string;
-  facilityTypeName: string;
-  layerId: string;
-  allowedExtensions: string[];
-  maxFileSizeMb: number;
-  requiredDownloadFormat: string;
-};
+import { createGisUploadRetryGuard, getGisPartialSuccessNotice } from "@/features/gisManagement";
 
-type MngInstOption = {
-  mngInstCd: string;
-  lwrInstNm: string;
-};
+// 기존 전송 경로를 유지하며 다운로드 작업의 비동기 처리는 기능 모듈에 위임한다.
+const { downloadGeoPackage, startDownloadJob, waitForDownloadJob } =
+  createGisDownloadClient({ getData, postRawJson, getBlobDataWithHeaders });
 
-type UploadHistoryItem = {
-  uploadId: string;
-  downloadId?: string;
-  mngInstCd?: string | null;
-  mngInstNm?: string | null;
-  fileName: string;
-  status?: string;
-  totalCount?: number | null;
-  changedCount?: number | null;
-  invalidCount?: number | null;
-  registeredAt: string;
-  registeredBy: string;
-  registeredByName?: string | null;
-  message?: string | null;
-};
 
 type UploadHistoryRow = UploadHistoryItem &
   Record<string, unknown> & {
@@ -81,45 +56,23 @@ const GIS_UPLOAD_HISTORY_HEADLIST: UiHeadProps[] = [
   { id: "registeredByLabel", title: "등록자", widthPercent: 11 },
 ];
 
-type GisUploadResponse = {
-  uploadId: string;
-  status: "COMPLETED" | "VALIDATION_FAILED" | string;
-  mapRefreshRequired?: boolean;
-  refreshLayerTypeNames?: string[];
-  validationErrors?: ValidationErrorItem[];
-  message?: string;
-};
 
-type ValidationErrorItem = {
-  rowNo?: number | null;
-  fid?: string | null;
-  errorCode?: string | null;
-  errorMessage?: string | null;
-};
+/** 오류 원본 행번호와 공통 표의 역순 순번을 별도 열로 표시한다. */
+const GIS_VALIDATION_ERROR_HEADLIST: UiHeadProps[] = [
+  { id: "no", title: "순번", widthPercent: 8 },
+  { id: "sourceRowNo", title: "행번호", widthPercent: 10 },
+  { id: "fid", title: "FID", widthPercent: 22 },
+  { id: "errorMessage", title: "오류내용", align: "left", widthPercent: 60 },
+];
 
-type ViewMode = "history" | "validationErrors" | "preview";
-
-type DownloadJob = {
-  jobId: string;
-  status: "QUEUED" | "RUNNING" | "READY" | "FAILED" | string;
-  message?: string | null;
-  errorCode?: string | null;
-  downloadId?: string | null;
-  fileName?: string | null;
-  retryAfterMillis?: number | null;
-};
-
-type DownloadJobStatusListener = (job: DownloadJob) => void;
 
 const SCREEN_ID = "SN_MN010302";
 const FACILITY_TYPE_CODE = "PPL";
 const LAYER_ID = "tb_ms_swage_ppl";
 const GIS_UPLOAD_PAGE_SIZE = 10;
+const GIS_ERROR_PAGE_SIZE = 10;
 const SELECT_MNG_INST_VALUE = "";
 // A current/history download is an idempotent GET, so one retry is safe after a transient connection drop.
-const DOWNLOAD_NETWORK_RETRY_DELAY_MS = 500;
-const DOWNLOAD_JOB_POLL_INTERVAL_MS = 1_000;
-const DOWNLOAD_JOB_MAX_WAIT_MS = 30 * 60 * 1_000;
 const DEFAULT_FACILITY: UploadFacilityType = {
   facilityTypeCode: FACILITY_TYPE_CODE,
   facilityTypeName: "하수관로",
@@ -129,175 +82,24 @@ const DEFAULT_FACILITY: UploadFacilityType = {
   requiredDownloadFormat: "GPKG",
 };
 
-/** 백엔드 검증 코드를 사용자가 이해할 수 있는 한글 오류내용으로 변환한다. */
-const GIS_VALIDATION_ERROR_MESSAGES: Record<string, string> = {
-  GIS_UPLOAD_MNG_INST_MISMATCH:
-    "선택한 관리기관과 다른 관로가 포함되어 있습니다.",
-  GIS_UPLOAD_FID_DUPLICATED: "업로드 파일에 중복된 시설물 식별번호가 있습니다.",
-  GIS_UPLOAD_DELETE_LIMIT_EXCEEDED:
-    "삭제 대상 건수가 허용 범위를 초과했습니다.",
-};
 
-/** 형상 오류는 같은 오류코드 안에서도 누락과 형식 오류를 구분해 안내한다. */
-const getLocalizedValidationErrorMessage = (error: ValidationErrorItem) => {
-  const errorCode = String(error.errorCode ?? "").trim();
-  const errorMessage = String(error.errorMessage ?? "").trim();
 
-  if (errorCode === "GIS_UPLOAD_INVALID_GEOMETRY") {
-    return errorMessage.toLowerCase().includes("없는 feature")
-      ? "공간정보가 없는 시설물입니다."
-      : "하수관로는 선 또는 다중선 형식의 공간정보만 업로드할 수 있습니다.";
-  }
 
-  const localizedMessage = GIS_VALIDATION_ERROR_MESSAGES[errorCode];
-  if (localizedMessage) {
-    const count = errorMessage.match(/count\s*=\s*(\d+)/i)?.[1];
-    return count ? `${localizedMessage} (대상: ${count}건)` : localizedMessage;
-  }
 
-  // 서버가 완전한 한글 문구를 제공한 신규 오류만 보존하고 영문이 섞인 문구는 일반 안내로 대체한다.
-  return /[가-힣]/.test(errorMessage) && !/[A-Za-z]/.test(errorMessage)
-    ? errorMessage
-    : "업로드 파일 검증 중 오류가 발생했습니다.";
-};
 
-const getFileExtension = (fileName: string) => {
-  const lastDotIndex = fileName.lastIndexOf(".");
-  if (lastDotIndex < 0) return "";
-  return fileName.slice(lastDotIndex).toLowerCase();
-};
-
-const formatDateTime = (value?: string | null) => {
-  if (!value) return "-";
-  return value.replace("T", " ").slice(0, 19);
-};
-
-const toScopeKey = (mngInstCd: string) => mngInstCd || "__UNSELECTED__";
-
-const buildManagementLabel = (
-  mngInstCd?: string | null,
-  mngInstNm?: string | null,
-) => {
-  if (!mngInstCd) return "-";
-  return mngInstNm || mngInstCd;
-};
-
-// Chrome reports an interrupted fetch as TypeError without an HTTP response.
-const isDownloadNetworkError = (error: unknown) => {
-  if (!(error instanceof TypeError)) return false;
-  const message = error.message.toLowerCase();
-  return (
-    message.includes("failed to fetch") || message.includes("networkerror")
-  );
-};
-
-// Retry only transport failures; HTTP validation and server errors must be shown immediately.
-const downloadGeoPackage = async (url: string) => {
-  try {
-    return await getBlobDataWithHeaders(url);
-  } catch (error) {
-    if (!isDownloadNetworkError(error)) throw error;
-    console.warn("GIS 다운로드 연결이 중단되어 1회 재시도합니다.", error);
-    await new Promise((resolve) =>
-      window.setTimeout(resolve, DOWNLOAD_NETWORK_RETRY_DELAY_MS),
-    );
-    return getBlobDataWithHeaders(url);
-  }
-};
-
-// 파일 생성 요청과 상태 조회를 짧은 HTTP 요청으로 분리해 서버의 10초 요청 제한을 넘지 않는다.
-const startDownloadJob = async (url: string): Promise<DownloadJob> => {
-  const response = await postRawJson(url, {});
-  const job = (response?.data ?? response) as DownloadJob | null;
-  if (!job?.jobId) {
-    throw new Error("다운로드 작업 접수 정보를 확인하지 못했습니다.");
-  }
-  return job;
-};
-
-const waitForDownloadJob = async (
-  jobId: string,
-  onStatus?: DownloadJobStatusListener,
-): Promise<DownloadJob> => {
-  const startedAt = Date.now();
-  while (Date.now() - startedAt < DOWNLOAD_JOB_MAX_WAIT_MS) {
-    const job = (await getData(
-      `v1/map/gisDownloadJobs/${encodeURIComponent(jobId)}`,
-    )) as DownloadJob;
-    onStatus?.(job);
-    if (job?.status === "READY") return job;
-    if (job?.status === "FAILED") {
-      throw new Error(
-        job.message || "GeoPackage 다운로드 파일 생성에 실패했습니다.",
-      );
-    }
-    const retryAfter = Math.max(
-      Number(job?.retryAfterMillis) || DOWNLOAD_JOB_POLL_INTERVAL_MS,
-      DOWNLOAD_JOB_POLL_INTERVAL_MS,
-    );
-    await new Promise((resolve) => window.setTimeout(resolve, retryAfter));
-  }
-  throw new Error(
-    "GeoPackage 파일 생성 대기 시간이 초과되었습니다. 다시 시도하세요.",
-  );
-};
-
-// Keep the object URL alive until Chrome has accepted the synthetic download click.
-const saveBlob = (blob: Blob, fileName: string) => {
-  const url = window.URL.createObjectURL(blob);
-  const anchor = document.createElement("a");
-  anchor.href = url;
-  anchor.download = fileName;
-  document.body.appendChild(anchor);
-  anchor.click();
-  anchor.remove();
-  window.setTimeout(() => window.URL.revokeObjectURL(url), 1_000);
-};
-
-const getErrorMessage = (error: unknown, fallback: string) => {
-  const apiError = error as any;
-  return (
-    apiError?.response?.data?.message ??
-    apiError?.response?.data?.data?.message ??
-    apiError?.body?.message ??
-    apiError?.message ??
-    fallback
-  );
-};
-
-const postRefreshMessageToOpener = (response: GisUploadResponse) => {
-  if (
-    !response.mapRefreshRequired ||
-    typeof window === "undefined" ||
-    !window.opener
-  ) {
-    return;
-  }
-
-  window.opener.postMessage(
-    {
-      type: WINDOW_POPUP_MESSAGE_TYPE.GIS_UPLOAD_COMPLETED,
-      payload: {
-        refreshLayerTypeNames: JSON.stringify(
-          response.refreshLayerTypeNames ?? [LAYER_ID],
-        ),
-      },
-    },
-    window.location.origin,
-  );
-};
 
 export default function GisManagementPopupPage() {
   const alert = useAlertStore((state) => state.setMessage);
   const userInfo = useUserStore((state) => state.userInfo);
   // GIS 관리 코드값은 기존 분기에 사용하고 CMS 공통코드명은 화면 안내에만 사용한다.
-  const {
-    uploadStatusLabels,
-    downloadStatusLabels,
-    facilityTypeLabels,
-  } = useGisManagementCommonCodes();
+  const { uploadStatusLabels, downloadStatusLabels, facilityTypeLabels } =
+    useGisManagementCommonCodes();
   // 파일 input은 브라우저 보안 정책상 value 직접 제어가 제한돼 ref로 선택/초기화한다.
   const fileInputRef = useRef<HTMLInputElement | null>(null);
+  // 파일명·기관 선택을 바꿔도 부분 성공 업로드 차단을 같은 팝업 세션에 유지한다.
+  const uploadRetryGuardRef = useRef<ReturnType<typeof createGisUploadRetryGuard> | null>(null);
+  if (!uploadRetryGuardRef.current) uploadRetryGuardRef.current = createGisUploadRetryGuard();
+  const uploadRetryGuard = uploadRetryGuardRef.current;
 
   const [facility, setFacility] =
     useState<UploadFacilityType>(DEFAULT_FACILITY);
@@ -313,6 +115,10 @@ export default function GisManagementPopupPage() {
   const [validationErrors, setValidationErrors] = useState<
     ValidationErrorItem[]
   >([]);
+  // 오류 페이지는 이력 목록의 선택·페이지와 독립적으로 업로드 ID에 고정한다.
+  const [errorUploadId, setErrorUploadId] = useState("");
+  const [errorPage, setErrorPage] = useState(1);
+  const [errorTotal, setErrorTotal] = useState(0);
   const [viewMode, setViewMode] = useState<ViewMode>("history");
   const [selectedUploadId, setSelectedUploadId] = useState("");
   const [currentPage, setCurrentPage] = useState(1);
@@ -320,6 +126,17 @@ export default function GisManagementPopupPage() {
   const [isLoading, setIsLoading] = useState(false);
   const [notice, setNotice] = useState("");
 
+  // 오류 목록도 업로드 이력과 같은 표준 그리드를 사용하며 기존 오류 설명을 그대로 표시한다.
+  const validationErrorRows = useMemo(
+    () =>
+      validationErrors.map((error) => ({
+        sourceRowNo: error.rowNo === 0 ? "파일 전체" : (error.rowNo ?? "-"),
+        fid: error.fid || "-",
+        errorMessage: getLocalizedValidationErrorMessage(error),
+      })),
+    [validationErrors],
+  );
+
   const selectedHistory = useMemo(
     () =>
       uploadHistory.find((history) => history.uploadId === selectedUploadId) ??
@@ -361,6 +178,9 @@ export default function GisManagementPopupPage() {
     facilityTypeLabels[FACILITY_TYPE_CODE] || facility.facilityTypeName;
   const latestDownloadId = downloadIdsByScope[selectedScopeKey] ?? "";
   const isManagementSelected = Boolean(selectedMngInstCd);
+  // 기존 notice가 조회·다운로드 안내로 바뀌어도 미해결 부분 성공 경고는 유지한다.
+  const partialSuccessBlock = uploadRetryGuard.getBlock(selectedScopeKey);
+  const displayedNotice = partialSuccessBlock ? getGisPartialSuccessNotice(partialSuccessBlock) : notice;
 
   const resetSelectedFile = () => {
     setSelectedFile(null);
@@ -389,7 +209,7 @@ export default function GisManagementPopupPage() {
 
       try {
         const response = await getData(
-          `v1/map/gisUploads?${params.toString()}`,
+          `v1/map/gisUploadHistories?${params.toString()}`,
         );
         const items = Array.isArray(response?.items) ? response.items : [];
         setUploadHistory(items);
@@ -449,7 +269,7 @@ export default function GisManagementPopupPage() {
       // 관리기관 목록은 시설유형 조회 결과와 무관하게 즉시 화면 상태에 반영한다.
       const loadManagementOptions = async () => {
         try {
-          const managementOptions = await getData("v1/fcltppl/mngInsts");
+          const managementOptions = await getData("v1/fcltPpl/mngInsts");
           if (!mounted) return;
 
           const sortedOptions = Array.isArray(managementOptions)
@@ -586,8 +406,11 @@ export default function GisManagementPopupPage() {
           readyJob.fileName ??
           `swage_ppl_${selectedScopeKey}.gpkg`,
       );
+      // 새 현재본을 실제 수신한 경우에만 다음 업로드를 허용하고 이전 선택파일을 버린다.
+      const previousPartialSuccess = uploadRetryGuard.acceptFreshDownload(selectedScopeKey, downloadId);
+      if (previousPartialSuccess) resetSelectedFile();
       if (downloadId) {
-        setNotice(`${selectedScopeLabel} 기준 GeoPackage를 다운로드했습니다.`);
+        setNotice(`${selectedScopeLabel} 기준 GeoPackage를 다운로드했습니다.${previousPartialSuccess ? ` 이전 업로드 ${previousPartialSuccess.uploadId || "식별번호 확인 필요"}의 이력 복구는 관리자 확인이 필요합니다.` : ""}`);
       }
     } catch (error) {
       console.error("GIS 다운로드 실패:", error);
@@ -600,6 +423,12 @@ export default function GisManagementPopupPage() {
   };
 
   const handleUpload = async () => {
+    // 버튼 disabled 외에 호출 경로에서도 동일 세션의 재업로드를 차단한다.
+    const blocked = uploadRetryGuard.getBlock(selectedScopeKey);
+    if (blocked) {
+      alert(getGisPartialSuccessNotice(blocked));
+      return;
+    }
     if (!isManagementSelected) {
       alert("관리기관을 선택하세요.");
       return;
@@ -624,13 +453,20 @@ export default function GisManagementPopupPage() {
     setNotice("");
     try {
       const response = (await postMutiPart(
-        "/api/gis-upload",
+        "/api/gisUpload",
         formData,
       )) as GisUploadResponse;
       if (response.status === "VALIDATION_FAILED") {
+        await fetchHistories(1, selectedMngInstCd);
+        setSelectedUploadId(response.uploadId);
+        setErrorUploadId(response.uploadId);
+        setErrorPage(1);
+        setErrorTotal(
+          response.invalidCount ?? response.validationErrors?.length ?? 0,
+        );
         setValidationErrors(
           Array.isArray(response.validationErrors)
-            ? response.validationErrors
+            ? response.validationErrors.slice(0, GIS_ERROR_PAGE_SIZE)
             : [],
         );
         setViewMode("validationErrors");
@@ -654,6 +490,13 @@ export default function GisManagementPopupPage() {
       );
     } catch (error) {
       console.error("GIS 업로드 실패:", error);
+      const partial = uploadRetryGuard.recordFailure(selectedScopeKey, latestDownloadId, error);
+      if (partial) {
+        const message = getGisPartialSuccessNotice(partial);
+        setNotice(message);
+        alert(message);
+        return;
+      }
       alert(
         getErrorMessage(error, "GeoPackage 업로드 중 오류가 발생했습니다."),
       );
@@ -668,6 +511,12 @@ export default function GisManagementPopupPage() {
       alert("다운로드할 업로드 현황 행을 선택하세요.");
       return;
     }
+    if (selectedHistory.status === "VALIDATION_FAILED") {
+      alert(
+        "검증에 실패한 파일은 반영되지 않았습니다. 오류 확인을 이용해주세요.",
+      );
+      return;
+    }
 
     setIsLoading(true);
     setNotice("");
@@ -708,7 +557,10 @@ export default function GisManagementPopupPage() {
     }
   };
 
-  const fetchValidationErrors = async (uploadId = selectedUploadId) => {
+  const fetchValidationErrors = async (
+    uploadId = selectedUploadId,
+    page = 1,
+  ) => {
     if (!uploadId) {
       alert("오류를 확인할 업로드 현황 행을 선택하세요.");
       return;
@@ -718,11 +570,14 @@ export default function GisManagementPopupPage() {
     setNotice("");
     try {
       const response = await getData(
-        `v1/map/gisUploads/${encodeURIComponent(uploadId)}/validationErrors?page=0&size=500`,
+        `v1/map/gisUploads/${encodeURIComponent(uploadId)}/validationErrors?page=${page - 1}&size=${GIS_ERROR_PAGE_SIZE}`,
       );
       setValidationErrors(
         Array.isArray(response?.errors) ? response.errors : [],
       );
+      setErrorUploadId(uploadId);
+      setErrorPage(page);
+      setErrorTotal(Number(response?.total ?? 0));
       setViewMode("validationErrors");
     } catch (error) {
       console.error("GIS 업로드 오류 조회 실패:", error);
@@ -743,18 +598,66 @@ export default function GisManagementPopupPage() {
       alert("미리보기할 업로드 현황 행을 선택하세요.");
       return;
     }
+    if (selectedHistory.status === "VALIDATION_FAILED") {
+      alert(
+        "검증에 실패한 파일은 반영되지 않았습니다. 오류 확인을 이용해주세요.",
+      );
+      return;
+    }
     setViewMode("preview");
   };
 
+  // 미리보기와 오류 목록의 기존 보조 액션을 같은 버튼 구성으로 유지한다.
+  const auxiliaryActions = (
+    <div className="flex flex-wrap justify-end gap-2">
+      <Button
+        type="button"
+        color="primary"
+        disabled={!isManagementSelected || isLoading}
+        onClick={() => void handleRefreshHistories()}
+      >
+        목록
+      </Button>
+      <Button
+        type="button"
+        color="primary"
+        disabled
+        onClick={() => void handleDownloadSelectedHistory()}
+      >
+        GeoPackage 다운로드
+      </Button>
+      <Button
+        type="button"
+        color="white"
+        disabled={
+          !selectedHistory ||
+          selectedHistory.status === "VALIDATION_FAILED" ||
+          isLoading
+        }
+        onClick={handleOpenPreview}
+      >
+        미리보기
+      </Button>
+      <Button
+        type="button"
+        color="white"
+        disabled={!selectedHistory || isLoading}
+        onClick={() => void fetchValidationErrors()}
+      >
+        오류 확인
+      </Button>
+    </div>
+  );
+
   return (
     <StandardPopupLayout
       title={windowPopupDefinitions.gisManagementPopup.title}
     >
       <LoadingOverlay isLoading={isLoading} />
 
-      {notice ? (
+      {displayedNotice ? (
         <div className="border-b border-border bg-secondary px-5 py-2 text-[1rem] text-label">
-          {notice}
+          {displayedNotice}
         </div>
       ) : null}
 
@@ -825,7 +728,7 @@ export default function GisManagementPopupPage() {
             <Button
               type="button"
               color="primary"
-              disabled={!isManagementSelected || !selectedFile || isLoading}
+              disabled={!isManagementSelected || !selectedFile || isLoading || Boolean(partialSuccessBlock)}
               onClick={() => void handleUpload()}
             >
               업로드
@@ -841,47 +744,12 @@ export default function GisManagementPopupPage() {
           onChange={handleFileSelected}
         />
 
-        {viewMode !== "history" ? (
+        {viewMode === "preview" ? (
           <div className="card-header flex shrink-0 items-center justify-between">
             <h3 className="text-2xl font-medium text-label">
-              {viewMode === "preview"
-                ? "GIS 업로드 미리보기"
-                : "GIS 업로드 오류 목록"}
+              GIS 업로드 미리보기
             </h3>
-            <div className="flex flex-wrap justify-end gap-2">
-              <Button
-                type="button"
-                color="primary"
-                disabled={!isManagementSelected || isLoading}
-                onClick={() => void handleRefreshHistories()}
-              >
-                목록
-              </Button>
-              <Button
-                type="button"
-                color="primary"
-                disabled
-                onClick={() => void handleDownloadSelectedHistory()}
-              >
-                GeoPackage 다운로드
-              </Button>
-              <Button
-                type="button"
-                color="white"
-                disabled={!selectedHistory || isLoading}
-                onClick={handleOpenPreview}
-              >
-                미리보기
-              </Button>
-              <Button
-                type="button"
-                color="white"
-                disabled={!selectedHistory || isLoading}
-                onClick={() => void fetchValidationErrors()}
-              >
-                오류 확인
-              </Button>
-            </div>
+            {auxiliaryActions}
           </div>
         ) : null}
 
@@ -893,56 +761,34 @@ export default function GisManagementPopupPage() {
             />
           </div>
         ) : viewMode === "validationErrors" ? (
-          <div className="card !m-0 overflow-x-auto !p-0">
-            <Table
-              variant="secondary"
-              className="w-full min-w-[640px] caption-bottom text-sm"
-            >
-              <TableHeader className="font-bold">
-                <TableRow>
-                  {["순번", "행번호", "FID", "오류내용"].map((head) => (
-                    <TableHead
-                      key={head}
-                      className="border border-border !bg-primary px-4 py-[1.1rem] text-center text-[1.2rem] font-medium !text-primary-foreground"
-                    >
-                      {head}
-                    </TableHead>
-                  ))}
-                </TableRow>
-              </TableHeader>
-              <TableBody className="text-center">
-                {validationErrors.length > 0 ? (
-                  validationErrors.map((error, index) => (
-                    <TableRow
-                      key={`${error.rowNo ?? index}-${error.fid ?? ""}-${error.errorCode ?? ""}`}
-                    >
-                      <TableCell className="border border-border px-3 py-[1rem] text-[1.15rem]">
-                        {validationErrors.length - index}
-                      </TableCell>
-                      <TableCell className="border border-border px-3 py-[1rem] text-[1.15rem]">
-                        {error.rowNo ?? "-"}
-                      </TableCell>
-                      <TableCell className="border border-border px-3 py-[1rem] text-[1.15rem]">
-                        {error.fid || "-"}
-                      </TableCell>
-                      <TableCell className="border border-border px-3 py-[1rem] text-left text-[1.15rem]">
-                        {getLocalizedValidationErrorMessage(error)}
-                      </TableCell>
-                    </TableRow>
-                  ))
-                ) : (
-                  <TableRow>
-                    <TableCell
-                      colSpan={4}
-                      className="h-[calc(100dvh-28rem)] min-h-96 border border-border text-center text-[1.2rem] text-muted-foreground"
-                    >
-                      표시할 오류가 없습니다.
-                    </TableCell>
-                  </TableRow>
-                )}
-              </TableBody>
-            </Table>
-          </div>
+          <MapPopupDataTable
+            rows={validationErrorRows}
+            headlist={GIS_VALIDATION_ERROR_HEADLIST}
+            title="GIS 업로드 오류 목록"
+            actions={auxiliaryActions}
+            total={errorTotal}
+            page={errorPage}
+            pageSize={GIS_ERROR_PAGE_SIZE}
+            onPageChange={(page) =>
+              void fetchValidationErrors(errorUploadId, page)
+            }
+            scrollMode="horizontal"
+            minTableWidth="64rem"
+            emptyMessage="표시할 오류가 없습니다."
+            fillAvailableHeight
+            rowId={(_row, index) => String(index)}
+            renderCell={(row, headId) =>
+              headId === "errorMessage" ? (
+                <span className="block whitespace-normal break-words text-left">
+                  {row.errorMessage}
+                </span>
+              ) : headId === "fid" ? (
+                <span className="block whitespace-normal break-all">
+                  {row.fid}
+                </span>
+              ) : undefined
+            }
+          />
         ) : (
           <MapPopupDataTable
             rows={uploadHistoryRows}
@@ -967,7 +813,11 @@ export default function GisManagementPopupPage() {
                 <Button
                   type="button"
                   color="primary"
-                  disabled={!selectedHistory || isLoading}
+                  disabled={
+                    !selectedHistory ||
+                    selectedHistory.status === "VALIDATION_FAILED" ||
+                    isLoading
+                  }
                   onClick={() => void handleDownloadSelectedHistory()}
                 >
                   GeoPackage 다운로드
@@ -975,7 +825,11 @@ export default function GisManagementPopupPage() {
                 <Button
                   type="button"
                   color="white"
-                  disabled={!selectedHistory || isLoading}
+                  disabled={
+                    !selectedHistory ||
+                    selectedHistory.status === "VALIDATION_FAILED" ||
+                    isLoading
+                  }
                   onClick={handleOpenPreview}
                 >
                   미리보기

apps/sn/app/(map-layout)/map/components/gisManagement/GisUploadPreviewMap.tsx

@@ -1,3 +1,7 @@
+/**
+ * 화면명: GIS 업로드 미리보기 지도
+ * 업로드한 공간정보를 지도에 미리 표시하고 검증 결과를 확인한다.
+ */
 "use client";
 
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";

apps/sn/app/(map-layout)/map/components/gisManagement/useGisManagementCommonCodes.ts

@@ -1,3 +1,4 @@
+/** GIS 관리 화면에 필요한 공통코드를 조회하고 선택 항목으로 제공한다. */
 "use client";
 
 import { useEffect, useState } from "react";

apps/sn/app/(map-layout)/map/components/inftwtResult/InftwtResultPopupPage.tsx

@@ -1,3 +1,7 @@
+/**
+ * 화면명: 침입수 분석결과 목록
+ * 침입수 분석결과를 검색하고 목록·엑셀·지도 보기 기능을 제공한다.
+ */
 "use client";
 
 import { useCallback, useEffect, useState } from "react";
@@ -13,6 +17,7 @@ import { useAlertStore } from "@/shared/lib";
 import { Button } from "@common/components";
 
 import { getData } from "@/components/lib/api";
+import { appendApiSearchParams } from "@/shared/util/util";
 import { CtpvSggPrcsFcltSelectBox } from "@/components/ui/ctpvSggPrcsFcltSelectBox";
 import { formatDisplayData } from "@/components/lib/utils/formatDisplayValue";
 import useStore from "@/store/useStore";
@@ -132,16 +137,13 @@ export default function InftwtResultPopupPage() {
           : "inftwtAnlsSn,desc",
       );
 
-      if (nextFilters.aplcnYmFrom)
-        queryParams.set("aplcnYmFrom", nextFilters.aplcnYmFrom);
-      if (nextFilters.aplcnYmTo)
-        queryParams.set("aplcnYmTo", nextFilters.aplcnYmTo);
-      if (nextFilters.ctpvCd !== "0")
-        queryParams.set("ctpvCd", nextFilters.ctpvCd);
-      if (nextFilters.sggCd !== "0")
-        queryParams.set("sggCd", nextFilters.sggCd);
-      if (nextFilters.swtrmtFcltNm.trim())
-        queryParams.set("swtrmtFcltNm", nextFilters.swtrmtFcltNm.trim());
+      appendApiSearchParams(queryParams, {
+        aplcnYmFrom: nextFilters.aplcnYmFrom,
+        aplcnYmTo: nextFilters.aplcnYmTo,
+        ctpvCd: nextFilters.ctpvCd,
+        sggCd: nextFilters.sggCd,
+        swtrmtFcltNm: nextFilters.swtrmtFcltNm,
+      });
 
       const response = await getData(`v1/inftwtAnls?${queryParams.toString()}`);
       const content = Array.isArray(response?.content) ? response.content : [];

apps/sn/app/(map-layout)/map/components/inftwtResult/inftwtResultTypes.ts

@@ -1,3 +1,4 @@
+/** 침입수 분석결과 화면의 타입·검색 조건·컬럼과 응답 변환을 정의한다. */
 "use client";
 
 export const INFTWT_RESULT_ROW_SELECT_MESSAGE = "SN_INFTWT_RESULT_ROW_SELECT";

apps/sn/app/(map-layout)/map/components/inftwtResult/useInftwtResultMap.ts

@@ -1,5 +1,6 @@
 "use client";
 
+/** 침입수 분석결과 선택 시 부모 지도에 결과 레이어를 표시하는 훅이다. */
 import { useCallback, useEffect, useRef, useState, type MutableRefObject } from "react";
 import GeoJSON from "ol/format/GeoJSON.js";
 import VectorLayer from "ol/layer/Vector.js";
@@ -389,13 +390,6 @@ export const useInftwtResultMap = ({
       pipeLayerRef.current?.setVisible?.(true);
       pipeLayerRef.current?.changed?.();
       gisMaps.current?.renderSync?.();
-
-      console.info("移⑥엯??FE overlay ?뚮뜑 寃곌낵", {
-        focusTargetType: mapView.focusTargetType,
-        zoneFeatureCount: zoneFeatures.length,
-        pipeFeatureCount: pipeFeatures.length,
-      });
-
       await moveToStableFocus(mapView);
     },
     [clearLayers, ensurePipeLayer, ensureZoneLayer, gisMaps, moveToStableFocus],

apps/sn/app/(map-layout)/map/components/layerSetting/LayerSettingCard.tsx

@@ -1,3 +1,7 @@
+/**
+ * 화면명: 선택 레이어 설정 카드
+ * 레이어별 설정 제목과 활성화·닫기 영역을 공통 레이아웃으로 제공한다.
+ */
 "use client";
 
 import type { ReactNode } from "react";
@@ -22,8 +26,16 @@ export default function LayerSettingCard({
 }: Props) {
   return (
     <div className="w-full overflow-visible rounded-[6px] border border-border bg-background shadow-blur">
-      <div className="flex min-h-[28px] items-center justify-between border-b border-border px-2">
-        <span className="text-[1.15rem] font-semibold text-label">{title}</span>
+      <div className="flex min-h-[28px] items-center justify-between border-b border-border pl-[0.8rem] pr-2">
+        <div className="flex min-w-0 items-center gap-2">
+          <span
+            aria-hidden="true"
+            className="h-[7px] w-[7px] shrink-0 rotate-45 bg-[#7CCE5C]"
+          />
+          <span className="truncate text-[12px] font-semibold text-label">
+            {title}
+          </span>
+        </div>
         <div className="flex shrink-0 items-center gap-2">
           {showToggle ? (
             <button
@@ -52,7 +64,9 @@ export default function LayerSettingCard({
         </div>
       </div>
       {children ? (
-        <div className="px-2 py-1 text-[1.15rem] text-label">{children}</div>
+        <div className="flex flex-col gap-[6px] p-[0.8rem] text-[1.15rem] text-label">
+          {children}
+        </div>
       ) : null}
     </div>
   );

apps/sn/app/(map-layout)/map/components/pipeAnalysis/PipeAnalysisDetailPopupPage.tsx

@@ -1,3 +1,7 @@
+/**
+ * 화면명: 관로현황 목록
+ * 관로분석 집계 항목에 해당하는 개별 관로 목록을 표시한다.
+ */
 "use client";
 
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -6,6 +10,7 @@ import { Button, Input } from "@common/components";
 import { StandardPopupLayout } from "@common/business_components";
 import { downloadExcelWithKoreanHeaders } from "@/shared/lib/download-excel";
 import { getData } from "@/components/lib/api";
+import { appendApiSearchParams } from "@/shared/util/util";
 import LoadingOverlay from "@/components/ui/LoadingBar";
 import useStore from "@/store/useStore";
 import { useAlertStore } from "@/shared/lib";
@@ -131,23 +136,20 @@ export default function PipeAnalysisDetailPopupPage() {
         size: String(size),
       });
 
-      if (nextFilters.ctpvCd !== "0") params.set("ctpvCd", nextFilters.ctpvCd);
-      if (nextFilters.sggCd !== "0") params.set("sggCd", nextFilters.sggCd);
-      if (nextFilters.swtrmtZoneNm !== "0")
-        params.set("swtrmtZoneNm", nextFilters.swtrmtZoneNm);
-      if (baseElapsedYearBucket)
-        params.set("elapsedYearBucket", baseElapsedYearBucket);
-      if (nextFilters.materialCode !== "0")
-        params.set("materialCode", nextFilters.materialCode);
-      if (nextFilters.useCd !== "0") params.set("useCd", nextFilters.useCd);
-      if (nextFilters.diameterFrom)
-        params.set("diameterFrom", nextFilters.diameterFrom);
-      if (nextFilters.diameterTo)
-        params.set("diameterTo", nextFilters.diameterTo);
+      appendApiSearchParams(params, {
+        ctpvCd: nextFilters.ctpvCd,
+        sggCd: nextFilters.sggCd,
+        swtrmtZoneNm: nextFilters.swtrmtZoneNm,
+        elapsedYearBucket: baseElapsedYearBucket,
+        materialCode: nextFilters.materialCode,
+        useCd: nextFilters.useCd,
+        diameterFrom: nextFilters.diameterFrom,
+        diameterTo: nextFilters.diameterTo,
+      });
       if (scope.regionCode) params.set("scopeRegionCode", scope.regionCode);
 
       const response = await getData(
-        `v1/fclts/ppl-analysis/details?${params.toString()}`,
+        `v1/fclts/pplAnalysis/details?${params.toString()}`,
       );
       const responseRows = Array.isArray(response?.data) ? response.data : [];
 
@@ -393,12 +395,14 @@ export default function PipeAnalysisDetailPopupPage() {
           </select>
         </label>
 
-        <label className="flex shrink-0 items-center gap-2">
+        <div className="flex shrink-0 items-center gap-2">
           <div className="shrink-0 whitespace-nowrap text-xl font-medium text-label">
-            관경 시작
+            관경(mm)
           </div>
           <Input
             className="sn-popup-input !h-[3.2rem] w-[12rem] !text-xl"
+            aria-label="관경 최소값"
+            placeholder="입력"
             value={filters.diameterFrom}
             onChange={(event) =>
               setFilters((current) => ({
@@ -410,14 +414,11 @@ export default function PipeAnalysisDetailPopupPage() {
               if (event.key === "Enter") handleSearch();
             }}
           />
-        </label>
-
-        <label className="flex shrink-0 items-center gap-2">
-          <div className="shrink-0 whitespace-nowrap text-xl font-medium text-label">
-            관경 종료
-          </div>
+          <span className="shrink-0 text-xl font-semibold text-foreground">~</span>
           <Input
             className="sn-popup-input !h-[3.2rem] w-[12rem] !text-xl"
+            aria-label="관경 최대값"
+            placeholder="입력"
             value={filters.diameterTo}
             onChange={(event) =>
               setFilters((current) => ({
@@ -429,7 +430,7 @@ export default function PipeAnalysisDetailPopupPage() {
               if (event.key === "Enter") handleSearch();
             }}
           />
-        </label>
+        </div>
 
         <div className="flex min-w-fit flex-1 items-center justify-end gap-2">
           <Button type="button" color="primary" onClick={handleSearch}>

apps/sn/app/(map-layout)/map/components/pipeAnalysis/PipeAnalysisPopupPage.tsx

@@ -1,26 +1,22 @@
+/**
+ * 화면명: 관로분석
+ * 행정구역·처리구역과 분석구분별 관로 집계 결과를 조회한다.
+ */
 "use client";
 
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import {
-  Button,
-  Table,
-  TableBody,
-  TableCell,
-  TableHeader,
-  TableHead,
-  TableRow,
-} from "@common/components";
+import { Button } from "@common/components";
 import { StandardPopupLayout } from "@common/business_components";
-import UiPageNations from "@common/business_components/ui/table/uiPageNations";
 import { downloadExcelWithKoreanHeaders } from "@/shared/lib/download-excel";
 import { getData } from "@/components/lib/api";
+import { appendApiSearchParams } from "@/shared/util/util";
 import LoadingOverlay from "@/components/ui/LoadingBar";
 import useStore from "@/store/useStore";
 import { useAlertStore } from "@/shared/lib";
 import { useUserStore } from "@/shared/lib/use-user-store";
 import { openWindowPopup } from "@/features/windowPopup/lib/openWindowPopup";
 import { windowPopupDefinitions } from "@/features/windowPopup/model/popupDefinitions";
-import MapPopupDataTable from "@/features/windowPopup/ui/MapPopupDataTable";
+import PipeAnalysisSummaryTable from "./PipeAnalysisSummaryTable";
 import PopupSearchPanel from "@/features/windowPopup/ui/PopupSearchPanel";
 import {
   PIPE_ANALYSIS_SUMMARY_DEFAULT_FILTERS,
@@ -61,17 +57,6 @@ const toExcelColumnName = (index: number) => {
   return result || "A";
 };
 
-const formatGridNumber = (value: unknown) => {
-  const num = Number(value ?? 0);
-  if (!Number.isFinite(num)) {
-    return String(value ?? "");
-  }
-  return num.toLocaleString("ko-KR", {
-    minimumFractionDigits: 0,
-    maximumFractionDigits: 3,
-  });
-};
-
 const resolveErrorMessage = (error: unknown, fallbackMessage: string) =>
   error instanceof Error && error.message.trim()
     ? error.message
@@ -144,15 +129,16 @@ export default function PipeAnalysisPopupPage() {
         analysisType: nextFilters.analysisType,
       });
 
-      if (nextFilters.ctpvCd !== "0") params.set("ctpvCd", nextFilters.ctpvCd);
-      if (nextFilters.sggCd !== "0") params.set("sggCd", nextFilters.sggCd);
-      if (nextFilters.swtrmtZoneNm !== "0")
-        params.set("swtrmtZoneNm", nextFilters.swtrmtZoneNm);
+      appendApiSearchParams(params, {
+        ctpvCd: nextFilters.ctpvCd,
+        sggCd: nextFilters.sggCd,
+        swtrmtZoneNm: nextFilters.swtrmtZoneNm,
+      });
       if (nextFilters.scopeRegionCode)
         params.set("scopeRegionCode", nextFilters.scopeRegionCode);
 
       const response = (await getData(
-        `v1/fclts/ppl-analysis/summaries?${params.toString()}`,
+        `v1/fclts/pplAnalysis/summaries?${params.toString()}`,
       )) as PipeAnalysisSummaryResponse;
 
       const nextMaterialColumns = Array.isArray(response?.materialColumns)
@@ -353,7 +339,6 @@ export default function PipeAnalysisPopupPage() {
     [yearMaterialGroups],
   );
 
-  const useHorizontalScrollTable = appliedFilters.analysisType !== "YEAR";
   const summaryPageOffset =
     (summaryCurrentPage - 1) * PIPE_ANALYSIS_SUMMARY_PAGE_SIZE;
   const pagedRows = useMemo(
@@ -366,15 +351,6 @@ export default function PipeAnalysisPopupPage() {
           ),
     [appliedFilters.analysisType, rows, summaryPageOffset],
   );
-  const clickableHeadIds = useMemo(
-    () =>
-      headList
-        .filter((head) =>
-          rows.some((row) => Boolean(row.__cellFilters[head.id])),
-        )
-        .map((head) => head.id),
-    [headList, rows],
-  );
   const visibleYearMaterialGroups = useMemo(
     () =>
       orderedYearMaterialGroups.slice(
@@ -386,7 +362,7 @@ export default function PipeAnalysisPopupPage() {
   const sggOptions = useMemo(
     () =>
       draftFilters.ctpvCd === "0"
-        ? sgg
+        ? []
         : sgg.filter((item) =>
             String(item.val).startsWith(draftFilters.ctpvCd.slice(0, 2)),
           ),
@@ -521,165 +497,28 @@ export default function PipeAnalysisPopupPage() {
         </div>
       </PopupSearchPanel>
 
-      {appliedFilters.analysisType === "YEAR_MATERIAL" ? (
-        <div className="card card-border !m-0 min-w-0 overflow-hidden !p-0">
-          <div className="card-header">
-            <h3 className="text-2xl font-medium text-label">
-              {resolvePipeAnalysisTypeLabel(appliedFilters.analysisType)} 목록
-            </h3>
-            <Button type="button" onClick={() => void handleDownload()}>
-              엑셀다운로드
-            </Button>
-          </div>
-          <div className="card !m-[1.2rem] overflow-x-auto !p-0">
-            <Table
-              variant="secondary"
-              className="w-max min-w-full caption-bottom text-sm"
-            >
-              <TableHeader className="font-bold">
-                <TableRow>
-                  {headList.map((head) => (
-                    <TableHead
-                      key={head.id}
-                      className="border border-border bg-primary px-4 py-[1.2rem] text-center text-[1.3rem] font-medium text-primary-foreground"
-                    >
-                      {head.id === "rowNo" ? "순번" : head.title}
-                    </TableHead>
-                  ))}
-                </TableRow>
-              </TableHeader>
-              <TableBody className="text-center">
-                {visibleYearMaterialGroups.length > 0 ? (
-                  visibleYearMaterialGroups.flatMap((group) =>
-                    group.rows.map((yearRow, rowIndex) => (
-                      <TableRow
-                        key={`${group.base.ctpvCd}-${group.base.sggCd}-${group.base.swtrmtZoneNm}-${yearRow.elapsedYearBucket}`}
-                      >
-                        {rowIndex === 0 ? (
-                          <>
-                            <TableCell
-                              rowSpan={group.rows.length}
-                              className="border border-border px-2 py-[1.2rem] text-center text-[1.3rem]"
-                            >
-                              {group.rowNo}
-                            </TableCell>
-                            <TableCell
-                              rowSpan={group.rows.length}
-                              className="border border-border px-2 py-[1.2rem] text-center text-[1.3rem]"
-                            >
-                              {group.ctpvNm}
-                            </TableCell>
-                            <TableCell
-                              rowSpan={group.rows.length}
-                              className="border border-border px-2 py-[1.2rem] text-center text-[1.3rem]"
-                            >
-                              {group.sggNm}
-                            </TableCell>
-                            <TableCell
-                              rowSpan={group.rows.length}
-                              className="border border-border px-2 py-[1.2rem] text-center text-[1.3rem]"
-                            >
-                              {group.swtrmtZoneNm}
-                            </TableCell>
-                            <TableCell
-                              rowSpan={group.rows.length}
-                              className="border border-border px-2 py-[1.2rem] text-right text-[1.3rem]"
-                            >
-                              {formatGridNumber(group.totalLengthKm)}
-                            </TableCell>
-                          </>
-                        ) : null}
-                        <TableCell className="border border-border px-2 py-[1.2rem] text-center text-[1.3rem]">
-                          {yearRow.elapsedYearLabel}
-                        </TableCell>
-                        {materialColumns.map((column) => {
-                          const value = Number(
-                            yearRow.metrics[column.key] ?? 0,
-                          );
-                          const isClickable =
-                            value > 0 &&
-                            Boolean(yearRow.cellFilters[column.key]);
-                          return (
-                            <TableCell
-                              key={`${group.base.ctpvCd}-${group.base.sggCd}-${group.base.swtrmtZoneNm}-${yearRow.elapsedYearBucket}-${column.key}`}
-                              className={`border border-border px-2 py-[1.2rem] text-right text-[1.3rem] ${
-                                isClickable
-                                  ? "cursor-pointer font-semibold text-primary underline underline-offset-2"
-                                  : ""
-                              }`}
-                              onClick={() => {
-                                if (isClickable) {
-                                  handleYearMaterialCellClick(
-                                    group,
-                                    yearRow,
-                                    column.key,
-                                  );
-                                }
-                              }}
-                            >
-                              {formatGridNumber(value)}
-                            </TableCell>
-                          );
-                        })}
-                      </TableRow>
-                    )),
-                  )
-                ) : (
-                  <TableRow>
-                    <TableCell
-                      colSpan={headList.length}
-                      className="h-24 border border-border text-center text-[1.3rem] text-label"
-                    >
-                      조회 결과가 없습니다.
-                    </TableCell>
-                  </TableRow>
-                )}
-              </TableBody>
-            </Table>
-          </div>
-          {orderedYearMaterialGroups.length >
-          PIPE_ANALYSIS_SUMMARY_PAGE_SIZE ? (
-            <div className="mb-[1.2rem] flex justify-center">
-              <UiPageNations
-                total={orderedYearMaterialGroups.length}
-                cur={summaryCurrentPage}
-                pageSize={PIPE_ANALYSIS_SUMMARY_PAGE_SIZE}
-                onPageChange={setSummaryCurrentPage}
-              />
-            </div>
-          ) : null}
-        </div>
-      ) : null}
-
-      {appliedFilters.analysisType !== "YEAR_MATERIAL" ? (
-        <MapPopupDataTable
-          rows={
-            pagedRows as Array<
-              PipeAnalysisSummaryViewRow & Record<string, unknown>
-            >
-          }
-          headlist={headList}
-          title={`${resolvePipeAnalysisTypeLabel(appliedFilters.analysisType)} 목록`}
-          total={rows.length}
-          page={summaryCurrentPage}
-          pageSize={PIPE_ANALYSIS_SUMMARY_PAGE_SIZE}
-          onPageChange={setSummaryCurrentPage}
-          scrollMode={useHorizontalScrollTable ? "horizontal" : "none"}
-          minTableWidth={useHorizontalScrollTable ? "160rem" : "100%"}
-          clickableHeadIds={clickableHeadIds}
-          onCellClick={(row, _rowIndex, columnId) =>
-            handleCellClick(row, columnId)
-          }
-          rowId={(row, index) =>
-            `${String(row.__base.ctpvCd)}-${String(row.__base.sggCd)}-${String(row.__base.swtrmtZoneNm)}-${index}`
-          }
-          actions={
-            <Button type="button" onClick={() => void handleDownload()}>
-              엑셀다운로드
-            </Button>
-          }
-        />
-      ) : null}
+      <PipeAnalysisSummaryTable
+        rows={pagedRows}
+        groups={visibleYearMaterialGroups}
+        grouped={appliedFilters.analysisType === "YEAR_MATERIAL"}
+        heads={headList}
+        title={`${resolvePipeAnalysisTypeLabel(appliedFilters.analysisType)} 목록`}
+        total={
+          appliedFilters.analysisType === "YEAR_MATERIAL"
+            ? orderedYearMaterialGroups.length
+            : rows.length
+        }
+        page={summaryCurrentPage}
+        pageSize={PIPE_ANALYSIS_SUMMARY_PAGE_SIZE}
+        onPageChange={setSummaryCurrentPage}
+        onCellClick={handleCellClick}
+        onGroupedCellClick={handleYearMaterialCellClick}
+        actions={
+          <Button type="button" onClick={() => void handleDownload()}>
+            엑셀다운로드
+          </Button>
+        }
+      />
     </StandardPopupLayout>
   );
 }

apps/sn/app/(map-layout)/map/components/pipeAnalysis/PipeAnalysisSummaryTable.tsx

@@ -0,0 +1,249 @@
+"use client";
+
+import { useMemo, type ReactNode } from "react";
+import {
+  getCoreRowModel,
+  useReactTable,
+  type ColumnDef,
+} from "@tanstack/react-table";
+import {
+  StandardDataTable,
+  type StandardDataTableLayout,
+  type UiHeadProps,
+} from "@common/business_components";
+import type {
+  PipeAnalysisSummaryViewRow,
+  PipeAnalysisYearMaterialGroup,
+  PipeAnalysisYearMaterialGroupRow,
+} from "./pipeAnalysisUtils";
+
+type SummaryRow =
+  | {
+      kind: "flat";
+      value: PipeAnalysisSummaryViewRow;
+      sourceIndex: number;
+    }
+  | {
+      kind: "grouped";
+      group: PipeAnalysisYearMaterialGroup;
+      value: PipeAnalysisYearMaterialGroupRow;
+      groupIndex: number;
+      groupRowIndex: number;
+    };
+type Props = {
+  rows: PipeAnalysisSummaryViewRow[];
+  groups: PipeAnalysisYearMaterialGroup[];
+  grouped: boolean;
+  heads: UiHeadProps[];
+  title: string;
+  total: number;
+  page: number;
+  pageSize: number;
+  actions: ReactNode;
+  onPageChange: (page: number) => void;
+  onCellClick: (row: PipeAnalysisSummaryViewRow, columnId: string) => void;
+  onGroupedCellClick: (
+    group: PipeAnalysisYearMaterialGroup,
+    row: PipeAnalysisYearMaterialGroupRow,
+    columnId: string,
+  ) => void;
+};
+
+/** 지역 식별 열은 가로 스크롤해도 남겨 두고, 모든 집계 방식에 같은 너비를 사용한다. */
+const FIXED_WIDTHS: Record<string, number> = {
+  rowNo: 56,
+  ctpvNm: 120,
+  sggNm: 120,
+  swtrmtZoneNm: 160,
+  totalLengthKm: 100,
+};
+/** 공통 그리드가 같은 순서로 왼쪽 고정 위치를 계산할 관로 식별 열이다. */
+const PINNED_COLUMN_IDS = Object.keys(FIXED_WIDTHS);
+/** 관로분석에서 선택하는 공통 표 레이아웃이며 화면 전용 CSS를 대체한다. */
+const PIPE_SUMMARY_LAYOUT: StandardDataTableLayout = {
+  tableLayout: "fixed",
+  stickyHeader: true,
+  headerHeight: "64px",
+  headerWrap: true,
+  cellOverflow: "ellipsis",
+};
+/** 기존 집계와 같은 천 단위 구분 및 소수점 세 자리 표시를 유지한다. */
+const formatValue = (value: unknown) => {
+  if (value === null || value === undefined || value === "") return "-";
+  return typeof value === "number"
+    ? value.toLocaleString("ko-KR", { maximumFractionDigits: 3 })
+    : String(value);
+};
+
+/** 결과가 있는 셀만 링크형 버튼으로 표시하고 나머지는 전체값 title을 유지한다. */
+const renderValue = (value: unknown, onClick?: () => void) => {
+  const formatted = formatValue(value);
+  return onClick ? (
+    <button
+      type="button"
+      className="w-full text-inherit text-primary underline underline-offset-2 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
+      onClick={onClick}
+    >
+      {formatted}
+    </button>
+  ) : (
+    <span className="block overflow-hidden text-ellipsis" title={formatted}>
+      {formatted}
+    </span>
+  );
+};
+
+/** 표준 카드·페이징 안에서 관로 집계의 병합 셀과 고정 열을 렌더링한다. */
+export default function PipeAnalysisSummaryTable({
+  rows,
+  groups,
+  grouped,
+  heads,
+  title,
+  total,
+  page,
+  pageSize,
+  actions,
+  onPageChange,
+  onCellClick,
+  onGroupedCellClick,
+}: Props) {
+  // 병합 표도 공통 렌더러가 행을 순회할 수 있도록 처리구역의 4개 경과년도 행만 펼친다.
+  const data = useMemo<SummaryRow[]>(
+    () =>
+      grouped
+        ? groups.flatMap((group, groupIndex) =>
+            group.rows.map((value, groupRowIndex) => ({
+              kind: "grouped" as const,
+              group,
+              value,
+              groupIndex,
+              groupRowIndex,
+            })),
+          )
+        : rows.map((value, sourceIndex) => ({
+            kind: "flat" as const,
+            value,
+            sourceIndex,
+          })),
+    [grouped, groups, rows],
+  );
+  // 공통 렌더러가 colgroup과 고정 위치에 사용할 열별 픽셀 너비를 한곳에서 계산한다.
+  const layout = useMemo(() => {
+    return heads.map((head) => {
+      const width =
+        FIXED_WIDTHS[head.id] ??
+        (head.id === "elapsedYearLabel"
+          ? 112
+          : String(head.title).length > 10
+            ? 160
+            : 120);
+      const fixed = head.id in FIXED_WIDTHS;
+      return { ...head, width, fixed };
+    });
+  }, [heads]);
+  // 모든 재질 열의 너비 합계를 최소 폭으로 사용해 좁은 팝업에서 열 압축을 막는다.
+  const tableWidth = layout.reduce((sum, head) => sum + head.width, 0);
+  // 열은 값·업무 클릭만 정의하고 실제 th/td, 고정 열과 overflow는 공통 렌더러가 소유한다.
+  const columns = useMemo<ColumnDef<SummaryRow>[]>(
+    () =>
+      layout.map((head) => ({
+        id: head.id,
+        size: head.width,
+        minSize: head.width,
+        maxSize: head.width,
+        header: () => <span title={String(head.title)}>{head.title}</span>,
+        cell: ({ row }) => {
+          const summaryRow = row.original;
+          if (summaryRow.kind === "flat") {
+            const value =
+              head.id === "rowNo"
+                ? total - ((page - 1) * pageSize + summaryRow.sourceIndex)
+                : summaryRow.value[head.id];
+            const onClick =
+              summaryRow.value.__cellFilters[head.id] && Number(value) > 0
+                ? () => onCellClick(summaryRow.value, head.id)
+                : undefined;
+            return renderValue(value, onClick);
+          }
+
+          if (head.fixed) {
+            return renderValue(
+              summaryRow.group[head.id as keyof PipeAnalysisYearMaterialGroup],
+            );
+          }
+          if (head.id === "elapsedYearLabel") {
+            return renderValue(summaryRow.value.elapsedYearLabel);
+          }
+
+          const value = Number(summaryRow.value.metrics[head.id] ?? 0);
+          const onClick =
+            value > 0 && summaryRow.value.cellFilters[head.id]
+              ? () =>
+                  onGroupedCellClick(
+                    summaryRow.group,
+                    summaryRow.value,
+                    head.id,
+                  )
+              : undefined;
+          return renderValue(value, onClick);
+        },
+        meta: {
+          align: head.align === "right" ? "right" : "center",
+        },
+      })),
+    [layout, onCellClick, onGroupedCellClick, page, pageSize, total],
+  );
+  // 페이지 단위는 기존과 동일하게 일반 표는 행, 병합 표는 처리구역 그룹이다.
+  const pagination = { pageIndex: Math.max(0, page - 1), pageSize };
+  const table = useReactTable({
+    data,
+    columns,
+    state: { pagination },
+    rowCount: total,
+    manualPagination: true,
+    getCoreRowModel: getCoreRowModel(),
+    getRowId: (row) =>
+      row.kind === "flat"
+        ? `flat-${row.sourceIndex}`
+        : `group-${row.groupIndex}-${row.value.elapsedYearBucket}`,
+    onPaginationChange: (updater) => {
+      const next =
+        typeof updater === "function" ? updater(pagination) : updater;
+      if (next.pageIndex !== pagination.pageIndex)
+        onPageChange(next.pageIndex + 1);
+    },
+  });
+
+  return (
+    <StandardDataTable
+      key={`${title}-${page}`}
+      table={table}
+      title={title}
+      flushOuterMargin
+      scrollMode="both"
+      maxHeight="max(240px, calc(100dvh - 34rem))"
+      minTableWidth={`${tableWidth}px`}
+      layout={PIPE_SUMMARY_LAYOUT}
+      pinnedColumns={PINNED_COLUMN_IDS}
+      getCellProps={({ row, columnId }) => {
+        const summaryRow = row.original;
+        const isPinnedColumn = PINNED_COLUMN_IDS.includes(columnId);
+        const isGrouped = summaryRow.kind === "grouped";
+
+        return {
+          hidden: isGrouped && isPinnedColumn && summaryRow.groupRowIndex > 0,
+          rowSpan:
+            isGrouped && isPinnedColumn && summaryRow.groupRowIndex === 0
+              ? summaryRow.group.rows.length
+              : undefined,
+          className:
+            isGrouped && summaryRow.groupRowIndex === 0
+              ? "border-t border-border"
+              : undefined,
+        };
+      }}
+      actions={actions}
+    />
+  );
+}

apps/sn/app/(map-layout)/map/components/pipeAnalysis/pipeAnalysisUtils.ts

@@ -1,3 +1,4 @@
+/** 관로분석 검색 조건, 집계 컬럼과 표시값 변환 유틸을 제공한다. */
 "use client";
 
 import type { SelectDataType } from "@common/business_components";

apps/sn/app/(map-layout)/map/components/popupComponent/MsSwagePpl.tsx

@@ -1,4 +1,5 @@
 /**
+ * 화면명: 하수관로 정보
  * ➡️ 경로 : 하수관망도 메인 페이지 (시설물 클릭) - 오른쪽 팝업창 (하수관로)
  * 
  * 📄 MsSwagePpl

apps/sn/app/(map-layout)/map/components/popupComponent/Ssc.tsx

@@ -1,4 +1,5 @@
 /**
+ * 화면명: 우수토실 정보
  * ➡️ 경로 : 하수관망도 메인 페이지 (시설물 클릭) - 오른쪽 팝업창 (우수토실)
  *
  * 📄 Ssc

apps/sn/app/(map-layout)/map/components/popupComponent/SwtrmtFclt.tsx

@@ -1,4 +1,5 @@
 /**
+ * 화면명: 하수처리시설 정보
  * ➡️ 경로 : 하수관망도 메인 페이지 (시설물 클릭) - 오른쪽 팝업창 (하수처리시설)
  * 
  * 📄 SwtrmtFclt

apps/sn/app/(map-layout)/map/components/popupComponent/SwtrmtPrcsZoneAnalysis.tsx

@@ -1,3 +1,7 @@
+/**
+ * 화면명: 처리구역내 관로분석정보
+ * 선택한 하수처리구역의 관로 분석 현황과 보수이력 연계 기능을 제공한다.
+ */
 "use client";
 
 import React, {

apps/sn/app/(map-layout)/map/components/popupComponent/chart/aplcnYms.ts

@@ -1,3 +1,4 @@
+/** 침입수·RDII 분석의 적용연월 선택 상태와 월 목록을 제공한다. */
 import { useState, useEffect } from "react";
 import moment from "moment";
 import { getData } from "@/components/lib/api";
@@ -295,4 +296,4 @@ export const getChartDataRainData = (arr: TRainData[]) => {
     lineVal0: 0,
     barVal0: roundTo(data.amrf, 2),
   }));
-};
+};

apps/sn/app/(map-layout)/map/components/popupComponent/chart/infilChart.tsx

@@ -1,3 +1,7 @@
+/**
+ * 화면명: 침입수 분석
+ * 침입수 분석 조건 입력, 실행 상태와 분석결과를 표시한다.
+ */
 "use client";
 
 import React, { useEffect, useMemo, useState } from "react";
@@ -244,7 +248,7 @@ const InfilChart = ({
 
   const renderResultPanel = () => (
     <section className="card card-border !m-0 min-w-0 overflow-hidden !p-[1.2rem]">
-      <StandardFormSection title="침입수 분석결과" columns={2}>
+      <StandardFormSection title="침입수 분석결과" columns={2} wideLabels>
         <StandardFormField label="상수사용량 적용연월" columns={2}>
           <div className="flex min-h-[3.2rem] items-center justify-end text-[1.35rem] font-semibold tabular-nums text-foreground">
             {selectedAplcnYm

apps/sn/app/(map-layout)/map/components/popupComponent/chart/rdiiChart.tsx

@@ -1,3 +1,7 @@
+/**
+ * 화면명: RDII 분석
+ * RDII 분석 조건 입력, 실행 상태와 분석결과를 표시한다.
+ */
 "use client";
 
 import React, { useEffect, useMemo, useState } from "react";
@@ -218,7 +222,7 @@ const RdiiChart = ({
 
   const renderResultPanel = () => (
     <section className="card card-border !m-0 min-w-0 overflow-hidden !p-[1.2rem]">
-      <StandardFormSection title="RDII 분석결과" columns={2}>
+      <StandardFormSection title="RDII 분석결과" columns={2} wideLabels>
         <StandardFormField label="상수사용 적용연월" columns={2}>
           <div className="flex min-h-[3.2rem] items-center justify-end text-[1.35rem] font-semibold tabular-nums text-foreground">
             {selectedAplcnYm

apps/sn/app/(map-layout)/map/components/popupComponent/featureClickEventPopup.tsx

@@ -1,4 +1,5 @@
 /**
+ * 화면명: 시설 상세정보
  * ➡️ 경로 : 하수관망도 메인 페이지 (시설물 클릭) - 오른쪽 팝업창
  *
  * 📄 FeatureClickEventPopup
@@ -12,14 +13,14 @@
  * - 모달을 통한 저장 확인 및 API 연동
  *
  * 🔗 사용 API
- * - 하수관로 자체입력정보 조회: GET /api/v1/fcltppl/{fcltMngNo}/{mngInstCd} (sewerage-service)
- * - 우수토실 자체입력정보 조회: GET /api/v1/fcltstofcbr/{fcltMngNo}/{mngInstCd} (sewerage-service)
- * - 하수펌프장 자체입력정보 조회: GET /api/v1/fcltpump/{fcltMngNo}/{mngInstCd} (sewerage-service)
- * - 하수맨홀 자체입력정보 조회: GET /api/v1/fcltmhl/{fcltMngNo}/{mngInstCd} (sewerage-service)
- * - 하수관로 자체입력정보 저장: POST /api/v1/fcltppl (sewerage-service)
- * - 우수토실 자체입력정보 저장: POST /api/v1/fcltstofcbr (sewerage-service)
- * - 하수펌프장 자체입력정보 저장: POST /api/v1/fcltpump (sewerage-service)
- * - 하수맨홀 자체입력정보 저장: POST /api/v1/fcltmhl (sewerage-service)
+ * - 하수관로 자체입력정보 조회: GET /api/v1/fcltPpl/{fcltMngNo}/{mngInstCd} (sewerage-service)
+ * - 우수토실 자체입력정보 조회: GET /api/v1/fcltStofcbr/{fcltMngNo}/{mngInstCd} (sewerage-service)
+ * - 하수펌프장 자체입력정보 조회: GET /api/v1/fcltPump/{fcltMngNo}/{mngInstCd} (sewerage-service)
+ * - 하수맨홀 자체입력정보 조회: GET /api/v1/fcltMhl/{fcltMngNo}/{mngInstCd} (sewerage-service)
+ * - 하수관로 자체입력정보 저장: POST /api/v1/fcltPpl (sewerage-service)
+ * - 우수토실 자체입력정보 저장: POST /api/v1/fcltStofcbr (sewerage-service)
+ * - 하수펌프장 자체입력정보 저장: POST /api/v1/fcltPump (sewerage-service)
+ * - 하수맨홀 자체입력정보 저장: POST /api/v1/fcltMhl (sewerage-service)
  */
 "use client";
 import { getData, postData } from "@/components/lib/api";
@@ -69,6 +70,12 @@ import { useAlertStore } from "@/shared/lib";
 import { useConfirm } from "@frontend-opensource/use-react-hooks";
 import useStore from "@/store/useStore";
 import ExmnSurveyResultSection from "../exmn/ExmnSurveyResultSection";
+import {
+  formatFldngHstryDateTime,
+  normalizeFldngHstryWtlvApiFid,
+  normalizeFldngHstryWtlvDisplayId,
+} from "../fldngHstry/fldngHstryUtils";
+import { useFldngHstryFeatureClick } from "../fldngHstry/FldngHstryFeatureClick";
 
 const linkedFacilityHighlightStyle = new Style({
   image: new CircleStyle({
@@ -91,53 +98,6 @@ const linkedFacilityHighlightStyle = new Style({
   zIndex: 9999,
 });
 
-const normalizeFldngWtlvMapDisplayId = (value: unknown) => {
-  const normalized = String(value ?? "").trim();
-  const prefix = "tb_ms_fldng_wtlv_map.";
-  return normalized.startsWith(prefix)
-    ? normalized.slice(prefix.length)
-    : normalized;
-};
-
-const normalizeFldngWtlvMapApiFid = (value: unknown) => {
-  const normalized = String(value ?? "").trim();
-  if (!normalized) return "";
-  return normalizeFldngWtlvMapDisplayId(normalized);
-};
-
-const normalizeRainAnalysisPayload = (data: any) => {
-  if (!data || typeof data !== "object") return {};
-  return {
-    rain_bgng_tm: data.rainBgngTm ?? data.rain_bgng_tm ?? null,
-    rainBgngTm: data.rainBgngTm ?? data.rain_bgng_tm ?? null,
-    rain_end_tm: data.rainEndTm ?? data.rain_end_tm ?? null,
-    rainEndTm: data.rainEndTm ?? data.rain_end_tm ?? null,
-    rain_tot: data.rainTot ?? data.rain_tot ?? null,
-    rainTot: data.rainTot ?? data.rain_tot ?? null,
-    rain_str: data.rainStr ?? data.rain_str ?? null,
-    rainStr: data.rainStr ?? data.rain_str ?? null,
-  };
-};
-
-// 침수흔적도 침수시작일시, 침수종료일시 한줄로 보이도록
-const formatFldngWtlvDateTime = (dateValue: unknown, timeValue: unknown) => {
-  const rawDate = String(dateValue ?? "").trim();
-  const rawTime = String(timeValue ?? "").trim();
-
-  const normalizedDate = /^\d{8}$/.test(rawDate)
-    ? `${rawDate.slice(0, 4)}-${rawDate.slice(4, 6)}-${rawDate.slice(6, 8)}`
-    : rawDate;
-
-  const timeDigits = rawTime.replace(/[^0-9]/g, "");
-  const normalizedTime = !timeDigits
-    ? ""
-    : timeDigits.length <= 2
-      ? `${timeDigits.padStart(2, "0")}:00`
-      : `${timeDigits.padStart(4, "0").slice(0, 2)}:${timeDigits.padStart(4, "0").slice(2, 4)}`;
-
-  return [normalizedDate, normalizedTime].filter(Boolean).join(" ");
-};
-
 type MngInstOption = {
   mngInstCd: string;
   lwrInstNm: string;
@@ -183,20 +143,12 @@ const FeatureClickEventPopup = ({
     new Map<string, Promise<any | null>>(),
   );
   const [mngInstOptions, setMngInstOptions] = useState<MngInstOption[]>([]);
-  const [floodDepthRows, setFloodDepthRows] = useState<
-    Record<string, unknown>[]
-  >([]);
-  const [floodWtlvRows, setFloodWtlvRows] = useState<Record<string, unknown>[]>(
-    [],
-  );
-  const [selectedFloodDepthFid, setSelectedFloodDepthFid] = useState<
-    string | null
-  >(null);
-  const [selectedFloodWtlvFid, setSelectedFloodWtlvFid] = useState<
-    string | null
-  >(null);
-  const floodDepthYearListRef = useRef<HTMLDivElement>(null);
-  const floodWtlvListRef = useRef<HTMLDivElement>(null);
+  const {
+    hasFldngHstryLinkedFeatures,
+    fldngHstryFeatureClickHeadName,
+    loadFldngHstryFeatureClickDetail,
+    resetFldngHstryFeatureClick,
+  } = useFldngHstryFeatureClick();
   const { ctpv, sgg, fetchCtpv, fetchSgg } = useStore();
 
   // 🎯 관로관리번호 추출
@@ -234,7 +186,7 @@ const FeatureClickEventPopup = ({
 
     const fetchMngInstOptions = async () => {
       try {
-        const result = await getData("v1/fcltppl/mngInsts");
+        const result = await getData("v1/fcltPpl/mngInsts");
         if (!isMounted) return;
         const sortedOptions = Array.isArray(result)
           ? [...result].sort((a, b) =>
@@ -488,7 +440,7 @@ const FeatureClickEventPopup = ({
           result = "침수흔적위선";
           setHeadlist(FldngWtlvMapCol);
           setLayerSpecificNm(
-            normalizeFldngWtlvMapDisplayId(
+            normalizeFldngHstryWtlvDisplayId(
               featureData.values_.fid ?? featureId,
             ),
           );
@@ -568,7 +520,7 @@ const FeatureClickEventPopup = ({
         case "tb_ms_fldng_wtlv_map": {
           result = "침수흔적위선";
           setHeadlist(FldngWtlvMapCol2);
-          setLayerSpecificNm(normalizeFldngWtlvMapDisplayId(featureData.fid));
+          setLayerSpecificNm(normalizeFldngHstryWtlvDisplayId(featureData.fid));
           break;
         }
         case "tb_ms_fldng_dpth_map": {
@@ -642,7 +594,7 @@ const FeatureClickEventPopup = ({
           formatDisplayData(normalizedRegionData),
         );
         if (selectedLayerName === "침수흔적위선") {
-          const fldngBgngDtm = formatFldngWtlvDateTime(
+          const fldngBgngDtm = formatFldngHstryDateTime(
             formattedData.bgngYmd ??
               formattedData.bgng_ymd ??
               data.bgngYmd ??
@@ -652,7 +604,7 @@ const FeatureClickEventPopup = ({
               data.fldngBgngHm ??
               data.fldng_bgng_hm,
           );
-          const fldngEndDtm = formatFldngWtlvDateTime(
+          const fldngEndDtm = formatFldngHstryDateTime(
             formattedData.endYmd ??
               formattedData.end_ymd ??
               data.endYmd ??
@@ -768,13 +720,13 @@ const FeatureClickEventPopup = ({
           isValidDetailIdentifier(fcltMngNo) &&
           isValidDetailIdentifier(mngInstCd);
         if (selectedLayerName === "하수관로")
-          apiEndpoint = `v1/fcltppl/${fcltMngNo}/${mngInstCd}`;
+          apiEndpoint = `v1/fcltPpl/${fcltMngNo}/${mngInstCd}`;
         else if (selectedLayerName === "우수토실")
-          apiEndpoint = `v1/fcltstofcbr/${fcltMngNo}/${mngInstCd}`;
+          apiEndpoint = `v1/fcltStofcbr/${fcltMngNo}/${mngInstCd}`;
         else if (selectedLayerName === "하수펌프장")
-          apiEndpoint = `v1/fcltpump/${fcltMngNo}/${mngInstCd}`;
+          apiEndpoint = `v1/fcltPump/${fcltMngNo}/${mngInstCd}`;
         else if (selectedLayerName === "하수맨홀")
-          apiEndpoint = `v1/fcltmhl/${fcltMngNo}/${mngInstCd}`;
+          apiEndpoint = `v1/fcltMhl/${fcltMngNo}/${mngInstCd}`;
 
         // API에서 상세 데이터 가져오기
         if (apiEndpoint && canRequestDetail) {
@@ -855,60 +807,20 @@ const FeatureClickEventPopup = ({
         }
 
         if (selectedLayerName === "침수흔적위선" && featureId) {
-          const depthLookupKey = normalizeFldngWtlvMapApiFid(featureId);
-          setFloodDepthRows([]);
-          setFloodWtlvRows([]);
-          setSelectedFloodDepthFid(null);
-          setSelectedFloodWtlvFid(null);
-          try {
-            const normalizedFloodMapFid =
-              normalizeFldngWtlvMapApiFid(featureId);
-            if (!normalizedFloodMapFid) {
-              throw new Error("침수흔적도 fid가 비어 있습니다.");
-            }
-            const rainAnalysis = await getData(
-              `v1/fldng/hstry/rain-anls/${encodeURIComponent(normalizedFloodMapFid)}`,
-            );
-            if (rainAnalysis) {
-              const mergedData = {
-                ...formattedData,
-                ...normalizeRainAnalysisPayload(rainAnalysis),
-              };
-              setFetchData(mergedData);
-              setTableData(mergedData);
-            }
-          } catch (rainError) {
-            console.warn("침수강우분석 조회 실패:", rainError);
-          }
-          try {
-            if (depthLookupKey) {
-              const depthRows = await getData(
-                `v1/fldng/hstry/depth-map/${encodeURIComponent(depthLookupKey)}`,
-              );
-              const depthPayload = depthRows?.data ?? depthRows;
-              const depthItems = Array.isArray(depthPayload)
-                ? depthPayload
-                : depthPayload?.depthMaps;
-              const waterLevelItems = Array.isArray(
-                depthPayload?.waterLevelMaps,
-              )
-                ? depthPayload.waterLevelMaps
-                : [];
-              const normalizedDepthRows = Array.isArray(depthItems)
-                ? depthItems.filter((row) => row && typeof row === "object")
-                : [];
-              const normalizedWaterLevelRows = waterLevelItems.filter(
-                (row: unknown) => row && typeof row === "object",
-              );
-              setFloodDepthRows(normalizedDepthRows);
-              setFloodWtlvRows(normalizedWaterLevelRows);
-              // 최초에는 연계 항목을 선택하지 않고 버튼 목록만 표시한다.
-              setSelectedFloodDepthFid(null);
-              setSelectedFloodWtlvFid(null);
-            }
-          } catch (depthError) {
-            console.warn("침수깊이지도 조회 실패:", depthError);
+          resetFldngHstryFeatureClick();
+          const fldngHstryFid = normalizeFldngHstryWtlvApiFid(featureId);
+          if (!fldngHstryFid) {
+            throw new Error("침수흔적도 fid가 비어 있습니다.");
           }
+
+          const fldngHstryDetail =
+            await loadFldngHstryFeatureClickDetail(fldngHstryFid);
+          const mergedFldngHstryData = {
+            ...formattedData,
+            ...fldngHstryDetail.rainAnalysis,
+          };
+          setFetchData(mergedFldngHstryData);
+          setTableData(mergedFldngHstryData);
         }
       } catch (error) {
         console.error("데이터 로딩 중 오류:", error);
@@ -974,10 +886,10 @@ const FeatureClickEventPopup = ({
       let apiEndpoint = "";
       let result = null;
 
-      if (layerNm === "하수관로") apiEndpoint = "v1/fcltppl";
-      else if (layerNm === "우수토실") apiEndpoint = "v1/fcltstofcbr";
-      else if (layerNm === "하수펌프장") apiEndpoint = "v1/fcltpump";
-      else if (layerNm === "하수맨홀") apiEndpoint = "v1/fcltmhl";
+      if (layerNm === "하수관로") apiEndpoint = "v1/fcltPpl";
+      else if (layerNm === "우수토실") apiEndpoint = "v1/fcltStofcbr";
+      else if (layerNm === "하수펌프장") apiEndpoint = "v1/fcltPump";
+      else if (layerNm === "하수맨홀") apiEndpoint = "v1/fcltMhl";
 
       bodyData["fcltMngNo"] =
         featureData.values_.fclt_mng_no.toString() || null;
@@ -1018,13 +930,14 @@ const FeatureClickEventPopup = ({
   return (
     <div
       id="popup"
-      className="absolute right-0 top-0 z-[50] flex h-[calc(100vh-5rem)] w-[350px] flex-col overflow-hidden border-r border-border bg-background transition-all duration-300"
+      className="absolute right-0 top-0 z-[50] flex h-full max-h-[calc(100dvh-6rem)] w-[350px] max-w-full flex-col overflow-hidden border-r border-border bg-background transition-all duration-300"
     >
       <LoadingOverlay isLoading={isLoading} />
-      <div className="card-header relative flex items-center justify-between bg-primary p-4 pr-12">
-        <div className="flex flex-1 items-center space-x-4">
+      {/* 제목·기능 버튼·닫기 버튼의 칸을 분리해 시설 종류나 제목 길이에 관계없이 겹침을 방지한다. */}
+      <div className="card-header relative !mx-0 !grid shrink-0 grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-2 bg-primary p-4">
+        <div className="min-w-0">
           {surveyMode && (
-            <h3 className="whitespace-nowrap text-2xl font-medium text-primary-foreground">
+            <h3 className="break-words text-2xl font-medium text-primary-foreground">
               조사관리 <br />
               관로번호 :{" "}
               {featureData?.get?.("gisManagementNo") ??
@@ -1034,16 +947,14 @@ const FeatureClickEventPopup = ({
             </h3>
           )}
           <h3
-            className={`${surveyMode ? "hidden" : ""} whitespace-nowrap text-2xl font-medium text-primary-foreground`}
+            className={`${surveyMode ? "hidden" : ""} break-words text-2xl font-medium text-primary-foreground`}
           >
             {layerNm}
             {tableData?.usg_cd && <>({tableData.usg_cd})</>} 정보 <br />
             관리번호 : {layerSpecificNm}
           </h3>
         </div>
-        <div
-          className={`flex shrink-0 items-center space-x-3 ${layerNm === "하수관로" ? "mr-8" : ""}`}
-        >
+        <div className="flex items-center gap-2">
           {/* 하수관로일 때만 Infil/RDII 버튼 표시 */}
           {layerNm === "하수관로" && (
             <>
@@ -1099,7 +1010,7 @@ const FeatureClickEventPopup = ({
         </div>
         <Button
           onClick={onClose}
-          className="text-primary-foreground/80 absolute right-2 top-1/2 z-10 h-8 w-8 -translate-y-1/2 p-0 hover:text-primary-foreground focus:outline-none"
+          className="text-primary-foreground/80 h-8 w-8 shrink-0 p-0 hover:text-primary-foreground focus:outline-none"
           size="xs"
           aria-label="시설 상세정보 닫기"
           title="닫기"
@@ -1107,160 +1018,15 @@ const FeatureClickEventPopup = ({
           <span aria-hidden="true">✕</span>
         </Button>
       </div>
+      {/* 표 카드를 flex로 압축하지 않고 내용 높이대로 쌓아 본문에서만 스크롤한다. */}
       <div
-        className="flex flex-1 flex-col overflow-y-auto overflow-x-hidden"
+        className="min-h-0 min-w-0 flex-1 overflow-y-auto overflow-x-hidden"
         ref={contentRef}
       >
         <VerticalTable
           headName={
-            layerNm === "침수흔적위선" &&
-            (floodDepthRows.length > 0 || floodWtlvRows.length > 0) ? (
-              <div className="flex w-full min-w-0 flex-col items-start gap-2">
-                <span>기본정보</span>
-                {floodDepthRows.length > 0 && (
-                  <div className="flex w-full items-center gap-1">
-                    <span className="w-9 shrink-0 text-[1.1rem] font-semibold">
-                      심선
-                    </span>
-                    <button
-                      type="button"
-                      aria-label="이전 연도"
-                      className="shrink-0 px-1 text-lg leading-none text-foreground"
-                      onClick={() =>
-                        floodDepthYearListRef.current?.scrollBy({
-                          left: -120,
-                          behavior: "smooth",
-                        })
-                      }
-                    >
-                      ‹
-                    </button>
-                    <div
-                      ref={floodDepthYearListRef}
-                      className="flex min-w-0 flex-1 gap-2 overflow-x-auto whitespace-nowrap [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
-                    >
-                      {[...floodDepthRows]
-                        .map((row, index) => ({
-                          row,
-                          index,
-                          year: String(
-                            row.fldng_yr ?? row.fldngYr ?? row.yr ?? "",
-                          ).trim(),
-                        }))
-                        .filter(({ year }) => Boolean(year))
-                        .sort((left, right) => {
-                          const yearOrder = left.year.localeCompare(
-                            right.year,
-                            undefined,
-                            { numeric: true },
-                          );
-                          return yearOrder !== 0
-                            ? yearOrder
-                            : left.index - right.index;
-                        })
-                        .map(({ row, index, year }) => (
-                          <button
-                            key={`${String(row.fldng_dpth_map_sn ?? row.fid ?? "row")}-${index}`}
-                            type="button"
-                            onClick={async () => {
-                              const depthFid = String(
-                                row.fldng_dpth_map_sn ?? row.fid ?? "",
-                              ).trim();
-                              if (depthFid) {
-                                setSelectedFloodDepthFid(depthFid);
-                                setSelectedFloodWtlvFid(null);
-                                const core = GisApp.Module.layer as any;
-                                await core.showSearchResultsFromGeoJSON?.(
-                                  "tb_ms_fldng_dpth_map",
-                                  `tb_ms_fldng_dpth_map.${depthFid.replace(/^tb_ms_fldng_dpth_map\./, "")}`,
-                                );
-                              }
-                            }}
-                            className={`shrink-0 rounded border px-3 py-1 text-[1.2rem] font-medium leading-5 ${selectedFloodDepthFid === String(row.fldng_dpth_map_sn ?? row.fid ?? "").trim() ? "border-blue-600 bg-white text-blue-700" : "border-border bg-muted text-muted-foreground"}`}
-                          >
-                            {year}년
-                          </button>
-                        ))}
-                    </div>
-                    <button
-                      type="button"
-                      aria-label="다음 연도"
-                      className="shrink-0 px-1 text-lg leading-none text-foreground"
-                      onClick={() =>
-                        floodDepthYearListRef.current?.scrollBy({
-                          left: 120,
-                          behavior: "smooth",
-                        })
-                      }
-                    >
-                      ›
-                    </button>
-                  </div>
-                )}
-                {floodWtlvRows.length > 0 && (
-                  <div className="flex w-full items-center gap-1">
-                    <span className="w-9 shrink-0 text-[1.1rem] font-semibold">
-                      위선
-                    </span>
-                    <button
-                      type="button"
-                      aria-label="이전 위선"
-                      className="shrink-0 px-1 text-lg leading-none text-foreground"
-                      onClick={() =>
-                        floodWtlvListRef.current?.scrollBy({
-                          left: -120,
-                          behavior: "smooth",
-                        })
-                      }
-                    >
-                      ‹
-                    </button>
-                    <div
-                      ref={floodWtlvListRef}
-                      className="flex min-w-0 flex-1 gap-2 overflow-x-auto whitespace-nowrap [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
-                    >
-                      {floodWtlvRows.map((row, index) => {
-                        const waterLevelFid = String(row.fid ?? "").trim();
-                        const disasterName = String(
-                          row.fldng_dstr_nm ?? row.fldngDstrNm ?? "",
-                        ).trim();
-                        return (
-                          <button
-                            key={`${waterLevelFid || "wtlv"}-${index}`}
-                            type="button"
-                            onClick={async () => {
-                              if (!waterLevelFid) return;
-                              setSelectedFloodWtlvFid(waterLevelFid);
-                              setSelectedFloodDepthFid(null);
-                              const core = GisApp.Module.layer as any;
-                              await core.showSearchResultsFromGeoJSON?.(
-                                "tb_ms_fldng_wtlv_map",
-                                `tb_ms_fldng_wtlv_map.${waterLevelFid.replace(/^tb_ms_fldng_wtlv_map\./, "")}`,
-                              );
-                            }}
-                            className={`shrink-0 rounded border px-3 py-1 text-[1.2rem] font-medium leading-5 ${selectedFloodWtlvFid === waterLevelFid ? "border-blue-600 bg-white text-blue-700" : "border-border bg-muted text-muted-foreground"}`}
-                          >
-                            {disasterName || "재해명 없음"}
-                          </button>
-                        );
-                      })}
-                    </div>
-                    <button
-                      type="button"
-                      aria-label="다음 위선"
-                      className="shrink-0 px-1 text-lg leading-none text-foreground"
-                      onClick={() =>
-                        floodWtlvListRef.current?.scrollBy({
-                          left: 120,
-                          behavior: "smooth",
-                        })
-                      }
-                    >
-                      ›
-                    </button>
-                  </div>
-                )}
-              </div>
+            layerNm === "침수흔적위선" && hasFldngHstryLinkedFeatures ? (
+              fldngHstryFeatureClickHeadName
             ) : layerNm === "하수관로" && tableData?.elapsedYears ? (
               <>
                 기본정보{" "}

apps/sn/app/(map-layout)/map/components/popupComponent/sewagePump.tsx

@@ -1,4 +1,5 @@
 /**
+ * 화면명: 하수펌프장 정보
  * ➡️ 경로 : 하수관망도 메인 페이지 (시설물 클릭) - 오른쪽 팝업창 (하수펌프장)
  * 
  * 📄 sewagePump

apps/sn/app/(map-layout)/map/components/popupComponent/smh.tsx

@@ -1,4 +1,5 @@
 /**
+ * 화면명: 하수맨홀 정보
  * ➡️ 경로 : 하수관망도 메인 페이지 (시설물 클릭) - 오른쪽 팝업창 (하수맨홀)
  * 
  * 📄 Smh
@@ -10,7 +11,7 @@
  * - 저장 버튼을 통한 데이터 저장 기능
  * 
  * 🔗 사용 API
- * - 상류관로 조회: GET /api/v1/fcltmhl/upperPpls/{fcltMngNo} (sewerage-service)
+ * - 상류관로 조회: GET /api/v1/fcltMhl/upperPpls/{fcltMngNo} (sewerage-service)
  */
 import { VerticalTable } from '@/components/ui/verticalTable';
 import { type ReactNode, useEffect, useState } from 'react';
@@ -25,7 +26,7 @@ export async function searchUpperPpls(
 ) {
   let data: any = null;
   try {
-    data = await getData(`v1/fcltmhl/upperPpls/${fcltMngNo}`);
+    data = await getData(`v1/fcltMhl/upperPpls/${fcltMngNo}`);
   } catch (error) {
     console.error("JSON parsing error:", error);
     notify(`해당 맨홀의 상류관로를 찾을 수 없습니다.`);

apps/sn/app/(map-layout)/map/components/popupComponent/stormWaterPump.tsx

@@ -1,4 +1,5 @@
 /**
+ * 화면명: 빗물펌프 정보
  * ➡️ 경로 : 하수관망도 메인 페이지 (시설물 클릭) - 오른쪽 팝업창 (빗물펌프)
  * 
  * 📄 StormWaterPump
@@ -34,4 +35,4 @@ const StormWaterPump = ({ featureData }: { featureData: Record<string, any> }) =
   )
 }
 
-export default StormWaterPump
+export default StormWaterPump

apps/sn/app/(map-layout)/map/components/popupComponent/swtrmtPrcsZoneAnalysisApi.ts

@@ -1,3 +1,4 @@
+/** 처리구역 관로분석정보와 보수이력을 조회·다운로드하는 API를 제공한다. */
 import { getBlobDataWithHeaders, getData } from "@/components/lib/api";
 
 export type SwtrmtPrcsZoneAnalysisMetric = {

apps/sn/app/(map-layout)/map/components/rdiiResult/RdiiResultPopupPage.tsx

@@ -1,3 +1,7 @@
+/**
+ * 화면명: RDII 분석결과 목록
+ * RDII 분석결과를 검색하고 목록·엑셀·지도 보기 기능을 제공한다.
+ */
 "use client";
 
 import { useCallback, useEffect, useState } from "react";
@@ -10,6 +14,7 @@ import {
 import { Button } from "@common/components";
 
 import { getData } from "@/components/lib/api";
+import { appendApiSearchParams } from "@/shared/util/util";
 import { downloadExcelWithKoreanHeaders } from "@/shared/lib/download-excel";
 import { fetchAllPages } from "@/shared/lib/fetch-all-pages";
 import { useAlertStore } from "@/shared/lib";
@@ -134,16 +139,13 @@ export default function RdiiResultPopupPage() {
           : "rainInfwtAnlsSn,desc",
       );
 
-      if (nextFilters.aplcnYmFrom)
-        queryParams.set("aplcnYmFrom", nextFilters.aplcnYmFrom);
-      if (nextFilters.aplcnYmTo)
-        queryParams.set("aplcnYmTo", nextFilters.aplcnYmTo);
-      if (nextFilters.ctpvCd !== "0")
-        queryParams.set("ctpvCd", nextFilters.ctpvCd);
-      if (nextFilters.sggCd !== "0")
-        queryParams.set("sggCd", nextFilters.sggCd);
-      if (nextFilters.swtrmtFcltNm.trim())
-        queryParams.set("swtrmtFcltNm", nextFilters.swtrmtFcltNm.trim());
+      appendApiSearchParams(queryParams, {
+        aplcnYmFrom: nextFilters.aplcnYmFrom,
+        aplcnYmTo: nextFilters.aplcnYmTo,
+        ctpvCd: nextFilters.ctpvCd,
+        sggCd: nextFilters.sggCd,
+        swtrmtFcltNm: nextFilters.swtrmtFcltNm,
+      });
 
       const response = await getData(`v1/rdiiAnls?${queryParams.toString()}`);
       const content = Array.isArray(response?.content) ? response.content : [];

apps/sn/app/(map-layout)/map/components/rdiiResult/rdiiResultTypes.ts

@@ -1,3 +1,4 @@
+/** RDII 분석결과 화면의 타입·검색 조건·컬럼과 응답 변환을 정의한다. */
 "use client";
 
 export const RDII_RESULT_ROW_SELECT_MESSAGE = "SN_RDII_RESULT_ROW_SELECT";
@@ -44,4 +45,4 @@ export type RdiiResultMapViewResponse = {
   pipeGeometry: Record<string, unknown>;
   pipes: RdiiResultMapViewPipe[];
   pipeCount: number;
-};
+};

apps/sn/app/(map-layout)/map/components/rdiiResult/useRdiiResultMap.ts

@@ -1,3 +1,4 @@
+/** RDII 분석결과 선택 시 부모 지도에 결과 레이어를 표시하는 훅이다. */
 "use client";
 
 import { useCallback, useEffect, useRef, useState, type MutableRefObject } from "react";

apps/sn/app/(map-layout)/map/components/repairHistory/RepairHistoryPopupPage.tsx

@@ -1,3 +1,7 @@
+/**
+ * 화면명: 보수이력 목록
+ * 선택 시설의 보수이력을 조회하고 목록으로 표시한다.
+ */
 "use client";
 
 import { useCallback, useEffect, useMemo, useState } from "react";

apps/sn/app/(map-layout)/map/components/rightPanel/RightPanelBookmarkTabs.tsx

@@ -0,0 +1,163 @@
+/** 우측 상세 탭의 표시·분류 모델을 지도 조회 수명에서 분리한다. */
+import type { ExmnMapJobType } from "../exmn/exmnMapTypes";
+import type { SinkholeDetail, SinkholeNearbyPipe } from "../sinkhole/sinkholeTypes";
+
+export type RightPanelTabKind = "feature" | "sinkhole" | "gisEdit";
+export type RightPanelTabCategory =
+  | "sinkhole"
+  | "pipe"
+  | "exmnSurvey"
+  | "treatmentFacility"
+  | "treatmentZone"
+  | "defaultFeature"
+  | "gisEdit";
+
+export type RightPanelTab = {
+  id: string;
+  kind: RightPanelTabKind;
+  category: RightPanelTabCategory;
+  displayLabel: string;
+  surveyJobType?: ExmnMapJobType;
+  parentTabId?: string | null;
+  featureData: any;
+  sinkholeDetail?: SinkholeDetail | null;
+  nearbyPipes?: SinkholeNearbyPipe[];
+  gisEditChangeId?: string | null;
+  lastActiveAt: number;
+};
+
+export type RightPanelTabStyle = {
+  active: string;
+  inactive: string;
+};
+
+export type RightPanelBookmarkTabsProps = {
+  tabs: RightPanelTab[];
+  activeTabId: string | null;
+  onActivate: (tabId: string) => void;
+  onBack: (tabId: string) => void;
+};
+
+// 지도 객체 유형과 조사구분을 식별하는 범례 의미색이므로 테마와 무관한 정적 class를 유지한다.
+export const RIGHT_PANEL_TAB_STYLE_BY_CATEGORY: Record<
+  RightPanelTabCategory,
+  RightPanelTabStyle
+> = {
+  sinkhole: {
+    active: "border-[#d97706] bg-[#d97706] text-white",
+    inactive: "border-[#fdba74] bg-[#fff7ed] text-[#9a3412] hover:bg-[#ffedd5]",
+  },
+  pipe: {
+    active: "border-[#2563eb] bg-[#2563eb] text-white",
+    inactive: "border-[#93c5fd] bg-[#eff6ff] text-[#1e40af] hover:bg-[#dbeafe]",
+  },
+  exmnSurvey: {
+    active: "border-[#0f766e] bg-[#0f766e] text-white",
+    inactive: "border-[#5eead4] bg-[#f0fdfa] text-[#115e59] hover:bg-[#ccfbf1]",
+  },
+  treatmentFacility: {
+    active: "border-[#15803d] bg-[#15803d] text-white",
+    inactive: "border-[#86efac] bg-[#f0fdf4] text-[#166534] hover:bg-[#dcfce7]",
+  },
+  treatmentZone: {
+    active: "border-[#7e22ce] bg-[#7e22ce] text-white",
+    inactive: "border-[#d8b4fe] bg-[#faf5ff] text-[#6b21a8] hover:bg-[#f3e8ff]",
+  },
+  gisEdit: {
+    active: "border-[#0f766e] bg-[#0f766e] text-white",
+    inactive: "border-[#5eead4] bg-[#f0fdfa] text-[#115e59] hover:bg-[#ccfbf1]",
+  },
+  defaultFeature: {
+    active: "border-[#475569] bg-[#475569] text-white",
+    inactive: "border-[#cbd5e1] bg-[#f8fafc] text-[#334155] hover:bg-[#f1f5f9]",
+  },
+};
+
+export const RIGHT_PANEL_EXMN_TAB_STYLE_BY_JOB_TYPE: Record<
+  ExmnMapJobType,
+  RightPanelTabStyle
+> = {
+  PPL: {
+    active: "border-[#eab308] bg-[#facc15] text-[#713f12]",
+    inactive: "border-[#fde68a] bg-[#fefce8] text-[#854d0e] hover:bg-[#fef9c3]",
+  },
+  MNHL: {
+    active: "border-[#8b5cf6] bg-[#8b5cf6] text-white",
+    inactive: "border-[#c4b5fd] bg-[#f5f3ff] text-[#5b21b6] hover:bg-[#ede9fe]",
+  },
+};
+
+// 공용 우측 탭은 유형과 활성 상태에 관계없이 먼저 열린 탭부터 제거한다.
+export const findRightPanelTabOverflowCandidate = (
+  tabs: RightPanelTab[],
+  nextTabId: string,
+) => {
+  return tabs.find((tab) => tab.id !== nextTabId) ?? null;
+};
+
+// 부모 지반침하가 제거되면 그 부모에서 열린 연계 관로도 같은 탭 그룹으로 제거한다.
+export const removeRightPanelTabGroup = (
+  tabs: RightPanelTab[],
+  removedTabId: string,
+) =>
+  tabs.filter(
+    (tab) => tab.id !== removedTabId && tab.parentTabId !== removedTabId,
+  );
+
+// 오른쪽 상세 패널에 상세가 2개 이상 쌓였을 때만 책갈피형 전환 버튼을 보여준다.
+export const RightPanelBookmarkTabs = ({
+  tabs,
+  activeTabId,
+  onActivate,
+  onBack,
+}: RightPanelBookmarkTabsProps) => {
+  if (tabs.length < 2) return null;
+
+  return (
+    <div className="pointer-events-auto absolute right-[350px] top-[92px] z-[70] flex w-[112px] flex-col items-end gap-2">
+      {tabs.map((tab) => {
+        const isActive = tab.id === activeTabId;
+        const style =
+          tab.category === "exmnSurvey" && tab.surveyJobType
+            ? RIGHT_PANEL_EXMN_TAB_STYLE_BY_JOB_TYPE[tab.surveyJobType]
+            : RIGHT_PANEL_TAB_STYLE_BY_CATEGORY[tab.category];
+        const parentTab = tab.parentTabId
+          ? tabs.find((candidate) => candidate.id === tab.parentTabId)
+          : null;
+
+        return (
+          <div
+            key={tab.id}
+            className={[
+              "flex min-h-[42px] w-[112px] items-center border border-r-0 px-1 py-1 shadow-sm transition-colors",
+              isActive ? style.active : style.inactive,
+            ].join(" ")}
+          >
+            {tab.category === "pipe" && parentTab ? (
+              <button
+                type="button"
+                className="mr-1 inline-flex h-6 w-6 shrink-0 items-center justify-center rounded text-sm font-bold transition-colors hover:bg-accent focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-1"
+                title={parentTab.displayLabel + "로 돌아가기"}
+                aria-label={parentTab.displayLabel + "로 돌아가기"}
+                onClick={() => onBack(parentTab.id)}
+              >
+                ←
+              </button>
+            ) : null}
+            <button
+              type="button"
+              className="inline-flex min-w-0 flex-1 items-center justify-center self-stretch px-1 text-center text-[0.82rem] font-semibold leading-tight"
+              title={tab.displayLabel}
+              aria-pressed={isActive}
+              onClick={() => onActivate(tab.id)}
+            >
+              <span className="block max-h-[2.5rem] overflow-hidden break-all">
+                {tab.displayLabel}
+              </span>
+            </button>
+          </div>
+        );
+      })}
+    </div>
+  );
+};

apps/sn/app/(map-layout)/map/components/sbmrgDngrMap/SbmrgDngrMapPopupPage.tsx

@@ -1,3 +1,7 @@
+/**
+ * 화면명: 침수위험지도 목록
+ * 침수위험지도를 검색하고 목록·엑셀·지도 보기 기능을 제공한다.
+ */
 "use client";
 
 import { useCallback, useEffect, useMemo, useState } from "react";
@@ -85,7 +89,7 @@ export default function SbmrgDngrMapPopupPage() {
             availableSggCodes.has(String(item.val).trim().slice(0, 5)),
           );
     return filters.ctpvCd === "0"
-      ? scopedOptions
+      ? []
       : scopedOptions.filter((item) =>
           String(item.val).startsWith(filters.ctpvCd.slice(0, 2)),
         );
@@ -120,7 +124,7 @@ export default function SbmrgDngrMapPopupPage() {
           SBMRG_DNGR_MAP_PAGE_SIZE,
         );
         const response = await getRawJson(
-          `/sewerage-service/api/v1/fldng/sbmrg-dngr-map?${queryString}`,
+          `/sewerage-service/api/v1/fldng/sbmrgDngrMap?${queryString}`,
         );
         const payload = unwrapPayload<{
           items?: SbmrgDngrMapApiItem[];
@@ -156,7 +160,7 @@ export default function SbmrgDngrMapPopupPage() {
         SBMRG_DNGR_MAP_SCOPE_SIZE,
       );
       const response = await getRawJson(
-        `/sewerage-service/api/v1/fldng/sbmrg-dngr-map?${queryString}`,
+        `/sewerage-service/api/v1/fldng/sbmrgDngrMap?${queryString}`,
       );
       const payload = unwrapPayload<{ items?: SbmrgDngrMapApiItem[] }>(
         response,

apps/sn/app/(map-layout)/map/components/sbmrgDngrMap/sbmrgDngrMapTypes.ts

@@ -1,6 +1,8 @@
+/** 침수위험지도 화면의 검색 조건, 컬럼과 응답 변환을 정의한다. */
 "use client";
 
 import type { UiHeadProps } from "@common/business_components/ui";
+import { appendApiSearchParams } from "@/shared/util/util";
 
 export const SBMRG_DNGR_MAP_POPUP_KEY = "sbmrgDngrMapPopup";
 export const SBMRG_DNGR_MAP_LAYER_TYPE = "tb_ms_sbmrg_dngr_map";
@@ -74,13 +76,11 @@ export const buildSbmrgDngrMapListQueryString = (
     page: String(page),
     size: String(size),
   });
-  if (filters.ctpvCd && filters.ctpvCd !== "0")
-    params.set("ctpvCd", filters.ctpvCd.slice(0, 2));
-  if (filters.sggCd && filters.sggCd !== "0")
-    params.set("sggCd", filters.sggCd.slice(0, 5));
-  if (filters.floodWtlvFrqVl && filters.floodWtlvFrqVl !== "0") {
-    params.set("floodWtlvFrqVl", filters.floodWtlvFrqVl);
-  }
+  appendApiSearchParams(params, {
+    ctpvCd: filters.ctpvCd === "0" ? "0" : filters.ctpvCd.slice(0, 2),
+    sggCd: filters.sggCd === "0" ? "0" : filters.sggCd.slice(0, 5),
+    floodWtlvFrqVl: filters.floodWtlvFrqVl,
+  });
   return params.toString();
 };
 

apps/sn/app/(map-layout)/map/components/sinkhole/SinkholeDetailPanel.tsx

@@ -1,3 +1,7 @@
+/**
+ * 화면명: 지반침하 상세정보
+ * 선택한 지반침하 정보와 주변 관로 조회 결과를 표시한다.
+ */
 "use client";
 
 import { useEffect, useMemo, useState } from "react";

apps/sn/app/(map-layout)/map/components/sinkhole/SinkholeLayerSettingPanel.tsx

@@ -1,3 +1,7 @@
+/**
+ * 화면명: 지반침하정보 레이어 설정
+ * 발생연도와 위험도 등 지도 표시 조건을 설정한다.
+ */
 "use client";
 
 import { useEffect, useState } from "react";
@@ -101,7 +105,7 @@ export default function SinkholeLayerSettingPanel({
 
   const currentYear = new Date().getFullYear();
   const yearSelectClass =
-    "h-[20px] !w-[58px] !rounded border border-input bg-background px-[1px] text-center text-[1.1rem] leading-none text-foreground";
+    "!h-[26px] !w-full !rounded border border-input bg-background px-2 py-0 text-center text-[12px] leading-none text-foreground";
   const startYearOptions = Array.from(
     { length: currentYear - SINKHOLE_MIN_SEARCH_YEAR + 1 },
     (_, index) => String(currentYear - index),
@@ -124,24 +128,19 @@ export default function SinkholeLayerSettingPanel({
     .map((year) => ({ val: year, text: year }));
 
   const inputClass =
-    "h-[20px] !rounded border border-input bg-background px-[1px] text-center text-[1.1rem] leading-none text-foreground";
-  const numberInputClass = inputClass + " w-[40px]";
+    "h-[26px] !rounded border border-input bg-background px-2 py-0 text-center text-[12px] leading-none text-foreground";
+  const numberInputClass = inputClass + " min-w-0 flex-1";
   const applyButtonClass =
-    "grid h-[16px] w-[16px] shrink-0 place-items-center rounded-full bg-primary text-[0.85rem] font-bold leading-none text-primary-foreground";
-  const indicator = (
-    <span className="h-2 w-2 shrink-0 rounded-full bg-primary" />
-  );
-
+    "h-[26px] shrink-0 rounded border border-[#A9C5E5] bg-[#EDF4FC] px-2 py-0 text-[12px] font-medium leading-none text-[#2463A6]";
   const settingRows = (
     <div className="space-y-1.5 text-[1.15rem] font-medium text-label">
-      <div className="flex min-h-[26px] items-center gap-1.5 whitespace-nowrap">
-        <div className="flex min-w-0 items-center gap-1">
-          {indicator}
+      <div className="flex min-h-[26px] flex-col items-stretch gap-1.5 whitespace-nowrap">
+        <div className="flex min-w-0 items-center">
           <label htmlFor="sinkhole-radius" className="shrink-0">
             지반침하반경(m)
           </label>
         </div>
-        <div className="ml-auto flex shrink-0 items-center gap-1">
+        <div className="flex w-full items-center gap-1">
           <input
             id="sinkhole-radius"
             className={numberInputClass}
@@ -165,19 +164,18 @@ export default function SinkholeLayerSettingPanel({
             title="적용"
             aria-label="반경 적용"
           >
-            <span className="relative left-[1px]">✓</span>
+            확인
           </button>
         </div>
       </div>
-      <div className="flex min-h-[26px] items-center gap-1.5 whitespace-nowrap">
-        <div className="flex min-w-0 items-center gap-1">
-          {indicator}
+      <div className="flex min-h-[26px] flex-col items-stretch gap-1.5 whitespace-nowrap">
+        <div className="flex min-w-0 items-center">
           <label htmlFor="sinkhole-start-year" className="shrink-0">
             발생년도
           </label>
         </div>
-        <div className="ml-auto flex shrink-0 items-center gap-1.5">
-          <div id="sinkhole-start-year" className="w-[62px]">
+        <div className="flex w-full items-center gap-1.5">
+          <div id="sinkhole-start-year" className="min-w-0 flex-1">
             <SelectBox
               className="w-full"
               selectClass={yearSelectClass}
@@ -194,7 +192,7 @@ export default function SinkholeLayerSettingPanel({
           <span className="px-[1px] text-[0.95rem] font-normal text-muted-foreground">
             ~
           </span>
-          <div id="sinkhole-end-year" className="w-[62px]">
+          <div id="sinkhole-end-year" className="min-w-0 flex-1">
             <SelectBox
               className="w-full"
               selectClass={yearSelectClass}
@@ -215,7 +213,7 @@ export default function SinkholeLayerSettingPanel({
             title="적용"
             aria-label="연도범위 적용"
           >
-            <span className="relative left-[1px]">✓</span>
+            확인
           </button>
         </div>
       </div>

apps/sn/app/(map-layout)/map/components/sinkhole/SinkholePopupPage.tsx

@@ -1,3 +1,7 @@
+/**
+ * 화면명: 지반침하 목록
+ * 지반침하 정보를 검색하고 목록·엑셀·지도 보기 기능을 제공한다.
+ */
 "use client";
 
 import { useCallback, useEffect, useMemo, useState } from "react";
@@ -197,7 +201,7 @@ export default function SinkholePopupPage() {
   const sggOptions = useMemo(
     () =>
       filters.ctpvCd === "0"
-        ? sgg
+        ? []
         : sgg.filter((item) =>
             String(item.val).startsWith(filters.ctpvCd.slice(0, 2)),
           ),

apps/sn/app/(map-layout)/map/components/sinkhole/sinkholeTypes.ts

@@ -1,7 +1,9 @@
+/** 지반침하 화면에서 사용하는 타입·상수·검색 조건을 정의한다. */
 "use client";
 
 import type { SelectDataType } from "@common/business_components";
 import type { IUserInfo } from "@/shared/store";
+import { appendApiSearchParams } from "@/shared/util/util";
 
 export const SINKHOLE_CONTROL_NODE_ID = "SN_SINKHOLE";
 export const SINKHOLE_LAYER_TYPE = "tb_sn_sinkhole_info";
@@ -284,19 +286,16 @@ export const buildSinkholeListQueryString = (
     size: String(size),
   });
 
-  if (filters.startYmd) params.set("startYmd", filters.startYmd);
-  if (filters.endYmd) params.set("endYmd", filters.endYmd);
-
   const ctpvNm = resolveRegionNameByCode(filters.ctpvCd, ctpvOptions, 2);
   const sggNm = resolveRegionNameByCode(filters.sggCd, sggOptions, 5);
-  if (ctpvNm) params.set("ctpvNm", ctpvNm);
-  if (sggNm) params.set("sggNm", sggNm);
-  if (filters.restoreStatus && filters.restoreStatus !== "0") {
-    params.set("restoreStatus", filters.restoreStatus);
-  }
-  if (filters.coordStatus && filters.coordStatus !== "0") {
-    params.set("coordStatus", filters.coordStatus);
-  }
+  appendApiSearchParams(params, {
+    startYmd: filters.startYmd,
+    endYmd: filters.endYmd,
+    ctpvNm,
+    sggNm,
+    restoreStatus: filters.restoreStatus,
+    coordStatus: filters.coordStatus,
+  });
   if (options?.includeCoordStatus === false) {
     params.set("includeCoordStatus", "false");
   }

apps/sn/app/(map-layout)/map/components/sinkhole/useSinkholeCommonCodes.ts

@@ -1,3 +1,4 @@
+/** 지반침하 화면에 필요한 공통코드를 조회하고 선택 항목으로 제공한다. */
 "use client";
 
 import { useEffect, useMemo, useState } from "react";

apps/sn/app/(map-layout)/map/components/waterRisk/WaterRiskPopupPage.tsx

@@ -1,3 +1,7 @@
+/**
+ * 화면명: 통수위험 분석
+ * 통수위험 분석 결과와 과거 분석이력을 조회하고 지도에 표시한다.
+ */
 "use client";
 
 import { useEffect, useMemo, useState } from "react";
@@ -366,7 +370,7 @@ export default function WaterRiskPopupPage(_props: WindowPopupContentProps) {
     areaOptions
       .filter(
         (option) =>
-          draftResultFilters.ctpvCd === "ALL" ||
+          draftResultFilters.ctpvCd !== "ALL" &&
           option.ctpvCd === draftResultFilters.ctpvCd,
       )
       .forEach((option) => {
@@ -382,7 +386,7 @@ export default function WaterRiskPopupPage(_props: WindowPopupContentProps) {
     () =>
       areaOptions.filter(
         (option) =>
-          (draftResultFilters.ctpvCd === "ALL" ||
+          (draftResultFilters.ctpvCd !== "ALL" &&
             option.ctpvCd === draftResultFilters.ctpvCd) &&
           (draftResultFilters.sggCd === "ALL" ||
             option.sggCd === draftResultFilters.sggCd),
@@ -693,7 +697,10 @@ export default function WaterRiskPopupPage(_props: WindowPopupContentProps) {
           onSortChange={handleSortChange}
           actions={
             <span className="text-xl font-normal text-muted-foreground">
-              SWMM 시뮬레이션 기반 통수위험 분석 결과
+              SWMM 시뮬레이션 기반 통수위험 분석 결과 (GIS 매핑 관로 중
+              Capacity 0.8 이상이 1개라도 있으면{" "}
+              <span className="font-bold text-[#ff1c15]">위험</span>, 없으면{" "}
+              <span className="font-bold text-[#1677ff]">정상</span>)
             </span>
           }
         />

apps/sn/app/(map-layout)/map/components/waterRisk/waterRiskClient.ts

@@ -1,3 +1,4 @@
+/** 통수위험 분석 대상과 결과를 조회하는 API 함수를 제공한다. */
 import { getData } from "@/app/components/lib/api";
 import type { UiTableSort } from "@common/business_components/ui/table";
 

apps/sn/app/(map-layout)/map/components/waterRisk/waterRiskTypes.ts

@@ -1,3 +1,4 @@
+/** 통수위험 분석 화면에서 사용하는 타입·상수와 표시값 변환을 정의한다. */
 "use client";
 
 export type WaterRiskStatus = "DANGER" | "NORMAL";

apps/sn/app/(map-layout)/map/searchModal/basicTab.tsx

@@ -55,7 +55,7 @@ const BasicTab: React.FC = () => {
           selectContentClass="z-[101]"
         />
       </div>
-      <div className="min-w-0 flex-[1_1_60rem]">
+      <div className="contents">
         {basicType === "tb_ms_swage_ppl" && <SwagePpl />} {/* 하수관로 */}
         {basicType === "tb_il_swage_prcs_fclt" && <SwagePrcsFclt />}{" "}
         {/** 하수처리시설 */}

apps/sn/app/(map-layout)/map/searchModal/fldngWtlvMap.tsx

@@ -23,8 +23,8 @@ const FldngWtlvMap: React.FC = () => {
   const { handleSearch, handleResetSearch } = useSearchModal();
 
   return (
-    <div className="min-w-0">
-      <div className="flex flex-wrap items-center gap-x-4 gap-y-3">
+    <div className="contents">
+      <div className="contents">
         <CtpvSggPrcsFcltSelectBox
           sido={ctpvCd}
           sigungu={sggCd}