From dd7d75310e156f4b5e59d7d704f5fcfec19178c5 Mon Sep 17 00:00:00 2001
From: ttipo <kysung114y@gmail.com>
Date: Mon, 22 Jun 2026 17:31:13 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=B3=B4=EA=B3=A0=20=EC=99=84=EB=A3=8C?=
 =?UTF-8?q?=20=EB=B0=B0=EC=A7=80=20=EC=98=86=20=EB=B3=B4=EA=B3=A0=EC=84=9C?=
 =?UTF-8?q?=20=EC=95=84=EC=9D=B4=EC=BD=98=EC=9C=BC=EB=A1=9C=20=EB=AA=A8?=
 =?UTF-8?q?=EB=8B=AC=20=EC=97=B4=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

보고 완료 상태에서 배지 클릭으로만 열리던 것을 명확히 — 배지 오른쪽에 보고서 아이콘 버튼 추가, 아이콘 클릭 시 보고 모달 오픈(열람 권한자만). 배지는 상태 표시 전용으로 변경.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 frontend/src/pages/relay/TaskDetailPage.vue | 50 ++++++++++++++++-----
 1 file changed, 38 insertions(+), 12 deletions(-)

diff --git a/frontend/src/pages/relay/TaskDetailPage.vue b/frontend/src/pages/relay/TaskDetailPage.vue
index 75c105d..1f1688f 100644
--- a/frontend/src/pages/relay/TaskDetailPage.vue
+++ b/frontend/src/pages/relay/TaskDetailPage.vue
@@ -1254,15 +1254,26 @@ function badgeFor(name: string | undefined): { label: string; cls: string } {
                   >
                     보고서 작성
                   </button>
-                  <button
-                    v-else-if="checkpointState(cp) === 'reported' && canViewReports"
-                    class="cp-state reported clickable"
-                    type="button"
-                    title="보고 내용 보기"
-                    @click="openReportModal(cp)"
-                  >
-                    보고 완료
-                  </button>
+                  <template v-else-if="checkpointState(cp) === 'reported'">
+                    <span class="cp-state reported">보고 완료</span>
+                    <button
+                      v-if="canViewReports"
+                      class="cp-report-view"
+                      type="button"
+                      title="보고서 보기"
+                      aria-label="보고서 보기"
+                      @click="openReportModal(cp)"
+                    >
+                      <svg
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      ><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" /><path d="M14 2v6h6" /><path d="M9 13h6M9 17h6M9 9h1" /></svg>
+                    </button>
+                  </template>
                   <span
                     v-else
                     class="cp-state"
@@ -3487,11 +3498,26 @@ a.file-info {
   color: var(--red);
   background: var(--red-weak);
 }
-.cp-state.clickable {
+/* 보고서 보기 아이콘(보고 완료 배지 오른쪽) */
+.cp-report-view {
+  flex-shrink: 0;
+  width: 1.75rem;
+  height: 1.75rem;
+  display: grid;
+  place-items: center;
+  border: none;
+  background: transparent;
+  color: var(--text-3);
+  border-radius: var(--radius-sm);
   cursor: pointer;
 }
-.cp-state.reported.clickable:hover {
-  background: #cfe9d8;
+.cp-report-view:hover {
+  background: var(--accent-weak);
+  color: var(--accent);
+}
+.cp-report-view svg {
+  width: 1rem;
+  height: 1rem;
 }
 .cp-report-btn {
   margin-left: auto;