feat: 이미지 팝업에 이전/다음 네비게이션 버튼 추가

src/ui/components/TimelineItem.tsx

@@ -37,7 +37,7 @@ export const TimelineItem = ({
   const notification = status.notification;
   const displayStatus = notification?.target ?? status.reblog ?? status;
   const boostedBy = notification ? null : status.reblog ? status.boostedBy : null;
-  const [activeImageUrl, setActiveImageUrl] = useState<string | null>(null);
+  const [activeImageIndex, setActiveImageIndex] = useState<number | null>(null);
   const [showContent, setShowContent] = useState(() => displayStatus.spoilerText.length === 0);
   const [imageZoom, setImageZoom] = useState(1);
   const [imageOffset, setImageOffset] = useState({ x: 0, y: 0 });
@@ -52,6 +52,44 @@ export const TimelineItem = ({
   );
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
   const attachments = displayStatus.mediaAttachments;
+  const activeImageUrl = activeImageIndex !== null ? attachments[activeImageIndex]?.url ?? null : null;
+
+  const goToPrevImage = useCallback(() => {
+    if (activeImageIndex === null || attachments.length <= 1) return;
+    const prevIndex = activeImageIndex === 0 ? attachments.length - 1 : activeImageIndex - 1;
+    setActiveImageIndex(prevIndex);
+    setImageZoom(1);
+    setImageOffset({ x: 0, y: 0 });
+  }, [activeImageIndex, attachments.length]);
+
+  const goToNextImage = useCallback(() => {
+    if (activeImageIndex === null || attachments.length <= 1) return;
+    const nextIndex = activeImageIndex === attachments.length - 1 ? 0 : activeImageIndex + 1;
+    setActiveImageIndex(nextIndex);
+    setImageZoom(1);
+    setImageOffset({ x: 0, y: 0 });
+  }, [activeImageIndex, attachments.length]);
+
+  useEffect(() => {
+    if (activeImageIndex === null) return;
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "ArrowLeft") {
+        event.preventDefault();
+        goToPrevImage();
+      } else if (event.key === "ArrowRight") {
+        event.preventDefault();
+        goToNextImage();
+      } else if (event.key === "Escape") {
+        event.preventDefault();
+        setActiveImageIndex(null);
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [activeImageIndex, goToPrevImage, goToNextImage]);
+
   const previewCard = displayStatus.card;
   const mentionNames = useMemo(() => {
     if (!displayStatus.mentions || displayStatus.mentions.length === 0) {
@@ -770,15 +808,15 @@ export const TimelineItem = ({
               </>
             ) : null}
             {showContent
-              ? attachments.map((item) => (
+              ? attachments.map((item, index) => (
                   <button
                     key={item.id}
                     type="button"
                     className="attachment-thumb"
                     onClick={() => {
                       setImageZoom(1);
                       setImageOffset({ x: 0, y: 0 });
-                      setActiveImageUrl(item.url);
+                      setActiveImageIndex(index);
                     }}
                     aria-label={item.description ? `이미지 보기: ${item.description}` : "이미지 보기"}
                   >
@@ -851,27 +889,51 @@ export const TimelineItem = ({
               return;
             }
             if (!event.target.closest(".image-modal-content")) {
-              setActiveImageUrl(null);
+              setActiveImageIndex(null);
             }
           }}
         >
-          <div className="image-modal-backdrop" onClick={() => setActiveImageUrl(null)} />
+          <div className="image-modal-backdrop" onClick={() => setActiveImageIndex(null)} />
           <div
             className="image-modal-content"
             ref={imageContainerRef}
             onClick={(event) => {
               if (event.target === event.currentTarget) {
-                setActiveImageUrl(null);
+                setActiveImageIndex(null);
               }
             }}
           >
             <button
               type="button"
               className="image-modal-close"
-              onClick={() => setActiveImageUrl(null)}
+              onClick={() => setActiveImageIndex(null)}
             >
               닫기
             </button>
+            {attachments.length > 1 ? (
+              <button
+                type="button"
+                className="image-modal-nav image-modal-nav-prev"
+                onClick={goToPrevImage}
+                aria-label="이전 이미지"
+              >
+                <svg viewBox="0 0 24 24" width="24" height="24">
+                  <polyline points="15 18 9 12 15 6" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+                </svg>
+              </button>
+            ) : null}
+            {attachments.length > 1 ? (
+              <button
+                type="button"
+                className="image-modal-nav image-modal-nav-next"
+                onClick={goToNextImage}
+                aria-label="다음 이미지"
+              >
+                <svg viewBox="0 0 24 24" width="24" height="24">
+                  <polyline points="9 18 15 12 9 6" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+                </svg>
+              </button>
+            ) : null}
             <img
               src={activeImageUrl}
               alt="첨부 이미지 원본"
@@ -911,6 +973,11 @@ export const TimelineItem = ({
                 setIsDragging(true);
               }}
             />
+            {attachments.length > 1 ? (
+              <div className="image-modal-counter">
+                {(activeImageIndex ?? 0) + 1} / {attachments.length}
+              </div>
+            ) : null}
           </div>
         </div>
       ) : null}

src/ui/styles/components.css

@@ -1529,6 +1529,49 @@ button.ghost {
   z-index: 2;
 }
 
+.image-modal-nav {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  background: rgba(0, 0, 0, 0.5);
+  color: white;
+  border: none;
+  border-radius: 50%;
+  width: 44px;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  z-index: 2;
+  transition: background 0.2s;
+}
+
+.image-modal-nav:hover {
+  background: rgba(0, 0, 0, 0.7);
+}
+
+.image-modal-nav-prev {
+  left: 12px;
+}
+
+.image-modal-nav-next {
+  right: 12px;
+}
+
+.image-modal-counter {
+  position: absolute;
+  bottom: 16px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: rgba(0, 0, 0, 0.6);
+  color: white;
+  padding: 6px 14px;
+  border-radius: 16px;
+  font-size: 14px;
+  z-index: 2;
+}
+
 .confirm-modal {
   position: fixed;
   inset: 0;