TK-FB-Project/개발로그/2026-01-19_작업분석페이지_모듈로딩_수정.md

# 작업 분석 페이지 모듈 로딩 오류 수정

## 작업 일시
2026-01-19

## 작업 개요
작업 분석 페이지에서 발생하던 JavaScript 모듈 로딩 오류를 해결하고, 네비게이션 바가 정상적으로 표시되도록 수정했습니다.

## 발견된 문제점

### 1. JavaScript 모듈 로딩 오류
**증상:**
```
[Error] SyntaxError: Unexpected token '{'. import call expects one or two arguments.
    (익명 함수) (load-navbar.js:2)
[Error] SyntaxError: Unexpected token '{'. import call expects one or two arguments.
    (익명 함수) (api-config.js:2)
```

**원인:**
- ES6 import 문을 사용하는 스크립트 파일들이 `type="module"` 속성 없이 로드됨
- load-navbar.js와 api-config.js가 일반 스크립트로 로드되어 import 구문 파싱 실패

### 2. apiCall 참조 오류
**증상:**
```
[Error] 초기 데이터 로딩 오류: – ReferenceError: Can't find variable: apiCall
ReferenceError: Can't find variable: apiCall
    loadInitialData (work-analysis.js:138)
```

**원인:**
- work-analysis.js가 apiCall 함수를 사용하지만 api-config.js보다 먼저 실행됨
- 모듈 로딩 순서가 보장되지 않아 apiCall이 정의되기 전에 호출 시도

### 3. 네비게이션 바 미표시
**증상:**
- 작업 분석 페이지에서 상단 네비게이션 바가 표시되지 않음
- 헤더가 없어서 대시보드로 돌아갈 수 없음

**원인:**
- load-navbar.js가 모듈로 로드되지 않아 실행 실패
- navbar-container 요소에 네비게이션 컴포넌트가 로드되지 않음

## 해결 방안

### 1. HTML 스크립트 태그에 type="module" 추가

**파일:** `web-ui/pages/analysis/work-analysis.html`

#### A. api-config.js 모듈 로딩 설정
```html
<!-- 변경 전 -->
<script src="/js/api-config.js?v=1" defer></script>

<!-- 변경 후 -->
<script type="module" src="/js/api-config.js?v=3"></script>
```

#### B. work-analysis.js 모듈 로딩 설정
```html
<!-- 변경 전 -->
<script src="/js/work-analysis.js?v=4"></script>

<!-- 변경 후 -->
<script type="module" src="/js/work-analysis.js?v=5"></script>
```

#### C. load-navbar.js 모듈 로딩 설정
```html
<!-- 변경 전 -->
<script src="/js/load-navbar.js?v=4"></script>

<!-- 변경 후 -->
<script type="module" src="/js/load-navbar.js?v=5"></script>
```

**효과:**
- ES6 import/export 구문이 정상적으로 파싱됨
- 브라우저가 모듈로 인식하여 올바르게 처리
- 버전 업데이트로 브라우저 캐시 무효화

### 2. work-analysis.js에서 api-config.js import

**파일:** `web-ui/js/work-analysis.js`

```javascript
// 파일 최상단에 추가
// 작업 분석 페이지 JavaScript

// API 설정 import
import './api-config.js';

// 전역 변수
let currentMode = 'period';
let currentTab = 'worker';
// ...
```

**효과:**
- api-config.js가 work-analysis.js보다 먼저 로드되도록 보장
- window.apiCall이 정의된 후에 work-analysis.js 코드 실행
- 모듈 의존성 명시로 코드 가독성 향상

## 수정된 파일 목록

### HTML 파일
1. **web-ui/pages/analysis/work-analysis.html**
   - 3개의 script 태그에 `type="module"` 추가
   - 스크립트 버전 업데이트 (캐시 클리어)

### JavaScript 파일
2. **web-ui/js/work-analysis.js**
   - 파일 상단에 `import './api-config.js';` 추가
   - 모듈 의존성 명시

## 테스트 결과

### Before (수정 전)
```
❌ SyntaxError: Unexpected token '{'
❌ ReferenceError: Can't find variable: apiCall
❌ 네비게이션 바 미표시
❌ 초기 데이터 로딩 실패
```

### After (수정 후)
```
✅ 모듈 로딩 정상
✅ apiCall 함수 정상 호출
✅ 네비게이션 바 정상 표시
✅ 초기 데이터 로딩 성공
✅ 모든 기능 정상 작동
```

## 전체 페이지 점검 결과

이 수정 작업 중에 전체 애플리케이션의 모든 페이지를 점검했습니다:

### ✅ 정상 페이지 (type="module" 적용 완료)

**Admin 페이지:**
- manage-issue.html
- manage-project.html
- manage-task.html
- manage-user.html
- manage-worker.html

**Common 페이지:**
- daily-work-report.html
- management-dashboard.html
- project-analysis.html
- work-report-review.html
- work-report-validation.html
- worker-individual-report.html
- daily-work-report-viewer.html

**Management 페이지:**
- worker-management.html
- project-management.html
- code-management.html
- work-management.html

**Analysis 페이지:**
- work-analysis.html ← 이번 수정으로 완료

**독립 페이지 (navbar 미사용):**
- daily_work_analysis.html
- project-worktype-analysis.html
- work-report-analytics.html

### 결론
모든 페이지에서 ES6 모듈 시스템이 일관되게 적용되었습니다.

## 기술적 배경

### ES6 모듈 시스템
- **type="module"**: 브라우저에게 파일을 ES6 모듈로 처리하도록 지시
- **import/export**: 모듈 간 의존성 명시 및 코드 공유
- **자동 strict mode**: 모듈은 자동으로 엄격 모드로 실행
- **지연 로딩**: 모듈은 기본적으로 defer 동작 (DOM 로드 후 실행)

### 모듈 vs 일반 스크립트 차이
| 특성 | 모듈 (type="module") | 일반 스크립트 |
|------|---------------------|--------------|
| import/export | ✅ 지원 | ❌ 미지원 |
| 스코프 | 모듈 스코프 | 전역 스코프 |
| strict mode | 자동 적용 | 명시 필요 |
| defer | 기본 동작 | 명시 필요 |
| 중복 로드 | 한 번만 실행 | 매번 실행 |

## 배포 시 주의사항

1. **브라우저 캐시 클리어**
   - 사용자들에게 강제 새로고침 안내 필요
   - Ctrl+F5 (Windows) 또는 Cmd+Shift+R (Mac)

2. **버전 관리**
   - 스크립트 파일 버전이 상향되었으므로 캐시 문제 없음
   - api-config.js: v1 → v3
   - work-analysis.js: v4 → v5
   - load-navbar.js: v4 → v5

3. **브라우저 호환성**
   - ES6 모듈은 IE11에서 지원되지 않음
   - 최신 Chrome, Firefox, Safari, Edge에서 정상 작동
   - 필요시 Babel 트랜스파일 고려

## 관련 작업

### 이전 작업 (2026-01-19)
- [2026-01-19_작업자관리_스키마_동기화.md](./2026-01-19_작업자관리_스키마_동기화.md)
  - worker-management 페이지 모듈 로딩 수정
  - 데이터베이스 스키마 동기화

- [2026-01-19_UI_반응형_개선.md](./2026-01-19_UI_반응형_개선.md)
  - 전체 UI 반응형 디자인 개선
  - 네비게이션 바 전면 리팩토링
  - 모든 관리 페이지 모듈 시스템 통일

### 연계성
이번 수정은 UI 반응형 개선 작업의 연장선상으로:
- 동일한 문제 패턴 (type="module" 누락)
- 동일한 해결 방법 적용
- 전체 애플리케이션의 일관성 확보

## 향후 개선 계획

1. **모듈 번들링 도입**
   - Webpack 또는 Vite 도입 검토
   - 프로덕션 빌드 최적화
   - 코드 스플리팅으로 초기 로딩 개선

2. **TypeScript 전환**
   - 타입 안정성 확보
   - IDE 자동완성 개선
   - 런타임 오류 사전 방지

3. **의존성 관리 개선**
   - 모든 JS 파일에 명시적 import 추가
   - window 전역 객체 의존성 최소화
   - 모듈 간 결합도 낮추기

4. **테스트 자동화**
   - 모듈 로딩 오류 자동 감지
   - CI/CD 파이프라인 구축
   - 배포 전 자동 검증

## 참고 자료

- [MDN: JavaScript modules](https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Modules)
- [MDN: script type="module"](https://developer.mozilla.org/ko/docs/Web/HTML/Element/script#attr-type)
- [ES6 Modules in Browsers](https://jakearchibald.com/2017/es-modules-in-browsers/)

## Git 커밋 정보

- **커밋 ID**: `b0d17cd`
- **커밋 메시지**: `fix(web-ui): 작업 분석 페이지 모듈 로딩 오류 수정`
- **변경된 파일**: 2개
- **푸시 완료**: https://git.hyungi.net/hyungi/TK-FB-Project.git