인트로 로그인 화면 추가

apps/web/public/app.js

@@ -24,11 +24,19 @@ const state = {
     ""
 };
 
+const LOGIN_SESSION_KEY = "cargoRadarLoginReady";
+const LOGIN_NAME_KEY = "cargoRadarLoginName";
+
 const elements = {
+  loginScreen: document.getElementById("loginScreen"),
+  loginForm: document.getElementById("loginForm"),
+  loginNameInput: document.getElementById("loginNameInput"),
+  loginCodeInput: document.getElementById("loginCodeInput"),
   connectionStatus: document.getElementById("connectionStatus"),
   systemClock: document.getElementById("systemClock"),
   refreshButton: document.getElementById("refreshButton"),
   demoButton: document.getElementById("demoButton"),
+  logoutButton: document.getElementById("logoutButton"),
   locationsTab: document.getElementById("locationsTab"),
   driversTab: document.getElementById("driversTab"),
   locationsPanel: document.getElementById("locationsPanel"),
@@ -113,13 +121,20 @@ const VEHICLE_TYPES = {
 };
 
 document.addEventListener("DOMContentLoaded", () => {
+  const sessionReady = initializeLoginState();
   startSystemClock();
   initializeMap();
   bindActions();
+  if (sessionReady) {
+    startDataServices();
+  }
+});
+
+function startDataServices() {
   refreshDrivers();
   refreshLatestLocations();
   connectEvents();
-});
+}
 
 async function initializeMap() {
   const kakaoJavaScriptKey = window.CARGORADAR_CONFIG?.kakaoJavaScriptKey || "";
@@ -247,8 +262,10 @@ function loadScript(id, src) {
 }
 
 function bindActions() {
+  elements.loginForm.addEventListener("submit", submitLoginForm);
   elements.refreshButton.addEventListener("click", refreshLatestLocations);
   elements.demoButton.addEventListener("click", postDemoLocation);
+  elements.logoutButton.addEventListener("click", showLoginScreen);
   elements.locationsTab.addEventListener("click", () => setActiveView("locations"));
   elements.driversTab.addEventListener("click", () => setActiveView("drivers"));
   elements.driverForm.addEventListener("submit", submitDriverForm);
@@ -278,6 +295,63 @@ function bindActions() {
   }
 }
 
+function initializeLoginState() {
+  const sessionReady = window.localStorage.getItem(LOGIN_SESSION_KEY) === "true";
+  const savedName = window.localStorage.getItem(LOGIN_NAME_KEY) || "";
+  elements.loginNameInput.value = savedName;
+
+  if (sessionReady) {
+    hideLoginScreen({ instant: true });
+    return true;
+  }
+
+  showLoginScreen({ instant: true });
+  return false;
+}
+
+function submitLoginForm(event) {
+  event.preventDefault();
+
+  const name = elements.loginNameInput.value.trim();
+  const code = elements.loginCodeInput.value.trim();
+  state.adminToken = code || state.adminToken || "demo";
+
+  window.localStorage.setItem(LOGIN_SESSION_KEY, "true");
+  window.localStorage.setItem(LOGIN_NAME_KEY, name || "관제 담당자");
+  window.localStorage.setItem("cargoRadarAdminToken", state.adminToken);
+  elements.loginCodeInput.value = "";
+  hideLoginScreen();
+  startDataServices();
+}
+
+function showLoginScreen(options = {}) {
+  window.localStorage.removeItem(LOGIN_SESSION_KEY);
+  if (state.eventSource) {
+    state.eventSource.close();
+    state.eventSource = null;
+  }
+  document.body.classList.remove("is-login-closing");
+  document.body.classList.add("is-login-active");
+  if (options.instant) {
+    document.body.classList.add("is-login-ready");
+  }
+  window.setTimeout(() => elements.loginNameInput.focus(), options.instant ? 80 : 220);
+}
+
+function hideLoginScreen(options = {}) {
+  if (options.instant) {
+    document.body.classList.remove("is-login-active", "is-login-closing");
+    document.body.classList.add("is-login-ready");
+    return;
+  }
+
+  document.body.classList.add("is-login-closing");
+  window.setTimeout(() => {
+    document.body.classList.remove("is-login-active", "is-login-closing");
+    document.body.classList.add("is-login-ready");
+  }, 620);
+}
+
 function startSystemClock() {
   const updateClock = () => {
     const now = new Date();