Fix background image.

public/app.js

@@ -2,6 +2,19 @@
 
 document.addEventListener('DOMContentLoaded', () => {
 
+    // =================================================
+    // 0. 로그아웃 로직 (추가됨)
+    // =================================================
+    const logoutBtn = document.getElementById('logout-button');
+    if (logoutBtn) {
+        logoutBtn.addEventListener('click', () => {
+            if (confirm('정말로 로그아웃 하시겠습니까?')) {
+                // 로그인 페이지(루트)로 이동
+                window.location.href = '/';
+            }
+        });
+    }
+
     // =================================================
     // 1. 탭 전환 로직
     // =================================================
@@ -149,7 +162,6 @@ document.addEventListener('DOMContentLoaded', () => {
 
                         const fileInputId = `poi-file-${item.name}`;
 
-                        // [수정됨] multiple 속성 추가
                         tr.innerHTML = `
                             <td>${index + 1}</td>
                             <td>

public/dashboard.html

@@ -107,7 +107,7 @@
             <label class="section-title">관심 인물파일 관리</label>
             <div class="right-actions">
                 <button id="btn-poi-register" class="btn-white">등록</button>
-                <button id="btn-poi-refresh" class="btn-white">새로 고침</button>
+                <button id="btn-poi-refresh" class="refresh-button">🔄 새로 고침</button>
             </div>
         </div>
 

public/style.css

@@ -28,26 +28,47 @@ button {
     justify-content: center;
     align-items: center;
     height: 100vh;
-    background: #f0f2f5;
+    /* 배경 이미지 설정 (전체 화면 꽉 채우기) */
+    background: url('drone_background.png') no-repeat center center fixed;
+    background-size: cover;
+    position: relative; /* page-title 절대 위치의 기준점 */
 }
+
+/* [수정됨] 로그인 화면 메인 타이틀 스타일 */
+.page-title {
+    position: absolute;
+    top: 60px;       /* 상단 여백 */
+    left: 60px;      /* 좌측 여백 */
+    color: #ffffff;  /* 흰색 텍스트 */
+    font-size: 3rem; /* 크기 2배 (약 64px ~ 70px) */
+    font-weight: 600;
+    margin: 0;
+    z-index: 10;
+    /* 배경과 구분을 위한 검은 그림자 */
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
+}
+
 .login-container {
-    background: #ffffff;
+    background: rgba(255, 255, 255, 0.95); /* 배경이 비치지 않도록 불투명도 조정 */
     padding: 2rem 3rem;
     border-radius: 8px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); /* 그림자 조금 더 진하게 */
     width: 400px;
     box-sizing: border-box;
+    z-index: 20;
 }
 .login-container h1 {
     font-size: 2.2rem;
     color: #333;
     margin-bottom: 0.5rem;
     font-weight: bold;
+    text-align: center; /* 로그인 박스 내부 타이틀 중앙 정렬 */
 }
 .login-subtext {
     font-size: 1rem;
-    color: #888;
+    color: #666;
     margin: 0 0 2.5rem 0;
+    text-align: center; /* 서브 텍스트 중앙 정렬 */
 }
 .input-group {
     margin-bottom: 1rem;
@@ -64,16 +85,30 @@ button {
     color: #333;
     font-size: 1rem;
 }
+.input-group .icon {
+    position: absolute;
+    left: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: 1.2rem;
+}
+
+/* [수정됨] 로그인 버튼 스타일 (중앙 정렬 추가) */
 .login-button {
     width: auto;
+    min-width: 150px;
     padding: 0.8rem 2.5rem;
     background-color: #5a67d8;
     color: white;
     border: none;
     font-size: 1rem;
     font-weight: bold;
-    margin-top: 1rem;
+
+    /* 중앙 정렬을 위한 설정 */
+    display: block;
+    margin: 1.5rem auto 0 auto;
 }
+
 .login-button:hover { background-color: #434190; }
 .footer-bar {
     position: absolute; bottom: 0; left: 0; width: 100%; height: 50px;