From 9d7cdf238a9856db1856879cb8aa6ac8efe01144 Mon Sep 17 00:00:00 2001
From: mota <koeracomp5@gmail.com>
Date: Mon, 13 Oct 2025 08:16:47 +0900
Subject: [PATCH] =?UTF-8?q?feat(ui):=20=EA=B2=80=EC=83=89=20UX=20=EA=B0=9C?=
 =?UTF-8?q?=EC=84=A0(aria,=20clear=20=EB=B2=84=ED=8A=BC,=20enterKeyHint)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

docs(todo): 헤더 네비 6번 완료 표시
---
 .cursor/.prompt/header_navigation작업.md |  4 ++--
 src/app/components/SearchBar.tsx         | 14 +++++++++++++-
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/.cursor/.prompt/header_navigation작업.md b/.cursor/.prompt/header_navigation작업.md
index 6843f25..6e4a0ba 100644
--- a/.cursor/.prompt/header_navigation작업.md
+++ b/.cursor/.prompt/header_navigation작업.md
@@ -21,8 +21,8 @@
 - [ ] 보드 타입/승인필요 등 뱃지 표기 여부 결정 및 적용
 
 6) 검색창 구현
-- [ ] 헤더 검색 입력 UI 추가(placeholder, 키보드 액션)
-- [ ] 검색 엔드포인트/페이지 연동(`src/app/search/page.tsx`)
+- [x] 헤더 검색 입력 UI 추가(placeholder, 키보드 액션)
+- [x] 검색 엔드포인트/페이지 연동(`src/app/search/page.tsx`)
 
 7) 스타일/반응형/테마
 - [ ] 모바일 메뉴 토글(햄버거) 및 접근성 속성(aria-* ) 적용
diff --git a/src/app/components/SearchBar.tsx b/src/app/components/SearchBar.tsx
index ce4ce39..a2c8a9f 100644
--- a/src/app/components/SearchBar.tsx
+++ b/src/app/components/SearchBar.tsx
@@ -12,14 +12,26 @@ export function SearchBar() {
         const q = term.trim();
         router.push(q ? `/search?q=${encodeURIComponent(q)}` : "/search");
       }}
+      role="search"
+      aria-label="사이트 검색"
       style={{ display: "flex", gap: 8, alignItems: "center" }}
     >
       <input
+        type="search"
+        name="q"
         value={term}
         onChange={(e) => setTerm(e.target.value)}
         placeholder="검색어 입력"
-        style={{ padding: "6px 8px", border: "1px solid #ddd", borderRadius: 6 }}
+        enterKeyHint="search"
+        aria-label="검색어"
+        onKeyDown={(e) => {
+          if (e.key === "Escape") setTerm("");
+        }}
+        style={{ padding: "6px 8px", border: "1px solid #ddd", borderRadius: 6, minWidth: 160 }}
       />
+      {term && (
+        <button type="button" aria-label="검색어 지우기" onClick={() => setTerm("")}>×</button>
+      )}
       <button type="submit">검색</button>
     </form>
   );