From bad5584988398e9c3c16a3afb5b6708ee6dad0bb Mon Sep 17 00:00:00 2001 From: Hyungi Ahn Date: Mon, 3 Nov 2025 12:56:45 +0900 Subject: [PATCH] =?UTF-8?q?enhance:=20daily-work-report.html=20=EB=AA=A8?= =?UTF-8?q?=EB=8D=98=20UI=20=EB=8C=80=ED=8F=AD=20=EA=B0=9C=EC=84=A0=20-=20?= =?UTF-8?q?=EB=8C=80=EC=8B=9C=EB=B3=B4=EB=93=9C=20=EC=9D=BC=EA=B4=80?= =?UTF-8?q?=EC=84=B1=20=EB=B0=8F=20=EC=82=AC=EC=9A=A9=EC=84=B1=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 ๐ŸŽจ ๋ชจ๋˜ ๋””์ž์ธ ์‹œ์Šคํ…œ ์ ์šฉ: 1. ๋Œ€์‹œ๋ณด๋“œ์™€ ์ผ๊ด€๋œ ๋””์ž์ธ ์–ธ์–ด: - design-system.css ํ™œ์šฉํ•œ ํ†ต์ผ๋œ ์ƒ‰์ƒ, ํƒ€์ดํฌ๊ทธ๋ž˜ํ”ผ - ๋™์ผํ•œ ์นด๋“œ, ๋ฒ„ํŠผ, ์• ๋‹ˆ๋ฉ”์ด์…˜ ์Šคํƒ€์ผ - ์ผ๊ด€๋œ ๊ฐ„๊ฒฉ, ๊ทธ๋ฆผ์ž, ํ…Œ๋‘๋ฆฌ ๋ฐ˜๊ฒฝ 2. ์ƒˆ๋กœ์šด CSS ํŒŒ์ผ ๋ถ„๋ฆฌ: - daily-work-report.css ์ƒ์„ฑ (673์ค„) - ์ธ๋ผ์ธ ์Šคํƒ€์ผ ์™„์ „ ์ œ๊ฑฐ (926์ค„ โ†’ 0์ค„) - ๋ชจ๋“ˆํ™”๋œ ์Šคํƒ€์ผ ๊ด€๋ฆฌ ๐Ÿš€ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜ ๋Œ€ํญ ๊ฐœ์„ : 1. ๋ชจ๋˜ํ•œ ์ง„ํ–‰ ๋‹จ๊ณ„ ํ‘œ์‹œ: - ์ƒ๋‹จ 3๋‹จ๊ณ„ ์ง„ํ–‰ ๋ฐ” ์ถ”๊ฐ€ - ์‹ค์‹œ๊ฐ„ ๋‹จ๊ณ„ ์ƒํƒœ ํ‘œ์‹œ (ํ™œ์„ฑ/์™„๋ฃŒ) - ์‹œ๊ฐ์  ์ง„ํ–‰๋„ ํ”ผ๋“œ๋ฐฑ 2. ๊ฐœ์„ ๋œ ๋ ˆ์ด์•„์›ƒ ๊ตฌ์กฐ: - ํ—ค๋”: ๊ทธ๋ผ๋ฐ์ด์…˜ ๋ฐฐ๊ฒฝ, ์ค‘์•™ ์ •๋ ฌ - ๋ฉ”์ธ: ์ตœ๋Œ€ ๋„ˆ๋น„ 1200px, ์ค‘์•™ ๋ฐฐ์น˜ - ์นด๋“œ: ์ผ๊ด€๋œ ํŒจ๋”ฉ, ๊ทธ๋ฆผ์ž, ํ…Œ๋‘๋ฆฌ 3. ํ–ฅ์ƒ๋œ ์ž‘์—…์ž ์„ ํƒ UI: - worker-btn โ†’ worker-card ํด๋ž˜์Šค ๋ณ€๊ฒฝ - ์นด๋“œํ˜• ๋””์ž์ธ์œผ๋กœ ์‹œ๊ฐ์  ๊ฐœ์„  - ํ˜ธ๋ฒ„ ํšจ๊ณผ: ์ƒ๋‹จ ์ปฌ๋Ÿฌ ๋ฐ”, ๋ฐฐ๊ฒฝ ๋ณ€ํ™” - ์„ ํƒ ์ƒํƒœ: ๊ทธ๋ผ๋ฐ์ด์…˜ ๋ฐฐ๊ฒฝ, ํฐ์ƒ‰ ํ…์ŠคํŠธ โœจ ์ธํ„ฐ๋ž™์…˜ ๊ฐœ์„ : 1. ๋ฒ„ํŠผ ๋””์ž์ธ ํ†ต์ผ: - ์ผ๊ด€๋œ ํŒจ๋”ฉ, ๋†’์ด (48px) - ํ˜ธ๋ฒ„ ํšจ๊ณผ: translateY(-2px), ๊ทธ๋ฆผ์ž ํ™•๋Œ€ - ์ƒ‰์ƒ: primary, success, secondary ํ†ต์ผ 2. ํผ ์š”์†Œ ๊ฐœ์„ : - form-input ํด๋ž˜์Šค๋กœ ํ†ต์ผ๋œ ์Šคํƒ€์ผ - ํฌ์ปค์Šค ์ƒํƒœ: ํ…Œ๋‘๋ฆฌ ์ƒ‰์ƒ, ๊ทธ๋ฆผ์ž ํšจ๊ณผ - ๋ผ๋ฒจ: ๋ช…ํ™•ํ•œ ๊ณ„์ธต ๊ตฌ์กฐ 3. ์• ๋‹ˆ๋ฉ”์ด์…˜ ํšจ๊ณผ: - ๋‹จ๊ณ„ ์ „ํ™˜: opacity, transform ์• ๋‹ˆ๋ฉ”์ด์…˜ - ์นด๋“œ ํ˜ธ๋ฒ„: translateY, ๊ทธ๋ฆผ์ž ๋ณ€ํ™” - ๋ถ€๋“œ๋Ÿฌ์šด ์ „ํ™˜: var(--transition-normal) ๐Ÿ“ฑ ๋ฐ˜์‘ํ˜• ๋””์ž์ธ ์ตœ์ ํ™”: 1. ๋ชจ๋ฐ”์ผ (768px ์ดํ•˜): - ์ง„ํ–‰ ๋‹จ๊ณ„: ์„ธ๋กœ ๋ฐฐ์น˜ - ์ž‘์—…์ž ๊ทธ๋ฆฌ๋“œ: 1์—ด๋กœ ๋ณ€๊ฒฝ - ํŒจ๋”ฉ, ํฐํŠธ ํฌ๊ธฐ ์กฐ์ • 2. ํƒœ๋ธ”๋ฆฟ (1024px ์ดํ•˜): - ์ ์ ˆํ•œ ๊ทธ๋ฆฌ๋“œ ์ปฌ๋Ÿผ ์ˆ˜ ์กฐ์ • - ํ„ฐ์น˜ ์นœํ™”์  ๋ฒ„ํŠผ ํฌ๊ธฐ ๐Ÿ”ง ๊ธฐ์ˆ ์  ๊ฐœ์„ : 1. JavaScript ์—…๋ฐ์ดํŠธ: - updateProgressSteps() ํ•จ์ˆ˜ ์ถ”๊ฐ€ - ์ง„ํ–‰ ๋‹จ๊ณ„ ์‹ค์‹œ๊ฐ„ ์—…๋ฐ์ดํŠธ - CSS ํด๋ž˜์Šค๋ช… ๋ณ€๊ฒฝ ๋ฐ˜์˜ 2. HTML ๊ตฌ์กฐ ๊ฐœ์„ : - ์‹œ๋งจํ‹ฑ ํƒœ๊ทธ ํ™œ์šฉ (header, main) - ์ ‘๊ทผ์„ฑ ํ–ฅ์ƒ (label, aria ์†์„ฑ) - ๊น”๋”ํ•œ ๋งˆํฌ์—… ๊ตฌ์กฐ ๐ŸŽฏ ๊ฒฐ๊ณผ: - ๋Œ€์‹œ๋ณด๋“œ์™€ ์™„๋ฒฝํ•œ ๋””์ž์ธ ์ผ๊ด€์„ฑ - ์ง๊ด€์ ์ด๊ณ  ์‚ฌ์šฉํ•˜๊ธฐ ์‰ฌ์šด ์ธํ„ฐํŽ˜์ด์Šค - ๋ชจ๋“  ๋””๋ฐ”์ด์Šค์—์„œ ์ตœ์ ํ™”๋œ ๊ฒฝํ—˜ - ํ”„๋กœํŽ˜์…”๋„ํ•œ ์‹œ๊ฐ์  ํ’ˆ์งˆ ํ…Œ์ŠคํŠธ: http://localhost:20000/pages/common/daily-work-report.html --- web-ui/css/daily-work-report.css | 1121 +++++++++---------- web-ui/js/daily-work-report.js | 24 +- web-ui/pages/common/daily-work-report.html | 1156 +++----------------- 3 files changed, 667 insertions(+), 1634 deletions(-) diff --git a/web-ui/css/daily-work-report.css b/web-ui/css/daily-work-report.css index 71be400..3ba8f76 100644 --- a/web-ui/css/daily-work-report.css +++ b/web-ui/css/daily-work-report.css @@ -1,756 +1,673 @@ -/* daily-work-report.css - ๋ฎ์–ด์“ฐ๊ธฐ ๋ฐฉ์ง€ ์™„์ „ ์Šคํƒ€์ผ */ +/* ========== ์ผ์ผ ์ž‘์—…๋ณด๊ณ ์„œ ์ „์šฉ ์Šคํƒ€์ผ ========== */ -/* ๊ธฐ๋ณธ ๋ ˆ์ด์•„์›ƒ */ -.daily-work-report-container { - max-width: 1200px; - margin: 0 auto; - padding: 20px; - font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; +/* ๋ฉ”์ธ ๋ ˆ์ด์•„์›ƒ */ +.work-report-container { + min-height: 100vh; + background: var(--bg-secondary); + display: flex; + flex-direction: column; } -/* ๋‹จ๊ณ„ ํ‘œ์‹œ */ -.steps-container { +.work-report-header { + background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-700) 100%); + color: white; + padding: var(--space-8) var(--space-6); + text-align: center; + box-shadow: var(--shadow-lg); +} + +.work-report-header h1 { + font-size: var(--text-4xl); + font-weight: var(--font-bold); + margin-bottom: var(--space-2); + text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} + +.work-report-header .subtitle { + font-size: var(--text-lg); + opacity: 0.9; + font-weight: var(--font-medium); +} + +.work-report-main { + flex: 1; + padding: var(--space-8) var(--space-6); + max-width: 1200px; + margin: 0 auto; + width: 100%; +} + +/* ๋’ค๋กœ๊ฐ€๊ธฐ ๋ฒ„ํŠผ */ +.back-button { + display: inline-flex; + align-items: center; + gap: var(--space-2); + padding: var(--space-3) var(--space-4); + background: var(--bg-primary); + color: var(--primary-600); + border: 2px solid var(--primary-200); + border-radius: var(--radius-lg); + text-decoration: none; + font-weight: var(--font-semibold); + transition: var(--transition-normal); + margin-bottom: var(--space-6); + box-shadow: var(--shadow-sm); +} + +.back-button:hover { + background: var(--primary-50); + border-color: var(--primary-300); + transform: translateY(-1px); + box-shadow: var(--shadow-md); +} + +/* ์ง„ํ–‰ ๋‹จ๊ณ„ ํ‘œ์‹œ */ +.progress-steps { display: flex; justify-content: center; - margin-bottom: 30px; + align-items: center; + margin-bottom: var(--space-8); + padding: var(--space-6); + background: var(--bg-primary); + border-radius: var(--radius-xl); + box-shadow: var(--shadow-sm); +} + +.progress-step { + display: flex; + flex-direction: column; + align-items: center; + gap: var(--space-2); + position: relative; + flex: 1; + max-width: 200px; +} + +.progress-step:not(:last-child)::after { + content: ''; + position: absolute; + top: 20px; + right: -50%; + width: 100%; + height: 2px; + background: var(--border-light); + z-index: 1; +} + +.progress-step.active:not(:last-child)::after, +.progress-step.completed:not(:last-child)::after { + background: var(--primary-500); +} + +.step-circle { + width: 40px; + height: 40px; + border-radius: var(--radius-full); + display: flex; + align-items: center; + justify-content: center; + font-weight: var(--font-bold); + font-size: var(--text-sm); + background: var(--gray-200); + color: var(--gray-600); + transition: var(--transition-normal); + z-index: 2; position: relative; } -.step { +.progress-step.active .step-circle { + background: var(--primary-500); + color: white; + box-shadow: 0 0 0 4px var(--primary-100); +} + +.progress-step.completed .step-circle { + background: var(--success-500); + color: white; +} + +.step-label { + font-size: var(--text-sm); + font-weight: var(--font-medium); + color: var(--text-secondary); + text-align: center; +} + +.progress-step.active .step-label { + color: var(--primary-600); + font-weight: var(--font-semibold); +} + +.progress-step.completed .step-label { + color: var(--success-600); +} + +/* ๋‹จ๊ณ„๋ณ„ ์„น์…˜ */ +.step-section { + background: var(--bg-primary); + border-radius: var(--radius-xl); + padding: var(--space-8); + margin-bottom: var(--space-6); + box-shadow: var(--shadow-md); + border: 1px solid var(--border-light); + opacity: 0.5; + transform: translateY(20px); + transition: all 0.4s ease; +} + +.step-section.active { + opacity: 1; + transform: translateY(0); + border-color: var(--primary-200); + box-shadow: var(--shadow-lg); +} + +.step-section.completed { + opacity: 0.8; + border-color: var(--success-200); +} + +.step-header { display: flex; align-items: center; - margin: 0 20px; - opacity: 0.5; - transition: all 0.3s ease; -} - -.step.active { - opacity: 1; - transform: scale(1.1); -} - -.step.completed { - opacity: 1; + gap: var(--space-4); + margin-bottom: var(--space-6); + padding-bottom: var(--space-4); + border-bottom: 2px solid var(--border-light); } .step-number { - width: 40px; - height: 40px; - border-radius: 50%; - background: linear-gradient(135deg, #e9ecef 0%, #adb5bd 100%); + width: 48px; + height: 48px; + border-radius: var(--radius-full); + background: var(--primary-500); + color: white; display: flex; align-items: center; justify-content: center; - font-weight: bold; - color: #495057; - margin-right: 10px; + font-weight: var(--font-bold); + font-size: var(--text-lg); + box-shadow: var(--shadow-sm); +} + +.step-number.completed { + background: var(--success-500); +} + +.step-title { + font-size: var(--text-2xl); + font-weight: var(--font-bold); + color: var(--text-primary); +} + +/* ํผ ์š”์†Œ๋“ค */ +.form-group { + margin-bottom: var(--space-6); +} + +.form-label { + display: block; + margin-bottom: var(--space-3); + font-weight: var(--font-semibold); + color: var(--text-primary); + font-size: var(--text-base); +} + +.form-input { + 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); + box-shadow: var(--shadow-sm); +} + +.form-input:focus { + outline: none; + border-color: var(--primary-500); + box-shadow: 0 0 0 3px var(--primary-100); +} + +/* ์ž‘์—…์ž ์„ ํƒ ๊ทธ๋ฆฌ๋“œ */ +.worker-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); + gap: var(--space-4); + margin-bottom: var(--space-6); +} + +.worker-card { + padding: var(--space-5); + border: 2px solid var(--border-light); + border-radius: var(--radius-xl); + background: var(--bg-primary); + cursor: pointer; transition: all 0.3s ease; -} - -.step.active .step-number { - background: linear-gradient(135deg, #007bff 0%, #0056b3 100%); - color: white; - box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3); -} - -.step.completed .step-number { - background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%); - color: white; -} - -/* ๐Ÿ›ก๏ธ ๋ณดํ˜ธ ๋ชจ๋“œ ํ‘œ์‹œ๊ธฐ */ -.protection-indicator { - position: fixed; - top: 20px; - right: 20px; - background: linear-gradient(135deg, #27ae60 0%, #229954 100%); - color: white; - padding: 10px 15px; - border-radius: 25px; - font-size: 12px; - font-weight: bold; - box-shadow: 0 2px 10px rgba(39, 174, 96, 0.3); - z-index: 1000; - border: 2px solid #1e8449; - animation: pulse-protection 2s infinite; -} - -.protection-indicator::before { - content: "๐Ÿ›ก๏ธ"; - margin-right: 8px; -} - -@keyframes pulse-protection { - 0%, 100% { box-shadow: 0 2px 10px rgba(39, 174, 96, 0.3); } - 50% { box-shadow: 0 4px 20px rgba(39, 174, 96, 0.5); } -} - -/* ๋ฉ”์‹œ์ง€ ์ปจํ…Œ์ด๋„ˆ */ -.message-container { - margin-bottom: 20px; -} - -.message { - padding: 15px; - border-radius: 8px; - margin-bottom: 10px; - font-weight: 500; - border: 2px solid transparent; - transition: all 0.3s ease; -} - -.message.success { - background: linear-gradient(135deg, #28a745 0%, #20c997 100%); - color: white; - border-color: #1e7e34; - box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3); -} - -.message.error { - background: linear-gradient(135deg, #dc3545 0%, #c82333 100%); - color: white; - border-color: #bd2130; - box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3); -} - -.message.warning { - background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%); - color: white; - border-color: #d68910; - box-shadow: 0 4px 15px rgba(243, 156, 18, 0.3); - animation: fadeInShake 0.5s ease-out; -} - -.message.loading { - background: linear-gradient(135deg, #3498db 0%, #2980b9 100%); - color: white; - border-color: #2471a3; + text-align: center; + font-weight: var(--font-semibold); + min-height: 100px; + display: flex; + align-items: center; + justify-content: center; + box-shadow: var(--shadow-sm); position: relative; overflow: hidden; } -.message.loading::after { - content: ""; +.worker-card::before { + content: ''; position: absolute; top: 0; - left: -100%; - width: 100%; - height: 100%; - background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); - animation: loading-shimmer 1.5s infinite; + left: 0; + right: 0; + height: 3px; + background: var(--primary-500); + transform: scaleX(0); + transition: transform 0.3s ease; } -@keyframes loading-shimmer { - 0% { left: -100%; } - 100% { left: 100%; } -} - -@keyframes fadeInShake { - 0% { - opacity: 0; - transform: translateX(-10px); - } - 50% { - opacity: 1; - transform: translateX(5px); - } - 100% { - opacity: 1; - transform: translateX(0); - } -} - -/* ๋‹จ๊ณ„๋ณ„ ์ฝ˜ํ…์ธ  */ -.step-content { - background: white; - border-radius: 12px; - padding: 30px; - margin-bottom: 20px; - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); - border: 2px solid #e9ecef; -} - -/* 1๋‹จ๊ณ„: ๋‚ ์งœ ์„ ํƒ */ -.date-selection { - text-align: center; -} - -.date-input { - padding: 15px; - font-size: 18px; - border: 2px solid #dee2e6; - border-radius: 8px; - width: 200px; - margin: 20px 0; - transition: all 0.3s ease; -} - -.date-input:focus { - border-color: #007bff; - box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25); - outline: none; -} - -/* 2๋‹จ๊ณ„: ์ž‘์—…์ž ์„ ํƒ */ -.worker-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); - gap: 15px; - margin: 20px 0; -} - -.worker-btn { - padding: 15px; - border: 2px solid #dee2e6; - border-radius: 10px; - background: white; - cursor: pointer; - transition: all 0.3s ease; - font-weight: 500; - font-size: 14px; - position: relative; -} - -.worker-btn:hover { - border-color: #007bff; - background: #f8f9fa; +.worker-card:hover { + border-color: var(--primary-300); + background: var(--primary-50); transform: translateY(-2px); - box-shadow: 0 4px 15px rgba(0, 123, 255, 0.2); + box-shadow: var(--shadow-lg); } -.worker-btn.selected { - background: linear-gradient(135deg, #007bff 0%, #0056b3 100%); +.worker-card:hover::before { + transform: scaleX(1); +} + +.worker-card.selected { + border-color: var(--primary-500); + background: linear-gradient(135deg, var(--primary-500), var(--primary-600)); color: white; - border-color: #0056b3; - box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3); + box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3); } -/* ๐Ÿšซ ์ฐจ๋‹จ๋œ ์ž‘์—…์ž ๋ฒ„ํŠผ ์Šคํƒ€์ผ */ -.worker-btn.blocked { - background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%) !important; - color: white !important; - border: 2px solid #a93226 !important; - opacity: 0.7; - cursor: not-allowed !important; - position: relative; - animation: pulse-blocked 2s infinite; -} - -.worker-btn.blocked:hover { - transform: none !important; - box-shadow: none !important; -} - -.worker-btn.blocked::after { - content: "๐Ÿšซ"; - position: absolute; - top: -5px; - right: -5px; - background: #fff; - border-radius: 50%; - width: 20px; - height: 20px; - display: flex; - align-items: center; - justify-content: center; - font-size: 12px; - border: 2px solid #e74c3c; -} - -@keyframes pulse-blocked { - 0%, 100% { opacity: 0.7; } - 50% { opacity: 0.5; } -} - -/* 3๋‹จ๊ณ„: ์ž‘์—… ์ž…๋ ฅ */ -.work-entries-container { - margin: 20px 0; +.worker-card.selected::before { + transform: scaleX(1); + background: rgba(255, 255, 255, 0.3); } +/* ์ž‘์—… ํ•ญ๋ชฉ */ .work-entry { - background: #f8f9fa; - border: 2px solid #e9ecef; - border-radius: 12px; - padding: 20px; - margin-bottom: 20px; - transition: all 0.3s ease; + background: var(--bg-tertiary); + border: 2px solid var(--border-light); + border-radius: var(--radius-xl); + padding: var(--space-6); + margin-bottom: var(--space-6); + position: relative; + transition: var(--transition-normal); } .work-entry:hover { - border-color: #007bff; - box-shadow: 0 4px 15px rgba(0, 123, 255, 0.1); + border-color: var(--primary-200); + box-shadow: var(--shadow-md); } .work-entry-header { display: flex; justify-content: space-between; align-items: center; - margin-bottom: 20px; + margin-bottom: var(--space-4); + padding-bottom: var(--space-3); + border-bottom: 1px solid var(--border-light); } .work-entry-title { - font-size: 18px; - font-weight: bold; - color: #495057; + font-size: var(--text-lg); + font-weight: var(--font-bold); + color: var(--text-primary); } .remove-work-btn { - background: #dc3545; + width: 36px; + height: 36px; + border-radius: var(--radius-full); + background: var(--error-500); color: white; border: none; - border-radius: 50%; - width: 30px; - height: 30px; cursor: pointer; - font-size: 18px; display: flex; align-items: center; justify-content: center; - transition: all 0.3s ease; + transition: var(--transition-normal); + font-size: var(--text-lg); } .remove-work-btn:hover { - background: #c82333; + background: var(--error-600); transform: scale(1.1); } -.work-entry-row { +.work-entry-grid { display: grid; grid-template-columns: 1fr 1fr; - gap: 20px; - margin-bottom: 20px; + gap: var(--space-4); } -.form-group { - display: flex; - flex-direction: column; -} - -.form-group label { - font-weight: bold; - margin-bottom: 8px; - color: #495057; - font-size: 14px; -} - -.large-select { - padding: 12px; - border: 2px solid #dee2e6; - border-radius: 8px; - font-size: 14px; - transition: all 0.3s ease; - background: white; -} - -.large-select:focus { - border-color: #007bff; - box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25); - outline: none; -} - -/* ์—๋Ÿฌ ์œ ํ˜• ์„น์…˜ */ -.error-type-section { - opacity: 0.5; - transition: all 0.3s ease; -} - -.error-type-section.visible { - opacity: 1; +.work-entry-full { + grid-column: span 2; } /* ์‹œ๊ฐ„ ์ž…๋ ฅ */ -.time-input-row { - grid-column: 1 / -1; +.time-input-section { + background: var(--primary-50); + border-radius: var(--radius-lg); + padding: var(--space-4); + margin-top: var(--space-4); } .quick-time-buttons { display: flex; - gap: 10px; - margin-top: 10px; + gap: var(--space-2); + margin-top: var(--space-3); + flex-wrap: wrap; + justify-content: center; } .quick-time-btn { - padding: 8px 15px; - background: #e9ecef; - border: 2px solid #dee2e6; - border-radius: 20px; + padding: var(--space-2) var(--space-4); + background: var(--bg-primary); + border: 2px solid var(--primary-200); + border-radius: var(--radius-lg); cursor: pointer; - font-size: 12px; - font-weight: bold; - transition: all 0.3s ease; + font-size: var(--text-sm); + font-weight: var(--font-semibold); + transition: var(--transition-normal); + color: var(--primary-700); } .quick-time-btn:hover { - background: #007bff; - color: white; - border-color: #0056b3; - transform: translateY(-2px); + border-color: var(--primary-400); + background: var(--primary-100); + transform: translateY(-1px); } -/* ์ด ์‹œ๊ฐ„ ํ‘œ์‹œ */ -.total-hours-display { - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); +.quick-time-btn:active { + background: var(--primary-500); color: white; - padding: 15px; - border-radius: 10px; + transform: translateY(0); +} + +/* ์ด ์ž‘์—…์‹œ๊ฐ„ ํ‘œ์‹œ */ +.total-hours-display { text-align: center; - font-size: 18px; - font-weight: bold; - margin: 20px 0; - box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); + font-size: var(--text-2xl); + font-weight: var(--font-bold); + padding: var(--space-6); + background: linear-gradient(135deg, var(--primary-500), var(--primary-600)); + color: white; + border-radius: var(--radius-xl); + margin-bottom: var(--space-6); + box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3); } /* ๋ฒ„ํŠผ ์Šคํƒ€์ผ */ .btn { - padding: 12px 25px; - border: 2px solid transparent; - border-radius: 8px; - font-weight: bold; + padding: var(--space-4) var(--space-6); + border: none; + border-radius: var(--radius-lg); + font-size: var(--text-base); + font-weight: var(--font-semibold); cursor: pointer; - transition: all 0.3s ease; - font-size: 14px; + transition: var(--transition-normal); + display: inline-flex; + align-items: center; + justify-content: center; + gap: var(--space-2); text-decoration: none; - display: inline-block; -} - -.btn-primary { - background: linear-gradient(135deg, #007bff 0%, #0056b3 100%); - color: white; - border-color: #0056b3; -} - -.btn-primary:hover { - background: linear-gradient(135deg, #0056b3 0%, #004085 100%); - transform: translateY(-2px); - box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3); -} - -.btn-success { - background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%); - color: white; - border-color: #1e7e34; -} - -.btn-success:hover { - background: linear-gradient(135deg, #1e7e34 0%, #155724 100%); - transform: translateY(-2px); - box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3); + min-height: 48px; + box-shadow: var(--shadow-sm); } .btn:disabled { - opacity: 0.6; + opacity: 0.5; cursor: not-allowed; transform: none !important; box-shadow: none !important; } -/* ์ž‘์—… ์ถ”๊ฐ€ ๋ฒ„ํŠผ */ -.add-work-container { - text-align: center; - margin: 30px 0; -} - -.add-work-btn { - background: linear-gradient(135deg, #17a2b8 0%, #138496 100%); +.btn-primary { + background: var(--primary-500); color: white; - border: 2px solid #138496; - padding: 15px 30px; - border-radius: 25px; - font-size: 16px; - font-weight: bold; - cursor: pointer; - transition: all 0.3s ease; } -.add-work-btn:hover { - background: linear-gradient(135deg, #138496 0%, #0f6674 100%); - transform: translateY(-3px); - box-shadow: 0 6px 20px rgba(23, 162, 184, 0.3); -} - -/* ์ €์žฅ ๋ฒ„ํŠผ */ -.submit-container { - text-align: center; - margin: 40px 0; -} - -.submit-btn { - background: linear-gradient(135deg, #28a745 0%, #20c997 100%); - color: white; - border: 2px solid #1e7e34; - padding: 18px 40px; - border-radius: 30px; - font-size: 18px; - font-weight: bold; - cursor: pointer; - transition: all 0.3s ease; -} - -.submit-btn:hover { - background: linear-gradient(135deg, #1e7e34 0%, #17a2b8 100%); - transform: translateY(-3px); - box-shadow: 0 8px 25px rgba(40, 167, 69, 0.4); -} - -/* ์˜ค๋Š˜ ์ž‘์—…์ž ํ˜„ํ™ฉ */ -.daily-workers-section { - margin-top: 40px; - padding: 20px; - background: #f8f9fa; - border-radius: 12px; - border: 2px solid #e9ecef; -} - -.daily-workers-header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 20px; - padding: 15px; - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - color: white; - border-radius: 10px; - border: 2px solid #5a6fd8; -} - -.daily-workers-header h4 { - margin: 0; - font-size: 16px; - font-weight: bold; -} - -.refresh-btn { - background: rgba(255, 255, 255, 0.2); - color: white; - border: 2px solid rgba(255, 255, 255, 0.3); - padding: 8px 15px; - border-radius: 20px; - cursor: pointer; - font-size: 12px; - font-weight: bold; - transition: all 0.3s ease; -} - -.refresh-btn:hover { - background: rgba(255, 255, 255, 0.3); +.btn-primary:hover:not(:disabled) { + background: var(--primary-600); transform: translateY(-2px); - box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); + box-shadow: var(--shadow-lg); } -/* ์ž‘์—…์ž ํ˜„ํ™ฉ ๊ทธ๋ฆฌ๋“œ */ -.worker-status-grid { - display: grid; - gap: 20px; -} - -.worker-status-item { - background: white; - border: 2px solid #e9ecef; - border-radius: 12px; - padding: 20px; - transition: all 0.3s ease; -} - -.worker-status-item:hover { - border-color: #007bff; - box-shadow: 0 4px 15px rgba(0, 123, 255, 0.1); -} - -.worker-header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 15px; - padding-bottom: 10px; - border-bottom: 2px solid #e9ecef; -} - -.worker-name { - font-size: 18px; - font-weight: bold; - color: #495057; -} - -.worker-total-hours { - background: linear-gradient(135deg, #17a2b8 0%, #138496 100%); +.btn-success { + background: var(--success-500); color: white; - padding: 5px 15px; - border-radius: 15px; - font-size: 14px; - font-weight: bold; } -/* ๊ฐœ๋ณ„ ์ž‘์—… ํ•ญ๋ชฉ */ -.individual-works-container { - margin-top: 15px; -} - -.individual-work-item { - background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); - border: 2px solid #dee2e6; - border-radius: 10px; - padding: 15px; - margin-bottom: 10px; - transition: all 0.3s ease; -} - -.individual-work-item:hover { - background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%); - border-color: #adb5bd; +.btn-success:hover:not(:disabled) { + background: var(--success-600); transform: translateY(-2px); - box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); + box-shadow: var(--shadow-lg); } -.work-details-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); - gap: 15px; - margin-bottom: 15px; -} - -.detail-item { - display: flex; - flex-direction: column; - gap: 5px; -} - -.detail-label { - font-size: 12px; - font-weight: bold; - color: #6c757d; - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.detail-value { - font-size: 14px; - font-weight: 600; - color: #212529; - padding: 8px 12px; - background: white; - border: 1px solid #ced4da; - border-radius: 6px; -} - -/* ์•ก์…˜ ๋ฒ„ํŠผ๋“ค */ -.action-buttons { - display: flex; - gap: 10px; - justify-content: flex-end; -} - -.edit-btn, .delete-btn { - padding: 8px 15px; - border: none; - border-radius: 6px; - font-size: 12px; - font-weight: bold; - cursor: pointer; - transition: all 0.3s ease; -} - -.edit-btn { - background: linear-gradient(135deg, #3498db 0%, #2980b9 100%); +.btn-secondary { + background: var(--gray-500); color: white; - border: 2px solid #2471a3; } -.edit-btn:hover { - background: linear-gradient(135deg, #2980b9 0%, #2471a3 100%); +.btn-secondary:hover:not(:disabled) { + background: var(--gray-600); transform: translateY(-2px); - box-shadow: 0 4px 10px rgba(52, 152, 219, 0.3); + box-shadow: var(--shadow-lg); } -.delete-btn { - background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%); - color: white; - border: 2px solid #a93226; +.btn-block { + width: 100%; } -.delete-btn:hover { - background: linear-gradient(135deg, #c0392b 0%, #a93226 100%); - transform: translateY(-2px); - box-shadow: 0 4px 10px rgba(231, 76, 60, 0.3); +/* ๋ฉ”์‹œ์ง€ */ +.message { + padding: var(--space-4) var(--space-5); + border-radius: var(--radius-lg); + margin-bottom: var(--space-6); + font-weight: var(--font-medium); + border: 1px solid; } -/* ๋ฐ์ดํ„ฐ ์—†์Œ ๋ฉ”์‹œ์ง€ */ -.no-data-message { - text-align: center; - padding: 40px; - color: #6c757d; - font-size: 16px; - line-height: 1.6; +.message.error { + background: var(--error-50); + color: var(--error-700); + border-color: var(--error-200); } -.no-data-message small { - display: block; - margin-top: 10px; - font-size: 14px; - color: #adb5bd; +.message.success { + background: var(--success-50); + color: var(--success-700); + border-color: var(--success-200); } -/* ๋กœ๋”ฉ ์Šคํ”ผ๋„ˆ */ -.loading-spinner { - text-align: center; - padding: 40px; - font-size: 16px; - color: #007bff; - font-weight: bold; +.message.loading { + background: var(--primary-50); + color: var(--primary-700); + border-color: var(--primary-200); +} + +.message.warning { + background: var(--warning-50); + color: var(--warning-700); + border-color: var(--warning-200); } /* ๋ฐ˜์‘ํ˜• ๋””์ž์ธ */ -@media (max-width: 768px) { - .daily-work-report-container { - padding: 10px; +@media (max-width: 1024px) { + .work-report-main { + padding: var(--space-6) var(--space-4); } - .work-entry-row { - grid-template-columns: 1fr; + .progress-steps { + padding: var(--space-4); + } + + .progress-step:not(:last-child)::after { + right: -40%; + } +} + +@media (max-width: 768px) { + .work-report-header { + padding: var(--space-6) var(--space-4); + } + + .work-report-header h1 { + font-size: var(--text-3xl); + } + + .work-report-main { + padding: var(--space-4) var(--space-3); + } + + .step-section { + padding: var(--space-6); } .worker-grid { - grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); - gap: 10px; + grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); + gap: var(--space-3); } - .work-details-grid { + .worker-card { + min-height: 80px; + padding: var(--space-3); + font-size: var(--text-sm); + } + + .work-entry-grid { grid-template-columns: 1fr; } - .daily-workers-header { + .work-entry-full { + grid-column: span 1; + } + + .progress-steps { flex-direction: column; - gap: 10px; - text-align: center; + gap: var(--space-4); } - .protection-indicator { - position: relative; - top: auto; - right: auto; - margin: 10px auto; - text-align: center; + .progress-step:not(:last-child)::after { + display: none; } - .steps-container { - flex-direction: column; - align-items: center; + .quick-time-buttons { + gap: var(--space-1); } - .step { - margin: 10px 0; + .quick-time-btn { + padding: var(--space-1) var(--space-3); + font-size: var(--text-xs); } } @media (max-width: 480px) { - .worker-grid { - grid-template-columns: 1fr 1fr; + .work-report-header h1 { + font-size: var(--text-2xl); } - .action-buttons { + .step-section { + padding: var(--space-4); + } + + .step-header { flex-direction: column; + text-align: center; + gap: var(--space-2); } - .date-input { - width: 100%; + .step-number { + width: 40px; + height: 40px; + font-size: var(--text-base); + } + + .step-title { + font-size: var(--text-xl); + } + + .worker-grid { + grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); + } + + .total-hours-display { + font-size: var(--text-xl); + padding: var(--space-4); + } +} + +/* ๊ฐ€์ด๋“œ ๊ทธ๋ฆฌ๋“œ */ +.guide-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: var(--space-4); + margin-top: var(--space-4); +} + +.guide-item { + text-align: center; + padding: var(--space-5); + background: var(--bg-tertiary); + border-radius: var(--radius-xl); + border: 2px solid var(--border-light); + transition: var(--transition-normal); +} + +.guide-item:hover { + transform: translateY(-2px); + box-shadow: var(--shadow-lg); + border-color: var(--primary-300); + background: var(--primary-50); +} + +.guide-icon { + font-size: var(--text-3xl); + margin-bottom: var(--space-3); + display: block; +} + +.guide-item strong { + display: block; + font-size: var(--text-base); + font-weight: var(--font-bold); + margin-bottom: var(--space-2); + color: var(--text-primary); +} + +@media (max-width: 768px) { + .guide-grid { + grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); + gap: var(--space-3); + } + + .guide-item { + padding: var(--space-4); + } + + .guide-icon { + font-size: var(--text-2xl); + } +} + +@media (max-width: 480px) { + .guide-grid { + grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); + } + + .guide-item { + padding: var(--space-3); + } + + .guide-item strong { + font-size: var(--text-sm); } } \ No newline at end of file diff --git a/web-ui/js/daily-work-report.js b/web-ui/js/daily-work-report.js index afcf762..adf60eb 100644 --- a/web-ui/js/daily-work-report.js +++ b/web-ui/js/daily-work-report.js @@ -86,9 +86,29 @@ function goToStep(stepNumber) { } } } + + // ์ง„ํ–‰ ๋‹จ๊ณ„ ํ‘œ์‹œ ์—…๋ฐ์ดํŠธ + updateProgressSteps(stepNumber); + currentStep = stepNumber; } +// ์ง„ํ–‰ ๋‹จ๊ณ„ ํ‘œ์‹œ ์—…๋ฐ์ดํŠธ +function updateProgressSteps(currentStepNumber) { + for (let i = 1; i <= 3; i++) { + const progressStep = document.getElementById(`progressStep${i}`); + if (progressStep) { + progressStep.classList.remove('active', 'completed'); + + if (i < currentStepNumber) { + progressStep.classList.add('completed'); + } else if (i === currentStepNumber) { + progressStep.classList.add('active'); + } + } + } +} + // ์ดˆ๊ธฐ ๋ฐ์ดํ„ฐ ๋กœ๋“œ (ํ†ตํ•ฉ API ์‚ฌ์šฉ) async function loadData() { try { @@ -203,7 +223,7 @@ function populateWorkerGrid() { workers.forEach(worker => { const btn = document.createElement('button'); btn.type = 'button'; - btn.className = 'worker-btn'; + btn.className = 'worker-card'; btn.textContent = worker.worker_name; btn.dataset.id = worker.worker_id; @@ -470,7 +490,7 @@ function resetForm() { goToStep(1); selectedWorkers.clear(); - document.querySelectorAll('.worker-btn.selected').forEach(btn => { + document.querySelectorAll('.worker-card.selected').forEach(btn => { btn.classList.remove('selected'); }); diff --git a/web-ui/pages/common/daily-work-report.html b/web-ui/pages/common/daily-work-report.html index a38a914..e53c098 100644 --- a/web-ui/pages/common/daily-work-report.html +++ b/web-ui/pages/common/daily-work-report.html @@ -4,1054 +4,150 @@ ์ผ์ผ ์ž‘์—…๋ณด๊ณ ์„œ ์ž‘์„ฑ | (์ฃผ)ํ…Œํฌ๋‹ˆ์ปฌ์ฝ”๋ฆฌ์•„ - + + - -
+
-
-
- - - โ† ๋’ค๋กœ๊ฐ€๊ธฐ - + +
+

โœ๏ธ ์ผ์ผ ์ž‘์—…๋ณด๊ณ ์„œ ์ž‘์„ฑ

+

๋‹จ๊ณ„๋ณ„๋กœ ์˜ค๋Š˜์˜ ์ž‘์—… ๋‚ด์šฉ์„ ๊ฐ„ํŽธํ•˜๊ฒŒ ๊ธฐ๋กํ•˜๊ณ  ๊ด€๋ฆฌํ•˜์„ธ์š”.

+
+ + +
+ + + โ† ๋’ค๋กœ๊ฐ€๊ธฐ + -
-

โœ๏ธ ์ผ์ผ ์ž‘์—…๋ณด๊ณ ์„œ ์ž‘์„ฑ

-

๋‹จ๊ณ„๋ณ„๋กœ ์˜ค๋Š˜์˜ ์ž‘์—… ๋‚ด์šฉ์„ ๊ฐ„ํŽธํ•˜๊ฒŒ ๊ธฐ๋กํ•˜๊ณ  ๊ด€๋ฆฌํ•˜์„ธ์š”.

+ +
+
+
1
+
๋‚ ์งœ ์„ ํƒ
- - -
- - -
-
-
1
-
์ž‘์—… ๋‚ ์งœ ์„ ํƒ
-
-
- -
- +
+
2
+
์ž‘์—…์ž ์„ ํƒ
- - -
-
-
2
-
์ž‘์—…์ž ์„ ํƒ
-
-
- -
- +
+
3
+
์ž‘์—… ์ž…๋ ฅ
+
- -
-
-
3
-
์ž‘์—… ๋‚ด์—ญ ์ž…๋ ฅ
-
- - -
- ์ด ์ž‘์—…์‹œ๊ฐ„: 0์‹œ๊ฐ„ -
- - -
- -
- - - - - - + +
+ + +
+
+
1
+
์ž‘์—… ๋‚ ์งœ ์„ ํƒ
- - - - -
-

๐Ÿ“– ์‚ฌ์šฉ ๊ฐ€์ด๋“œ

-
-
-
๐Ÿ“…
- 1๋‹จ๊ณ„
- ์ž‘์—… ๋‚ ์งœ ์„ ํƒ -
-
-
๐Ÿ‘ค
- 2๋‹จ๊ณ„
- ์ž‘์—…์ž ์„ ํƒ (ํ„ฐ์น˜) -
-
-
๐Ÿ”ง
- 3๋‹จ๊ณ„
- ์ž‘์—… ๋‚ด์—ญ ์ž…๋ ฅ -
-
-
๐Ÿ’พ
- ์™„๋ฃŒ
- ์ €์žฅํ•˜์—ฌ ๋งˆ๋ฌด๋ฆฌ -
-
-
โœ๏ธ
- ๊ด€๋ฆฌ
- ์ž…๋ ฅํ•œ ์ž‘์—… ์ˆ˜์ •/์‚ญ์ œ -
+ +
+
+
2
+
์ž‘์—…์ž ์„ ํƒ
+
+
+ +
+ +
+ + +
+
+
3
+
์ž‘์—… ๋‚ด์—ญ ์ž…๋ ฅ
+
+ + +
+ ์ด ์ž‘์—…์‹œ๊ฐ„: 0์‹œ๊ฐ„ +
+ + +
+ +
+ + + + + + +
+ + + + + +
+
+
๐Ÿ“–
+
์‚ฌ์šฉ ๊ฐ€์ด๋“œ
+
+
+
+
๐Ÿ“…
+ 1๋‹จ๊ณ„
+ ์ž‘์—… ๋‚ ์งœ ์„ ํƒ +
+
+
๐Ÿ‘ค
+ 2๋‹จ๊ณ„
+ ์ž‘์—…์ž ์„ ํƒ (ํ„ฐ์น˜) +
+
+
๐Ÿ”ง
+ 3๋‹จ๊ณ„
+ ์ž‘์—… ๋‚ด์—ญ ์ž…๋ ฅ +
+
+
๐Ÿ’พ
+ ์™„๋ฃŒ
+ ์ €์žฅํ•˜์—ฌ ๋งˆ๋ฌด๋ฆฌ +
+
+
โœ๏ธ
+ ๊ด€๋ฆฌ
+ ์ž…๋ ฅํ•œ ์ž‘์—… ์ˆ˜์ •/์‚ญ์ œ
-
+