refactor: 공통 useBulkSelection 훅 추출 (PR-E)#74
Merged
Conversation
feed-list.tsx (921 lines) 와 youtube-feed.tsx (1201 lines) 둘 다
똑같은 bulk-selection 패턴을 각자 손으로 관리하고 있었음:
- selectMode + Set<string> selectedIds
- 단일 아이템 toggle
- Select all / Clear all
- exit select mode 시 selection 초기화
이 셋업을 `useBulkSelection` 훅으로 추출하고 양쪽에 적용. 전체 컴포넌트
분리(useXxxState + Section 컴포넌트)는 invasive 리팩터링이라 시각 검증
요하는 별도 follow-up 으로 남김.
## 변경
- 신규: `packages/web/src/hooks/use-bulk-selection.ts`
- API: `selectMode`, `selectedIds`, `selectedCount`, `toggle`, `deselect`,
`selectAll`, `clear`, `toggleSelectAll(ids)`, `enterSelectMode`,
`exitSelectMode`, `toggleSelectMode`
- 불변: exitSelectMode / toggleSelectMode leave 는 selection 까지 초기화
(stale id leak 방지)
- 신규: `packages/web/src/__tests__/use-bulk-selection.test.ts`
- toggle / deselect / toggleSelectAll 플립 / exit clear / mode flip 5 tests
- `feed-list.tsx`: local toggleSelect / toggleSelectAll / exitSelectMode +
selectMode/selectedIds useState 전부 제거 → 훅에서 받아 그대로 사용
- `youtube-feed.tsx`: 동일 (set-based 토글 인라인 구현 4곳 훅 한 줄 호출로)
## 불변
- 선택 모드 진입/나감 UX, 체크박스 렌더, bulk delete / mark_unread /
summarize 핸들러 동작 모두 동일
- URL 필터 변경 시 select mode 자동 종료 동일 (exitSelectMode() 한 번 호출)
- 259 tests 통과 (기존 254 + 새 5), typecheck / lint 통과
## Follow-up (이번 PR 범위 외)
- feed-list / youtube-feed 컴포넌트 완전 분리 (useXxxState + Section 컴포넌트)
는 invasive, 시각 검증이 따로 필요. 별도 PR 로 진행.
- 추가 공유 가능 패턴: pinned items fetch, meta (sources/categories/favorites)
초기 로드. 필요 시 usePinnedItems / useFeedMeta 로 추출 가능.
Co-Authored-By: Claude <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
feed-list (921 줄)과 youtube-feed (1201 줄) 둘 다 같은 bulk-selection 패턴(selectMode + Set + toggle / select all / exit)을 각자 손으로 관리 중이었음. 공통 훅으로 추출하고 양쪽 적용.
전체 컴포넌트 분리(useXxxState + Section 컴포넌트)는 invasive 리팩터링이라 시각 검증이 따로 필요. PR-E 범위에는 포함하지 않고 follow-up 으로 남김.
변경
신규 `hooks/use-bulk-selection.ts`
API: `selectMode`, `selectedIds`, `selectedCount`, `toggle`, `deselect`, `selectAll`, `clear`, `toggleSelectAll(ids)`, `enterSelectMode`, `exitSelectMode`, `toggleSelectMode`
핵심 불변: `exitSelectMode` / `toggleSelectMode` (leave) 는 selection 까지 초기화해서 re-entry 시 stale id 가 다시 나타나는 버그 방지.
신규 테스트 `tests/use-bulk-selection.test.ts`
`feed-list.tsx`
`youtube-feed.tsx`
불변
Test plan
이번 PR 범위 외 (Follow-up)
🤖 Generated with Claude Code