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" }} > 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 && ( + + )} );