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

feat: 현황판 카드를 간결한 읽기 전용 2x3 그리드로 변경

Browse Source 
🎯 Simplified Card Layout:
- ❌ 긴 편집 가능한 카드 → ✅ 간결한 읽기 전용 카드
- 2x3 그리드 형식으로 정보 압축
- 카드 높이 대폭 단축

📋 Grid Structure (2 columns x 3 rows):
Row 1: 부적합 내용 | 발생 날짜
Row 2: 이미지 | 마감시간 + 담당부서/담당자
Row 3: 원인 분류 | 해결 방안
Bottom: 상태 (진행 중)

🎨 Visual Improvements:
- 작은 이미지 아이콘 (8x8px)
- 원인 분류: 노란색 배지
- 마감시간과 담당 정보 결합
- 중앙 정렬된 상태 표시

📱 Compact Design:
- 패딩 축소 (p-6 → p-4)
- 텍스트 크기 최적화 (text-sm)
- 불필요한 여백 제거
- 한눈에 들어오는 정보 배치

🔧 Read-Only Features:
- 모든 필드 읽기 전용
- 편집 버튼 제거
- 사진 클릭 시 모달 확대만 가능
- 깔끔한 정보 표시

Expected Result:
✅ 훨씬 간결한 카드 디자인
✅ 한눈에 들어오는 정보 배치
✅ 읽기 전용 모드
✅ 모바일 친화적 크기
This commit is contained in:
Hyungi Ahn
2025-10-26 10:58:16 +09:00
parent 2a5455b221
commit b94c6dff1a
1 changed files with 47 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
frontend/issues-dashboard.html
View File

@@ -507,118 +507,76 @@
};
return `
<div class="issue-card bg-white rounded-lg border border-gray-200 p-6 hover:shadow-md transition-all duration-200">
<div class="issue-card bg-white rounded-lg border border-gray-200 p-4 hover:shadow-md transition-all duration-200">
<!-- 헤더 -->
<div class="flex justify-between items-start mb-4">
<div class="flex items-center space-x-2">
<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>
<div class="flex items-center space-x-2">
<button class="bg-blue-500 text-white px-3 py-1 rounded text-sm hover:bg-blue-600 transition-colors">
<i class="fas fa-edit mr-1"></i>저장
</button>
<button class="bg-green-500 text-white px-3 py-1 rounded text-sm hover:bg-green-600 transition-colors">
<i class="fas fa-check mr-1"></i>완료처리
</button>
</div>
<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>
<!-- 업로드 사진 (맨 위로) -->
${issue.photo_path || issue.photo_path2 ? `
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-2">업로드 사진</label>
<div class="flex space-x-2">
<!-- 2x3 그리드 -->
<div class="grid grid-cols-2 gap-3 text-sm">
<!-- 첫 번째 행 -->
<div>
<span class="text-gray-600 font-medium">부적합 내용</span>
<div class="text-gray-900 mt-1">${issue.final_description || issue.description || '중복작업 신고용'}</div>
</div>
<div>
<span class="text-gray-600 font-medium">발생 날짜</span>
<div class="text-gray-900 mt-1">${formatKSTDate(issue.report_date)}</div>
</div>
<!-- 두 번째 행 -->
<div>
<span class="text-gray-600 font-medium">이미지</span>
<div class="flex space-x-1 mt-1">
${issue.photo_path ? `
<div class="w-20 h-20 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"></i>
<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>
` : `
<div class="w-20 h-20 bg-gray-100 rounded border flex items-center justify-center">
<span class="text-xs text-gray-400">사진 없음</span>
<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>
`}
${issue.photo_path2 ? `
<div class="w-20 h-20 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"></i>
<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>
` : `
<div class="w-20 h-20 bg-gray-100 rounded border flex items-center justify-center">
<span class="text-xs text-gray-400">사진 없음</span>
<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>
`}
</div>
</div>
` : `
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-2">업로드 사진</label>
<div class="flex space-x-2">
<div class="w-20 h-20 bg-gray-100 rounded border flex items-center justify-center">
<span class="text-xs text-gray-400">사진 없음</span>
</div>
<div class="w-20 h-20 bg-gray-100 rounded border flex items-center justify-center">
<span class="text-xs text-gray-400">사진 없음</span>
</div>
</div>
</div>
`}
<!-- 부적합 내용 -->
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-1">부적합 내용</label>
<div class="text-sm text-gray-900">${issue.final_description || issue.description || '중복작업 신고용'}</div>
</div>
<!-- 원인 분류 -->
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-1">원인 분류</label>
<span class="inline-block bg-yellow-100 text-yellow-800 px-2 py-1 rounded text-sm">${getCategoryText(issue.final_category || issue.category)}</span>
</div>
<!-- 관리 정보 -->
<div class="space-y-3 border-t pt-4">
<div class="grid grid-cols-2 gap-3">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">💡 해결방안</label>
<textarea class="w-full text-sm border border-gray-300 rounded px-3 py-2 resize-none" rows="2" placeholder="해결 방안을 입력하세요...">${issue.solution || ''}</textarea>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">🏢 담당부서</label>
<select class="w-full text-sm border border-gray-300 rounded px-3 py-2">
<option value="">선택하세요</option>
<option value="production" ${issue.responsible_department === 'production' ? 'selected' : ''}>생산</option>
<option value="quality" ${issue.responsible_department === 'quality' ? 'selected' : ''}>품질</option>
<option value="purchasing" ${issue.responsible_department === 'purchasing' ? 'selected' : ''}>구매</option>
<option value="design" ${issue.responsible_department === 'design' ? 'selected' : ''}>설계</option>
<option value="sales" ${issue.responsible_department === 'sales' ? 'selected' : ''}>영업</option>
</select>
</div>
</div>
<div class="grid grid-cols-2 gap-3">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">👤 담당자</label>
<input type="text" class="w-full text-sm border border-gray-300 rounded px-3 py-2" placeholder="담당자 이름" value="${issue.responsible_person || ''}">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">📅 조치 예상일</label>
<input type="date" class="w-full text-sm border border-gray-300 rounded px-3 py-2" value="${issue.expected_completion_date ? issue.expected_completion_date.split('T')[0] : '2025-10-26'}">
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">원인부서</label>
<div class="text-sm text-gray-900">${getDepartmentText(issue.cause_department)}</div>
<span class="text-gray-600 font-medium">마감시간 | 담당부서 담당자</span>
<div class="text-gray-900 mt-1">
<div>${formatKSTDate(issue.expected_completion_date)}</div>
<div class="text-xs text-gray-600">${getDepartmentText(issue.responsible_department)} ${issue.responsible_person || '-'}</div>
</div>
</div>
<!-- 세 번째 행 -->
<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>
</div>
<div>
<span class="text-gray-600 font-medium">해결 방안</span>
<div class="text-gray-900 mt-1">${issue.solution || '-'}</div>
</div>
</div>
<!-- 진행 중 표시 -->
<div class="border-t pt-4 mt-4 flex items-center justify-between">
<!-- 상태 -->
<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>
<span class="text-xs text-gray-500">신고일: ${formatKSTDate(issue.report_date)}</span>
</div>
</div>
`;