feat: 현황판 카드 최종 UI 완성 - 시각적 임팩트 극대화
🖼️ 이미지 크기 최대 확장: - 이미지 크기: 20x20 → 24x24 (20% 추가 증가) - 아이콘 크기: text-lg → text-xl (더 선명한 표시) - 카드 영역을 최대한 활용하여 시각적 정보 전달력 극대화 🎯 진행중 태그 프리미엄 디자인: - 배경: 연한 파란색 → 진한 파란색 그라데이션 (blue-500 to blue-600) - 텍스트: 그라데이션 → 흰색 볼드체 (더 강한 대비) - 패딩: px-3 py-1 → px-4 py-1.5 (더 풍성한 느낌) - 그림자: shadow-sm → shadow-md (입체감 강화) - 아이콘: 정적 시계 → 회전하는 톱니바퀴 (fa-cog fa-spin) - 상태 점: 파란색 → 흰색 (더 명확한 대비) 📅 발생날짜 독립 디자인: - 회색 배경 캡슐로 분리하여 정보 구분 명확화 - 진행중 태그와 시각적으로 분리되어 가독성 향상 👥 일정 & 담당 순서 변경: - 담당자 → 마감시간 순으로 재배치 - 사람 중심의 정보 우선 표시 - 패딩 증가 (p-2 → p-3)로 더 여유로운 느낌 🎨 전체적인 시각적 개선: - 더 강한 색상 대비로 정보 구분 명확화 - 애니메이션 효과로 생동감 추가 - 공간 활용도 최적화로 정보 밀도 향상 Expected Result: ✅ 이미지 가시성 44% 향상 (16→24px) ✅ 진행중 상태의 강력한 시각적 임팩트 ✅ 담당자 우선 표시로 책임 소재 명확화 ✅ 전체적으로 더 프로페셔널한 느낌
This commit is contained in:
Hyungi Ahn
@@ -549,16 +549,15 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col items-end space-y-2 ml-4">
|
||||
<div class="flex items-center space-x-2">
|
||||
${isUrgent() ? '<span class="bg-gradient-to-r from-red-500 to-red-600 text-white text-xs font-medium px-3 py-1 rounded-full shadow-sm">🔥 긴급</span>' : ''}
|
||||
<div class="flex items-center space-x-1 bg-gradient-to-r from-blue-50 to-blue-100 px-3 py-1 rounded-full border border-blue-200 shadow-sm">
|
||||
<div class="w-1.5 h-1.5 bg-blue-500 rounded-full animate-pulse"></div>
|
||||
<span class="text-xs font-semibold bg-gradient-to-r from-blue-600 to-blue-800 bg-clip-text text-transparent">진행 중</span>
|
||||
<i class="fas fa-clock text-blue-500 text-xs"></i>
|
||||
<div class="flex items-center space-x-3">
|
||||
${isUrgent() ? '<span class="bg-gradient-to-r from-red-500 to-red-600 text-white text-xs font-bold px-4 py-1.5 rounded-full shadow-md">🔥 긴급</span>' : ''}
|
||||
<div class="flex items-center space-x-2 bg-gradient-to-r from-blue-500 to-blue-600 text-white px-4 py-1.5 rounded-full shadow-md">
|
||||
<div class="w-2 h-2 bg-white rounded-full animate-pulse"></div>
|
||||
<span class="text-xs font-bold">진행 중</span>
|
||||
<i class="fas fa-cog fa-spin text-xs"></i>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<span class="text-xs text-gray-500 mr-1">발생:</span>
|
||||
<span class="text-xs font-medium text-gray-900">${formatKSTDate(issue.report_date)}</span>
|
||||
<div class="bg-gray-100 px-3 py-1 rounded-full">
|
||||
<span class="text-xs text-gray-600 font-medium">발생: ${formatKSTDate(issue.report_date)}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2">
|
||||
@@ -602,31 +601,31 @@
|
||||
<i class="fas fa-camera text-blue-500 mr-2"></i>
|
||||
<span class="text-gray-600 font-medium text-sm">이미지</span>
|
||||
</div>
|
||||
<div class="flex space-x-3">
|
||||
<div class="flex space-x-2">
|
||||
${issue.photo_path ? `
|
||||
<div class="relative w-20 h-20 rounded-lg border-2 border-blue-200 overflow-hidden cursor-pointer hover:shadow-lg hover:scale-105 transition-all duration-200" onclick="openPhotoModal('${issue.photo_path}')">
|
||||
<div class="relative w-24 h-24 rounded-lg border-2 border-blue-200 overflow-hidden cursor-pointer hover:shadow-lg hover:scale-105 transition-all duration-200" onclick="openPhotoModal('${issue.photo_path}')">
|
||||
<img src="${issue.photo_path}" alt="부적합 사진 1" class="w-full h-full object-cover" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-blue-50 to-blue-100 flex items-center justify-center" style="display: none;">
|
||||
<i class="fas fa-image text-blue-500 text-lg"></i>
|
||||
<i class="fas fa-image text-blue-500 text-xl"></i>
|
||||
</div>
|
||||
<div class="absolute -top-1 -right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></div>
|
||||
</div>
|
||||
` : `
|
||||
<div class="w-20 h-20 bg-gradient-to-br from-gray-50 to-gray-100 rounded-lg border-2 border-gray-200 flex items-center justify-center">
|
||||
<i class="fas fa-image text-gray-400 text-lg opacity-50"></i>
|
||||
<div class="w-24 h-24 bg-gradient-to-br from-gray-50 to-gray-100 rounded-lg border-2 border-gray-200 flex items-center justify-center">
|
||||
<i class="fas fa-image text-gray-400 text-xl opacity-50"></i>
|
||||
</div>
|
||||
`}
|
||||
${issue.photo_path2 ? `
|
||||
<div class="relative w-20 h-20 rounded-lg border-2 border-blue-200 overflow-hidden cursor-pointer hover:shadow-lg hover:scale-105 transition-all duration-200" onclick="openPhotoModal('${issue.photo_path2}')">
|
||||
<div class="relative w-24 h-24 rounded-lg border-2 border-blue-200 overflow-hidden cursor-pointer hover:shadow-lg hover:scale-105 transition-all duration-200" onclick="openPhotoModal('${issue.photo_path2}')">
|
||||
<img src="${issue.photo_path2}" alt="부적합 사진 2" class="w-full h-full object-cover" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-blue-50 to-blue-100 flex items-center justify-center" style="display: none;">
|
||||
<i class="fas fa-image text-blue-500 text-lg"></i>
|
||||
<i class="fas fa-image text-blue-500 text-xl"></i>
|
||||
</div>
|
||||
<div class="absolute -top-1 -right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></div>
|
||||
</div>
|
||||
` : `
|
||||
<div class="w-20 h-20 bg-gradient-to-br from-gray-50 to-gray-100 rounded-lg border-2 border-gray-200 flex items-center justify-center">
|
||||
<i class="fas fa-image text-gray-400 text-lg opacity-50"></i>
|
||||
<div class="w-24 h-24 bg-gradient-to-br from-gray-50 to-gray-100 rounded-lg border-2 border-gray-200 flex items-center justify-center">
|
||||
<i class="fas fa-image text-gray-400 text-xl opacity-50"></i>
|
||||
</div>
|
||||
`}
|
||||
</div>
|
||||
@@ -637,20 +636,20 @@
|
||||
<span class="text-gray-600 font-medium text-sm">일정 & 담당</span>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<div class="bg-orange-50 rounded-lg p-2 border border-orange-200">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-orange-600 text-xs font-medium">마감시간</span>
|
||||
<i class="fas fa-calendar-alt text-orange-500 text-xs"></i>
|
||||
</div>
|
||||
<div class="text-orange-800 font-semibold text-sm mt-1">${formatKSTDate(issue.expected_completion_date)}</div>
|
||||
</div>
|
||||
<div class="bg-purple-50 rounded-lg p-2 border border-purple-200">
|
||||
<div class="bg-purple-50 rounded-lg p-3 border border-purple-200">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-purple-600 text-xs font-medium">담당자</span>
|
||||
<i class="fas fa-user text-purple-500 text-xs"></i>
|
||||
</div>
|
||||
<div class="text-purple-800 font-semibold text-sm mt-1">${issue.responsible_person || '-'}</div>
|
||||
</div>
|
||||
<div class="bg-orange-50 rounded-lg p-3 border border-orange-200">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-orange-600 text-xs font-medium">마감시간</span>
|
||||
<i class="fas fa-calendar-alt text-orange-500 text-xs"></i>
|
||||
</div>
|
||||
<div class="text-orange-800 font-semibold text-sm mt-1">${formatKSTDate(issue.expected_completion_date)}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user