From 20ebf530f9ceac28f7cd5eb9208e33af44741bd6 Mon Sep 17 00:00:00 2001 From: Hyungi Ahn Date: Sat, 25 Oct 2025 14:40:20 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=EA=B4=80=EB=A6=AC=ED=95=A8=20=EC=9D=B4?= =?UTF-8?q?=EC=8A=88=20=ED=91=9C=EC=8B=9C=20=EB=B0=A9=EC=8B=9D=20=EC=99=84?= =?UTF-8?q?=EC=A0=84=20=EA=B0=9C=ED=8E=B8=20-=20=ED=85=8C=EC=9D=B4?= =?UTF-8?q?=EB=B8=94=20=ED=98=95=ED=83=9C=20=EB=B0=8F=20=EB=82=A0=EC=A7=9C?= =?UTF-8?q?=EB=B3=84=20=EA=B7=B8=EB=A3=B9=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ๐Ÿ“Š Complete Issue Display Redesign: - ๊ธฐ์กด ์นด๋“œ ํ˜•ํƒœ์—์„œ ํ…Œ์ด๋ธ” ํ˜•ํƒœ๋กœ ์™„์ „ ๋ณ€๊ฒฝ - No.๋ถ€ํ„ฐ ์™„๋ฃŒ ์‚ฌ์ง„๊นŒ์ง€ ๋ชจ๋“  ์ •๋ณด๋ฅผ ์ผ๋ ฌ๋กœ ํ‘œ์‹œ - ์ขŒ์šฐ ์Šคํฌ๋กค ๊ฐ€๋Šฅํ•œ ํ…Œ์ด๋ธ” ๊ตฌ์กฐ (min-width: 1200px) ๐Ÿ“… Date-based Grouping: - ๋‚ ์งœ๋ณ„๋กœ ์ด์Šˆ๋“ค์„ ๊ทธ๋ฃนํ™”ํ•˜์—ฌ ํ‘œ์‹œ - ๊ฐ ๋‚ ์งœ ๊ทธ๋ฃน๋งˆ๋‹ค ์ ‘๊ธฐ/ํŽผ์น˜๊ธฐ ๊ธฐ๋Šฅ ๊ตฌํ˜„ - ๋‚ ์งœ ํ—ค๋” ํด๋ฆญ์œผ๋กœ ํ•ด๋‹น ๊ทธ๋ฃน ํ† ๊ธ€ ๊ฐ€๋Šฅ - ๋ถ€๋“œ๋Ÿฌ์šด ์• ๋‹ˆ๋ฉ”์ด์…˜ ํšจ๊ณผ ์ ์šฉ ๐Ÿ—‚๏ธ Comprehensive Data Display: - No. (ํ”„๋กœ์ ํŠธ๋ณ„ ์ˆœ๋ฒˆ) - ํ”„๋กœ์ ํŠธ๋ช… - ๋‚ด์šฉ (final_description ์šฐ์„ , ์—†์œผ๋ฉด description) - ์›์ธ (์นดํ…Œ๊ณ ๋ฆฌ) - ํ•ด๊ฒฐ๋ฐฉ์•ˆ (solution) - ๋‹ด๋‹น๋ถ€์„œ (responsible_department) - ๋‹ด๋‹น์ž (responsible_person) - ์กฐ์น˜์˜ˆ์ƒ์ผ (expected_completion_date) - ์™„๋ฃŒํ™•์ธ์ผ (actual_completion_date) - ํ™•์ธ์ž (์‹ ๊ณ ์ž + ์ค‘๋ณต ์‹ ๊ณ ์ž๋“ค) - ์›์ธ๋ถ€์„œ (cause_department) - ์˜๊ฒฌ (management_comment) - ์กฐ์น˜๊ฒฐ๊ณผ (์ง„ํ–‰ ์ค‘/์™„๋ฃŒ๋จ) - ์—…๋กœ๋“œ ์‚ฌ์ง„ (photo_path, photo_path2) - ์™„๋ฃŒ ์‚ฌ์ง„ (completion_photo_path) ๐ŸŽจ Enhanced UI/UX: - ์ขŒ์šฐ ์Šคํฌ๋กค๋กœ ๋ชจ๋“  ์ •๋ณด ํ™•์ธ ๊ฐ€๋Šฅ - ์‚ฌ์ง„ ํด๋ฆญ ์‹œ ํ™•๋Œ€ ๋ชจ๋‹ฌ ํ‘œ์‹œ - ํ…์ŠคํŠธ ์˜ค๋ฒ„ํ”Œ๋กœ์šฐ ์‹œ ํˆดํŒ์œผ๋กœ ์ „์ฒด ๋‚ด์šฉ ํ‘œ์‹œ - ์ƒํƒœ๋ณ„ ์ƒ‰์ƒ ๊ตฌ๋ถ„ (์ง„ํ–‰ ์ค‘: ํŒŒ๋ž€์ƒ‰, ์™„๋ฃŒ๋จ: ์ดˆ๋ก์ƒ‰) - ํ˜ธ๋ฒ„ ํšจ๊ณผ๋กœ ํ–‰ ๊ฐ•์กฐ ๐Ÿ”ง Technical Implementation: - CSS ๊ทธ๋ฆฌ๋“œ ๋ฐ ํ…Œ์ด๋ธ” ์Šคํƒ€์ผ๋ง - ๋ฐ˜์‘ํ˜• ์Šคํฌ๋กค ์ปจํ…Œ์ด๋„ˆ - ๋‚ ์งœ ๊ทธ๋ฃน ํ† ๊ธ€ ์• ๋‹ˆ๋ฉ”์ด์…˜ - ์‚ฌ์ง„ ๋ชจ๋‹ฌ ํŒ์—… ๊ธฐ๋Šฅ - ์œ ํ‹ธ๋ฆฌํ‹ฐ ํ•จ์ˆ˜๋กœ ๋ฐ์ดํ„ฐ ๋ณ€ํ™˜ ๐Ÿš€ User Experience: - ํ•œ ํ™”๋ฉด์—์„œ ๋ชจ๋“  ์ •๋ณด ํ™•์ธ ๊ฐ€๋Šฅ - ๋‚ ์งœ๋ณ„ ์ •๋ฆฌ๋กœ ์ฒด๊ณ„์ ์ธ ๊ด€๋ฆฌ - ์ ‘๊ธฐ/ํŽผ์น˜๊ธฐ๋กœ ํ•„์š”ํ•œ ์ •๋ณด๋งŒ ํ‘œ์‹œ - ์ง๊ด€์ ์ธ ํ…Œ์ด๋ธ” ํ˜•ํƒœ๋กœ ๋ฐ์ดํ„ฐ ๋น„๊ต ์šฉ์ด Expected Result: โœ… No.๋ถ€ํ„ฐ ์‚ฌ์ง„๊นŒ์ง€ ๋ชจ๋“  ์ •๋ณด๊ฐ€ ํ…Œ์ด๋ธ” ํ˜•ํƒœ๋กœ ํ‘œ์‹œ โœ… ์ขŒ์šฐ ์Šคํฌ๋กค๋กœ ๊ธด ๋ฐ์ดํ„ฐ๋„ ํŽธ๋ฆฌํ•˜๊ฒŒ ํ™•์ธ โœ… ๋‚ ์งœ๋ณ„ ๊ทธ๋ฃนํ™”๋กœ ์ฒด๊ณ„์ ์ธ ๊ด€๋ฆฌ โœ… ์ ‘๊ธฐ/ํŽผ์น˜๊ธฐ๋กœ ํ•„์š”ํ•œ ์ •๋ณด๋งŒ ์„ ํƒ์  ํ‘œ์‹œ โœ… ์‚ฌ์ง„ ํด๋ฆญ์œผ๋กœ ํ™•๋Œ€ ๋ณด๊ธฐ ๊ฐ€๋Šฅ --- frontend/issues-management.html | 279 ++++++++++++++++++++++++++------ 1 file changed, 227 insertions(+), 52 deletions(-) diff --git a/frontend/issues-management.html b/frontend/issues-management.html index f91c5a5..e92225e 100644 --- a/frontend/issues-management.html +++ b/frontend/issues-management.html @@ -61,6 +61,77 @@ font-size: 0.75rem; font-weight: 500; } + + /* ๋‚ ์งœ ๊ทธ๋ฃน ์Šคํƒ€์ผ */ + .date-group { + margin-bottom: 1.5rem; + } + + .date-header { + cursor: pointer; + transition: all 0.2s ease; + } + + .date-header:hover { + background-color: #f9fafb; + } + + /* ์ขŒ์šฐ ์Šคํฌ๋กค ๊ฐ€๋Šฅํ•œ ์ด์Šˆ ํ…Œ์ด๋ธ” */ + .issue-table-container { + overflow-x: auto; + border: 1px solid #e5e7eb; + border-radius: 0.5rem; + margin-top: 0.5rem; + } + + .issue-table { + min-width: 1200px; + width: 100%; + border-collapse: collapse; + } + + .issue-table th, + .issue-table td { + padding: 0.75rem; + text-align: left; + border-bottom: 1px solid #f3f4f6; + white-space: nowrap; + } + + .issue-table th { + background-color: #f9fafb; + font-weight: 600; + color: #374151; + font-size: 0.875rem; + } + + .issue-table tbody tr:hover { + background-color: #f9fafb; + } + + .issue-photo { + width: 60px; + height: 40px; + object-fit: cover; + border-radius: 0.375rem; + cursor: pointer; + } + + .issue-description { + max-width: 200px; + overflow: hidden; + text-overflow: ellipsis; + } + + .collapse-content { + max-height: 1000px; + overflow: hidden; + transition: max-height 0.3s ease-out; + } + + .collapse-content.collapsed { + max-height: 0; + } .badge-new { background: #dbeafe; color: #1e40af; } .badge-processing { background: #fef3c7; color: #92400e; } @@ -178,22 +249,16 @@

๋ถ€์ ํ•ฉ ๊ด€๋ฆฌ

-
-
- +
+
@@ -386,16 +451,10 @@ filteredIssues.sort((a, b) => { switch (sortOrder) { - case 'priority': - const priorityOrder = { 'high': 3, 'medium': 2, 'low': 1 }; - return (priorityOrder[b.priority] || 1) - (priorityOrder[a.priority] || 1); case 'newest': return new Date(b.report_date) - new Date(a.report_date); case 'oldest': return new Date(a.report_date) - new Date(b.report_date); - case 'status': - const statusOrder = { 'new': 4, 'processing': 3, 'pending': 2, 'completed': 1 }; - return (statusOrder[b.status] || 0) - (statusOrder[a.status] || 0); default: return new Date(b.report_date) - new Date(a.report_date); } @@ -414,52 +473,168 @@ emptyState.classList.add('hidden'); - container.innerHTML = filteredIssues.map(issue => { - const project = projects.find(p => p.id === issue.project_id); - const createdDate = new Date(issue.created_at).toLocaleDateString('ko-KR'); - const isSelected = selectedIssues.has(issue.id); + // ๋‚ ์งœ๋ณ„๋กœ ๊ทธ๋ฃนํ™” + const groupedByDate = {}; + filteredIssues.forEach(issue => { + const date = new Date(issue.report_date).toLocaleDateString('ko-KR'); + if (!groupedByDate[date]) { + groupedByDate[date] = []; + } + groupedByDate[date].push(issue); + }); + + // ๋‚ ์งœ๋ณ„ ๊ทธ๋ฃน์„ HTML๋กœ ์ƒ์„ฑ + const dateGroups = Object.keys(groupedByDate).map(date => { + const issues = groupedByDate[date]; + const groupId = `group-${date.replace(/\./g, '-')}`; return ` -
-
-
- - -
-
- ${getStatusText(issue.status)} - ${getPriorityBadge(issue.priority)} - ${project ? `${project.project_name}` : ''} -
- -

${issue.description}

- -
- ${issue.reporter?.username || '์•Œ ์ˆ˜ ์—†์Œ'} - ${createdDate} - ${issue.category ? `${getCategoryText(issue.category)}` : ''} -
-
+
+
+
+ +

${date}

+ (${issues.length}๊ฑด)
- -
- - +
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + ${issues.map(issue => createIssueRow(issue)).join('')} + +
No.ํ”„๋กœ์ ํŠธ๋‚ด์šฉ์›์ธํ•ด๊ฒฐ๋ฐฉ์•ˆ๋‹ด๋‹น๋ถ€์„œ๋‹ด๋‹น์ž์กฐ์น˜์˜ˆ์ƒ์ผ์™„๋ฃŒํ™•์ธ์ผํ™•์ธ์ž์›์ธ๋ถ€์„œ์˜๊ฒฌ์กฐ์น˜๊ฒฐ๊ณผ์—…๋กœ๋“œ ์‚ฌ์ง„์™„๋ฃŒ ์‚ฌ์ง„
`; }).join(''); + + container.innerHTML = dateGroups; + } + + // ์ด์Šˆ ํ–‰ ์ƒ์„ฑ ํ•จ์ˆ˜ + function createIssueRow(issue) { + const project = projects.find(p => p.id === issue.project_id); + const statusText = issue.review_status === 'in_progress' ? '์ง„ํ–‰ ์ค‘' : '์™„๋ฃŒ๋จ'; + const statusClass = issue.review_status === 'in_progress' ? 'text-blue-600' : 'text-green-600'; + + return ` + + ${issue.project_sequence_no || '-'} + ${project ? project.project_name : '-'} + + ${issue.final_description || issue.description} + + ${getCategoryText(issue.final_category || issue.category)} + + ${issue.solution || '-'} + + ${getDepartmentText(issue.responsible_department) || '-'} + ${issue.responsible_person || '-'} + ${issue.expected_completion_date ? new Date(issue.expected_completion_date).toLocaleDateString('ko-KR') : '-'} + ${issue.actual_completion_date ? new Date(issue.actual_completion_date).toLocaleDateString('ko-KR') : '-'} + ${getReporterNames(issue)} + ${getDepartmentText(issue.cause_department) || '-'} + + ${issue.management_comment || '-'} + + ${statusText} + + ${issue.photo_path ? `์—…๋กœ๋“œ ์‚ฌ์ง„` : '-'} + ${issue.photo_path2 ? `
์—…๋กœ๋“œ ์‚ฌ์ง„ 2` : ''} + + + ${issue.completion_photo_path ? `์™„๋ฃŒ ์‚ฌ์ง„` : '-'} + + + `; + } + + // ๋‚ ์งœ ๊ทธ๋ฃน ํ† ๊ธ€ ํ•จ์ˆ˜ + function toggleDateGroup(groupId) { + const content = document.getElementById(groupId); + const icon = document.getElementById(`icon-${groupId}`); + + if (content.classList.contains('collapsed')) { + content.classList.remove('collapsed'); + icon.style.transform = 'rotate(0deg)'; + } else { + content.classList.add('collapsed'); + icon.style.transform = 'rotate(-90deg)'; + } + } + + // ์œ ํ‹ธ๋ฆฌํ‹ฐ ํ•จ์ˆ˜๋“ค + function getDepartmentText(department) { + const departments = { + 'production': '์ƒ์‚ฐ', + 'quality': 'ํ’ˆ์งˆ', + 'purchasing': '๊ตฌ๋งค', + 'design': '์„ค๊ณ„', + 'sales': '์˜์—…' + }; + return departments[department] || department; + } + + function getReporterNames(issue) { + let names = [issue.reporter?.full_name || issue.reporter?.username || '์•Œ ์ˆ˜ ์—†์Œ']; + + if (issue.duplicate_reporters && issue.duplicate_reporters.length > 0) { + const duplicateNames = issue.duplicate_reporters.map(r => r.full_name || r.username); + names = names.concat(duplicateNames); + } + + return names.join(', '); + } + + function getCategoryText(category) { + const categories = { + 'quality': 'ํ’ˆ์งˆ', + 'safety': '์•ˆ์ „', + 'environment': 'ํ™˜๊ฒฝ', + 'process': '๊ณต์ •', + 'equipment': '์žฅ๋น„', + 'material': '์ž์žฌ', + 'etc': '๊ธฐํƒ€' + }; + return categories[category] || category; + } + + // ์‚ฌ์ง„ ๋ชจ๋‹ฌ ํ•จ์ˆ˜ + function openPhotoModal(photoPath) { + const modal = document.createElement('div'); + modal.className = 'fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50'; + modal.onclick = () => modal.remove(); + + modal.innerHTML = ` +
+ ํ™•๋Œ€๋œ ์‚ฌ์ง„ +
+ `; + + document.body.appendChild(modal); } // ํ†ต๊ณ„ ์—…๋ฐ์ดํŠธ