🎨 Palette: [UX] 아이콘 전용 버튼에 툴팁(title) 추가

apps/desktop/src/features/score/ScoreView.tooltip.test.tsx

@@ -0,0 +1,37 @@
+import { render, screen } from "@testing-library/react";
+import { expect, test, vi } from "vitest";
+import { ScoreView } from "./ScoreView";
+import type { RehearsalSong } from "@bandscope/shared-types";
+
+vi.mock("../../i18n", () => ({
+  detectPreferredLocale: () => "en",
+  createTranslator: () => (key: string) => key,
+}));
+vi.mock("./scoreStorage", () => ({
+  readScorePdf: vi.fn(),
+  attachScorePdf: vi.fn(),
+  removeScorePdf: vi.fn(),
+}));
+vi.mock("./ScoreViewer", () => ({
+  ScoreViewer: () => <div data-testid="score-viewer">Viewer</div>,
+}));
+
+test("ScoreView places title on wrapper when remove button is disabled", () => {
+  const song: RehearsalSong = {
+    id: "song-1",
+    title: "Test Song",
+    scoreAttachments: [{ id: "att-1", fileName: "test.pdf" }],
+  } as unknown as RehearsalSong;
+
+  // No projectId -> buttons should be disabled
+  render(<ScoreView song={song} projectId={null} onSongUpdate={vi.fn()} />);
+
+  const removeButton = screen.getByRole("button", { name: "scoreRemove: test.pdf" });
+  expect(removeButton).toBeDisabled();
+
+  // title should be on the wrapper, NOT the button
+  expect(removeButton).not.toHaveAttribute("title");
+
+  const wrapper = removeButton.parentElement;
+  expect(wrapper).toHaveAttribute("title", "scoreRemove: test.pdf");
+});

apps/desktop/src/features/score/ScoreView.tsx

@@ -192,16 +192,21 @@ export function ScoreView({ song, projectId, onSongUpdate }: ScoreViewProps) {
                       <FileMusic className="size-4 shrink-0 text-cyan-300" aria-hidden="true" />
                       <span className="truncate">{attachment.fileName}</span>
                     </button>
-                    <Button
-                      variant="outline"
-                      size="icon"
-                      onClick={projectId ? () => void handleRemove(projectId, attachment) : undefined}
-                      disabled={!projectId}
-                      aria-label={`${t("scoreRemove")}: ${attachment.fileName}`}
-                      className="size-10 border-rose-300/25 text-rose-200 hover:bg-rose-400/10"
+                    <span
+                      title={`${t("scoreRemove")}: ${attachment.fileName}`}
+                      className="inline-flex"
                     >
-                      <Trash2 className="size-4" aria-hidden="true" />
-                    </Button>
+                      <Button
+                        variant="outline"
+                        size="icon"
+                        onClick={projectId ? () => void handleRemove(projectId, attachment) : undefined}
+                        disabled={!projectId}
+                        aria-label={`${t("scoreRemove")}: ${attachment.fileName}`}
+                        className="size-10 border-rose-300/25 text-rose-200 hover:bg-rose-400/10"
+                      >
+                        <Trash2 className="size-4" aria-hidden="true" />
+                      </Button>
+                    </span>
                   </li>
                 ))}
               </ul>

apps/desktop/src/features/score/ScoreViewer.tooltip.test.tsx

@@ -0,0 +1,45 @@
+import { render, screen } from "@testing-library/react";
+import { expect, test, vi } from "vitest";
+
+vi.mock("../../i18n", () => ({
+  detectPreferredLocale: () => "en",
+  createTranslator: () => (key: string) => key,
+}));
+
+vi.mock("./pdfjs", () => ({
+  loadScorePdf: vi.fn(() => ({
+    // Resolve immediately to enter READY state, allowing buttons to render
+    promise: Promise.resolve({
+      numPages: 2,
+      getPage: vi.fn(() => Promise.resolve({
+        getViewport: vi.fn(() => ({ width: 800, height: 600, scale: 1 })),
+        render: vi.fn(() => ({ promise: Promise.resolve(), cancel: vi.fn() }))
+      }))
+    }),
+    destroy: vi.fn(() => Promise.resolve()),
+  })),
+}));
+
+import { ScoreViewer } from "./ScoreViewer";
+
+test("ScoreViewer places title on wrapper when prev/next buttons are disabled", async () => {
+  render(<ScoreViewer data={new Uint8Array()} />);
+
+  // Wait for READY state
+  const prevButton = await screen.findByRole("button", { name: "scoreViewerPrevPage" });
+  const nextButton = await screen.findByRole("button", { name: "scoreViewerNextPage" });
+
+  // On page 1, prev is disabled, next is enabled (since numPages = 2)
+  expect(prevButton).toBeDisabled();
+  expect(nextButton).not.toBeDisabled();
+
+  // title should be on the wrapper for both
+  expect(prevButton).not.toHaveAttribute("title");
+  expect(nextButton).not.toHaveAttribute("title");
+
+  const prevWrapper = prevButton.parentElement;
+  const nextWrapper = nextButton.parentElement;
+
+  expect(prevWrapper).toHaveAttribute("title", "scoreViewerPrevPage");
+  expect(nextWrapper).toHaveAttribute("title", "scoreViewerNextPage");
+});

apps/desktop/src/features/score/ScoreViewer.tsx

@@ -257,6 +257,7 @@ export function ScoreViewer({ data, fileName, onStatusChange }: ScoreViewerProps
               variant="outline"
               size="icon-lg"
               className="size-12"
+              title={t("scoreViewerZoomOut")}
               aria-label={t("scoreViewerZoomOut")}
               onClick={zoomOut}
             >
@@ -266,6 +267,7 @@ export function ScoreViewer({ data, fileName, onStatusChange }: ScoreViewerProps
               variant="outline"
               size="icon-lg"
               className="size-12"
+              title={t("scoreViewerZoomIn")}
               aria-label={t("scoreViewerZoomIn")}
               onClick={zoomIn}
             >
@@ -274,6 +276,7 @@ export function ScoreViewer({ data, fileName, onStatusChange }: ScoreViewerProps
             <Button
               variant={fitWidth ? "secondary" : "outline"}
               className="h-12 px-4 text-base"
+              title={t("scoreViewerFitWidth")}
               aria-label={t("scoreViewerFitWidth")}
               aria-pressed={fitWidth}
               onClick={fitToWidth}
@@ -287,29 +290,33 @@ export function ScoreViewer({ data, fileName, onStatusChange }: ScoreViewerProps
           <canvas ref={canvasRef} className="mx-auto block max-w-none" />
         </div>
         <div className="flex items-center justify-center gap-4">
-          <Button
-            variant="outline"
-            size="icon-lg"
-            className="size-14"
-            aria-label={t("scoreViewerPrevPage")}
-            disabled={pageNumber <= 1}
-            onClick={goToPreviousPage}
-          >
-            <ChevronLeft className="size-6" aria-hidden="true" />
-          </Button>
+          <span title={t("scoreViewerPrevPage")} className="inline-flex">
+            <Button
+              variant="outline"
+              size="icon-lg"
+              className="size-14"
+              aria-label={t("scoreViewerPrevPage")}
+              disabled={pageNumber <= 1}
+              onClick={goToPreviousPage}
+            >
+              <ChevronLeft className="size-6" aria-hidden="true" />
+            </Button>
+          </span>
           <span className="min-w-28 text-center text-sm font-semibold text-slate-200">
             {pageIndicator}
           </span>
-          <Button
-            variant="outline"
-            size="icon-lg"
-            className="size-14"
-            aria-label={t("scoreViewerNextPage")}
-            disabled={pageNumber >= pageCount}
-            onClick={goToNextPage}
-          >
-            <ChevronRight className="size-6" aria-hidden="true" />
-          </Button>
+          <span title={t("scoreViewerNextPage")} className="inline-flex">
+            <Button
+              variant="outline"
+              size="icon-lg"
+              className="size-14"
+              aria-label={t("scoreViewerNextPage")}
+              disabled={pageNumber >= pageCount}
+              onClick={goToNextPage}
+            >
+              <ChevronRight className="size-6" aria-hidden="true" />
+            </Button>
+          </span>
         </div>
       </CardContent>
     </Card>