From ecc6d4d814d5831a0ec195df0babe224826043e2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EA=B3=A4?= Date: Thu, 19 Mar 2026 16:00:01 +0900 Subject: [PATCH] =?UTF-8?q?docs:=20[finance]=20=EA=B3=84=EC=A0=95=EB=B3=84?= =?UTF-8?q?=EC=9B=90=EC=9E=A5=20=ED=82=A4=EB=B3=B4=EB=93=9C=20=EB=84=A4?= =?UTF-8?q?=EB=B9=84=EA=B2=8C=EC=9D=B4=EC=85=98=20=EB=B3=80=EA=B2=BD?= =?UTF-8?q?=EC=9D=B4=EB=A0=A5=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- INDEX.md | 1 + ...0319_account_ledger_keyboard_navigation.md | 81 +++++++++++++++++++ 2 files changed, 82 insertions(+) create mode 100644 changes/20260319_account_ledger_keyboard_navigation.md diff --git a/INDEX.md b/INDEX.md index 0ab7723..dc72c2c 100644 --- a/INDEX.md +++ b/INDEX.md @@ -281,6 +281,7 @@ DB 도메인별: | [20260319_statcards_grid_layout_fix.md](changes/20260319_statcards_grid_layout_fix.md) | StatCards 카드 6개 한 행 표시 개선 | | [20260319_item_master_field_validation_fix.md](changes/20260319_item_master_field_validation_fix.md) | 품목기준관리 필드 수정 422 유효성 검증 오류 수정 | | [20260319_account_code_migration_and_income_statement.md](changes/20260319_account_code_migration_and_income_statement.md) | 계정코드 3→5자리 마이그레이션 + 손익계산서 월별/토글 개선 | +| [20260319_account_ledger_keyboard_navigation.md](changes/20260319_account_ledger_keyboard_navigation.md) | 계정별원장 계정과목 검색 키보드 방향키 네비게이션 추가 | --- diff --git a/changes/20260319_account_ledger_keyboard_navigation.md b/changes/20260319_account_ledger_keyboard_navigation.md new file mode 100644 index 0000000..0bb3775 --- /dev/null +++ b/changes/20260319_account_ledger_keyboard_navigation.md @@ -0,0 +1,81 @@ +# 계정별원장 계정과목 검색 키보드 네비게이션 추가 + +**날짜:** 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