웹 접근성 조치

This commit is contained in:
2026-10-06 14:32:26 +09:00
parent 24c5dce24d
commit d3c39caefb
90 changed files with 365 additions and 277 deletions
@@ -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="유입하수처리장"
@@ -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"
@@ -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>
@@ -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)}
@@ -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>
@@ -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>
@@ -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`,
@@ -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`}
@@ -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>
@@ -105,7 +105,7 @@ function PbadmsTaskApplyDialog({
{isPending ? (
<Skeleton className="h-[16rem] w-full" />
) : (
<Table variant="secondary">
<Table caption="행정지원 신청 정보 입력" variant="secondary">
<colgroup>
<col width="15%" />
<col width="35%" />
@@ -115,7 +115,7 @@ function PbadmsTaskApplyDialog({
<TableHeader>
{canSidoGugunSelectable && (
<TableRow>
<TableHead data-required>시도</TableHead>
<TableHead scope="row" data-required>시도</TableHead>
<TableCell>
<Select
value={sidoComCd || undefined}
@@ -136,7 +136,7 @@ function PbadmsTaskApplyDialog({
</SelectContent>
</Select>
</TableCell>
<TableHead>시군구</TableHead>
<TableHead scope="row">시군구</TableHead>
<TableCell>
<Select
value={sggComCd || undefined}
@@ -158,7 +158,7 @@ function PbadmsTaskApplyDialog({
</TableRow>
)}
<TableRow>
<TableHead data-required>업무구분</TableHead>
<TableHead scope="row" data-required>업무구분</TableHead>
<TableCell colSpan={3}>
<FieldSet className="px-2">
<FieldGroup data-slot="checkbox-group" className="flex-row flex-wrap">
@@ -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>
@@ -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) => (
@@ -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%" />
@@ -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%" />
@@ -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%" />