메뉴간 탭이동

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

@@ -76,7 +76,7 @@ function AprvrPickerDialog({ open, onOpenChange, atrzSeComCd, onSelect }: AprvrP
               배치된 검토인력이 없습니다.
             </p>
           ) : (
-            <Table 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 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 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,6 +66,7 @@ function ElaprTmpltSelectTable({
       getCoreRowModel: getCoreRowModel(),
     },
     dataTableOptions: {
+      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 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 className="w-full">
+          <Table caption="결재선 목록으로 결재순서, 결재구분, 결재자 정보 제공" className="w-full">
             <colgroup>
               <col width="5%" />
               <col width="10%" />

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

@@ -90,6 +90,7 @@ function ElaprTmpltList({ selectedTmpltId, onSelectTmplt }: ElaprTmpltListProps)
       getCoreRowModel: getCoreRowModel(),
     },
     dataTableOptions: {
+      caption: "결재서식 목록으로 결재서식명 정보 제공",
       onRowClick: (row) => {
         setRowSelection({ [row.elaprTmpltId]: true });
         onSelectTmplt(row);

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

@@ -67,7 +67,12 @@ function CklstArtclList({ cklstSn }: CklstArtclListProps) {
       </div>
     ),
     Empty: <NoData />,
-    Success: () => <DataTable table={table} />,
+    Success: () => (
+      <DataTable
+        table={table}
+        caption="체크리스트 항목 목록: 항목명, 검토내용, 검토결과 정보 제공"
+      />
+    ),
   });
 
   const handleFormSubmit = async (values: CklstArtclFormValues) => {

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

@@ -83,6 +83,7 @@ function CklstMngList({ selectedCklstSn, onSelectCklst }: CklstMngListProps) {
       getCoreRowModel: getCoreRowModel(),
     },
     dataTableOptions: {
+      caption: "체크리스트 목록",
       onRowClick: (row) => {
         setRowSelection({ [String(row.cklstSn)]: true });
         onSelectCklst(row);

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

@@ -51,7 +51,7 @@ function CklstPreviewDialog({
         {displayRows.length === 0 ? (
           <p className="py-6 text-center text-muted-foreground">표시할 항목이 없습니다.</p>
         ) : (
-          <Table>
+          <Table caption={`체크리스트 ${cklstNm} 미리보기`}>
             <colgroup>
               <col width="25%" />
               <col width="50%" />

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

@@ -277,7 +277,7 @@ function CklstRvwGrid({ selectedCklst }: CklstRvwGridProps) {
           등록된 항목이 없습니다. [추가]로 1단계 항목을 등록하세요.
         </p>
       ) : (
-        <Table className="w-full">
+        <Table caption="체크리스트 항목 목록" className="w-full">
           <colgroup>
             <col width="16%" />
             <col width="36%" />

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 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 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 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,6 +39,7 @@ export function DashboardNoticeTable() {
       getCoreRowModel: getCoreRowModel(),
     },
     dataTableOptions: {
+      caption: "공지사항 목록",
       variant: "line",
       onRowClick: handleRowClick,
     },

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

@@ -59,6 +59,7 @@ function DesignList({ searchParams, pagination, onPaginationChange }: DesignList
       manualPagination: true,
     },
     dataTableOptions: {
+      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 variant="secondary">
+      <Table caption="사업 기본 정보 입력" variant="secondary">
         <colgroup>
           <col width="15%" />
           <col width="35%" />
@@ -45,7 +45,7 @@ function BasicInfoFormSection() {
         </colgroup>
         <TableHeader>
           <TableRow>
-            <TableHead className="w-[20rem]" data-required>
+            <TableHead scope="row" className="w-[20rem]" data-required>
               사업명
             </TableHead>
             <TableCell colSpan={3}>
@@ -73,7 +73,7 @@ function BasicInfoFormSection() {
             </TableCell>
           </TableRow>
           <TableRow>
-            <TableHead data-required>사업기간</TableHead>
+            <TableHead scope="row" data-required>사업기간</TableHead>
             <TableCell colSpan={3}>
               <FieldGroup className="flex-row items-center gap-2">
                 <Controller
@@ -117,7 +117,7 @@ function BasicInfoFormSection() {
             </TableCell>
           </TableRow>
           <TableRow>
-            <TableHead data-required>사업내용</TableHead>
+            <TableHead scope="row" data-required>사업내용</TableHead>
             <TableCell colSpan={3}>
               <Controller
                 name="designCnstnMng.bizCn"
@@ -137,9 +137,9 @@ function BasicInfoFormSection() {
             </TableCell>
           </TableRow>
           <TableRow>
-            <TableHead data-required>구분</TableHead>
+            <TableHead scope="row" data-required>구분</TableHead>
             <TableCell>{taskSeComCdLabel}</TableCell>
-            <TableHead>신청 지자체</TableHead>
+            <TableHead scope="row">신청 지자체</TableHead>
             <TableCell>{localGovLabel}</TableCell>
           </TableRow>
         </TableHeader>

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 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 variant="secondary">
+        <Table caption="사업규모 목록: 구분, 기본계획, 예산반영, 금회설계, 증감 정보 제공" variant="secondary">
           <TableHeader>
             <TableRow>
               <TableHead className="w-[30rem]">구분</TableHead>
@@ -36,7 +36,7 @@ function BusinessScaleSection({ bizSclList }: BusinessScaleSectionProps) {
 
                 return (
                   <TableRow key={node.cnstpSeCd}>
-                    <TableHead className="text-left" style={{ paddingLeft: `${pl + 8}px` }}>
+                    <TableHead scope="row" className="text-left" style={{ paddingLeft: `${pl + 8}px` }}>
                       {node.cnstpSeCdNm}
                     </TableHead>
                     <TableCell>

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

@@ -11,21 +11,21 @@ interface ContactInfoSectionProps {
 function ContactInfoSection({ det }: ContactInfoSectionProps) {
   return (
     <SectionCollapsible title="담당자 정보">
-      <Table variant="secondary">
+      <Table caption="사업 담당자 정보" variant="secondary">
         <TableHeader>
           {det.aplcntNm && (
             <>
               <TableRow>
-                <TableHead rowSpan={2}>신청자</TableHead>
+                <TableHead scope="row" rowSpan={2}>신청자</TableHead>
-                <TableHead>이름</TableHead>
+                <TableHead scope="row">이름</TableHead>
                 <TableCell>{det.aplcntNm || "-"}</TableCell>
-                <TableHead>연락처</TableHead>
+                <TableHead scope="row">연락처</TableHead>
                 <TableCell>{det.aplcntMblTelno || "-"}</TableCell>
               </TableRow>
               <TableRow>
-                <TableHead>소속</TableHead>
+                <TableHead scope="row">소속</TableHead>
                 <TableCell>{det.aplcntOgdpNm || "-"}</TableCell>
-                <TableHead>이메일</TableHead>
+                <TableHead scope="row">이메일</TableHead>
                 <TableCell>{det.aplcntEmlAddr || "-"}</TableCell>
               </TableRow>
             </>
@@ -33,16 +33,16 @@ function ContactInfoSection({ det }: ContactInfoSectionProps) {
           {det.dsgnrNm && (
             <>
               <TableRow>
-                <TableHead rowSpan={2}>설계자</TableHead>
+                <TableHead scope="row" rowSpan={2}>설계자</TableHead>
-                <TableHead>이름</TableHead>
+                <TableHead scope="row">이름</TableHead>
                 <TableCell>{det.dsgnrNm || "-"}</TableCell>
-                <TableHead>연락처</TableHead>
+                <TableHead scope="row">연락처</TableHead>
                 <TableCell>{det.dsgnrTelno || "-"}</TableCell>
               </TableRow>
               <TableRow>
-                <TableHead>소속</TableHead>
+                <TableHead scope="row">소속</TableHead>
                 <TableCell>{det.dsgnrOgdpNm || "-"}</TableCell>
-                <TableHead>이메일</TableHead>
+                <TableHead scope="row">이메일</TableHead>
                 <TableCell>{det.dsgnrEmlAddr || "-"}</TableCell>
               </TableRow>
             </>

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

@@ -180,10 +180,10 @@ const TechReviewOpinionSection = forwardRef<
     return (
       <div className="space-y-2">
         <h4 className="text-xl font-semibold">검토의견 작성</h4>
-        <Table variant="secondary">
+        <Table caption="검토의견 입력" variant="secondary">
           <TableHeader>
             <TableRow>
-              <TableHead className="w-[12rem]">의견내용</TableHead>
+              <TableHead scope="row" className="w-[12rem]">의견내용</TableHead>
               <TableCell>
                 <Textarea
                   value={formData.rvwRsltCn}
@@ -197,7 +197,7 @@ const TechReviewOpinionSection = forwardRef<
               </TableCell>
             </TableRow>
             <TableRow>
-              <TableHead>검토결과</TableHead>
+              <TableHead scope="row">검토결과</TableHead>
               <TableCell>
                 <FieldSet>
                   <RadioGroup
@@ -234,7 +234,7 @@ const TechReviewOpinionSection = forwardRef<
               </TableCell>
             </TableRow>
             <TableRow>
-              <TableHead>첨부파일</TableHead>
+              <TableHead scope="row">첨부파일</TableHead>
               <TableCell>
                 {uploadedFile ? (
                   <div className="flex items-center gap-2">
@@ -289,7 +289,7 @@ const TechReviewOpinionSection = forwardRef<
 function TechReviewOpinionTable({ items }: TechReviewOpinionTableProps) {
   return (
     <div className="overflow-x-auto">
-      <Table 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,6 +100,7 @@ function EsntlAtchFileList({
       manualPagination: true,
     },
     dataTableOptions: {
+      caption: "필수 첨부파일 관리 목록",
       viewPagination: true,
     },
   });

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 variant="secondary">
+        <Table caption="체크리스트 검토 입력: 검토항목, 주요 검토내용, 검토결과 정보 제공" variant="secondary">
           <TableHeader>
             <TableRow>
               <TableHead className="w-[20rem]" rowSpan={2}>

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

@@ -115,6 +115,7 @@ function FileVrfcSplmntDialog({
       getCoreRowModel: getCoreRowModel(),
     },
     dataTableOptions: {
+      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 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 variant="secondary">
+    <Table caption="자문 검토결과 목록: 구분, 검토의견 정보 제공" variant="secondary">
       <colgroup>
         <col width="4%" />
         <col width="4%" />

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

@@ -59,6 +59,7 @@ function FnrsList({ searchParams, pagination, onPaginationChange }: FnrsListProp
       manualPagination: true,
     },
     dataTableOptions: {
+      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 variant="secondary">
+      <Table caption="재원협의 기본 정보 입력" variant="secondary">
         <colgroup>
           <col width="15%" />
           <col width="35%" />
@@ -58,7 +58,7 @@ function BasicInfoFormSection() {
         </colgroup>
         <TableHeader>
           <TableRow>
-            <TableHead className="w-[20rem]" data-required>
+            <TableHead scope="row" className="w-[20rem]" data-required>
               사업명
             </TableHead>
             <TableCell colSpan={3}>
@@ -86,7 +86,7 @@ function BasicInfoFormSection() {
             </TableCell>
           </TableRow>
           <TableRow>
-            <TableHead data-required>사업기간</TableHead>
+            <TableHead scope="row" data-required>사업기간</TableHead>
             <TableCell colSpan={3}>
               <FieldGroup className="flex-row items-center gap-2">
                 <Controller
@@ -130,7 +130,7 @@ function BasicInfoFormSection() {
             </TableCell>
           </TableRow>
           <TableRow>
-            <TableHead data-required>사업내용</TableHead>
+            <TableHead scope="row" data-required>사업내용</TableHead>
             <TableCell colSpan={3}>
               <Controller
                 name="fnrsCnsltnMng.bizCn"
@@ -150,15 +150,15 @@ function BasicInfoFormSection() {
             </TableCell>
           </TableRow>
           <TableRow>
-            <TableHead data-required>구분</TableHead>
+            <TableHead scope="row" data-required>구분</TableHead>
             <TableCell>{taskSeComCdLabel}</TableCell>
-            <TableHead>신청 지자체</TableHead>
+            <TableHead scope="row">신청 지자체</TableHead>
             <TableCell>{localGovLabel}</TableCell>
           </TableRow>
           {taskSeComCd.includes("RE") && (
             <>
               <TableRow>
-                <TableHead>시설종류</TableHead>
+                <TableHead scope="row">시설종류</TableHead>
                 <TableCell colSpan={3}>
                   <Controller
                     name="fnrsCnsltnMng.rtlztnFcltSeComCd"
@@ -198,7 +198,7 @@ function BasicInfoFormSection() {
                 </TableCell>
               </TableRow>
               <TableRow>
-                <TableHead>재이용용도</TableHead>
+                <TableHead scope="row">재이용용도</TableHead>
                 <TableCell colSpan={3}>
                   <Controller
                     name="fnrsCnsltnMng.rtlztnUsgSeComCd"

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 variant="secondary">
+      <Table caption="재원협의 기본 정보" variant="secondary">
         <colgroup>
           <col width="15%" />
           <col width="35%" />
@@ -20,31 +20,31 @@ function BasicInfoSection({ det }: BasicInfoSectionProps) {
         </colgroup>
         <TableHeader>
           <TableRow>
-            <TableHead>사업명</TableHead>
+            <TableHead scope="row">사업명</TableHead>
             <TableCell>{det.bizNm || "-"}</TableCell>
-            <TableHead>사업기간</TableHead>
+            <TableHead scope="row">사업기간</TableHead>
             <TableCell>{(det.bizBgngYr || "-") + " ~ " + (det.bizEndYr || "-")}</TableCell>
           </TableRow>
           <TableRow>
-            <TableHead>사업내용</TableHead>
+            <TableHead scope="row">사업내용</TableHead>
             <TableCell colSpan={3}>{det.bizCn || "-"}</TableCell>
           </TableRow>
           <TableRow>
-            <TableHead>환경청구분</TableHead>
+            <TableHead scope="row">환경청구분</TableHead>
             <TableCell>{det.envoSeCdNm || "-"}</TableCell>
-            <TableHead>구분</TableHead>
+            <TableHead scope="row">구분</TableHead>
             <TableCell>{det.taskSeCdNm || "-"}</TableCell>
           </TableRow>
           <TableRow>
-            <TableHead>신청지자체</TableHead>
+            <TableHead scope="row">신청지자체</TableHead>
             <TableCell>
               {det.sido || "-"} {det.gugun || "-"}
             </TableCell>
-            <TableHead>확정예산사업번호</TableHead>
+            <TableHead scope="row">확정예산사업번호</TableHead>
             <TableCell>{det.cfmtnBgtBizNo || "-"}</TableCell>
           </TableRow>
           <TableRow>
-            <TableHead>예산신청연도</TableHead>
+            <TableHead scope="row">예산신청연도</TableHead>
             <TableCell colSpan={3}>{det.bgtAplyYr || "-"}</TableCell>
           </TableRow>
         </TableHeader>

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 variant="secondary" className="table-fixed">
+        <Table caption="총사업비 내역: 구분, 예산반영, 표준사업비, 금회설계, 증감 정보 제공" variant="secondary" className="table-fixed">
           <TableHeader>
             <TableRow>
               <TableHead className="w-[30rem]" rowSpan={2}>
@@ -51,9 +51,9 @@ function BusinessCostSection({ bizCstList }: BusinessCostSectionProps) {
                 return (
                   <TableRow key={node.acntgSeCd}>
                     {node.treeLevel <= 1 ? (
-                      <TableHead className="!px-[0.8rem] text-left">{node.acntgSeCdNm}</TableHead>
+                      <TableHead scope="row" className="!px-[0.8rem] text-left">{node.acntgSeCdNm}</TableHead>
                     ) : (
-                      <TableHead className="text-left" style={{ paddingLeft: `${pl + 8}px` }}>
+                      <TableHead scope="row" className="text-left" style={{ paddingLeft: `${pl + 8}px` }}>
                         {showSubIcon && <span className="mr-1 text-gray-400">└</span>}
                         {node.acntgSeCdNm}
                       </TableHead>

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 variant="secondary">
+        <Table caption="사업규모 내역: 구분, 기본계획, 예산반영, 금회설계, 증감 정보 제공" variant="secondary">
           <TableHeader>
             <TableRow>
               <TableHead className="w-[30rem]">구분</TableHead>
@@ -36,7 +36,7 @@ function BusinessScaleSection({ bizSclList }: BusinessScaleSectionProps) {
 
                 return (
                   <TableRow key={node.cnstpSeCd}>
-                    <TableHead className="text-left" style={{ paddingLeft: `${pl + 8}px` }}>
+                    <TableHead scope="row" className="text-left" style={{ paddingLeft: `${pl + 8}px` }}>
                       {node.cnstpSeCdNm}
                     </TableHead>
                     <TableCell>

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

@@ -11,21 +11,21 @@ interface ContactInfoSectionProps {
 function ContactInfoSection({ det }: ContactInfoSectionProps) {
   return (
     <SectionCollapsible title="담당자 정보">
-      <Table variant="secondary">
+      <Table caption="재원협의 담당자 정보" variant="secondary">
         <TableHeader>
           {det.aplcntNm && (
             <>
               <TableRow>
-                <TableHead rowSpan={2}>신청자</TableHead>
+                <TableHead scope="row" rowSpan={2}>신청자</TableHead>
-                <TableHead>이름</TableHead>
+                <TableHead scope="row">이름</TableHead>
                 <TableCell>{det.aplcntNm || "-"}</TableCell>
-                <TableHead>연락처</TableHead>
+                <TableHead scope="row">연락처</TableHead>
                 <TableCell>{det.aplcntMblTelno || "-"}</TableCell>
               </TableRow>
               <TableRow>
-                <TableHead>소속</TableHead>
+                <TableHead scope="row">소속</TableHead>
                 <TableCell>{det.aplcntOgdpNm || "-"}</TableCell>
-                <TableHead>이메일</TableHead>
+                <TableHead scope="row">이메일</TableHead>
                 <TableCell>{det.aplcntEmlAddr || "-"}</TableCell>
               </TableRow>
             </>
@@ -33,16 +33,16 @@ function ContactInfoSection({ det }: ContactInfoSectionProps) {
           {det.dsgnrNm && (
             <>
               <TableRow>
-                <TableHead rowSpan={2}>설계자</TableHead>
+                <TableHead scope="row" rowSpan={2}>설계자</TableHead>
-                <TableHead>이름</TableHead>
+                <TableHead scope="row">이름</TableHead>
                 <TableCell>{det.dsgnrNm || "-"}</TableCell>
-                <TableHead>연락처</TableHead>
+                <TableHead scope="row">연락처</TableHead>
                 <TableCell>{det.dsgnrTelno || "-"}</TableCell>
               </TableRow>
               <TableRow>
-                <TableHead>소속</TableHead>
+                <TableHead scope="row">소속</TableHead>
                 <TableCell>{det.dsgnrOgdpNm || "-"}</TableCell>
-                <TableHead>이메일</TableHead>
+                <TableHead scope="row">이메일</TableHead>
                 <TableCell>{det.dsgnrEmlAddr || "-"}</TableCell>
               </TableRow>
             </>

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 variant="secondary" className="table-fixed">
+        <Table caption="재원분담 내역: 구분, 현행, 변경요구, 증감, 비고 정보 제공" variant="secondary" className="table-fixed">
           <TableHeader>
             <TableRow>
               <TableHead className="w-[24rem]" rowSpan={2}>
@@ -51,7 +51,7 @@ function FnrsSharSection({ fnrsSharList }: FnrsSharSectionProps) {
 
                 return (
                   <TableRow key={node.fnrsSharSeCd}>
-                    <TableHead className="text-left" style={{ paddingLeft: `${pl + 8}px` }}>
+                    <TableHead scope="row" className="text-left" style={{ paddingLeft: `${pl + 8}px` }}>
                       {showSubIcon && <span className="mr-1 text-gray-400">└</span>}
                       {node.fnrsSharSeCdNm}
                     </TableHead>

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 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 variant="secondary">
+      <Table caption="검토의견 목록: 의견자, 의견내용, 검토결과, 첨부파일, 등록일시 정보 제공" variant="secondary">
         <colgroup>
           <col width="10%" />
           <col width="55%" />

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 variant="secondary">
+        <Table caption="체크리스트 검토 입력: 검토항목, 주요 검토내용, 검토결과 정보 제공" variant="secondary">
           <TableHeader>
             <TableRow>
               <TableHead className="w-[20rem]" rowSpan={2}>

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

@@ -59,6 +59,7 @@ function InstlList({ searchParams, pagination, onPaginationChange }: InstlListPr
       manualPagination: true,
     },
     dataTableOptions: {
+      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 variant="secondary">
+      <Table caption="설치승인 기본 정보 입력" variant="secondary">
         <colgroup>
           <col width="15%" />
           <col width="35%" />
@@ -62,7 +62,7 @@ function BasicInfoFormSection() {
         </colgroup>
         <TableHeader>
           <TableRow>
-            <TableHead className="w-[20rem]" data-required>
+            <TableHead scope="row" className="w-[20rem]" data-required>
               사업명
             </TableHead>
             <TableCell colSpan={3}>
@@ -90,7 +90,7 @@ function BasicInfoFormSection() {
             </TableCell>
           </TableRow>
           <TableRow>
-            <TableHead data-required>사업기간</TableHead>
+            <TableHead scope="row" data-required>사업기간</TableHead>
             <TableCell colSpan={3}>
               <FieldGroup className="flex-row items-center gap-2">
                 <Controller
@@ -134,7 +134,7 @@ function BasicInfoFormSection() {
             </TableCell>
           </TableRow>
           <TableRow>
-            <TableHead data-required>사업내용</TableHead>
+            <TableHead scope="row" data-required>사업내용</TableHead>
             <TableCell colSpan={3}>
               <Controller
                 name="instlSncnMng.bizCn"
@@ -154,13 +154,13 @@ function BasicInfoFormSection() {
             </TableCell>
           </TableRow>
           <TableRow>
-            <TableHead data-required>구분</TableHead>
+            <TableHead scope="row" data-required>구분</TableHead>
             <TableCell>{taskSeComCdLabel}</TableCell>
-            <TableHead>신청 지자체</TableHead>
+            <TableHead scope="row">신청 지자체</TableHead>
             <TableCell>{localGovLabel}</TableCell>
           </TableRow>
           <TableRow>
-            <TableHead data-required>사업구분</TableHead>
+            <TableHead scope="row" data-required>사업구분</TableHead>
             <TableCell colSpan={3}>
               <Controller
                 name="instlSncnMng.sncnSeComCd"
@@ -202,7 +202,7 @@ function BasicInfoFormSection() {
           {taskSeComCd.includes("RE") && (
             <>
               <TableRow>
-                <TableHead>시설종류</TableHead>
+                <TableHead scope="row">시설종류</TableHead>
                 <TableCell colSpan={3}>
                   <Controller
                     name="instlSncnMng.rtlztnFcltSeComCd"
@@ -242,7 +242,7 @@ function BasicInfoFormSection() {
                 </TableCell>
               </TableRow>
               <TableRow>
-                <TableHead>재이용용도</TableHead>
+                <TableHead scope="row">재이용용도</TableHead>
                 <TableCell colSpan={3}>
                   <Controller
                     name="instlSncnMng.rtlztnUsgSeComCd"

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 variant="secondary">
+      <Table caption="설치승인 기본 정보" variant="secondary">
         <colgroup>
           <col width="15%" />
           <col width="35%" />
@@ -20,25 +20,25 @@ function BasicInfoSection({ det }: BasicInfoSectionProps) {
         </colgroup>
         <TableHeader>
           <TableRow>
-            <TableHead>사업명</TableHead>
+            <TableHead scope="row">사업명</TableHead>
             <TableCell>{det.bizNm || "-"}</TableCell>
-            <TableHead>사업기간</TableHead>
+            <TableHead scope="row">사업기간</TableHead>
             <TableCell>{(det.bizBgngYr || "-") + " ~ " + (det.bizEndYr || "-")}</TableCell>
           </TableRow>
           <TableRow>
-            <TableHead>사업내용</TableHead>
+            <TableHead scope="row">사업내용</TableHead>
             <TableCell colSpan={3}>{det.bizCn || "-"}</TableCell>
           </TableRow>
           <TableRow>
-            <TableHead>구분</TableHead>
+            <TableHead scope="row">구분</TableHead>
             <TableCell>{det.taskSeCdNm || "-"}</TableCell>
-            <TableHead>신청지자체</TableHead>
+            <TableHead scope="row">신청지자체</TableHead>
             <TableCell>
               {det.sido || "-"} {det.gugun || "-"}
             </TableCell>
           </TableRow>
           <TableRow>
-            <TableHead>사업구분</TableHead>
+            <TableHead scope="row">사업구분</TableHead>
             <TableCell colSpan={3}>{det.sncnSeCdNm || "-"}</TableCell>
           </TableRow>
         </TableHeader>

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 variant="secondary" className="table-fixed">
+        <Table caption="총사업비 내역: 구분, 예산반영, 표준사업비, 금회설계, 증감 정보 제공" variant="secondary" className="table-fixed">
           <TableHeader>
             <TableRow>
               <TableHead className="w-[30rem]" rowSpan={2}>
@@ -51,9 +51,9 @@ function BusinessCostSection({ bizCstList }: BusinessCostSectionProps) {
                 return (
                   <TableRow key={node.acntgSeCd}>
                     {node.treeLevel <= 1 ? (
-                      <TableHead className="!px-[0.8rem] text-left">{node.acntgSeCdNm}</TableHead>
+                      <TableHead scope="row" className="!px-[0.8rem] text-left">{node.acntgSeCdNm}</TableHead>
                     ) : (
-                      <TableHead className="text-left" style={{ paddingLeft: `${pl + 8}px` }}>
+                      <TableHead scope="row" className="text-left" style={{ paddingLeft: `${pl + 8}px` }}>
                         {showSubIcon && <span className="mr-1 text-gray-400">└</span>}
                         {node.acntgSeCdNm}
                       </TableHead>

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 variant="secondary">
+        <Table caption="사업규모 내역: 구분, 기본계획, 예산반영, 금회설계, 증감 정보 제공" variant="secondary">
           <TableHeader>
             <TableRow>
               <TableHead className="w-[30rem]">구분</TableHead>
@@ -36,7 +36,7 @@ function BusinessScaleSection({ bizSclList }: BusinessScaleSectionProps) {
 
                 return (
                   <TableRow key={node.cnstpSeCd}>
-                    <TableHead className="text-left" style={{ paddingLeft: `${pl + 8}px` }}>
+                    <TableHead scope="row" className="text-left" style={{ paddingLeft: `${pl + 8}px` }}>
                       {node.cnstpSeCdNm}
                     </TableHead>
                     <TableCell>

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

@@ -11,21 +11,21 @@ interface ContactInfoSectionProps {
 function ContactInfoSection({ det }: ContactInfoSectionProps) {
   return (
     <SectionCollapsible title="담당자 정보">
-      <Table variant="secondary">
+      <Table caption="설치승인 담당자 정보" variant="secondary">
         <TableHeader>
           {det.aplcntNm && (
             <>
               <TableRow>
-                <TableHead rowSpan={2}>신청자</TableHead>
+                <TableHead scope="row" rowSpan={2}>신청자</TableHead>
-                <TableHead>이름</TableHead>
+                <TableHead scope="row">이름</TableHead>
                 <TableCell>{det.aplcntNm || "-"}</TableCell>
-                <TableHead>연락처</TableHead>
+                <TableHead scope="row">연락처</TableHead>
                 <TableCell>{det.aplcntMblTelno || "-"}</TableCell>
               </TableRow>
               <TableRow>
-                <TableHead>소속</TableHead>
+                <TableHead scope="row">소속</TableHead>
                 <TableCell>{det.aplcntOgdpNm || "-"}</TableCell>
-                <TableHead>이메일</TableHead>
+                <TableHead scope="row">이메일</TableHead>
                 <TableCell>{det.aplcntEmlAddr || "-"}</TableCell>
               </TableRow>
             </>
@@ -33,16 +33,16 @@ function ContactInfoSection({ det }: ContactInfoSectionProps) {
           {det.dsgnrNm && (
             <>
               <TableRow>
-                <TableHead rowSpan={2}>설계자</TableHead>
+                <TableHead scope="row" rowSpan={2}>설계자</TableHead>
-                <TableHead>이름</TableHead>
+                <TableHead scope="row">이름</TableHead>
                 <TableCell>{det.dsgnrNm || "-"}</TableCell>
-                <TableHead>연락처</TableHead>
+                <TableHead scope="row">연락처</TableHead>
                 <TableCell>{det.dsgnrTelno || "-"}</TableCell>
               </TableRow>
               <TableRow>
-                <TableHead>소속</TableHead>
+                <TableHead scope="row">소속</TableHead>
                 <TableCell>{det.dsgnrOgdpNm || "-"}</TableCell>
-                <TableHead>이메일</TableHead>
+                <TableHead scope="row">이메일</TableHead>
                 <TableCell>{det.dsgnrEmlAddr || "-"}</TableCell>
               </TableRow>
             </>

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

@@ -180,10 +180,10 @@ const TechReviewOpinionSection = forwardRef<
     return (
       <div className="space-y-2">
         <h4 className="text-xl font-semibold">검토의견 작성</h4>
-        <Table variant="secondary">
+        <Table caption="검토의견 입력" variant="secondary">
           <TableHeader>
             <TableRow>
-              <TableHead className="w-[12rem]">의견내용</TableHead>
+              <TableHead scope="row" className="w-[12rem]">의견내용</TableHead>
               <TableCell>
                 <Textarea
                   value={formData.rvwRsltCn}
@@ -197,7 +197,7 @@ const TechReviewOpinionSection = forwardRef<
               </TableCell>
             </TableRow>
             <TableRow>
-              <TableHead>검토결과</TableHead>
+              <TableHead scope="row">검토결과</TableHead>
               <TableCell>
                 <FieldSet>
                   <RadioGroup
@@ -234,7 +234,7 @@ const TechReviewOpinionSection = forwardRef<
               </TableCell>
             </TableRow>
             <TableRow>
-              <TableHead>첨부파일</TableHead>
+              <TableHead scope="row">첨부파일</TableHead>
               <TableCell>
                 {uploadedFile ? (
                   <div className="flex items-center gap-2">
@@ -301,7 +301,7 @@ const TechReviewOpinionSection = forwardRef<
 function TechReviewOpinionTable({ items }: TechReviewOpinionTableProps) {
   return (
     <div className="overflow-x-auto">
-      <Table 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,6 +70,7 @@ function MyPbadmsSprtList({ searchParams, pagination, onPaginationChange }: MyPb
       manualPagination: true,
     },
     dataTableOptions: {
+      caption: "나의 행정지원 목록",
       viewPagination: true,
       onRowClick: handleRowClick,
     },

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

@@ -97,6 +97,7 @@ function NtiHstryList({ searchParams, pagination, onPaginationChange }: NtiHstry
       manualPagination: true,
     },
     dataTableOptions: {
+      caption: "알림톡 발송 이력 목록",
       viewPagination: true,
     },
   });

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

@@ -33,6 +33,7 @@ function InPrgrsDocRcvrList({ selectedRcvrKeys, onRcvrSelectionChange }: InPrgrs
       getCoreRowModel: getCoreRowModel(),
       ...rowSelectionOptions,
     },
+    dataTableOptions: { caption: "진행중 문서 담당자 수신자 목록" },
   });
 
   return (

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

@@ -34,6 +34,7 @@ function RvwMnpwRcvrList({ selectedRcvrKeys, onRcvrSelectionChange }: RvwMnpwRcv
       getCoreRowModel: getCoreRowModel(),
       ...rowSelectionOptions,
     },
+    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 variant="line" className="text-sm">
+      <Table caption="알림톡 발송 대상 목록: 이름, 전화번호, 변수, 버튼 정보 제공" variant="line" className="text-sm">
         <TableHeader className="top-0">
           <TableRow>
             <TableHead className="min-w-[100px]">이름</TableHead>

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 variant="secondary">
+      <Table caption="체크리스트 검토 입력: 검토항목, 주요 검토내용, 검토결과 정보 제공" 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 variant="secondary">
+    <Table caption="이전 기본계획 처리구역 현황" variant="secondary">
       <colgroup>
         <col width="16%" />
         <col width="9.3%" />
@@ -86,7 +86,7 @@ function PreviousPlanAreaTable({ data }: PreviousPlanAreaTableProps) {
           const cells = getMetricCells(data, row.field);
           return (
             <TableRow key={row.field}>
-              <TableHead>{row.label}</TableHead>
+              <TableHead scope="row">{row.label}</TableHead>
               {cells.map((cell, index) => (
                 <TableCell key={index} className="text-right">
                   {cell}

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 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 variant="secondary">
+    <Table caption="이전 기본계획 목표연도" variant="secondary">
       <colgroup>
         <col width="10%" />
         <col width="10%" />
@@ -54,7 +54,7 @@ function PreviousPlanSummaryTable({ data }: PreviousPlanSummaryTableProps) {
       </TableHeader>
       <TableBody>
         <TableRow>
-          <TableHead>계획목표년도</TableHead>
+          <TableHead scope="row">계획목표년도</TableHead>
           {yearCells.map((cell, index) => (
             <TableCell key={index} className="text-center">
               {cell}

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

@@ -57,7 +57,7 @@ function BasicInfoFormSection() {
 
   return (
     <SectionCollapsible title="기본계획 신청">
-      <Table variant="secondary">
+      <Table caption="기본계획 정보 입력" variant="secondary">
         <colgroup>
           <col width="15%" />
           <col width="35%" />
@@ -66,7 +66,7 @@ function BasicInfoFormSection() {
         </colgroup>
         <TableHeader>
           <TableRow>
-            <TableHead className="w-[20rem]" data-required>
+            <TableHead scope="row" className="w-[20rem]" data-required>
               기본계획명
             </TableHead>
             <TableCell colSpan={3}>
@@ -89,7 +89,7 @@ function BasicInfoFormSection() {
             </TableCell>
           </TableRow>
           <TableRow>
-            <TableHead data-required>계획년도</TableHead>
+            <TableHead scope="row" data-required>계획년도</TableHead>
             <TableCell>
               <Controller
                 name="sewerBscPlanDtl.planYr"
@@ -113,7 +113,7 @@ function BasicInfoFormSection() {
                 )}
               />
             </TableCell>
-            <TableHead data-required>기준년도</TableHead>
+            <TableHead scope="row" data-required>기준년도</TableHead>
             <TableCell>
               <Controller
                 name="sewerBscPlanDtl.crtrYr"
@@ -139,7 +139,7 @@ function BasicInfoFormSection() {
             </TableCell>
           </TableRow>
           <TableRow>
-            <TableHead data-required>1단계 목표연도</TableHead>
+            <TableHead scope="row" data-required>1단계 목표연도</TableHead>
             <TableCell>
               <Controller
                 name="sewerBscPlanDtl.frlvlGoalYr"
@@ -166,7 +166,7 @@ function BasicInfoFormSection() {
                 )}
               />
             </TableCell>
-            <TableHead data-required>2단계 목표연도</TableHead>
+            <TableHead scope="row" data-required>2단계 목표연도</TableHead>
             <TableCell>
               <Controller
                 name="sewerBscPlanDtl.sclvlGoalYr"
@@ -192,7 +192,7 @@ function BasicInfoFormSection() {
             </TableCell>
           </TableRow>
           <TableRow>
-            <TableHead data-required>3단계 목표연도</TableHead>
+            <TableHead scope="row" data-required>3단계 목표연도</TableHead>
             <TableCell>
               <Controller
                 name="sewerBscPlanDtl.thlvlGoalYr"
@@ -216,7 +216,7 @@ function BasicInfoFormSection() {
                 )}
               />
             </TableCell>
-            <TableHead data-required>4단계 목표연도</TableHead>
+            <TableHead scope="row" data-required>4단계 목표연도</TableHead>
             <TableCell>
               <Controller
                 name="sewerBscPlanDtl.folvlGoalYr"
@@ -242,7 +242,7 @@ function BasicInfoFormSection() {
             </TableCell>
           </TableRow>
           <TableRow>
-            <TableHead data-required>계획개요</TableHead>
+            <TableHead scope="row" data-required>계획개요</TableHead>
             <TableCell colSpan={3}>
               <Controller
                 name="sewerBscPlanDtl.bizOtlnCn"
@@ -264,9 +264,9 @@ function BasicInfoFormSection() {
             </TableCell>
           </TableRow>
           <TableRow>
-            <TableHead>구분</TableHead>
+            <TableHead scope="row">구분</TableHead>
             <TableCell>{sewerBscPlanSeLabel}</TableCell>
-            <TableHead>신청 지자체</TableHead>
+            <TableHead scope="row">신청 지자체</TableHead>
             <TableCell>{localGovLabel || userInfo?.laeSeNm}</TableCell>
           </TableRow>
         </TableHeader>

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 variant="secondary">
+      <Table caption="기본계획 정보" variant="secondary">
         <colgroup>
           <col width="15%" />
           <col width="35%" />
@@ -27,37 +27,37 @@ function BasicInfoSection({ det, dtl }: BasicInfoSectionProps) {
         </colgroup>
         <TableHeader>
           <TableRow>
-            <TableHead>기본계획명</TableHead>
+            <TableHead scope="row">기본계획명</TableHead>
             <TableCell colSpan={3}>{det.sewerBscPlanNm || "-"}</TableCell>
           </TableRow>
           <TableRow>
-            <TableHead>계획년도</TableHead>
+            <TableHead scope="row">계획년도</TableHead>
             <TableCell>{dtl?.planYr || "-"}</TableCell>
-            <TableHead>기준년도</TableHead>
+            <TableHead scope="row">기준년도</TableHead>
             <TableCell>{dtl?.crtrYr || "-"}</TableCell>
           </TableRow>
           <TableRow>
-            <TableHead>1단계 목표연도</TableHead>
+            <TableHead scope="row">1단계 목표연도</TableHead>
             <TableCell>{dtl?.frlvlGoalYr || "-"}</TableCell>
-            <TableHead>2단계 목표연도</TableHead>
+            <TableHead scope="row">2단계 목표연도</TableHead>
             <TableCell>{dtl?.sclvlGoalYr || "-"}</TableCell>
           </TableRow>
           <TableRow>
-            <TableHead>3단계 목표연도</TableHead>
+            <TableHead scope="row">3단계 목표연도</TableHead>
             <TableCell>{dtl?.thlvlGoalYr || "-"}</TableCell>
-            <TableHead>4단계 목표연도</TableHead>
+            <TableHead scope="row">4단계 목표연도</TableHead>
             <TableCell>{dtl?.folvlGoalYr || "-"}</TableCell>
           </TableRow>
           <TableRow>
-            <TableHead>계획개요</TableHead>
+            <TableHead scope="row">계획개요</TableHead>
             <TableCell colSpan={3} className="whitespace-pre-wrap">
               {dtl?.bizOtlnCn || "-"}
             </TableCell>
           </TableRow>
           <TableRow>
-            <TableHead>구분</TableHead>
+            <TableHead scope="row">구분</TableHead>
             <TableCell>{sewerBscPlanSeLabel || "-"}</TableCell>
-            <TableHead>신청 지자체</TableHead>
+            <TableHead scope="row">신청 지자체</TableHead>
             <TableCell>{localGovLabel || "-"}</TableCell>
           </TableRow>
         </TableHeader>

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 variant="secondary" className="table-fixed">
+        <Table caption="단계별 총사업비 입력" variant="secondary" className="table-fixed">
           <colgroup>
             <col width="12%" />
             <col width="22%" />
@@ -102,7 +102,7 @@ function BizCstMatrixFormSection() {
 
               return (
                 <TableRow key={item.code}>
-                  <TableHead className="text-left" style={{ paddingLeft }}>
+                  <TableHead scope="row" className="text-left" style={{ paddingLeft }}>
                     <div className="relative">
                       {showSubIcon && (
                         <span className="absolute -left-6 top-0 text-gray-400">└</span>

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 variant="secondary" className="table-fixed">
+        <Table caption="단계별 총사업비 내역" variant="secondary" className="table-fixed">
           <colgroup>
             <col width="12%" />
             <col width="22%" />
@@ -89,7 +89,7 @@ function BizCstMatrixSection({ bizCstList, dtl }: BizCstMatrixSectionProps) {
 
               return (
                 <TableRow key={item.code}>
-                  <TableHead className="text-left" style={{ paddingLeft }}>
+                  <TableHead scope="row" className="text-left" style={{ paddingLeft }}>
                     <div className="relative">
                       {showSubIcon && (
                         <span className="absolute -left-6 top-0 text-gray-400">└</span>

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

@@ -13,21 +13,21 @@ function ContactInfoSection({ dtl }: ContactInfoSectionProps) {
 
   return (
     <SectionCollapsible title="담당자 정보">
-      <Table variant="secondary">
+      <Table caption="기본계획 담당자 정보" variant="secondary">
         <TableHeader>
           {dtl.aplcntNm ? (
             <>
               <TableRow>
-                <TableHead rowSpan={2}>신청자</TableHead>
+                <TableHead scope="row" rowSpan={2}>신청자</TableHead>
-                <TableHead>이름</TableHead>
+                <TableHead scope="row">이름</TableHead>
                 <TableCell>{dtl.aplcntNm || "-"}</TableCell>
-                <TableHead>연락처</TableHead>
+                <TableHead scope="row">연락처</TableHead>
                 <TableCell>{dtl.aplcntMblTelno || "-"}</TableCell>
               </TableRow>
               <TableRow>
-                <TableHead>소속</TableHead>
+                <TableHead scope="row">소속</TableHead>
                 <TableCell>{dtl.aplcntOgdpNm || "-"}</TableCell>
-                <TableHead>이메일</TableHead>
+                <TableHead scope="row">이메일</TableHead>
                 <TableCell>{dtl.aplcntEmlAddr || "-"}</TableCell>
               </TableRow>
             </>
@@ -35,16 +35,16 @@ function ContactInfoSection({ dtl }: ContactInfoSectionProps) {
           {dtl.dsgnrNm ? (
             <>
               <TableRow>
-                <TableHead rowSpan={2}>설계자</TableHead>
+                <TableHead scope="row" rowSpan={2}>설계자</TableHead>
-                <TableHead>이름</TableHead>
+                <TableHead scope="row">이름</TableHead>
                 <TableCell>{dtl.dsgnrNm || "-"}</TableCell>
-                <TableHead>연락처</TableHead>
+                <TableHead scope="row">연락처</TableHead>
                 <TableCell>{dtl.dsgnrTelno || "-"}</TableCell>
               </TableRow>
               <TableRow>
-                <TableHead>소속</TableHead>
+                <TableHead scope="row">소속</TableHead>
                 <TableCell>{dtl.dsgnrOgdpNm || "-"}</TableCell>
-                <TableHead>이메일</TableHead>
+                <TableHead scope="row">이메일</TableHead>
                 <TableCell>{dtl.dsgnrEmlAddr || "-"}</TableCell>
               </TableRow>
             </>

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 variant="secondary" className="table-fixed">
+        <Table caption="총사업비 대비 재원분담 합계 비교" variant="secondary" className="table-fixed">
           <colgroup>
             <col width="12%" />
             <col width="22%" />
@@ -107,7 +107,7 @@ function FnrsCstFormSection() {
           </TableHeader>
           <TableBody>
             <TableRow>
-              <TableHead>총사업비</TableHead>
+              <TableHead scope="row">총사업비</TableHead>
               {remainingList.map((item) => (
                 <TableCell key={item.planStpNo}>
                   <div className={cn("text-right", item.remaining !== 0 ? "text-destructive" : "")}>
@@ -125,7 +125,7 @@ function FnrsCstFormSection() {
           <h3 className="text-xl font-semibold">재원분담</h3>
           <span className="font-normal text-muted-foreground">(단위: 백만원)</span>
         </div>
-        <Table variant="secondary" className="table-fixed">
+        <Table caption="단계별 재원분담 입력" variant="secondary" className="table-fixed">
           <colgroup>
             <col width="12%" />
             <col width="22%" />
@@ -148,7 +148,7 @@ function FnrsCstFormSection() {
           <TableBody>
             {FNRS_CST_ROWS.map((row) => (
               <TableRow key={row.key}>
-                <TableHead>{row.label}</TableHead>
+                <TableHead scope="row">{row.label}</TableHead>
                 {PLAN_STEPS.map((planStpNo) => {
                   const item = fnrsCstList.find((cst) => cst.planStpNo === planStpNo);
                   return (

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 variant="secondary" className="table-fixed">
+        <Table caption="단계별 재원분담 내역" variant="secondary" className="table-fixed">
           <colgroup>
             <col width="12%" />
             <col width="22%" />
@@ -102,7 +102,7 @@ function FnrsCstSection({ fnrsCstList, dtl }: FnrsCstSectionProps) {
           <TableBody>
             {FNRS_CST_ROWS.map((row) => (
               <TableRow key={row.key}>
-                <TableHead>{row.label}</TableHead>
+                <TableHead scope="row">{row.label}</TableHead>
                 {stepHeaders.map((step) => {
                   const item = matrixFnrsList.find((fnrs) => fnrs.planStpNo === step.planStpNo);
                   return (

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

@@ -79,7 +79,7 @@ function OutlineFormSection() {
           이전기본계획조회
         </Button>
       </div>
-      <Table variant="secondary">
+      <Table caption="사업개요 단계별 입력" variant="secondary">
         <colgroup>
           <col width="12%" />
           <col width="22%" />
@@ -102,7 +102,7 @@ function OutlineFormSection() {
         <TableBody>
           {OTLN_ROWS.map((row) => (
             <TableRow key={row.key}>
-              <TableHead>{row.label}</TableHead>
+              <TableHead scope="row">{row.label}</TableHead>
               {[1, 2, 3, 4].map((planStpNo) => {
                 const item = otlnList.find((otln) => otln.planStpNo === planStpNo);
                 return (

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 variant="secondary">
+      <Table caption="사업개요 단계별 현황" variant="secondary">
         <colgroup>
           <col width="12%" />
           <col width="22%" />
@@ -52,7 +52,7 @@ function OutlineSection({ otlnList, dtl }: OutlineSectionProps) {
         <TableBody>
           {OTLN_ROWS.map((row) => (
             <TableRow key={row.key}>
-              <TableHead>{row.label}</TableHead>
+              <TableHead scope="row">{row.label}</TableHead>
               {stepHeaders.map((step) => {
                 const item = otlnList.find((otln) => otln.planStpNo === step.planStpNo);
                 return (

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

@@ -147,7 +147,7 @@ function TmplntFacilityMatrix({
   const originalData = Array.isArray(data) ? (data[0] ?? null) : null;
 
   return (
-    <Table variant="secondary">
+    <Table caption="처리시설별 단계별 계획 입력" variant="secondary">
       <colgroup>
         <col width="12%" />
         <col width="9.75%" />
@@ -199,7 +199,7 @@ function TmplntFacilityMatrix({
       <TableBody>
         {TMPLNT_FIELD_ROWS.map((row) => (
           <TableRow key={row.key}>
-            <TableHead>{row.label}</TableHead>
+            <TableHead scope="row">{row.label}</TableHead>
             {PLAN_STP_NOS.map((planStpNo) => (
               <TableCell key={`original-${row.key}-${planStpNo}`} className="text-right">
                 {getOriginalValue(originalData, row.key, planStpNo)}
@@ -317,7 +317,7 @@ function TmplntFacilityAttachments({
   return (
     <div className="mt-6 space-y-2">
       <h3 className="mb-4 text-xl font-semibold">처리구역 필수 첨부파일</h3>
-      <Table variant="secondary">
+      <Table caption="처리구역 필수 첨부파일" variant="secondary">
         <colgroup>
           <col width="40%" />
           <col width="15%" />
@@ -332,7 +332,7 @@ function TmplntFacilityAttachments({
         </TableHeader>
         <TableBody>
           <TableRow>
-            <TableHead data-required align="left">
+            <TableHead scope="row" data-required align="left">
               {facilityName} 계획평면도
             </TableHead>
             <TableCell className="text-center">{TMPLNT_ATCH_FORMAT_LABEL}</TableCell>

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

@@ -102,7 +102,7 @@ function TmplntFacilityMatrix({
   const originalData = Array.isArray(data) ? (data[0] ?? null) : null;
 
   return (
-    <Table variant="secondary">
+    <Table caption="처리시설별 단계별 계획 현황" variant="secondary">
       <colgroup>
         <col width="12%" />
         <col width="9.75%" />
@@ -154,7 +154,7 @@ function TmplntFacilityMatrix({
       <TableBody>
         {TMPLNT_FIELD_ROWS.map((row) => (
           <TableRow key={row.key}>
-            <TableHead>{row.label}</TableHead>
+            <TableHead scope="row">{row.label}</TableHead>
             {PLAN_STP_NOS.map((planStpNo) => (
               <TableCell key={`original-${row.key}-${planStpNo}`} className="text-right">
                 {getOriginalValue(originalData, row.key, planStpNo)}
@@ -242,7 +242,7 @@ 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 variant="secondary">
+                  <Table caption="처리구역 첨부파일" 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 variant="secondary">
+          <Table caption="기본계획 신청 정보 입력" variant="secondary">
             <colgroup>
               <col width="15%" />
               <col width="35%" />
@@ -127,7 +127,7 @@ function SewerBscPlanApplyDialog({ open, onOpenChange, onConfirm }: SewerBscPlan
             <TableHeader>
               {canSidoGugunSelectable && (
                 <TableRow>
-                  <TableHead data-required>시도</TableHead>
+                  <TableHead scope="row" data-required>시도</TableHead>
                   <TableCell>
                     <Select
                       value={sidoComCd || undefined}
@@ -148,7 +148,7 @@ function SewerBscPlanApplyDialog({ open, onOpenChange, onConfirm }: SewerBscPlan
                       </SelectContent>
                     </Select>
                   </TableCell>
-                  <TableHead>시군구</TableHead>
+                  <TableHead scope="row">시군구</TableHead>
                   <TableCell>
                     <Select
                       value={sggComCd || undefined}
@@ -170,7 +170,7 @@ function SewerBscPlanApplyDialog({ open, onOpenChange, onConfirm }: SewerBscPlan
                 </TableRow>
               )}
               <TableRow>
-                <TableHead data-required>계획구분</TableHead>
+                <TableHead scope="row" data-required>계획구분</TableHead>
                 <TableCell colSpan={3}>
                   <FieldSet className="px-2">
                     <RadioGroup
@@ -199,7 +199,7 @@ function SewerBscPlanApplyDialog({ open, onOpenChange, onConfirm }: SewerBscPlan
                 </TableCell>
               </TableRow>
               <TableRow>
-                <TableHead data-required>업무구분</TableHead>
+                <TableHead scope="row" data-required>업무구분</TableHead>
                 <TableCell colSpan={3}>
                   <FieldSet className="px-2">
                     <RadioGroup value={taskSeComCd || undefined} onValueChange={setTaskSeComCd}>

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

@@ -63,6 +63,7 @@ function SewerBscPlanList({ searchParams, pagination, onPaginationChange }: Sewe
       manualPagination: true,
     },
     dataTableOptions: {
+      caption: "하수도 기본계획 목록",
       viewPagination: true,
       onRowClick: handleRowClick,
     },

apps/as/src/shared/lib/use-data-table.tsx

@@ -14,6 +14,7 @@ import { matchQueryStatus } from "./match-query-status";
 interface DataTableOptions<T> {
   variant?: "default" | "secondary" | "line";
   className?: HTMLAttributes<HTMLTableElement>["className"];
+  caption?: string;
   viewPagination?: boolean;
   onRowClick?: (row: T) => void;
 }

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

@@ -134,6 +134,7 @@ function BnsPickerDialog({ open, onClose, onSelect }: BnsPickerDialogProps) {
       manualPagination: true,
     },
     dataTableOptions: {
+      caption: "사업 검색 결과 목록",
       viewPagination: true,
       onRowClick: (row) => {
         setRowSelection({ [getBnsListRowKey(row)]: true });
@@ -330,7 +331,7 @@ function BnsPickerDialog({ open, onClose, onSelect }: BnsPickerDialogProps) {
 
 function BnsBasicInfoTable({ detail }: { detail: BnsDetailResponseDto }) {
   return (
-    <Table variant="secondary" className="w-full">
+    <Table caption="사업 검색 결과 목록" variant="secondary" className="w-full">
       <TableBody>
         <DetailPairRow
           leftLabel="시도"
@@ -403,7 +404,7 @@ function BnsBasicInfoTable({ detail }: { detail: BnsDetailResponseDto }) {
 
 function BnsOperationTable({ detail }: { detail: BnsDetailResponseDto }) {
   return (
-    <Table variant="secondary" className="w-full">
+    <Table caption="선택 사업 상세 정보" variant="secondary" className="w-full">
       <TableBody>
         <DetailPairRow
           leftLabel="유입하수처리장"

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 variant="secondary" className="table-fixed">
+            <Table caption="필수 첨부파일 목록: 파일명, 파일 확장자, 파일 첨부 정보 제공" variant="secondary" className="table-fixed">
               <colgroup>
                 <col width="44%" />
                 <col width="12%" />
@@ -402,6 +402,7 @@ function AttachmentsFormSection({
                   return (
                     <TableRow key={file.esntlAtchFileId}>
                       <TableHead
+                        scope="row"
                         className="group break-keep font-medium"
                         data-required={file.esntlAtchYn === "Y"}
                         align="left"

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 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 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 variant="secondary">
+      <Table caption="세부별 총사업비와 재원분담 총사업비 비교" variant="secondary">
         <TableHeader>
           <TableRow>
             <TableHead>구분</TableHead>
@@ -68,7 +68,7 @@ function BizCstTotalDisplayTable({ costItems, sharItems }: BizCstTotalDisplayTab
         </TableHeader>
         <TableBody>
           <TableRow>
-            <TableHead>총사업비</TableHead>
+            <TableHead scope="row">총사업비</TableHead>
             <TableCell>
               <div className={cn("text-right", hasExstnMismatch ? "text-destructive" : "")}>
                 {formatRemaining(remaining.exstnRemaining)}

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 variant="secondary" className="table-fixed">
+        <Table caption="세부별 총사업비 입력: 구분, 예산반영, 표준사업비, 금회설계, 증감 정보 제공" variant="secondary" className="table-fixed">
           <colgroup>
             <col width="20%" />
             <col width="20%" />
@@ -140,7 +140,7 @@ function BusinessCostFormSection() {
 
               return (
                 <TableRow key={item.code}>
-                  <TableHead className="text-left" style={{ paddingLeft }}>
+                  <TableHead scope="row" className="text-left" style={{ paddingLeft }}>
                     <div className="relative">
                       {showSubIcon && (
                         <span className="absolute -left-6 top-0 text-gray-400">└</span>

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 variant="secondary">
+        <Table caption="사업규모 입력: 구분, 기본계획, 예산반영, 금회설계, 증감 정보 제공" variant="secondary">
           <colgroup>
             <col width="20%" />
             <col width="20%" />
@@ -130,7 +130,7 @@ function BusinessScaleFormSection() {
 
               return (
                 <TableRow key={item.code}>
-                  <TableHead className="text-left" style={{ paddingLeft }}>
+                  <TableHead scope="row" className="text-left" style={{ paddingLeft }}>
                     <div className="relative">
                       {showSubIcon && (
                         <span className="absolute -left-6 top-0 text-gray-400">└</span>

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 variant="secondary">
+              <Table caption={`${tab.label} 체크리스트 입력: 검토항목, 주요 검토내용, 검토결과 정보 제공`} variant="secondary">
                 <TableHeader>
                   <TableRow>
                     <TableHead rowSpan={2} className="w-[30rem]">
@@ -246,7 +246,7 @@ function ChecklistFormSection({ docSeComCd, fieldPrefix }: ChecklistFormSectionP
 
                     return (
                       <TableRow key={item.cklstRvwSn}>
-                        <TableCell className="font-medium">{item.title}</TableCell>
+                        <TableHead scope="row" className="font-medium">{item.title}</TableHead>
                         <TableCell
                           style={{
                             paddingLeft: `${Math.max(0, item.treeLevel - 1) * 16 + 8}px`,

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

@@ -23,28 +23,28 @@ function ContactInfoFormSection({ fieldPrefix }: ContactInfoFormSectionProps) {
 
   return (
     <SectionCollapsible title="담당자 정보">
-      <Table variant="secondary">
+      <Table caption="담당자 정보 입력" variant="secondary">
         <TableHeader>
           <TableRow>
-            <TableHead className="w-[20rem]" rowSpan={2}>
+            <TableHead scope="row" className="w-[20rem]" rowSpan={2}>
               신청자
             </TableHead>
-            <TableHead className="w-[16rem]">이름</TableHead>
+            <TableHead scope="row" className="w-[16rem]">이름</TableHead>
             <TableCell>{userInfo?.userName}</TableCell>
-            <TableHead className="w-[16rem]">연락처</TableHead>
+            <TableHead scope="row" className="w-[16rem]">연락처</TableHead>
             <TableCell>{userInfo?.mphn}</TableCell>
           </TableRow>
           <TableRow>
-            <TableHead>소속</TableHead>
+            <TableHead scope="row">소속</TableHead>
             <TableCell>{userInfo?.ogdpSeNm}</TableCell>
-            <TableHead>이메일</TableHead>
+            <TableHead scope="row">이메일</TableHead>
             <TableCell>{userInfo?.email}</TableCell>
           </TableRow>
           <TableRow>
-            <TableHead rowSpan={2} data-required>
+            <TableHead scope="row" rowSpan={2} data-required>
               설계자
             </TableHead>
-            <TableHead>이름</TableHead>
+            <TableHead scope="row">이름</TableHead>
             <TableCell>
               <Controller
                 name={`${fieldPrefix}.dsgnrNm`}
@@ -62,7 +62,7 @@ function ContactInfoFormSection({ fieldPrefix }: ContactInfoFormSectionProps) {
                 )}
               />
             </TableCell>
-            <TableHead>연락처</TableHead>
+            <TableHead scope="row">연락처</TableHead>
             <TableCell>
               <Controller
                 name={`${fieldPrefix}.dsgnrTelno`}
@@ -84,7 +84,7 @@ function ContactInfoFormSection({ fieldPrefix }: ContactInfoFormSectionProps) {
             </TableCell>
           </TableRow>
           <TableRow>
-            <TableHead>소속</TableHead>
+            <TableHead scope="row">소속</TableHead>
             <TableCell>
               <Controller
                 name={`${fieldPrefix}.dsgnrOgdpNm`}
@@ -102,7 +102,7 @@ function ContactInfoFormSection({ fieldPrefix }: ContactInfoFormSectionProps) {
                 )}
               />
             </TableCell>
-            <TableHead>이메일</TableHead>
+            <TableHead scope="row">이메일</TableHead>
             <TableCell>
               <Controller
                 name={`${fieldPrefix}.dsgnrEmlAddr`}

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 variant="secondary" className="table-fixed">
+        <Table caption="재원분담 입력: 구분, 현행, 변경요구, 증감, 비고 정보 제공" variant="secondary" className="table-fixed">
           <TableHeader>
             <TableRow>
               <TableHead className="w-[24rem]" rowSpan={2}>
@@ -234,7 +234,7 @@ function FnrsSharFormSection({ initialSharTree, initialSharAtchFiles }: FnrsShar
 
                 return (
                   <TableRow key={item.code}>
-                    <TableHead className="text-left" style={{ paddingLeft }}>
+                    <TableHead scope="row" className="text-left" style={{ paddingLeft }}>
                       {showSubIcon && <span className="mr-1 text-gray-400">└</span>}
                       {item.label}
                     </TableHead>

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 variant="secondary">
+          <Table caption="행정지원 신청 정보 입력" variant="secondary">
             <colgroup>
               <col width="15%" />
               <col width="35%" />
@@ -115,7 +115,7 @@ function PbadmsTaskApplyDialog({
             <TableHeader>
               {canSidoGugunSelectable && (
                 <TableRow>
-                  <TableHead data-required>시도</TableHead>
+                  <TableHead scope="row" data-required>시도</TableHead>
                   <TableCell>
                     <Select
                       value={sidoComCd || undefined}
@@ -136,7 +136,7 @@ function PbadmsTaskApplyDialog({
                       </SelectContent>
                     </Select>
                   </TableCell>
-                  <TableHead>시군구</TableHead>
+                  <TableHead scope="row">시군구</TableHead>
                   <TableCell>
                     <Select
                       value={sggComCd || undefined}
@@ -158,7 +158,7 @@ function PbadmsTaskApplyDialog({
                 </TableRow>
               )}
               <TableRow>
-                <TableHead data-required>업무구분</TableHead>
+                <TableHead scope="row" data-required>업무구분</TableHead>
                 <TableCell colSpan={3}>
                   <FieldSet className="px-2">
                     <FieldGroup data-slot="checkbox-group" className="flex-row flex-wrap">

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

@@ -12,7 +12,7 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from "@common/components";
+} from "@common/components";
 
 interface PrivacyConsentFormData {
   privacyConsent: "Y" | "N";
@@ -23,7 +23,7 @@ function PrivacyConsentSection() {
 
   return (
     <SectionCollapsible title="개인정보 수집/이용 동의">
-      <Table 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 variant="secondary" className="table-fixed">
+      <Table caption="행정지원 진행상태" 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 variant="secondary">
+            <Table caption="보완 요청 입력: 보완 항목, 보완 의견, 첨부파일 정보 제공" 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 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 variant="secondary">
+        <Table caption="보완요청 현황" variant="secondary">
           <colgroup>
             <col width="14%" />
             <col width="8%" />

apps/common/features/src/pages/(post)/normal/ui/normal-page.tsx

@@ -1,3 +1,7 @@
 "use client";
 
-export { PostPage as NormalPage } from "@/widgets/post";
+import { PostPage } from "@/widgets/post";
+
+export function NormalPage({ bbsId }: { bbsId: string }) {
+	return <PostPage bbsId={bbsId} tableCaption="게시판 목록으로 No, 제목, 조회수, 첨부파일, 작성, 등록일 정보 제공" />;
+}

apps/common/features/src/pages/(post)/notice/ui/notice-page.tsx

@@ -3,5 +3,5 @@
 import { PostPage } from "@/widgets/post";
 
 export function NoticePage({ bbsId }: { bbsId: string }) {
-	return <PostPage bbsId={bbsId} tableCaption="공지사항 목록" />;
+	return <PostPage bbsId={bbsId} tableCaption="공지사항 목록으로 No, 제목, 조회수, 첨부파일, 작성, 등록일 정보 제공" />;
 }

apps/common/features/src/pages/contents/ui/menu-modification-demand-dialog.tsx

@@ -86,7 +86,7 @@ const MenuModificationDemandDialog = memo(
                 </colgroup>
                 <TableBody>
                   <TableRow>
-                    <TableHead>신청자</TableHead>
+                    <TableHead scope="row">신청자</TableHead>
                     <TableCell className="border">
                       <FormField
                         control={form.control}
@@ -107,7 +107,7 @@ const MenuModificationDemandDialog = memo(
                     </TableCell>
                   </TableRow>
                   <TableRow>
-                    <TableHead>이메일</TableHead>
+                    <TableHead scope="row">이메일</TableHead>
                     <TableCell className="border">
                       <FormField
                         control={form.control}
@@ -128,7 +128,7 @@ const MenuModificationDemandDialog = memo(
                     </TableCell>
                   </TableRow>
                   <TableRow>
-                    <TableHead>요청 내용</TableHead>
+                    <TableHead scope="row">요청 내용</TableHead>
                     <TableCell className="border">
                       <FormField
                         control={form.control}

apps/common/features/src/shared/ui/grid-view-data-table.tsx

@@ -1,4 +1,4 @@
-import type { HTMLAttributes } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
 import {
   flexRender,
   type RowData,
@@ -26,6 +26,7 @@ type GridViewDataTableProps<T> = {
   className?: HTMLAttributes<HTMLTableElement>["className"];
   viewPagination?: boolean;
   onRowClick?: (row: T) => void;
+  footerContent?: ReactNode;
 };
 
 function GridViewDataTable<T>({
@@ -33,6 +34,7 @@ function GridViewDataTable<T>({
   className,
   viewPagination,
   onRowClick,
+  footerContent,
 }: GridViewDataTableProps<T>) {
   return (
     <div className="bg-secondary-background pb-10">
@@ -72,6 +74,9 @@ function GridViewDataTable<T>({
           ))}
         </div>
       </div>
+      {footerContent && (
+        <div className="px-4 text-left">{footerContent}</div>
+      )}
       {viewPagination && <Pagination table={table} />}
     </div>
   );

apps/common/features/src/widgets/post/ui/post-form.tsx

@@ -70,6 +70,9 @@ function PostForm<T extends PostFormData | PostUpdateFormData>({
     <Form {...form}>
       <form onSubmit={form.handleSubmit(onSubmit)}>
         <div className="card">
+          <p className="mb-2 text-right text-sm text-muted-foreground">
+            *은 필수입력 항목입니다.
+          </p>
           <Table variant="secondary">
             <colgroup>
               <col width="15%" />
@@ -77,7 +80,7 @@ function PostForm<T extends PostFormData | PostUpdateFormData>({
             </colgroup>
             <TableBody>
               <TableRow>
-                <TableHead data-required>제목</TableHead>
+                <TableHead scope="row" data-required>제목</TableHead>
                 <TableCell className="border">
                   <FormField
                     control={form.control}
@@ -98,7 +101,7 @@ function PostForm<T extends PostFormData | PostUpdateFormData>({
                 </TableCell>
               </TableRow>
               <TableRow>
-                <TableHead>작성자</TableHead>
+                <TableHead scope="row">작성자</TableHead>
                 <TableCell className="border">
                   <FormField
                     control={form.control}
@@ -120,7 +123,7 @@ function PostForm<T extends PostFormData | PostUpdateFormData>({
               </TableRow>
               {!userInfo?.userUnqId && (
                 <TableRow>
-                  <TableHead data-required>비밀번호</TableHead>
+                  <TableHead scope="row" data-required>비밀번호</TableHead>
                   <TableCell className="border">
                     <FormField
                       control={form.control}
@@ -143,7 +146,7 @@ function PostForm<T extends PostFormData | PostUpdateFormData>({
                 </TableRow>
               )}
               <TableRow>
-                <TableHead>내용</TableHead>
+                <TableHead scope="row">내용</TableHead>
                 <TableCell className="border">
                   <FormField
                     control={form.control}
@@ -166,7 +169,7 @@ function PostForm<T extends PostFormData | PostUpdateFormData>({
               </TableRow>
               {bbsInfo?.rfrncUseYn === "Y" && (
                 <TableRow>
-                  <TableHead>참조 URL</TableHead>
+                  <TableHead scope="row">참조 URL</TableHead>
                   <TableCell className="border">
                     <FormField
                       control={form.control}
@@ -189,7 +192,7 @@ function PostForm<T extends PostFormData | PostUpdateFormData>({
               )}
               {bbsInfo?.popupUseYn === "Y" && (
                 <TableRow>
-                  <TableHead>팝업여부</TableHead>
+                  <TableHead scope="row">팝업여부</TableHead>
                   <TableCell className="border">
                     <div className="flex items-center gap-4">
                       <FormField
@@ -262,7 +265,7 @@ function PostForm<T extends PostFormData | PostUpdateFormData>({
               )}
               {bbsInfo?.upndFixUseYn === "Y" && (
                 <TableRow>
-                  <TableHead>상단고정</TableHead>
+                  <TableHead scope="row">상단고정</TableHead>
                   <TableCell className="border">
                     <div className="flex items-center gap-4">
                       <FormField
@@ -336,7 +339,7 @@ function PostForm<T extends PostFormData | PostUpdateFormData>({
               )}
               {bbsInfo?.pstgPrdUseYn === "Y" && (
                 <TableRow>
-                  <TableHead>게시기간</TableHead>
+                  <TableHead scope="row">게시기간</TableHead>
                   <TableCell className="border">
                     <div className="flex items-center gap-4">
                       <FormField
@@ -410,7 +413,7 @@ function PostForm<T extends PostFormData | PostUpdateFormData>({
               )}
               {bbsInfo?.atflUseYn === "Y" && (
                 <TableRow>
-                  <TableHead>첨부파일</TableHead>
+                  <TableHead scope="row">첨부파일</TableHead>
                   <TableCell className="border">
                     {bbsInfo?.bbsTypeCd === "BBSIMAGE" ? (
                       <WithPreviewFileUploader

apps/common/features/src/widgets/post/ui/post-page.tsx

@@ -213,15 +213,6 @@ function PostPage({
                     등록
                   </Button>
                 )}
-                {pageMenuAuthority?.delAuthrtYn === "Y" && (
-                  <Button
-                    color="red"
-                    onClick={onPostDelete}
-                    disabled={!table.getFilteredSelectedRowModel().rows.length}
-                  >
-                    선택삭제
-                  </Button>
-                )}
                 <Select
                   value={table.getState().pagination.pageSize.toString()}
                   onValueChange={(value) => {
@@ -254,6 +245,17 @@ function PostPage({
                   table={table}
                   onRowClick={handleRowClick}
                   viewPagination
+                  footerContent={
+                    pageMenuAuthority?.delAuthrtYn === "Y" ? (
+                      <Button
+                        color="red"
+                        onClick={onPostDelete}
+                        disabled={!table.getFilteredSelectedRowModel().rows.length}
+                      >
+                        선택삭제
+                      </Button>
+                    ) : undefined
+                  }
                 />
               ) : (
                 <DataTable
@@ -261,6 +263,17 @@ function PostPage({
                   onRowClick={handleRowClick}
                   viewPagination
                   caption={tableCaption}
+                  footerContent={
+                    pageMenuAuthority?.delAuthrtYn === "Y" ? (
+                      <Button
+                        color="red"
+                        onClick={onPostDelete}
+                        disabled={!table.getFilteredSelectedRowModel().rows.length}
+                      >
+                        선택삭제
+                      </Button>
+                    ) : undefined
+                  }
                 />
               )
             )}

packages/common/components/src/ui/data-table/index.tsx

@@ -13,13 +13,12 @@ import { cn } from "../../lib";
 import { Button } from "../button";
 import {
   Table,
-  TableCaption,
   TableCell,
   TableHead,
   TableHeader,
   TableRow,
 } from "../table";
-import type { HTMLAttributes } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
 declare module "@tanstack/react-table" {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   interface ColumnMeta<TData extends RowData, TValue> {
@@ -36,6 +35,7 @@ type DataTableProps<T> = {
   viewPagination?: boolean;
   onRowClick?: (row: T) => void;
   caption?: string;
+  footerContent?: ReactNode;
 };
 
 function DataTable<T>({
@@ -45,11 +45,15 @@ function DataTable<T>({
   viewPagination,
   onRowClick,
   caption,
+  footerContent,
 }: DataTableProps<T>) {
   return (
     <>
-      <Table className={cn("w-full", className)} variant={variant}>
+      <Table
-        {caption && <TableCaption className="sr-only">{caption}</TableCaption>}
+        caption={caption}
+        className={cn("w-full", className)}
+        variant={variant}
+      >
         <THead table={table} />
         <tbody>
           {table.getRowModel().rows.map((row) => {
@@ -87,6 +91,9 @@ function DataTable<T>({
           })}
         </tbody>
       </Table>
+      {footerContent && (
+        <div className="mt-2 flex justify-start">{footerContent}</div>
+      )}
       {viewPagination && <Pagination table={table} />}
     </>
   );

packages/common/components/src/ui/footer/index.tsx

@@ -16,9 +16,10 @@ type BannerImageProps = {
   atflCd: string;
   bnrSn: number;
   lnkgUrlAddr: string;
+  bannerName?: string;
 };
 
-const BannerImage = ({ atflCd, lnkgUrlAddr }: BannerImageProps) => {
+const BannerImage = ({ atflCd, lnkgUrlAddr, bannerName }: BannerImageProps) => {
   const { data: imageUrl, isLoading } = useQuery({
     queryKey: [ENDPOINT.ATTACH_SERVICE.IMAGES, atflCd],
     queryFn: () => getImageUrlByAtflCd(atflCd),
@@ -55,7 +56,7 @@ const BannerImage = ({ atflCd, lnkgUrlAddr }: BannerImageProps) => {
       <img
         src={imageUrl}
         className="h-full w-full object-contain"
-        alt="배너 이미지"
+        alt={bannerName || "배너 이미지"}
       />
     </div>
   );
@@ -147,6 +148,7 @@ export function Footer() {
                       atflCd={banner.atflCd}
                       bnrSn={banner.bnrSn}
                       lnkgUrlAddr={banner.lnkgUrlAddr}
+                      bannerName={banner.bnrTtl}
                     />
                   </CarouselItem>
                 ))

packages/common/components/src/ui/header/index.tsx

@@ -284,7 +284,7 @@ export function Header({
                 ref={logoRef}
                 src={getLogoImage()}
                 className="h-[3rem]"
-                alt="logo"
+                alt={`${siteInfo?.siteNm}`}
                 onLoad={() => {
                   if (logoRef.current) {
                     setLogoWidth(logoRef.current.offsetWidth);

packages/common/components/src/ui/lnb/index.tsx

@@ -103,7 +103,8 @@ export function LNB({
         control.tabIndex >= 0 &&
         !control.hasAttribute("disabled") &&
         control.getAttribute("aria-disabled") !== "true" &&
-        !control.closest('[hidden], [aria-hidden="true"]'),
+        !control.closest('[hidden], [aria-hidden="true"]') &&
+        control.getClientRects().length > 0,
     );
     const currentIndex = menuControls.findIndex(
       (control) =>
@@ -117,9 +118,25 @@ export function LNB({
     const nextControl = menuControls[nextIndex];
 
     if (nextControl) {
+      // 모바일 Sheet(Radix FocusScope)의 Tab 순환 처리가 이동된 포커스 기준으로 다시 동작하지 않도록 전파 차단
       event.preventDefault();
+      event.stopPropagation();
       nextControl.focus();
       nextControl.scrollIntoView({ block: "nearest" });
+    } else if (
+      isMobile &&
+      !event.shiftKey &&
+      currentIndex === menuControls.length - 1
+    ) {
+      const closeButton = event.currentTarget
+        .closest<HTMLElement>('[data-sidebar="sidebar"]')
+        ?.querySelector<HTMLElement>(":scope > button");
+
+      if (closeButton) {
+        event.preventDefault();
+        event.stopPropagation();
+        closeButton.focus();
+      }
     }
   }
 

packages/common/components/src/ui/table/index.tsx

@@ -6,22 +6,41 @@ import { cn } from "../../lib/utils";
 
 interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
   variant?: "default" | "secondary" | "line";
+  caption?: string;
 }
 
 const Table = React.forwardRef<HTMLTableElement, TableProps>(
-  ({ className, variant = "default", ...props }, ref) => (
+  (
-    <div className="relative w-full">
+    {
-      <table
+      className,
-        ref={ref}
+      variant = "default",
-        className={cn(
+      caption,
-          "table-ui w-full caption-bottom text-sm",
+      "aria-label": ariaLabel,
-          className,
+      children,
-          variant,
+      ...props
-        )}
+    },
-        {...props}
+    ref,
-      />
+  ) => {
-    </div>
+    const captionText = caption ?? (ariaLabel ? `${ariaLabel} 표` : "테이블");
-  ),
+
+    return (
+      <div className="relative w-full">
+        <table
+          ref={ref}
+          className={cn(
+            "table-ui w-full caption-bottom text-sm",
+            className,
+            variant,
+          )}
+          aria-label={ariaLabel}
+          {...props}
+        >
+          <caption className="sr-only">{captionText}</caption>
+          {children}
+        </table>
+      </div>
+    );
+  },
 );
 Table.displayName = "Table";
 
@@ -81,27 +100,28 @@ TableRow.displayName = "TableRow";
 
 type TableHeadProps = React.ThHTMLAttributes<HTMLTableCellElement> & {
   "data-required"?: boolean | string;
+  scope?: "col" | "row" | "colgroup" | "rowgroup";
 };
 
 const TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(
-  ({ children, className, ...props }, ref) => {
+  ({ children, className, scope = "col", ...props }, ref) => {
-  const isRequired = props["data-required"] !== undefined;
+    const isRequired = props["data-required"] !== undefined;
 
-  return (
+    return (
-    <th
+      <th
-      ref={ref}
+        ref={ref}
-      scope="col"
+        scope={scope}
-      className={cn("align-middle", className)}
+        className={cn("align-middle", className)}
-      {...props}
+        {...props}
-    >
+      >
-      {children}
+        {children}
-      {isRequired && (
+        {isRequired && (
-        <span className="table-required-marker" title="필수 항목">
+          <span className="table-required-marker" title="필수 항목">
-          (*)
+            (*)
-        </span>
+          </span>
-      )}
+        )}
-    </th>
+      </th>
-  );
+    );
   },
 );
 TableHead.displayName = "TableHead";