feat: implement role-based entry and navigation enhancements

- Replace credential login with Admin/Practitioner role selection - Add role-switcher toggle in header with automatic reversion for Admin mode - Implement immediate return to role selection via system logo click - Integrate role state management into global app state
2026-06-01 17:56:22 +09:00
parent 19d4222470
commit 9e8ab11f99
5 changed files with 226 additions and 81 deletions
--- a/src/core/state.ts
+++ b/src/core/state.ts
@@ -38,6 +38,7 @@ export interface AppState {
  activeSubTab: string;
  masterData: MasterAssetData;
  activeCharts: any[];
+  currentUserRole: 'admin' | 'user';
 }

 // 초기 상태
@@ -45,6 +46,7 @@ export const state: AppState = {
  activeCategory: 'hw',
  activeSubTab: '서버', // 대시보드 제거됨에 따라 기본값 변경
  activeCharts: [],
+  currentUserRole: 'user',
  masterData: {
    users: [],
    pc: [], server: [], storage: [], network: [],
--- a/src/main.ts
+++ b/src/main.ts
@@ -136,35 +136,76 @@ function initApp() {
  window.addEventListener('refresh-view', () => refreshView());
 }

+/**
+ * 헤더 역할 전환 토글 로직
+ */
+function initRoleSwitcher() {
+  const checkbox = document.getElementById('role-toggle-checkbox') as HTMLInputElement;
+  const userLabel = document.querySelector('.role-label.user');
+  const adminLabel = document.querySelector('.role-label.admin');
+
+  if (!checkbox || !userLabel || !adminLabel) return;
+
+  checkbox.addEventListener('change', () => {
+    if (checkbox.checked) {
+      alert('관리자 모드는 현재 준비 중입니다. 나중에 관리자 전용 페이지와 연결될 예정입니다.');
+      checkbox.checked = false; // UI 강제 되돌리기
+      return;
+    }
+    
+    // 실무자 모드 전환 (현재는 Admin 진입이 차단되므로 사실상 fallback 로직)
+    state.currentUserRole = 'user';
+    adminLabel.classList.remove('active');
+    userLabel.classList.add('active');
+    document.body.classList.remove('admin-mode');
+  });
+}
+
 /**
 * 로그인 처리 로직
 */
 function handleLogin() {
  const loginContainer = document.getElementById('login-container');
  const appLayout = document.getElementById('app-layout');
-  const loginForm = document.getElementById('login-form') as HTMLFormElement;
+  const roleCards = document.querySelectorAll('.role-card');

-  if (!loginForm || !loginContainer || !appLayout) return;
+  if (!loginContainer || !appLayout || roleCards.length === 0) 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)');
+  roleCards.forEach(card => {
+    card.addEventListener('click', () => {
+      const role = card.getAttribute('data-role');
      
-      // UI 전환
-      loginContainer.style.display = 'none';
-      appLayout.style.display = 'flex';
-      
-      // 앱 초기화 시작
-      initApp();
-    } else {
-      alert('아이디와 비밀번호를 입력해주세요.');
-    }
+      if (role === 'admin') {
+        alert('관리자 모드는 현재 준비 중입니다. 실무자 모드를 이용해 주세요.');
+        return;
+      }
+
+      if (role === 'user') {
+        console.log('🔓 Entering as Practitioner');
+        
+        // 초기 토글 상태 설정 (실무자 고정)
+        const checkbox = document.getElementById('role-toggle-checkbox') as HTMLInputElement;
+        if (checkbox) checkbox.checked = false;
+        state.currentUserRole = 'user';
+
+        // UI 전환
+        loginContainer.style.display = 'none';
+        appLayout.style.display = 'flex';
+        
+        // 역할 스위처 및 앱 초기화 시작
+        initRoleSwitcher();
+        initApp();
+        
+        // 로고 클릭 시 초기화면 복귀 로직 (한 번만 등록)
+        const brand = document.querySelector('.brand') as HTMLElement;
+        if (brand) {
+          brand.style.cursor = 'pointer';
+          brand.onclick = () => {
+            location.reload(); // 즉시 초기화면으로 복귀
+          };
+        }
+      }
+    });
  });
 }

--- a/src/styles/common.css
+++ b/src/styles/common.css
@@ -229,6 +229,85 @@ body {
  }
 }

+/* --- Role Switcher Toggle --- */
+.role-switcher {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-right: 0.5rem;
+  padding: 0 0.75rem;
+  border-right: 1px solid var(--border-color);
+  height: 24px;
+}
+
+.role-label {
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--text-muted);
+  transition: color 0.2s;
+}
+
+.role-label.active {
+  color: var(--primary-color);
+}
+
+.role-label.admin.active {
+  color: var(--color-orange);
+}
+
+/* Toggle Switch Base */
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 34px;
+  height: 18px;
+}
+
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0; left: 0; right: 0; bottom: 0;
+  background-color: #ccc;
+  transition: .4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 12px;
+  width: 12px;
+  left: 3px;
+  bottom: 3px;
+  background-color: white;
+  transition: .4s;
+}
+
+input:checked + .slider {
+  background-color: var(--color-orange);
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px var(--color-orange);
+}
+
+input:checked + .slider:before {
+  transform: translateX(16px);
+}
+
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}
+
 /* --- Global Actions & Buttons --- */
 .header-actions {
  display: flex;
--- a/src/styles/login.css
+++ b/src/styles/login.css
@@ -11,12 +11,12 @@

 .login-card {
  width: 100%;
-  max-width: 400px;
+  max-width: 500px;
  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);
+  padding: 3rem;
+  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
  animation: slideUp 0.4s ease-out;
 }

@@ -27,79 +27,89 @@

 .login-header {
  text-align: center;
-  margin-bottom: 2rem;
+  margin-bottom: 2.5rem;
 }

 .login-logo {
-  height: 48px;
-  margin-bottom: 1rem;
+  height: 52px;
+  margin-bottom: 1.25rem;
 }

 .login-header h2 {
-  font-size: 1.5rem;
+  font-size: 1.75rem;
  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;
+  color: var(--text-muted);
+}
+
+.login-selection {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1.5rem;
+}
+
+.role-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding: 2rem 1.5rem;
+  border: 2px solid var(--bg-light);
+  border-radius: 10px;
+  cursor: pointer;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  background-color: var(--bg-light);
+}
+
+.role-card:hover {
+  border-color: var(--primary-color);
+  background-color: var(--white);
+  transform: translateY(-4px);
+  box-shadow: 0 10px 20px rgba(30, 81, 73, 0.08);
+}
+
+.role-icon {
+  width: 56px;
+  height: 56px;
+  background-color: var(--white);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 1.25rem;
+  color: var(--primary-color);
+  border: 1px solid var(--border-color);
  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;
+.role-card:hover .role-icon {
  background-color: var(--primary-color);
  color: var(--white);
-  border: none;
-  border-radius: 6px;
-  font-weight: 700;
-  cursor: pointer;
-  transition: background-color 0.2s;
+  border-color: var(--primary-color);
 }

-.btn-login:hover {
-  background-color: var(--primary-hover);
+.role-card h3 {
+  font-size: 1.125rem;
+  font-weight: 700;
+  color: var(--text-main);
+  margin-bottom: 0.5rem;
+}
+
+.role-card p {
+  font-size: 0.8125rem;
+  color: var(--text-muted);
+  line-height: 1.4;
 }

 .login-footer {
-  margin-top: 2rem;
+  margin-top: 3rem;
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-muted);
 }
+