feat: 업무 상세 댓글·활동 빈 상태 UI 추가

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

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-06-22 17:39:32 +09:00
parent 4efe5a7a9a
commit af8b363f23
@@ -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;