docs: 프로젝트 문서화 및 개발 가이드 추가
- 데이터베이스 스키마 및 변경 로그 문서화 - 신규 페이지 개발 가이드 작성 - 모듈 아키텍처 설계 문서 추가 - 성능 최적화 전략 문서화 - 리팩토링 계획 및 진행 상황 정리 Documentation: - DATABASE_SCHEMA.md: 전체 DB 스키마 구조 - DB_CHANGE_LOG.md: 마이그레이션 변경 이력 - DEVELOPMENT_GUIDE.md: 신규 기능 개발 표준 - MODULE_ARCHITECTURE.md: 프론트엔드 모듈 구조 - PERFORMANCE_OPTIMIZATION.md: 성능 최적화 가이드 - REFACTORING_PLAN.md: 리팩토링 진행 상황 Test Files: - app.html, app.js: SPA 테스트 파일 - test_api.html: API 테스트 페이지
This commit is contained in:
Hyungi Ahn
380
REFACTORING_PLAN.md
Normal file
380
REFACTORING_PLAN.md
Normal file
@@ -0,0 +1,380 @@
|
||||
# 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
|
||||
**검토자:** -
|
||||
**승인자:** -
|
||||
Reference in New Issue
Block a user