From 22b060b68fa01bc29f43cb2964cebca14836c8d4 Mon Sep 17 00:00:00 2001
From: nelee <lnu8926@gmail.com>
Date: Tue, 12 May 2026 22:35:00 +0900
Subject: [PATCH] =?UTF-8?q?fix(a11y):=20=ED=97=A4=EB=8D=94=20=EC=95=84?=
 =?UTF-8?q?=EC=9D=B4=EC=BD=98=20=EB=B2=84=ED=8A=BC=20aria-label=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80=20(#28)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Header, KanbanHeader, CalendarHeader의 모든 아이콘 버튼에
aria-label 추가. 다크모드 토글은 현재 상태에 따라 동적으로 변경.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../calendarView/components/CalendarHeader.tsx        |  4 ++++
 .../features/kanban/components/KanbanHeader.tsx       | 11 ++++++-----
 src/components/layout/Header.tsx                      |  4 ++++
 3 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/components/features/calendarView/components/CalendarHeader.tsx b/src/components/features/calendarView/components/CalendarHeader.tsx
index fac43b3..e36a047 100644
--- a/src/components/features/calendarView/components/CalendarHeader.tsx
+++ b/src/components/features/calendarView/components/CalendarHeader.tsx
@@ -167,6 +167,7 @@ export default function CalendarHeader({
                 onClick={onProjectInfoClick}
                 className="p-1 hover:bg-white/20 rounded-lg transition-colors"
                 title="프로젝트 정보"
+                aria-label="프로젝트 정보"
               >
                 <svg
                   className="w-5 h-5 text-white/80 hover:text-white"
@@ -243,6 +244,7 @@ export default function CalendarHeader({
             <button
               onClick={handleAddTaskClick}
               className="px-3 sm:px-4 py-2 bg-main-400 dark:bg-main-500 text-white rounded-lg hover:bg-main-500 dark:hover:bg-main-400 active:bg-main-600 dark:active:bg-main-600 transition-all text-xs sm:text-sm font-medium shadow-sm"
+              aria-label="새 작업 추가"
             >
               <span className="hidden sm:inline">+ 새 작업</span>
               <span className="sm:hidden">+</span>
@@ -257,6 +259,7 @@ export default function CalendarHeader({
                 showFilter ? "bg-white/20" : ""
               }`}
               title="필터"
+              aria-label="필터"
             >
               <svg
                 className="w-4 h-4 sm:w-5 sm:h-5 text-white"
@@ -279,6 +282,7 @@ export default function CalendarHeader({
             onClick={onToggleHelp}
             className="p-1.5 hover:bg-white/20 rounded-lg transition-colors"
             title={showHelp ? "도움말 닫기" : "도움말 열기"}
+            aria-label={showHelp ? "도움말 닫기" : "도움말 열기"}
           >
             <svg
               className={`w-4 h-4 text-white transition-transform duration-300 ${
diff --git a/src/components/features/kanban/components/KanbanHeader.tsx b/src/components/features/kanban/components/KanbanHeader.tsx
index e94cd22..2f41ac9 100644
--- a/src/components/features/kanban/components/KanbanHeader.tsx
+++ b/src/components/features/kanban/components/KanbanHeader.tsx
@@ -110,7 +110,7 @@ export default function KanbanHeader({
         <div className="flex flex-col gap-1 min-w-0">
           <div className="flex items-center gap-2">
             <h2 className="text-lg font-semibold text-foreground truncate">{projectName}</h2>
-            <button onClick={onProjectInfoClick} className={iconBtn} title="프로젝트 정보">
+            <button onClick={onProjectInfoClick} className={iconBtn} title="프로젝트 정보" aria-label="프로젝트 정보">
               <Info className="w-4 h-4" />
             </button>
           </div>
@@ -144,7 +144,7 @@ export default function KanbanHeader({
                 placeholder="작업 검색..."
                 className="w-32 sm:w-48 text-sm bg-transparent outline-none text-foreground placeholder:text-muted-foreground"
               />
-              <button onClick={closeSearch} className="text-muted-foreground hover:text-foreground transition-colors">
+              <button onClick={closeSearch} className="text-muted-foreground hover:text-foreground transition-colors" aria-label="검색 닫기">
                 <X className="w-3.5 h-3.5" />
               </button>
             </div>
@@ -155,7 +155,7 @@ export default function KanbanHeader({
                 <div>{format(new Date(), "M월 d일 (E)", { locale: ko })}</div>
               </div>
               {onSearchChange && (
-                <button onClick={() => setSearchOpen(true)} className={iconBtn} title="검색">
+                <button onClick={() => setSearchOpen(true)} className={iconBtn} title="검색" aria-label="검색">
                   <Search className="w-4 h-4" />
                 </button>
               )}
@@ -165,19 +165,20 @@ export default function KanbanHeader({
           <button
             onClick={handleAddClick}
             className="flex items-center gap-1 px-3 py-2 bg-main-500 dark:bg-main-400 text-white rounded-[10px] hover:bg-main-600 dark:hover:bg-main-500 transition-colors text-sm font-medium"
+            aria-label="새 작업 추가"
           >
             <Plus className="w-4 h-4" />
             <span className="hidden sm:inline">새 작업</span>
           </button>
 
-          <button onClick={onToggleFilter} className={`${iconBtn} relative`} title="필터">
+          <button onClick={onToggleFilter} className={`${iconBtn} relative`} title="필터" aria-label="필터">
             <SlidersHorizontal className="w-4 h-4 sm:w-5 sm:h-5" />
             {hasActiveFilter && (
               <span className="absolute top-1 right-1 w-1.5 h-1.5 bg-main-500 rounded-full" />
             )}
           </button>
 
-          <button onClick={onToggleHelp} className={iconBtn} title={showHelp ? "도움말 닫기" : "도움말 열기"}>
+          <button onClick={onToggleHelp} className={iconBtn} title={showHelp ? "도움말 닫기" : "도움말 열기"} aria-label={showHelp ? "도움말 닫기" : "도움말 열기"}>
             <HelpCircle className={`w-4 h-4 transition-colors ${showHelp ? "text-main-500 dark:text-main-400" : ""}`} />
           </button>
         </div>
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index 2c64270..c0337df 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -43,6 +43,7 @@ export function Header() {
               size={20}
               className="w-[42px] h-[42px] rounded-[10px] border border-border"
               onClick={handleLoginModal}
+              aria-label="프로필"
             />
 
             <Link href="/notice">
@@ -51,6 +52,7 @@ export function Header() {
                 icon="speakerphone"
                 size={20}
                 className="w-[42px] h-[42px] rounded-[10px] border border-border"
+                aria-label="공지사항"
               />
             </Link>
 
@@ -61,6 +63,7 @@ export function Header() {
                   icon="crown"
                   size={20}
                   className="w-[42px] h-[42px] rounded-[10px] border border-border"
+                  aria-label="관리자 페이지"
                 />
               </Link>
             )}
@@ -68,6 +71,7 @@ export function Header() {
             <button
               className="w-[42px] h-[42px] rounded-[10px] border border-border bg-card flex items-center justify-center hover:bg-accent/10 transition-colors"
               onClick={() => setTheme(resolvedTheme === "dark" ? "light" : "dark")}
+              aria-label={mounted && resolvedTheme === "dark" ? "라이트 모드로 전환" : "다크 모드로 전환"}
             >
               {mounted && resolvedTheme === "dark" ? (
                 <Icon type="sun" size={20} className="text-yellow-300" />