feat(ui): 검색 UX 개선(aria, clear 버튼, enterKeyHint)
docs(todo): 헤더 네비 6번 완료 표시
This commit is contained in:
@@ -21,8 +21,8 @@
|
|||||||
- [ ] 보드 타입/승인필요 등 뱃지 표기 여부 결정 및 적용
|
- [ ] 보드 타입/승인필요 등 뱃지 표기 여부 결정 및 적용
|
||||||
|
|
||||||
6) 검색창 구현
|
6) 검색창 구현
|
||||||
- [ ] 헤더 검색 입력 UI 추가(placeholder, 키보드 액션)
|
- [x] 헤더 검색 입력 UI 추가(placeholder, 키보드 액션)
|
||||||
- [ ] 검색 엔드포인트/페이지 연동(`src/app/search/page.tsx`)
|
- [x] 검색 엔드포인트/페이지 연동(`src/app/search/page.tsx`)
|
||||||
|
|
||||||
7) 스타일/반응형/테마
|
7) 스타일/반응형/테마
|
||||||
- [ ] 모바일 메뉴 토글(햄버거) 및 접근성 속성(aria-* ) 적용
|
- [ ] 모바일 메뉴 토글(햄버거) 및 접근성 속성(aria-* ) 적용
|
||||||
|
|||||||
@@ -12,14 +12,26 @@ export function SearchBar() {
|
|||||||
const q = term.trim();
|
const q = term.trim();
|
||||||
router.push(q ? `/search?q=${encodeURIComponent(q)}` : "/search");
|
router.push(q ? `/search?q=${encodeURIComponent(q)}` : "/search");
|
||||||
}}
|
}}
|
||||||
|
role="search"
|
||||||
|
aria-label="사이트 검색"
|
||||||
style={{ display: "flex", gap: 8, alignItems: "center" }}
|
style={{ display: "flex", gap: 8, alignItems: "center" }}
|
||||||
>
|
>
|
||||||
<input
|
<input
|
||||||
|
type="search"
|
||||||
|
name="q"
|
||||||
value={term}
|
value={term}
|
||||||
onChange={(e) => setTerm(e.target.value)}
|
onChange={(e) => setTerm(e.target.value)}
|
||||||
placeholder="검색어 입력"
|
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>
|
<button type="submit">검색</button>
|
||||||
</form>
|
</form>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user