feat: 현황판 카드 정보 표시 방식 개선

📋 Information Display Improvements:

1️⃣ 마감시간/담당자 섹션 개선:
-  '마감시간 | 담당부서 담당자' (복잡한 한 줄 표시)
-  마감시간: / 담당자: (깔끔한 분리 표시)
- 담당부서 제거 (불필요한 정보)
- 각각 별도 라인으로 구분하여 가독성 향상

2️⃣ 부적합 내용 섹션 개선:
-  단순한 텍스트 표시
-  제목과 본문 구분 표시
- 첫 번째 단어를 제목으로 강조 (font-semibold)
- 나머지 내용을 본문으로 표시 (작은 글씨)
- 회색 배경 + 파란색 좌측 테두리로 시각적 구분

🎨 Visual Enhancements:
- 마감시간/담당자: 라벨(text-xs) + 값(font-medium) 구조
- 부적합 내용: 배경 박스 + 좌측 강조 테두리
- 제목: font-semibold + 약간 큰 글씨
- 본문: 작은 글씨 + 줄간격 조정 (leading-relaxed)

📱 Better Readability:
- 정보 계층 구조 명확화
- 시각적 구분으로 스캔 가능성 향상
- 공간 효율성과 가독성 균형

Expected Result:
 더 깔끔한 정보 표시
 제목-본문 구분으로 내용 파악 용이
 마감시간/담당자 정보 명확화
 시각적 계층 구조 개선
This commit is contained in:
Hyungi Ahn
2025-10-26 11:06:33 +09:00
parent f373a16086
commit 2662b1138e

View File

@@ -526,7 +526,14 @@
<!-- 첫 번째 행 -->
<div>
<span class="text-gray-600 font-medium">부적합 내용</span>
<div class="text-gray-900 mt-1">${issue.final_description || issue.description || '중복작업 신고용'}</div>
<div class="mt-2 bg-gray-50 rounded-lg p-3 border-l-4 border-blue-200">
<div class="text-gray-900 font-semibold text-sm mb-1">
${(issue.final_description || issue.description || '중복작업 신고용').split(' ')[0] || '부적합'}
</div>
<div class="text-gray-700 text-xs leading-relaxed">
${(issue.final_description || issue.description || '중복작업 신고용').split(' ').slice(1).join(' ') || '상세 내용 없음'}
</div>
</div>
</div>
<div>
<span class="text-gray-600 font-medium">발생 날짜</span>
@@ -560,10 +567,15 @@
</div>
</div>
<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 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>
</div>