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

feat: 부적합명과 상세 내용 UI 차별화로 가독성 향상

Browse Source 
🎨 부적합명 강조 디자인:
- 파란색 배경 박스 (bg-blue-50)
- 왼쪽 파란색 보더 (border-l-4 border-blue-400)
- 진한 파란색 텍스트 (text-blue-900)
- 볼드 폰트로 중요도 강조

📝 상세 내용 보조 디자인:
- 회색 배경 (bg-gray-50)
- 얇은 회색 테두리 (border border-gray-200)
- 회색 이탤릭 텍스트 (text-gray-600 italic)
- 아이콘과 라벨로 구분 명확화

💡 시각적 계층 구조:
1️⃣ 부적합명: 눈에 띄는 파란색 강조 박스
2️⃣ 상세 내용: 차분한 회색 보조 정보

🔧 적용 범위:
- 현황판 카드 레이아웃
- 관리함 진행중 카드 레이아웃
- 일관된 디자인 언어 적용

Expected Result:
✅ 부적합명이 즉시 눈에 들어옴
✅ 상세 내용과 명확한 구분
✅ 정보 우선순위가 시각적으로 명확
✅ 전체적인 가독성 향상
This commit is contained in:
Hyungi Ahn
2025-10-26 11:50:54 +09:00
parent 6654cf62bd
commit 81699a0270
2 changed files with 20 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/issues-dashboard.html
View File

@@ -550,7 +550,9 @@
${getCategoryText(issue.final_category || issue.category)} ${getCategoryText(issue.final_category || issue.category)}
</span> </span>
</div> </div>
<h3 class="text-lg font-semibold text-gray-900">${getIssueTitle(issue)}</h3> <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>
<div class="flex items-center space-x-2"> <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>' : ''} ${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>' : ''}
@@ -566,9 +568,12 @@
<div class="grid grid-cols-2 gap-3 text-sm"> <div class="grid grid-cols-2 gap-3 text-sm">
<!-- 첫 번째 행 --> <!-- 첫 번째 행 -->
<div> <div>
<span class="text-gray-600 font-medium">상세 내용</span> <div class="flex items-center mb-2">
<div class="mt-2 bg-gray-50 rounded-lg p-3 border-l-4 border-blue-200"> <i class="fas fa-align-left text-gray-500 mr-2"></i>
<div class="text-gray-700 text-sm leading-relaxed"> <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="text-gray-600 text-sm leading-relaxed italic">
${getIssueDetail(issue)} ${getIssueDetail(issue)}
</div> </div>
</div> </div>

15
frontend/issues-management.html
View File

@@ -720,7 +720,9 @@
</div> </div>
<span class="text-sm text-gray-600">${project ? project.project_name : '프로젝트 미지정'}</span> <span class="text-sm text-gray-600">${project ? project.project_name : '프로젝트 미지정'}</span>
</div> </div>
<h3 class="text-lg font-semibold text-gray-900">${getIssueTitle(issue)}</h3> <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>
<div class="flex space-x-2"> <div class="flex space-x-2">
<button onclick="saveIssueChanges(${issue.id})" class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"> <button onclick="saveIssueChanges(${issue.id})" class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors">
@@ -737,9 +739,14 @@
<!-- 왼쪽: 기본 정보 --> <!-- 왼쪽: 기본 정보 -->
<div class="space-y-4"> <div class="space-y-4">
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-2">상세 내용</label> <div class="flex items-center mb-2">
<div class="p-3 bg-gray-50 rounded-lg text-gray-800 min-h-[80px]"> <i class="fas fa-align-left text-gray-500 mr-2"></i>
${getIssueDetail(issue)} <label class="text-sm font-medium text-gray-700">상세 내용</label>
</div>
<div class="p-3 bg-gray-50 rounded-lg border border-gray-200 min-h-[80px]">
<div class="text-gray-600 text-sm leading-relaxed italic">
${getIssueDetail(issue)}
</div>
</div> </div>
</div> </div>