필수입력 안내 메세지

하단 메뉴 링크

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/lib/national-as-map.module.css

@@ -78,6 +78,15 @@
   opacity: 1;
 }
 
+.svgContainer :global(svg) :global(.basin:focus-visible) {
+  opacity: 1;
+}
+
+.svgContainer :global(svg) :global(.basin:focus-visible) :global(path) {
+  stroke: #111827;
+  stroke-width: 2.5;
+}
+
 .svgContainer :global(svg) :global(.basin) :global(path),
 .svgContainer :global(svg) :global(.basin) :global(polygon),
 .svgContainer :global(svg) :global(.basin) :global(polyline) {
@@ -146,7 +155,7 @@
 }
 
 .basinLabel.active {
-  background: #006bf8;
+  background: #0056b3;
   color: #fff;
   border-color: #96c3ff;
   box-shadow: 0 4px 12px rgba(0, 107, 248, 0.3);

apps/as/src/pages/dashboard/lib/use-national-as-map.ts

@@ -265,20 +265,44 @@ export function useNationalAsMap(basinDocPrgrsList: BasinDocPrgrsResponseDto[] |
         };
 
         groups.forEach((group) => {
-          addListener(group, "mouseenter", () => {
+          group.setAttribute("role", "button");
+          group.setAttribute("tabindex", "0");
+          group.setAttribute(
+            "aria-label",
+            `${resolveBasinName(group)} 행정지원 현황 보기`,
+          );
+
+          const activateGroup = () => {
             clearActive?.();
             group.classList.add("active");
             revealGroup(group);
+          };
+          const clearGroupIfInactive = () => {
+            if (!group.matches(":hover") && document.activeElement !== group) {
+              clearActive?.();
+            }
+          };
+
+          addListener(group, "mouseenter", () => {
+            activateGroup();
           });
           addListener(group, "mousemove", () => {
             if (group.classList.contains("active")) revealGroup(group);
           });
-          addListener(group, "mouseleave", () => clearActive?.());
+          addListener(group, "mouseleave", clearGroupIfInactive);
+          addListener(group, "focus", activateGroup);
+          addListener(group, "blur", clearGroupIfInactive);
           addListener(group, "click", (event) => {
             event.stopPropagation();
-            clearActive?.();
-            group.classList.add("active");
-            revealGroup(group);
+            activateGroup();
+          });
+          addListener(group, "keydown", (event) => {
+            const keyboardEvent = event as KeyboardEvent;
+            if (keyboardEvent.key !== "Enter" && keyboardEvent.key !== " ") {
+              return;
+            }
+            keyboardEvent.preventDefault();
+            activateGroup();
           });
         });
 

apps/as/src/pages/dashboard/ui/dashboard-noti-list.tsx

@@ -40,18 +40,18 @@ export function DashboardNotiList({
   );
 
   return (
-    <section className="card card-border m-0 bg-background">
+    <section className="card card-border m-0 bg-[#FAFBFC]">
       <div className="card-header flex items-center justify-between gap-4">
         <h3 className="text-2xl font-semibold">
           알림이력
           {dataUpdatedAt > 0 ? (
-            <span className="pl-2 text-lg font-medium text-muted-foreground">
+            <span className="pl-2 text-lg font-medium text-[#4A4A4A]">
               (업데이트 일시: {dayjs(dataUpdatedAt).format("YYYY-MM-DD HH:mm")})
             </span>
           ) : null}
         </h3>
         <div className="flex items-center gap-4">
-          <Button type="button" size="sm" color="white" onClick={() => router.push("/nti-hstry")}>
+          <Button type="button" size="sm" color="white" className="!text-[#0056B3]" onClick={() => router.push("/nti-hstry")}>
             전체보기
           </Button>
         </div>
@@ -60,7 +60,7 @@ export function DashboardNotiList({
       <div className="flex flex-col gap-4 p-2">
         <div className="flex flex-wrap gap-2 pt-2">
           {NOTI_STAT_CHIPS.map((chip) => (
-            <Badge key={chip.field} color={chip.color}>
+            <Badge key={chip.field} color={chip.color} className={chip.className}>
               {chip.label} {isPending ? "-" : (notiStats?.[chip.field] ?? 0)}건
             </Badge>
           ))}
@@ -75,7 +75,7 @@ export function DashboardNotiList({
         ) : null}
 
         {isError ? (
-          <p className="flex min-h-[12rem] items-center justify-center text-muted-foreground">
+          <p className="flex min-h-[12rem] items-center justify-center text-[#4A4A4A]">
             알림이력을 불러오지 못했습니다.
           </p>
         ) : null}
@@ -110,11 +110,11 @@ interface DashboardNotiRowProps {
 function DashboardNotiRow({ row, isActionPending, onAction }: DashboardNotiRowProps) {
   return (
     <div className="grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-4 border-b px-2 py-4 last:border-b-0">
-      <span className="text-lg text-muted-foreground">
+      <span className="text-lg text-[#4A4A4A]">
         {row.regDt ? dayjs(row.regDt).format("YYYY-MM-DD") : "-"}
       </span>
       <p className="min-w-0 line-clamp-2 text-xl sm:line-clamp-1">{row.notiTtl}</p>
-      <Button type="button" size="sm" color="white" disabled={isActionPending} onClick={onAction}>
+      <Button type="button" size="sm" color="white" className="!text-[#0056B3]" disabled={isActionPending} onClick={onAction}>
         처리하기
       </Button>
     </div>
@@ -137,7 +137,7 @@ function resolveNotiUrl(row: NotiAsUserResponseDto) {
 }
 
 const NOTI_STAT_CHIPS = [
-  { field: "todayCount", label: "오늘", color: "green" },
-  { field: "delayCount", label: "지연", color: "orange" },
-  { field: "pendingCount", label: "완료대기", color: "gray" },
+  { field: "todayCount", label: "오늘", color: "green", className: "!bg-[#188038]" },
+  { field: "delayCount", label: "지연", color: "orange", className: "!bg-[#C5221F]" },
+  { field: "pendingCount", label: "완료대기", color: "gray", className: "!bg-[#5F6368]" },
 ] as const;

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

@@ -39,16 +39,17 @@ export function DashboardNoticeTable() {
       getCoreRowModel: getCoreRowModel(),
     },
     dataTableOptions: {
+      caption: "공지사항 목록",
       variant: "line",
       onRowClick: handleRowClick,
     },
   });
 
   return (
-    <section className="card card-border m-0 bg-background">
+    <section className="card card-border m-0 bg-[#FAFBFC]">
       <div className="card-header flex items-center justify-between">
         <h3 className="text-2xl font-semibold">공지사항</h3>
-        <Button type="button" size="sm" color="white" onClick={handleMoreClick}>
+        <Button type="button" size="sm" color="white" className="!text-[#0056B3]" onClick={handleMoreClick}>
           더보기
         </Button>
       </div>

apps/as/src/pages/dashboard/ui/dashboard-page.tsx

@@ -11,7 +11,7 @@ export function DashboardPage() {
   const { data, isPending, isError, dataUpdatedAt } = useGetMainDashboard();
 
   return (
-    <div className="mt-4 flex gap-4 px-[1.8rem] pb-6">
+    <div className="flex min-h-full gap-4 bg-[#E9EDF2] px-[1.8rem] pb-6 pt-4 text-[#1E1E1E]">
       <div className="hidden flex-[0.5] sm:block">
         <NationalAsMap basinDocPrgrsList={data?.basinDocPrgrsList} />
       </div>

apps/as/src/pages/dashboard/ui/doc-prgrs-stts-cards.tsx

@@ -24,7 +24,7 @@ export function DocPrgrsSttsCards({ items, isPending, isError }: DocPrgrsSttsCar
 
   if (isError) {
     return (
-      <div className="card card-border m-0 flex min-h-[14rem] items-center justify-center bg-background text-muted-foreground">
+      <div className="card card-border m-0 flex min-h-[14rem] items-center justify-center bg-[#FAFBFC] text-[#4A4A4A]">
         진행상황을 불러오지 못했습니다.
       </div>
     );
@@ -39,7 +39,7 @@ export function DocPrgrsSttsCards({ items, isPending, isError }: DocPrgrsSttsCar
         return (
           <div
             key={slot.docSeComCd}
-            className="card card-border hover:bg-muted/40 m-0 block bg-background transition-colors"
+            className="card card-border hover:bg-muted/40 m-0 block bg-[#FAFBFC] transition-colors"
           >
             <div className="card-header">
               <h3 className="text-2xl font-semibold">{slot.title}</h3>
@@ -90,7 +90,7 @@ function DocPrgrsSttsMetric({
       >
         <Icon className="size-6" />
       </span>
-      <span className="text-xl text-muted-foreground">{label}</span>
+      <span className="text-xl text-[#4A4A4A]">{label}</span>
       <span className="text-3xl font-semibold tabular-nums">{count}</span>
     </div>
   );
@@ -107,21 +107,21 @@ const STAT_METRICS = [
   {
     field: "reqCnt",
     label: "신청",
-    iconClassName: "bg-blue-500",
+    iconClassName: "bg-[#4285F4]",
     bgColor: "bg-blue-100",
     Icon: FilePlus,
   },
   {
     field: "prgrsCnt",
     label: "진행",
-    iconClassName: "bg-emerald-500",
+    iconClassName: "bg-[#34A853]",
     bgColor: "bg-emerald-100",
     Icon: RefreshCw,
   },
   {
     field: "cmptnCnt",
     label: "완료",
-    iconClassName: "bg-orange-500",
+    iconClassName: "bg-[#EA4335]",
     bgColor: "bg-orange-100",
     Icon: CircleCheck,
   },

apps/as/src/pages/dashboard/ui/national-as-map.tsx

@@ -18,7 +18,7 @@ export function NationalAsMap({ basinDocPrgrsList }: NationalAsMapProps) {
   const popupColumnSpan = Math.max(1, popupContent.items.length);
 
   return (
-    <section className="card card-border m-0 flex h-full min-h-[40rem] flex-col bg-background">
+    <section className="card card-border m-0 flex h-full min-h-[40rem] flex-col bg-[#FAFBFC]">
       <div className="card-header">
         <h3 className="text-2xl font-semibold">전국 행정지원 지도</h3>
       </div>

apps/as/src/pages/design-cnstn/ui/design-form-page.tsx

@@ -165,8 +165,11 @@ function DesignFormPage({ mode, initialData, createDefaults }: DesignFormPagePro
     <FormProvider {...form}>
       <form onSubmit={form.handleSubmit(onSave)} className="mt-6 space-y-4">
         <SectionCollapsibleGroup>
-          <div className="sticky top-[6rem] z-30 bg-container px-4 py-2">
+          <div className="sticky top-[6rem] z-30 flex items-center justify-between bg-container px-4 py-2">
             <SectionCollapsibleToggle />
+            <p className="text-sm text-muted-foreground">
+              <span className="text-red-600">*</span>은 필수입력 항목입니다.
+            </p>
           </div>
           <div className="space-y-4">
             {initialData?.detDto?.designCnstnDocNo && (

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>이름</TableHead>
+                <TableHead scope="row" rowSpan={2}>신청자</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>이름</TableHead>
+                <TableHead scope="row" rowSpan={2}>설계자</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-form-page.tsx

@@ -248,8 +248,11 @@ function FnrsFormPage({ mode, initialData, createDefaults }: FnrsFormPageProps)
     <FormProvider {...form}>
       <form onSubmit={form.handleSubmit(onSave)} className="mt-4">
         <SectionCollapsibleGroup>
-          <div className="sticky top-[6rem] z-30 bg-container px-4 py-2">
+          <div className="sticky top-[6rem] z-30 flex items-center justify-between bg-container px-4 py-2">
             <SectionCollapsibleToggle />
+            <p className="text-sm text-muted-foreground">
+              <span className="text-red-600">*</span>은 필수입력 항목입니다.
+            </p>
           </div>
           <div className="space-y-4">
             {initialData?.detDto?.fnrsCnsltnDocNo && (

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>이름</TableHead>
+                <TableHead scope="row" rowSpan={2}>신청자</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>이름</TableHead>
+                <TableHead scope="row" rowSpan={2}>설계자</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-form-page.tsx

@@ -209,8 +209,11 @@ function InstlFormPage({ mode, initialData, createDefaults }: InstlFormPageProps
     <FormProvider {...form}>
       <form onSubmit={form.handleSubmit(onSave)} className="mt-4">
         <SectionCollapsibleGroup>
-          <div className="sticky top-[6rem] z-30 bg-container px-4 py-2">
+          <div className="sticky top-[6rem] z-30 flex items-center justify-between bg-container px-4 py-2">
             <SectionCollapsibleToggle />
+            <p className="text-sm text-muted-foreground">
+              <span className="text-red-600">*</span>은 필수입력 항목입니다.
+            </p>
           </div>
           <div className="space-y-4">
             {initialData?.detDto.instlSncnDocNo && (

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>이름</TableHead>
+                <TableHead scope="row" rowSpan={2}>신청자</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>이름</TableHead>
+                <TableHead scope="row" rowSpan={2}>설계자</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>이름</TableHead>
+                <TableHead scope="row" rowSpan={2}>신청자</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>이름</TableHead>
+                <TableHead scope="row" rowSpan={2}>설계자</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-form-page.tsx

@@ -246,8 +246,11 @@ function SewerBscPlanFormPage({
     <FormProvider {...form}>
       <form onSubmit={form.handleSubmit(onSave)} className="mt-4">
         <SectionCollapsibleGroup>
-          <div className="sticky top-[6rem] z-30 bg-container px-4 py-2">
+          <div className="sticky top-[6rem] z-30 flex items-center justify-between bg-container px-4 py-2">
             <SectionCollapsibleToggle />
+            <p className="text-sm text-muted-foreground">
+              <span className="text-red-600">*</span>은 필수입력 항목입니다.
+            </p>
           </div>
           <div className="space-y-4">
             {initialData?.detDto?.sewerBscPlanDocNo && (

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

@@ -97,7 +97,7 @@ function PbadmsTaskApplyDialog({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-[60rem]" aria-describedby={undefined}>
+      <DialogContent className="max-w-[66rem]" aria-describedby={undefined}>
         <DialogHeader>
           <DialogTitle>{title}</DialogTitle>
         </DialogHeader>
@@ -105,17 +105,17 @@ function PbadmsTaskApplyDialog({
         {isPending ? (
           <Skeleton className="h-[16rem] w-full" />
         ) : (
-          <Table variant="secondary">
+          <Table caption="행정지원 신청 정보 입력" variant="secondary">
             <colgroup>
-              <col width="15%" />
-              <col width="35%" />
-              <col width="15%" />
-              <col width="35%" />
+              <col width="20%" />
+              <col width="30%" />
+              <col width="20%" />
+              <col width="30%" />
             </colgroup>
             <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/cm/src/shared/api/client.ts

@@ -8,4 +8,5 @@ setCookie("site-id-key", SITE_ID);
 export const client = Client.getInstance({
   baseURL: BASE_URL,
   siteId: SITE_ID,
+  redirectOnUnauthorized: false,
 });

apps/common/features/app/(with-base-layout)/(post)/layout.tsx

@@ -1,8 +1,11 @@
 "use client";
 
+import { useEffect, useRef } from "react";
+import { usePathname, useRouter } from "next/navigation";
 import { MenuApi } from "@/entities/menu";
+import { MenuAuthorityApi } from "@/entities/menu-authority/@x/menu";
 import { ENDPOINT } from "@/shared/config";
-import { useMenuStore } from "@/shared/lib";
+import { useAlertStore, useMenuStore } from "@/shared/lib";
 import { PageLayout } from "@/shared/ui/page-layout";
 import { useQuery } from "@tanstack/react-query";
 
@@ -11,6 +14,9 @@ export default function PostLayout({
 }: {
   children: React.ReactNode;
 }) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const alert = useAlertStore((state) => state.setMessage);
   const { bbsInfo, currentMenuInfo } = useMenuStore((state) => state);
   const { data } = useQuery({
     queryKey: [ENDPOINT.CMS_SERVICE.MENUS, currentMenuInfo?.menuCd],
@@ -18,11 +24,78 @@ export default function PostLayout({
       MenuApi.getMenuInfo(currentMenuInfo?.menuCd.toString() ?? ""),
     enabled: !!currentMenuInfo,
   });
+
+  const isRegisterPage =
+    pathname?.endsWith("/register") || pathname?.endsWith("/answer");
+  const isModifyPage = pathname?.endsWith("/modify");
+  const requiredAuthority = isRegisterPage
+    ? "regAuthrtYn"
+    : isModifyPage
+      ? "mdfcnAuthrtYn"
+      : undefined;
+  const {
+    data: pageAuthorities,
+    isError: isAuthorityError,
+    isLoading: isAuthorityLoading,
+  } = useQuery({
+    queryKey: ["page-menu-authority", currentMenuInfo?.menuCd],
+    queryFn: () =>
+      MenuAuthorityApi.getPageMenuAuthority(currentMenuInfo!.menuCd),
+    enabled: Boolean(requiredAuthority && currentMenuInfo?.menuCd),
+  });
+  const hasRequiredAuthority =
+    !requiredAuthority ||
+    pageAuthorities?.[0]?.[requiredAuthority] === "Y";
+  const canRenderChildren =
+    !requiredAuthority || (hasRequiredAuthority && !isAuthorityLoading);
+  const handledDeniedRoute = useRef("");
+
+  useEffect(() => {
+    if (!requiredAuthority) {
+      handledDeniedRoute.current = "";
+      return;
+    }
+
+    if (
+      !pathname ||
+      !currentMenuInfo?.menuCd ||
+      isAuthorityLoading ||
+      (!isAuthorityError && hasRequiredAuthority)
+    ) {
+      return;
+    }
+
+    const deniedRouteKey = `${pathname}:${currentMenuInfo.menuCd}:${requiredAuthority}`;
+    if (handledDeniedRoute.current === deniedRouteKey) return;
+    handledDeniedRoute.current = deniedRouteKey;
+
+    const listPath = pathname.replace(
+      /\/(?:register|[^/]+\/(?:modify|answer))\/?$/,
+      "",
+    );
+    const message = isAuthorityError
+      ? "권한 정보를 확인할 수 없습니다."
+      : requiredAuthority === "regAuthrtYn"
+        ? "등록 권한이 없습니다."
+        : "수정 권한이 없습니다.";
+
+    alert(message, () => router.replace(listPath));
+  }, [
+    alert,
+    currentMenuInfo?.menuCd,
+    hasRequiredAuthority,
+    isAuthorityError,
+    isAuthorityLoading,
+    pathname,
+    requiredAuthority,
+    router,
+  ]);
+
   const menuPaths = data?.menuPath?.split(">").map((path) => path.trim());
 
   return (
     <PageLayout title={bbsInfo?.bbsNm ?? ""} menuPaths={menuPaths ?? []}>
-      {children}
+      {canRenderChildren && children}
     </PageLayout>
   );
 }

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

@@ -18,6 +18,9 @@ import {
   SelectTrigger,
   SelectValue,
   Skeleton,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
 } from "@common/components";
 import { AttachmentApi } from "@/entities/attachment";
 import { PostApi, PostPageGuard, type PostParams } from "@/entities/post";
@@ -40,6 +43,7 @@ function FaqPage({ bbsId }: { bbsId: string }) {
     keyword: "",
   });
   const [selectedPostNumbers, setSelectedPostNumbers] = useState<number[]>([]);
+  const [expandedFaqs, setExpandedFaqs] = useState<string[]>([]);
 
   const {
     data: postList,
@@ -174,6 +178,8 @@ function FaqPage({ bbsId }: { bbsId: string }) {
             {isFetched ? (
               <Accordion
                 type="multiple"
+                value={expandedFaqs}
+                onValueChange={setExpandedFaqs}
                 className="secondary flex flex-col gap-4"
               >
                 {postList?.content.map((item) => (
@@ -191,17 +197,30 @@ function FaqPage({ bbsId }: { bbsId: string }) {
                       value={item.pstNo.toString()}
                       className="w-full"
                     >
-                      <AccordionTrigger>
-                        <div className="flex flex-1 items-center justify-between">
-                          <div className="flex items-center gap-4">
-                            <span className="text-primary">Q</span>
-                            <span>{item.pstTtl}</span>
-                          </div>
-                          <span className="px-4 text-[1.2rem] font-normal text-label">
-                            등록일: {dayjs(item.regDt).format("YYYY-MM-DD")}
-                          </span>
-                        </div>
-                      </AccordionTrigger>
+                      <Tooltip>
+                        <TooltipTrigger asChild>
+                          <AccordionTrigger
+                            aria-expanded={expandedFaqs.includes(
+                              item.pstNo.toString(),
+                            )}
+                          >
+                            <div className="flex flex-1 items-center justify-between">
+                              <div className="flex items-center gap-4">
+                                <span className="text-primary">Q</span>
+                                <span>{item.pstTtl}</span>
+                              </div>
+                              <span className="px-4 text-[1.2rem] font-normal text-label">
+                                등록일: {dayjs(item.regDt).format("YYYY-MM-DD")}
+                              </span>
+                            </div>
+                          </AccordionTrigger>
+                        </TooltipTrigger>
+                        <TooltipContent>
+                          {expandedFaqs.includes(item.pstNo.toString())
+                            ? "접기"
+                            : "펼치기"}
+                        </TooltipContent>
+                      </Tooltip>
                       <AccordionContent>
                         <div className="flex items-start gap-4">
                           <span className="text-[1.4rem] font-bold text-label">

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
+                  }
                 />
               )
             )}