From 642685a7c7de56fe62decfe7d2213d99bf2b64ea Mon Sep 17 00:00:00 2001 From: Hyungi Ahn Date: Sun, 26 Oct 2025 10:11:36 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=EC=A7=84=ED=96=89=20=EC=A4=91=20?= =?UTF-8?q?=ED=83=AD=20=EC=B9=B4=EB=93=9C=20=ED=98=95=EC=8B=9D=EC=9C=BC?= =?UTF-8?q?=EB=A1=9C=20=EA=B0=9C=ED=8E=B8=20-=20=EC=9E=85=EB=A0=A5=20?= =?UTF-8?q?=ED=8E=B8=EC=9D=98=EC=84=B1=20=EB=8C=80=ED=8F=AD=20=ED=96=A5?= =?UTF-8?q?=EC=83=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 🎯 Card-Based Interface for In-Progress Issues: - ν…Œμ΄λΈ” ν˜•νƒœμ—μ„œ μΉ΄λ“œ ν˜•νƒœλ‘œ μ™„μ „ λ³€κ²½ - μž…λ ₯ν•˜κΈ° νŽΈν•œ μ‚¬μš©μž μΉœν™”μ  μΈν„°νŽ˜μ΄μŠ€ κ΅¬ν˜„ - 진행 쀑/μ™„λ£Œλ¨ 탭별 λ‹€λ₯Έ λ ˆμ΄μ•„μ›ƒ 적용 πŸ“‹ Enhanced Card Layout: - 2컬럼 κ·Έλ¦¬λ“œ λ ˆμ΄μ•„μ›ƒ (기본정보 vs νŽΈμ§‘μ •λ³΄) - μΉ΄λ“œ 헀더: No. + ν”„λ‘œμ νŠΈλͺ… + μ•‘μ…˜ λ²„νŠΌλ“€ - μ™Όμͺ½: μ½κΈ°μ „μš© 정보 (λ‚΄μš©, 원인, μ—…λ‘œλ“œμ‚¬μ§„) - 였λ₯Έμͺ½: νŽΈμ§‘κ°€λŠ₯ 정보 (ν•΄κ²°λ°©μ•ˆ, λ‹΄λ‹ΉλΆ€μ„œ/λ‹΄λ‹Ήμž, μ˜ˆμƒμΌ) 🎨 Visual Improvements: - μ•„μ΄μ½˜κ³Ό μƒ‰μƒμœΌλ‘œ ν•„λ“œ ꡬ뢄 - ν˜Έλ²„ 효과 (μΉ΄λ“œ μƒμŠΉ, μž…λ ₯ ν•„λ“œ ν™•λŒ€) - μƒνƒœ 배지 및 진행 상황 ν‘œμ‹œ - 사진 썸넀일 κ°œμ„  (ν…Œλ‘λ¦¬, ν˜Έλ²„ 효과) ✏️ Input Field Enhancements: - ν•΄κ²°λ°©μ•ˆ: 3쀄 textarea with placeholder - λ‹΄λ‹ΉλΆ€μ„œ: μ•„μ΄μ½˜μ΄ μžˆλŠ” select λ“œλ‘­λ‹€μš΄ - λ‹΄λ‹Ήμž: placeholderκ°€ μžˆλŠ” text input - μ‘°μΉ˜μ˜ˆμƒμΌ: date picker with μ•„μ΄μ½˜ - λͺ¨λ“  ν•„λ“œμ— focus 효과 적용 πŸ”„ Tab-Specific Rendering: - 진행 쀑: μΉ΄λ“œ ν˜•μ‹ (space-y-4 μ»¨ν…Œμ΄λ„ˆ) - μ™„λ£Œλ¨: ν…Œμ΄λΈ” ν˜•μ‹ (κΈ°μ‘΄ μœ μ§€) - displayIssues()μ—μ„œ currentTab에 λ”°λ₯Έ 쑰건뢀 λ Œλ”λ§ 🎯 User Experience Focus: - μž…λ ₯ν•˜κΈ° νŽΈν•œ 넓은 ν•„λ“œλ“€ - μ‹œκ°μ μœΌλ‘œ κ΅¬λΆ„λ˜λŠ” 정보 μ˜μ—­ - 직관적인 μ•„μ΄μ½˜κ³Ό 라벨링 - λΆ€λ“œλŸ¬μš΄ μ• λ‹ˆλ©”μ΄μ…˜ 효과 πŸ”§ Technical Implementation: - createInProgressRow(): μΉ΄λ“œ HTML 생성 - CSS μ• λ‹ˆλ©”μ΄μ…˜ 및 ν˜Έλ²„ 효과 - λ°˜μ‘ν˜• κ·Έλ¦¬λ“œ λ ˆμ΄μ•„μ›ƒ (lg:grid-cols-2) - μ•„μ΄μ½˜ μ •λ ¬ 및 μŠ€νƒ€μΌλ§ Expected Result: βœ… 진행 쀑 이슈 μž…λ ₯이 훨씬 νŽΈλ¦¬ν•΄μ§ βœ… μ‹œκ°μ μœΌλ‘œ κ΅¬λΆ„λ˜λŠ” 정보 μ˜μ—­ βœ… μΉ΄λ“œλ³„ 독립적인 μž‘μ—… 곡간 제곡 βœ… μ™„λ£Œλ¨μ€ κΈ°μ‘΄ ν…Œμ΄λΈ” ν˜•νƒœ μœ μ§€ --- frontend/issues-management.html | 191 +++++++++++++++++++++++++------- 1 file changed, 148 insertions(+), 43 deletions(-) diff --git a/frontend/issues-management.html b/frontend/issues-management.html index ae48593..a4c4a6a 100644 --- a/frontend/issues-management.html +++ b/frontend/issues-management.html @@ -181,6 +181,36 @@ max-height: 0; } + /* 진행 쀑 μΉ΄λ“œ μŠ€νƒ€μΌ */ + .issue-card { + transition: all 0.2s ease; + } + + .issue-card:hover { + transform: translateY(-2px); + } + + .issue-card label { + font-weight: 500; + } + + .issue-card input:focus, + .issue-card select:focus, + .issue-card textarea:focus { + transform: scale(1.01); + transition: transform 0.1s ease; + } + + .issue-card .bg-gray-50 { + border-left: 4px solid #e5e7eb; + } + + /* μΉ΄λ“œ λ‚΄ μ•„μ΄μ½˜ μŠ€νƒ€μΌ */ + .issue-card i { + width: 16px; + text-align: center; + } + .badge-new { background: #dbeafe; color: #1e40af; } .badge-processing { background: #fef3c7; color: #92400e; } .badge-pending { background: #ede9fe; color: #7c3aed; } @@ -605,18 +635,25 @@
-
- - - - ${createTableHeader()} - - - - ${issues.map(issue => createIssueRow(issue)).join('')} - -
-
+ ${currentTab === 'in_progress' ? + // 진행 쀑: μΉ΄λ“œ ν˜•μ‹ + `
+ ${issues.map(issue => createIssueRow(issue)).join('')} +
` : + // μ™„λ£Œλ¨: ν…Œμ΄λΈ” ν˜•μ‹ + `
+ + + + ${createTableHeader()} + + + + ${issues.map(issue => createIssueRow(issue)).join('')} + +
+
` + }
`; @@ -640,40 +677,105 @@ } } - // 진행 쀑 ν–‰ 생성 + // 진행 쀑 μΉ΄λ“œ 생성 function createInProgressRow(issue, project) { return ` - - ${issue.project_sequence_no || '-'} - ${project ? project.project_name : '-'} - ${issue.final_description || issue.description} - ${getCategoryText(issue.final_category || issue.category)} - - ${createEditableField('solution', issue.solution || '', 'textarea', issue.id, true)} - - - ${createEditableField('responsible_department', issue.responsible_department || '', 'select', issue.id, true, getDepartmentOptions())} - - - ${createEditableField('responsible_person', issue.responsible_person || '', 'text', issue.id, true)} - - - ${createEditableField('expected_completion_date', issue.expected_completion_date ? issue.expected_completion_date.split('T')[0] : '', 'date', issue.id, true)} - - - - - -
- ${issue.photo_path ? `μ—…λ‘œλ“œ 사진 1` : ''} - ${issue.photo_path2 ? `μ—…λ‘œλ“œ 사진 2` : ''} - ${!issue.photo_path && !issue.photo_path2 ? '-' : ''} +
+ +
+
+ No.${issue.project_sequence_no || '-'} +

${project ? project.project_name : 'ν”„λ‘œμ νŠΈ 미지정'}

- - - - - +
+ + +
+
+ + +
+ +
+
+ +
+ ${issue.final_description || issue.description} +
+
+ +
+ +
+ + ${getCategoryText(issue.final_category || issue.category)} + +
+
+ +
+ +
+ ${issue.photo_path ? `μ—…λ‘œλ“œ 사진 1` : '
사진 μ—†μŒ
'} + ${issue.photo_path2 ? `μ—…λ‘œλ“œ 사진 2` : '
사진 μ—†μŒ
'} +
+
+
+ + +
+
+ + +
+ +
+
+ + +
+ +
+ + +
+
+ +
+ + +
+ + +
+
+ + 진행 쀑 + + + 신고일: ${new Date(issue.report_date).toLocaleDateString('ko-KR')} + +
+
+
+
+
`; } @@ -951,6 +1053,9 @@ let value = element.value.trim(); if (value === '' || value === 'μ„ νƒν•˜μ„Έμš”') { value = null; + } else if (field === 'expected_completion_date' && value) { + // λ‚ μ§œ ν•„λ“œλŠ” ISO datetime ν˜•μ‹μœΌλ‘œ λ³€ν™˜ + value = value + 'T00:00:00'; } updates[field] = value; }