From af8b363f23f2648a2a6497431fddc027dfe9c507 Mon Sep 17 00:00:00 2001
From: ttipo <kysung114y@gmail.com>
Date: Mon, 22 Jun 2026 17:39:32 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=97=85=EB=AC=B4=20=EC=83=81=EC=84=B8?=
 =?UTF-8?q?=20=EB=8C=93=EA=B8=80=C2=B7=ED=99=9C=EB=8F=99=20=EB=B9=88=20?=
 =?UTF-8?q?=EC=83=81=ED=83=9C=20UI=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

댓글/활동 패널에 컨텐츠가 없을 때 아이콘 + 안내 문구의 빈 상태(thread-empty) 표시.

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

diff --git a/frontend/src/pages/relay/TaskDetailPage.vue b/frontend/src/pages/relay/TaskDetailPage.vue
index 03cbca4..8899b43 100644
--- a/frontend/src/pages/relay/TaskDetailPage.vue
+++ b/frontend/src/pages/relay/TaskDetailPage.vue
@@ -781,6 +781,21 @@ function badgeFor(name: string | undefined): { label: string; cls: string } {
               v-show="activeTab === 'comments'"
               class="thread-panel"
             >
+              <div
+                v-if="comments.length === 0"
+                class="thread-empty"
+              >
+                <svg
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="1.6"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                ><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" /></svg>
+                <p>아직 댓글이 없습니다.</p>
+                <span>업무에 대한 의견이나 질문을 남겨보세요.</span>
+              </div>
               <div
                 v-for="(c, i) in comments"
                 :key="i"
@@ -916,6 +931,25 @@ function badgeFor(name: string | undefined): { label: string; cls: string } {
               v-show="activeTab === 'activity'"
               class="thread-panel"
             >
+              <div
+                v-if="task.activities.length === 0"
+                class="thread-empty"
+              >
+                <svg
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="1.6"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                ><circle
+                  cx="12"
+                  cy="12"
+                  r="9"
+                /><path d="M12 7v5l3 2" /></svg>
+                <p>아직 활동 내역이 없습니다.</p>
+                <span>업무 상태 변경·댓글 등 활동이 여기에 기록됩니다.</span>
+              </div>
               <div class="activity">
                 <div
                   v-for="(a, i) in task.activities"
@@ -2731,6 +2765,32 @@ function badgeFor(name: string | undefined): { label: string; cls: string } {
   background: var(--accent-weak);
 }
 
+/* 댓글/활동 빈 상태 */
+.thread-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: 0.4375rem;
+  padding: 2.75rem 1rem;
+  color: var(--text-3);
+}
+.thread-empty svg {
+  width: 2.25rem;
+  height: 2.25rem;
+  color: var(--border-strong);
+  margin-bottom: 0.25rem;
+}
+.thread-empty p {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--text-2);
+}
+.thread-empty span {
+  font-size: 0.781rem;
+  color: var(--text-3);
+}
+
 /* 댓글 */
 .comment {
   display: flex;