화살표, Home, End (+Shift) 키보드 입력 기능 추가

This commit is contained in:
2026-05-22 11:55:44 +09:00
parent 4000339477
commit ba0fe2f79f
5 changed files with 132 additions and 3 deletions
+8 -2
View File
@@ -66,7 +66,7 @@ src/
│ └── ghost.js # Drag ghost UI helper
├── file-explorer.js # Sidebar directory tree (lazy-load, expand/collapse)
├── sidebar-resize.js # Pointer-drag resizing for the aside/main split; persisted 340500px width
├── selection.js # Rubber-band, Shift-click, Cmd+click, resetAnchor
├── selection.js # Rubber-band, Shift-click, Cmd+click, keyboard navigation, resetAnchor
├── pinch-zoom.js # Ctrl+scroll to resize thumbnails (CSS --thumb-size, 150400px)
└── image-preview.js # Hover preview overlay; immediate show/hide when enabled/disabled
```
@@ -124,6 +124,9 @@ Prefer narrow utility modules (`utils/file-names.js`, `utils/dom.js`) over broad
- `Cmd+Shift+Z` — Redo (다시하기)
- `Space` — 미리보기 on/off 토글
- `Backspace` / `Delete` — 선택 파일 삭제 팝업
- `ArrowLeft` / `ArrowRight` / `ArrowUp` / `ArrowDown` — 해당 방향의 카드를 키보드 타겟으로 이동하고 단독 선택
- `Home` / `End` — 첫 카드 / 마지막 카드를 키보드 타겟으로 이동하고 단독 선택 (`grid-container` 최상단 / 최하단으로 스크롤)
- `Shift+Arrow*` / `Shift+Home` / `Shift+End` — 기존 선택 목록을 유지한 채 Finder처럼 anchor부터 새 키보드 타겟까지 범위 추가 선택
Global shortcuts are registered in `keyboard.js`. They do not fire while any `.modal-overlay` is open.
@@ -148,9 +151,12 @@ Global shortcuts are registered in `keyboard.js`. They do not fire while any `.m
- Click — 단독 선택 (재클릭 시 해제)
- Shift+Click — 범위 선택
- Cmd+Click — 개별 토글
- Arrow/Home/End keyboard navigation — `keyboardTargetIdx`를 이동하고 해당 카드를 단독 선택; 위/아래 이동은 현재 그리드의 실제 첫 행 카드 수로 column count를 계산
- Shift+Arrow/Home/End — Shift 확장 시작 시점의 선택 스냅샷을 보존하고, `lastSelectedIdx` anchor부터 `keyboardTargetIdx`까지의 범위를 추가 선택
- Home/End keyboard navigation — 선택 타겟 이동 후 `grid-container`를 각각 최상단/최하단으로 스크롤
- Rubber-band drag — 영역 선택 (rAF throttle 적용)
- Shift+Rubber-band — 토글 선택 (드래그 시작 시점 스냅샷 기준으로 선택/해제 반전)
- `resetAnchor()` — 그리드 재렌더 시 Shift 기준점 초기화 (grid.js에서 호출)
- `resetAnchor()` — 그리드 재렌더 시 Shift 기준점과 키보드 타겟 상태 초기화 (grid.js에서 호출)
**Drag-and-drop** (`drag-drop.js`):
- 그리드 내 카드 순서 재배치 (single/multi)