feat(system3): TKQC 모바일 전용 페이지 구현 및 데스크탑 관리함 반응형 개선
- 모바일 전용 페이지 신규: /m/dashboard, /m/inbox, /m/management - 공통 모바일 CSS/JS: m-common.css, m-common.js (바텀시트, 바텀네비, 터치 최적화) - nginx.conf에 /m/ location 블록 추가 - 데스크탑 HTML에 모바일 뷰포트 리다이렉트 추가 (<=768px) - 데스크탑 관리함 카드 헤더 반응형 레이아웃 (flex-wrap, 1280px 브레이크포인트) - collapse-content overflow:hidden → overflow:visible 수정 (내용 잘림 해결) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Hyungi Ahn
@@ -326,47 +326,44 @@ function createInProgressRow(issue, project) {
|
||||
return `
|
||||
<div class="issue-card bg-white border border-gray-200 rounded-xl p-6 mb-4 shadow-sm hover:shadow-md transition-shadow" data-issue-id="${issue.id}">
|
||||
<!-- 카드 헤더 -->
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="flex flex-col space-y-1">
|
||||
<div class="flex items-center space-x-3">
|
||||
<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"></div>
|
||||
<div class="issue-card-header">
|
||||
<div class="header-top">
|
||||
<div style="min-width:0; flex:1;">
|
||||
<div class="header-meta">
|
||||
<span class="text-xl font-bold bg-gradient-to-r from-blue-600 to-blue-800 bg-clip-text text-transparent" style="white-space:nowrap;">No.${issue.project_sequence_no || '-'}</span>
|
||||
<div class="w-2 h-2 bg-blue-500 rounded-full animate-pulse" style="flex-shrink:0;"></div>
|
||||
<span class="text-sm text-gray-600" style="white-space:nowrap;">${project ? project.project_name : '프로젝트 미지정'}</span>
|
||||
<div class="flex items-center space-x-2 ${statusConfig.bgColor} text-white px-3 py-1 rounded-full shadow-sm" style="white-space:nowrap;">
|
||||
<div class="w-1.5 h-1.5 ${statusConfig.dotColor} rounded-full animate-pulse"></div>
|
||||
<span class="text-xs font-bold">${statusConfig.text}</span>
|
||||
<i class="${statusConfig.icon} text-xs"></i>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-sm text-gray-600">${project ? project.project_name : '프로젝트 미지정'}</span>
|
||||
<!-- 상태 표시 -->
|
||||
<div class="flex items-center space-x-2 ${statusConfig.bgColor} text-white px-3 py-1 rounded-full shadow-sm">
|
||||
<div class="w-1.5 h-1.5 ${statusConfig.dotColor} rounded-full animate-pulse"></div>
|
||||
<span class="text-xs font-bold">${statusConfig.text}</span>
|
||||
<i class="${statusConfig.icon} text-xs"></i>
|
||||
<div class="bg-blue-50 px-3 py-2 rounded-lg border-l-4 border-blue-400 mt-1">
|
||||
<h3 class="text-lg font-bold text-blue-900">${getIssueTitle(issue)}</h3>
|
||||
</div>
|
||||
</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 class="header-actions">
|
||||
${isPendingCompletion ? `
|
||||
<button onclick="rejectCompletion(${issue.id})" class="px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors">
|
||||
<i class="fas fa-times mr-1"></i>반려
|
||||
</button>
|
||||
<button onclick="confirmCompletion(${issue.id})" class="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors">
|
||||
<i class="fas fa-check-circle mr-1"></i>최종확인
|
||||
</button>
|
||||
` : `
|
||||
<button onclick="saveIssueChanges(${issue.id})" class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors">
|
||||
<i class="fas fa-save mr-1"></i>저장
|
||||
</button>
|
||||
<button onclick="confirmDeleteIssue(${issue.id})" class="px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors">
|
||||
<i class="fas fa-trash mr-1"></i>삭제
|
||||
</button>
|
||||
<button onclick="confirmCompletion(${issue.id})" class="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors">
|
||||
<i class="fas fa-check mr-1"></i>완료처리
|
||||
</button>
|
||||
`}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex space-x-2">
|
||||
${isPendingCompletion ? `
|
||||
<!-- 완료 대기 상태 버튼들 -->
|
||||
<button onclick="rejectCompletion(${issue.id})" class="px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors">
|
||||
<i class="fas fa-times mr-1"></i>반려
|
||||
</button>
|
||||
<button onclick="confirmCompletion(${issue.id})" class="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors">
|
||||
<i class="fas fa-check-circle mr-1"></i>최종확인
|
||||
</button>
|
||||
` : `
|
||||
<!-- 일반 진행 중 상태 버튼들 -->
|
||||
<button onclick="saveIssueChanges(${issue.id})" class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors">
|
||||
<i class="fas fa-save mr-1"></i>저장
|
||||
</button>
|
||||
<button onclick="confirmDeleteIssue(${issue.id})" class="px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors">
|
||||
<i class="fas fa-trash mr-1"></i>삭제
|
||||
</button>
|
||||
<button onclick="confirmCompletion(${issue.id})" class="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors">
|
||||
<i class="fas fa-check mr-1"></i>완료처리
|
||||
</button>
|
||||
`}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 카드 내용 -->
|
||||
@@ -556,35 +553,34 @@ function createCompletedRow(issue, project) {
|
||||
return `
|
||||
<div class="issue-card bg-white border border-gray-200 rounded-xl p-6 mb-4 shadow-sm hover:shadow-md transition-shadow" data-issue-id="${issue.id}">
|
||||
<!-- 카드 헤더 -->
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="flex flex-col space-y-1">
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="flex items-center space-x-2">
|
||||
<span class="text-xl font-bold bg-gradient-to-r from-green-600 to-green-800 bg-clip-text text-transparent">No.${issue.project_sequence_no || '-'}</span>
|
||||
<div class="w-2 h-2 bg-green-500 rounded-full"></div>
|
||||
<div class="issue-card-header">
|
||||
<div class="header-top">
|
||||
<div style="min-width:0; flex:1;">
|
||||
<div class="header-meta">
|
||||
<span class="text-xl font-bold bg-gradient-to-r from-green-600 to-green-800 bg-clip-text text-transparent" style="white-space:nowrap;">No.${issue.project_sequence_no || '-'}</span>
|
||||
<div class="w-2 h-2 bg-green-500 rounded-full" style="flex-shrink:0;"></div>
|
||||
<span class="text-sm text-gray-600" style="white-space:nowrap;">${project ? project.project_name : '프로젝트 미지정'}</span>
|
||||
<div class="flex items-center space-x-2 bg-gradient-to-r from-green-500 to-green-600 text-white px-3 py-1 rounded-full shadow-sm" style="white-space:nowrap;">
|
||||
<div class="w-1.5 h-1.5 bg-white rounded-full"></div>
|
||||
<span class="text-xs font-bold">완료됨</span>
|
||||
<i class="fas fa-check-circle text-xs"></i>
|
||||
</div>
|
||||
<span class="text-xs text-gray-500" style="white-space:nowrap;">완료일: ${completedDate}</span>
|
||||
</div>
|
||||
<span class="text-sm text-gray-600">${project ? project.project_name : '프로젝트 미지정'}</span>
|
||||
<!-- 완료 상태 표시 -->
|
||||
<div class="flex items-center space-x-2 bg-gradient-to-r from-green-500 to-green-600 text-white px-3 py-1 rounded-full shadow-sm">
|
||||
<div class="w-1.5 h-1.5 bg-white rounded-full"></div>
|
||||
<span class="text-xs font-bold">완료됨</span>
|
||||
<i class="fas fa-check-circle text-xs"></i>
|
||||
<div class="bg-green-50 px-3 py-2 rounded-lg border-l-4 border-green-400 mt-1">
|
||||
<h3 class="text-lg font-bold text-green-900">${getIssueTitle(issue)}</h3>
|
||||
</div>
|
||||
<span class="text-xs text-gray-500">완료일: ${completedDate}</span>
|
||||
</div>
|
||||
<div class="bg-green-50 px-3 py-2 rounded-lg border-l-4 border-green-400">
|
||||
<h3 class="text-lg font-bold text-green-900">${getIssueTitle(issue)}</h3>
|
||||
<div class="header-actions">
|
||||
<button onclick="openIssueDetailModal(${issue.id})" class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors">
|
||||
<i class="fas fa-eye mr-1"></i>상세보기
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex space-x-2">
|
||||
<button onclick="openIssueDetailModal(${issue.id})" class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors">
|
||||
<i class="fas fa-eye mr-1"></i>상세보기
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 카드 본문 -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
|
||||
<div class="completed-card-grid" style="display:grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;">
|
||||
<!-- 기본 정보 -->
|
||||
<div class="bg-gray-50 p-4 rounded-lg border border-gray-200">
|
||||
<h4 class="font-semibold text-gray-800 mb-3 flex items-center">
|
||||
|
||||
Reference in New Issue
Block a user