주의 필요 항목 UI 개선

- 카드 그리드 최대 3개로 제한 (xl:grid-cols-4 제거)
- 이슈/태스크 클릭 시 제목 전체 표시 (truncate 토글)
- 상세 정보 박스 레이아웃 변경: 마감 상단, 프로젝트 하단(한 줄)
This commit is contained in:
2025-12-16 10:16:36 +09:00
parent ea3c403521
commit fe2e4b8702

View File

@@ -141,7 +141,7 @@ class="day-card w-full text-left p-3 rounded-lg border-2 transition-all hover:sh
</span>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
@php
// 이슈를 팀별로 그룹핑 (team_display 사용)
$issuesByTeam = $attentionIssues['items']->groupBy(fn($issue) => $issue->team_display ?? '팀 미지정');
@@ -219,36 +219,36 @@ class="p-0.5 text-green-500 hover:bg-green-50 rounded" title="해결">
<!-- 펼쳐지는 상세 정보: 회사//담당자 -->
<div class="attention-item-full hidden mt-1.5 text-xs bg-red-50 rounded p-2">
<div class="grid grid-cols-2 gap-x-3 gap-y-1">
@if($issue->due_date)
<div class="flex items-center gap-1">
<span class="text-gray-400">마감:</span>
<span class="text-gray-700 font-medium">{{ $issue->due_date->format('m/d') }}</span>
</div>
@endif
<div class="flex items-center gap-1">
<span class="text-gray-400">상태:</span>
<span class="px-1.5 py-0.5 text-[10px] rounded {{ $issue->status === 'open' ? 'bg-red-100 text-red-700' : 'bg-yellow-100 text-yellow-700' }}">
{{ $issue->status === 'open' ? '대기중' : '처리중' }}
</span>
</div>
<div class="flex items-center gap-1 truncate">
<span class="text-gray-400">프로젝트:</span>
<span class="text-gray-700 truncate">{{ $issue->project?->name ?? '-' }}</span>
</div>
@if($issue->client)
<div class="flex items-center gap-1 truncate">
<span class="text-gray-400">회사:</span>
<span class="text-gray-700 truncate">{{ $issue->client }}</span>
</div>
@endif
<div class="flex items-center gap-1 truncate">
<span class="text-gray-400">:</span>
<span class="text-gray-700 truncate">{{ $issue->team_display ?? '-' }}</span>
</div>
<div class="flex items-center gap-1 truncate">
<span class="text-gray-400">담당:</span>
<span class="text-gray-700 truncate">{{ $issue->assignee_display ?? '-' }}</span>
</div>
@if($issue->due_date)
<div class="flex items-center gap-1">
<span class="text-gray-400">마감:</span>
<span class="text-gray-700">{{ $issue->due_date->format('m/d') }}</span>
<span class="text-gray-400">회사:</span>
<span class="text-gray-700">{{ $issue->client }}</span>
</div>
@endif
<div class="flex items-center gap-1">
<span class="text-gray-400">:</span>
<span class="text-gray-700">{{ $issue->team_display ?? '-' }}</span>
</div>
<div class="flex items-center gap-1">
<span class="text-gray-400">담당:</span>
<span class="text-gray-700">{{ $issue->assignee_display ?? '-' }}</span>
</div>
<div class="flex items-center gap-1 col-span-2">
<span class="text-gray-400">프로젝트:</span>
<span class="text-gray-700">{{ $issue->project?->name ?? '-' }}</span>
</div>
</div>
</div>
</div>
@@ -321,30 +321,30 @@ class="p-0.5 text-green-500 hover:bg-green-50 rounded" title="완료">
<!-- 펼쳐지는 상세 정보 -->
<div class="attention-item-full hidden mt-1.5 text-xs bg-orange-50 rounded p-2">
<div class="grid grid-cols-2 gap-x-3 gap-y-1">
@if($task->due_date)
<div class="flex items-center gap-1">
<span class="text-gray-400">마감:</span>
<span class="text-gray-700 font-medium">{{ $task->due_date->format('m/d') }}</span>
</div>
@endif
<div class="flex items-center gap-1">
<span class="text-gray-400">상태:</span>
<span class="px-1.5 py-0.5 text-[10px] rounded {{ $task->status === 'todo' ? 'bg-gray-100 text-gray-700' : 'bg-yellow-100 text-yellow-700' }}">
{{ $task->status === 'todo' ? '예정' : '진행중' }}
</span>
</div>
<div class="flex items-center gap-1 truncate">
<span class="text-gray-400">프로젝트:</span>
<span class="text-gray-700 truncate">{{ $task->project?->name ?? '-' }}</span>
</div>
<div class="flex items-center gap-1 truncate">
<span class="text-gray-400">담당:</span>
<span class="text-gray-700 truncate">{{ $task->assignee?->name ?? '-' }}</span>
</div>
@if($task->due_date)
<div class="flex items-center gap-1">
<span class="text-gray-400">마감:</span>
<span class="text-gray-700">{{ $task->due_date->format('m/d') }}</span>
<span class="text-gray-400">담당:</span>
<span class="text-gray-700">{{ $task->assignee?->name ?? '-' }}</span>
</div>
@endif
<div class="flex items-center gap-1">
<span class="text-gray-400">우선순위:</span>
<span class="text-gray-700">{{ $task->priority === 'high' ? '높음' : ($task->priority === 'medium' ? '보통' : '낮음') }}</span>
</div>
<div class="flex items-center gap-1 col-span-2">
<span class="text-gray-400">프로젝트:</span>
<span class="text-gray-700">{{ $task->project?->name ?? '-' }}</span>
</div>
</div>
</div>
</div>
@@ -1216,10 +1216,14 @@ function toggleAttentionItem(textEl) {
const fullDiv = itemDiv.querySelector('.attention-item-full');
if (fullDiv.classList.contains('hidden')) {
// 펼치기: 상세 정보 표시 + 제목 전체 표시
fullDiv.classList.remove('hidden');
textEl.classList.remove('truncate');
textEl.classList.add('text-red-600');
} else {
// 접기: 상세 정보 숨김 + 제목 한 줄로
fullDiv.classList.add('hidden');
textEl.classList.add('truncate');
textEl.classList.remove('text-red-600');
}
}