+
+
+
+
+
+ 
+
+
+
+ ITAM 시스템
+자산 관리 포털에 오신 것을 환영합니다
+
+
+ © 2026 BARON Consultant Co,Ltd. All rights reserved.
+
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);
+}