# M-Project 리팩토링 계획서

## 개요
사용자 권한 시스템을 세분화하고, 코드를 모듈화하여 유지보수성을 향상시키는 리팩토링 작업

---

## 1. 권한 시스템 개선

### 현재 문제점
- 단순한 2단계 권한 (admin/user)
- 하드코딩된 권한 체크
- 페이지별로 다른 권한 체크 로직

### 개선 방향

#### 1.1 새로운 권한 구조
```javascript
// 기존
enum UserRole {
    admin = "admin",
    user = "user"
}

// 개선
enum UserRole {
    super_admin = "super_admin",     // 최고 관리자
    admin = "admin",                 // 관리자
    manager = "manager",             // 매니저
    user = "user"                    // 일반 사용자
}

// 권한별 기능 매트릭스
const PERMISSIONS = {
    // 부적합 사항 관리
    'issues.create': ['super_admin', 'admin', 'manager', 'user'],
    'issues.view': ['super_admin', 'admin', 'manager', 'user'],
    'issues.edit': ['super_admin', 'admin', 'manager'],
    'issues.delete': ['super_admin', 'admin'],
    'issues.review': ['super_admin', 'admin', 'manager'],
    
    // 프로젝트 관리
    'projects.create': ['super_admin', 'admin'],
    'projects.view': ['super_admin', 'admin', 'manager', 'user'],
    'projects.edit': ['super_admin', 'admin'],
    'projects.delete': ['super_admin'],
    
    // 일일 공수 관리
    'daily_work.create': ['super_admin', 'admin', 'manager'],
    'daily_work.view': ['super_admin', 'admin', 'manager', 'user'],
    'daily_work.edit': ['super_admin', 'admin', 'manager'],
    'daily_work.delete': ['super_admin', 'admin'],
    
    // 보고서
    'reports.view': ['super_admin', 'admin', 'manager'],
    'reports.export': ['super_admin', 'admin'],
    
    // 사용자 관리
    'users.create': ['super_admin'],
    'users.view': ['super_admin', 'admin'],
    'users.edit': ['super_admin'],
    'users.delete': ['super_admin'],
    'users.change_role': ['super_admin']
}
```

#### 1.2 데이터베이스 스키마 변경
```sql
-- 새로운 권한 ENUM 타입
ALTER TYPE userrole ADD VALUE 'super_admin';
ALTER TYPE userrole ADD VALUE 'manager';

-- 사용자별 개별 권한 테이블 (선택적)
CREATE TABLE user_permissions (
    id SERIAL PRIMARY KEY,
    user_id INTEGER REFERENCES users(id) ON DELETE CASCADE,
    permission VARCHAR(50) NOT NULL,
    granted BOOLEAN DEFAULT TRUE,
    granted_by_id INTEGER REFERENCES users(id),
    granted_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    UNIQUE(user_id, permission)
);
```

---

## 2. 페이지 통합 계획

### 현재 문제점
- 사용자/관리자별 별도 페이지
- 중복된 코드와 로직
- 일관성 없는 UI/UX

### 통합 방향

#### 2.1 단일 페이지 구조
```
기존:
- index.html (사용자용)
- admin.html (관리자용)
- project-management.html (관리자용)
- issue-view.html (공통)
- daily-work.html (관리자용)

개선:
- app.html (통합 메인 애플리케이션)
  ├── 부적합 등록 (모든 사용자)
  ├── 부적합 조회 (모든 사용자)
  ├── 프로젝트 관리 (권한별 제한)
  ├── 일일 공수 (권한별 제한)
  ├── 보고서 (권한별 제한)
  └── 사용자 관리 (최고 관리자만)
```

#### 2.2 동적 메뉴 시스템
```javascript
// 권한 기반 메뉴 구성
const MENU_CONFIG = {
    'issues': {
        title: '부적합 사항',
        icon: 'fas fa-exclamation-triangle',
        permission: 'issues.view',
        children: [
            { title: '등록', path: '#issues/create', permission: 'issues.create' },
            { title: '조회', path: '#issues/list', permission: 'issues.view' },
            { title: '관리', path: '#issues/manage', permission: 'issues.edit' }
        ]
    },
    'projects': {
        title: '프로젝트',
        icon: 'fas fa-folder-open',
        permission: 'projects.view',
        children: [
            { title: '목록', path: '#projects/list', permission: 'projects.view' },
            { title: '관리', path: '#projects/manage', permission: 'projects.edit' }
        ]
    }
    // ... 기타 메뉴
}
```

---

## 3. 코드 모듈화 계획

### 현재 문제점
- 긴 HTML 파일 (1000+ 라인)
- 중복된 JavaScript 코드
- 하드코딩된 로직

### 모듈화 구조

#### 3.1 디렉토리 구조
```
frontend/
├── index.html (로그인 페이지)
├── app.html (메인 애플리케이션)
├── static/
│   ├── js/
│   │   ├── core/
│   │   │   ├── api.js (API 통신)
│   │   │   ├── auth.js (인증/권한)
│   │   │   ├── router.js (라우팅)
│   │   │   └── permissions.js (권한 체크)
│   │   ├── components/
│   │   │   ├── header.js (공통 헤더)
│   │   │   ├── sidebar.js (사이드바)
│   │   │   ├── modal.js (모달 컴포넌트)
│   │   │   └── form-validator.js (폼 검증)
│   │   ├── modules/
│   │   │   ├── issues/
│   │   │   │   ├── issue-list.js
│   │   │   │   ├── issue-form.js
│   │   │   │   └── issue-detail.js
│   │   │   ├── projects/
│   │   │   │   ├── project-list.js
│   │   │   │   └── project-form.js
│   │   │   ├── reports/
│   │   │   │   └── report-generator.js
│   │   │   └── users/
│   │   │       ├── user-list.js
│   │   │       └── user-form.js
│   │   ├── utils/
│   │   │   ├── date-utils.js
│   │   │   ├── image-utils.js
│   │   │   └── format-utils.js
│   │   └── app.js (메인 애플리케이션)
│   └── css/
│       ├── components/
│       └── modules/
```

#### 3.2 모듈 간 연결점 (Interface)

##### 3.2.1 이벤트 시스템
```javascript
// 중앙 이벤트 버스
class EventBus {
    constructor() {
        this.events = {};
    }
    
    on(event, callback) {
        if (!this.events[event]) {
            this.events[event] = [];
        }
        this.events[event].push(callback);
    }
    
    emit(event, data) {
        if (this.events[event]) {
            this.events[event].forEach(callback => callback(data));
        }
    }
    
    off(event, callback) {
        if (this.events[event]) {
            this.events[event] = this.events[event].filter(cb => cb !== callback);
        }
    }
}

// 전역 이벤트 버스
window.eventBus = new EventBus();

// 사용 예시
// 부적합 등록 완료 시
eventBus.emit('issue.created', { id: 123, title: '새 부적합' });

// 부적합 목록에서 수신
eventBus.on('issue.created', (data) => {
    refreshIssueList();
});
```

##### 3.2.2 상태 관리
```javascript
// 중앙 상태 관리
class StateManager {
    constructor() {
        this.state = {
            user: null,
            projects: [],
            issues: [],
            currentProject: null
        };
        this.subscribers = {};
    }
    
    setState(key, value) {
        this.state[key] = value;
        this.notify(key, value);
    }
    
    getState(key) {
        return this.state[key];
    }
    
    subscribe(key, callback) {
        if (!this.subscribers[key]) {
            this.subscribers[key] = [];
        }
        this.subscribers[key].push(callback);
    }
    
    notify(key, value) {
        if (this.subscribers[key]) {
            this.subscribers[key].forEach(callback => callback(value));
        }
    }
}

// 전역 상태 관리자
window.stateManager = new StateManager();
```

##### 3.2.3 모듈 로더
```javascript
// 동적 모듈 로딩
class ModuleLoader {
    constructor() {
        this.loadedModules = new Set();
    }
    
    async loadModule(modulePath) {
        if (this.loadedModules.has(modulePath)) {
            return;
        }
        
        return new Promise((resolve, reject) => {
            const script = document.createElement('script');
            script.src = modulePath;
            script.onload = () => {
                this.loadedModules.add(modulePath);
                resolve();
            };
            script.onerror = reject;
            document.head.appendChild(script);
        });
    }
    
    async loadModules(modules) {
        const promises = modules.map(module => this.loadModule(module));
        return Promise.all(promises);
    }
}

// 전역 모듈 로더
window.moduleLoader = new ModuleLoader();
```

---

## 4. 구현 단계

### Phase 1: 권한 시스템 개선
1. 데이터베이스 스키마 업데이트
2. 백엔드 권한 체크 로직 개선
3. 프론트엔드 권한 관리 모듈 개발

### Phase 2: 코어 모듈 개발
1. 이벤트 시스템 구현
2. 상태 관리 시스템 구현
3. 라우터 시스템 구현
4. 권한 체크 모듈 구현

### Phase 3: 컴포넌트 모듈화
1. 공통 컴포넌트 분리
2. 기능별 모듈 분리
3. 유틸리티 함수 분리

### Phase 4: 페이지 통합
1. 통합 메인 페이지 개발
2. 동적 메뉴 시스템 구현
3. 기존 페이지 마이그레이션

### Phase 5: 테스트 및 최적화
1. 기능 테스트
2. 성능 최적화
3. 문서화 완료

---

## 5. 예상 효과

### 개발 효율성
- 코드 재사용성 증가
- 유지보수 비용 감소
- 새 기능 개발 속도 향상

### 사용자 경험
- 일관된 UI/UX
- 권한별 맞춤 인터페이스
- 빠른 페이지 전환

### 시스템 안정성
- 명확한 권한 체계
- 모듈 간 낮은 결합도
- 높은 테스트 가능성

---

## 6. 위험 요소 및 대응 방안

### 위험 요소
1. 기존 기능 호환성 문제
2. 개발 기간 연장
3. 사용자 적응 시간

### 대응 방안
1. 단계별 점진적 마이그레이션
2. 기존 기능 유지하면서 새 기능 추가
3. 충분한 테스트 및 문서화

---

**작성일:** 2025-10-25  
**작성자:** AI Assistant  
**검토자:** -  
**승인자:** -