feat: 현황판 카드 레이아웃 대폭 개선 - 실용성과 미관 향상
🎨 현황판 카드 레이아웃 개선사항: 1️⃣ 헤더 레이아웃 재구성: - ❌ 단순한 좌우 배치 → ✅ 좌측: No. + 원인분류 태그, 우측: 긴급 + 진행중 상태 - 원인분류를 No. 옆으로 이동하여 한눈에 파악 가능 - 진행중 상태를 우측 상단으로 이동하여 시각적 균형 개선 2️⃣ 이미지 미리보기 기능 추가: - ❌ 아이콘만 표시 → ✅ 실제 이미지 미리보기 - 크기 확대: 16x16px → 20x20px (25% 증가) - 실제 이미지 로드 실패시 fallback 아이콘 표시 - object-cover로 이미지 비율 유지하며 완전 채움 3️⃣ 레이아웃 최적화: - 불필요한 '원인 분류' 섹션 삭제 (헤더로 이동) - 하단 '진행 중' 상태 표시 제거 (헤더로 이동) - 해결방안을 col-span-2로 확장하여 공간 효율성 증대 - 전체적으로 더 깔끔하고 정보 밀도 높은 레이아웃 4️⃣ 시각적 개선: - 이미지 hover 효과: 그림자 + 확대 애니메이션 - 상태 표시 아이콘 추가 (시계 아이콘) - 그라데이션과 그림자 효과로 현대적 느낌 - 정보 계층 구조 명확화 🎯 사용성 개선 효과: - 이미지 내용을 바로 확인 가능 (클릭 전 미리보기) - 중요 정보(No., 원인분류, 상태)가 상단에 집중 - 공간 활용도 증가로 더 많은 정보 표시 - 시각적 노이즈 감소로 가독성 향상 🔧 기술적 개선: - img 태그 onerror 핸들링으로 안정성 확보 - CSS object-cover로 이미지 왜곡 방지 - 반응형 레이아웃 유지 - 접근성 개선 (alt 텍스트 추가) Expected Result: ✅ 실제 이미지 미리보기로 내용 파악 용이 ✅ 정보 배치 최적화로 스캔 효율성 증대 ✅ 깔끔하고 현대적인 카드 디자인 ✅ 공간 효율성과 정보 밀도 향상
This commit is contained in:
Hyungi Ahn
@@ -158,7 +158,10 @@
|
||||
<div class="dashboard-card text-white p-6 rounded-xl">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-blue-100 text-sm">전체 진행 중</p>
|
||||
<p class="text-blue-100 text-sm flex items-center space-x-1">
|
||||
<span>전체 진행 중</span>
|
||||
<div class="w-1.5 h-1.5 bg-blue-200 rounded-full animate-pulse"></div>
|
||||
</p>
|
||||
<p class="text-3xl font-bold" id="totalInProgress">0</p>
|
||||
</div>
|
||||
<i class="fas fa-tasks text-4xl text-blue-200"></i>
|
||||
@@ -168,7 +171,10 @@
|
||||
<div class="bg-gradient-to-br from-green-400 to-green-600 text-white p-6 rounded-xl dashboard-card">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-green-100 text-sm">오늘 신규</p>
|
||||
<p class="text-green-100 text-sm flex items-center space-x-1">
|
||||
<span>오늘 신규</span>
|
||||
<div class="w-1.5 h-1.5 bg-green-200 rounded-full animate-pulse"></div>
|
||||
</p>
|
||||
<p class="text-3xl font-bold" id="todayNew">0</p>
|
||||
</div>
|
||||
<i class="fas fa-plus-circle text-4xl text-green-200"></i>
|
||||
@@ -178,7 +184,10 @@
|
||||
<div class="bg-gradient-to-br from-yellow-400 to-orange-500 text-white p-6 rounded-xl dashboard-card">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-yellow-100 text-sm">지연 위험</p>
|
||||
<p class="text-yellow-100 text-sm flex items-center space-x-1">
|
||||
<span>지연 위험</span>
|
||||
<div class="w-1.5 h-1.5 bg-yellow-200 rounded-full animate-pulse"></div>
|
||||
</p>
|
||||
<p class="text-3xl font-bold" id="delayRisk">0</p>
|
||||
</div>
|
||||
<i class="fas fa-exclamation-triangle text-4xl text-yellow-200"></i>
|
||||
@@ -188,7 +197,10 @@
|
||||
<div class="bg-gradient-to-br from-purple-400 to-purple-600 text-white p-6 rounded-xl dashboard-card">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-purple-100 text-sm">활성 프로젝트</p>
|
||||
<p class="text-purple-100 text-sm flex items-center space-x-1">
|
||||
<span>활성 프로젝트</span>
|
||||
<div class="w-1.5 h-1.5 bg-purple-200 rounded-full animate-pulse"></div>
|
||||
</p>
|
||||
<p class="text-3xl font-bold" id="activeProjects">0</p>
|
||||
</div>
|
||||
<i class="fas fa-project-diagram text-4xl text-purple-200"></i>
|
||||
@@ -513,12 +525,23 @@
|
||||
return `
|
||||
<div class="issue-card bg-white rounded-xl border border-gray-200 p-5 hover:shadow-xl hover:border-blue-300 transition-all duration-300 transform hover:-translate-y-1">
|
||||
<!-- 헤더 -->
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<div class="flex items-center space-x-2">
|
||||
<span class="text-xl font-bold bg-gradient-to-r from-blue-600 to-blue-800 bg-clip-text text-transparent">No.${issue.project_sequence_no || '-'}</span>
|
||||
<div class="w-2 h-2 bg-blue-500 rounded-full animate-pulse"></div>
|
||||
<div class="w-2 h-2 bg-blue-500 rounded-full animate-pulse shadow-sm"></div>
|
||||
<span class="inline-flex items-center bg-gradient-to-r from-yellow-400 to-orange-400 text-white px-2 py-1 rounded-full text-xs font-medium shadow-sm">
|
||||
<i class="fas fa-tag mr-1"></i>
|
||||
${getCategoryText(issue.final_category || issue.category)}
|
||||
</span>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
${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>
|
||||
|
||||
<!-- 2x3 그리드 -->
|
||||
@@ -545,22 +568,28 @@
|
||||
<span class="text-gray-600 font-medium">이미지</span>
|
||||
<div class="flex space-x-2 mt-2">
|
||||
${issue.photo_path ? `
|
||||
<div class="relative w-16 h-16 bg-gradient-to-br from-blue-50 to-blue-100 rounded-lg border-2 border-blue-200 flex items-center justify-center cursor-pointer hover:shadow-lg hover:scale-105 transition-all duration-200" onclick="openPhotoModal('${issue.photo_path}')">
|
||||
<i class="fas fa-image text-blue-500 text-lg"></i>
|
||||
<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}')">
|
||||
<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>
|
||||
</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-16 h-16 bg-gradient-to-br from-gray-50 to-gray-100 rounded-lg border-2 border-gray-200 flex items-center justify-center">
|
||||
<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>
|
||||
`}
|
||||
${issue.photo_path2 ? `
|
||||
<div class="relative w-16 h-16 bg-gradient-to-br from-blue-50 to-blue-100 rounded-lg border-2 border-blue-200 flex items-center justify-center cursor-pointer hover:shadow-lg hover:scale-105 transition-all duration-200" onclick="openPhotoModal('${issue.photo_path2}')">
|
||||
<i class="fas fa-image text-blue-500 text-lg"></i>
|
||||
<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}')">
|
||||
<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>
|
||||
</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-16 h-16 bg-gradient-to-br from-gray-50 to-gray-100 rounded-lg border-2 border-gray-200 flex items-center justify-center">
|
||||
<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>
|
||||
`}
|
||||
@@ -580,30 +609,13 @@
|
||||
</div>
|
||||
|
||||
<!-- 세 번째 행 -->
|
||||
<div>
|
||||
<span class="text-gray-600 font-medium">원인 분류</span>
|
||||
<div class="mt-2">
|
||||
<span class="inline-flex items-center bg-gradient-to-r from-yellow-400 to-orange-400 text-white px-3 py-1 rounded-full text-xs font-medium shadow-sm">
|
||||
<i class="fas fa-tag mr-1"></i>
|
||||
${getCategoryText(issue.final_category || issue.category)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="col-span-2">
|
||||
<span class="text-gray-600 font-medium">해결 방안</span>
|
||||
<div class="text-gray-900 mt-1 bg-gray-50 rounded-lg p-2 min-h-[2.5rem] flex items-center">
|
||||
<div class="text-gray-900 mt-1 bg-gray-50 rounded-lg p-3 min-h-[3rem] flex items-center">
|
||||
${issue.solution || '<span class="text-gray-400 italic">미정</span>'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 상태 -->
|
||||
<div class="flex items-center justify-center mt-4 pt-4 border-t border-gray-100">
|
||||
<div class="flex items-center space-x-2 bg-gradient-to-r from-blue-50 to-indigo-50 px-4 py-2 rounded-full border border-blue-200">
|
||||
<div class="w-2 h-2 bg-gradient-to-r from-blue-500 to-indigo-500 rounded-full animate-pulse"></div>
|
||||
<span class="text-sm font-semibold bg-gradient-to-r from-blue-600 to-indigo-600 bg-clip-text text-transparent">진행 중</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user