From ba07804d54f779ba4b076d03f35b988d81eca656 Mon Sep 17 00:00:00 2001
From: king <heoseungpil@gmail.com>
Date: Tue, 26 May 2026 23:30:41 +0900
Subject: [PATCH] =?UTF-8?q?=EC=97=85=EB=A1=9C=EB=93=9C=20=EB=82=A0?=
 =?UTF-8?q?=EC=A7=9C=20=EB=AA=A8=EB=8B=AC=20CSS=20=ED=81=B4=EB=9E=98?=
 =?UTF-8?q?=EC=8A=A4=20=EB=B2=84=EA=B7=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

modal-overlay 클래스에 CSS 정의가 없어 모달이 항상 표시되는
버그를 수정: 기존 .modal/.modal.show 패턴으로 교체하고,
배경 클릭 시 모달이 닫히는 동작도 추가.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 static/css/style.css | 14 +++++++---
 static/index.html    | 63 +++++++++++++++++++++-----------------------
 static/js/app.js     |  3 +++
 3 files changed, 43 insertions(+), 37 deletions(-)

diff --git a/static/css/style.css b/static/css/style.css
index 7540f67..e056bda 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -1839,12 +1839,18 @@ input[type="checkbox"] {
    Upload Date Picker Custom Calendar Styles
    ========================================================================== */
 
-#upload-date-modal .modal-content {
-    background: rgba(255, 255, 255, 0.95);
+.upload-date-modal-content {
+    max-width: 400px;
+    background: rgba(255, 255, 255, 0.95) !important;
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
-    border: 1px solid rgba(255, 255, 255, 0.4);
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
+    border: 1px solid rgba(255, 255, 255, 0.4) !important;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
+}
+
+.upload-date-modal-content h2 {
+    font-size: 1.2rem;
+    margin-bottom: 0.75rem;
 }
 
 .modal-instruction-text {
diff --git a/static/index.html b/static/index.html
index 67c642c..14cd0e5 100644
--- a/static/index.html
+++ b/static/index.html
@@ -407,42 +407,39 @@
     </div>
 
     <!-- Upload Date Picker Modal -->
-    <div id="upload-date-modal" class="modal-overlay">
-        <div class="modal-content glass-panel" style="max-width: 400px;">
-            <div class="modal-header">
-                <h2><i class="fa-regular fa-calendar-check"></i> 업로드 날짜 지정</h2>
-                <button type="button" class="modal-close" id="upload-date-close">&times;</button>
-            </div>
-            <div class="modal-body">
-                <p class="modal-instruction-text">발주 데이터의 주문 날짜로 입력될 날짜를 선택해주세요.</p>
-                
-                <!-- Custom Calendar Picker Container -->
-                <div class="custom-calendar-picker">
-                    <div class="calendar-nav">
-                        <button type="button" id="cal-prev-month" class="icon-btn"><i class="fa-solid fa-chevron-left"></i></button>
-                        <span id="cal-month-year-display" class="calendar-title">2026년 05월</span>
-                        <button type="button" id="cal-next-month" class="icon-btn"><i class="fa-solid fa-chevron-right"></i></button>
-                    </div>
-                    <div class="calendar-weekdays">
-                        <div class="weekday holiday">일</div>
-                        <div class="weekday">월</div>
-                        <div class="weekday">화</div>
-                        <div class="weekday">수</div>
-                        <div class="weekday">목</div>
-                        <div class="weekday">금</div>
-                        <div class="weekday sat">토</div>
-                    </div>
-                    <div id="calendar-days-grid" class="calendar-days">
-                        <!-- Days will be rendered via JS -->
-                    </div>
+    <div id="upload-date-modal" class="modal">
+        <div class="modal-content glass-panel upload-date-modal-content">
+            <span class="close-btn" id="upload-date-close">&times;</span>
+            <h2><i class="fa-regular fa-calendar-check"></i> 업로드 날짜 지정</h2>
+            <p class="modal-instruction-text">발주 데이터의 주문 날짜로 입력될 날짜를 선택해주세요.</p>
+
+            <!-- Custom Calendar Picker Container -->
+            <div class="custom-calendar-picker">
+                <div class="calendar-nav">
+                    <button type="button" id="cal-prev-month" class="icon-btn"><i class="fa-solid fa-chevron-left"></i></button>
+                    <span id="cal-month-year-display" class="calendar-title">2026년 05월</span>
+                    <button type="button" id="cal-next-month" class="icon-btn"><i class="fa-solid fa-chevron-right"></i></button>
                 </div>
-                
-                <div class="selected-date-preview">
-                    <span>선택된 날짜:</span>
-                    <strong id="selected-date-text">선택 안 됨</strong>
+                <div class="calendar-weekdays">
+                    <div class="weekday holiday">일</div>
+                    <div class="weekday">월</div>
+                    <div class="weekday">화</div>
+                    <div class="weekday">수</div>
+                    <div class="weekday">목</div>
+                    <div class="weekday">금</div>
+                    <div class="weekday sat">토</div>
+                </div>
+                <div id="calendar-days-grid" class="calendar-days">
+                    <!-- Days will be rendered via JS -->
                 </div>
             </div>
-            <div class="modal-footer button-row">
+
+            <div class="selected-date-preview">
+                <span>선택된 날짜:</span>
+                <strong id="selected-date-text">선택 안 됨</strong>
+            </div>
+
+            <div class="modal-actions">
                 <button id="btn-cancel-upload-date" class="btn btn-secondary">취소</button>
                 <button id="btn-submit-upload-date" class="btn btn-primary" disabled>
                     <i class="fa-solid fa-cloud-arrow-up"></i> 업로드 실행
diff --git a/static/js/app.js b/static/js/app.js
index 92e39c1..5500f7c 100644
--- a/static/js/app.js
+++ b/static/js/app.js
@@ -1068,6 +1068,9 @@ document.addEventListener('DOMContentLoaded', () => {
         if (e.target === returnRequestModal) {
             closeReturnRequestModal();
         }
+        if (e.target === uploadDateModal) {
+            closeUploadDateModal();
+        }
     });
 
     if (btnOptimizeDb) {