Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Summary of ChangesHello, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! 이 PR은 앨범 상세 화면에서 사진 선택 로직을 개선하여 사용자 경험을 향상시킵니다. 특히, Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request refactors the photo selection logic in PhotoList.tsx by introducing a hasAnySelected state and modifying the 'Select All' button's behavior. It also adds a useEffect hook to automatically filter out selected photos that are no longer selectable. Feedback includes a concern that the updated 'Select All' button logic might negatively impact user experience by preventing users from selecting all photos if some are already selected, suggesting a three-state handling for selection. Additionally, it's recommended to memoize the selectableIds calculation within the new useEffect hook using useMemo for performance optimization and improved code readability.
|
|
||
| const handleToggleSelectAll = () => { | ||
| if (isAllSelected) { | ||
| if (hasAnySelected) { |
There was a problem hiding this comment.
isAllSelected에서 hasAnySelected로 조건을 변경하면서, 일부 사진만 선택된 상태에서 전체를 선택하는 기능이 사라졌습니다. 현재 로직에서는 일부라도 선택되어 있으면 "전체 선택 취소"만 가능하여, 사용자가 전체 선택을 하려면 먼저 모든 선택을 해제해야 합니다. 이는 사용자 경험을 저해할 수 있습니다.
예를 들어, 100장 중 99장을 선택한 사용자가 나머지 한 장을 선택하기 위해 "전체 선택"을 누르고 싶을 수 있지만, 현재는 불가능합니다.
세 가지 상태(선택 없음, 일부 선택, 전체 선택)를 구분하여 처리하는 것을 고려해보세요. 예를 들어, 일부만 선택된 상태에서는 여전히 "전체 선택" 버튼을 표시하여 사용자가 나머지 항목을 쉽게 선택할 수 있도록 할 수 있습니다.
| useEffect(() => { | ||
| if (mode !== 'select') return; | ||
|
|
||
| const selectableIds = new Set(selectablePhotos.map((p) => p.photoId)); | ||
| const currentSelected = useSelectedPhotosStore.getState().selectedPhotos; | ||
| const filtered = currentSelected.filter((p) => selectableIds.has(p.id)); | ||
|
|
||
| if (filtered.length !== currentSelected.length) { | ||
| setSelectedPhotos(filtered); | ||
| setIsSelectAllMode(false); | ||
| } | ||
| }, [mode, selectablePhotos, setSelectedPhotos]); |
There was a problem hiding this comment.
useEffect 내에서 selectablePhotos가 변경될 때마다 new Set(selectablePhotos.map(...))을 통해 selectableIds를 생성하고 있습니다. selectablePhotos가 큰 배열일 경우 성능에 미미한 영향을 줄 수 있습니다.
이 계산은 useMemo를 사용하여 컴포넌트의 최상위 레벨에서 memoization하는 것을 고려해볼 수 있습니다. 이렇게 하면 계산 로직과 부수 효과(side effect) 로직이 분리되어 코드 가독성이 향상되고, 불필요한 재계산을 방지할 수 있습니다.
const selectableIds = useMemo(
() => new Set(selectablePhotos.map((p) => p.photoId)),
[selectablePhotos],
);
useEffect(() => {
if (mode !== 'select') return;
const currentSelected = useSelectedPhotosStore.getState().selectedPhotos;
const filtered = currentSelected.filter((p) => selectableIds.has(p.id));
if (filtered.length !== currentSelected.length) {
setSelectedPhotos(filtered);
setIsSelectAllMode(false);
}
}, [mode, selectableIds, setSelectedPhotos]);위와 같이 수정하면 useEffect의 의존성이 더 명확해지고 코드가 더 효율적으로 됩니다.
1 participant
요약
구현 사항
📸 스크린샷
Need Review
Reference
📜 리뷰 규칙
Reviewer는 아래 P5 Rule을 참고하여 리뷰를 진행합니다.
P5 Rule을 통해 Reviewer는 Reviewee에게 리뷰의 의도를 보다 정확히 전달할 수 있습니다.