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 separating 'select all' and 'clear all' functionalities into distinct handlers and updating the UI to display separate, conditional buttons for these actions. It also optimizes photo ID collection using a useMemo hook to prevent redundant computations. The review suggests extracting the new buttons into a reusable ActionButton component to reduce code duplication and improve maintainability, and recommends using Tailwind CSS utility classes instead of inline styles for better consistency.
| <div className='mb-3'> | ||
| <div className='mb-3 flex justify-between'> | ||
| <button | ||
| type='button' | ||
| className='typo-body-sm-medium text-text-subtle rounded-[4px] px-3 py-1.5' | ||
| style={{ | ||
| background: '#F1F2F3', | ||
| }} | ||
| onClick={handleToggleSelectAll} | ||
| > | ||
| {hasAnySelected ? '전체 선택 취소' : '전체 선택'} | ||
| </button> | ||
| <div className='flex gap-1.5'> | ||
| <button | ||
| type='button' | ||
| className='typo-body-sm-medium text-text-subtle rounded-[4px] px-3 py-1.5' | ||
| style={{ | ||
| background: '#F1F2F3', | ||
| }} | ||
| onClick={handleSelectAll} | ||
| > | ||
| 전체 선택 | ||
| </button> | ||
| {hasAnySelected && ( | ||
| <button | ||
| type='button' | ||
| className='typo-body-sm-medium text-text-subtle rounded-[4px] px-3 py-1.5' | ||
| style={{ | ||
| background: '#F1F2F3', | ||
| }} | ||
| onClick={handleClearAll} | ||
| > | ||
| 선택 해제 | ||
| </button> |
There was a problem hiding this comment.
이 div 내의 버튼들은 스타일과 구조가 매우 유사하여 코드 중복이 발생합니다. 바로 뒤에 있는 '취소' 버튼도 동일한 스타일을 사용하므로, 유지보수성을 높이기 위해 이 버튼들을 재사용 가능한 컴포넌트로 추출하는 것을 고려해 보세요.
예를 들어, 다음과 같이 ActionButton 컴포넌트를 만들 수 있습니다.
const ActionButton = ({ onClick, children }: { onClick: React.MouseEventHandler<HTMLButtonElement>; children: React.ReactNode }) => (
<button
type='button'
className='typo-body-sm-medium text-text-subtle rounded-[4px] px-3 py-1.5'
style={{ background: '#F1F2F3' }}
onClick={onClick}
>
{children}
</button>
);그리고 다음과 같이 사용하면 코드가 더 깔끔해집니다.
<div className='flex gap-1.5'>
<ActionButton onClick={handleSelectAll}>전체 선택</ActionButton>
{hasAnySelected && (
<ActionButton onClick={handleClearAll}>선택 해제</ActionButton>
)}
</div>추가적으로, style={{ background: '#F1F2F3' }}와 같은 인라인 스타일 대신 Tailwind CSS 유틸리티 클래스를 사용하는 것이 프로젝트 전체의 스타일 일관성을 유지하는 데 도움이 됩니다.
1 participant
요약
구현 사항
📸 스크린샷
Need Review
Reference
📜 리뷰 규칙
Reviewer는 아래 P5 Rule을 참고하여 리뷰를 진행합니다.
P5 Rule을 통해 Reviewer는 Reviewee에게 리뷰의 의도를 보다 정확히 전달할 수 있습니다.