tk-factory-services/system1-factory/web/public/js/my-profile.js

// js/my-profile.js
// 내 프로필 페이지 JavaScript

import { API, getAuthHeaders, ensureAuthenticated } from '/js/api-config.js';

// 인증 확인
const token = ensureAuthenticated();

// 권한 레벨 한글 매핑
const accessLevelMap = {
  worker: '작업자',
  group_leader: '그룹장',
  support_team: '지원팀',
  admin: '관리자',
  system: '시스템 관리자'
};

// 프로필 데이터 로드
async function loadProfile() {
  try {
    // 먼저 로컬 스토리지에서 기본 정보 표시
    const storedUser = JSON.parse(localStorage.getItem('sso_user') || '{}');
    if (storedUser) {
      updateProfileUI(storedUser);
    }
    
    // API에서 최신 정보 가져오기
    const res = await fetch(`${API}/auth/me`, {
      headers: getAuthHeaders()
    });
    
    if (!res.ok) {
      throw new Error(`HTTP error! status: ${res.status}`);
    }
    
    const userData = await res.json();
    
    // 로컬 스토리지 업데이트
    const updatedUser = {
      ...storedUser,
      ...userData
    };
    localStorage.setItem('sso_user', JSON.stringify(updatedUser));
    
    // UI 업데이트
    updateProfileUI(userData);
    
  } catch (error) {
    console.error('프로필 로딩 실패:', error);
    showError('프로필 정보를 불러오는데 실패했습니다.');
  }
}

// 프로필 UI 업데이트
function updateProfileUI(user) {
  // 헤더 정보
  const avatar = document.getElementById('profileAvatar');
  if (avatar && user.name) {
    // 이름의 첫 글자를 아바타로 사용
    const initial = user.name.charAt(0).toUpperCase();
    if (initial.match(/[A-Z가-힣]/)) {
      avatar.textContent = initial;
    }
  }
  
  document.getElementById('profileName').textContent = user.name || user.username || '사용자';
  document.getElementById('profileRole').textContent = accessLevelMap[user.access_level] || user.access_level || '역할 미지정';
  
  // 기본 정보
  document.getElementById('userId').textContent = user.user_id || '-';
  document.getElementById('username').textContent = user.username || '-';
  document.getElementById('fullName').textContent = user.name || '-';
  document.getElementById('accessLevel').textContent = accessLevelMap[user.access_level] || user.access_level || '-';
  document.getElementById('workerId').textContent = user.user_id || '연결되지 않음';
  
  // 날짜 포맷팅
  if (user.created_at) {
    const createdDate = new Date(user.created_at);
    document.getElementById('createdAt').textContent = formatDate(createdDate);
  }
  
  if (user.last_login_at) {
    const lastLoginDate = new Date(user.last_login_at);
    document.getElementById('lastLogin').textContent = formatDateTime(lastLoginDate);
  } else {
    document.getElementById('lastLogin').textContent = '첫 로그인';
  }
  
  // 이메일
  document.getElementById('email').textContent = user.email || '등록되지 않음';
}

// 날짜 포맷팅 함수
function formatDate(date) {
  return date.toLocaleDateString('ko-KR', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  });
}

function formatDateTime(date) {
  return date.toLocaleString('ko-KR', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    hour: '2-digit',
    minute: '2-digit'
  });
}

// 에러 표시
function showError(message) {
  // 간단한 알림으로 처리
  alert('❌ ' + message);
}

// 페이지 로드 시 실행
document.addEventListener('DOMContentLoaded', () => {
  loadProfile();
});