From 33307bb2435579c2838ad370ed1245f48b616520 Mon Sep 17 00:00:00 2001 From: Hyungi Ahn Date: Mon, 3 Nov 2025 13:02:30 +0900 Subject: [PATCH] =?UTF-8?q?enhance:=20=EC=9E=91=EC=97=85=20=EC=9E=85?= =?UTF-8?q?=EB=A0=A5=20UI=20=EB=8C=80=ED=8F=AD=20=EA=B0=9C=EC=84=A0=20-=20?= =?UTF-8?q?=EB=AA=A8=EB=8D=98=ED=95=98=EA=B3=A0=20=EC=A7=81=EA=B4=80?= =?UTF-8?q?=EC=A0=81=EC=9D=B8=20=EC=9D=B8=ED=84=B0=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=8A=A4=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 🎨 λͺ¨λ˜ν•œ μΉ΄λ“œν˜• λ ˆμ΄μ•„μ›ƒ: 1. μž‘μ—… ν•­λͺ© λ””μžμΈ μ™„μ „ 개편: - κ·ΈλΌλ°μ΄μ…˜ λ°°κ²½ (primary β†’ tertiary) - 상단 컬러 λ°” ν˜Έλ²„ 효과 - ν–₯μƒλœ 그림자 및 ν˜Έλ²„ μ• λ‹ˆλ©”μ΄μ…˜ - 2xl ν…Œλ‘λ¦¬ 반경으둜 λΆ€λ“œλŸ¬μš΄ μ™Έκ΄€ 2. 폼 ν•„λ“œ κ·Έλ£Ήν™”: - form-field-group μ»¨ν…Œμ΄λ„ˆ λ„μž… - μ•„μ΄μ½˜κ³Ό 라벨 μ‘°ν•©μœΌλ‘œ 직관성 ν–₯상 - 포컀슀 μƒνƒœ μ‹œκ°μ  ν”Όλ“œλ°± - ν˜Έλ²„ 효과둜 μƒν˜Έμž‘μš©μ„± μ¦λŒ€ ✨ μ—λŸ¬ μœ ν˜• 쑰건뢀 ν‘œμ‹œ κ°œμ„ : 1. μŠ€λ§ˆνŠΈν•œ UI 둜직: - 업무 μƒνƒœκ°€ 'μ—λŸ¬'일 λ•Œλ§Œ μ—λŸ¬ μœ ν˜• μ„Ήμ…˜ ν‘œμ‹œ - λΆ€λ“œλŸ¬μš΄ μŠ¬λΌμ΄λ“œ λ‹€μš΄ μ• λ‹ˆλ©”μ΄μ…˜ (0.4s cubic-bezier) - opacity, max-height, transform μ‘°ν•© μ• λ‹ˆλ©”μ΄μ…˜ 2. μ‹œκ°μ  ꡬ뢄: - μ—λŸ¬ μ„Ήμ…˜: error-50 β†’ warning-50 κ·ΈλΌλ°μ΄μ…˜ - μ—λŸ¬ ν…Œλ‘λ¦¬: error-200 컬러 - μ—λŸ¬ μ•„μ΄μ½˜ 및 라벨: error-500/700 컬러 πŸš€ λΉ λ₯Έ μ‹œκ°„ λ²„νŠΌ 고도화: 1. 프리미엄 λ””μžμΈ: - κ·ΈλΌλ°μ΄μ…˜ λ°°κ²½ (primary-100 β†’ primary-200) - ν˜Έλ²„ μ‹œ: primary-500 β†’ primary-600 κ·ΈλΌλ°μ΄μ…˜ - λ°˜μ§μ΄λŠ” 효과 (::before μŠ¬λΌμ΄λ“œ μ• λ‹ˆλ©”μ΄μ…˜) - 3D λ³€ν˜• 효과 (scale, translateY) 2. ν–₯μƒλœ μƒν˜Έμž‘μš©: - 30λΆ„ μ˜΅μ…˜ μΆ”κ°€ (0.5μ‹œκ°„) - 클릭 μ‹œ μŠ€μΌ€μΌ μ• λ‹ˆλ©”μ΄μ…˜ - 쀑앙 μ •λ ¬ 및 μ΅œμ†Œ λ„ˆλΉ„ μ„€μ • - cubic-bezier μ „ν™˜ 효과 🎯 μ‚¬μš©μž κ²½ν—˜ κ°œμ„ : 1. 직관적인 μΈν„°νŽ˜μ΄μŠ€: - μ•„μ΄μ½˜μœΌλ‘œ ν•„λ“œ ꡬ뢄 (πŸ—οΈ ν”„λ‘œμ νŠΈ, βš™οΈ μž‘μ—…μœ ν˜•, πŸ“Š μ—…λ¬΄μƒνƒœ, ⚠️ μ—λŸ¬μœ ν˜•, ⏰ μ‹œκ°„) - λͺ…ν™•ν•œ ν”Œλ ˆμ΄μŠ€ν™€λ” ν…μŠ€νŠΈ - 논리적인 ν•„λ“œ 배치 (2μ—΄ κ·Έλ¦¬λ“œ) 2. λ°˜μ‘ν˜• μ΅œμ ν™”: - λͺ¨λ°”μΌμ—μ„œ μ μ ˆν•œ νŒ¨λ”© 및 폰트 크기 - ν„°μΉ˜ μΉœν™”μ  λ²„νŠΌ 크기 - μœ μ—°ν•œ κ·Έλ¦¬λ“œ λ ˆμ΄μ•„μ›ƒ πŸ”§ 기술적 κ°œμ„ : 1. JavaScript 둜직 κ°•ν™”: - setupWorkEntryEvents ν•¨μˆ˜ μ™„μ „ μž¬μž‘μ„± - 폼 ν•„λ“œ 포컀슀 효과 μΆ”κ°€ - μ—λŸ¬ νƒ€μž… 쑰건뢀 ν‘œμ‹œ 둜직 κ°œμ„  - λ²„νŠΌ 클릭 ν”Όλ“œλ°± μ• λ‹ˆλ©”μ΄μ…˜ 2. CSS μ•„ν‚€ν…μ²˜: - μ»΄ν¬λ„ŒνŠΈ 기반 μŠ€νƒ€μΌλ§ - CSS λ³€μˆ˜ ν™œμš©ν•œ μΌκ΄€λœ λ””μžμΈ - μ• λ‹ˆλ©”μ΄μ…˜ ν‚€ν”„λ ˆμž„ μ •μ˜ - 계측적 μŠ€νƒ€μΌ ꡬ쑰 🎯 κ²°κ³Ό: - ν—ˆμ ‘ν–ˆλ˜ UI β†’ ν”„λ‘œνŽ˜μ…”λ„ν•œ λͺ¨λ˜ μΈν„°νŽ˜μ΄μŠ€ - μ—λŸ¬ μœ ν˜• 쑰건뢀 ν‘œμ‹œλ‘œ μ‚¬μš©μ„± λŒ€ν­ ν–₯상 - 직관적이고 μ•„λ¦„λ‹€μš΄ μž‘μ—… μž…λ ₯ κ²½ν—˜ - λŒ€μ‹œλ³΄λ“œμ™€ μ™„λ²½ν•œ λ””μžμΈ 일관성 ν…ŒμŠ€νŠΈ: http://localhost:20000/pages/common/daily-work-report.html --- web-ui/css/daily-work-report.css | 205 ++++++++++++++++++++++++++----- web-ui/js/daily-work-report.js | 141 ++++++++++++++------- 2 files changed, 270 insertions(+), 76 deletions(-) diff --git a/web-ui/css/daily-work-report.css b/web-ui/css/daily-work-report.css index 3ba8f76..c085e6b 100644 --- a/web-ui/css/daily-work-report.css +++ b/web-ui/css/daily-work-report.css @@ -247,6 +247,7 @@ transition: all 0.3s ease; text-align: center; font-weight: var(--font-semibold); + font-size: var(--text-lg); min-height: 100px; display: flex; align-items: center; @@ -293,40 +294,67 @@ /* μž‘μ—… ν•­λͺ© */ .work-entry { - background: var(--bg-tertiary); + background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-tertiary) 100%); border: 2px solid var(--border-light); - border-radius: var(--radius-xl); - padding: var(--space-6); + border-radius: var(--radius-2xl); + padding: var(--space-8); margin-bottom: var(--space-6); position: relative; transition: var(--transition-normal); + box-shadow: var(--shadow-md); + overflow: hidden; +} + +.work-entry::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 4px; + background: linear-gradient(90deg, var(--primary-500), var(--secondary-500)); + opacity: 0; + transition: opacity 0.3s ease; } .work-entry:hover { - border-color: var(--primary-200); - box-shadow: var(--shadow-md); + border-color: var(--primary-300); + box-shadow: var(--shadow-lg); + transform: translateY(-2px); +} + +.work-entry:hover::before { + opacity: 1; } .work-entry-header { display: flex; justify-content: space-between; align-items: center; - margin-bottom: var(--space-4); - padding-bottom: var(--space-3); - border-bottom: 1px solid var(--border-light); + margin-bottom: var(--space-6); + padding-bottom: var(--space-4); + border-bottom: 2px solid var(--border-light); } .work-entry-title { - font-size: var(--text-lg); + font-size: var(--text-xl); font-weight: var(--font-bold); color: var(--text-primary); + display: flex; + align-items: center; + gap: var(--space-2); +} + +.work-entry-title::before { + content: 'πŸ”§'; + font-size: var(--text-lg); } .remove-work-btn { - width: 36px; - height: 36px; + width: 40px; + height: 40px; border-radius: var(--radius-full); - background: var(--error-500); + background: linear-gradient(135deg, var(--error-500), var(--error-600)); color: white; border: none; cursor: pointer; @@ -335,28 +363,113 @@ justify-content: center; transition: var(--transition-normal); font-size: var(--text-lg); + box-shadow: var(--shadow-sm); } .remove-work-btn:hover { - background: var(--error-600); - transform: scale(1.1); + background: linear-gradient(135deg, var(--error-600), var(--error-700)); + transform: scale(1.1) rotate(90deg); + box-shadow: var(--shadow-md); } .work-entry-grid { display: grid; grid-template-columns: 1fr 1fr; - gap: var(--space-4); + gap: var(--space-6); } .work-entry-full { grid-column: span 2; } +/* 폼 ν•„λ“œ κ·Έλ£Ή */ +.form-field-group { + background: var(--bg-primary); + border-radius: var(--radius-lg); + padding: var(--space-5); + border: 1px solid var(--border-light); + transition: var(--transition-normal); +} + +.form-field-group:hover { + border-color: var(--primary-200); + box-shadow: var(--shadow-sm); +} + +.form-field-group.focused { + border-color: var(--primary-500); + box-shadow: 0 0 0 3px var(--primary-100); +} + +.form-field-label { + display: flex; + align-items: center; + gap: var(--space-2); + margin-bottom: var(--space-3); + font-weight: var(--font-semibold); + color: var(--text-primary); + font-size: var(--text-base); +} + +.form-field-icon { + font-size: var(--text-lg); +} + +.form-select { + width: 100%; + padding: var(--space-4); + border: 2px solid var(--border-light); + border-radius: var(--radius-lg); + font-size: var(--text-base); + background: var(--bg-primary); + transition: var(--transition-normal); + cursor: pointer; +} + +.form-select:focus { + outline: none; + border-color: var(--primary-500); + box-shadow: 0 0 0 3px var(--primary-100); +} + +.form-select:hover { + border-color: var(--primary-300); +} + +/* μ—λŸ¬ μœ ν˜• μ„Ήμ…˜ */ +.error-type-section { + background: linear-gradient(135deg, var(--error-50) 0%, var(--warning-50) 100%); + border: 2px solid var(--error-200); + border-radius: var(--radius-xl); + padding: var(--space-6); + margin-top: var(--space-4); + opacity: 0; + max-height: 0; + overflow: hidden; + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + transform: translateY(-10px); +} + +.error-type-section.visible { + opacity: 1; + max-height: 200px; + transform: translateY(0); +} + +.error-type-section .form-field-label { + color: var(--error-700); +} + +.error-type-section .form-field-icon { + color: var(--error-500); +} + /* μ‹œκ°„ μž…λ ₯ */ .time-input-section { - background: var(--primary-50); - border-radius: var(--radius-lg); - padding: var(--space-4); + background: linear-gradient(135deg, var(--primary-50) 0%, var(--secondary-50) 100%); + border: 2px solid var(--primary-200); + border-radius: var(--radius-xl); + padding: var(--space-6); margin-top: var(--space-4); } @@ -369,27 +482,47 @@ } .quick-time-btn { - padding: var(--space-2) var(--space-4); - background: var(--bg-primary); - border: 2px solid var(--primary-200); - border-radius: var(--radius-lg); + padding: var(--space-3) var(--space-4); + background: linear-gradient(135deg, var(--primary-100), var(--primary-200)); + border: 2px solid var(--primary-300); + border-radius: var(--radius-xl); cursor: pointer; font-size: var(--text-sm); font-weight: var(--font-semibold); - transition: var(--transition-normal); + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); color: var(--primary-700); + min-width: 60px; + text-align: center; + box-shadow: var(--shadow-sm); + position: relative; + overflow: hidden; +} + +.quick-time-btn::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); + transition: left 0.5s ease; } .quick-time-btn:hover { + background: linear-gradient(135deg, var(--primary-500), var(--primary-600)); + color: white; + transform: translateY(-2px) scale(1.05); + box-shadow: var(--shadow-lg); border-color: var(--primary-400); - background: var(--primary-100); - transform: translateY(-1px); +} + +.quick-time-btn:hover::before { + left: 100%; } .quick-time-btn:active { - background: var(--primary-500); - color: white; - transform: translateY(0); + transform: translateY(0) scale(0.98); } /* 총 μž‘μ—…μ‹œκ°„ ν‘œμ‹œ */ @@ -540,7 +673,7 @@ .worker-card { min-height: 80px; padding: var(--space-3); - font-size: var(--text-sm); + font-size: var(--text-base); } .work-entry-grid { @@ -570,6 +703,20 @@ } } +/* μŠ¬λΌμ΄λ“œ λ‹€μš΄ μ• λ‹ˆλ©”μ΄μ…˜ */ +@keyframes slideDown { + from { + opacity: 0; + max-height: 0; + transform: translateY(-10px); + } + to { + opacity: 1; + max-height: 200px; + transform: translateY(0); + } +} + @media (max-width: 480px) { .work-report-header h1 { font-size: var(--text-2xl); diff --git a/web-ui/js/daily-work-report.js b/web-ui/js/daily-work-report.js index adf60eb..1285673 100644 --- a/web-ui/js/daily-work-report.js +++ b/web-ui/js/daily-work-report.js @@ -260,61 +260,78 @@ function addWorkEntry() { entryDiv.innerHTML = `
-
μž‘μ—… ${workEntryCounter}
- +
μž‘μ—… ν•­λͺ© #${workEntryCounter}
+
-
-
- - + ${projects.map(p => ``).join('')}
-
- - + ${workTypes.map(wt => ``).join('')}
-
-
- - + ${workStatusTypes.map(ws => ``).join('')}
- -
- - -
-
-
- - -
-
1μ‹œκ°„
-
2μ‹œκ°„
-
4μ‹œκ°„
-
8μ‹œκ°„
-
+
+
+ ⚠️ + μ—λŸ¬ μœ ν˜• +
+ +
+ +
+
+ ⏰ + μž‘μ—… μ‹œκ°„ (μ‹œκ°„) +
+ +
+ + + + +
`; @@ -326,26 +343,56 @@ function addWorkEntry() { // μž‘μ—… ν•­λͺ© 이벀트 μ„€μ • function setupWorkEntryEvents(entryDiv) { const timeInput = entryDiv.querySelector('.time-input'); + const workStatusSelect = entryDiv.querySelector('.work-status-select'); + const errorTypeSection = entryDiv.querySelector('.error-type-section'); + const errorTypeSelect = entryDiv.querySelector('.error-type-select'); + + // μ‹œκ°„ μž…λ ₯ 이벀트 timeInput.addEventListener('input', updateTotalHours); + // λΉ λ₯Έ μ‹œκ°„ λ²„νŠΌ 이벀트 entryDiv.querySelectorAll('.quick-time-btn').forEach(btn => { - btn.addEventListener('click', () => { + btn.addEventListener('click', (e) => { + e.preventDefault(); timeInput.value = btn.dataset.hours; updateTotalHours(); + + // λ²„νŠΌ 클릭 효과 + btn.style.transform = 'scale(0.95)'; + setTimeout(() => { + btn.style.transform = ''; + }, 150); }); }); - const workStatusSelect = entryDiv.querySelector('.work-status-select'); - const errorTypeSection = entryDiv.querySelector('.error-type-section'); - + // 업무 μƒνƒœ λ³€κ²½ μ‹œ μ—λŸ¬ μœ ν˜• μ„Ήμ…˜ ν† κΈ€ workStatusSelect.addEventListener('change', (e) => { - if (e.target.value === '2') { + const isError = e.target.value === '2'; // μ—λŸ¬ μƒνƒœ IDκ°€ 2라고 κ°€μ • + + if (isError) { errorTypeSection.classList.add('visible'); - errorTypeSection.querySelector('.error-type-select').required = true; + errorTypeSelect.required = true; + + // μ—λŸ¬ μƒνƒœμΌ λ•Œ μ‹œκ°μ  ν”Όλ“œλ°± + errorTypeSection.style.animation = 'slideDown 0.4s ease-out'; } else { errorTypeSection.classList.remove('visible'); - errorTypeSection.querySelector('.error-type-select').required = false; - errorTypeSection.querySelector('.error-type-select').value = ''; + errorTypeSelect.required = false; + errorTypeSelect.value = ''; + } + }); + + // 폼 ν•„λ“œ 포컀슀 효과 + entryDiv.querySelectorAll('.form-field-group').forEach(group => { + const input = group.querySelector('select, input'); + if (input) { + input.addEventListener('focus', () => { + group.classList.add('focused'); + }); + + input.addEventListener('blur', () => { + group.classList.remove('focused'); + }); } }); }