perf/a11y: 슬라이드 인덱스 검색 개선 및 중복 ARIA 제거

[Copilot]

Two independent issues in SlidePage.tsx: redundant double array scan to resolve the current slide, and a mobile container incorrectly duplicating the desktop tabpanel ARIA role/ID.

Performance: single findIndex instead of find + findIndex

// Before — two O(n) passes
const currentSlide = slides?.find((s) => s.slideId === routeSlideId) ?? slides?.[0];
const currentIndex = currentSlide
  ? (slides?.findIndex((s) => s.slideId === currentSlide.slideId) ?? -1)
  : -1;

// After — one pass, index-based access
const currentIndexFromRoute = slides?.findIndex((s) => s.slideId === routeSlideId) ?? -1;
const effectiveIndex =
  slides && slides.length > 0
    ? currentIndexFromRoute >= 0 ? currentIndexFromRoute : 0
    : -1;
const currentSlide = effectiveIndex >= 0 && slides ? slides[effectiveIndex] : undefined;
const currentIndex = effectiveIndex;

Accessibility: remove duplicate tabpanel on mobile

The mobile <div> had role="tabpanel" / id="tabpanel-slide-mobile" / aria-labelledby="tab-slide" — mirroring the desktop panel that's always in the DOM. Since only one is visible at a time via CSS, this created two elements claiming the same tab's content. The mobile div's ARIA tabpanel attributes are removed; the desktop panel retains them.

Original prompt

Please apply the following diffs and create a pull request.
Once the PR is ready, give it a title based on the messages of the fixes being applied.

[{"message":"The code performs two separate array searches: one with `find` to get the slide, and another with `findIndex` to get its position. This results in two O(n) operations. Consider using a single `findIndex` operation and then accessing the slide by index, which would reduce the search to O(n).","fixFiles":[{"filePath":"src/pages/SlidePage.tsx","diff":"diff --git a/src/pages/SlidePage.tsx b/src/pages/SlidePage.tsx\n--- a/src/pages/SlidePage.tsx\n+++ b/src/pages/SlidePage.tsx\n@@ -22,10 +22,15 @@\n     pollingIntervalMs: 15000,\n   });\n \n-  const currentSlide = slides?.find((s) => s.slideId === routeSlideId) ?? slides?.[0];\n-  const currentIndex = currentSlide\n-    ? (slides?.findIndex((s) => s.slideId === currentSlide.slideId) ?? -1)\n-    : -1;\n+  const currentIndexFromRoute = slides?.findIndex((s) => s.slideId === routeSlideId) ?? -1;\n+  const effectiveIndex =\n+    slides && slides.length > 0\n+      ? currentIndexFromRoute >= 0\n+        ? currentIndexFromRoute\n+        : 0\n+      : -1;\n+  const currentSlide = effectiveIndex >= 0 && slides ? slides[effectiveIndex] : undefined;\n+  const currentIndex = effectiveIndex;\n   const hasPrev = currentIndex > 0;\n   const hasNext = !!slides && currentIndex >= 0 && currentIndex < slides.length - 1;\n \n"}]},{"message":"Both tabpanels share the same `aria-labelledby` value 'tab-slide', but have different ids ('tabpanel-slide' and 'tabpanel-slide-mobile'). Since only one tabpanel is visible at a time depending on screen size, consider using a consistent approach where the visible tabpanel has the proper ARIA relationship, or ensure the controlling tab element references both tabpanels appropriately.","fixFiles":[{"filePath":"src/pages/SlidePage.tsx","diff":"diff --git a/src/pages/SlidePage.tsx b/src/pages/SlidePage.tsx\n--- a/src/pages/SlidePage.tsx\n+++ b/src/pages/SlidePage.tsx\n@@ -132,12 +132,7 @@\n         </main>\n       </div>\n \n-      <div\n-        role=\"tabpanel\"\n-        id=\"tabpanel-slide-mobile\"\n-        aria-labelledby=\"tab-slide\"\n-        className=\"flex min-[1024px]:hidden h-full flex-col px-4 py-4\"\n-      >\n+      <div className=\"flex min-[1024px]:hidden h-full flex-col px-4 py-4\">\n         <div className=\"flex items-center justify-between pb-3\">\n           <button\n             type=\"button\"\n"}]}]

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.