BARON-SSO 로그인 UI 수정

index.html

@@ -19,28 +19,10 @@
       <div class="login-header">
         <img src="/image 92.png" alt="Logo" class="login-logo" />
         <h2>한맥자산관리시스템</h2>
-        <p>Baron SSO 계정으로 로그인하세요.</p>
+        <p>전화번호로 본인 확인 후 로그인하세요.</p>
       </div>
 
-      <div class="login-mode-tabs" id="login-mode-tabs">
+      <form id="phone-login-form" class="login-form">
-        <button type="button" class="login-mode-tab active" data-mode="password">사번 로그인</button>
-        <button type="button" class="login-mode-tab" data-mode="phone">전화번호 로그인</button>
-      </div>
-
-      <form id="login-form" class="login-form" data-mode="password">
-        <label class="login-field">
-          <span>사번</span>
-          <input id="login-id" name="loginId" type="text" autocomplete="username" placeholder="사번 입력" required />
-        </label>
-        <label class="login-field">
-          <span>비밀번호</span>
-          <input id="login-password" name="password" type="password" autocomplete="current-password" placeholder="비밀번호 입력" required />
-        </label>
-        <p id="login-error" class="login-error" hidden></p>
-        <button id="login-submit" type="submit" class="btn btn-primary login-submit">로그인</button>
-      </form>
-
-      <form id="phone-login-form" class="login-form" data-mode="phone" hidden>
         <label class="login-field">
           <span>전화번호</span>
           <input id="phone-login-id" name="phoneLoginId" type="tel" autocomplete="tel" placeholder="휴대전화 번호 입력" required />
@@ -52,7 +34,7 @@
       </form>
 
       <div class="login-footer">
-        Headless Baron SSO 연동을 통해 로그인 세션을 생성합니다.
+        Baron SSO가 전송한 인증 링크를 모바일에서 승인하면 자동으로 로그인됩니다.
       </div>
     </section>
   </div>

src/main.ts

@@ -268,12 +268,9 @@ function initializeAppDirectly() {
 function showLoginScreen(errorMessage?: string) {
   const loginContainer = document.getElementById('login-container');
   const appLayout = document.getElementById('app-layout');
-  const loginError = document.getElementById('login-error');
   const phoneLoginError = document.getElementById('phone-login-error');
   const phoneLoginStatus = document.getElementById('phone-login-status');
-  const loginForm = document.getElementById('login-form') as HTMLFormElement | null;
   const phoneLoginForm = document.getElementById('phone-login-form') as HTMLFormElement | null;
-  const loginModeTabs = document.querySelectorAll<HTMLButtonElement>('.login-mode-tab');
 
   if (appLayout) appLayout.style.display = 'none';
   if (loginContainer) loginContainer.style.display = 'flex';
@@ -289,24 +286,10 @@ function showLoginScreen(errorMessage?: string) {
     }
   };
 
-  setMessage(loginError, errorMessage);
   setMessage(phoneLoginError, undefined);
   setMessage(phoneLoginStatus, undefined);
 
-  const switchLoginMode = (mode: 'password' | 'phone') => {
+  setMessage(phoneLoginError, errorMessage);
-    if (loginForm) loginForm.hidden = mode !== 'password';
-    if (phoneLoginForm) phoneLoginForm.hidden = mode !== 'phone';
-    loginModeTabs.forEach((tab) => tab.classList.toggle('active', tab.dataset.mode === mode));
-    setMessage(loginError, mode === 'password' ? errorMessage : undefined);
-    setMessage(phoneLoginError, mode === 'phone' ? errorMessage : undefined);
-  };
-
-  loginModeTabs.forEach((tab) => {
-    if (!tab.dataset.bound) {
-      tab.dataset.bound = 'true';
-      tab.addEventListener('click', () => switchLoginMode((tab.dataset.mode as 'password' | 'phone') || 'password'));
-    }
-  });
 
   const clearPhonePollTimer = () => {
     if (phoneLoginPollTimer) {
@@ -353,53 +336,6 @@ function showLoginScreen(errorMessage?: string) {
     }, intervalMs);
   };
 
-  if (loginForm && !loginForm.dataset.bound) {
-    loginForm.dataset.bound = 'true';
-    loginForm.addEventListener('submit', async (event) => {
-      event.preventDefault();
-      const submitButton = document.getElementById('login-submit') as HTMLButtonElement | null;
-      const loginId = (document.getElementById('login-id') as HTMLInputElement | null)?.value.trim() || '';
-      const password = (document.getElementById('login-password') as HTMLInputElement | null)?.value || '';
-
-      if (!loginId || !password) {
-        showLoginScreen('사번과 비밀번호를 입력하세요.');
-        return;
-      }
-
-      if (submitButton) {
-        submitButton.disabled = true;
-        submitButton.textContent = '로그인 중...';
-      }
-
-      try {
-        const response = await fetch('/api/auth/headless/login', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ loginId, password })
-        });
-        const payload = await response.json();
-
-        if (!response.ok) {
-          const message = payload.redirectTo
-            ? '접근 권한이 없는 테넌트입니다. 관리자에게 문의하세요.'
-            : (payload.error || '로그인에 실패했습니다.');
-          showLoginScreen(message);
-          return;
-        }
-
-        initializeAppDirectly();
-      } catch (error) {
-        console.error('SSO login failed:', error);
-        showLoginScreen('로그인 요청 처리 중 오류가 발생했습니다.');
-      } finally {
-        if (submitButton) {
-          submitButton.disabled = false;
-          submitButton.textContent = '로그인';
-        }
-      }
-    });
-  }
-
   if (phoneLoginForm && !phoneLoginForm.dataset.bound) {
     phoneLoginForm.dataset.bound = 'true';
     phoneLoginForm.addEventListener('submit', async (event) => {
@@ -449,8 +385,6 @@ function showLoginScreen(errorMessage?: string) {
       }
     });
   }
-
-  switchLoginMode('password');
 }
 
 async function bootstrapApp() {

src/styles/login.css

@@ -59,31 +59,6 @@
   gap: 1rem;
 }
 
-.login-mode-tabs {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 0.75rem;
-  margin-bottom: 1.25rem;
-}
-
-.login-mode-tab {
-  height: 48px;
-  border-radius: 999px;
-  border: 1px solid var(--border-color);
-  background: var(--bg-light);
-  color: var(--text-muted);
-  font-size: 1rem;
-  font-weight: 700;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.login-mode-tab.active {
-  background: var(--text-main);
-  color: var(--white);
-  border-color: var(--text-main);
-}
-
 .login-field {
   display: flex;
   flex-direction: column;