feat: 현황판 카드 레이아웃 대폭 개선 - 정보 배치 최적화
🎨 헤더 레이아웃 재구성: - 원인 태그를 오른쪽으로 이동하여 균형감 향상 - 발생 날짜를 오른쪽 상단에 배치하여 시간 정보 강조 - 카테고리 한글 표시 (자재 누락, 설계 오류, 반입 불량, 검사 누락, 기타) 📊 콘텐츠 영역 2x2 그리드 재구성: - 상세 내용 | 해결 방안 (상단 나란히 배치) - 이미지 | 일정 & 담당 (하단 배치) 🎯 해결 방안 섹션 강화: - 녹색 테마로 해결책 강조 (bg-green-50, border-green-200) - 전구 아이콘으로 아이디어 시각화 - 상세 내용과 동등한 비중으로 배치 💼 일정 & 담당 UI 개선: - 마감시간: 오렌지 테마 카드 (긴급성 표현) - 담당자: 보라색 테마 카드 (책임감 표현) - 각각 아이콘과 색상으로 구분 - 컴팩트한 카드 형태로 가독성 향상 🖼️ 이미지 섹션 최적화: - 크기를 16x16으로 조정하여 공간 효율성 증대 - 상태 표시 점 크기 축소로 깔끔함 유지 🏷️ 카테고리 태그 개선: - 영어 → 한글 표시로 직관성 향상 - 오른쪽 배치로 시각적 균형 개선 Expected Result: ✅ 정보 우선순위에 따른 배치 최적화 ✅ 상세 내용과 해결 방안의 동등한 비중 ✅ 색상 코딩으로 정보 구분 명확화 ✅ 컴팩트하면서도 가독성 높은 레이아웃
This commit is contained in:
Hyungi Ahn
@@ -505,12 +505,10 @@
|
||||
// 카테고리 텍스트 변환
|
||||
const getCategoryText = (category) => {
|
||||
const categoryMap = {
|
||||
'quality': '품질',
|
||||
'safety': '안전',
|
||||
'environment': '환경',
|
||||
'process': '공정',
|
||||
'equipment': '장비',
|
||||
'material': '자재',
|
||||
'material_missing': '자재 누락',
|
||||
'design_error': '설계 오류',
|
||||
'incoming_defect': '반입 불량',
|
||||
'inspection_miss': '검사 누락',
|
||||
'etc': '기타'
|
||||
};
|
||||
return category ? categoryMap[category] || category : '-';
|
||||
@@ -540,99 +538,119 @@
|
||||
<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-start mb-4">
|
||||
<div class="flex flex-col space-y-2">
|
||||
<div class="flex flex-col space-y-2 flex-1">
|
||||
<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 shadow-sm"></div>
|
||||
<span class="text-sm text-gray-600">${projectName}</span>
|
||||
<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="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>
|
||||
</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 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>
|
||||
</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>
|
||||
|
||||
<!-- 2x3 그리드 -->
|
||||
<div class="grid grid-cols-2 gap-3 text-sm">
|
||||
<!-- 첫 번째 행 -->
|
||||
<!-- 2x2 그리드 -->
|
||||
<div class="grid grid-cols-2 gap-4 text-sm">
|
||||
<!-- 첫 번째 행: 상세 내용 | 해결 방안 -->
|
||||
<div>
|
||||
<div class="flex items-center mb-2">
|
||||
<i class="fas fa-align-left text-gray-500 mr-2"></i>
|
||||
<span class="text-gray-600 font-medium text-sm">상세 내용</span>
|
||||
</div>
|
||||
<div class="bg-gray-50 rounded-lg p-3 border border-gray-200">
|
||||
<div class="bg-gray-50 rounded-lg p-3 border border-gray-200 min-h-[80px]">
|
||||
<div class="text-gray-600 text-sm leading-relaxed italic">
|
||||
${getIssueDetail(issue)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-gray-600 font-medium">발생 날짜</span>
|
||||
<div class="text-gray-900 mt-1">${formatKSTDate(issue.report_date)}</div>
|
||||
<div class="flex items-center mb-2">
|
||||
<i class="fas fa-lightbulb text-green-500 mr-2"></i>
|
||||
<span class="text-gray-600 font-medium text-sm">해결 방안</span>
|
||||
</div>
|
||||
<div class="bg-green-50 rounded-lg p-3 border border-green-200 min-h-[80px]">
|
||||
<div class="text-green-700 text-sm leading-relaxed">
|
||||
${issue.solution || '<span class="text-gray-400 italic">미정</span>'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 두 번째 행 -->
|
||||
<!-- 두 번째 행: 이미지 | 마감시간/담당자 -->
|
||||
<div>
|
||||
<span class="text-gray-600 font-medium">이미지</span>
|
||||
<div class="flex space-x-2 mt-2">
|
||||
<div class="flex items-center mb-2">
|
||||
<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">
|
||||
${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-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}')">
|
||||
<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-sm"></i>
|
||||
</div>
|
||||
<div class="absolute -top-1 -right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></div>
|
||||
<div class="absolute -top-1 -right-1 w-2 h-2 bg-green-500 rounded-full border 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-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>
|
||||
`}
|
||||
${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-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}')">
|
||||
<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-sm"></i>
|
||||
</div>
|
||||
<div class="absolute -top-1 -right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></div>
|
||||
<div class="absolute -top-1 -right-1 w-2 h-2 bg-green-500 rounded-full border 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-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>
|
||||
`}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="space-y-2">
|
||||
<div>
|
||||
<span class="text-gray-500 text-xs">마감시간:</span>
|
||||
<div class="text-gray-900 font-medium">${formatKSTDate(issue.expected_completion_date)}</div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-gray-500 text-xs">담당자:</span>
|
||||
<div class="text-gray-900 font-medium">${issue.responsible_person || '-'}</div>
|
||||
</div>
|
||||
<div class="flex items-center mb-2">
|
||||
<i class="fas fa-user-clock text-purple-500 mr-2"></i>
|
||||
<span class="text-gray-600 font-medium text-sm">일정 & 담당</span>
|
||||
</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-3 min-h-[3rem] flex items-center">
|
||||
${issue.solution || '<span class="text-gray-400 italic">미정</span>'}
|
||||
<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="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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user