sam-docs/changes/20260319_account_ledger_keyboard_navigation.md

계정별원장 계정과목 검색 키보드 네비게이션 추가

날짜: 2026-03-19 작업자: Claude Code

변경 개요

계정별원장 페이지의 계정과목 검색 드롭다운에 키보드 방향키 네비게이션 기능을 추가한다. 기존에는 마우스 클릭으로만 항목을 선택할 수 있었으나, 일반전표입력(AccountCodeSelect)과 동일한 키보드 UX 패턴을 적용하여 사용성을 개선한다.

---

수정된 파일

파일	변경 내용
mng/resources/views/finance/account-ledger.blade.php	키보드 네비게이션 로직 추가

---

상세 변경 사항

추가된 키보드 기능

키	동작
ArrowDown	드롭다운 목록에서 다음 항목으로 이동 (순환)
ArrowUp	드롭다운 목록에서 이전 항목으로 이동 (순환)
Enter	현재 하이라이트된 항목 선택
Tab	현재 하이라이트된 항목 선택 후 다음 필드로 이동
Escape	드롭다운 닫기

코드 변경 내용

1. 상태 추가

   • highlightIndex — 현재 키보드로 선택된 항목의 인덱스 (-1: 미선택)
   • listRef — 드롭다운 목록 DOM 참조 (자동 스크롤용)

2. handleKeyDown 함수 추가

   • 방향키로 highlightIndex 증감 (0~maxIndex 순환)
   • scrollIntoView({ block: 'nearest' }) 로 화면 밖 항목 자동 스크롤
   • Enter/Tab 키로 selectAccount() 호출

3. UI 하이라이트

   • 선택된 항목: bg-indigo-600 text-white (indigo 배경 + 흰 텍스트)
   • 비선택 항목: hover:bg-indigo-50 (기존 호버 효과 유지)

일반전표입력과의 일관성

기능	계정별원장 (수정 후)	일반전표입력
방향키 네비게이션	✅	✅
Enter 선택	✅	✅
Tab 선택	✅	✅
Escape 닫기	✅	✅
자동 스크롤	✅	✅
하이라이트 표시	✅ (indigo)	✅ (emerald)

---

테스트 체크리스트

• 방향키 ↓ 로 목록 아래로 이동 확인
• 방향키 ↑ 로 목록 위로 이동 확인
• 마지막 항목에서 ↓ 시 첫 항목으로 순환
• 첫 항목에서 ↑ 시 마지막 항목으로 순환
• Enter 키로 선택 확인
• Tab 키로 선택 + 포커스 이동 확인
• Escape 키로 드롭다운 닫기 확인
• 마우스 클릭 선택 기존 동작 유지
• 검색 입력 시 highlightIndex 초기화 확인

---

관련 문서

• dev/dev_plans/account-ledger-income-statement-plan.md — 계정별원장 기획
• changes/20260319_account_code_migration_and_income_statement.md — 계정코드 마이그레이션 + 손익계산서

---

최종 업데이트: 2026-03-19