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
Merge branch 'main' into login
2026-06-01 17:56:22 +09:00 · 2026-06-01 16:52:17 +09:00 · 2026-06-01 16:34:57 +09:00 · 2026-06-01 16:23:23 +09:00
8 changed files with 468 additions and 10 deletions
--- 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,37 @@
 </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>
+      <div id="login-selection" class="login-selection">
+        <div class="role-card" data-role="admin">
+          <div class="role-icon">
+            <i data-lucide="settings"></i>
+          </div>
+          <h3>관리자</h3>
+          <p>시스템 설정 및 자산 마스터 관리</p>
+        </div>
+        <div class="role-card" data-role="user">
+          <div class="role-icon">
+            <i data-lucide="monitor"></i>
+          </div>
+          <h3>실무자</h3>
+          <p>자산 조회 및 현황 확인</p>
+        </div>
+      </div>
+      <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">
@@ -33,6 +64,14 @@
        </nav>

        <div class="header-actions">
+          <div class="role-switcher" id="role-switcher">
+            <span class="role-label user active">실무자</span>
+            <label class="switch">
+              <input type="checkbox" id="role-toggle-checkbox">
+              <span class="slider round"></span>
+            </label>
+            <span class="role-label admin">관리자</span>
+          </div>
          <button id="btn-admin-page" class="hidden"></button> <!-- JS 호환용 숨김 -->
          <button id="btn-open-guide-header" class="btn btn-outline" title="프로세스 가이드">
            <i data-lucide="book-open"></i> 가이드
--- a/map_config.json
+++ b/map_config.json
@@ -616,5 +616,153 @@
      "w": "44.38",
      "h": "6.53"
    }
+  ],
+  "img/location_photo/기술개발센터/서버실/서버실_1.png": [
+    {
+      "x": "69.53",
+      "y": "1.42",
+      "w": "8.58",
+      "h": "11.45"
+    },
+    {
+      "x": "79.21",
+      "y": "1.55",
+      "w": "11.97",
+      "h": "11.32"
+    },
+    {
+      "x": "90.24",
+      "y": "23.30",
+      "w": "8.50",
+      "h": "21.49"
+    },
+    {
+      "x": "53.07",
+      "y": "53.28",
+      "w": "8.74",
+      "h": "21.62"
+    },
+    {
+      "x": "62.28",
+      "y": "53.41",
+      "w": "8.82",
+      "h": "21.49"
+    },
+    {
+      "x": "71.50",
+      "y": "53.28",
+      "w": "8.90",
+      "h": "21.75"
+    },
+    {
+      "x": "80.87",
+      "y": "53.15",
+      "w": "8.66",
+      "h": "21.75"
+    },
+    {
+      "x": "90.08",
+      "y": "53.54",
+      "w": "8.90",
+      "h": "21.49"
+    },
+    {
+      "x": "43.86",
+      "y": "76.32",
+      "w": "8.82",
+      "h": "21.75"
+    },
+    {
+      "x": "53.15",
+      "y": "76.45",
+      "w": "8.66",
+      "h": "21.49"
+    },
+    {
+      "x": "62.52",
+      "y": "76.57",
+      "w": "8.58",
+      "h": "21.62"
+    },
+    {
+      "x": "71.65",
+      "y": "76.45",
+      "w": "8.66",
+      "h": "21.62"
+    },
+    {
+      "x": "80.94",
+      "y": "76.57",
+      "w": "8.74",
+      "h": "21.49"
+    },
+    {
+      "x": "90.24",
+      "y": "76.57",
+      "w": "8.50",
+      "h": "21.36"
+    }
+  ],
+  "img/location_photo/기술개발센터/서버실/서버실_2.png": [
+    {
+      "x": "49.47",
+      "y": "1.80",
+      "w": "47.49",
+      "h": "7.04"
+    },
+    {
+      "x": "49.47",
+      "y": "12.04",
+      "w": "47.49",
+      "h": "6.91"
+    },
+    {
+      "x": "49.60",
+      "y": "21.52",
+      "w": "47.35",
+      "h": "6.91"
+    },
+    {
+      "x": "49.47",
+      "y": "30.48",
+      "w": "47.49",
+      "h": "7.04"
+    },
+    {
+      "x": "49.60",
+      "y": "39.82",
+      "w": "47.49",
+      "h": "6.91"
+    },
+    {
+      "x": "49.47",
+      "y": "50.06",
+      "w": "47.62",
+      "h": "6.91"
+    },
+    {
+      "x": "49.74",
+      "y": "59.28",
+      "w": "47.22",
+      "h": "6.91"
+    },
+    {
+      "x": "49.34",
+      "y": "68.37",
+      "w": "47.75",
+      "h": "7.04"
+    },
+    {
+      "x": "49.60",
+      "y": "77.97",
+      "w": "47.22",
+      "h": "6.91"
+    },
+    {
+      "x": "49.60",
+      "y": "86.93",
+      "w": "47.35",
+      "h": "7.17"
+    }
  ]
 }
--- a/map_editor.html
+++ b/map_editor.html
@@ -1,10 +1,12 @@
 <!DOCTYPE html>
 <html lang="ko">
 <head>
-  <meta charset="UTF-8">
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>ITAM Map Coordinate Editor v3.0</title>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css" />
 </head>
-<body>
+<body style="margin: 0; display: flex; height: 100vh; overflow: hidden; font-family: sans-serif;">

  <!-- Left: File Selector -->
  <div class="file-sidebar" id="file-sidebar">
@@ -25,12 +27,12 @@
    <p>
      드래그하여 구역을 정의하세요. 저장 버튼을 누르면 즉시 시스템에 반영됩니다.
    </p>
-    
+
    <div class="box-list" id="box-list"></div>

    <div class="actions">
-      <button class="btn btn-outline" style="height:38px;" onclick="clearAll()">전체 삭제</button>
-      <button id="btn-save-server" class="btn btn-primary" style="height:38px;" onclick="saveToServer()">서버에 즉시 저장</button>
+      <button id="btn-clear-all" class="btn btn-outline" style="height:38px;">전체 삭제</button>
+      <button id="btn-save-server" class="btn btn-primary" style="height:38px;">서버에 즉시 저장</button>
      <div id="save-status"></div>
    </div>
  </div>
--- 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,4 +136,77 @@ function initApp() {
  window.addEventListener('refresh-view', () => refreshView());
 }

-document.addEventListener('DOMContentLoaded', initApp);
+/**
+ * 헤더 역할 전환 토글 로직
+ */
+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 roleCards = document.querySelectorAll('.role-card');
+
+  if (!loginContainer || !appLayout || roleCards.length === 0) return;
+
+  roleCards.forEach(card => {
+    card.addEventListener('click', () => {
+      const role = card.getAttribute('data-role');
+      
+      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(); // 즉시 초기화면으로 복귀
+          };
+        }
+      }
+    });
+  });
+}
+
+document.addEventListener('DOMContentLoaded', handleLogin);
--- 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
@@ -0,0 +1,115 @@
+/* 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: 500px;
+  background-color: var(--white);
+  border: 1px solid var(--border-color);
+  border-radius: 12px;
+  padding: 3rem;
+  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
+  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: 2.5rem;
+}
+
+.login-logo {
+  height: 52px;
+  margin-bottom: 1.25rem;
+}
+
+.login-header h2 {
+  font-size: 1.75rem;
+  font-weight: 800;
+  color: var(--text-main);
+  margin-bottom: 0.5rem;
+}
+
+.login-header p {
+  font-size: 0.9375rem;
+  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;
+}
+
+.role-card:hover .role-icon {
+  background-color: var(--primary-color);
+  color: var(--white);
+  border-color: var(--primary-color);
+}
+
+.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: 3rem;
+  text-align: center;
+  font-size: 0.75rem;
+  color: var(--text-muted);
+}
+
--- a/src/views/MapEditor.ts
+++ b/src/views/MapEditor.ts
@@ -152,14 +152,14 @@ export class MapEditor {
      this.render();
    };

-    (window as any).clearAll = () => {
+    document.getElementById('btn-clear-all')?.addEventListener('click', () => {
      if(confirm('모든 박스를 삭제할까요?')) {
        this.boxes = [];
        this.render();
      }
-    };
+    });

-    (window as any).saveToServer = () => this.saveToServer();
+    document.getElementById('btn-save-server')?.addEventListener('click', () => this.saveToServer());
  }

  private async saveToServer() {
Author	SHA1	Message	Date
Taehoon	9e8ab11f99	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
Taehoon	19d4222470	Merge branch 'main' into login	2026-06-01 16:52:17 +09:00
Taehoon	db5c7a96a6	fix: restore map editor layout and event binding logic	2026-06-01 16:34:57 +09:00
Taehoon	7d3d5ef281	feat: implement initial login UI and entry logic	2026-06-01 16:23:23 +09:00