From 520c230f18445a4ca1d44b9b281bfb0b67dfd673 Mon Sep 17 00:00:00 2001
From: dasosann <goodtony0403@gmail.com>
Date: Thu, 26 Mar 2026 16:26:34 +0900
Subject: [PATCH 1/3] =?UTF-8?q?feat:=20useMemo=20=EC=82=AC=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/feature/album/detail/components/PhotoList.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/feature/album/detail/components/PhotoList.tsx b/src/feature/album/detail/components/PhotoList.tsx
index 8dff315..6e7eae8 100644
--- a/src/feature/album/detail/components/PhotoList.tsx
+++ b/src/feature/album/detail/components/PhotoList.tsx
@@ -181,6 +181,11 @@ export default function PhotoList({
     [selectablePhotos],
   );
 
+  const selectablePhotoIds = useMemo(
+    () => new Set(selectablePhotos.map(({ photoId }) => photoId)),
+    [selectablePhotos],
+  );
+
   const handleToggleSelectAll = () => {
     if (hasAnySelected) {
       setIsSelectAllMode(false);
@@ -211,15 +216,14 @@ 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'>

From 77856915728e11d179fb624c08837b80fd501cac Mon Sep 17 00:00:00 2001
From: dasosann <goodtony0403@gmail.com>
Date: Thu, 26 Mar 2026 16:29:34 +0900
Subject: [PATCH 2/3] =?UTF-8?q?feat:=20=EC=84=A0=ED=83=9D=ED=95=B4?=
 =?UTF-8?q?=EC=A0=9C,=20=EC=A0=84=EC=B2=B4=EC=84=A0=ED=83=9D=20=EB=B2=84?=
 =?UTF-8?q?=ED=8A=BC=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../album/detail/components/PhotoList.tsx     | 46 ++++++++++++-------
 1 file changed, 30 insertions(+), 16 deletions(-)

diff --git a/src/feature/album/detail/components/PhotoList.tsx b/src/feature/album/detail/components/PhotoList.tsx
index 6e7eae8..53bcdc8 100644
--- a/src/feature/album/detail/components/PhotoList.tsx
+++ b/src/feature/album/detail/components/PhotoList.tsx
@@ -186,16 +186,16 @@ export default function PhotoList({
     [selectablePhotos],
   );
 
-  const handleToggleSelectAll = () => {
-    if (hasAnySelected) {
-      setIsSelectAllMode(false);
-      clearSelectedPhotos();
-      return;
-    }
+  const handleSelectAll = () => {
     setIsSelectAllMode(true);
     setSelectedPhotos(selectableStorePhotos);
   };
 
+  const handleClearAll = () => {
+    setIsSelectAllMode(false);
+    clearSelectedPhotos();
+  };
+
   useEffect(() => {
     if (mode !== 'select') return;
     if (!isSelectAllMode) return;
@@ -252,16 +252,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>
+              )}
+            </div>
             <button
               type='button'
               className='typo-body-sm-medium text-text-subtle rounded-[4px] px-3 py-1.5'

From b1ad9c4003fe12a30888ec6a81b435e087d0a75d Mon Sep 17 00:00:00 2001
From: dasosann <goodtony0403@gmail.com>
Date: Thu, 26 Mar 2026 16:33:38 +0900
Subject: [PATCH 3/3] format : prettier

---
 src/feature/album/detail/components/PhotoList.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/feature/album/detail/components/PhotoList.tsx b/src/feature/album/detail/components/PhotoList.tsx
index 53bcdc8..f1803a8 100644
--- a/src/feature/album/detail/components/PhotoList.tsx
+++ b/src/feature/album/detail/components/PhotoList.tsx
@@ -217,7 +217,9 @@ export default function PhotoList({
     if (mode !== 'select') return;
 
     const currentSelected = useSelectedPhotosStore.getState().selectedPhotos;
-    const filtered = currentSelected.filter((p) => selectablePhotoIds.has(p.id));
+    const filtered = currentSelected.filter((p) =>
+      selectablePhotoIds.has(p.id),
+    );
 
     if (filtered.length !== currentSelected.length) {
       setSelectedPhotos(filtered);