주의 필요 항목 UI 개선
- 카드 그리드 최대 3개로 제한 (xl:grid-cols-4 제거) - 이슈/태스크 클릭 시 제목 전체 표시 (truncate 토글) - 상세 정보 박스 레이아웃 변경: 마감 상단, 프로젝트 하단(한 줄)
This commit is contained in:
@@ -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');
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user