feat: implement initial login UI and entry logic

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);

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);
+}