From 5c3b1e5ab43720deb8d88d89d3968cf15e04c192 Mon Sep 17 00:00:00 2001
From: ttipo <kysung114y@gmail.com>
Date: Sun, 21 Jun 2026 22:12:57 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EA=B2=B9=EC=B9=9C=20=EB=8B=B4=EB=8B=B9?=
 =?UTF-8?q?=EC=9E=90=20=EC=95=84=EB=B0=94=ED=83=80=20=EC=8A=A4=ED=83=9D?=
 =?UTF-8?q?=EC=9D=84=20=EC=B5=9C=EB=8C=80=203=EA=B0=9C=20+=20N=20=ED=98=95?=
 =?UTF-8?q?=ED=83=9C=EB=A1=9C=20=ED=86=B5=EC=9D=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

가로로 겹쳐 표시되는 프로필 스택이 3개를 넘으면 마지막에 +N 으로 표기한다.

- 업무 목록(ProjectDetailPage): 담당자 스택 3개 초과 시 +N
- 내 업무(MyTasksPage): 미니 담당자 스택 3개 초과 시 +N(.mini-more 추가)
- 프로젝트 멤버 스택(목록/헤더)은 이미 백엔드 AVATAR_LIMIT=3 으로 동일 처리됨
- 담당자 세로 목록(상세)·칩(지시 작성)은 겹침 스택이 아니라 제외

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 frontend/src/pages/relay/MyTasksPage.vue       | 17 +++++++++++++++--
 frontend/src/pages/relay/ProjectDetailPage.vue |  6 +++++-
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/frontend/src/pages/relay/MyTasksPage.vue b/frontend/src/pages/relay/MyTasksPage.vue
index cfd5261..bdc7ba2 100644
--- a/frontend/src/pages/relay/MyTasksPage.vue
+++ b/frontend/src/pages/relay/MyTasksPage.vue
@@ -256,13 +256,17 @@ function loadMore() {
                 >
                   <span class="mini-stack">
                     <span
-                      v-for="a in row.assignees"
+                      v-for="a in (row.assignees ?? []).slice(0, 3)"
                       :key="a.id"
                       class="mini-av"
                     ><UserAvatar
                       :url="a.avatarUrl"
                       :name="a.name"
                     /></span>
+                    <span
+                      v-if="(row.assignees?.length ?? 0) > 3"
+                      class="mini-av mini-more"
+                    >+{{ (row.assignees?.length ?? 0) - 3 }}</span>
                   </span>
                   {{ row.metaText }}
                 </span>
@@ -271,13 +275,17 @@ function loadMore() {
                   <span class="mi">
                     <span class="mini-stack">
                       <span
-                        v-for="a in row.assignees"
+                        v-for="a in (row.assignees ?? []).slice(0, 3)"
                         :key="a.id"
                         class="mini-av"
                       ><UserAvatar
                         :url="a.avatarUrl"
                         :name="a.name"
                       /></span>
+                      <span
+                        v-if="(row.assignees?.length ?? 0) > 3"
+                        class="mini-av mini-more"
+                      >+{{ (row.assignees?.length ?? 0) - 3 }}</span>
                     </span>
                   </span>
                   <span class="meta-sep" />
@@ -684,6 +692,11 @@ function loadMore() {
 .mini-stack .mini-av + .mini-av {
   margin-left: -0.3125rem;
 }
+/* 초과 인원 표기(+N) */
+.mini-av.mini-more {
+  background: #eceef1;
+  color: var(--text-2);
+}
 
 .task-right {
   display: flex;
diff --git a/frontend/src/pages/relay/ProjectDetailPage.vue b/frontend/src/pages/relay/ProjectDetailPage.vue
index 2d2e8c9..4574227 100644
--- a/frontend/src/pages/relay/ProjectDetailPage.vue
+++ b/frontend/src/pages/relay/ProjectDetailPage.vue
@@ -369,13 +369,17 @@ const STATUS_LABEL: Record<TaskStatus, string> = {
           <span class="task-right">
             <span class="avstack">
               <span
-                v-for="a in task.assignees"
+                v-for="a in task.assignees.slice(0, 3)"
                 :key="a.id"
                 class="avatar"
               ><UserAvatar
                 :url="a.avatarUrl"
                 :name="a.name"
               /></span>
+              <span
+                v-if="task.assignees.length > 3"
+                class="avatar av-more"
+              >+{{ task.assignees.length - 3 }}</span>
             </span>
             <span
               class="st-badge"