feat: 현황판 카드 레이아웃 미세 조정 - 공간 효율성 개선
🎨 헤더 레이아웃 최적화: - 진행중 태그와 발생날짜를 한 줄로 배치 - '발생 날짜' → '발생:' 으로 간소화하여 공간 절약 - 우측 상단 공간 효율성 향상 📏 부적합명 크기 조정: - 텍스트 크기: text-lg → text-base (18px → 16px) - 패딩: py-2 → py-1.5 (8px → 6px) - 전체적으로 더 컴팩트한 느낌 🖼️ 이미지 크기 확대: - 이미지 크기: 16x16 → 20x20 (25% 증가) - 간격: space-x-2 → space-x-3 (8px → 12px) - 상태 표시 점: 2x2 → 3x3 (더 명확한 시각적 피드백) - 아이콘 크기: text-sm → text-lg (더 선명한 표시) 💡 공간 배치 개선: - 상단 영역 압축으로 하단 콘텐츠 영역 확보 - 이미지 가시성 향상으로 시각적 정보 전달력 증대 - 전체적인 정보 밀도 최적화 Expected Result: ✅ 헤더 영역 공간 효율성 향상 ✅ 이미지 가시성 25% 증가 ✅ 진행중/발생날짜 한눈에 파악 가능 ✅ 전체적으로 더 균형잡힌 레이아웃
This commit is contained in:
Hyungi Ahn
@@ -544,8 +544,8 @@
|
||||
<div class="w-2 h-2 bg-blue-500 rounded-full animate-pulse shadow-sm"></div>
|
||||
<span class="text-sm text-gray-600">${projectName}</span>
|
||||
</div>
|
||||
<div class="bg-blue-50 px-3 py-2 rounded-lg border-l-4 border-blue-400">
|
||||
<h3 class="text-lg font-bold text-blue-900">${getIssueTitle(issue)}</h3>
|
||||
<div class="bg-blue-50 px-3 py-1.5 rounded-lg border-l-4 border-blue-400">
|
||||
<h3 class="text-base font-bold text-blue-900">${getIssueTitle(issue)}</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col items-end space-y-2 ml-4">
|
||||
@@ -556,16 +556,16 @@
|
||||
<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 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>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2">
|
||||
<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 class="text-right">
|
||||
<div class="text-xs text-gray-500">발생 날짜</div>
|
||||
<div class="text-sm font-medium text-gray-900">${formatKSTDate(issue.report_date)}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -602,31 +602,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-2">
|
||||
<div class="flex space-x-3">
|
||||
${issue.photo_path ? `
|
||||
<div class="relative w-16 h-16 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-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-sm"></i>
|
||||
<i class="fas fa-image text-blue-500 text-lg"></i>
|
||||
</div>
|
||||
<div class="absolute -top-1 -right-1 w-2 h-2 bg-green-500 rounded-full border border-white"></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">
|
||||
<i class="fas fa-image text-gray-400 text-sm opacity-50"></i>
|
||||
<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 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-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-sm"></i>
|
||||
<i class="fas fa-image text-blue-500 text-lg"></i>
|
||||
</div>
|
||||
<div class="absolute -top-1 -right-1 w-2 h-2 bg-green-500 rounded-full border border-white"></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">
|
||||
<i class="fas fa-image text-gray-400 text-sm opacity-50"></i>
|
||||
<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>
|
||||
`}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user