Skip to content

Fix/toggle #200

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dasosann merged 3 commits into from
Mar 26, 2026
Merged

Fix/toggle #200

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
520c230
feat: useMemo 사용
dasosann Mar 26, 2026
7785691
feat: 선택해제, 전체선택 버튼 분리
dasosann Mar 26, 2026
b1ad9c4
format : prettier
dasosann Mar 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 39 additions & 19 deletions src/feature/album/detail/components/PhotoList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -181,16 +181,21 @@ export default function PhotoList({
[selectablePhotos],
);

const handleToggleSelectAll = () => {
if (hasAnySelected) {
setIsSelectAllMode(false);
clearSelectedPhotos();
return;
}
const selectablePhotoIds = useMemo(
() => new Set(selectablePhotos.map(({ photoId }) => photoId)),
[selectablePhotos],
);

const handleSelectAll = () => {
setIsSelectAllMode(true);
setSelectedPhotos(selectableStorePhotos);
};

const handleClearAll = () => {
setIsSelectAllMode(false);
clearSelectedPhotos();
};

useEffect(() => {
if (mode !== 'select') return;
if (!isSelectAllMode) return;
Expand All @@ -211,15 +216,16 @@ export default function PhotoList({
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));
const filtered = currentSelected.filter((p) =>
selectablePhotoIds.has(p.id),
);

if (filtered.length !== currentSelected.length) {
setSelectedPhotos(filtered);
setIsSelectAllMode(false);
}
}, [mode, selectablePhotos, setSelectedPhotos]);
}, [mode, selectablePhotoIds, setSelectedPhotos]);

return (
<section ref={photoListRef} className='relative p-4'>
Expand Down Expand Up @@ -248,16 +254,30 @@ export default function PhotoList({
) : (
<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>
Comment on lines 255 to +278
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot Mar 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

이 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 유틸리티 클래스를 사용하는 것이 프로젝트 전체의 스타일 일관성을 유지하는 데 도움이 됩니다.

)}
</div>
<button
type='button'
className='typo-body-sm-medium text-text-subtle rounded-[4px] px-3 py-1.5'
Expand Down
Loading