hyungi/M-Project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 현황판 카드 디자인을 세련된 모던 스타일로 대폭 개선

Browse Source 
🎨 Modern Card Design:
- ❌ 촌스러운 작은 이미지 → ✅ 세련된 큰 이미지 (16x16px)
- 그라데이션 배경과 테두리로 고급스러운 느낌
- 이미지 있을 때 초록색 상태 점 표시

🖼️ Enhanced Image Display:
- 크기: 8x8px → 16x16px (2배 확대)
- 그라데이션 배경 (파란색 계열)
- hover 효과: 그림자 + 확대 애니메이션
- 상태 표시: 우상단 초록색 점으로 이미지 존재 표시

🎯 Visual Improvements:
- No. 텍스트: 그라데이션 텍스트 효과
- 긴급 배지: 🔥 이모지 + 그라데이션 배경
- 원인 분류: 태그 아이콘 + 노란-주황 그라데이션
- 해결방안: 회색 배경 박스로 구분
- 진행 중 상태: 파란색 그라데이션 배경 + 테두리

🚀 Advanced Hover Effects:
- 카드 전체: 위로 이동 + 살짝 확대
- 고급 그림자 효과 (3단계 레이어)
- 파란색 글로우 효과
- 부드러운 cubic-bezier 애니메이션

🎨 Color Scheme:
- 배경: 미묘한 그라데이션 (흰색 → 연한 회색)
- 이미지: 파란색 계열 그라데이션
- 원인분류: 노란-주황 그라데이션
- 상태: 파란-인디고 그라데이션

Expected Result:
✅ 훨씬 세련되고 모던한 디자인
✅ 이미지 가독성 대폭 향상
✅ 고급스러운 hover 애니메이션
✅ 직관적인 시각적 피드백
This commit is contained in:
Hyungi Ahn
2025-10-26 11:03:20 +09:00
parent b94c6dff1a
commit f373a16086
1 changed files with 38 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
frontend/issues-dashboard.html
View File

@@ -27,16 +27,20 @@
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
/* 이슈 카드 스타일 (관리함 진행 중 스타일) */
/* 이슈 카드 스타일 (세련된 모던 스타일) */
.issue-card {
transition: all 0.3s ease;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border-left: 4px solid transparent;
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
}
.issue-card:hover {
transform: translateY(-4px);
transform: translateY(-8px) scale(1.02);
border-left-color: #3b82f6;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
box-shadow:
0 25px 50px -12px rgba(0, 0, 0, 0.15),
0 0 0 1px rgba(59, 130, 246, 0.1),
0 0 20px rgba(59, 130, 246, 0.1);
}
.issue-card label {
@@ -507,11 +511,14 @@
};
return `
<div class="issue-card bg-white rounded-lg border border-gray-200 p-4 hover:shadow-md transition-all duration-200">
<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-3">
<span class="text-lg font-bold text-blue-600">No.${issue.project_sequence_no || '-'}</span>
${isUrgent() ? '<span class="bg-red-100 text-red-800 text-xs font-medium px-2 py-1 rounded">긴급</span>' : ''}
<div class="flex justify-between items-center 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>
${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 그리드 -->
@@ -529,23 +536,25 @@
<!-- 두 번째 행 -->
<div>
<span class="text-gray-600 font-medium">이미지</span>
<div class="flex space-x-1 mt-1">
<div class="flex space-x-2 mt-2">
${issue.photo_path ? `
<div class="w-8 h-8 bg-gray-100 rounded border flex items-center justify-center cursor-pointer hover:bg-gray-200 transition-colors" onclick="openPhotoModal('${issue.photo_path}')">
<i class="fas fa-image text-gray-400 text-xs"></i>
<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="absolute -top-1 -right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></div>
</div>
` : `
<div class="w-8 h-8 bg-gray-100 rounded border flex items-center justify-center">
<i class="fas fa-image text-gray-300 text-xs"></i>
<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">
<i class="fas fa-image text-gray-400 text-lg opacity-50"></i>
</div>
`}
${issue.photo_path2 ? `
<div class="w-8 h-8 bg-gray-100 rounded border flex items-center justify-center cursor-pointer hover:bg-gray-200 transition-colors" onclick="openPhotoModal('${issue.photo_path2}')">
<i class="fas fa-image text-gray-400 text-xs"></i>
<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="absolute -top-1 -right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></div>
</div>
` : `
<div class="w-8 h-8 bg-gray-100 rounded border flex items-center justify-center">
<i class="fas fa-image text-gray-300 text-xs"></i>
<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">
<i class="fas fa-image text-gray-400 text-lg opacity-50"></i>
</div>
`}
</div>
@@ -561,21 +570,26 @@
<!-- 세 번째 행 -->
<div>
<span class="text-gray-600 font-medium">원인 분류</span>
<div class="mt-1">
<span class="inline-block bg-yellow-100 text-yellow-800 px-2 py-1 rounded text-xs">${getCategoryText(issue.final_category || issue.category)}</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>
<span class="text-gray-600 font-medium">해결 방안</span>
<div class="text-gray-900 mt-1">${issue.solution || '-'}</div>
<div class="text-gray-900 mt-1 bg-gray-50 rounded-lg p-2 min-h-[2.5rem] flex items-center">
${issue.solution || '<span class="text-gray-400 italic">미정</span>'}
</div>
</div>
</div>
<!-- 상태 -->
<div class="flex items-center justify-center mt-3 pt-3 border-t">
<div class="flex items-center space-x-2">
<div class="w-2 h-2 bg-blue-500 rounded-full animate-pulse"></div>
<span class="text-sm font-medium text-blue-600">진행 중</span>
<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>