feat(ui): 검색 UX 개선(aria, clear 버튼, enterKeyHint)
docs(todo): 헤더 네비 6번 완료 표시
This commit is contained in:
@@ -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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user