웹 접근성 조치

apps/as/src/entities/code/ui/code-select.tsx

@@ -16,9 +16,20 @@ interface CodeSelectProps extends React.ComponentPropsWithoutRef<typeof Select>
   useYn?: string;
   placeholder?: string;
   className?: string;
+  /** 레이블(label htmlFor) 연결용 트리거 id */
+  id?: string;
+  title?: string;
 }
 
-function CodeSelect({ upCd, useYn, placeholder = "선택", className, ...props }: CodeSelectProps) {
+function CodeSelect({
+  upCd,
+  useYn,
+  placeholder = "선택",
+  className,
+  id,
+  title,
+  ...props
+}: CodeSelectProps) {
   const listQuery = useCodeList(useYn ? undefined : upCd);
   const listByUseYnQuery = useCodeListByUseYn(useYn ? upCd : undefined, useYn ?? "");
 
@@ -27,7 +38,7 @@ function CodeSelect({ upCd, useYn, placeholder = "선택", className, ...props }
 
   return (
     <Select {...props} disabled={props.disabled || isLoading}>
-      <SelectTrigger className={cn("w-[12rem]", className)}>
+      <SelectTrigger id={id} title={title} className={cn("w-[12rem]", className)}>
         <SelectValue placeholder={placeholder} />
       </SelectTrigger>
       <SelectContent>

apps/as/src/entities/elapr/ui/aprvr-picker-dialog.tsx

@@ -76,7 +76,7 @@ function AprvrPickerDialog({ open, onOpenChange, atrzSeComCd, onSelect }: AprvrP
               배치된 검토인력이 없습니다.
             </p>
           ) : (
-            <Table caption="결재자 선택 목록으로 성명, 부서, 직위, 직급, 선택 정보 제공" className="w-full">
+            <Table caption="검토인력 선택 목록으로 성명, 부서, 직위, 직급, 선택 정보 제공" className="w-full">
               <colgroup>
                 <col width="25%" />
                 <col width="25%" />

apps/as/src/entities/elapr/ui/elapr-apln-picker-grid.tsx

@@ -162,7 +162,7 @@ function ElaprAplnPickerGrid({
         </p>
       ) : (
         <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
-          <Table caption="결재선 선택 목록으로 결재순서, 결재구분, 결재자 정보 제공" className="w-full">
+          <Table caption="결재선 관리 목록으로 결재순서, 결재구분, 결재자, 관리 정보 제공" className="w-full">
             <colgroup>
               <col width="10%" />
               <col width="10%" />

apps/as/src/entities/elapr/ui/elapr-approval-dialog.tsx

@@ -315,7 +315,7 @@ function ElaprApprovalDialog({
                 collisionDetection={closestCenter}
                 onDragEnd={handleDragEnd}
               >
-                <Table caption="결재 진행 현황 목록으로 결재순서, 결재구분, 결재자, 전결자 지정, 결재상태, 관리 정보 제공" className="w-full">
+                <Table caption="결재 진행 단계 목록으로 결재순서, 결재구분, 결재자, 전결자 지정, 결재상태, 관리 정보 제공" className="w-full">
                   <colgroup>
                     <col width="8%" />
                     <col width="8%" />

apps/as/src/entities/elapr/ui/elapr-tmplt-select-table.tsx

@@ -66,7 +66,7 @@ function ElaprTmpltSelectTable({
       getCoreRowModel: getCoreRowModel(),
     },
     dataTableOptions: {
-      caption: "결재서식 선택 목록",
+      caption: "전자결재서식 목록으로 결재서식명 정보 제공",
       onRowClick: (row) => {
         setRowSelection({ [row.elaprTmpltId]: true });
         onSelectTmplt(row);

apps/as/src/pages/approval-line-management/ui/aprvr-picker-dialog.tsx

@@ -73,7 +73,7 @@ function AprvrPickerDialog({
               배치된 검토인력이 없습니다.
             </p>
           ) : (
-            <Table caption="검토인력 목록으로 성명, 부서, 직위, 직급, 선택 정보 제공" className="w-full">
+            <Table caption="검토인력 선택 목록으로 성명, 부서, 직위, 직급, 선택 정보 제공" className="w-full">
               <colgroup>
                 <col width="25%" />
                 <col width="25%" />

apps/as/src/pages/approval-line-management/ui/elapr-apln-grid.tsx

@@ -185,7 +185,7 @@ function ElaprAplnGrid({ elaprTmpltId }: ElaprAplnGridProps) {
         </p>
       ) : (
         <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
-          <Table caption="결재선 목록으로 결재순서, 결재구분, 결재자 정보 제공" className="w-full">
+          <Table caption="결재선 관리 목록으로 결재순서, 결재구분, 결재자 ID, 결재자, 등록일시, 관리 정보 제공" className="w-full">
             <colgroup>
               <col width="5%" />
               <col width="10%" />

apps/as/src/pages/approval-line-management/ui/elapr-tmplt-list.tsx

@@ -90,7 +90,7 @@ function ElaprTmpltList({ selectedTmpltId, onSelectTmplt }: ElaprTmpltListProps)
       getCoreRowModel: getCoreRowModel(),
     },
     dataTableOptions: {
-      caption: "결재서식 목록으로 결재서식명 정보 제공",
+      caption: "전자결재선 관리 목록으로 결재서식명, 문서구분, 등록일시, 관리 정보 제공",
       onRowClick: (row) => {
         setRowSelection({ [row.elaprTmpltId]: true });
         onSelectTmplt(row);

apps/as/src/pages/checklist-management/ui/cklst-artcl-form-dialog.tsx

@@ -84,9 +84,9 @@ function CklstArtclFormDialog({
             />
           </div>
           <div className="space-y-2">
-            <Label>사용여부</Label>
+            <Label htmlFor="cklstArtclUseYn">사용여부</Label>
             <Select value={useYn} onValueChange={(v) => setValue("useYn", v as "Y" | "N")}>
-              <SelectTrigger className="w-full">
+              <SelectTrigger id="cklstArtclUseYn" className="w-full">
                 <SelectValue placeholder="사용여부" />
               </SelectTrigger>
               <SelectContent>

apps/as/src/pages/checklist-management/ui/cklst-artcl-list.tsx

@@ -70,7 +70,7 @@ function CklstArtclList({ cklstSn }: CklstArtclListProps) {
     Success: () => (
       <DataTable
         table={table}
-        caption="체크리스트 항목 목록: 항목명, 검토내용, 검토결과 정보 제공"
+        caption="점검항목 관리 목록으로 점검항목코드, 점검항목명, 사용여부, 등록일시, 관리 정보 제공"
       />
     ),
   });

apps/as/src/pages/checklist-management/ui/cklst-mng-form-dialog.tsx

@@ -100,8 +100,9 @@ function CklstMngFormDialog({
             />
           </div>
           <div className="space-y-2">
-            <Label>문서구분</Label>
+            <Label htmlFor="cklstDocSeComCd">문서구분</Label>
             <CodeSelect
+              id="cklstDocSeComCd"
               upCd="ASDOCSE"
               value={docSeComCd}
               onValueChange={(v) => setValue("docSeComCd", v)}
@@ -110,8 +111,9 @@ function CklstMngFormDialog({
             />
           </div>
           <div className="space-y-2">
-            <Label>업무구분</Label>
+            <Label htmlFor="cklstTaskSeComCd">업무구분</Label>
             <CodeSelect
+              id="cklstTaskSeComCd"
               upCd={docSeComCd || "ASDOCSE"}
               value={watch("taskSeComCd")}
               onValueChange={(v) => setValue("taskSeComCd", v)}
@@ -121,9 +123,9 @@ function CklstMngFormDialog({
             />
           </div>
           <div className="space-y-2">
-            <Label>사용여부</Label>
+            <Label htmlFor="cklstUseYn">사용여부</Label>
             <Select value={useYn} onValueChange={(v) => setValue("useYn", v as "Y" | "N")}>
-              <SelectTrigger className="w-full">
+              <SelectTrigger id="cklstUseYn" className="w-full">
                 <SelectValue placeholder="사용여부" />
               </SelectTrigger>
               <SelectContent>

apps/as/src/pages/checklist-management/ui/cklst-mng-list.tsx

@@ -83,7 +83,7 @@ function CklstMngList({ selectedCklstSn, onSelectCklst }: CklstMngListProps) {
       getCoreRowModel: getCoreRowModel(),
     },
     dataTableOptions: {
-      caption: "체크리스트 목록",
+      caption: "점검표 관리 목록으로 점검표일련번호, 점검표명, 문서구분, 업무구분, 사용여부, 등록일시, 관리 정보 제공",
       onRowClick: (row) => {
         setRowSelection({ [String(row.cklstSn)]: true });
         onSelectCklst(row);

apps/as/src/pages/checklist-management/ui/cklst-preview-dialog.tsx

@@ -44,65 +44,78 @@ function CklstPreviewDialog({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-[64rem]">
+      <DialogContent className="flex max-h-[90vh] max-w-[64rem] flex-col">
         <DialogHeader>
           <DialogTitle>체크리스트 미리보기 — {cklstNm}</DialogTitle>
         </DialogHeader>
         {displayRows.length === 0 ? (
           <p className="py-6 text-center text-muted-foreground">표시할 항목이 없습니다.</p>
         ) : (
-          <Table caption={`체크리스트 ${cklstNm} 미리보기`}>
-            <colgroup>
-              <col width="25%" />
-              <col width="50%" />
-              <col width="25%" />
-            </colgroup>
-            <TableHeader>
-              <TableRow>
-                <TableHead align="left">점검항목</TableHead>
-                <TableHead align="left">주요 검토내용</TableHead>
-                <TableHead>검토 여부</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {displayRows.map(({ row, depth }) => {
-                const branchPrefix = formatTreeBranchPrefix(depth);
-                const showRadios = row.bchckUseYn !== "N";
+          // 항목이 많아 창 높이를 넘으면 표 영역만 스크롤 (초점을 받아 키보드로도 스크롤 가능)
+          <div
+            tabIndex={0}
+            role="region"
+            aria-label="체크리스트 미리보기 목록"
+            className="min-h-0 flex-1 overflow-y-auto rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
+          >
+            <Table
+              caption={`체크리스트 미리보기 ${cklstNm} 목록으로 점검항목, 주요 검토내용, 검토 여부 정보 제공`}
+            >
+              <colgroup>
+                <col width="25%" />
+                <col width="50%" />
+                <col width="25%" />
+              </colgroup>
+              <TableHeader>
+                <TableRow>
+                  <TableHead align="left">점검항목</TableHead>
+                  <TableHead align="left">주요 검토내용</TableHead>
+                  <TableHead>검토 여부</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {displayRows.map(({ row, depth }) => {
+                  const branchPrefix = formatTreeBranchPrefix(depth);
+                  const showRadios = row.bchckUseYn !== "N";
 
-                if (row.useYn === "N") return null;
+                  if (row.useYn === "N") return null;
 
-                return (
-                  <TableRow key={row.rowKey}>
-                    <TableCell align="left">
-                      <span className="inline-flex items-center gap-1">
-                        {branchPrefix ? (
-                          <span className="font-mono text-muted">{branchPrefix}</span>
-                        ) : null}
-                        <span>{getArtclLabel(row.cklstArtclSn)}</span>
-                      </span>
-                    </TableCell>
-                    <TableCell>{row.rvwCn ?? "—"}</TableCell>
-                    <TableCell align="center">
-                      {showRadios ? (
-                        <RadioGroup className="flex items-center justify-center">
-                          <div className="flex items-center gap-1">
-                            <RadioGroupItem value="Y" id={`${row.rowKey}-preview-y`} />
-                            <Label htmlFor={`${row.rowKey}-preview-y`}>예</Label>
-                          </div>
-                          <div className="flex items-center gap-1">
-                            <RadioGroupItem value="N" id={`${row.rowKey}-preview-n`} />
-                            <Label htmlFor={`${row.rowKey}-preview-n`}>아니오</Label>
-                          </div>
-                        </RadioGroup>
-                      ) : (
-                        "—"
-                      )}
-                    </TableCell>
-                  </TableRow>
-                );
-              })}
-            </TableBody>
-          </Table>
+                  return (
+                    <TableRow key={row.rowKey}>
+                      <TableCell align="left">
+                        <span className="inline-flex items-center gap-1">
+                          {branchPrefix ? (
+                            <span className="font-mono text-muted">{branchPrefix}</span>
+                          ) : null}
+                          <span>{getArtclLabel(row.cklstArtclSn)}</span>
+                        </span>
+                      </TableCell>
+                      <TableCell>{row.rvwCn ?? "—"}</TableCell>
+                      <TableCell align="center">
+                        {showRadios ? (
+                          <RadioGroup
+                            aria-label="검토 여부"
+                            className="flex items-center justify-center"
+                          >
+                            <div className="flex items-center gap-1">
+                              <RadioGroupItem value="Y" id={`${row.rowKey}-preview-y`} />
+                              <Label htmlFor={`${row.rowKey}-preview-y`}>예</Label>
+                            </div>
+                            <div className="flex items-center gap-1">
+                              <RadioGroupItem value="N" id={`${row.rowKey}-preview-n`} />
+                              <Label htmlFor={`${row.rowKey}-preview-n`}>아니오</Label>
+                            </div>
+                          </RadioGroup>
+                        ) : (
+                          "—"
+                        )}
+                      </TableCell>
+                    </TableRow>
+                  );
+                })}
+              </TableBody>
+            </Table>
+          </div>
         )}
       </DialogContent>
     </Dialog>

apps/as/src/pages/checklist-management/ui/cklst-rvw-grid.tsx

@@ -277,7 +277,7 @@ function CklstRvwGrid({ selectedCklst }: CklstRvwGridProps) {
           등록된 항목이 없습니다. [추가]로 1단계 항목을 등록하세요.
         </p>
       ) : (
-        <Table caption="체크리스트 항목 목록" className="w-full">
+        <Table caption="체크리스트 항목 목록으로 점검항목, 주요 검토내용, 사용 여부, 체크 사용, 정렬 순서, 구분, 관리 정보 제공" className="w-full">
           <colgroup>
             <col width="16%" />
             <col width="36%" />
@@ -289,13 +289,13 @@ function CklstRvwGrid({ selectedCklst }: CklstRvwGridProps) {
           </colgroup>
           <TableHeader>
             <TableRow>
-              <TableHead>점검항목</TableHead>
-              <TableHead>주요 검토내용</TableHead>
-              <TableHead>사용 여부</TableHead>
-              <TableHead>체크 사용</TableHead>
-              <TableHead>정렬 순서</TableHead>
-              <TableHead>구분</TableHead>
-              <TableHead>관리</TableHead>
+              <TableHead scope="col">점검항목</TableHead>
+              <TableHead scope="col">주요 검토내용</TableHead>
+              <TableHead scope="col">사용 여부</TableHead>
+              <TableHead scope="col">체크 사용</TableHead>
+              <TableHead scope="col">정렬 순서</TableHead>
+              <TableHead scope="col">구분</TableHead>
+              <TableHead scope="col">관리</TableHead>
             </TableRow>
           </TableHeader>
           <TableBody>

apps/as/src/pages/checklist-management/ui/cklst-rvw-row.tsx

@@ -55,7 +55,11 @@ function CklstRvwRowComponent({
             onValueChange={(v) => onChange({ cklstArtclSn: Number(v), isDirty: true })}
             disabled={!row.isNew}
           >
-            <SelectTrigger className="w-full flex-1">
+            {/* 비활성(기존 항목) 상태에서도 텍스트 명도 대비 4.5:1 이상 유지 */}
+            <SelectTrigger
+              title="점검항목 선택"
+              className="w-full flex-1 disabled:opacity-100"
+            >
               <SelectValue placeholder="점검항목 선택" />
             </SelectTrigger>
             <SelectContent>
@@ -73,12 +77,14 @@ function CklstRvwRowComponent({
           value={row.rvwCn ?? ""}
           onChange={(e) => onChange({ rvwCn: e.target.value, isDirty: true })}
           placeholder="주요 검토내용"
+          title="주요 검토내용"
         />
       </TableCell>
       <TableCell align="center">
         <RadioGroup
           value={row.useYn ?? "Y"}
           onValueChange={(v) => onChange({ useYn: v as "Y" | "N", isDirty: true })}
+          aria-label="사용 여부"
           className="flex justify-center gap-4"
         >
           <div className="flex items-center gap-2">
@@ -95,6 +101,7 @@ function CklstRvwRowComponent({
         <RadioGroup
           value={row.bchckUseYn ?? "Y"}
           onValueChange={(v) => onChange({ bchckUseYn: v as "Y" | "N", isDirty: true })}
+          aria-label="체크 사용"
           className="flex justify-center gap-4"
         >
           <div className="flex items-center gap-2">
@@ -111,6 +118,7 @@ function CklstRvwRowComponent({
         <Input
           type="number"
           min={0}
+          title="정렬 순서"
           value={row.sortSeq ?? ""}
           onChange={(e) =>
             onChange({

apps/as/src/pages/code-management/ui/acntg-code-tab-panel.tsx

@@ -103,7 +103,7 @@ function AcntgCodeTabPanel() {
         </p>
       ) : (
         <div className="max-h-[60rem] overflow-y-auto px-4 pb-4 pt-1">
-          <Table caption="회계구분 코드 목록" className="w-full">
+          <Table caption="회계코드 목록으로 코드, 코드명, 설명, 사용 여부, 정렬순서, 구분, 관리 정보 제공" className="w-full">
             <colgroup>
               <col width="14%" />
               <col width="16%" />

apps/as/src/pages/code-management/ui/cnstp-code-tab-panel.tsx

@@ -103,7 +103,7 @@ function CnstpCodeTabPanel() {
         </p>
       ) : (
         <div className="max-h-[60rem] overflow-y-auto px-4 pb-4 pt-1">
-          <Table caption="공종구분 코드 목록" className="w-full">
+          <Table caption="공사코드 목록으로 코드, 코드명, 설명, 숫자 여부, 소숫점 단위, 사용 여부, 정렬순서, 구분, 관리 정보 제공" className="w-full">
             <colgroup>
               <col width="14%" />
               <col width="16%" />

apps/as/src/pages/code-management/ui/fnrs-shar-code-tab-panel.tsx

@@ -103,7 +103,7 @@ function FnrsSharCodeTabPanel() {
         </p>
       ) : (
         <div className="max-h-[60rem] overflow-y-auto px-4 pb-4 pt-1">
-          <Table caption="재원분담 코드 목록" className="w-full">
+          <Table caption="재원분담구분코드 목록으로 코드, 코드명, 설명, 사용 여부, 정렬순서, 구분, 관리 정보 제공" className="w-full">
             <colgroup>
               <col width="14%" />
               <col width="16%" />

apps/as/src/pages/dashboard/ui/dashboard-notice-table.tsx

@@ -39,7 +39,7 @@ export function DashboardNoticeTable() {
       getCoreRowModel: getCoreRowModel(),
     },
     dataTableOptions: {
-      caption: "공지사항 목록",
+      caption: "공지사항 목록으로 번호, 제목, 작성자, 작성일, 조회수 정보 제공",
       variant: "line",
       onRowClick: handleRowClick,
     },

apps/as/src/pages/design-cnstn/model/columns.tsx

@@ -79,6 +79,17 @@ function getBadgeColor(state: BadgeState) {
   }
 }
 
+function getBadgeStateText(state: BadgeState) {
+  switch (state) {
+    case "completed":
+      return "완료";
+    case "current":
+      return "진행중";
+    case "pending":
+      return "대기";
+  }
+}
+
 function formatOptional(value: string | null | undefined) {
   return value?.trim() ? value : "-";
 }
@@ -95,7 +106,9 @@ function ProgressStepBadge({ prgrsSttsComCd }: ProgressStepBadgeProps) {
       {badges.map((badge, index) => (
         <Fragment key={`${badge.label}-${index}`}>
           {index > 0 && <span className="mx-2">&gt;</span>}
-          <Badge color={getBadgeColor(badge.state)}>{badge.label}</Badge>
+          <Badge color={getBadgeColor(badge.state)}>
+            {badge.label}({getBadgeStateText(badge.state)})
+          </Badge>
         </Fragment>
       ))}
     </div>

apps/as/src/pages/design-cnstn/ui/design-list.tsx

@@ -59,7 +59,7 @@ function DesignList({ searchParams, pagination, onPaginationChange }: DesignList
       manualPagination: true,
     },
     dataTableOptions: {
-      caption: "설계검토 목록",
+      caption: "설계자문 목록으로 시도, 시군구, 사업명, 업무구분, 담당자, 해당기관, 진행상황, 신청일 정보 제공",
       viewPagination: true,
       onRowClick: handleRowClick,
     },

apps/as/src/pages/design-cnstn/ui/sections/basic-info-form-section.tsx

@@ -36,7 +36,7 @@ function BasicInfoFormSection() {
 
   return (
     <SectionCollapsible title="기본 정보">
-      <Table caption="사업 기본 정보 입력" variant="secondary">
+      <Table caption="기본 정보 입력으로 사업명, 사업기간, 사업내용, 구분, 신청 지자체 정보 제공" variant="secondary">
         <colgroup>
           <col width="15%" />
           <col width="35%" />

apps/as/src/pages/design-cnstn/ui/sections/basic-info-section.tsx

@@ -11,7 +11,7 @@ interface BasicInfoSectionProps {
 function BasicInfoSection({ det }: BasicInfoSectionProps) {
   return (
     <SectionCollapsible title="기본 정보">
-      <Table caption="사업 기본 정보" variant="secondary">
+      <Table caption="기본 정보로 사업명, 사업기간, 사업내용, 환경청구분, 구분, 신청지자체 정보 제공" variant="secondary">
         <colgroup>
           <col width="15%" />
           <col width="35%" />

apps/as/src/pages/design-cnstn/ui/sections/business-scale-section.tsx

@@ -13,7 +13,7 @@ function BusinessScaleSection({ bizSclList }: BusinessScaleSectionProps) {
   return (
     <SectionCollapsible title="사업규모">
       <div className="overflow-x-auto">
-        <Table caption="사업규모 목록: 구분, 기본계획, 예산반영, 금회설계, 증감 정보 제공" variant="secondary">
+        <Table caption="사업규모 목록으로 구분, 기본계획(A), 예산반영(B), 금회설계시(C), 증감(C-B) 정보 제공" variant="secondary">
           <TableHeader>
             <TableRow>
               <TableHead className="w-[30rem]">구분</TableHead>

apps/as/src/pages/design-cnstn/ui/sections/contact-info-section.tsx

@@ -11,7 +11,7 @@ interface ContactInfoSectionProps {
 function ContactInfoSection({ det }: ContactInfoSectionProps) {
   return (
     <SectionCollapsible title="담당자 정보">
-      <Table caption="사업 담당자 정보" variant="secondary">
+      <Table caption="담당자 정보로 신청자(이름, 연락처, 소속, 이메일)과 설계자(이름, 연락처, 소속, 이메일) 정보 제공" variant="secondary">
         <TableHeader>
           {det.aplcntNm && (
             <>

apps/as/src/pages/design-cnstn/ui/sections/tech-review-opinion-section.tsx

@@ -180,7 +180,7 @@ const TechReviewOpinionSection = forwardRef<
     return (
       <div className="space-y-2">
         <h4 className="text-xl font-semibold">검토의견 작성</h4>
-        <Table caption="검토의견 입력" variant="secondary">
+        <Table caption="검토의견 작성으로 의견내용, 검토결과, 첨부파일 정보 제공" variant="secondary">
           <TableHeader>
             <TableRow>
               <TableHead scope="row" className="w-[12rem]">의견내용</TableHead>
@@ -289,7 +289,7 @@ const TechReviewOpinionSection = forwardRef<
 function TechReviewOpinionTable({ items }: TechReviewOpinionTableProps) {
   return (
     <div className="overflow-x-auto">
-      <Table caption="검토의견 목록: 의견자, 의견내용, 검토결과, 첨부파일, 등록일시 정보 제공" variant="secondary">
+      <Table caption="검토의견 목록으로 의견자명, 의견내용, 검토결과, 첨부파일, 등록일시 정보 제공" variant="secondary">
         <colgroup>
           <col width="10%" />
           <col width="55%" />

apps/as/src/pages/esntl-atch-file-mng/ui/esntl-atch-file-list.tsx

@@ -100,7 +100,7 @@ function EsntlAtchFileList({
       manualPagination: true,
     },
     dataTableOptions: {
-      caption: "필수 첨부파일 관리 목록",
+      caption: "필수첨부파일 목록으로 필수첨부파일아이디, 문서구분, 필수첨부파일명, 필수첨부여부, 비고, 양식 내려받기, 관리 정보 제공",
       viewPagination: true,
     },
   });

apps/as/src/pages/fnrs-cnsltn/model/columns.tsx

@@ -120,6 +120,17 @@ function getBadgeColor(state: BadgeState) {
   }
 }
 
+function getBadgeStateText(state: BadgeState) {
+  switch (state) {
+    case "completed":
+      return "완료";
+    case "current":
+      return "진행중";
+    case "pending":
+      return "대기";
+  }
+}
+
 function formatOptional(value: string | null | undefined) {
   return value?.trim() ? value : "-";
 }
@@ -137,7 +148,9 @@ function ProgressStepBadge({ prgrsSttsComCd, techRplyHstryYn }: ProgressStepBadg
       {badges.map((badge, index) => (
         <Fragment key={badge.label}>
           {index > 0 && <span className="mx-2">&gt;</span>}
-          <Badge color={getBadgeColor(badge.state)}>{badge.label}</Badge>
+          <Badge color={getBadgeColor(badge.state)}>
+            {badge.label}({getBadgeStateText(badge.state)})
+          </Badge>
         </Fragment>
       ))}
     </div>

apps/as/src/pages/fnrs-cnsltn/ui/components/checklist-task-panel.tsx

@@ -53,7 +53,7 @@ function ChecklistTaskPanel({
   return (
     <>
       <div className="overflow-x-auto">
-        <Table caption="체크리스트 검토 입력: 검토항목, 주요 검토내용, 검토결과 정보 제공" variant="secondary">
+        <Table caption={`체크리스트 목록으로 검토항목, 주요 검토내용, 검토 결과${selectedReviewStep !== "LOCAL" ? ", 기술검토 의견" : ""} 정보 제공`} variant="secondary">
           <TableHeader>
             <TableRow>
               <TableHead className="w-[20rem]" rowSpan={2}>

apps/as/src/pages/fnrs-cnsltn/ui/components/file-vrfc-splmnt-dialog.tsx

@@ -115,7 +115,7 @@ function FileVrfcSplmntDialog({
       getCoreRowModel: getCoreRowModel(),
     },
     dataTableOptions: {
-      caption: "파일 검증 보완요청 목록",
+      caption: "파일보완 목록으로 선택, 파일유형, 파일구분, 검증내역 정보 제공",
       viewPagination: false,
     },
   });

apps/as/src/pages/fnrs-cnsltn/ui/components/pwrk-cnsltn-doc-pjtco-ajmt-table.tsx

@@ -42,7 +42,7 @@ function PwrkCnsltnDocPjtcoAjmtTable({
   }
 
   return (
-    <Table caption="사업비 조정 내역: 구분, 검증결과, 검증금액 정보 제공" variant="secondary">
+    <Table caption="금액검증결과 목록으로 구분, 검증결과, 검증금액 정보 제공" variant="secondary">
       <colgroup>
         <col width="30%" />
         <col width="50%" />

apps/as/src/pages/fnrs-cnsltn/ui/components/pwrk-cnsltn-rvw-rslt-inq-dialog.tsx

@@ -157,7 +157,7 @@ function CnsltnListTable({
   const isSomeSelected = selectedCount > 0 && !isAllSelected;
 
   return (
-    <Table caption="자문 검토결과 목록: 구분, 검토의견 정보 제공" variant="secondary">
+    <Table caption="검토 결과 조회 목록으로 선택, 구분, 검토의견 정보 제공" variant="secondary">
       <colgroup>
         <col width="4%" />
         <col width="4%" />

apps/as/src/pages/fnrs-cnsltn/ui/fnrs-list.tsx

@@ -59,7 +59,7 @@ function FnrsList({ searchParams, pagination, onPaginationChange }: FnrsListProp
       manualPagination: true,
     },
     dataTableOptions: {
-      caption: "재원협의 목록",
+      caption: "재원협의 목록으로 시도, 시군구, 사업명, 업무구분, 담당자, 해당기관, 진행상황, 신청일 정보 제공",
       viewPagination: true,
       onRowClick: handleRowClick,
     },

apps/as/src/pages/fnrs-cnsltn/ui/sections/basic-info-form-section.tsx

@@ -49,7 +49,7 @@ function BasicInfoFormSection() {
 
   return (
     <SectionCollapsible title="기본 정보">
-      <Table caption="재원협의 기본 정보 입력" variant="secondary">
+      <Table caption="기본 정보 입력으로 사업명, 사업기간, 사업내용, 구분, 신청 지자체, 시설종류, 재이용용도 정보 제공" variant="secondary">
         <colgroup>
           <col width="15%" />
           <col width="35%" />

apps/as/src/pages/fnrs-cnsltn/ui/sections/basic-info-section.tsx

@@ -11,7 +11,7 @@ interface BasicInfoSectionProps {
 function BasicInfoSection({ det }: BasicInfoSectionProps) {
   return (
     <SectionCollapsible title="기본 정보">
-      <Table caption="재원협의 기본 정보" variant="secondary">
+      <Table caption="기본 정보로 사업명, 사업기간, 사업내용, 환경청구분, 구분, 신청지자체, 확정예산사업번호, 예산신청연도 정보 제공" variant="secondary">
         <colgroup>
           <col width="15%" />
           <col width="35%" />

apps/as/src/pages/fnrs-cnsltn/ui/sections/business-cost-section.tsx

@@ -20,7 +20,7 @@ function BusinessCostSection({ bizCstList }: BusinessCostSectionProps) {
     <SectionCollapsible title="총사업비">
       <div className="overflow-x-auto">
         <p className="mb-2 text-right font-normal text-muted-foreground">(단위: 백만원)</p>
-        <Table caption="총사업비 내역: 구분, 예산반영, 표준사업비, 금회설계, 증감 정보 제공" variant="secondary" className="table-fixed">
+        <Table caption="총사업비 목록으로 구분, 예산반영(A), 표준사업비(B), 금회설계시(C), 증감 정보 제공" variant="secondary" className="table-fixed">
           <TableHeader>
             <TableRow>
               <TableHead className="w-[30rem]" rowSpan={2}>

apps/as/src/pages/fnrs-cnsltn/ui/sections/business-scale-section.tsx

@@ -13,7 +13,7 @@ function BusinessScaleSection({ bizSclList }: BusinessScaleSectionProps) {
   return (
     <SectionCollapsible title="사업규모">
       <div className="overflow-x-auto">
-        <Table caption="사업규모 내역: 구분, 기본계획, 예산반영, 금회설계, 증감 정보 제공" variant="secondary">
+        <Table caption="사업규모 목록으로 구분, 기본계획(A), 예산반영(B), 금회설계시(C), 증감(C-B) 정보 제공" variant="secondary">
           <TableHeader>
             <TableRow>
               <TableHead className="w-[30rem]">구분</TableHead>

apps/as/src/pages/fnrs-cnsltn/ui/sections/contact-info-section.tsx

@@ -11,7 +11,7 @@ interface ContactInfoSectionProps {
 function ContactInfoSection({ det }: ContactInfoSectionProps) {
   return (
     <SectionCollapsible title="담당자 정보">
-      <Table caption="재원협의 담당자 정보" variant="secondary">
+      <Table caption="담당자 정보로 신청자(이름, 연락처, 소속, 이메일)과 설계자(이름, 연락처, 소속, 이메일) 정보 제공" variant="secondary">
         <TableHeader>
           {det.aplcntNm && (
             <>

apps/as/src/pages/fnrs-cnsltn/ui/sections/fnrs-shar-section.tsx

@@ -21,7 +21,7 @@ function FnrsSharSection({ fnrsSharList }: FnrsSharSectionProps) {
     <SectionCollapsible title="재원분담">
       <div className="overflow-x-auto">
         <p className="mb-2 text-right font-normal text-muted-foreground">(단위: 백만원)</p>
-        <Table caption="재원분담 내역: 구분, 현행, 변경요구, 증감, 비고 정보 제공" variant="secondary" className="table-fixed">
+        <Table caption="재원분담 목록으로 구분, 현행(A), 변경요구(B), 증감, 비고 정보 제공" variant="secondary" className="table-fixed">
           <TableHeader>
             <TableRow>
               <TableHead className="w-[24rem]" rowSpan={2}>

apps/as/src/pages/fnrs-cnsltn/ui/sections/tech-review-opinion-section.tsx

@@ -189,7 +189,7 @@ const TechReviewOpinionSection = forwardRef<
     return (
       <div className="space-y-2">
         <h4 className="text-xl font-semibold">검토의견 작성</h4>
-        <Table caption="검토의견 입력" variant="secondary">
+        <Table caption="검토의견 작성으로 의견내용, 검토결과, 첨부파일 정보 제공" variant="secondary">
           <TableHeader>
             <TableRow>
               <TableHead className="w-[12rem]">의견내용</TableHead>
@@ -303,7 +303,7 @@ const TechReviewOpinionSection = forwardRef<
 function TechReviewOpinionTable({ items }: TechReviewOpinionTableProps) {
   return (
     <div className="overflow-x-auto">
-      <Table caption="검토의견 목록: 의견자, 의견내용, 검토결과, 첨부파일, 등록일시 정보 제공" variant="secondary">
+      <Table caption="검토의견 목록으로 의견자명, 의견내용, 검토결과, 첨부파일, 등록일시 정보 제공" variant="secondary">
         <colgroup>
           <col width="10%" />
           <col width="55%" />

apps/as/src/pages/instl-sncn/model/columns.tsx

@@ -121,6 +121,17 @@ function getBadgeColor(state: BadgeState) {
   }
 }
 
+function getBadgeStateText(state: BadgeState) {
+  switch (state) {
+    case "completed":
+      return "완료";
+    case "current":
+      return "진행중";
+    case "pending":
+      return "대기";
+  }
+}
+
 function formatOptional(value: string | null | undefined) {
   return value?.trim() ? value : "-";
 }
@@ -138,7 +149,9 @@ function ProgressStepBadge({ prgrsSttsComCd, techRplyHstryYn }: ProgressStepBadg
       {badges.map((badge, index) => (
         <Fragment key={badge.label}>
           {index > 0 && <span className="mx-2">&gt;</span>}
-          <Badge color={getBadgeColor(badge.state)}>{badge.label}</Badge>
+          <Badge color={getBadgeColor(badge.state)}>
+            {badge.label}({getBadgeStateText(badge.state)})
+          </Badge>
         </Fragment>
       ))}
     </div>

apps/as/src/pages/instl-sncn/ui/components/checklist-task-panel.tsx

@@ -52,7 +52,7 @@ function ChecklistTaskPanel({
   return (
     <>
       <div className="overflow-x-auto">
-        <Table caption="체크리스트 검토 입력: 검토항목, 주요 검토내용, 검토결과 정보 제공" variant="secondary">
+        <Table caption={`체크리스트 목록으로 검토항목, 주요 검토내용, 검토 결과${selectedReviewStep !== "LOCAL" ? ", 기술검토 의견" : ""} 정보 제공`} variant="secondary">
           <TableHeader>
             <TableRow>
               <TableHead className="w-[20rem]" rowSpan={2}>

apps/as/src/pages/instl-sncn/ui/instl-list.tsx

@@ -59,7 +59,7 @@ function InstlList({ searchParams, pagination, onPaginationChange }: InstlListPr
       manualPagination: true,
     },
     dataTableOptions: {
-      caption: "설치승인 목록",
+      caption: "설치인가 목록으로 시도, 시군구, 사업명, 업무구분, 담당자, 해당기관, 진행상황, 신청일 정보 제공",
       viewPagination: true,
       onRowClick: handleRowClick,
     },

apps/as/src/pages/instl-sncn/ui/sections/basic-info-form-section.tsx

@@ -53,7 +53,7 @@ function BasicInfoFormSection() {
 
   return (
     <SectionCollapsible title="기본 정보">
-      <Table caption="설치승인 기본 정보 입력" variant="secondary">
+      <Table caption="기본 정보 입력으로 사업명, 사업기간, 사업내용, 구분, 신청 지자체, 사업구분, 시설종류, 재이용용도 정보 제공" variant="secondary">
         <colgroup>
           <col width="15%" />
           <col width="35%" />

apps/as/src/pages/instl-sncn/ui/sections/basic-info-section.tsx

@@ -11,7 +11,7 @@ interface BasicInfoSectionProps {
 function BasicInfoSection({ det }: BasicInfoSectionProps) {
   return (
     <SectionCollapsible title="기본 정보">
-      <Table caption="설치승인 기본 정보" variant="secondary">
+      <Table caption="기본 정보로 사업명, 사업기간, 사업내용, 구분, 신청지자체, 사업구분 정보 제공" variant="secondary">
         <colgroup>
           <col width="15%" />
           <col width="35%" />

apps/as/src/pages/instl-sncn/ui/sections/business-cost-section.tsx

@@ -20,7 +20,7 @@ function BusinessCostSection({ bizCstList }: BusinessCostSectionProps) {
     <SectionCollapsible title="총사업비">
       <div className="overflow-x-auto">
         <p className="mb-2 text-right font-normal text-muted-foreground">(단위: 백만원)</p>
-        <Table caption="총사업비 내역: 구분, 예산반영, 표준사업비, 금회설계, 증감 정보 제공" variant="secondary" className="table-fixed">
+        <Table caption="총사업비 목록으로 구분, 예산반영(A), 표준사업비(B), 금회설계시(C), 증감 정보 제공" variant="secondary" className="table-fixed">
           <TableHeader>
             <TableRow>
               <TableHead className="w-[30rem]" rowSpan={2}>

apps/as/src/pages/instl-sncn/ui/sections/business-scale-section.tsx

@@ -13,7 +13,7 @@ function BusinessScaleSection({ bizSclList }: BusinessScaleSectionProps) {
   return (
     <SectionCollapsible title="사업규모">
       <div className="overflow-x-auto">
-        <Table caption="사업규모 내역: 구분, 기본계획, 예산반영, 금회설계, 증감 정보 제공" variant="secondary">
+        <Table caption="사업규모 목록으로 구분, 기본계획(A), 예산반영(B), 금회설계시(C), 증감(C-B) 정보 제공" variant="secondary">
           <TableHeader>
             <TableRow>
               <TableHead className="w-[30rem]">구분</TableHead>

apps/as/src/pages/instl-sncn/ui/sections/contact-info-section.tsx

@@ -11,7 +11,7 @@ interface ContactInfoSectionProps {
 function ContactInfoSection({ det }: ContactInfoSectionProps) {
   return (
     <SectionCollapsible title="담당자 정보">
-      <Table caption="설치승인 담당자 정보" variant="secondary">
+      <Table caption="담당자 정보로 신청자(이름, 연락처, 소속, 이메일)과 설계자(이름, 연락처, 소속, 이메일) 정보 제공" variant="secondary">
         <TableHeader>
           {det.aplcntNm && (
             <>

apps/as/src/pages/instl-sncn/ui/sections/tech-review-opinion-section.tsx

@@ -180,7 +180,7 @@ const TechReviewOpinionSection = forwardRef<
     return (
       <div className="space-y-2">
         <h4 className="text-xl font-semibold">검토의견 작성</h4>
-        <Table caption="검토의견 입력" variant="secondary">
+        <Table caption="검토의견 작성으로 의견내용, 검토결과, 첨부파일 정보 제공" variant="secondary">
           <TableHeader>
             <TableRow>
               <TableHead scope="row" className="w-[12rem]">의견내용</TableHead>
@@ -301,7 +301,7 @@ const TechReviewOpinionSection = forwardRef<
 function TechReviewOpinionTable({ items }: TechReviewOpinionTableProps) {
   return (
     <div className="overflow-x-auto">
-      <Table caption="검토의견 목록: 의견자, 의견내용, 검토결과, 첨부파일, 등록일시 정보 제공" variant="secondary">
+      <Table caption="검토의견 목록으로 의견자명, 의견내용, 검토결과, 첨부파일, 등록일시 정보 제공" variant="secondary">
         <colgroup>
           <col width="10%" />
           <col width="55%" />

apps/as/src/pages/my-pbadms-sprt/ui/my-pbadms-sprt-list.tsx

@@ -70,7 +70,7 @@ function MyPbadmsSprtList({ searchParams, pagination, onPaginationChange }: MyPb
       manualPagination: true,
     },
     dataTableOptions: {
-      caption: "나의 행정지원 목록",
+      caption: "내 신청 목록으로 No, 구분, 신청일, 진행상태, 완료(예정)일, 담당자, 담당자연락처 정보 제공",
       viewPagination: true,
       onRowClick: handleRowClick,
     },

apps/as/src/pages/nti-hstry/ui/nti-hstry-list.tsx

@@ -97,7 +97,7 @@ function NtiHstryList({ searchParams, pagination, onPaginationChange }: NtiHstry
       manualPagination: true,
     },
     dataTableOptions: {
-      caption: "알림톡 발송 이력 목록",
+      caption: "알림 이력 목록으로 No, 알림일시, 알림내용, 연계업무, 상태, 처리 정보 제공",
       viewPagination: true,
     },
   });

apps/as/src/pages/ntitlk-sndng/ui/in-prgrs-doc-rcvr-list.tsx

@@ -33,7 +33,7 @@ function InPrgrsDocRcvrList({ selectedRcvrKeys, onRcvrSelectionChange }: InPrgrs
       getCoreRowModel: getCoreRowModel(),
       ...rowSelectionOptions,
     },
-    dataTableOptions: { caption: "진행중 문서 담당자 수신자 목록" },
+    dataTableOptions: { caption: "현재 진행중 문서 담당자(신청자) 목록으로 선택, 문서번호, 문서명, 신청자, 상태 정보 제공" },
   });
 
   return (

apps/as/src/pages/ntitlk-sndng/ui/rvw-mnpw-rcvr-list.tsx

@@ -34,7 +34,7 @@ function RvwMnpwRcvrList({ selectedRcvrKeys, onRcvrSelectionChange }: RvwMnpwRcv
       getCoreRowModel: getCoreRowModel(),
       ...rowSelectionOptions,
     },
-    dataTableOptions: { caption: "검토인력 수신자 목록" },
+    dataTableOptions: { caption: "검토인력 목록으로 선택, 이름, 소속, 전화번호 정보 제공" },
   });
 
   return (

apps/as/src/pages/ntitlk-sndng/ui/sndng-list.tsx

@@ -35,7 +35,7 @@ function SndngList({
 
   return (
     <div className="max-h-[40rem] overflow-auto rounded-md border">
-      <Table caption="알림톡 발송 대상 목록: 이름, 전화번호, 변수, 버튼 정보 제공" variant="line" className="text-sm">
+      <Table caption={`발송 목록으로 ${["이름", "전화번호", ...variableNames.map((variableName) => `#${variableName}`), "버튼"].join(", ")} 정보 제공`} variant="line" className="text-sm">
         <TableHeader className="top-0">
           <TableRow>
             <TableHead className="min-w-[100px]">이름</TableHead>

apps/as/src/pages/rvw-mnpw-mng/ui/rvw-mnpw-block.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useConfirm } from "@frontend-opensource/use-react-hooks";
+import { AxiosError } from "axios";
 
 import { useAlertStore } from "@/shared/lib";
 import type { RvwMnpwMngResponseDto } from "@/entities/rvw-mnpw";
@@ -10,6 +11,14 @@ import { Badge, Button } from "@common/components";
 
 import type { RvwMnpwBlockConfig } from "../model/rvw-mnpw-block-config";
 
+/** 서버 오류 응답의 message 를 우선 표시하고, 없으면 기본 문구를 사용한다 */
+function getErrorMessage(error: unknown, fallback: string) {
+  if (error instanceof AxiosError) {
+    return error.response?.data?.message || fallback;
+  }
+  return fallback;
+}
+
 interface RvwMnpwBlockProps {
   block: RvwMnpwBlockConfig;
   items: RvwMnpwMngResponseDto[];
@@ -33,8 +42,7 @@ function RvwMnpwBlock({ block, items, selectedPerson }: RvwMnpwBlockProps) {
       });
       alert("배치되었습니다.");
     } catch (error) {
-      const message = error instanceof Error ? error.message : "배치에 실패했습니다.";
-      alert(message);
+      alert(getErrorMessage(error, "배치에 실패했습니다."));
     }
   };
 
@@ -48,8 +56,7 @@ function RvwMnpwBlock({ block, items, selectedPerson }: RvwMnpwBlockProps) {
         userUuid: item.userUuid,
       });
     } catch (error) {
-      const message = error instanceof Error ? error.message : "제거에 실패했습니다.";
-      alert(message);
+      alert(getErrorMessage(error, "제거에 실패했습니다."));
     }
   };
 

apps/as/src/pages/sewer-bsc-plan/model/columns.tsx

@@ -119,6 +119,17 @@ function getBadgeColor(state: BadgeState) {
   }
 }
 
+function getBadgeStateText(state: BadgeState) {
+  switch (state) {
+    case "completed":
+      return "완료";
+    case "current":
+      return "진행중";
+    case "pending":
+      return "대기";
+  }
+}
+
 function formatOptional(value: string | undefined) {
   return value?.trim() ? value : "-";
 }
@@ -136,7 +147,9 @@ function ProgressStepBadge({ prgrsSttsComCd, techRplyHstryYn }: ProgressStepBadg
       {badges.map((badge, index) => (
         <Fragment key={`${badge.label}-${index}`}>
           {index > 0 && <span className="mx-2">&gt;</span>}
-          <Badge color={getBadgeColor(badge.state)}>{badge.label}</Badge>
+          <Badge color={getBadgeColor(badge.state)}>
+            {badge.label}({getBadgeStateText(badge.state)})
+          </Badge>
         </Fragment>
       ))}
     </div>

apps/as/src/pages/sewer-bsc-plan/ui/components/checklist-task-panel.tsx

@@ -52,7 +52,7 @@ function ChecklistTaskPanel({
 
   return (
     <div className="overflow-x-auto">
-      <Table caption="체크리스트 검토 입력: 검토항목, 주요 검토내용, 검토결과 정보 제공" variant="secondary">
+      <Table caption={`체크리스트 목록으로 검토항목, 주요 검토내용, 검토 결과${selectedReviewStep !== "LOCAL" ? ", 기술검토 의견" : ""} 정보 제공`} variant="secondary">
         <TableHeader>
           <TableRow>
             <TableHead className="w-[20rem]" rowSpan={2}>

apps/as/src/pages/sewer-bsc-plan/ui/previous-plan/previous-plan-area-table.tsx

@@ -35,7 +35,7 @@ function PreviousPlanAreaTable({ data }: PreviousPlanAreaTableProps) {
   const yearCells = getPlanYearCells(data);
 
   return (
-    <Table caption="이전 기본계획 처리구역 현황" variant="secondary">
+    <Table caption="처리구역별 현황 목록으로 구분, 당초, 기준, 변경 정보 제공" variant="secondary">
       <colgroup>
         <col width="16%" />
         <col width="9.3%" />

apps/as/src/pages/sewer-bsc-plan/ui/previous-plan/previous-plan-file-section.tsx

@@ -202,7 +202,7 @@ function PreviousPlanFileSection({ clsfSystmNm }: PreviousPlanFileSectionProps)
         ) : files.length === 0 ? (
           <p className="py-8 text-center text-lg text-muted-foreground">파일이 없습니다.</p>
         ) : (
-          <Table caption="이전 기본계획 첨부파일 목록" variant="secondary">
+          <Table caption="기본계획파일 목록으로 번호, 파일명, 등록일, 다운로드 정보 제공" variant="secondary">
             <TableHeader>
               <TableRow>
                 <TableHead className="!py-2 !text-xl">번호</TableHead>

apps/as/src/pages/sewer-bsc-plan/ui/previous-plan/previous-plan-summary-table.tsx

@@ -13,7 +13,7 @@ function PreviousPlanSummaryTable({ data }: PreviousPlanSummaryTableProps) {
   const yearCells = getPlanYearCells(data);
 
   return (
-    <Table caption="이전 기본계획 목표연도" variant="secondary">
+    <Table caption="총설 목록으로 구분, 당초, 기준, 변경 정보 제공" variant="secondary">
       <colgroup>
         <col width="10%" />
         <col width="10%" />

apps/as/src/pages/sewer-bsc-plan/ui/sections/basic-info-form-section.tsx

@@ -57,7 +57,7 @@ function BasicInfoFormSection() {
 
   return (
     <SectionCollapsible title="기본계획 신청">
-      <Table caption="기본계획 정보 입력" variant="secondary">
+      <Table caption="기본계획 신청 입력으로 기본계획명, 계획년도, 기준년도, 1단계 목표연도, 2단계 목표연도, 3단계 목표연도, 4단계 목표연도, 계획개요, 구분, 신청 지자체 정보 제공" variant="secondary">
         <colgroup>
           <col width="15%" />
           <col width="35%" />

apps/as/src/pages/sewer-bsc-plan/ui/sections/basic-info-section.tsx

@@ -18,7 +18,7 @@ function BasicInfoSection({ det, dtl }: BasicInfoSectionProps) {
 
   return (
     <SectionCollapsible title="기본계획 신청">
-      <Table caption="기본계획 정보" variant="secondary">
+      <Table caption="기본계획 신청으로 기본계획명, 계획년도, 기준년도, 1단계 목표연도, 2단계 목표연도, 3단계 목표연도, 4단계 목표연도, 계획개요, 구분, 신청 지자체 정보 제공" variant="secondary">
         <colgroup>
           <col width="15%" />
           <col width="35%" />

apps/as/src/pages/sewer-bsc-plan/ui/sections/biz-cst-matrix-form-section.tsx

@@ -75,7 +75,7 @@ function BizCstMatrixFormSection() {
     <SectionCollapsible title="총사업비">
       <div className="overflow-x-auto">
         <p className="mb-2 text-right font-normal text-muted-foreground">(단위: 백만원)</p>
-        <Table caption="단계별 총사업비 입력" variant="secondary" className="table-fixed">
+        <Table caption="총사업비 목록으로 구분, 1단계, 2단계, 3단계, 4단계 정보 제공" variant="secondary" className="table-fixed">
           <colgroup>
             <col width="12%" />
             <col width="22%" />

apps/as/src/pages/sewer-bsc-plan/ui/sections/biz-cst-matrix-section.tsx

@@ -62,7 +62,7 @@ function BizCstMatrixSection({ bizCstList, dtl }: BizCstMatrixSectionProps) {
     <SectionCollapsible title="총사업비">
       <div className="overflow-x-auto">
         <p className="mb-2 text-right font-normal text-muted-foreground">(단위: 백만원)</p>
-        <Table caption="단계별 총사업비 내역" variant="secondary" className="table-fixed">
+        <Table caption="총사업비 목록으로 구분, 1단계, 2단계, 3단계, 4단계 정보 제공" variant="secondary" className="table-fixed">
           <colgroup>
             <col width="12%" />
             <col width="22%" />

apps/as/src/pages/sewer-bsc-plan/ui/sections/contact-info-section.tsx

@@ -13,7 +13,7 @@ function ContactInfoSection({ dtl }: ContactInfoSectionProps) {
 
   return (
     <SectionCollapsible title="담당자 정보">
-      <Table caption="기본계획 담당자 정보" variant="secondary">
+      <Table caption="담당자 정보로 신청자(이름, 연락처, 소속, 이메일)과 설계자(이름, 연락처, 소속, 이메일) 정보 제공" variant="secondary">
         <TableHeader>
           {dtl.aplcntNm ? (
             <>

apps/as/src/pages/sewer-bsc-plan/ui/sections/fnrs-cst-form-section.tsx

@@ -85,7 +85,7 @@ function FnrsCstFormSection() {
           <h3 className="text-xl font-semibold">세부별 총사업비(①) - 재원분담 총사업비(②)</h3>
           <span className="font-normal text-muted-foreground">(단위: 백만원)</span>
         </div>
-        <Table caption="총사업비 대비 재원분담 합계 비교" variant="secondary" className="table-fixed">
+        <Table caption="세부별 총사업비(①) - 재원분담 총사업비(②) 목록으로 구분, 1단계, 2단계, 3단계, 4단계 정보 제공" variant="secondary" className="table-fixed">
           <colgroup>
             <col width="12%" />
             <col width="22%" />
@@ -125,7 +125,7 @@ function FnrsCstFormSection() {
           <h3 className="text-xl font-semibold">재원분담</h3>
           <span className="font-normal text-muted-foreground">(단위: 백만원)</span>
         </div>
-        <Table caption="단계별 재원분담 입력" variant="secondary" className="table-fixed">
+        <Table caption="재원분담 목록으로 구분, 1단계, 2단계, 3단계, 4단계 정보 제공" variant="secondary" className="table-fixed">
           <colgroup>
             <col width="12%" />
             <col width="22%" />

apps/as/src/pages/sewer-bsc-plan/ui/sections/fnrs-cst-section.tsx

@@ -79,7 +79,7 @@ function FnrsCstSection({ fnrsCstList, dtl }: FnrsCstSectionProps) {
           <h3 className="text-xl font-semibold">세부별 총사업비(①) - 재원분담 총사업비(②)</h3>
           <span className="font-normal text-muted-foreground">(단위: 백만원)</span>
         </div>
-        <Table caption="단계별 재원분담 내역" variant="secondary" className="table-fixed">
+        <Table caption="재원분담 목록으로 구분, 1단계, 2단계, 3단계, 4단계 정보 제공" variant="secondary" className="table-fixed">
           <colgroup>
             <col width="12%" />
             <col width="22%" />

apps/as/src/pages/sewer-bsc-plan/ui/sections/outline-form-section.tsx

@@ -79,7 +79,7 @@ function OutlineFormSection() {
           이전기본계획조회
         </Button>
       </div>
-      <Table caption="사업개요 단계별 입력" variant="secondary">
+      <Table caption="사업개요 목록으로 구분, 1단계, 2단계, 3단계, 4단계 정보 제공" variant="secondary">
         <colgroup>
           <col width="12%" />
           <col width="22%" />

apps/as/src/pages/sewer-bsc-plan/ui/sections/outline-section.tsx

@@ -29,7 +29,7 @@ function OutlineSection({ otlnList, dtl }: OutlineSectionProps) {
 
   return (
     <SectionCollapsible title="사업개요">
-      <Table caption="사업개요 단계별 현황" variant="secondary">
+      <Table caption="사업개요 목록으로 구분, 1단계, 2단계, 3단계, 4단계 정보 제공" variant="secondary">
         <colgroup>
           <col width="12%" />
           <col width="22%" />

apps/as/src/pages/sewer-bsc-plan/ui/sections/tech-review-opinion-section.tsx

@@ -187,7 +187,7 @@ const TechReviewOpinionSection = forwardRef<
     return (
       <div className="space-y-2">
         <h4 className="text-xl font-semibold">검토의견 작성</h4>
-        <Table caption="검토의견 입력" variant="secondary">
+        <Table caption="검토의견 작성으로 의견내용, 검토결과, 첨부파일 정보 제공" variant="secondary">
           <TableHeader>
             <TableRow>
               <TableHead className="w-[12rem]">의견내용</TableHead>
@@ -308,7 +308,7 @@ const TechReviewOpinionSection = forwardRef<
 function TechReviewOpinionTable({ items }: TechReviewOpinionTableProps) {
   return (
     <div className="overflow-x-auto">
-      <Table caption="검토의견 목록: 의견자, 의견내용, 검토결과, 첨부파일, 등록일시 정보 제공" variant="secondary">
+      <Table caption="검토의견 목록으로 의견자명, 의견내용, 검토결과, 첨부파일, 등록일시 정보 제공" variant="secondary">
         <colgroup>
           <col width="10%" />
           <col width="55%" />

apps/as/src/pages/sewer-bsc-plan/ui/sections/tmplnt-form-section.tsx

@@ -120,6 +120,7 @@ function TmplntDtlInput({ facilityIndex, planStpNo, fieldKey, decimals }: Tmplnt
 
 interface TmplntFacilityMatrixProps {
   swtrmtFcltCd: string;
+  facilityName?: string;
   sido: string;
   gugun: string;
   facilityIndex: number;
@@ -129,6 +130,7 @@ interface TmplntFacilityMatrixProps {
 
 function TmplntFacilityMatrix({
   swtrmtFcltCd,
+  facilityName,
   sido,
   gugun,
   facilityIndex,
@@ -147,7 +149,10 @@ function TmplntFacilityMatrix({
   const originalData = Array.isArray(data) ? (data[0] ?? null) : null;
 
   return (
-    <Table caption="처리시설별 단계별 계획 입력" variant="secondary">
+    <Table
+      caption={`${facilityName ? `${facilityName} ` : ""}처리시설별 하수도정비기본계획 목록으로 구분, 당초, 현재, 변경 정보 제공`}
+      variant="secondary"
+    >
       <colgroup>
         <col width="12%" />
         <col width="9.75%" />
@@ -317,7 +322,10 @@ function TmplntFacilityAttachments({
   return (
     <div className="mt-6 space-y-2">
       <h3 className="mb-4 text-xl font-semibold">처리구역 필수 첨부파일</h3>
-      <Table caption="처리구역 필수 첨부파일" variant="secondary">
+      <Table
+        caption={`${facilityName ? `${facilityName} ` : ""}처리구역 필수 첨부파일 목록으로 파일명, 파일 확장자, 파일첨부 정보 제공`}
+        variant="secondary"
+      >
         <colgroup>
           <col width="40%" />
           <col width="15%" />
@@ -481,6 +489,8 @@ function TmplntFormSection() {
                   <TabsTrigger
                     key={field.id}
                     value={field.swtrmtFcltCd}
+                    id={`tmplnt-form-tab-${field.swtrmtFcltCd}`}
+                    aria-controls={`tmplnt-form-panel-${field.swtrmtFcltCd}`}
                     className="px-6 py-3 text-2xl"
                   >
                     {facilityName}
@@ -497,10 +507,14 @@ function TmplntFormSection() {
                 <TabsContent
                   key={field.id}
                   value={field.swtrmtFcltCd}
+                  id={`tmplnt-form-panel-${field.swtrmtFcltCd}`}
+                  aria-labelledby={`tmplnt-form-tab-${field.swtrmtFcltCd}`}
                   className="mt-0 border-0 p-0 shadow-none"
                 >
+                  <h3 className="sr-only">{facilityName} 하수도정비기본계획</h3>
                   <TmplntFacilityMatrix
                     swtrmtFcltCd={field.swtrmtFcltCd}
+                    facilityName={facilityName}
                     sido={sido ?? ""}
                     gugun={gugun ?? ""}
                     facilityIndex={facilityIndex}

apps/as/src/pages/sewer-bsc-plan/ui/sections/tmplnt-section.tsx

@@ -77,6 +77,7 @@ function getDtlValue(
 
 interface TmplntFacilityMatrixProps {
   item: SewerBscPlanTmplntResponseDto;
+  facilityName?: string;
   sido?: string;
   gugun?: string;
   crtrYr?: string;
@@ -85,6 +86,7 @@ interface TmplntFacilityMatrixProps {
 
 function TmplntFacilityMatrix({
   item,
+  facilityName,
   sido,
   gugun,
   crtrYr,
@@ -102,7 +104,10 @@ function TmplntFacilityMatrix({
   const originalData = Array.isArray(data) ? (data[0] ?? null) : null;
 
   return (
-    <Table caption="처리시설별 단계별 계획 현황" variant="secondary">
+    <Table
+      caption={`${facilityName ? `${facilityName} ` : ""}처리시설별 하수도정비기본계획 목록으로 구분, 당초, 현재, 변경 정보 제공`}
+      variant="secondary"
+    >
       <colgroup>
         <col width="12%" />
         <col width="9.75%" />
@@ -217,6 +222,8 @@ function TmplntSection({ tmplntList, det, dtl }: TmplntSectionProps) {
               <TabsTrigger
                 key={item.swtrmtFcltCd}
                 value={item.swtrmtFcltCd ?? ""}
+                id={`tmplnt-view-tab-${item.swtrmtFcltCd}`}
+                aria-controls={`tmplnt-view-panel-${item.swtrmtFcltCd}`}
                 className="!px-6 !py-3 text-xl"
               >
                 {facilityName}
@@ -228,10 +235,17 @@ function TmplntSection({ tmplntList, det, dtl }: TmplntSectionProps) {
         {tmplntList.map((item) => {
           const facilityName = resolveFacilityName(item, facilityOptions);
           return (
-            <TabsContent key={item.swtrmtFcltCd} value={item.swtrmtFcltCd ?? ""}>
+            <TabsContent
+              key={item.swtrmtFcltCd}
+              value={item.swtrmtFcltCd ?? ""}
+              id={`tmplnt-view-panel-${item.swtrmtFcltCd}`}
+              aria-labelledby={`tmplnt-view-tab-${item.swtrmtFcltCd}`}
+            >
+              <h3 className="sr-only">{facilityName} 하수도정비기본계획</h3>
               <div className="overflow-x-auto">
                 <TmplntFacilityMatrix
                   item={item}
+                  facilityName={facilityName}
                   sido={det.sido}
                   gugun={det.gugun}
                   crtrYr={dtl?.crtrYr}
@@ -242,7 +256,10 @@ function TmplntSection({ tmplntList, det, dtl }: TmplntSectionProps) {
               {(item.atchFileGroupId || item.atchFileInfo?.orgnlFileNm) && (
                 <div className="mt-6 space-y-2">
                   <h3 className="mb-4 text-xl font-semibold">처리구역 필수 첨부파일</h3>
-                  <Table caption="처리구역 첨부파일" variant="secondary">
+                  <Table
+                    caption={`${facilityName ? `${facilityName} ` : ""}처리구역 필수 첨부파일 목록으로 파일명, 파일첨부 정보 제공`}
+                    variant="secondary"
+                  >
                     <colgroup>
                       <col width="35%" />
                       <col width="65%" />

apps/as/src/pages/sewer-bsc-plan/ui/sewer-bsc-plan-apply-dialog.tsx

@@ -117,7 +117,7 @@ function SewerBscPlanApplyDialog({ open, onOpenChange, onConfirm }: SewerBscPlan
         {isPending ? (
           <Skeleton className="h-[16rem] w-full" />
         ) : (
-          <Table caption="기본계획 신청 정보 입력" variant="secondary">
+          <Table caption="하수도기본계획 신청으로 시도, 시군구, 계획구분, 업무구분 정보 제공" variant="secondary">
             <colgroup>
               <col width="15%" />
               <col width="35%" />
@@ -127,7 +127,9 @@ function SewerBscPlanApplyDialog({ open, onOpenChange, onConfirm }: SewerBscPlan
             <TableHeader>
               {canSidoGugunSelectable && (
                 <TableRow>
-                  <TableHead scope="row" data-required>시도</TableHead>
+                  <TableHead scope="row" data-required>
+                    <label htmlFor="sewer-bsc-plan-apply-sido">시도</label>
+                  </TableHead>
                   <TableCell>
                     <Select
                       value={sidoComCd || undefined}
@@ -136,7 +138,12 @@ function SewerBscPlanApplyDialog({ open, onOpenChange, onConfirm }: SewerBscPlan
                         setSggComCd("");
                       }}
                     >
-                      <SelectTrigger className="w-full">
+                      <SelectTrigger
+                        id="sewer-bsc-plan-apply-sido"
+                        title="시도 선택"
+                        aria-required="true"
+                        className="w-full"
+                      >
                         <SelectValue placeholder="선택" />
                       </SelectTrigger>
                       <SelectContent>
@@ -148,14 +155,16 @@ function SewerBscPlanApplyDialog({ open, onOpenChange, onConfirm }: SewerBscPlan
                       </SelectContent>
                     </Select>
                   </TableCell>
-                  <TableHead scope="row">시군구</TableHead>
+                  <TableHead scope="row">
+                    <label htmlFor="sewer-bsc-plan-apply-sgg">시군구</label>
+                  </TableHead>
                   <TableCell>
                     <Select
                       value={sggComCd || undefined}
                       onValueChange={setSggComCd}
                       disabled={!sidoComCd || isUserGugunPending}
                     >
-                      <SelectTrigger className="w-full">
+                      <SelectTrigger id="sewer-bsc-plan-apply-sgg" title="시군구 선택" className="w-full">
                         <SelectValue placeholder="선택" />
                       </SelectTrigger>
                       <SelectContent>
@@ -170,12 +179,17 @@ function SewerBscPlanApplyDialog({ open, onOpenChange, onConfirm }: SewerBscPlan
                 </TableRow>
               )}
               <TableRow>
-                <TableHead scope="row" data-required>계획구분</TableHead>
+                <TableHead id="sewer-bsc-plan-apply-plan-se-label" scope="row" data-required>
+                  계획구분
+                </TableHead>
                 <TableCell colSpan={3}>
                   <FieldSet className="px-2">
+                    {/* 라디오 그룹이 어떤 항목의 선택인지 알 수 있도록 th 와 연결 */}
                     <RadioGroup
                       value={sewerBscPlanSeComCd || undefined}
                       onValueChange={setSewerBscPlanSeComCd}
+                      aria-labelledby="sewer-bsc-plan-apply-plan-se-label"
+                      aria-required="true"
                     >
                       <div className="flex flex-wrap gap-4">
                         {planSeOptions?.map((option) => (
@@ -199,10 +213,17 @@ function SewerBscPlanApplyDialog({ open, onOpenChange, onConfirm }: SewerBscPlan
                 </TableCell>
               </TableRow>
               <TableRow>
-                <TableHead scope="row" data-required>업무구분</TableHead>
+                <TableHead id="sewer-bsc-plan-apply-task-se-label" scope="row" data-required>
+                  업무구분
+                </TableHead>
                 <TableCell colSpan={3}>
                   <FieldSet className="px-2">
-                    <RadioGroup value={taskSeComCd || undefined} onValueChange={setTaskSeComCd}>
+                    <RadioGroup
+                      value={taskSeComCd || undefined}
+                      onValueChange={setTaskSeComCd}
+                      aria-labelledby="sewer-bsc-plan-apply-task-se-label"
+                      aria-required="true"
+                    >
                       <div className="flex flex-wrap gap-4">
                         {taskSeOptions?.map((option) => (
                           <FieldLabel

apps/as/src/pages/sewer-bsc-plan/ui/sewer-bsc-plan-list.tsx

@@ -63,7 +63,7 @@ function SewerBscPlanList({ searchParams, pagination, onPaginationChange }: Sewe
       manualPagination: true,
     },
     dataTableOptions: {
-      caption: "하수도 기본계획 목록",
+      caption: "하수도기본계획 목록으로 시도, 시군구, 기본계획명, 계획구분, 업무구분, 담당자, 해당기관, 진행상황, 등록일 정보 제공",
       viewPagination: true,
       onRowClick: handleRowClick,
     },

apps/as/src/widgets/bns-picker/ui/bns-picker-dialog.tsx

@@ -134,7 +134,7 @@ function BnsPickerDialog({ open, onClose, onSelect }: BnsPickerDialogProps) {
       manualPagination: true,
     },
     dataTableOptions: {
-      caption: "사업 검색 결과 목록",
+      caption: "사업찾기 목록으로 선택, 환경청, 시도, 시군구, 사업명, 예산신청년도, 사업시작년도, 사업종료년도, 총사업비 정보 제공",
       viewPagination: true,
       onRowClick: (row) => {
         setRowSelection({ [getBnsListRowKey(row)]: true });
@@ -331,7 +331,7 @@ function BnsPickerDialog({ open, onClose, onSelect }: BnsPickerDialogProps) {
 
 function BnsBasicInfoTable({ detail }: { detail: BnsDetailResponseDto }) {
   return (
-    <Table caption="사업 검색 결과 목록" variant="secondary" className="w-full">
+    <Table caption="기본정보로 시도, 구군, 대권역, 단위유역, 중권역, 환경청, 회계구분, 단위사업, 세부사업, 내역사업, 세부내역, 세세부내역, 사업시작년도, 사업종료년도, 보조율(%), 사업상태, 사업명, 사업위치, 기본계획상의 목표년도, 사업추진현황, 상위계획, 기술진단, 사업내용, 비고 정보 제공" variant="secondary" className="w-full">
       <TableBody>
         <DetailPairRow
           leftLabel="시도"
@@ -404,7 +404,7 @@ function BnsBasicInfoTable({ detail }: { detail: BnsDetailResponseDto }) {
 
 function BnsOperationTable({ detail }: { detail: BnsDetailResponseDto }) {
   return (
-    <Table caption="선택 사업 상세 정보" variant="secondary" className="w-full">
+    <Table caption="운영현황 및 사업효과로 유입하수처리장, 처리방식, 시설용량(현행), 시설용량(사업후), 처리구역면적(현행), 처리구역면적(사업후), 총인구(현행), 처리인구(현행), 처리인구(사업후), 하수관로, 배수설비 총가구수, 펌프장(개소), 방류수계, 방류하천, 사업후 예상유입하수량, 사업후 유입수질(예상BOD), 계획방류수질, 하천수질, 표준사업비, 기타사업물량 정보 제공" variant="secondary" className="w-full">
       <TableBody>
         <DetailPairRow
           leftLabel="유입하수처리장"

apps/as/src/widgets/ognz-user-tree/ui/ognz-user-tree-node.tsx

@@ -13,6 +13,9 @@ import {
 
 import { type SelectedOgnzUser, toSelectedOgnzUser } from "../model/selected-ognz-user";
 
+const FOCUS_RING_CLASS_NAME =
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring";
+
 interface OgnzUserTreeNodeProps {
   node: OgnzUserTreeResponseDto;
   depth?: number;
@@ -56,7 +59,10 @@ function OgnzUserTreeNode({
         <CollapsibleTrigger asChild>
           <button
             type="button"
-            className="group flex w-full items-center gap-2 rounded-sm p-2 text-left hover:bg-accent"
+            className={cn(
+              "group flex w-full items-center gap-2 rounded-sm p-2 text-left hover:bg-accent",
+              FOCUS_RING_CLASS_NAME,
+            )}
           >
             <ChevronRight
               className={cn(
@@ -73,31 +79,51 @@ function OgnzUserTreeNode({
         {node.users.map((user) => {
           const isSelected = selectedUserId === user.userUnqId;
           const selectedUser = toSelectedOgnzUser(user, node);
+          const rowClassName = cn(
+            "group flex w-full cursor-pointer items-center gap-2 rounded-sm p-2 text-left hover:bg-accent",
+            isSelected && "!border !border-primary !bg-primary-transparent",
+          );
+          const userLabel = (
+            <>
+              <span className="text-[1.4rem] text-label">{user.userNm}</span>
+              <span className="text-xl text-muted-foreground">({user.jbpsSeNm})</span>
+            </>
+          );
+
+          // 선택 버튼이 없으면 행 자체를 버튼으로 렌더링해 키보드(Tab/Enter/Space)로 선택 가능하게 한다.
+          if (!showSelectButton) {
+            return (
+              <button
+                key={user.userUnqId}
+                type="button"
+                style={{ paddingInlineStart: indent + 24 }}
+                className={cn(rowClassName, FOCUS_RING_CLASS_NAME)}
+                aria-pressed={isSelected}
+                onClick={() => onSelect(selectedUser)}
+              >
+                {userLabel}
+              </button>
+            );
+          }
 
           return (
             <div
               key={user.userUnqId}
               style={{ paddingInlineStart: indent + 24 }}
-              className={cn(
-                "group flex cursor-pointer items-center gap-2 rounded-sm p-2 hover:bg-accent",
-                isSelected && "!border !border-primary !bg-primary-transparent",
-              )}
+              className={rowClassName}
               onClick={() => onSelect(selectedUser)}
             >
-              <span className="text-[1.4rem] text-label">{user.userNm}</span>
-              <span className="text-xl text-muted-foreground">({user.jbpsSeNm})</span>
-              {showSelectButton ? (
-                <Button
-                  type="button"
-                  size="sm"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    onSelect(selectedUser);
-                  }}
-                >
-                  선택
-                </Button>
-              ) : null}
+              {userLabel}
+              <Button
+                type="button"
+                size="sm"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onSelect(selectedUser);
+                }}
+              >
+                선택
+              </Button>
             </div>
           );
         })}

apps/as/src/widgets/pbadms-sprt/ui/attachments-form-section.tsx

@@ -380,7 +380,7 @@ function AttachmentsFormSection({
         {essentialFiles.length > 0 && (
           <div className="px-2">
             <h3 className="mb-4 text-xl font-semibold">필수 첨부파일</h3>
-            <Table caption="필수 첨부파일 목록: 파일명, 파일 확장자, 파일 첨부 정보 제공" variant="secondary" className="table-fixed">
+            <Table caption="필수 첨부파일 목록으로 파일명, 파일 확장자, 파일첨부 정보 제공" variant="secondary" className="table-fixed">
               <colgroup>
                 <col width="44%" />
                 <col width="12%" />

apps/as/src/widgets/pbadms-sprt/ui/attachments-view-section.tsx

@@ -17,7 +17,7 @@ function AttachmentsViewSection({ esntlFileList, etcFileList }: AttachmentsViewS
       {esntlFileList.length > 0 && (
         <SectionCollapsible title="필수 첨부파일">
           <div className="overflow-x-auto">
-            <Table caption="첨부파일 목록" variant="secondary">
+            <Table caption="필수 첨부파일 목록으로 필수 자료명, 파일명, 크기 정보 제공" variant="secondary">
               <TableHeader>
                 <TableRow>
                   <TableHead>필수 자료명</TableHead>
@@ -77,7 +77,7 @@ function AttachmentsViewSection({ esntlFileList, etcFileList }: AttachmentsViewS
       {etcFileList.length > 0 && (
         <SectionCollapsible title="기타 첨부파일">
           <div className="overflow-x-auto">
-            <Table caption="첨부파일 목록" variant="secondary">
+            <Table caption="기타 첨부파일 목록으로 파일명, 크기 정보 제공" variant="secondary">
               <TableHeader>
                 <TableRow>
                   <TableHead>파일명</TableHead>

apps/as/src/widgets/pbadms-sprt/ui/biz-cst-total-display-table.tsx

@@ -58,7 +58,7 @@ function BizCstTotalDisplayTable({ costItems, sharItems }: BizCstTotalDisplayTab
         <h3 className="text-xl font-semibold">세부별 총사업비(①) - 재원분담 총사업비(②)</h3>
         <span className="font-normal text-muted-foreground">(단위: 백만원)</span>
       </div>
-      <Table caption="세부별 총사업비와 재원분담 총사업비 비교" variant="secondary">
+      <Table caption="세부별 총사업비(①) - 재원분담 총사업비(②) 목록으로 구분, ① 예산반영(A) - ② 현행(A), ① 금회설계시(C) - ② 변경요구(B) 정보 제공" variant="secondary">
         <TableHeader>
           <TableRow>
             <TableHead>구분</TableHead>

apps/as/src/widgets/pbadms-sprt/ui/business-cost-form-section.tsx

@@ -102,7 +102,7 @@ function BusinessCostFormSection() {
     <SectionCollapsible title="세부별 총사업비">
       <div className="overflow-x-auto">
         <p className="mb-2 text-right font-normal text-muted-foreground">(단위: 백만원)</p>
-        <Table caption="세부별 총사업비 입력: 구분, 예산반영, 표준사업비, 금회설계, 증감 정보 제공" variant="secondary" className="table-fixed">
+        <Table caption="세부별 총사업비 목록으로 구분, 예산반영(A), 표준사업비(B), 금회설계시(C), 증감 정보 제공" variant="secondary" className="table-fixed">
           <colgroup>
             <col width="20%" />
             <col width="20%" />

apps/as/src/widgets/pbadms-sprt/ui/business-scale-form-section.tsx

@@ -102,7 +102,7 @@ function BusinessScaleFormSection() {
     <SectionCollapsible title="사업규모">
       <div className="overflow-x-auto">
         <p className="mb-2 text-right font-normal text-muted-foreground">(단위: 백만원)</p>
-        <Table caption="사업규모 입력: 구분, 기본계획, 예산반영, 금회설계, 증감 정보 제공" variant="secondary">
+        <Table caption="사업규모 목록으로 구분, 기본계획(A), 예산반영(B), 금회설계시(C), 증감(C-B) 정보 제공" variant="secondary">
           <colgroup>
             <col width="20%" />
             <col width="20%" />

apps/as/src/widgets/pbadms-sprt/ui/checklist-form-section.tsx

@@ -199,7 +199,7 @@ function ChecklistFormSection({ docSeComCd, fieldPrefix }: ChecklistFormSectionP
         {checklistTabs.map((tab) => {
           return (
             <TabsContent key={tab.code} value={tab.code} className="space-y-4">
-              <Table caption={`${tab.label} 체크리스트 입력: 검토항목, 주요 검토내용, 검토결과 정보 제공`} variant="secondary">
+              <Table caption={`${tab.label} 체크리스트 목록으로 검토항목, 주요 검토내용, 검토 결과 정보 제공`} variant="secondary">
                 <TableHeader>
                   <TableRow>
                     <TableHead rowSpan={2} className="w-[30rem]">

apps/as/src/widgets/pbadms-sprt/ui/contact-info-form-section.tsx

@@ -23,7 +23,7 @@ function ContactInfoFormSection({ fieldPrefix }: ContactInfoFormSectionProps) {
 
   return (
     <SectionCollapsible title="담당자 정보">
-      <Table caption="담당자 정보 입력" variant="secondary">
+      <Table caption="담당자 정보 입력으로 신청자, 이름, 연락처, 소속, 이메일, 설계자, 이름, 연락처, 소속, 이메일 정보 제공" variant="secondary">
         <TableHeader>
           <TableRow>
             <TableHead scope="row" className="w-[20rem]" rowSpan={2}>

apps/as/src/widgets/pbadms-sprt/ui/fnrs-shar-form-section.tsx

@@ -200,7 +200,7 @@ function FnrsSharFormSection({ initialSharTree, initialSharAtchFiles }: FnrsShar
           <h3 className="text-xl font-semibold">재원분담</h3>
           <span className="font-normal text-muted-foreground">(단위: 백만원)</span>
         </div>
-        <Table caption="재원분담 입력: 구분, 현행, 변경요구, 증감, 비고 정보 제공" variant="secondary" className="table-fixed">
+        <Table caption="재원분담 목록으로 구분, 현행(A), 변경요구(B), 증감, 비고 정보 제공" variant="secondary" className="table-fixed">
           <TableHeader>
             <TableRow>
               <TableHead className="w-[24rem]" rowSpan={2}>

apps/as/src/widgets/pbadms-sprt/ui/pbadms-task-apply-dialog.tsx

@@ -105,7 +105,7 @@ function PbadmsTaskApplyDialog({
         {isPending ? (
           <Skeleton className="h-[16rem] w-full" />
         ) : (
-          <Table caption="행정지원 신청 정보 입력" variant="secondary">
+          <Table caption={`${title}으로 시도, 시군구, 업무구분 정보 제공`} variant="secondary">
             <colgroup>
               <col width="20%" />
               <col width="30%" />
@@ -115,7 +115,9 @@ function PbadmsTaskApplyDialog({
             <TableHeader>
               {canSidoGugunSelectable && (
                 <TableRow>
-                  <TableHead scope="row" data-required>시도</TableHead>
+                  <TableHead scope="row" data-required>
+                    <label htmlFor="pbadms-task-apply-sido">시도</label>
+                  </TableHead>
                   <TableCell>
                     <Select
                       value={sidoComCd || undefined}
@@ -124,7 +126,12 @@ function PbadmsTaskApplyDialog({
                         setSggComCd("");
                       }}
                     >
-                      <SelectTrigger className="w-full">
+                      <SelectTrigger
+                        id="pbadms-task-apply-sido"
+                        title="시도 선택"
+                        aria-required="true"
+                        className="w-full"
+                      >
                         <SelectValue placeholder="선택" />
                       </SelectTrigger>
                       <SelectContent>
@@ -136,14 +143,16 @@ function PbadmsTaskApplyDialog({
                       </SelectContent>
                     </Select>
                   </TableCell>
-                  <TableHead scope="row">시군구</TableHead>
+                  <TableHead scope="row">
+                    <label htmlFor="pbadms-task-apply-sgg">시군구</label>
+                  </TableHead>
                   <TableCell>
                     <Select
                       value={sggComCd || undefined}
                       onValueChange={setSggComCd}
                       disabled={!sidoComCd || isUserGugunPending}
                     >
-                      <SelectTrigger className="w-full">
+                      <SelectTrigger id="pbadms-task-apply-sgg" title="시군구 선택" className="w-full">
                         <SelectValue placeholder="선택" />
                       </SelectTrigger>
                       <SelectContent>
@@ -158,9 +167,12 @@ function PbadmsTaskApplyDialog({
                 </TableRow>
               )}
               <TableRow>
-                <TableHead scope="row" data-required>업무구분</TableHead>
+                <TableHead id="pbadms-task-apply-task-label" scope="row" data-required>
+                  업무구분
+                </TableHead>
                 <TableCell colSpan={3}>
-                  <FieldSet className="px-2">
+                  {/* 체크박스 그룹이 어떤 항목의 선택인지 알 수 있도록 th 와 연결 */}
+                  <FieldSet className="px-2" aria-labelledby="pbadms-task-apply-task-label">
                     <FieldGroup data-slot="checkbox-group" className="flex-row flex-wrap">
                       {taskOptions?.map((option) => (
                         <Field key={option.lwpoCd} orientation="horizontal" className="w-auto">

apps/as/src/widgets/pbadms-sprt/ui/privacy-consent-section.tsx

@@ -23,7 +23,7 @@ function PrivacyConsentSection() {
 
   return (
     <SectionCollapsible title="개인정보 수집/이용 동의">
-      <Table caption="개인정보 수집·이용 동의 내용" variant="secondary">
+      <Table caption="개인정보 수집/이용 동의로 개인정보 수집 및 이용 정보 제공" variant="secondary">
         <TableHeader>
           <TableRow>
             <TableHead className="w-[20rem]" data-required>

apps/as/src/widgets/pbadms-sprt/ui/progress-status-section.tsx

@@ -57,7 +57,7 @@ function ProgressStatusSection({
 
   return (
     <SectionCollapsible title="진행 상태">
-      <Table caption="행정지원 진행상태" variant="secondary" className="table-fixed">
+      <Table caption={`진행 상태 목록으로 ${columns.map((column) => column.label).join(", ")} 정보 제공`} variant="secondary" className="table-fixed">
         <TableHeader>
           <TableRow>
             {columns.map((column) => (

apps/as/src/widgets/pbadms-sprt/ui/splmnt-dmnd-dialog.tsx

@@ -239,7 +239,7 @@ function SplmntDmndDialog({
           </div>
 
           <div className="overflow-x-auto">
-            <Table caption="보완 요청 입력: 보완 항목, 보완 의견, 첨부파일 정보 제공" variant="secondary">
+            <Table caption={`보완 내용 목록으로 보완 항목, 보완 의견, 첨부파일${rows.length > 1 ? ", 관리" : ""} 정보 제공`} variant="secondary">
               <colgroup>
                 <col width="20%" />
                 <col width="50%" />

apps/as/src/widgets/pbadms-sprt/ui/splmnt-dmnd-form-section.tsx

@@ -240,7 +240,7 @@ function SplmntDmndFormSection({ initialData, readOnly = false }: SplmntDmndForm
   return (
     <SectionCollapsible title="보완요청">
       <div className="overflow-x-auto">
-        <Table caption="보완요청 및 처리 현황: 보완항목, 요청일시, 요청내용, 완료내용, 첨부파일, 완료여부 정보 제공" variant="secondary">
+        <Table caption="보완요청 목록으로 보완항목, 보완요청일시, 보완요청내용, 보완완료내용, 파일첨부, 완료여부 정보 제공" variant="secondary">
           <colgroup>
             <col width="12%" />
             <col width="14%" />

apps/as/src/widgets/pbadms-sprt/ui/supplement-demand-section.tsx

@@ -28,7 +28,7 @@ function SupplementDemandSection({ splmntDmndList }: SupplementDemandSectionProp
   return (
     <SectionCollapsible title="보완요청 및 완료 현황">
       <div className="overflow-x-auto">
-        <Table caption="보완요청 현황" variant="secondary">
+        <Table caption="보완요청 및 완료 현황 목록으로 보완항목, 보완요청일시, 보완요청내용, 보완완료일시, 보완완료내용, 완료여부 정보 제공" variant="secondary">
           <colgroup>
             <col width="14%" />
             <col width="8%" />

apps/dm/AGENTS.md

@@ -1,6 +1,19 @@
 ## Project
 This repository contains a Next.js web application.
 
+## Portable paths
+
+Resolve paths from this `apps/dm/AGENTS.md` file, not from a developer-specific drive or the current shell directory.
+
+- `FE_APP_ROOT`: directory containing this file (`apps/dm`)
+- `FE_REPO_ROOT`: `FE_APP_ROOT/../..` (`frontend`)
+- `WORKSPACE_ROOT`: `FE_REPO_ROOT/..`
+- `COMMON_ROOT_AGENTS`: `WORKSPACE_ROOT/AGENTS.md`
+- `BE_REPO_ROOT`: `WORKSPACE_ROOT/IIPBS` (Backend repository root)
+- `BE_SERVICE_ROOT`: `BE_REPO_ROOT/sewerage-service`
+
+Use an explicitly supplied repository path when the repositories are installed under different parent directories. Verify a calculated path exists before using it.
+
 Main technologies:
 - Next.js
 - TypeScript

apps/fo/AGENTS.md

@@ -1,6 +1,19 @@
 ## Project
 This repository contains a Next.js web application.
 
+## Portable paths
+
+Resolve paths from this `apps/fo/AGENTS.md` file, not from a developer-specific drive or the current shell directory.
+
+- `FE_APP_ROOT`: directory containing this file (`apps/fo`)
+- `FE_REPO_ROOT`: `FE_APP_ROOT/../..` (`frontend`)
+- `WORKSPACE_ROOT`: `FE_REPO_ROOT/..`
+- `COMMON_ROOT_AGENTS`: `WORKSPACE_ROOT/AGENTS.md`
+- `BE_REPO_ROOT`: `WORKSPACE_ROOT/IIPBS` (Backend repository root)
+- `BE_SERVICE_ROOT`: `BE_REPO_ROOT/sewerage-service`
+
+Use an explicitly supplied repository path when the repositories are installed under different parent directories. Verify a calculated path exists before using it.
+
 Main technologies:
 - Next.js
 - TypeScript

apps/sn/AGENTS.md

@@ -43,14 +43,46 @@
 
 ## 공통 시작 기준
 
-Codex 작업 루트는 가능하면 `../../../../../`로 잡고, 공통 시작 기준은 `AGENTS.md`를 따른다.
+개발자마다 드라이브와 상위 작업 폴더 위치가 다르므로 특정 드라이브·사용자 디렉터리의 절대경로를 기준으로 사용하지 않는다.
+
+경로 별칭은 `apps/sn/AGENTS.md`가 있는 디렉터리(`FE_APP_ROOT`)를 기준으로 다음과 같이 해석한다. 상대경로는 현재 셸의 실행 위치가 아니라 이 파일의 위치를 기준으로 계산한다.
+
+- `FE_APP_ROOT`: 이 파일이 있는 `apps/sn` 디렉터리
+- `FE_REPO_ROOT`: `FE_APP_ROOT/../..`
+- `WORKSPACE_ROOT`: `FE_APP_ROOT/../../..`
+- `COMMON_ROOT_AGENTS`: `WORKSPACE_ROOT/AGENTS.md`
+- `BE_REPO_ROOT`: `WORKSPACE_ROOT/IIPBS` (Backend Git 저장소 루트)
+- `BE_SERVICE_ROOT`: `BE_REPO_ROOT/sewerage-service` (하수관로 백엔드 서비스 모듈)
+- `COMMON_DOCS_ROOT`: `BE_REPO_ROOT/docs`
+- `FE_APP_DOCS_ROOT`: `FE_APP_ROOT/docs`
+
+경로 결정은 아래 우선순위를 따른다.
+
+1. 작업 환경이나 사용자가 `WORKSPACE_ROOT`, `COMMON_DOCS_ROOT`, `BE_REPO_ROOT`, `BE_SERVICE_ROOT` 등의 유효한 경로를 명시한 경우 그 값을 우선한다. 저장소를 서로 다른 상위 폴더에 배치한 개발자도 이 방식으로 사용할 수 있다.
+2. 명시값이 없으면 위의 `FE_APP_ROOT` 기준 상대경로로 계산한다. 드라이브 문자나 사용자별 상위 디렉터리 이름이 달라도 같은 저장소 배치 구조를 사용할 수 있다.
+3. 계산한 경로는 사용 전에 대상 파일이나 디렉터리의 존재 여부를 확인한다. 없거나 후보가 여러 개인 경우 특정 절대경로를 추측하지 말고 현재 저장소에서 확인 가능한 작업만 진행한 뒤 필요한 경로를 사용자에게 확인한다.
+4. 작업 문서와 결과 보고에는 특별한 사유가 없으면 개발자별 절대경로 대신 위 경로 별칭이나 저장소 기준 상대경로를 기록한다.
+
+PowerShell에서 현재 프론트엔드 저장소를 기준으로 확인할 때는 다음처럼 동적으로 계산할 수 있다. 각 단계는 앞 단계에서 찾은 저장소 위치를 기반으로 하므로 개발자별 설치 경로에 의존하지 않는다.
+
+```powershell
+$feRepoRoot = (git rev-parse --show-toplevel).Trim()
+$feAppRoot = Join-Path $feRepoRoot 'apps/sn'
+$workspaceRoot = Split-Path $feRepoRoot -Parent
+$commonRootAgents = Join-Path $workspaceRoot 'AGENTS.md'
+$beRepoRoot = Join-Path $workspaceRoot 'IIPBS'
+$beServiceRoot = Join-Path $beRepoRoot 'sewerage-service'
+$commonDocsRoot = Join-Path $beRepoRoot 'docs'
+```
+
+공통 시작 기준은 `COMMON_ROOT_AGENTS`를 따른다.
 
 이 파일은 프론트엔드 `sn` 앱 세부 기준이다.
 
 백엔드(`sewerage-service`)와 함께 수정하거나 API/응답/DB/인증/권한 연동 영향이 있는 작업은 아래 파일을 함께 확인한다.
 
 - 공통 시작 기준: `AGENTS.md`
-- 백엔드 세부 기준: `BE_REPO_ROOT/AGENTS.md`
+- 백엔드 세부 기준: `BE_SERVICE_ROOT/AGENTS.md`
 - 프론트엔드 `sn` 앱 기준: `FE_APP_ROOT/AGENTS.md`
 
 ---
@@ -230,7 +262,7 @@ VSCode나 별도 터미널에서 `sn` Next 개발 서버가 실행 중이면 `ne
 
 ### 프론트엔드 실행 프로세스 관리
 
-- 모든 세션·역할·문서/검증 섹션에 공통 D:/workspace/AGENTS.md의 테스트 파일 정리 기준을 적용한다. 에이전트가 테스트를 위해 만든 파일은 정식 회귀 테스트·재사용 가능한 소스·fixture·mock·임시 라우트를 포함해 위치와 관계없이 결과를 요약한 뒤 작업 종료 전에 삭제한다(2026-09-23 사용자 지시). 전용 빈 폴더와 끊어진 실행 명령도 정리한다. 명시 보존 요청 파일·최종 산출물·사용자 원본/복구 백업은 유지한다. 기존 타 작업자 테스트 자산은 삭제 권한을 먼저 확인한다. 사용자 dev server의 .next·공유 캐시·node_modules는 포괄 삭제하지 않는다.
+- 모든 세션·역할·문서/검증 섹션에 `COMMON_ROOT_AGENTS`의 테스트 파일 정리 기준을 적용한다. 에이전트가 테스트를 위해 만든 파일은 정식 회귀 테스트·재사용 가능한 소스·fixture·mock·임시 라우트를 포함해 위치와 관계없이 결과를 요약한 뒤 작업 종료 전에 삭제한다(2026-09-23 사용자 지시). 전용 빈 폴더와 끊어진 실행 명령도 정리한다. 명시 보존 요청 파일·최종 산출물·사용자 원본/복구 백업은 유지한다. 기존 타 작업자 테스트 자산은 삭제 권한을 먼저 확인한다. 사용자 dev server의 .next·공유 캐시·node_modules는 포괄 삭제하지 않는다.
 
 - Codex 에이전트가 작업 또는 검증을 위해 직접 기동한 `next dev`, `dev:sn`, Turborepo dev와 기타 프론트엔드 장시간 실행 프로세스는 작업 종료 전에 반드시 종료한다.
 - 셸, 백그라운드, 숨김 창 등 VSCode 밖에서 에이전트가 기동한 프로세스도 종료 대상이다.

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

@@ -1,4 +1,5 @@
 "use client";
+import { beginMapNavigation } from "@/features/map-search/lib/map-navigation";
 
 import {
   useCallback,
@@ -91,6 +92,8 @@ export const useExmnResultMap = (options: Options) => {
     async (job: ExmnMapJobType, filters: ExmnMapFilters) => {
       const map = mapRef.current;
       if (!map) return;
+      const navigation = entry.jobType === job && entry.exmnBizId && entry.trtdstId
+        ? beginMapNavigation(map) : null;
       removeLayer(job);
       const state = layers.current[job];
       const sequence = state.sequence;
@@ -184,7 +187,7 @@ export const useExmnResultMap = (options: Options) => {
           const extent = selectedSource.getExtent();
           if (
             fittedContext.current !== contextKey &&
-            extent.every(Number.isFinite)
+            extent.every(Number.isFinite) && navigation?.commit(extent)
           ) {
             map
               .getView()

apps/sn/app/(map-layout)/map/components/fldng-hstry/fldng-hstry-feature-click.tsx

@@ -3,6 +3,7 @@
  * 우측 정보 화면의 심선·위선 목록, 선택 상태와 화면 생명주기 캐시를 관리한다.
  */
 "use client";
+import { mapSearchNavigationOptions } from "@/features/map-search/lib/map-navigation";
 
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { RefObject } from "react";
@@ -23,6 +24,7 @@ type FldngHstryGisLayer = {
   showSearchResultsFromGeoJSON: (
     layerTypeName: string,
     featureId: string,
+    options?: { beforeFocus: (extent: unknown) => boolean },
   ) => void | Promise<void>;
 };
 
@@ -127,11 +129,14 @@ const displayCachedFldngHstryFeatures = (
   gisLayer: FldngHstryGisLayer,
   layerTypeName: string,
   features: Feature[],
+  beforeFocus: (extent: unknown) => boolean,
 ) => {
   const matched = Object.values(GisApp.layerCode ?? {}).find(
     (item: any) => item?.lyrTyNm === layerTypeName,
   ) as any;
   if (!matched || features.length === 0) return;
+  // 캐시를 재사용해도 최신 선택의 유효 도형일 때만 검색조건을 초기화한다.
+  if (!beforeFocus(features[0]?.getGeometry()?.getExtent())) return;
 
   gisLayer.clearSearchLayer(matched);
   const layer = gisLayer.ensureSearchLayer(matched);
@@ -148,17 +153,20 @@ const showFldngHstryFeature = async (
   featureId: string,
 ) => {
   const cacheKey = `${layerTypeName}:${featureId}`;
+  /** 캐시 대기와 신규 WFS 조회가 동일한 이동 성공/취소 계약을 사용한다. */
+  const navigationOptions = mapSearchNavigationOptions((GisApp.Module.core as any).map);
   const cachedRequest = cache.get(cacheKey);
   if (cachedRequest) {
     displayCachedFldngHstryFeatures(
       gisLayer,
       layerTypeName,
       await cachedRequest,
+      navigationOptions.beforeFocus,
     );
     return;
   }
 
-  await gisLayer.showSearchResultsFromGeoJSON(layerTypeName, featureId);
+  await gisLayer.showSearchResultsFromGeoJSON(layerTypeName, featureId, navigationOptions);
   const source = gisLayer.searchLayer?.getSource?.();
   if (!source) return;
 

apps/sn/app/(map-layout)/map/components/inftwt-result/inftwt-result-popup-page.tsx

@@ -77,6 +77,8 @@ const DEFAULT_FILTERS: InftwtResultFilters = {
 };
 
 const postRowSelectMessage = (row: InftwtResultRow) => {
+  // 같은 클릭의 message/storage 전달을 식별한다.
+  const requestId = `${Date.now()}-${Math.random().toString(36).slice(2)}`;
   if (typeof window !== "undefined") {
     try {
       window.localStorage.setItem(
@@ -84,6 +86,7 @@ const postRowSelectMessage = (row: InftwtResultRow) => {
         JSON.stringify({
           row,
           timestamp: Date.now(),
+          requestId,
         }),
       );
     } catch (error) {
@@ -96,6 +99,7 @@ const postRowSelectMessage = (row: InftwtResultRow) => {
     {
       type: INFTWT_RESULT_ROW_SELECT_MESSAGE,
       row,
+      requestId,
     },
     window.location.origin,
   );

apps/sn/app/(map-layout)/map/components/inftwt-result/use-inftwt-result-map.ts

@@ -1,4 +1,5 @@
 "use client";
+import { beginMapNavigation, fitMapSelection, mapSearchNavigationOptions } from "@/features/map-search/lib/map-navigation";
 
 /** 침입수 분석결과 선택 시 부모 지도에 결과 레이어를 표시하는 훅이다. */
 import { useCallback, useEffect, useRef, useState, type MutableRefObject } from "react";
@@ -35,7 +36,6 @@ type UseInftwtResultMapParams = {
 const INFTWT_ZONE_LAYER_ID = "SN_INFTWT_RESULT_ZONE_LAYER";
 const INFTWT_PIPE_LAYER_ID = "SN_INFTWT_RESULT_PIPE_LAYER";
 const DEFAULT_RESULT_FIT_PADDING: [number, number, number, number] = [120, 120, 120, 120];
-const INFTWT_PROC_SEARCH_EVENT = "SN_INFTWT_PROC_SEARCH";
 
 const zoneStyle = new Style({
   fill: new Fill({
@@ -302,7 +302,7 @@ export const useInftwtResultMap = ({
         return;
       }
 
-      map.getView?.().fit?.(extent, {
+      fitMapSelection(map, extent, {
         duration: 350,
         padding: DEFAULT_RESULT_FIT_PADDING,
         maxZoom: oilqPipeExtent ? 17 : shouldUseZoneExtent ? 15 : 16,
@@ -319,7 +319,7 @@ export const useInftwtResultMap = ({
       if (normalizedSggCd && normalizedSggCd !== "0") {
         const sigunguCenter = getSigunguCenter(normalizedSggCd);
         if (sigunguCenter) {
-          moveMapToCenter(gisMaps, sigunguCenter, 12);
+          moveMapToCenter(gisMaps, sigunguCenter, 12, mapSearchNavigationOptions(gisMaps.current).beforeFocus);
           return true;
         }
       }
@@ -328,7 +328,7 @@ export const useInftwtResultMap = ({
       if (normalizedCtpvCd && normalizedCtpvCd !== "0") {
         const sidoCenterCoordinate = sidoCenter[normalizedCtpvCd.slice(0, 2)];
         if (sidoCenterCoordinate) {
-          moveMapToCenter(gisMaps, sidoCenterCoordinate, 11);
+          moveMapToCenter(gisMaps, sidoCenterCoordinate, 11, mapSearchNavigationOptions(gisMaps.current).beforeFocus);
           return true;
         }
       }
@@ -395,8 +395,17 @@ export const useInftwtResultMap = ({
     [clearLayers, ensurePipeLayer, ensureZoneLayer, gisMaps, moveToStableFocus],
   );
 
+  /** message/storage가 전달하는 동일 선택 요청을 한 번만 처리한다. */
+  const selectionRequestsRef = useRef(new Set<string>());
   const handleRowSelect = useCallback(
-    async (row: InftwtResultRow) => {
+    async (row: InftwtResultRow, requestId?: string) => {
+      if (requestId) {
+        const requests = selectionRequestsRef.current;
+        if (requests.has(requestId)) return;
+        requests.add(requestId);
+        if (requests.size > 64) requests.delete(requests.values().next().value!);
+      }
+      const navigation = beginMapNavigation(gisMaps.current);
       try {
         activeResultRowRef.current = row;
         setFeatureData(null);
@@ -412,21 +421,9 @@ export const useInftwtResultMap = ({
           mapViewCacheRef.current.set(row.inftwtAnlsSn, mapView);
         }
 
-        if (typeof window !== "undefined") {
-          window.dispatchEvent(
-            new CustomEvent(INFTWT_PROC_SEARCH_EVENT, {
-              detail: {
-                ctpvCd: row.ctpvCd ?? "0",
-                sggCd: row.sggCd ?? "0",
-                swtrmtFcltNm: row.swtrmtFcltNm ?? "",
-                suppressMapMove: (mapView.oilqPipeCount ?? 0) > 0,
-              },
-            }),
-          );
-        }
-
+        if (!navigation.isCurrent()) return;
         setActiveMapView(mapView);
-        void renderMapView(mapView);
+        await renderMapView(mapView);
       } catch (error) {
         console.error("移⑥엯??遺꾩꽍寃곌낵 吏€???곌퀎 以??ㅻ쪟:", error);
         alert("침입수 분석결과를 지도에 연계하지 못했습니다.");
@@ -439,16 +436,16 @@ export const useInftwtResultMap = ({
     const handlePopupMessage = (event: MessageEvent) => {
       if (event.origin !== window.location.origin) return;
       if (event.data?.type !== INFTWT_RESULT_ROW_SELECT_MESSAGE || !event.data?.row) return;
-      void handleRowSelect(event.data.row as InftwtResultRow);
+      void handleRowSelect(event.data.row as InftwtResultRow, event.data.requestId);
     };
 
     const handleStorageEvent = (event: StorageEvent) => {
       if (event.key !== INFTWT_RESULT_ROW_SELECT_STORAGE_KEY || !event.newValue) return;
 
       try {
-        const payload = JSON.parse(event.newValue) as { row?: InftwtResultRow };
+        const payload = JSON.parse(event.newValue) as { row?: InftwtResultRow; requestId?: string };
         if (!payload?.row) return;
-        void handleRowSelect(payload.row);
+        void handleRowSelect(payload.row, payload.requestId);
       } catch (error) {
         console.warn("移⑥엯??遺꾩꽍寃곌낵 storage ?숆린??媛믪쓣 ?댁꽍?섏? 紐삵뻽?듬땲??", error);
       }

apps/sn/app/(map-layout)/map/components/rdii-result/rdii-result-popup-page.tsx

@@ -79,6 +79,8 @@ const DEFAULT_FILTERS: RdiiResultFilters = {
 };
 
 const postRowSelectMessage = (row: RdiiResultRow) => {
+  // 같은 클릭의 message/storage 전달을 식별한다.
+  const requestId = `${Date.now()}-${Math.random().toString(36).slice(2)}`;
   if (typeof window !== "undefined") {
     try {
       window.localStorage.setItem(
@@ -86,6 +88,7 @@ const postRowSelectMessage = (row: RdiiResultRow) => {
         JSON.stringify({
           row,
           timestamp: Date.now(),
+          requestId,
         }),
       );
     } catch (error) {
@@ -98,6 +101,7 @@ const postRowSelectMessage = (row: RdiiResultRow) => {
     {
       type: RDII_RESULT_ROW_SELECT_MESSAGE,
       row,
+      requestId,
     },
     window.location.origin,
   );

apps/sn/app/(map-layout)/map/components/rdii-result/use-rdii-result-map.ts

@@ -1,5 +1,6 @@
 /** RDII 분석결과 선택 시 부모 지도에 결과 레이어를 표시하는 훅이다. */
 "use client";
+import { beginMapNavigation, fitMapSelection, mapSearchNavigationOptions } from "@/features/map-search/lib/map-navigation";
 
 import { useCallback, useEffect, useRef, useState, type MutableRefObject } from "react";
 import GeoJSON from "ol/format/GeoJSON.js";
@@ -32,7 +33,6 @@ type UseRdiiResultMapParams = {
 
 const RDII_PIPE_LAYER_ID = "SN_RDII_RESULT_PIPE_LAYER";
 const DEFAULT_RESULT_FIT_PADDING: [number, number, number, number] = [120, 120, 120, 120];
-const PROC_SEARCH_EVENT = "SN_INFTWT_PROC_SEARCH";
 
 const pipeStyle = [
   new Style({
@@ -186,7 +186,7 @@ export const useRdiiResultMap = ({
       return;
     }
 
-    map.getView?.().fit?.(pipeExtent, {
+    fitMapSelection(map, pipeExtent, {
       duration: 350,
       padding: DEFAULT_RESULT_FIT_PADDING,
       maxZoom: 16,
@@ -201,7 +201,7 @@ export const useRdiiResultMap = ({
       if (normalizedSggCd && normalizedSggCd !== "0") {
         const sigunguCenter = getSigunguCenter(normalizedSggCd);
         if (sigunguCenter) {
-          moveMapToCenter(gisMaps, sigunguCenter, 12);
+          moveMapToCenter(gisMaps, sigunguCenter, 12, mapSearchNavigationOptions(gisMaps.current).beforeFocus);
           return true;
         }
       }
@@ -210,7 +210,7 @@ export const useRdiiResultMap = ({
       if (normalizedCtpvCd && normalizedCtpvCd !== "0") {
         const sidoCenterCoordinate = sidoCenter[normalizedCtpvCd.slice(0, 2)];
         if (sidoCenterCoordinate) {
-          moveMapToCenter(gisMaps, sidoCenterCoordinate, 11);
+          moveMapToCenter(gisMaps, sidoCenterCoordinate, 11, mapSearchNavigationOptions(gisMaps.current).beforeFocus);
           return true;
         }
       }
@@ -260,38 +260,37 @@ export const useRdiiResultMap = ({
     [clearLayers, ensurePipeLayer, gisMaps, moveToStableFocus],
   );
 
+  /** message/storage가 전달하는 동일 선택 요청을 한 번만 처리한다. */
+  const selectionRequestsRef = useRef(new Set<string>());
   const handleRowSelect = useCallback(
-    async (row: RdiiResultRow) => {
+    async (row: RdiiResultRow, requestId?: string) => {
+      if (requestId) {
+        const requests = selectionRequestsRef.current;
+        if (requests.has(requestId)) return;
+        requests.add(requestId);
+        if (requests.size > 64) requests.delete(requests.values().next().value!);
+      }
+      const navigation = beginMapNavigation(gisMaps.current);
       try {
         activeResultRowRef.current = row;
         setFeatureData(null);
         setIsOpen(false);
         setIsSearchModalOpen(false);
 
-        if (typeof window !== "undefined") {
-          window.dispatchEvent(
-            new CustomEvent(PROC_SEARCH_EVENT, {
-              detail: {
-                ctpvCd: row.ctpvCd ?? "0",
-                sggCd: row.sggCd ?? "0",
-                swtrmtFcltNm: row.swtrmtFcltNm ?? "",
-              },
-            }),
-          );
-        }
-
         const cachedMapView = mapViewCacheRef.current.get(row.rainInfwtAnlsSn);
         if (cachedMapView) {
+          if (!navigation.isCurrent()) return;
           setActiveMapView(cachedMapView);
-          void renderMapView(cachedMapView);
+          await renderMapView(cachedMapView);
           return;
         }
 
         const payload = await getRawJson(`/sewerage-service/api/v1/rdiiAnlsRslt/mapView/${row.rainInfwtAnlsSn}`);
         const mapView = (payload?.data ?? payload) as RdiiResultMapViewResponse;
         mapViewCacheRef.current.set(row.rainInfwtAnlsSn, mapView);
+        if (!navigation.isCurrent()) return;
         setActiveMapView(mapView);
-        void renderMapView(mapView);
+        await renderMapView(mapView);
       } catch (error) {
         console.error("RDII 분석결과 지도 연계 중 오류:", error);
         alert("RDII 분석결과를 지도에 연계하지 못했습니다.");
@@ -304,16 +303,16 @@ export const useRdiiResultMap = ({
     const handlePopupMessage = (event: MessageEvent) => {
       if (event.origin !== window.location.origin) return;
       if (event.data?.type !== RDII_RESULT_ROW_SELECT_MESSAGE || !event.data?.row) return;
-      void handleRowSelect(event.data.row as RdiiResultRow);
+      void handleRowSelect(event.data.row as RdiiResultRow, event.data.requestId);
     };
 
     const handleStorageEvent = (event: StorageEvent) => {
       if (event.key !== RDII_RESULT_ROW_SELECT_STORAGE_KEY || !event.newValue) return;
 
       try {
-        const payload = JSON.parse(event.newValue) as { row?: RdiiResultRow };
+        const payload = JSON.parse(event.newValue) as { row?: RdiiResultRow; requestId?: string };
         if (!payload?.row) return;
-        void handleRowSelect(payload.row);
+        void handleRowSelect(payload.row, payload.requestId);
       } catch (error) {
         console.warn("RDII 분석결과 storage 동기화 값을 해석하지 못했습니다.", error);
       }

apps/sn/app/(map-layout)/map/components/water-risk/water-risk-popup-page.tsx

@@ -4,7 +4,7 @@
  */
 "use client";
 
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useState, useRef } from "react";
 
 import { windowPopupDefinitions } from "@/features/window-popup/model/popup-definitions";
 import {
@@ -462,26 +462,37 @@ export default function WaterRiskPopupPage(_props: WindowPopupContentProps) {
     setSelectedResultKey("");
   };
 
+  /** 늦게 끝난 이전 행 요청이 최신 선택을 덮지 않도록 식별한다. */
+  const mapRequestRef = useRef<string>("");
+
   /** 선택 행의 실제 GeoJSON을 조회한 뒤 부모 지도 창에 전달한다. */
   const handleSelectResultRow = async (row: WaterRiskResultRow) => {
+    const requestId = `${Date.now()}-${Math.random().toString(36).slice(2)}`;
+    mapRequestRef.current = requestId;
+    postMessageToOpener(WINDOW_POPUP_MESSAGE_TYPE.WATER_RISK_SELECT_RESULT, {
+      phase: "loading", requestId,
+    });
     setSelectedResultKey(buildResultRowKey(row));
     setIsMapLoading(true);
     setErrorMessage("");
     try {
       const mapView = await fetchWaterRiskMapView(row);
+      if (mapRequestRef.current !== requestId) return;
       postMessageToOpener(WINDOW_POPUP_MESSAGE_TYPE.WATER_RISK_SELECT_RESULT, {
+        requestId,
         areaId: row.areaId,
         resultRow: row,
         mapView,
       });
     } catch (error) {
+      if (mapRequestRef.current !== requestId) return;
       setErrorMessage(
         error instanceof Error
           ? error.message
           : "통수위험 지도 결과를 조회하지 못했습니다.",
       );
     } finally {
-      setIsMapLoading(false);
+      if (mapRequestRef.current === requestId) setIsMapLoading(false);
     }
   };