style: 일정/업무 UI 다듬기 — placeholder·참석자 콤보·AvatarStack 공용화
- 새 일정 모달 placeholder 를 프로젝트 기존 톤("~을 입력하세요/선택하세요")으로 통일
- 참석자 등록을 업무 생성의 담당자 등록과 동일한 콤보(검색 입력+후보 드롭다운+선택 칩)로 개편
('전 직원'은 드롭다운 항목/단일 칩으로 처리)
- 아바타 스택+오버플로(+N)+팝오버 목록을 공용 AvatarStack 으로 추출,
일정 상세 참석자 + 업무 상세 담당자 카드에 적용(담당자 팝오버에 역할 표시)
- 사용처가 사라진 ScheduleAvatar 삭제(UserAvatar/AvatarStack 으로 일원화)
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -29,6 +29,7 @@ import { useTaskStore } from '@/stores/task.store'
|
||||
import { useAuthStore } from '@/stores/auth.store'
|
||||
import { useDialog } from '@/composables/useDialog'
|
||||
import UserAvatar from '@/components/UserAvatar.vue'
|
||||
import AvatarStack from '@/components/common/AvatarStack.vue'
|
||||
import StatusSelect from '@/components/StatusSelect.vue'
|
||||
import { attachmentKindOf, fileBadge } from '@/shared/utils/format'
|
||||
import {
|
||||
@@ -182,6 +183,15 @@ const assigneeNames = computed(() => {
|
||||
if (names.length === 1) return names[0]
|
||||
return `${names[0]} 외 ${names.length - 1}명`
|
||||
})
|
||||
// 담당자 아바타 스택용 — 팝오버에 역할(role)을 보조문구로 표시
|
||||
const assigneeStack = computed(() =>
|
||||
(task.value?.assignees ?? []).map((a) => ({
|
||||
id: a.id,
|
||||
name: a.name,
|
||||
avatarUrl: a.avatarUrl,
|
||||
sub: a.role,
|
||||
})),
|
||||
)
|
||||
// 수정 요청 모달 열기 — 모든 항목을 '완료'로 초기화(담당자가 완료를 주장하며 요청)
|
||||
function openChanges() {
|
||||
const checks: Record<string, boolean> = {}
|
||||
@@ -1204,18 +1214,15 @@ function badgeFor(name: string | undefined): { label: string; cls: string } {
|
||||
<div class="side-label">
|
||||
담당자 · {{ task.assignees.length }}명
|
||||
</div>
|
||||
<div class="assignees">
|
||||
<div
|
||||
v-for="a in task.assignees"
|
||||
:key="a.id"
|
||||
class="ass"
|
||||
>
|
||||
<span class="avatar"><UserAvatar
|
||||
:url="a.avatarUrl"
|
||||
:name="a.name"
|
||||
/></span>
|
||||
<span><div class="nm">{{ a.name }}</div><div class="rl">{{ a.role }}</div></span>
|
||||
</div>
|
||||
<AvatarStack
|
||||
v-if="task.assignees.length"
|
||||
:people="assigneeStack"
|
||||
/>
|
||||
<div
|
||||
v-else
|
||||
class="ass-empty"
|
||||
>
|
||||
지정된 담당자가 없습니다.
|
||||
</div>
|
||||
</div>
|
||||
<div class="side-field">
|
||||
@@ -3154,30 +3161,9 @@ function badgeFor(name: string | undefined): { label: string; cls: string } {
|
||||
.status-badge.done .dot {
|
||||
background: var(--green);
|
||||
}
|
||||
.assignees {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5625rem;
|
||||
}
|
||||
.ass {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5625rem;
|
||||
}
|
||||
.ass .avatar {
|
||||
width: 1.625rem;
|
||||
height: 1.625rem;
|
||||
font-size: 0.6875rem;
|
||||
}
|
||||
.ass .nm {
|
||||
.ass-empty {
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.ass .rl {
|
||||
font-size: 0.719rem;
|
||||
color: var(--text-3);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.dl {
|
||||
display: flex;
|
||||
|
||||
Reference in New Issue
Block a user