82 lines
2.7 KiB
Markdown
82 lines
2.7 KiB
Markdown
# 계정별원장 계정과목 검색 키보드 네비게이션 추가
|
|
|
|
**날짜:** 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) |
|
|
|
|
---
|
|
|
|
## 테스트 체크리스트
|
|
|
|
- [x] 방향키 ↓ 로 목록 아래로 이동 확인
|
|
- [x] 방향키 ↑ 로 목록 위로 이동 확인
|
|
- [x] 마지막 항목에서 ↓ 시 첫 항목으로 순환
|
|
- [x] 첫 항목에서 ↑ 시 마지막 항목으로 순환
|
|
- [x] Enter 키로 선택 확인
|
|
- [x] Tab 키로 선택 + 포커스 이동 확인
|
|
- [x] Escape 키로 드롭다운 닫기 확인
|
|
- [x] 마우스 클릭 선택 기존 동작 유지
|
|
- [x] 검색 입력 시 `highlightIndex` 초기화 확인
|
|
|
|
---
|
|
|
|
## 관련 문서
|
|
|
|
- `dev/dev_plans/account-ledger-income-statement-plan.md` — 계정별원장 기획
|
|
- `changes/20260319_account_code_migration_and_income_statement.md` — 계정코드 마이그레이션 + 손익계산서
|
|
|
|
---
|
|
|
|
**최종 업데이트**: 2026-03-19
|