fix: dashboard 웹 접근성 최적화 추가작업

Author: yyoonngg

frontend/src/app/(sidebar)/dashboard/_components/dashboard-table/CategoryFilterHeader.tsx

@@ -27,7 +27,7 @@ const CategoryFilterIcon = ({ isOpen }: { isOpen: boolean }) => {
 
   return (
     <span
-      className="inline-flex shrink-0 text-gray-300"
+      className="inline-flex shrink-0 text-gray-500"
       aria-label={isOpen ? "필터 열기" : "필터 닫기"}
     >
       <Icon aria-hidden="true" />

frontend/src/app/(sidebar)/dashboard/_components/dashboard-table/CategoryPopup.tsx

@@ -62,6 +62,8 @@ const CategoryPopup = ({
   return (
     <div
       ref={popupRef}
+      role="dialog"
+      aria-label="카테고리 선택"
       className="fixed z-50 w-[288px] rounded-lg border border-border-light bg-white shadow-lg overflow-hidden"
       style={{
         top: `${position.top}px`,

frontend/src/app/(sidebar)/dashboard/_components/dashboard-table/EditableDataTable.tsx

@@ -81,6 +81,7 @@ const EditableDataTable = ({
         columns={columns}
         data={sortedRows}
         rowKey={rowKey}
+        aria-label="지출 기록 테이블"
         className="flex-1 min-h-0 rounded-t-600 border border-b-0 border-gray-50"
         selectedCell={selectedCell}
         sortConfig={tableSortConfig}

frontend/src/app/(sidebar)/dashboard/_components/image-modal/PetImageChangeModal.tsx

@@ -117,7 +117,7 @@ export default function PetImageChangeModal({
         <button
           type="button"
           onClick={handleOverlayClose}
-          className="self-end text-gray-400 transition-colors hover:text-gray-700 cursor-pointer"
+          className="self-end text-gray-500 transition-colors hover:text-gray-700 cursor-pointer"
           aria-label="닫기"
         >
           <CloseIcon className="size-5" aria-hidden="true" />

frontend/src/app/(sidebar)/dashboard/_hooks/useExpenseTableColumns.tsx

@@ -17,6 +17,12 @@ import Chip from "@/components/common/Chip/Chip";
 import CheckBox from "@/components/common/CheckBox/CheckBox";
 import CategoryFilterHeader from "@/app/(sidebar)/dashboard/_components/dashboard-table/CategoryFilterHeader";
 
+const ACCESSOR_LABEL_MAP: Partial<Record<keyof EditableExpenseRow, string>> = {
+  usage: "사용내역",
+  cost: "비용",
+  memo: "메모",
+};
+
 /**
  * 지출 테이블 컬럼 정의 및 셀 렌더러/에디터 생성 훅
  */
@@ -42,6 +48,7 @@ export const useExpenseTableColumns = ({
       ) => {
         return (
           <input
+            aria-label={ACCESSOR_LABEL_MAP[accessor] ?? String(accessor)}
             className="w-full bg-transparent outline-none px-500 py-200 truncate"
             value={String(value ?? "")}
             onChange={(e) => {
@@ -93,6 +100,7 @@ export const useExpenseTableColumns = ({
         <input
           type="text"
           inputMode="numeric"
+          aria-label="비용"
           className="w-full bg-transparent outline-none px-500 py-200"
           value={displayValue}
           onChange={(e) => {
@@ -131,6 +139,7 @@ export const useExpenseTableColumns = ({
     (_value: EditableExpenseRow[keyof EditableExpenseRow], _row: EditableExpenseRow) => {
       return (
         <CheckBox
+          aria-label="행 선택"
           isChecked={_row.isSelected}
           onChange={() => updateCellByLocalId(_row.localId, "isSelected", !_row.isSelected)}
         />
@@ -147,7 +156,7 @@ export const useExpenseTableColumns = ({
   return useMemo(
     () => [
       {
-        label: <CheckBox isChecked={isAllSelected} onChange={handleToggleAllCheckBox} />,
+        label: <CheckBox aria-label="전체 선택" isChecked={isAllSelected} onChange={handleToggleAllCheckBox} />,
         accessor: "isSelected" as keyof EditableExpenseRow,
         render: createRenderCheckBox,
         width: "48px",

frontend/src/components/ui/DataTable/ClientDataTable.tsx

@@ -16,7 +16,7 @@ const SortIcon = memo(function SortIcon({ order }: { order: "asc" | "desc" }) {
 
   return (
     <span
-      className="inline-flex shrink-0 text-gray-300"
+      className="inline-flex shrink-0 text-gray-500"
       aria-label={order === "asc" ? "오름차순" : "내림차순"}
     >
       <Icon aria-hidden="true" />

frontend/src/components/ui/DataTable/DataTableShell.tsx

@@ -31,7 +31,11 @@ const DataTableShell = memo(function DataTableShell({
       tabIndex={tabIndex}
       onKeyDown={onKeyDown}
     >
-      <table className="w-full border-separate border-spacing-0 text-left table-fixed shrink-0">
+      <table
+        className="w-full border-separate border-spacing-0 text-left table-fixed shrink-0"
+        role="presentation"
+        aria-hidden="true"
+      >
         <colgroup>{colDefs}</colgroup>
         {headerSlot}
       </table>