From 591f3307a9adb501c07b87c11ad9868d4fb60141 Mon Sep 17 00:00:00 2001 From: Hyungi Ahn Date: Sun, 26 Oct 2025 10:33:45 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=ED=98=84=ED=99=A9=ED=8C=90=20UI?= =?UTF-8?q?=EB=A5=BC=20=EA=B4=80=EB=A6=AC=ED=95=A8=20=EC=A7=84=ED=96=89=20?= =?UTF-8?q?=EC=A4=91=20=EC=8A=A4=ED=83=80=EC=9D=BC=EB=A1=9C=20=EA=B0=9C?= =?UTF-8?q?=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ๐ŸŽจ UI Redesign: - ๊ธฐ์กด ํ”„๋กœ์ ํŠธ๋ณ„ ๊ทธ๋ฃน ์นด๋“œ โ†’ ๊ฐœ๋ณ„ ์ด์Šˆ ์นด๋“œ๋กœ ๋ณ€๊ฒฝ - ๊ด€๋ฆฌํ•จ ์ง„ํ–‰ ์ค‘ ํŽ˜์ด์ง€์™€ ๋™์ผํ•œ ์นด๋“œ ํ˜•์‹ ์ ์šฉ - ์ฝ๊ธฐ ์ „์šฉ์œผ๋กœ ๊ตฌํ˜„ (์ˆ˜์ • ๊ธฐ๋Šฅ ์—†์Œ) ๐Ÿ“‹ Card Content: - ํ—ค๋”: No., ๊ธด๊ธ‰ ํ‘œ์‹œ, ๋“ฑ๋ก์ผ - ๊ธฐ๋ณธ ์ •๋ณด: ํ”„๋กœ์ ํŠธ, ๋ถ€์ ํ•ฉ ๋‚ด์šฉ, ์นดํ…Œ๊ณ ๋ฆฌ - ๊ด€๋ฆฌ ์ •๋ณด: ํ•ด๊ฒฐ๋ฐฉ์•ˆ, ๋‹ด๋‹น๋ถ€์„œ, ๋‹ด๋‹น์ž, ์˜ˆ์ƒ์™„๋ฃŒ์ผ, ์›์ธ๋ถ€์„œ - ์‚ฌ์ง„ ์ •๋ณด: ์—…๋กœ๋“œ ์‚ฌ์ง„ ๋ฏธ๋ฆฌ๋ณด๊ธฐ (ํด๋ฆญ ์‹œ ํ™•๋Œ€) ๐Ÿ”ง Features: - ๋‚ด์šฉ์ด ์—†๋Š” ๋ถ€๋ถ„์€ '-'๋กœ ํ‘œ์‹œ - ์‚ฌ์ง„ ๋ชจ๋‹ฌ ํ™•๋Œ€ ๊ธฐ๋Šฅ (ESC ํ‚ค ์ง€์›) - ๊ธด๊ธ‰๋„ ํ‘œ์‹œ (์˜ˆ์ƒ์™„๋ฃŒ์ผ 3์ผ ์ด๋‚ด) - ๋ฐ˜์‘ํ˜• ๊ทธ๋ฆฌ๋“œ ๋ ˆ์ด์•„์›ƒ (1/2/3 ์ปฌ๋Ÿผ) ๐ŸŽฏ Layout: - ๋ฐ์Šคํฌํ†ฑ: 3์ปฌ๋Ÿผ ๊ทธ๋ฆฌ๋“œ - ํƒœ๋ธ”๋ฆฟ: 2์ปฌ๋Ÿผ ๊ทธ๋ฆฌ๋“œ - ๋ชจ๋ฐ”์ผ: 1์ปฌ๋Ÿผ ๊ทธ๋ฆฌ๋“œ Expected Result: โœ… ๊ด€๋ฆฌํ•จ๊ณผ ์ผ๊ด€๋œ UI/UX โœ… ์ƒ์„ธ ์ •๋ณด ํ•œ๋ˆˆ์— ํ™•์ธ ๊ฐ€๋Šฅ โœ… ์‚ฌ์ง„ ํ™•๋Œ€ ๊ธฐ๋Šฅ์œผ๋กœ ํŽธ์˜์„ฑ ํ–ฅ์ƒ โœ… ์ฝ๊ธฐ ์ „์šฉ์œผ๋กœ ์•ˆ์ „ํ•œ ์กฐํšŒ --- frontend/issues-dashboard.html | 254 ++++++++++++++++++++++----------- 1 file changed, 171 insertions(+), 83 deletions(-) diff --git a/frontend/issues-dashboard.html b/frontend/issues-dashboard.html index 2452f04..0ecc823 100644 --- a/frontend/issues-dashboard.html +++ b/frontend/issues-dashboard.html @@ -27,24 +27,31 @@ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } - .project-card { + /* ์ด์Šˆ ์นด๋“œ ์Šคํƒ€์ผ (๊ด€๋ฆฌํ•จ ์ง„ํ–‰ ์ค‘ ์Šคํƒ€์ผ) */ + .issue-card { transition: all 0.2s ease; border-left: 4px solid transparent; } - .project-card:hover { - transform: translateX(5px); + .issue-card:hover { + transform: translateY(-2px); border-left-color: #3b82f6; - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); + box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } - .issue-mini-card { + .issue-card label { + font-weight: 600; + color: #374151; + } + + .issue-card .bg-gray-50 { + background-color: #f9fafb; + border: 1px solid #e5e7eb; transition: all 0.2s ease; } - .issue-mini-card:hover { - transform: scale(1.02); - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); + .issue-card .bg-gray-50:hover { + background-color: #f3f4f6; } .progress-bar { @@ -359,7 +366,7 @@ document.getElementById('activeProjects').textContent = activeProjectIds.size; } - // ํ”„๋กœ์ ํŠธ ์นด๋“œ ์—…๋ฐ์ดํŠธ + // ์ด์Šˆ ์นด๋“œ ์—…๋ฐ์ดํŠธ (๊ด€๋ฆฌํ•จ ์ง„ํ–‰ ์ค‘ ์Šคํƒ€์ผ) function updateProjectCards() { const container = document.getElementById('projectDashboard'); const emptyState = document.getElementById('emptyState'); @@ -372,101 +379,182 @@ emptyState.classList.add('hidden'); - // ํ”„๋กœ์ ํŠธ๋ณ„ ๊ทธ๋ฃนํ™” - const projectGroups = {}; - filteredIssues.forEach(issue => { - const projectId = issue.project_id || 'unassigned'; - if (!projectGroups[projectId]) { - projectGroups[projectId] = []; - } - projectGroups[projectId].push(issue); - }); - - // ํ”„๋กœ์ ํŠธ ์นด๋“œ ์ƒ์„ฑ - const projectCards = Object.keys(projectGroups).map(projectId => { - const issues = projectGroups[projectId]; - const project = projects.find(p => p.id == projectId); - const projectName = project ? project.project_name : 'ํ”„๋กœ์ ํŠธ ๋ฏธ์ง€์ •'; - - return createProjectCard(projectName, issues); - }).join(''); - - container.innerHTML = projectCards; + // ์ด์Šˆ ์นด๋“œ๋“ค์„ ์ƒ์„ฑ (๊ด€๋ฆฌํ•จ ์ง„ํ–‰ ์ค‘ ์Šคํƒ€์ผ) + const issueCards = filteredIssues.map(issue => createIssueCard(issue)).join(''); + container.innerHTML = `
${issueCards}
`; } - // ํ”„๋กœ์ ํŠธ ์นด๋“œ ์ƒ์„ฑ - function createProjectCard(projectName, issues) { - const urgentCount = issues.filter(issue => { + // ์ด์Šˆ ์นด๋“œ ์ƒ์„ฑ (๊ด€๋ฆฌํ•จ ์ง„ํ–‰ ์ค‘ ์Šคํƒ€์ผ, ์ฝ๊ธฐ ์ „์šฉ) + function createIssueCard(issue) { + const project = projects.find(p => p.id === issue.project_id); + const projectName = project ? project.project_name : '๋ฏธ์ง€์ •'; + + // ๋ถ€์„œ ํ…์ŠคํŠธ ๋ณ€ํ™˜ + const getDepartmentText = (dept) => { + const deptMap = { + 'production': '์ƒ์‚ฐ', + 'quality': 'ํ’ˆ์งˆ', + 'purchasing': '๊ตฌ๋งค', + 'design': '์„ค๊ณ„', + 'sales': '์˜์—…' + }; + return dept ? deptMap[dept] || dept : '-'; + }; + + // ์นดํ…Œ๊ณ ๋ฆฌ ํ…์ŠคํŠธ ๋ณ€ํ™˜ + const getCategoryText = (category) => { + const categoryMap = { + 'quality': 'ํ’ˆ์งˆ', + 'safety': '์•ˆ์ „', + 'environment': 'ํ™˜๊ฒฝ', + 'process': '๊ณต์ •', + 'equipment': '์žฅ๋น„', + 'material': '์ž์žฌ', + 'etc': '๊ธฐํƒ€' + }; + return category ? categoryMap[category] || category : '-'; + }; + + // ๋‚ ์งœ ํฌ๋งทํŒ… + const formatKSTDate = (dateStr) => { + if (!dateStr) return '-'; + const date = new Date(dateStr); + return date.toLocaleDateString('ko-KR', { + year: 'numeric', + month: '2-digit', + day: '2-digit' + }); + }; + + // ๊ธด๊ธ‰๋„ ์ฒดํฌ (์˜ˆ์ƒ์™„๋ฃŒ์ผ ๊ธฐ์ค€) + const isUrgent = () => { if (!issue.expected_completion_date) return false; const expectedDate = new Date(issue.expected_completion_date); const now = new Date(); const diffDays = (expectedDate - now) / (1000 * 60 * 60 * 24); - return diffDays <= 3; - }).length; + return diffDays <= 3; // 3์ผ ์ด๋‚ด ๋˜๋Š” ์ง€์—ฐ + }; return ` -
-
-

${projectName}

+
+ +
- - ${issues.length}๊ฑด - - ${urgentCount > 0 ? ` - ๊ธด๊ธ‰ ${urgentCount}๊ฑด - ` : ''} + No.${issue.project_sequence_no || '-'} + ${isUrgent() ? '๊ธด๊ธ‰' : ''} +
+ ${formatKSTDate(issue.report_date)} +
+ + +
+
+ +
${projectName}
+
+ +
+ +
${issue.final_description || issue.description || '-'}
+
+ +
+ +
${getCategoryText(issue.final_category || issue.category)}
-
- ${issues.map(issue => createIssueMiniCard(issue)).join('')} + +
+
+
+ +
${issue.solution || '-'}
+
+
+ +
${getDepartmentText(issue.responsible_department)}
+
+
+ +
+
+ +
${issue.responsible_person || '-'}
+
+
+ +
${formatKSTDate(issue.expected_completion_date)}
+
+
+ +
+ +
${getDepartmentText(issue.cause_department)}
+
+ + + ${issue.photo_path || issue.photo_path2 ? ` +
+ +
+ ${issue.photo_path ? ` +
+ +
+ ` : ''} + ${issue.photo_path2 ? ` +
+ +
+ ` : ''} +
+
+ ` : ''}
`; } - // ์ด์Šˆ ๋ฏธ๋‹ˆ ์นด๋“œ ์ƒ์„ฑ - function createIssueMiniCard(issue) { - const isUrgent = issue.expected_completion_date && - (new Date(issue.expected_completion_date) - new Date()) / (1000 * 60 * 60 * 24) <= 3; + // ์‚ฌ์ง„ ๋ชจ๋‹ฌ ์—ด๊ธฐ + function openPhotoModal(photoPath) { + let modal = document.getElementById('photoModal'); - const urgentClass = isUrgent ? 'border-red-200 bg-red-50' : 'border-gray-200 bg-white'; + if (!modal) { + // ๋ชจ๋‹ฌ์ด ์—†์œผ๋ฉด ์ƒ์„ฑ + const modalHTML = ` + + `; + document.body.insertAdjacentHTML('beforeend', modalHTML); + modal = document.getElementById('photoModal'); + } - return ` -
-
- - No.${issue.project_sequence_no || '-'} - - ${isUrgent ? '' : ''} -
- -

- ${issue.final_description || issue.description} -

- -
- ${new Date(issue.report_date).toLocaleDateString('ko-KR')} - ${issue.expected_completion_date ? - ` - ๋งˆ๊ฐ: ${new Date(issue.expected_completion_date).toLocaleDateString('ko-KR')} - ` : - '๋งˆ๊ฐ์ผ ๋ฏธ์ •' - } -
- - ${issue.responsible_department ? - `
- - ${getDepartmentText(issue.responsible_department)} - -
` : '' - } -
- `; + document.getElementById('modalPhoto').src = photoPath; + modal.classList.remove('hidden'); } + // ์‚ฌ์ง„ ๋ชจ๋‹ฌ ๋‹ซ๊ธฐ + function closePhotoModal() { + const modal = document.getElementById('photoModal'); + if (modal) { + modal.classList.add('hidden'); + } + } + + // ESC ํ‚ค๋กœ ๋ชจ๋‹ฌ ๋‹ซ๊ธฐ + document.addEventListener('keydown', function(e) { + if (e.key === 'Escape') { + closePhotoModal(); + } + }); + // ํ•„ํ„ฐ ๋ฐ ์ •๋ ฌ ํ•จ์ˆ˜๋“ค function filterByProject() { const projectId = document.getElementById('projectFilter').value;