refactor-record: 기록 삭제 후 페이지 새로고침 제거 및 페이지별 보기 입력창 버그 수정#313
Open
refactor-record: 기록 삭제 후 페이지 새로고침 제거 및 페이지별 보기 입력창 버그 수정#313
Conversation
- reload()는 스크롤/필터/정렬 상태 초기화 및 전체 리소스 재로드 유발 - onDelete 콜백을 RecordItem→RecordList→MemoryContent→Memory로 전달 - 삭제 성공 시 해당 id만 로컬 상태에서 제거하여 UX 개선
- activeFilter='page' 설정이 loadMemoryPosts 의존성을 트리거해 로딩 전환 유발 - RecordFilters 언마운트로 showInputMode 로컬 상태가 리셋되어 입력창 미표시 - selectedPageRange 미확정 시 fetch 조기 반환으로 불필요한 로딩 차단
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Walkthrough이 변경사항은 RecordItem 컴포넌트의 페이지 새로고침 동작을 콜백 패턴으로 대체하는 기능을 도입합니다. MemoryContent와 RecordList를 통해 onDelete 콜백을 전달하고, Memory 페이지에서 삭제된 레코드를 필터링하여 처리합니다. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
Tip Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs). Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/components/memory/RecordItem/RecordItem.tsx (1)
151-187:⚠️ Potential issue | 🟠 Major
handleDelete의useCallback의존성에onDelete가 누락되었습니다.Line 171에서
onDelete를 사용하지만, 의존성 배열(Line 187)에 없어 오래된 콜백을 캡처할 수 있습니다. 탭 전환/재렌더 이후 삭제 시 잘못된 목록이 갱신될 가능성이 있습니다.✅ 제안 수정
- }, [roomId, record.id, type, openSnackbar]); + }, [roomId, record.id, type, openSnackbar, onDelete]);🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/memory/RecordItem/RecordItem.tsx` around lines 151 - 187, The useCallback for handleDelete closes over onDelete but onDelete is missing from the dependency array; update the dependency list for the handleDelete useCallback to include onDelete so the callback sees the latest prop and avoids stale closures (locate the useCallback that defines handleDelete and add onDelete to its dependency array).
🧹 Nitpick comments (1)
src/pages/memory/Memory.tsx (1)
298-307: 삭제 핸들러는 양쪽 리스트를 함께 정리하도록 단순화하는 것을 권장합니다.현재는
activeTab에 따라 한쪽만 갱신합니다. 동일 레코드가 양쪽 상태에 존재할 수 있는 구조라면, 탭 의존 분기 없이 둘 다 제거하는 편이 일관성과 유지보수성이 더 좋습니다.♻️ 권장 리팩터링
- const handleRecordDelete = useCallback( - (id: string) => { - if (activeTab === 'group') { - setGroupRecords(prev => prev.filter(r => r.id !== id)); - } else { - setMyRecords(prev => prev.filter(r => r.id !== id)); - } - }, - [activeTab], - ); + const handleRecordDelete = useCallback((id: string) => { + setGroupRecords(prev => prev.filter(r => r.id !== id)); + setMyRecords(prev => prev.filter(r => r.id !== id)); + }, []);🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/pages/memory/Memory.tsx` around lines 298 - 307, handleRecordDelete currently branches on activeTab and only removes the id from one list; instead always remove the record from both lists to avoid inconsistent state. Change handleRecordDelete (used with setGroupRecords and setMyRecords) to call both setGroupRecords(prev => prev.filter(r => r.id !== id)) and setMyRecords(prev => prev.filter(r => r.id !== id)) and remove activeTab from the dependency array (use an empty array or no deps) since the setters are stable.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Outside diff comments:
In `@src/components/memory/RecordItem/RecordItem.tsx`:
- Around line 151-187: The useCallback for handleDelete closes over onDelete but
onDelete is missing from the dependency array; update the dependency list for
the handleDelete useCallback to include onDelete so the callback sees the latest
prop and avoids stale closures (locate the useCallback that defines handleDelete
and add onDelete to its dependency array).
---
Nitpick comments:
In `@src/pages/memory/Memory.tsx`:
- Around line 298-307: handleRecordDelete currently branches on activeTab and
only removes the id from one list; instead always remove the record from both
lists to avoid inconsistent state. Change handleRecordDelete (used with
setGroupRecords and setMyRecords) to call both setGroupRecords(prev =>
prev.filter(r => r.id !== id)) and setMyRecords(prev => prev.filter(r => r.id
!== id)) and remove activeTab from the dependency array (use an empty array or
no deps) since the setters are stable.
ℹ️ Review info
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Jira integration is disabled
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (4)
src/components/memory/MemoryContent/MemoryContent.tsxsrc/components/memory/MemoryContent/RecordList.tsxsrc/components/memory/RecordItem/RecordItem.tsxsrc/pages/memory/Memory.tsx
heeeeyong
approved these changes
Feb 26, 2026
Collaborator
heeeeyong
left a comment
heeeeyong
left a comment
There was a problem hiding this comment.
정리 잘 해주셔서 바로 이해할 수 있었습니다~ 고생하셨습니다!!!!
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
3 participants
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.
📝 작업 내용
1. 기록/투표 삭제 시 전체 페이지 새로고침 제거
기록이나 투표 삭제 성공 후
window.location.reload()를 호출하고 있었습니다. 이로 인해 스크롤 위치가 맨 위로 초기화되고, 사용자가 설정한 필터(페이지 범위, 총평)와 정렬 옵션이 모두 리셋되며, 전체 리소스를 다시 로드하는 네트워크 비용이 발생하고 있었습니다.이를
onDelete콜백 prop을 통해 해결했습니다. 삭제 성공 시 페이지를 새로고침하는 대신, 콜백을 통해Memory.tsx의 로컬 상태(groupRecords/myRecords)에서 해당 항목만 제거합니다. 컴포넌트가 언마운트되지 않으므로 스크롤 위치, 필터, 정렬 상태가 모두 유지됩니다.변경 파일:
RecordItem.tsx:onDeleteprop 추가,window.location.reload()→onDelete?.(record.id)교체RecordList.tsx:onDeleteprop을RecordItem에 전달MemoryContent.tsx:onDeleteprop을RecordList에 전달Memory.tsx:handleRecordDelete구현 —activeTab기준으로 해당 id를 로컬 상태에서 필터링2. 페이지별 보기 클릭 시 입력창 미표시 버그 수정
"페이지별 보기" 버튼을 클릭하면 페이지 범위 입력창이 나타나야 하는데, 버튼만 활성화(보라색 + X)되고 입력창이 표시되지 않는 버그가 있었습니다.
원인은 다음과 같습니다.
RecordFilters의 로컬 상태showInputMode가true로 설정되는 동시에, 부모(Memory.tsx)의activeFilter상태가'page'로 변경됩니다.activeFilter는loadMemoryPosts의 의존성 배열에 포함되어 있어 즉시 API 재호출이 트리거되고,setLoading(true)로 인해 Memory가 로딩 스켈레톤으로 전환됩니다. 이 과정에서MemoryContent내부의RecordFilters가 언마운트되어showInputMode가false로 리셋됩니다. 로딩이 완료되면activeFilter === 'page'이지만showInputMode === false인 상태가 되어 입력창 대신 X 버튼만 표시됩니다.activeFilter === 'page'이면서selectedPageRange가 null인 경우에는 API 파라미터에 실제로 필터가 적용되지 않으므로 fetch가 불필요합니다.loadMemoryPosts상단에 이 조건에서 조기 반환하는 처리를 추가하여 불필요한 로딩 전환을 차단했습니다.변경 파일:
Memory.tsx:loadMemoryPosts내activeFilter === 'page' && !selectedPageRange조기 반환 추가Summary by CodeRabbit
버그 수정