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

feat: 수신함에 사진 미리보기 및 확대 기능 추가 + 대시보드 3개 카드로 간소화

Browse Source 
🖼️ Photo Preview & Modal Features:
- 수신함 카드에 사진 썸네일 표시 (150x100px)
- photo_path, photo_path2 모두 지원 (최대 2장)
- 클릭 시 전체화면 모달로 원본 사진 확대
- 호버 효과: 1.05배 확대 애니메이션

🔍 Enhanced Photo Viewing:
- 어두운 배경 (80% 투명도) 모달
- 원본 사진을 90% 크기로 표시
- ESC 키 또는 배경 클릭으로 모달 닫기
- 우상단 X 버튼으로 닫기

📊 Dashboard Simplification:
- 4개 카드 → 3개 카드로 간소화
- '전체' 카드 제거, 핵심 지표만 유지
- 금일 신규, 금일 처리, 미해결만 표시
- grid-cols-4 → grid-cols-3 레이아웃 변경

🎨 Visual Improvements:
- 사진 갤러리 레이아웃 (flex, gap: 8px)
- 반응형 사진 표시 (object-fit: cover)
- 부드러운 트랜지션 효과
- 모바일 친화적 사진 크기

🔧 Code Enhancements:
- openPhotoModal(), closePhotoModal() 함수
- handleEscKey() 키보드 이벤트 처리
- 사진 경로 검증 및 오류 처리
- 통계 함수에서 totalCount 관련 코드 정리

🚀 User Experience:
- 직관적인 사진 확인 방식
- 빠른 사진 미리보기
- 키보드 단축키 지원 (ESC)
- 터치 친화적 인터페이스

Expected Result:
✨ 수신함에서 바로 사진 확인 가능
✨ 클릭 한 번으로 사진 확대 보기
✨ 간소화된 3개 핵심 통계 카드
✨ 향상된 시각적 정보 제공
This commit is contained in:
Hyungi Ahn
2025-10-25 13:21:59 +09:00
parent 968afd95a6
commit 7018d381b5
1 changed files with 95 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
frontend/issues-inbox.html
View File

@@ -111,6 +111,60 @@
opacity: 1;
transform: translateY(0);
}
/* 사진 미리보기 스타일 */
.photo-preview {
max-width: 150px;
max-height: 100px;
object-fit: cover;
border-radius: 8px;
cursor: pointer;
transition: transform 0.2s ease;
}
.photo-preview:hover {
transform: scale(1.05);
}
.photo-gallery {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 8px;
}
.photo-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
.photo-modal img {
max-width: 90%;
max-height: 90%;
object-fit: contain;
border-radius: 8px;
}
.photo-modal .close-btn {
position: absolute;
top: 20px;
right: 20px;
background: rgba(255, 255, 255, 0.9);
border: none;
border-radius: 50%;
width: 40px;
height: 40px;
cursor: pointer;
font-size: 18px;
}
</style>
</head>
<body class="bg-gray-50 min-h-screen">
@@ -145,16 +199,7 @@
</div>
<!-- 통계 카드 -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
<div class="bg-blue-50 p-4 rounded-lg">
<div class="flex items-center">
<i class="fas fa-list text-blue-500 text-xl mr-3"></i>
<div>
<p class="text-sm text-blue-600">전체</p>
<p class="text-2xl font-bold text-blue-700" id="totalCount">0</p>
</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="bg-yellow-50 p-4 rounded-lg">
<div class="flex items-center">
<i class="fas fa-plus-circle text-yellow-500 text-xl mr-3"></i>
@@ -228,6 +273,12 @@
</div>
</main>
<!-- 사진 확대 모달 -->
<div id="photoModal" class="photo-modal hidden" onclick="closePhotoModal()">
<button class="close-btn" onclick="closePhotoModal()">×</button>
<img id="modalPhoto" src="" alt="확대된 사진">
</div>
<!-- 폐기 모달 -->
<div id="disposeModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50">
<div class="flex items-center justify-center min-h-screen p-4">
@@ -729,6 +780,14 @@
</div>` : ''}
</div>
<!-- 사진 미리보기 -->
${photoCount > 0 ? `
<div class="photo-gallery">
${issue.photo_path ? `<img src="${issue.photo_path}" class="photo-preview" onclick="openPhotoModal('${issue.photo_path}')" alt="첨부 사진 1">` : ''}
${issue.photo_path2 ? `<img src="${issue.photo_path2}" class="photo-preview" onclick="openPhotoModal('${issue.photo_path2}')" alt="첨부 사진 2">` : ''}
</div>
` : ''}
<!-- 워크플로우 액션 버튼들 -->
<div class="flex items-center space-x-2 mt-3">
<button onclick="openDisposeModal(${issue.id})"
@@ -759,9 +818,6 @@
const todayStart = getKSTToday();
console.log('📅 KST 기준 오늘 시작:', todayStart);
// 전체: 수신함에 남아있는 목록 개수 (pending_review 상태)
const totalCount = issues.length;
// 금일 신규: 오늘 올라온 목록 숫자 (확인된 것 포함) - KST 기준
const todayNewCount = issues.filter(issue => {
const reportDate = getKSTDate(new Date(issue.report_date));
@@ -794,13 +850,11 @@
}).length;
// 통계 업데이트
document.getElementById('totalCount').textContent = totalCount;
document.getElementById('todayNewCount').textContent = todayNewCount;
document.getElementById('todayProcessedCount').textContent = todayProcessedCount;
document.getElementById('unresolvedCount').textContent = unresolvedCount;
console.log('📊 통계 업데이트 (KST 기준):', {
전체: totalCount,
금일신규: todayNewCount,
금일처리: todayProcessedCount,
미해결: unresolvedCount,
@@ -810,7 +864,6 @@
} catch (error) {
console.error('통계 로드 오류:', error);
// 오류 시 기본값 설정
document.getElementById('totalCount').textContent = '0';
document.getElementById('todayNewCount').textContent = '0';
document.getElementById('todayProcessedCount').textContent = '0';
document.getElementById('unresolvedCount').textContent = '0';
@@ -828,6 +881,32 @@
window.location.href = `/issue-view.html#detail-${issueId}`;
}
// 사진 모달 관련 함수들
function openPhotoModal(photoPath) {
const modal = document.getElementById('photoModal');
const modalPhoto = document.getElementById('modalPhoto');
modalPhoto.src = photoPath;
modal.classList.remove('hidden');
// ESC 키로 모달 닫기
document.addEventListener('keydown', handleEscKey);
}
function closePhotoModal() {
const modal = document.getElementById('photoModal');
modal.classList.add('hidden');
// ESC 키 이벤트 제거
document.removeEventListener('keydown', handleEscKey);
}
function handleEscKey(event) {
if (event.key === 'Escape') {
closePhotoModal();
}
}
// ===== 워크플로우 모달 관련 함수들 =====
let currentIssueId = null;