🎨 Palette: 새로고침 버튼 로딩 상태 및 링크 접근성 개선

.Jules/palette.md

@@ -0,0 +1,3 @@
+## 2026-06-27 - No Custom CSS Classes Allowed for UI State
+**Learning:** When making UX improvements (like disabled button states), adding new custom classes (e.g., `.btn-disabled`) violates the design constraints. Native pseudo-classes (`:disabled`) and combining selectors (`:not(:disabled)`) must be used instead to leverage standard browser behavior without expanding the design system.
+**Action:** Use native HTML state attributes (like `disabled="true"`) and corresponding CSS pseudo-classes to manage visual state instead of creating new utility classes.

src/main/resources/static/assets/viewer/viewer.css

@@ -195,7 +195,7 @@ a:hover {
   color: #ffffff;
 }
 
-.btn-primary:hover {
+.btn-primary:hover:not(:disabled) {
   filter: brightness(0.95);
 }
 
@@ -205,10 +205,15 @@ a:hover {
   color: var(--ink);
 }
 
-.btn-secondary:hover {
+.btn-secondary:hover:not(:disabled) {
   background: #fbfcfe;
 }
 
+.btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
 .preview {
   border-radius: 12px;
   border: 1px dashed rgba(16, 32, 50, 0.26);

src/main/resources/static/assets/viewer/viewer.js

@@ -45,6 +45,7 @@ function setLoading(message) {
   el.error.hidden = true;
   el.liveStatus.textContent = message;
   el.preview.setAttribute("aria-busy", "true");
+  el.retryBtn.disabled = true;
 }
 
 function showError(message) {
@@ -53,6 +54,7 @@ function showError(message) {
   el.liveStatus.textContent = "";
   el.preview.setAttribute("aria-busy", "false");
   el.errorTitle.focus();
+  el.retryBtn.disabled = false;
 }
 
 function clearPreview() {
@@ -73,6 +75,8 @@ function renderPreviewLink(path) {
   link.textContent = "Open artifact";
   link.className = "btn btn-secondary";
   link.rel = "noopener";
+  link.target = "_blank";
+  link.setAttribute("aria-label", "Open artifact in a new tab");
   el.preview.appendChild(link);
 }
 
@@ -156,6 +160,7 @@ async function poll(docId, abortSignal) {
 
     el.preview.setAttribute("aria-busy", "false");
     el.liveStatus.textContent = "Ready.";
+    el.retryBtn.disabled = false;
 
     clearPreview();
     const path = bootstrap.data.previewResourcePath;