hyungi/TK-FB-Project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: JavaScript 모듈 문법 오류 수정 - 브라우저 호환성 개선

Browse Source 
🐛 문제 해결:
- SyntaxError: Unexpected token '{'. import call expects one or two arguments
- SyntaxError: Unexpected keyword 'export'
- ES6 모듈 문법이 브라우저에서 제대로 로드되지 않는 문제

🔧 수정 내용:
- modern-dashboard.js: ES6 import/export → 브라우저 호환 스크립트
- api-config.js: export 문법 → window 전역 변수 설정
- group-leader.html: type="module" 제거, 일반 스크립트 로딩

✅ 브라우저 호환성:
- window.API, window.apiCall 전역 변수 사용
- window.getAuthHeaders, window.ensureAuthenticated 함수 제공
- 모든 함수를 window 객체에 등록하여 전역 접근 가능

🚀 개선 효과:
- 모든 브라우저에서 JavaScript 오류 없이 로딩
- 모던 대시보드 기능 정상 작동
- API 호출 및 인증 시스템 안정화

테스트: http://localhost:20000/pages/dashboard/group-leader.html
This commit is contained in:
Hyungi Ahn
2025-11-03 11:52:23 +09:00
parent b84f48b74a
commit b7388d47b4
3 changed files with 28 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
web-ui/js/api-config.js
View File

@@ -28,10 +28,11 @@ function getApiBaseUrl() {
// API 설정 // API 설정
const API_URL = getApiBaseUrl(); const API_URL = getApiBaseUrl();
export const API = API_URL; // 전역 변수로 설정
export const API_BASE_URL = API_URL; window.API = API_URL;
window.API_BASE_URL = API_URL;
export function ensureAuthenticated() { function ensureAuthenticated() {
const token = localStorage.getItem('token'); const token = localStorage.getItem('token');
if (!token || token === 'undefined') { if (!token || token === 'undefined') {
alert('로그인이 필요합니다'); alert('로그인이 필요합니다');
@@ -51,7 +52,7 @@ export function getAuthHeaders() {
} }
// 🔧 개선된 API 호출 함수 (에러 처리 강화) // 🔧 개선된 API 호출 함수 (에러 처리 강화)
export async function apiCall(url, options = {}) { async function apiCall(url, options = {}) {
const defaultOptions = { const defaultOptions = {
headers: getAuthHeaders() headers: getAuthHeaders()
}; };
@@ -137,6 +138,12 @@ export async function testApiConnection() {
} }
} }
// 전역 함수로 설정
window.ensureAuthenticated = ensureAuthenticated;
window.getAuthHeaders = getAuthHeaders;
window.apiCall = apiCall;
window.testApiConnection = testApiConnection;
// 개발 모드에서 자동 테스트 // 개발 모드에서 자동 테스트
if (window.location.hostname === 'localhost' || window.location.hostname.startsWith('192.168.')) { if (window.location.hostname === 'localhost' || window.location.hostname.startsWith('192.168.')) {
setTimeout(() => { setTimeout(() => {

28
web-ui/js/modern-dashboard.js
View File

@@ -1,7 +1,17 @@
// ✅ modern-dashboard.js - 모던 대시보드 JavaScript // ✅ modern-dashboard.js - 모던 대시보드 JavaScript
import { apiCall, API } from './api-config.js'; // API 설정 및 함수들은 api-config.js에서 로드됨
import { getAuthData } from './auth.js'; // window.API, window.apiCall, window.getAuthHeaders 사용
// 인증 관련 함수들
function getAuthData() {
const token = localStorage.getItem('token');
const user = localStorage.getItem('user');
return {
token,
user: user ? JSON.parse(user) : null
};
}
// 전역 변수 // 전역 변수
let currentUser = null; let currentUser = null;
@@ -182,7 +192,7 @@ async function loadDashboardData() {
async function loadWorkers() { async function loadWorkers() {
try { try {
console.log('👥 작업자 데이터 로딩...'); console.log('👥 작업자 데이터 로딩...');
const response = await apiCall(`${API}/workers`); const response = await window.apiCall(`${window.API}/workers`);
workersData = Array.isArray(response) ? response : (response.data || []); workersData = Array.isArray(response) ? response : (response.data || []);
console.log(`✅ 작업자 ${workersData.length}명 로드 완료`); console.log(`✅ 작업자 ${workersData.length}명 로드 완료`);
return workersData; return workersData;
@@ -196,7 +206,7 @@ async function loadWorkers() {
async function loadWorkData(date) { async function loadWorkData(date) {
try { try {
console.log(`📋 ${date} 작업 데이터 로딩...`); console.log(`📋 ${date} 작업 데이터 로딩...`);
const response = await apiCall(`${API}/daily-work-reports?date=${date}&view_all=true`); const response = await window.apiCall(`${window.API}/daily-work-reports?date=${date}&view_all=true`);
workData = Array.isArray(response) ? response : (response.data || []); workData = Array.isArray(response) ? response : (response.data || []);
console.log(`✅ 작업 데이터 ${workData.length}건 로드 완료`); console.log(`✅ 작업 데이터 ${workData.length}건 로드 완료`);
return workData; return workData;
@@ -509,11 +519,5 @@ function showToast(message, type = 'info', duration = 3000) {
// ========== 전역 함수 (HTML에서 호출) ========== // // ========== 전역 함수 (HTML에서 호출) ========== //
window.loadDashboardData = loadDashboardData; window.loadDashboardData = loadDashboardData;
window.showToast = showToast; window.showToast = showToast;
window.updateSummaryCards = updateSummaryCards;
// ========== 내보내기 ========== // window.displayWorkers = displayWorkers;
export {
loadDashboardData,
showToast,
updateSummaryCards,
displayWorkers
};

3
web-ui/pages/dashboard/group-leader.html
View File

@@ -12,8 +12,7 @@
<!-- 스크립트 --> <!-- 스크립트 -->
<script src="/js/auth-check.js" defer></script> <script src="/js/auth-check.js" defer></script>
<script src="/js/api-config.js" defer></script> <script type="module" src="/js/modern-dashboard.js" defer></script>
<script src="/js/modern-dashboard.js" defer></script>
</head> </head>
<body> <body>
<!-- 메인 컨테이너 --> <!-- 메인 컨테이너 -->