From 7d3d5ef2815139df8322704d2804ae25e576f877 Mon Sep 17 00:00:00 2001
From: Taehoon <thlee3@samaneng.com>
Date: Mon, 1 Jun 2026 16:23:23 +0900
Subject: [PATCH] feat: implement initial login UI and entry logic

---
 index.html           |  28 +++++++++++-
 src/main.ts          |  34 +++++++++++++-
 src/styles/login.css | 105 +++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 165 insertions(+), 2 deletions(-)
 create mode 100644 src/styles/login.css
diff --git a/index.html b/index.html
index 5fc7d78..a9f7fb2 100644
--- a/index.html
+++ b/index.html
@@ -9,6 +9,7 @@
   <link rel="stylesheet"
     href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css" />
   <link rel="stylesheet" href="/src/styles/common.css" />
+  <link rel="stylesheet" href="/src/styles/login.css" />
   <link rel="stylesheet" href="/src/styles/guide.css" />
   <link rel="stylesheet" href="/src/styles/modal.css" />
   <link rel="stylesheet" href="/src/styles/dashboard.css" />
@@ -18,7 +19,32 @@
 </head>
 
 <body>
-  <div class="app-layout">
+  <!-- Login Screen -->
+  <div id="login-container" class="login-layout">
+    <div class="login-card">
+      <div class="login-header">
+        <img src="/image 92.png" alt="Logo" class="login-logo" />
+        <h2>ITAM 시스템</h2>
+        <p>자산 관리 포털에 오신 것을 환영합니다</p>
+      </div>
+      <form id="login-form" class="login-form">
+        <div class="form-group">
+          <label for="username">사용자 아이디</label>
+          <input type="text" id="username" placeholder="아이디를 입력하세요" required autofocus />
+        </div>
+        <div class="form-group">
+          <label for="password">비밀번호</label>
+          <input type="password" id="password" placeholder="비밀번호를 입력하세요" required />
+        </div>
+        <button type="submit" class="btn-login">로그인</button>
+      </form>
+      <div class="login-footer">
+        <p>&copy; 2026 BARON Consultant Co,Ltd. All rights reserved.</p>
+      </div>
+    </div>
+  </div>
+
+  <div class="app-layout" id="app-layout" style="display: none;">
     <!-- Single-Line Integrated Header -->
     <header class="main-header">
       <div class="header-container" id="nav-container">
diff --git a/src/main.ts b/src/main.ts
index 09dbcab..6a268fd 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -136,4 +136,36 @@ function initApp() {
   window.addEventListener('refresh-view', () => refreshView());
 }
 
-document.addEventListener('DOMContentLoaded', initApp);
+/**
+ * 로그인 처리 로직
+ */
+function handleLogin() {
+  const loginContainer = document.getElementById('login-container');
+  const appLayout = document.getElementById('app-layout');
+  const loginForm = document.getElementById('login-form') as HTMLFormElement;
+
+  if (!loginForm || !loginContainer || !appLayout) return;
+
+  loginForm.addEventListener('submit', (e) => {
+    e.preventDefault();
+    
+    // Mock 로그인: 아이디/비밀번호 입력 여부만 확인
+    const username = (document.getElementById('username') as HTMLInputElement).value;
+    const password = (document.getElementById('password') as HTMLInputElement).value;
+
+    if (username && password) {
+      console.log('🔓 Login successful (Mock)');
+      
+      // UI 전환
+      loginContainer.style.display = 'none';
+      appLayout.style.display = 'flex';
+      
+      // 앱 초기화 시작
+      initApp();
+    } else {
+      alert('아이디와 비밀번호를 입력해주세요.');
+    }
+  });
+}
+
+document.addEventListener('DOMContentLoaded', handleLogin);
diff --git a/src/styles/login.css b/src/styles/login.css
new file mode 100644
index 0000000..9eacc9b
--- /dev/null
+++ b/src/styles/login.css
@@ -0,0 +1,105 @@
+/* Login Screen Styles */
+
+.login-layout {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  background-color: var(--bg-color);
+  padding: 1.5rem;
+}
+
+.login-card {
+  width: 100%;
+  max-width: 400px;
+  background-color: var(--white);
+  border: 1px solid var(--border-color);
+  border-radius: 12px;
+  padding: 2.5rem;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
+  animation: slideUp 0.4s ease-out;
+}
+
+@keyframes slideUp {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.login-header {
+  text-align: center;
+  margin-bottom: 2rem;
+}
+
+.login-logo {
+  height: 48px;
+  margin-bottom: 1rem;
+}
+
+.login-header h2 {
+  font-size: 1.5rem;
+  font-weight: 800;
+  color: var(--text-main);
+  margin-bottom: 0.5rem;
+}
+
+.login-header p {
+  font-size: 0.875rem;
+  color: var(--text-muted);
+}
+
+.login-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+}
+
+.login-form .form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.login-form label {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--text-muted);
+}
+
+.login-form input {
+  height: 44px;
+  padding: 0 1rem;
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  font-size: 0.9375rem;
+  outline: none;
+  transition: all 0.2s;
+}
+
+.login-form input:focus {
+  border-color: var(--primary-color);
+  box-shadow: 0 0 0 3px rgba(30, 81, 73, 0.1);
+}
+
+.btn-login {
+  height: 48px;
+  margin-top: 0.5rem;
+  font-size: 1rem;
+  background-color: var(--primary-color);
+  color: var(--white);
+  border: none;
+  border-radius: 6px;
+  font-weight: 700;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.btn-login:hover {
+  background-color: var(--primary-hover);
+}
+
+.login-footer {
+  margin-top: 2rem;
+  text-align: center;
+  font-size: 0.75rem;
+  color: var(--text-muted);
+}
