파일 업로드 디자인 변경

src/main/webapp/WEB-INF/views/carInspectionPenalty/registration/uploadPopup.jsp

@@ -23,8 +23,12 @@
                         <tr>
                             <th class="th"><span class="required">*</span> TXT 파일</th>
                             <td>
-                                <div class="file-input-wrapper">
-                                    <input type="file" id="txtFile" name="txtFile" accept=".txt" class="input" style="width: 100%;" />
+                                <div class="file-input-row">
+                                    <input type="file" id="txtFile" name="txtFile" accept=".txt" class="file_input" />
+                                    <span class="file-input-text">파일을 선택하세요</span>
+                                    <button type="button" id="btnClearFile" class="btn_delete_file" style="display: none;" title="파일 삭제">
+                                        <i class="material-icons">close</i>
+                                    </button>
                                 </div>
                                 <div class="file-info" style="margin-top: 10px; color: #666; font-size: 13px;">
                                     ※ TXT 파일만 업로드 가능합니다. (최대 50MB)
@@ -71,6 +75,79 @@
     .loading.active {
         display: block !important;
     }
+
+    /* 파일 입력 스타일 */
+    .file-input-row {
+        position: relative;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        padding: 12px 15px;
+        background-color: #f8f9fa;
+        border: 2px dashed #dee2e6;
+        border-radius: 6px;
+        cursor: pointer;
+        transition: all 0.3s ease;
+    }
+
+    .file-input-row:hover {
+        background-color: #e9ecef;
+        border-color: #4CAF50;
+    }
+
+    .file-input-row.has-file {
+        background-color: #e7f3ff;
+        border-color: #4CAF50;
+        border-style: solid;
+    }
+
+    .file_input {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        opacity: 0;
+        cursor: pointer;
+    }
+
+    .file-input-text {
+        flex: 1;
+        color: #666;
+        font-size: 14px;
+        pointer-events: none;
+        display: flex;
+        align-items: center;
+    }
+
+    .file-input-text i.material-icons {
+        font-size: 18px;
+        margin-right: 8px;
+        color: #4CAF50;
+    }
+
+    .btn_delete_file {
+        padding: 4px;
+        background-color: #dc3545;
+        color: white;
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: background-color 0.3s ease;
+        z-index: 10;
+        position: relative;
+    }
+
+    .btn_delete_file:hover {
+        background-color: #c82333;
+    }
+
+    .btn_delete_file i.material-icons {
+        font-size: 18px;
+    }
 </style>
 
 <script type="text/javascript">
@@ -79,7 +156,7 @@
  * 중요로직: 과태료 대상 TXT 파일을 업로드하고 검증한다.
  */
 $(document).ready(function() {
-    
+
     /**
      * 파일 업로드 버튼 클릭 이벤트
      * 중요로직: 파일 선택 후 검증을 거쳐 서버로 업로드한다.
@@ -87,19 +164,28 @@ $(document).ready(function() {
     $("#btnUpload").on('click', function() {
         uploadFile();
     });
-    
+
     /**
      * 닫기 버튼 클릭 이벤트
      */
     $("#btnClose, #btnCloseTop").on('click', function() {
         closePopup();
     });
-    
+
     /**
      * 파일 선택 시 파일 정보 표시
      */
     $("#txtFile").on('change', function() {
-        displayFileInfo(this.files[0]);
+        handleFileSelect(this);
+    });
+
+    /**
+     * 파일 삭제 버튼 클릭 이벤트
+     */
+    $("#btnClearFile").on('click', function(e) {
+        e.stopPropagation();
+        e.preventDefault();
+        clearFileInput();
     });
 });
 
@@ -175,34 +261,86 @@ function uploadFile() {
             $("#btnUpload").prop('disabled', false);
             
             console.error("업로드 오류:", error);
-            
-            var errorMessage = "파일 업로드 중 오류가 발생했습니다.";
-            if (xhr.responseJSON && xhr.responseJSON.message) {
-                errorMessage += "\n\n" + xhr.responseJSON.message;
-            }
-            alert(errorMessage);
         }
     });
 }
 
 /**
- * 파일 정보 표시 함수
- * 중요로직: 선택한 파일의 이름과 크기를 화면에 표시한다.
+ * 파일 선택 처리 함수
+ * 선택된 파일명을 화면에 표시합니다.
  */
-function displayFileInfo(file) {
-    if (file) {
-        var fileSize = (file.size / 1024).toFixed(2); // KB 단위
-        var fileSizeText = fileSize < 1024 
-            ? fileSize + ' KB' 
-            : (fileSize / 1024).toFixed(2) + ' MB';
-        
+function handleFileSelect(fileInput) {
+    var $fileRow = $('.file-input-row');
+    var $fileText = $('.file-input-text');
+    var $btnClear = $('#btnClearFile');
+
+    if (fileInput.files && fileInput.files.length > 0) {
+        var file = fileInput.files[0];
+        var fileName = file.name;
+        var fileSize = file.size;
+
+        // 파일 크기를 읽기 쉬운 형태로 변환
+        var fileSizeText = formatFileSize(fileSize);
+
+        // 파일명과 크기를 표시
+        $fileText.html(
+            '<i class="material-icons" style="font-size: 18px; margin-right: 8px;">insert_drive_file</i>' +
+            '<span style="color: #333; font-weight: 500;">' + fileName + '</span>' +
+            '<span style="color: #666; font-size: 12px; margin-left: 8px;">(' + fileSizeText + ')</span>'
+        );
+        $fileText.attr('title', fileName);
+
+        // 파일이 선택된 상태 표시
+        $fileRow.addClass('has-file');
+        $btnClear.show();
+
+        // 파일 정보도 업데이트
         $('.file-info').html(
-            '선택된 파일: <strong>' + file.name + '</strong><br>' +
+            /*'선택된 파일: <strong>' + fileName + '</strong> ' +*/
             '파일 크기: ' + fileSizeText
         );
+    } else {
+        clearFileInput();
     }
 }
 
+/**
+ * 파일 크기를 읽기 쉬운 형태로 변환
+ */
+function formatFileSize(bytes) {
+    if (bytes === 0) return '0 Bytes';
+
+    var k = 1024;
+    var sizes = ['Bytes', 'KB', 'MB', 'GB'];
+    var i = Math.floor(Math.log(bytes) / Math.log(k));
+
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+}
+
+/**
+ * 파일 입력 초기화
+ */
+function clearFileInput() {
+    var $fileInput = $('#txtFile');
+    var $fileRow = $('.file-input-row');
+    var $fileText = $('.file-input-text');
+    var $btnClear = $('#btnClearFile');
+
+    // 파일 입력 초기화
+    $fileInput.val('');
+
+    // 기본 텍스트 표시
+    $fileText.html('파일을 선택하세요');
+    $fileText.removeAttr('title');
+
+    // 파일 선택 상태 제거
+    $fileRow.removeClass('has-file');
+    $btnClear.hide();
+
+    // 파일 정보 초기화
+    $('.file-info').html('※ TXT 파일만 업로드 가능합니다. (최대 50MB)');
+}
+
 /**
  * 팝업 닫기 함수
  */