From 2a5455b22143112776f83f1661a26a96a2530757 Mon Sep 17 00:00:00 2001 From: Hyungi Ahn Date: Sun, 26 Oct 2025 10:52:12 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=ED=98=84=ED=99=A9=ED=8C=90=EC=9D=84=20?= =?UTF-8?q?=EA=B4=80=EB=A6=AC=ED=95=A8=20=EC=8A=A4=ED=83=80=EC=9D=BC?= =?UTF-8?q?=EB=A1=9C=20=EC=99=84=EC=A0=84=20=EB=B3=80=EA=B2=BD=20(?= =?UTF-8?q?=EB=82=A0=EC=A7=9C=20=EA=B7=B8=EB=A3=B9=ED=99=94=20+=20?= =?UTF-8?q?=ED=8E=B8=EC=A7=91=20=EA=B0=80=EB=8A=A5)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ๐Ÿ”„ Complete Layout Change: - โŒ ๋‹จ์ˆœ ์นด๋“œ ๊ทธ๋ฆฌ๋“œ โ†’ โœ… ๊ด€๋ฆฌํ•จ ์Šคํƒ€์ผ ๋‚ ์งœ๋ณ„ ๊ทธ๋ฃนํ™” - ๋‚ ์งœ๋ณ„ ์ ‘๊ธฐ/ํŽผ์น˜๊ธฐ ๊ธฐ๋Šฅ ์ถ”๊ฐ€ - ์—…๋กœ๋“œ์ผ ๊ธฐ์ค€์œผ๋กœ ๊ทธ๋ฃนํ™” ๋ฐ ์ตœ์‹ ์ˆœ ์ •๋ ฌ ๐Ÿ“‹ Card Layout (Management Style): - ํ—ค๋”: No., ๊ธด๊ธ‰ ํ‘œ์‹œ + ์ €์žฅ/์™„๋ฃŒ์ฒ˜๋ฆฌ ๋ฒ„ํŠผ - ์—…๋กœ๋“œ ์‚ฌ์ง„: ๋งจ ์œ„๋กœ ์ด๋™ (2๊ฐœ ์Šฌ๋กฏ, ์—†์œผ๋ฉด '์‚ฌ์ง„ ์—†์Œ') - ๋ถ€์ ํ•ฉ ๋‚ด์šฉ: ์ฝ๊ธฐ ์ „์šฉ ํ…์ŠคํŠธ - ์›์ธ ๋ถ„๋ฅ˜: ๋…ธ๋ž€์ƒ‰ ๋ฐฐ์ง€๋กœ ํ‘œ์‹œ - ๊ด€๋ฆฌ ์ •๋ณด: ํŽธ์ง‘ ๊ฐ€๋Šฅํ•œ ์ž…๋ ฅ ํ•„๋“œ๋“ค ๐ŸŽฏ Interactive Features: - ํ•ด๊ฒฐ๋ฐฉ์•ˆ: textarea (ํŽธ์ง‘ ๊ฐ€๋Šฅ) - ๋‹ด๋‹น๋ถ€์„œ: select dropdown (ํŽธ์ง‘ ๊ฐ€๋Šฅ) - ๋‹ด๋‹น์ž: text input (ํŽธ์ง‘ ๊ฐ€๋Šฅ) - ์กฐ์น˜ ์˜ˆ์ƒ์ผ: date input (ํŽธ์ง‘ ๊ฐ€๋Šฅ) - ์›์ธ๋ถ€์„œ: ์ฝ๊ธฐ ์ „์šฉ ๐Ÿ“… Date Grouping: - ์—…๋กœ๋“œ์ผ(report_date) ๊ธฐ์ค€ ๊ทธ๋ฃนํ™” - ๋‚ ์งœ ํ—ค๋”: ํด๋ฆญ์œผ๋กœ ์ ‘๊ธฐ/ํŽผ์น˜๊ธฐ - ๊ฐ ๊ทธ๋ฃน๋ณ„ ๊ฑด์ˆ˜ ํ‘œ์‹œ - '์—…๋กœ๋“œ์ผ' ๋ฐฐ์ง€๋กœ ๊ธฐ์ค€ ๋ช…์‹œ ๐ŸŽจ Visual Improvements: - ์ด๋ชจ์ง€ ์•„์ด์ฝ˜์œผ๋กœ ํ•„๋“œ ๊ตฌ๋ถ„ (๐Ÿ’ก๐Ÿข๐Ÿ‘ค๐Ÿ“…) - ์ง„ํ–‰ ์ค‘ ์ƒํƒœ ์• ๋‹ˆ๋ฉ”์ด์…˜ ์œ ์ง€ - ๋ถ€๋“œ๋Ÿฌ์šด hover ํšจ๊ณผ - ์ผ๊ด€๋œ ์ƒ‰์ƒ ์ฒด๊ณ„ ๐Ÿ”ง Functionality: - toggleDateGroup() ํ•จ์ˆ˜๋กœ ๊ทธ๋ฃน ์ ‘๊ธฐ/ํŽผ์น˜๊ธฐ - ์‚ฌ์ง„ ๋ชจ๋‹ฌ ํ™•๋Œ€ ๊ธฐ๋Šฅ ์œ ์ง€ - ๊ธด๊ธ‰ ํ‘œ์‹œ (3์ผ ์ด๋‚ด ๋งˆ๊ฐ) - ์ €์žฅ/์™„๋ฃŒ์ฒ˜๋ฆฌ ๋ฒ„ํŠผ (UI๋งŒ, ๊ธฐ๋Šฅ์€ ์ถ”ํ›„) Expected Result: โœ… ๊ด€๋ฆฌํ•จ๊ณผ ์™„์ „ํžˆ ๋™์ผํ•œ UI/UX โœ… ๋‚ ์งœ๋ณ„ ์ฒด๊ณ„์  ์ •๋ฆฌ โœ… ํŽธ์ง‘ ๊ฐ€๋Šฅํ•œ ๊ด€๋ฆฌ ์ธํ„ฐํŽ˜์ด์Šค โœ… ์ง๊ด€์ ์ธ ์ •๋ณด ํ‘œ์‹œ --- frontend/issues-dashboard.html | 201 ++++++++++++++++++++++++--------- 1 file changed, 148 insertions(+), 53 deletions(-) diff --git a/frontend/issues-dashboard.html b/frontend/issues-dashboard.html index c28465e..41fdf2c 100644 --- a/frontend/issues-dashboard.html +++ b/frontend/issues-dashboard.html @@ -68,6 +68,24 @@ .animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } + + /* ๋‚ ์งœ ๊ทธ๋ฃน ์Šคํƒ€์ผ */ + .date-group { + margin-bottom: 1.5rem; + } + + .date-header { + cursor: pointer; + transition: all 0.2s ease; + } + + .date-header:hover { + background-color: #f3f4f6 !important; + } + + .collapse-content { + transition: all 0.3s ease; + } .progress-bar { background: linear-gradient(90deg, #10b981 0%, #059669 100%); @@ -381,7 +399,7 @@ document.getElementById('activeProjects').textContent = activeProjectIds.size; } - // ์ด์Šˆ ์นด๋“œ ์—…๋ฐ์ดํŠธ (๊ด€๋ฆฌํ•จ ์ง„ํ–‰ ์ค‘ ์นด๋“œ ์Šคํƒ€์ผ) + // ์ด์Šˆ ์นด๋“œ ์—…๋ฐ์ดํŠธ (๊ด€๋ฆฌํ•จ ์Šคํƒ€์ผ - ๋‚ ์งœ๋ณ„ ๊ทธ๋ฃนํ™”) function updateProjectCards() { const container = document.getElementById('projectDashboard'); const emptyState = document.getElementById('emptyState'); @@ -394,14 +412,47 @@ emptyState.classList.add('hidden'); - // ์นด๋“œ ๊ทธ๋ฆฌ๋“œ ์ƒ์„ฑ - const cardsHTML = ` -
- ${filteredIssues.map(issue => createIssueCard(issue)).join('')} -
- `; - - container.innerHTML = cardsHTML; + // ๋‚ ์งœ๋ณ„๋กœ ๊ทธ๋ฃนํ™” + const groupedByDate = {}; + filteredIssues.forEach(issue => { + const dateKey = new Date(issue.report_date).toLocaleDateString('ko-KR'); + if (!groupedByDate[dateKey]) { + groupedByDate[dateKey] = []; + } + groupedByDate[dateKey].push(issue); + }); + + // ๋‚ ์งœ๋ณ„ ๊ทธ๋ฃน ์ƒ์„ฑ + const dateGroups = Object.keys(groupedByDate) + .sort((a, b) => new Date(b) - new Date(a)) // ์ตœ์‹ ์ˆœ + .map(dateKey => { + const issues = groupedByDate[dateKey]; + const formattedDate = new Date(dateKey).toLocaleDateString('ko-KR', { + year: 'numeric', + month: '2-digit', + day: '2-digit' + }).replace(/\./g, '. ').trim(); + + return ` +
+
+
+ + ${formattedDate} + (${issues.length}๊ฑด) + ์—…๋กœ๋“œ์ผ +
+
+
+
+ ${issues.map(issue => createIssueCard(issue)).join('')} +
+
+
+ `; + }).join(''); + + container.innerHTML = dateGroups; } // ์ด์Šˆ ์นด๋“œ ์ƒ์„ฑ (๊ด€๋ฆฌํ•จ ์ง„ํ–‰ ์ค‘ ์Šคํƒ€์ผ, ์ฝ๊ธฐ ์ „์šฉ) @@ -456,83 +507,111 @@ }; return ` -
+
No.${issue.project_sequence_no || '-'} ${isUrgent() ? '๊ธด๊ธ‰' : ''}
- ${formatKSTDate(issue.report_date)} +
+ + +
- -
-
- -
${projectName}
+ + ${issue.photo_path || issue.photo_path2 ? ` +
+ +
+ ${issue.photo_path ? ` +
+ +
+ ` : ` +
+ ์‚ฌ์ง„ ์—†์Œ +
+ `} + ${issue.photo_path2 ? ` +
+ +
+ ` : ` +
+ ์‚ฌ์ง„ ์—†์Œ +
+ `} +
- -
- -
${issue.final_description || issue.description || '-'}
-
- -
- -
${getCategoryText(issue.final_category || issue.category)}
+ ` : ` +
+ +
+
+ ์‚ฌ์ง„ ์—†์Œ +
+
+ ์‚ฌ์ง„ ์—†์Œ +
+
+ `} + + +
+ +
${issue.final_description || issue.description || '์ค‘๋ณต์ž‘์—… ์‹ ๊ณ ์šฉ'}
+
+ + +
+ + ${getCategoryText(issue.final_category || issue.category)}
- -
${issue.solution || '-'}
+ +
- -
${getDepartmentText(issue.responsible_department)}
+ +
- -
${issue.responsible_person || '-'}
+ +
- -
${formatKSTDate(issue.expected_completion_date)}
+ +
-
${getDepartmentText(issue.cause_department)}
+
${getDepartmentText(issue.cause_department)}
- - ${issue.photo_path || issue.photo_path2 ? ` -
- -
- ${issue.photo_path ? ` -
- -
- ` : ''} - ${issue.photo_path2 ? ` -
- -
- ` : ''} -
-
- ` : ''} -
@@ -584,6 +663,22 @@ } }); + // ๋‚ ์งœ ๊ทธ๋ฃน ํ† ๊ธ€ ๊ธฐ๋Šฅ + function toggleDateGroup(dateKey) { + const content = document.getElementById(`content-${dateKey}`); + const chevron = document.getElementById(`chevron-${dateKey}`); + + if (content.style.display === 'none') { + content.style.display = 'block'; + chevron.classList.remove('fa-chevron-right'); + chevron.classList.add('fa-chevron-down'); + } else { + content.style.display = 'none'; + chevron.classList.remove('fa-chevron-down'); + chevron.classList.add('fa-chevron-right'); + } + } + // ํ•„ํ„ฐ ๋ฐ ์ •๋ ฌ ํ•จ์ˆ˜๋“ค function filterByProject() { const projectId = document.getElementById('projectFilter').value;