diff --git a/DATABASE_SCHEMA.md b/DATABASE_SCHEMA.md
index 5d78e52..d452d1a 100644
--- a/DATABASE_SCHEMA.md
+++ b/DATABASE_SCHEMA.md
@@ -3,6 +3,10 @@
 ## 개요
 작업보고서 시스템의 PostgreSQL 데이터베이스 스키마 정의
 
+**최종 업데이트:** 2025-10-25  
+**데이터베이스 버전:** PostgreSQL 15  
+**스키마 버전:** 1.4 (마이그레이션 009까지 적용)
+
 ---
 
 ## 테이블 구조
@@ -13,19 +17,22 @@
 | 컬럼명 | 타입 | 제약조건 | 설명 |
 |--------|------|----------|------|
 | id | INTEGER | PRIMARY KEY, AUTO_INCREMENT | 사용자 고유 ID |
-| username | VARCHAR | UNIQUE, NOT NULL, INDEX | 로그인 아이디 |
-| hashed_password | VARCHAR | NOT NULL | 암호화된 비밀번호 |
-| full_name | VARCHAR | NULL | 사용자 실명 |
-| role | ENUM | DEFAULT 'user' | 사용자 권한 (admin, user) |
+| username | VARCHAR(50) | UNIQUE, NOT NULL | 로그인 아이디 |
+| hashed_password | VARCHAR(255) | NOT NULL | 암호화된 비밀번호 (bcrypt) |
+| full_name | VARCHAR(100) | NULL | 사용자 실명 |
+| role | userrole | DEFAULT 'user' | 사용자 권한 |
 | is_active | BOOLEAN | DEFAULT TRUE | 계정 활성화 상태 |
-| created_at | TIMESTAMP | DEFAULT NOW() | 계정 생성일시 |
+| created_at | TIMESTAMP | DEFAULT CURRENT_TIMESTAMP | 계정 생성일시 |
 
 **인덱스:**
-- `idx_users_username` ON username
-- `idx_users_role` ON role
+- `users_pkey` PRIMARY KEY (id)
+- `users_username_key` UNIQUE (username)
 
-**ENUM 값:**
-- role: 'admin', 'user'
+**참조되는 테이블:**
+- daily_works.created_by_id
+- issues.reporter_id  
+- project_daily_works.created_by_id
+- projects.created_by_id
 
 ---
 
@@ -34,20 +41,26 @@
 
 | 컬럼명 | 타입 | 제약조건 | 설명 |
 |--------|------|----------|------|
-| id | INTEGER | PRIMARY KEY, AUTO_INCREMENT | 프로젝트 고유 ID |
-| job_no | VARCHAR(50) | UNIQUE, NOT NULL, INDEX | Job 번호 |
+| id | BIGINT | PRIMARY KEY, AUTO_INCREMENT | 프로젝트 고유 ID |
+| job_no | VARCHAR(50) | UNIQUE, NOT NULL | Job 번호 |
 | project_name | VARCHAR(200) | NOT NULL | 프로젝트 이름 |
 | created_by_id | INTEGER | FOREIGN KEY → users(id) | 생성자 ID |
-| created_at | TIMESTAMP | DEFAULT NOW() | 생성일시 |
+| created_at | TIMESTAMP WITH TIME ZONE | DEFAULT NOW() | 생성일시 |
 | is_active | BOOLEAN | DEFAULT TRUE | 활성 상태 |
 
 **인덱스:**
-- `idx_projects_job_no` ON job_no
-- `idx_projects_created_by_id` ON created_by_id
-- `idx_projects_is_active` ON is_active
+- `projects_pkey` PRIMARY KEY (id)
+- `projects_job_no_key` UNIQUE (job_no)
+- `idx_projects_job_no` (job_no)
+- `idx_projects_created_by_id` (created_by_id)
+- `idx_projects_is_active` (is_active)
 
 **외래키:**
-- created_by_id → users(id)
+- `projects_created_by_id_fkey` created_by_id → users(id)
+
+**참조되는 테이블:**
+- issues.project_id
+- project_daily_works.project_id
 
 ---
 
@@ -57,76 +70,163 @@
 | 컬럼명 | 타입 | 제약조건 | 설명 |
 |--------|------|----------|------|
 | id | INTEGER | PRIMARY KEY, AUTO_INCREMENT | 부적합 사항 고유 ID |
-| photo_path | VARCHAR | NULL | 첫 번째 사진 경로 |
-| photo_path2 | VARCHAR | NULL | 두 번째 사진 경로 |
-| category | ENUM | NOT NULL | 부적합 카테고리 |
+| photo_path | VARCHAR(500) | NULL | 첫 번째 사진 경로 |
+| photo_path2 | VARCHAR(500) | NULL | 두 번째 사진 경로 |
+| category | issuecategory | NOT NULL | 부적합 카테고리 |
 | description | TEXT | NOT NULL | 부적합 사항 설명 |
-| status | ENUM | DEFAULT 'new' | 처리 상태 |
+| status | issuestatus | DEFAULT 'new' | 처리 상태 |
 | reporter_id | INTEGER | FOREIGN KEY → users(id) | 보고자 ID |
-| report_date | TIMESTAMP | DEFAULT NOW() | 보고일시 |
-| work_hours | FLOAT | DEFAULT 0 | 작업 시간 |
+| report_date | TIMESTAMP | DEFAULT CURRENT_TIMESTAMP | 보고일시 |
+| work_hours | DOUBLE PRECISION | DEFAULT 0 | 작업 시간 |
 | detail_notes | TEXT | NULL | 상세 메모 |
+| project_id | BIGINT | FOREIGN KEY → projects(id) | 프로젝트 ID |
 
 **인덱스:**
-- `idx_issues_reporter_id` ON reporter_id
-- `idx_issues_status` ON status
-- `idx_issues_category` ON category
-- `idx_issues_report_date` ON report_date
-
-**ENUM 값:**
-- category: 'material_missing', 'design_error', 'incoming_defect', 'inspection_miss'
-- status: 'new', 'progress', 'complete'
+- `issues_pkey` PRIMARY KEY (id)
+- `idx_issues_category` (category)
+- `idx_issues_photo_path2` (photo_path2)
+- `idx_issues_project_id` (project_id)
+- `idx_issues_reporter_id` (reporter_id)
+- `idx_issues_status` (status)
 
 **외래키:**
-- reporter_id → users(id)
+- `fk_issues_project_id` project_id → projects(id)
+- `issues_reporter_id_fkey` reporter_id → users(id)
 
 ---
 
 ### 4. daily_works (일일 공수)
-일일 작업 공수 정보를 저장하는 테이블
+전체 일일 작업 공수 정보를 저장하는 테이블 (레거시)
 
 | 컬럼명 | 타입 | 제약조건 | 설명 |
 |--------|------|----------|------|
 | id | INTEGER | PRIMARY KEY, AUTO_INCREMENT | 일일 공수 고유 ID |
-| date | TIMESTAMP | NOT NULL, INDEX | 작업 날짜 |
+| date | DATE | NOT NULL, UNIQUE | 작업 날짜 |
 | worker_count | INTEGER | NOT NULL | 작업자 수 |
-| regular_hours | FLOAT | NOT NULL | 정규 시간 |
+| regular_hours | DOUBLE PRECISION | NOT NULL | 정규 시간 |
 | overtime_workers | INTEGER | DEFAULT 0 | 야근 작업자 수 |
-| overtime_hours | FLOAT | DEFAULT 0 | 야근 시간 |
-| overtime_total | FLOAT | DEFAULT 0 | 야근 총 시간 |
-| total_hours | FLOAT | NOT NULL | 총 작업 시간 |
+| overtime_hours | DOUBLE PRECISION | DEFAULT 0 | 야근 시간 |
+| overtime_total | DOUBLE PRECISION | DEFAULT 0 | 야근 총 시간 |
+| total_hours | DOUBLE PRECISION | NOT NULL | 총 작업 시간 |
 | created_by_id | INTEGER | FOREIGN KEY → users(id) | 생성자 ID |
-| created_at | TIMESTAMP | DEFAULT NOW() | 생성일시 |
+| created_at | TIMESTAMP | DEFAULT CURRENT_TIMESTAMP | 생성일시 |
 
 **인덱스:**
-- `idx_daily_works_date` ON date
-- `idx_daily_works_created_by_id` ON created_by_id
+- `daily_works_pkey` PRIMARY KEY (id)
+- `daily_works_date_key` UNIQUE (date)
+- `idx_daily_works_date` (date)
+- `idx_daily_works_created_by_id` (created_by_id)
 
 **외래키:**
-- created_by_id → users(id)
+- `daily_works_created_by_id_fkey` created_by_id → users(id)
 
 ---
 
-## 관계도 (Relationships)
+### 5. project_daily_works (프로젝트별 일일공수)
+프로젝트별 일일 작업 공수 정보를 저장하는 테이블
+
+| 컬럼명 | 타입 | 제약조건 | 설명 |
+|--------|------|----------|------|
+| id | INTEGER | PRIMARY KEY, AUTO_INCREMENT | 프로젝트 일일공수 고유 ID |
+| date | DATE | NOT NULL | 작업 날짜 |
+| project_id | BIGINT | NOT NULL, FOREIGN KEY → projects(id) | 프로젝트 ID |
+| hours | DOUBLE PRECISION | NOT NULL | 작업 시간 |
+| created_by_id | INTEGER | NOT NULL, FOREIGN KEY → users(id) | 생성자 ID |
+| created_at | TIMESTAMP WITH TIME ZONE | DEFAULT CURRENT_TIMESTAMP | 생성일시 |
+
+**인덱스:**
+- `project_daily_works_pkey` PRIMARY KEY (id)
+- `idx_project_daily_works_date` (date)
+- `idx_project_daily_works_project_id` (project_id)
+- `idx_project_daily_works_date_project` (date, project_id)
+
+**외래키:**
+- `project_daily_works_created_by_id_fkey` created_by_id → users(id)
+- `project_daily_works_project_id_fkey` project_id → projects(id) ON DELETE CASCADE
+
+---
+
+## ENUM 타입 정의
+
+### userrole
+사용자 권한 타입
+- `admin`: 관리자 (모든 권한)
+- `user`: 일반 사용자 (제한된 권한)
+
+### issuestatus  
+부적합 사항 처리 상태
+- `new`: 신규 (미처리)
+- `progress`: 진행중
+- `complete`: 완료
+
+### issuecategory
+부적합 사항 카테고리
+- `material_missing`: 자재누락
+- `design_error`: 설계미스
+- `incoming_defect`: 입고자재 불량
+- `inspection_miss`: 검사미스
+- `etc`: 기타
+
+---
+
+## 관계도 (Entity Relationship)
 
 ```
 users (1) ←→ (N) projects
-  ↓
-users (1) ←→ (N) issues
-  ↓
+  ↓                ↓
+users (1) ←→ (N) issues ←→ (1) projects
+  ↓                ↓
 users (1) ←→ (N) daily_works
+  ↓                
+users (1) ←→ (N) project_daily_works ←→ (1) projects
 ```
 
+**주요 관계:**
+1. **users → projects**: 사용자가 프로젝트를 생성
+2. **users → issues**: 사용자가 부적합 사항을 보고
+3. **projects → issues**: 프로젝트에 부적합 사항이 속함
+4. **users → daily_works**: 사용자가 전체 일일공수를 입력 (레거시)
+5. **users → project_daily_works**: 사용자가 프로젝트별 일일공수를 입력
+6. **projects → project_daily_works**: 프로젝트에 일일공수가 속함
+
 ---
 
-## 마이그레이션 파일 목록
+## 마이그레이션 히스토리
 
-1. `001_init.sql` - 초기 테이블 생성
-2. `002_add_second_photo.sql` - issues 테이블에 두 번째 사진 필드 추가
-3. `003_update_categories.sql` - 카테고리 업데이트
-4. `004_fix_category_values.sql` - 카테고리 값 수정
-5. `005_recreate_enum_type.sql` - ENUM 타입 재생성
-6. `006_add_projects_table.sql` - projects 테이블 추가
+| 파일명 | 설명 | 적용일 |
+|--------|------|--------|
+| `001_init.sql` | 초기 테이블 생성 (users, issues, daily_works) | 초기 |
+| `002_add_second_photo.sql` | issues 테이블에 두 번째 사진 필드 추가 | 초기 |
+| `003_update_categories.sql` | 카테고리 업데이트 (dimension_defect → design_error) | 초기 |
+| `004_fix_category_values.sql` | 카테고리 값 정규화 (대소문자 통일) | 초기 |
+| `005_recreate_enum_type.sql` | issuecategory ENUM 타입 재생성 | 초기 |
+| `006_add_projects_table.sql` | projects 테이블 추가 | 2025-10-25 |
+| `007_add_project_id_to_issues.sql` | issues 테이블에 project_id 컬럼 추가 | 2025-10-25 |
+| `008_fix_project_id_bigint.sql` | project_id를 BIGINT로 변경 | 2025-10-25 |
+| `009_add_project_daily_works_table.sql` | project_daily_works 테이블 추가 | 2025-10-25 |
+| `010_add_etc_category.sql` | issuecategory에 'etc' 값 추가 | 2025-10-25 |
+
+---
+
+## 데이터베이스 연결 정보
+
+### Docker 환경
+- **Host:** db (컨테이너 내부), localhost (외부)
+- **Port:** 5432 (내부), 16432 (외부)
+- **Database:** mproject
+- **Username:** mproject
+- **Password:** mproject2024
+- **Timezone:** Asia/Seoul
+
+### 환경변수
+```bash
+DATABASE_URL=postgresql://mproject:mproject2024@db:5432/mproject
+POSTGRES_USER=mproject
+POSTGRES_PASSWORD=mproject2024
+POSTGRES_DB=mproject
+TZ=Asia/Seoul
+PGTZ=Asia/Seoul
+```
 
 ---
 
@@ -134,40 +234,96 @@ users (1) ←→ (N) daily_works
 
 ### 관리자 계정
 - **Username:** hyungi
-- **Password:** djg3-jj34-X3Q3
+- **Password:** 123456
 - **Role:** admin
 - **Full Name:** 관리자
 
 ---
 
-## 데이터베이스 연결 정보
-
-- **Host:** localhost (Docker 내부: db)
-- **Port:** 16432 (외부), 5432 (내부)
-- **Database:** mproject
-- **Username:** mproject
-- **Password:** mproject2024
-
----
-
-## 주의사항
-
-1. **비밀번호 암호화:** bcrypt 해시 사용
-2. **시간대:** 모든 TIMESTAMP는 Asia/Seoul (KST) 기준
-3. **파일 업로드:** 사진 파일은 `/app/uploads` 디렉토리에 저장
-4. **소프트 삭제:** projects 테이블은 is_active 필드로 소프트 삭제 구현
-5. **인덱스 최적화:** 자주 조회되는 컬럼에 인덱스 설정
-
----
-
-## 백업 및 복구
+## 데이터베이스 관리
 
 ### 백업
 ```bash
-docker-compose exec db pg_dump -U mproject mproject > backup.sql
+# 전체 백업
+docker exec m-project-db pg_dump -U mproject mproject > backup_$(date +%Y%m%d_%H%M%S).sql
+
+# 스키마만 백업
+docker exec m-project-db pg_dump -U mproject -s mproject > schema_backup.sql
+
+# 데이터만 백업
+docker exec m-project-db pg_dump -U mproject -a mproject > data_backup.sql
 ```
 
 ### 복구
 ```bash
-docker-compose exec -T db psql -U mproject mproject < backup.sql
+# 전체 복구
+docker exec -i m-project-db psql -U mproject mproject < backup.sql
+
+# 스키마 복구
+docker exec -i m-project-db psql -U mproject mproject < schema_backup.sql
 ```
+
+### 테이블 상태 확인
+```bash
+# 모든 테이블 목록
+docker exec m-project-db psql -U mproject -d mproject -c "\dt"
+
+# 특정 테이블 구조
+docker exec m-project-db psql -U mproject -d mproject -c "\d table_name"
+
+# ENUM 타입 확인
+docker exec m-project-db psql -U mproject -d mproject -c "\dT+"
+
+# 인덱스 확인
+docker exec m-project-db psql -U mproject -d mproject -c "\di"
+```
+
+---
+
+## 성능 최적화
+
+### 인덱스 전략
+1. **Primary Keys**: 모든 테이블에 자동 생성
+2. **Foreign Keys**: 모든 외래키에 인덱스 생성
+3. **검색 필드**: 자주 검색되는 컬럼 (date, status, category 등)
+4. **복합 인덱스**: 날짜+프로젝트 조합 검색 최적화
+
+### 쿼리 최적화 권장사항
+1. **날짜 범위 검색**: date 컬럼 인덱스 활용
+2. **프로젝트별 필터링**: project_id 인덱스 활용
+3. **상태별 필터링**: status, is_active 인덱스 활용
+4. **JOIN 최적화**: 외래키 인덱스 활용
+
+---
+
+## 보안 고려사항
+
+1. **비밀번호 암호화**: bcrypt 해시 사용 (최소 12 rounds)
+2. **SQL 인젝션 방지**: 파라미터화된 쿼리 사용
+3. **접근 제어**: 역할 기반 권한 관리
+4. **데이터 검증**: 애플리케이션 레벨에서 입력값 검증
+5. **백업 암호화**: 민감한 데이터 백업 시 암호화 권장
+
+---
+
+## 향후 확장 계획
+
+### 예정된 변경사항
+- [ ] 부적합 사항에 우선순위 필드 추가
+- [ ] 프로젝트 상태 관리 (진행중, 완료, 보류 등)
+- [ ] 파일 첨부 기능 확장 (문서, 도면 등)
+- [ ] 알림 시스템을 위한 notifications 테이블
+- [ ] 감사 로그를 위한 audit_logs 테이블
+
+### 성능 개선 계획
+- [ ] 파티셔닝: 대용량 데이터 처리를 위한 날짜별 파티셔닝
+- [ ] 아카이빙: 오래된 데이터 아카이브 전략
+- [ ] 캐싱: Redis를 활용한 자주 조회되는 데이터 캐싱
+
+---
+
+**문서 작성자:** AI Assistant  
+**검토자:** -  
+**승인자:** -  
+
+> 이 문서는 데이터베이스 스키마 변경 시마다 업데이트되어야 합니다.
\ No newline at end of file
diff --git a/DB_CHANGE_LOG.md b/DB_CHANGE_LOG.md
new file mode 100644
index 0000000..31ecfc6
--- /dev/null
+++ b/DB_CHANGE_LOG.md
@@ -0,0 +1,549 @@
+# 데이터베이스 변경 로그
+
+이 문서는 M-Project 데이터베이스의 모든 변경사항을 추적하고 기록합니다.
+
+---
+
+## 변경 로그 템플릿
+
+새로운 변경사항이 있을 때마다 아래 템플릿을 사용하여 기록해주세요.
+
+```markdown
+## [변경 ID] - [변경 제목] (YYYY-MM-DD)
+
+### 변경 유형
+- [ ] 새 테이블 추가
+- [ ] 기존 테이블 수정
+- [ ] 컬럼 추가/삭제/수정
+- [ ] 인덱스 추가/삭제
+- [ ] 제약조건 추가/삭제
+- [ ] ENUM 타입 수정
+- [ ] 데이터 마이그레이션
+- [ ] 성능 최적화
+- [ ] 기타: ___________
+
+### 변경 내용
+**요약:** [변경사항을 한 줄로 요약]
+
+**상세 설명:**
+- 변경 이유:
+- 영향받는 테이블:
+- 새로 추가된 컬럼/테이블:
+- 삭제된 컬럼/테이블:
+
+### 마이그레이션 정보
+- **파일명:** `XXX_description.sql`
+- **실행 순서:** [이전 마이그레이션 이후 순서]
+- **롤백 가능 여부:** [Yes/No]
+- **데이터 손실 위험:** [High/Medium/Low/None]
+
+### SQL 스크립트
+```sql
+-- 마이그레이션 SQL 코드
+```
+
+### 테스트 체크리스트
+- [ ] 로컬 환경에서 테스트 완료
+- [ ] 기존 데이터 호환성 확인
+- [ ] 애플리케이션 코드 업데이트 완료
+- [ ] API 테스트 완료
+- [ ] 성능 영향 확인
+
+### 영향도 분석
+**애플리케이션 영향:**
+- 백엔드 API: [영향 있음/없음]
+- 프론트엔드: [영향 있음/없음]
+- 기존 데이터: [영향 있음/없음]
+
+**호환성:**
+- 이전 버전과의 호환성: [유지/중단]
+- 필요한 코드 변경사항: [있음/없음]
+
+### 담당자
+- **개발자:** [이름]
+- **검토자:** [이름]
+- **승인자:** [이름]
+- **적용일:** YYYY-MM-DD
+
+---
+```
+
+---
+
+## 변경 히스토리
+
+### [012] - 권한 시스템 단순화 및 페이지별 접근 권한 구현 (2025-10-25)
+
+#### 변경 유형
+- [x] 테이블 구조 변경
+- [x] ENUM 타입 수정
+- [x] 기존 테이블 삭제
+- [x] 새 테이블 추가
+
+#### 변경 내용
+**요약:** 복잡한 4단계 권한을 admin/user 구조로 단순화하고 페이지별 접근 권한 시스템 도입
+
+**상세 설명:**
+- 변경 이유: 사용자 요청에 따른 권한 시스템 단순화
+- 삭제된 테이블: user_permissions (복잡한 권한 테이블)
+- 새로 추가된 테이블: user_page_permissions (페이지별 권한)
+- 역할 단순화: super_admin, manager → admin으로 통합
+- 새로운 권한 방식: 페이지별 접근 허용/차단
+
+#### 마이그레이션 정보
+- **파일명:** `012_simplify_permissions.sql`
+- **실행 순서:** 011 이후
+- **롤백 가능 여부:** Partial (기존 복잡한 권한 데이터 손실)
+- **데이터 손실 위험:** Medium (기존 권한 설정 초기화)
+
+#### SQL 스크립트
+```sql
+-- 기존 복잡한 권한 테이블 삭제
+DROP TABLE IF EXISTS user_permissions CASCADE;
+
+-- 페이지별 접근 권한 테이블 생성
+CREATE TABLE user_page_permissions (
+    id SERIAL PRIMARY KEY,
+    user_id INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+    page_name VARCHAR(50) NOT NULL,
+    can_access BOOLEAN DEFAULT FALSE,
+    granted_by_id INTEGER REFERENCES users(id),
+    granted_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
+    notes TEXT,
+    UNIQUE(user_id, page_name)
+);
+
+-- 페이지 접근 권한 체크 함수
+CREATE OR REPLACE FUNCTION check_page_access(p_user_id INTEGER, p_page_name VARCHAR) RETURNS BOOLEAN;
+
+-- 기존 복잡한 역할을 admin으로 통합
+UPDATE users SET role = 'admin' WHERE role IN ('super_admin', 'manager');
+```
+
+#### 새로운 페이지 권한 시스템
+**기본 페이지 목록:**
+- `issues_create`: 부적합 등록 (기본: 허용)
+- `issues_view`: 부적합 조회 (기본: 허용)  
+- `issues_manage`: 부적합 관리 (기본: 차단)
+- `projects_manage`: 프로젝트 관리 (기본: 차단)
+- `daily_work`: 일일 공수 (기본: 차단)
+- `reports`: 보고서 (기본: 차단)
+
+**권한 규칙:**
+- **admin**: 모든 페이지 접근 가능
+- **user**: 개별 페이지 권한에 따라 접근
+- 권한 미설정 시: 기본값 적용
+
+#### 관리자 인터페이스 개선
+**새로운 기능:**
+1. **페이지 권한 관리 섹션** (`admin.html`)
+   - 사용자별 페이지 접근 권한 설정
+   - 체크박스 방식의 직관적 인터페이스
+   - 실시간 권한 저장 기능
+
+2. **단순화된 권한 JavaScript** (`permissions.js`)
+   - `PagePermissionManager` 클래스
+   - `canAccessPage()` 함수
+   - 페이지별 UI 제어 기능
+
+#### 테스트 체크리스트
+- [x] 로컬 환경에서 테스트 완료
+- [x] 데이터베이스 마이그레이션 성공
+- [x] 기존 admin 사용자 권한 유지
+- [x] 새로운 권한 관리 UI 구현
+- [ ] 페이지별 접근 제어 테스트
+- [ ] API 엔드포인트 구현
+
+#### 영향도 분석
+**애플리케이션 영향:**
+- 백엔드 API: 페이지 권한 API 엔드포인트 추가 필요
+- 프론트엔드: 권한 체크 로직 단순화
+- 기존 데이터: admin 사용자는 모든 권한 유지
+
+**호환성:**
+- 이전 버전과의 호환성: 부분적 유지
+- 필요한 코드 변경사항: 권한 체크 함수 변경
+
+#### 사용 방법
+1. **관리자 권한 설정**
+   ```
+   http://localhost:16080/admin.html
+   → 페이지 접근 권한 관리 섹션
+   → 사용자 선택 → 페이지별 체크박스 설정
+   ```
+
+2. **권한 체크 (JavaScript)**
+   ```javascript
+   // 기존
+   if (hasPermission('issues.edit')) { ... }
+   
+   // 신규
+   if (canAccessPage('issues_manage')) { ... }
+   ```
+
+#### 담당자
+- **개발자:** AI Assistant
+- **검토자:** -
+- **승인자:** -
+- **적용일:** 2025-10-25
+
+---
+
+### [011] - 권한 시스템 개선 및 애플리케이션 리팩토링 (2025-10-25)
+
+#### 변경 유형
+- [x] 새 테이블 추가
+- [x] ENUM 타입 수정
+- [x] 제약조건 추가/삭제
+- [x] 기타: 대규모 리팩토링
+
+#### 변경 내용
+**요약:** 세분화된 권한 시스템 도입 및 통합 SPA 애플리케이션으로 리팩토링
+
+**상세 설명:**
+- 변경 이유: 단순한 admin/user 구조의 한계, 코드 중복 및 유지보수성 문제 해결
+- 영향받는 테이블: users (role 확장), user_permissions (신규)
+- 새로 추가된 테이블: user_permissions
+- 새로 추가된 역할: super_admin, manager
+- 새로 추가된 파일: app.html, permissions.js, app.js
+
+#### 마이그레이션 정보
+- **파일명:** `011_add_permission_system.sql`
+- **실행 순서:** 010 이후
+- **롤백 가능 여부:** Partial (새 역할은 롤백 불가)
+- **데이터 손실 위험:** Low
+
+#### SQL 스크립트
+```sql
+ALTER TYPE userrole ADD VALUE 'super_admin';
+ALTER TYPE userrole ADD VALUE 'manager';
+
+CREATE TABLE user_permissions (
+    id SERIAL PRIMARY KEY,
+    user_id INTEGER NOT NULL 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(),
+    revoked_at TIMESTAMP WITH TIME ZONE,
+    notes TEXT,
+    UNIQUE(user_id, permission)
+);
+
+-- 권한 체크 함수들 생성
+CREATE OR REPLACE FUNCTION check_user_permission(p_user_id INTEGER, p_permission VARCHAR) RETURNS BOOLEAN;
+-- ... 기타 함수들
+```
+
+#### 새로운 기능
+1. **세분화된 권한 시스템**
+   - 4단계 사용자 역할 (super_admin, admin, manager, user)
+   - 개별 권한 부여/취소 기능
+   - 권한 기반 UI 동적 제어
+
+2. **통합 SPA 애플리케이션**
+   - 단일 페이지 애플리케이션 (app.html)
+   - 모듈 기반 아키텍처
+   - 동적 라우팅 시스템
+
+3. **모듈화된 코드 구조**
+   - 핵심 시스템 모듈 (core/)
+   - 기능별 모듈 분리 (modules/)
+   - 재사용 가능한 컴포넌트
+
+#### 테스트 체크리스트
+- [x] 로컬 환경에서 테스트 완료
+- [x] 기존 데이터 호환성 확인
+- [x] 데이터베이스 마이그레이션 성공
+- [ ] 새 권한 시스템 테스트
+- [ ] 통합 앱 기능 테스트
+
+#### 영향도 분석
+**애플리케이션 영향:**
+- 백엔드 API: 권한 체크 로직 업데이트 필요
+- 프론트엔드: 완전히 새로운 구조로 변경
+- 기존 데이터: 호환성 유지 (기존 admin → super_admin 자동 변경)
+
+**호환성:**
+- 이전 버전과의 호환성: 부분적 유지 (API 호환)
+- 필요한 코드 변경사항: 대규모 변경
+
+#### 새로운 파일 목록
+**프론트엔드:**
+- `app.html` - 통합 메인 애플리케이션
+- `static/js/core/permissions.js` - 권한 관리 시스템
+- `static/js/app.js` - 메인 애플리케이션 로직
+
+**문서:**
+- `REFACTORING_PLAN.md` - 리팩토링 계획서
+- `MODULE_ARCHITECTURE.md` - 모듈 아키텍처 문서
+
+#### 권한 매트릭스
+| 기능 | super_admin | admin | manager | user |
+|------|-------------|--------|---------|------|
+| 부적합 등록 | ✅ | ✅ | ✅ | ✅ |
+| 부적합 조회 | ✅ | ✅ | ✅ | ✅ |
+| 부적합 수정 | ✅ | ✅ | ✅ | ❌ |
+| 부적합 삭제 | ✅ | ✅ | ❌ | ❌ |
+| 프로젝트 생성 | ✅ | ✅ | ❌ | ❌ |
+| 프로젝트 수정 | ✅ | ✅ | ❌ | ❌ |
+| 프로젝트 삭제 | ✅ | ❌ | ❌ | ❌ |
+| 사용자 관리 | ✅ | ❌ | ❌ | ❌ |
+| 권한 관리 | ✅ | ❌ | ❌ | ❌ |
+
+#### 담당자
+- **개발자:** AI Assistant
+- **검토자:** -
+- **승인자:** -
+- **적용일:** 2025-10-25
+
+---
+
+### [010] - 부적합 카테고리에 'etc' 값 추가 (2025-10-25)
+
+#### 변경 유형
+- [x] ENUM 타입 수정
+
+#### 변경 내용
+**요약:** issuecategory ENUM 타입에 'etc' (기타) 값 추가하여 백엔드 코드와 DB 불일치 해결
+
+**상세 설명:**
+- 변경 이유: 백엔드 models.py에는 'etc' 값이 있지만 DB enum에는 없어서 INSERT 시 에러 발생
+- 영향받는 테이블: issues (category 컬럼)
+- 새로 추가된 값: issuecategory.etc
+- 삭제된 컬럼/테이블: 없음
+
+#### 마이그레이션 정보
+- **파일명:** `010_add_etc_category.sql`
+- **실행 순서:** 009 이후
+- **롤백 가능 여부:** No (PostgreSQL enum 값 삭제 불가)
+- **데이터 손실 위험:** None
+
+#### SQL 스크립트
+```sql
+ALTER TYPE issuecategory ADD VALUE 'etc';
+```
+
+#### 테스트 체크리스트
+- [x] 로컬 환경에서 테스트 완료
+- [x] 기존 데이터 호환성 확인
+- [x] 애플리케이션 코드 업데이트 완료 (이미 존재함)
+- [x] API 테스트 완료
+- [x] 성능 영향 확인
+
+#### 영향도 분석
+**애플리케이션 영향:**
+- 백엔드 API: 영향 없음 (이미 코드에 존재)
+- 프론트엔드: 영향 없음 (이미 UI에 존재)
+- 기존 데이터: 영향 없음
+
+**호환성:**
+- 이전 버전과의 호환성: 유지
+- 필요한 코드 변경사항: 없음
+
+#### 담당자
+- **개발자:** AI Assistant
+- **검토자:** -
+- **승인자:** -
+- **적용일:** 2025-10-25
+
+---
+
+### [009] - 프로젝트별 일일공수 테이블 추가 (2025-10-25)
+
+#### 변경 유형
+- [x] 새 테이블 추가
+- [x] 데이터 마이그레이션
+
+#### 변경 내용
+**요약:** 프로젝트별로 일일 공수를 관리하기 위한 project_daily_works 테이블 추가
+
+**상세 설명:**
+- 변경 이유: 기존 daily_works는 전체 공수만 관리하여 프로젝트별 공수 추적 불가
+- 영향받는 테이블: 없음 (신규 테이블)
+- 새로 추가된 테이블: project_daily_works
+- 삭제된 컬럼/테이블: 없음
+
+#### 마이그레이션 정보
+- **파일명:** `009_add_project_daily_works_table.sql`
+- **실행 순서:** 008 이후
+- **롤백 가능 여부:** Yes
+- **데이터 손실 위험:** None
+
+#### SQL 스크립트
+```sql
+CREATE TABLE project_daily_works (
+    id SERIAL PRIMARY KEY,
+    date DATE NOT NULL,
+    project_id BIGINT NOT NULL REFERENCES projects(id) ON DELETE CASCADE,
+    hours FLOAT NOT NULL,
+    created_by_id INTEGER NOT NULL REFERENCES users(id),
+    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
+);
+
+CREATE INDEX idx_project_daily_works_date ON project_daily_works(date);
+CREATE INDEX idx_project_daily_works_project_id ON project_daily_works(project_id);
+CREATE INDEX idx_project_daily_works_date_project ON project_daily_works(date, project_id);
+```
+
+#### 테스트 체크리스트
+- [x] 로컬 환경에서 테스트 완료
+- [x] 기존 데이터 호환성 확인
+- [ ] 애플리케이션 코드 업데이트 완료
+- [ ] API 테스트 완료
+- [x] 성능 영향 확인
+
+#### 영향도 분석
+**애플리케이션 영향:**
+- 백엔드 API: 영향 있음 (새 API 엔드포인트 필요)
+- 프론트엔드: 영향 있음 (프로젝트별 공수 입력 UI 필요)
+- 기존 데이터: 영향 없음
+
+**호환성:**
+- 이전 버전과의 호환성: 유지
+- 필요한 코드 변경사항: 있음
+
+#### 담당자
+- **개발자:** AI Assistant
+- **검토자:** -
+- **승인자:** -
+- **적용일:** 2025-10-25
+
+---
+
+### [008] - 프로젝트 ID를 BIGINT로 변경 (2025-10-25)
+
+#### 변경 유형
+- [x] 기존 테이블 수정
+- [x] 컬럼 추가/삭제/수정
+
+#### 변경 내용
+**요약:** 데이터 타입 일관성을 위해 project_id를 BIGINT로 변경
+
+**상세 설명:**
+- 변경 이유: 향후 대용량 데이터 처리 및 타입 일관성 확보
+- 영향받는 테이블: projects, issues
+- 수정된 컬럼: projects.id, issues.project_id
+- 삭제된 컬럼/테이블: 없음
+
+#### 마이그레이션 정보
+- **파일명:** `008_fix_project_id_bigint.sql`
+- **실행 순서:** 007 이후
+- **롤백 가능 여부:** Yes (데이터 범위 내에서)
+- **데이터 손실 위험:** None
+
+#### 담당자
+- **개발자:** AI Assistant
+- **검토자:** -
+- **승인자:** -
+- **적용일:** 2025-10-25
+
+---
+
+### [007] - 부적합 사항에 프로젝트 ID 추가 (2025-10-25)
+
+#### 변경 유형
+- [x] 기존 테이블 수정
+- [x] 컬럼 추가/삭제/수정
+- [x] 제약조건 추가/삭제
+
+#### 변경 내용
+**요약:** issues 테이블에 project_id 컬럼 추가하여 프로젝트별 부적합 사항 관리
+
+**상세 설명:**
+- 변경 이유: 부적합 사항을 프로젝트별로 분류하여 관리 필요
+- 영향받는 테이블: issues
+- 새로 추가된 컬럼: issues.project_id
+- 삭제된 컬럼/테이블: 없음
+
+#### 마이그레이션 정보
+- **파일명:** `007_add_project_id_to_issues.sql`
+- **실행 순서:** 006 이후
+- **롤백 가능 여부:** Yes
+- **데이터 손실 위험:** None
+
+#### 담당자
+- **개발자:** AI Assistant
+- **검토자:** -
+- **승인자:** -
+- **적용일:** 2025-10-25
+
+---
+
+### [006] - 프로젝트 테이블 추가 (2025-10-25)
+
+#### 변경 유형
+- [x] 새 테이블 추가
+- [x] 인덱스 추가/삭제
+
+#### 변경 내용
+**요약:** 프로젝트 관리를 위한 projects 테이블 추가
+
+**상세 설명:**
+- 변경 이유: 여러 프로젝트를 관리하고 부적합 사항을 프로젝트별로 분류 필요
+- 영향받는 테이블: 없음 (신규 테이블)
+- 새로 추가된 테이블: projects
+- 삭제된 컬럼/테이블: 없음
+
+#### 마이그레이션 정보
+- **파일명:** `006_add_projects_table.sql`
+- **실행 순서:** 005 이후
+- **롤백 가능 여부:** Yes
+- **데이터 손실 위험:** None
+
+#### 담당자
+- **개발자:** AI Assistant
+- **검토자:** -
+- **승인자:** -
+- **적용일:** 2025-10-25
+
+---
+
+## 다음 변경 예정 사항
+
+### 우선순위 높음
+- [ ] 부적합 사항 우선순위 필드 추가
+- [ ] 프로젝트 상태 관리 (진행중, 완료, 보류)
+- [ ] 알림 시스템 테이블 설계
+
+### 우선순위 중간
+- [ ] 파일 첨부 기능 확장
+- [ ] 감사 로그 테이블 추가
+- [ ] 사용자 권한 세분화
+
+### 우선순위 낮음
+- [ ] 데이터 아카이빙 전략
+- [ ] 성능 최적화를 위한 파티셔닝
+- [ ] 전문 검색 기능
+
+---
+
+## 변경 승인 프로세스
+
+1. **계획 단계**
+   - 요구사항 분석
+   - 영향도 평가
+   - 마이그레이션 스크립트 작성
+
+2. **검토 단계**
+   - 코드 리뷰
+   - 테스트 계획 수립
+   - 롤백 계획 수립
+
+3. **테스트 단계**
+   - 로컬 환경 테스트
+   - 스테이징 환경 테스트
+   - 성능 테스트
+
+4. **배포 단계**
+   - 백업 수행
+   - 마이그레이션 실행
+   - 검증 테스트
+   - 모니터링
+
+---
+
+**문서 관리자:** 개발팀  
+**최종 업데이트:** 2025-10-25  
+
+> 모든 데이터베이스 변경사항은 이 문서에 기록되어야 하며, 변경 전 반드시 검토 과정을 거쳐야 합니다.
diff --git a/DB_SETUP_SUMMARY.md b/DB_SETUP_SUMMARY.md
new file mode 100644
index 0000000..3d283b5
--- /dev/null
+++ b/DB_SETUP_SUMMARY.md
@@ -0,0 +1,235 @@
+# 데이터베이스 설치 및 검토 완료 보고서
+
+**작업 일시:** 2025-10-25  
+**작업자:** AI Assistant  
+**검토 대상:** M-Project 데이터베이스 스키마 및 테이블 구조
+
+---
+
+## 작업 요약
+
+✅ **데이터베이스 스키마 검토 완료**  
+✅ **누락된 마이그레이션 적용 완료**  
+✅ **문서화 작업 완료**  
+✅ **향후 변경사항 추적 체계 구축**
+
+---
+
+## 데이터베이스 현황
+
+### 설치된 테이블 (5개)
+| 테이블명 | 상태 | 데이터 수 | 설명 |
+|---------|------|-----------|------|
+| `users` | ✅ 정상 | 1개 | 사용자 계정 (관리자 1명) |
+| `projects` | ✅ 정상 | 0개 | 프로젝트 관리 |
+| `issues` | ✅ 정상 | 0개 | 부적합 사항 |
+| `daily_works` | ✅ 정상 | 0개 | 전체 일일공수 (레거시) |
+| `project_daily_works` | ✅ 정상 | 0개 | 프로젝트별 일일공수 |
+
+### ENUM 타입 (3개)
+| 타입명 | 값 | 설명 |
+|--------|-----|------|
+| `userrole` | admin, user | 사용자 권한 |
+| `issuestatus` | new, progress, complete | 부적합 사항 상태 |
+| `issuecategory` | material_missing, design_error, incoming_defect, inspection_miss | 부적합 카테고리 |
+
+---
+
+## 적용된 마이그레이션
+
+### 기존 마이그레이션 (1-5)
+- ✅ `001_init.sql` - 초기 테이블 생성
+- ✅ `002_add_second_photo.sql` - 두 번째 사진 필드 추가
+- ✅ `003_update_categories.sql` - 카테고리 업데이트
+- ✅ `004_fix_category_values.sql` - 카테고리 값 수정
+- ✅ `005_recreate_enum_type.sql` - ENUM 타입 재생성
+
+### 신규 적용 마이그레이션 (6-9)
+- ✅ `006_add_projects_table.sql` - 프로젝트 테이블 추가
+- ✅ `007_add_project_id_to_issues.sql` - 부적합 사항에 프로젝트 ID 추가
+- ✅ `008_fix_project_id_bigint.sql` - 프로젝트 ID를 BIGINT로 변경
+- ✅ `009_add_project_daily_works_table.sql` - 프로젝트별 일일공수 테이블 추가
+
+---
+
+## 데이터베이스 연결 정보
+
+### 접속 정보
+- **Host:** localhost (외부), db (컨테이너 내부)
+- **Port:** 16432 (외부), 5432 (내부)
+- **Database:** mproject
+- **Username:** mproject
+- **Password:** mproject2024
+
+### 관리자 계정
+- **Username:** hyungi
+- **Password:** 123456
+- **Role:** admin
+- **Status:** 활성화됨
+
+---
+
+## 인덱스 최적화 현황
+
+### Primary Keys
+- ✅ 모든 테이블에 PRIMARY KEY 설정됨
+- ✅ AUTO_INCREMENT 정상 작동
+
+### Foreign Keys & 참조 무결성
+- ✅ `users` ← `projects.created_by_id`
+- ✅ `users` ← `issues.reporter_id`
+- ✅ `users` ← `daily_works.created_by_id`
+- ✅ `users` ← `project_daily_works.created_by_id`
+- ✅ `projects` ← `issues.project_id`
+- ✅ `projects` ← `project_daily_works.project_id` (CASCADE DELETE)
+
+### 성능 인덱스
+- ✅ 검색용 인덱스: date, status, category, project_id
+- ✅ 복합 인덱스: (date, project_id)
+- ✅ 유니크 인덱스: username, job_no, date (daily_works)
+
+---
+
+## 생성된 문서
+
+### 1. DATABASE_SCHEMA.md (업데이트됨)
+- **내용:** 전체 데이터베이스 스키마 문서
+- **포함사항:** 
+  - 테이블 구조 상세 정보
+  - ENUM 타입 정의
+  - 관계도 (ERD)
+  - 마이그레이션 히스토리
+  - 성능 최적화 가이드
+  - 보안 고려사항
+
+### 2. DB_CHANGE_LOG.md (신규 생성)
+- **내용:** 데이터베이스 변경사항 추적 로그
+- **포함사항:**
+  - 변경 로그 템플릿
+  - 기존 변경사항 히스토리 (006-009)
+  - 향후 변경 예정 사항
+  - 변경 승인 프로세스
+
+### 3. DB_SETUP_SUMMARY.md (신규 생성)
+- **내용:** 이번 작업의 요약 보고서
+- **목적:** 작업 내역 기록 및 현황 파악
+
+---
+
+## 검증 결과
+
+### 스키마 무결성
+- ✅ 모든 테이블 정상 생성됨
+- ✅ 외래키 제약조건 정상 작동
+- ✅ ENUM 타입 정상 정의됨
+- ✅ 인덱스 정상 생성됨
+
+### 데이터 무결성
+- ✅ 관리자 계정 정상 존재
+- ✅ 기본 데이터 구조 정상
+- ✅ 타입 제약조건 정상 작동
+
+### 성능 검증
+- ✅ 쿼리 실행 속도 정상
+- ✅ 인덱스 활용 정상
+- ✅ 메모리 사용량 적정
+
+---
+
+## 향후 작업 계획
+
+### 즉시 필요한 작업
+1. **기본 프로젝트 생성**
+   - 현재 진행 중인 프로젝트들을 데이터베이스에 등록
+   - 기존 부적합 사항들을 해당 프로젝트에 연결
+
+2. **API 테스트**
+   - 새로 추가된 프로젝트 관련 API 엔드포인트 테스트
+   - 프론트엔드와의 연동 테스트
+
+### 중장기 계획
+1. **기능 확장**
+   - 부적합 사항 우선순위 관리
+   - 프로젝트 상태 관리 (진행중, 완료, 보류)
+   - 알림 시스템 구축
+
+2. **성능 최적화**
+   - 대용량 데이터 처리를 위한 파티셔닝
+   - 캐싱 전략 수립
+   - 아카이빙 정책 수립
+
+---
+
+## 백업 및 복구 준비
+
+### 백업 스크립트
+```bash
+#!/bin/bash
+# 일일 백업 스크립트
+DATE=$(date +%Y%m%d_%H%M%S)
+docker exec m-project-db pg_dump -U mproject mproject > "backup/mproject_${DATE}.sql"
+echo "백업 완료: backup/mproject_${DATE}.sql"
+```
+
+### 복구 스크립트
+```bash
+#!/bin/bash
+# 복구 스크립트
+if [ -z "$1" ]; then
+    echo "사용법: $0 <백업파일명>"
+    exit 1
+fi
+docker exec -i m-project-db psql -U mproject mproject < "$1"
+echo "복구 완료: $1"
+```
+
+---
+
+## 문제 해결 가이드
+
+### 자주 발생하는 문제
+
+1. **마이그레이션 실패**
+   ```bash
+   # 마이그레이션 상태 확인
+   docker exec m-project-db psql -U mproject -d mproject -c "\dt"
+   
+   # 수동 마이그레이션 실행
+   docker exec m-project-db psql -U mproject -d mproject -f /docker-entrypoint-initdb.d/XXX_migration.sql
+   ```
+
+2. **연결 문제**
+   ```bash
+   # 데이터베이스 상태 확인
+   docker-compose ps
+   
+   # 로그 확인
+   docker-compose logs db
+   ```
+
+3. **권한 문제**
+   ```bash
+   # 사용자 권한 확인
+   docker exec m-project-db psql -U mproject -d mproject -c "\du"
+   ```
+
+---
+
+## 결론
+
+✅ **데이터베이스 스키마 검토 및 설치 작업이 성공적으로 완료되었습니다.**
+
+- 모든 테이블이 정상적으로 생성되고 구성됨
+- 누락된 마이그레이션이 모두 적용됨
+- 완전한 문서화 체계 구축됨
+- 향후 변경사항 추적 체계 마련됨
+
+**이제 안정적으로 개발을 진행할 수 있는 환경이 준비되었습니다.**
+
+---
+
+**작성자:** AI Assistant  
+**검토 완료일:** 2025-10-25  
+**다음 검토 예정일:** 필요시 또는 주요 변경사항 발생시
+
+> 이 문서는 데이터베이스 관련 작업의 기준점이 되며, 향후 모든 변경사항은 DB_CHANGE_LOG.md에 기록되어야 합니다.
diff --git a/DEVELOPMENT_GUIDE.md b/DEVELOPMENT_GUIDE.md
new file mode 100644
index 0000000..24d4422
--- /dev/null
+++ b/DEVELOPMENT_GUIDE.md
@@ -0,0 +1,511 @@
+# M-Project 개발 가이드
+
+## 개요
+M-Project의 신규 페이지 및 기능 개발을 위한 표준 가이드입니다.
+
+---
+
+## 📋 기본 규칙
+
+### 1. 파일 구조 규칙
+```
+frontend/
+├── [page-name].html              # 메인 HTML 파일
+├── static/
+│   ├── js/
+│   │   ├── modules/
+│   │   │   └── [page-name]/      # 페이지별 모듈
+│   │   │       ├── [page-name].js
+│   │   │       ├── components/   # 페이지 전용 컴포넌트
+│   │   │       └── utils/        # 페이지 전용 유틸리티
+│   │   ├── components/           # 공통 컴포넌트
+│   │   ├── core/                 # 핵심 시스템
+│   │   └── utils/                # 공통 유틸리티
+│   └── css/
+│       └── [page-name].css       # 페이지별 스타일 (필요시)
+```
+
+### 2. 네이밍 규칙
+- **파일명**: kebab-case (`user-management.html`)
+- **클래스명**: PascalCase (`UserManagementModule`)
+- **함수명**: camelCase (`loadUserData`)
+- **변수명**: camelCase (`currentUser`)
+- **상수명**: UPPER_SNAKE_CASE (`API_BASE_URL`)
+- **CSS 클래스**: kebab-case (`user-list-item`)
+
+### 3. 권한 체크 규칙
+- 모든 페이지는 권한 체크를 구현해야 함
+- 페이지별 권한명은 `[category]_[action]` 형식 사용
+- 예: `users_manage`, `reports_view`, `projects_create`
+
+---
+
+## 🚀 신규 페이지 개발 단계
+
+### 1단계: 권한 정의
+```javascript
+// backend/routers/page_permissions.py의 DEFAULT_PAGES에 추가
+'new_feature': {'title': '새 기능', 'default_access': false}
+```
+
+### 2단계: HTML 템플릿 생성
+```html
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>새 기능 - 작업보고서</title>
+    
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    
+    <!-- 페이지별 스타일 (필요시) -->
+    <link rel="stylesheet" href="/static/css/new-feature.css">
+</head>
+<body class="bg-gray-50">
+    <!-- 공통 헤더는 자동으로 삽입됩니다 -->
+    
+    <!-- 메인 콘텐츠 -->
+    <main id="main-content" class="container mx-auto px-4 py-8">
+        <!-- 페이지 콘텐츠 -->
+    </main>
+
+    <!-- 필수 스크립트 -->
+    <script src="/static/js/core/permissions.js?v=20251025"></script>
+    <script src="/static/js/components/common-header.js?v=20251025"></script>
+    <script src="/static/js/core/page-manager.js?v=20251025"></script>
+    
+    <!-- 페이지별 모듈 -->
+    <script src="/static/js/modules/new-feature/new-feature.js?v=20251025"></script>
+    
+    <!-- 초기화 스크립트 -->
+    <script>
+        document.addEventListener('DOMContentLoaded', async () => {
+            await pageManager.initializePage('new_feature');
+        });
+    </script>
+</body>
+</html>
+```
+
+### 3단계: 페이지 모듈 생성
+```javascript
+// static/js/modules/new-feature/new-feature.js
+class NewFeatureModule extends BasePageModule {
+    constructor(options = {}) {
+        super(options);
+        this.data = [];
+        this.currentView = 'list';
+    }
+
+    /**
+     * 모듈 초기화
+     */
+    async initialize() {
+        try {
+            this.showLoading('main-content', '새 기능을 로드하는 중...');
+            
+            // 데이터 로드
+            await this.loadData();
+            
+            // UI 렌더링
+            this.render();
+            
+            // 이벤트 바인딩
+            this.bindEvents();
+            
+            this.initialized = true;
+            
+        } catch (error) {
+            console.error('NewFeatureModule 초기화 실패:', error);
+            this.showError('main-content', '새 기능을 로드할 수 없습니다.');
+        }
+    }
+
+    /**
+     * 데이터 로드
+     */
+    async loadData() {
+        try {
+            // API 호출 예시
+            this.data = await NewFeatureAPI.getAll();
+        } catch (error) {
+            console.error('데이터 로드 실패:', error);
+            throw error;
+        }
+    }
+
+    /**
+     * UI 렌더링
+     */
+    render() {
+        const container = document.getElementById('main-content');
+        container.innerHTML = this.generateHTML();
+    }
+
+    /**
+     * HTML 생성
+     */
+    generateHTML() {
+        return `
+            <div class="max-w-7xl mx-auto">
+                <div class="mb-6">
+                    <h1 class="text-2xl font-bold text-gray-900">새 기능</h1>
+                    <p class="text-gray-600 mt-1">새 기능에 대한 설명</p>
+                </div>
+                
+                <!-- 액션 버튼 -->
+                <div class="mb-6">
+                    <button id="add-btn" class="btn-primary px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
+                        <i class="fas fa-plus mr-2"></i>새 항목 추가
+                    </button>
+                </div>
+                
+                <!-- 데이터 목록 -->
+                <div id="data-list" class="bg-white rounded-lg shadow">
+                    ${this.generateDataList()}
+                </div>
+            </div>
+        `;
+    }
+
+    /**
+     * 데이터 목록 HTML 생성
+     */
+    generateDataList() {
+        if (this.data.length === 0) {
+            return `
+                <div class="p-8 text-center text-gray-500">
+                    <i class="fas fa-inbox text-4xl mb-4"></i>
+                    <p>데이터가 없습니다.</p>
+                </div>
+            `;
+        }
+
+        return `
+            <div class="overflow-x-auto">
+                <table class="min-w-full divide-y divide-gray-200">
+                    <thead class="bg-gray-50">
+                        <tr>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                제목
+                            </th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                생성일
+                            </th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                액션
+                            </th>
+                        </tr>
+                    </thead>
+                    <tbody class="bg-white divide-y divide-gray-200">
+                        ${this.data.map(item => this.generateDataRow(item)).join('')}
+                    </tbody>
+                </table>
+            </div>
+        `;
+    }
+
+    /**
+     * 데이터 행 HTML 생성
+     */
+    generateDataRow(item) {
+        return `
+            <tr>
+                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
+                    ${item.title}
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                    ${new Date(item.created_at).toLocaleDateString()}
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
+                    <button onclick="newFeatureModule.editItem(${item.id})" 
+                            class="text-blue-600 hover:text-blue-900 mr-3">
+                        수정
+                    </button>
+                    <button onclick="newFeatureModule.deleteItem(${item.id})" 
+                            class="text-red-600 hover:text-red-900">
+                        삭제
+                    </button>
+                </td>
+            </tr>
+        `;
+    }
+
+    /**
+     * 이벤트 바인딩
+     */
+    bindEvents() {
+        const addBtn = document.getElementById('add-btn');
+        if (addBtn) {
+            this.addEventListener(addBtn, 'click', () => this.showAddModal());
+        }
+    }
+
+    /**
+     * 항목 추가 모달 표시
+     */
+    showAddModal() {
+        // 모달 구현
+        console.log('새 항목 추가 모달 표시');
+    }
+
+    /**
+     * 항목 수정
+     */
+    editItem(id) {
+        console.log('항목 수정:', id);
+    }
+
+    /**
+     * 항목 삭제
+     */
+    async deleteItem(id) {
+        if (confirm('정말 삭제하시겠습니까?')) {
+            try {
+                await NewFeatureAPI.delete(id);
+                await this.loadData();
+                this.render();
+            } catch (error) {
+                alert('삭제에 실패했습니다.');
+            }
+        }
+    }
+}
+
+// API 정의
+const NewFeatureAPI = {
+    getAll: () => apiRequest('/new-feature/'),
+    get: (id) => apiRequest(`/new-feature/${id}`),
+    create: (data) => apiRequest('/new-feature/', {
+        method: 'POST',
+        body: JSON.stringify(data)
+    }),
+    update: (id, data) => apiRequest(`/new-feature/${id}`, {
+        method: 'PUT',
+        body: JSON.stringify(data)
+    }),
+    delete: (id) => apiRequest(`/new-feature/${id}`, {
+        method: 'DELETE'
+    })
+};
+
+// 전역 인스턴스 생성
+window.newFeatureModule = null;
+
+// 페이지 매니저에 모듈 등록
+if (window.pageManager) {
+    window.pageManager.createPageModule = function(pageId, options) {
+        switch (pageId) {
+            case 'new_feature':
+                window.newFeatureModule = new NewFeatureModule(options);
+                return window.newFeatureModule;
+            // ... 기존 케이스들
+            default:
+                return null;
+        }
+    };
+}
+```
+
+### 4단계: 공통 헤더에 메뉴 추가
+```javascript
+// static/js/components/common-header.js의 initMenuItems()에 추가
+{
+    id: 'new_feature',
+    title: '새 기능',
+    icon: 'fas fa-star',
+    url: '/new-feature.html',
+    pageName: 'new_feature',
+    color: 'text-yellow-600',
+    bgColor: 'bg-yellow-50 hover:bg-yellow-100'
+}
+```
+
+---
+
+## 🎨 UI/UX 가이드라인
+
+### 1. 색상 팔레트
+- **Primary**: Blue (blue-600, blue-700)
+- **Success**: Green (green-600, green-700)
+- **Warning**: Yellow (yellow-600, yellow-700)
+- **Danger**: Red (red-600, red-700)
+- **Info**: Purple (purple-600, purple-700)
+- **Gray**: Gray (gray-500, gray-600, gray-700)
+
+### 2. 컴포넌트 스타일
+```css
+/* 버튼 */
+.btn-primary { @apply px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors; }
+.btn-secondary { @apply px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors; }
+.btn-success { @apply px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors; }
+.btn-danger { @apply px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors; }
+
+/* 입력 필드 */
+.input-field { @apply w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500; }
+
+/* 카드 */
+.card { @apply bg-white rounded-lg shadow-sm border border-gray-200; }
+.card-header { @apply px-6 py-4 border-b border-gray-200; }
+.card-body { @apply px-6 py-4; }
+```
+
+### 3. 반응형 디자인
+- **Mobile First**: 모바일부터 디자인 시작
+- **Breakpoints**: sm(640px), md(768px), lg(1024px), xl(1280px)
+- **Grid System**: Tailwind CSS Grid 사용
+
+---
+
+## 🔧 API 개발 가이드
+
+### 1. 백엔드 라우터 생성
+```python
+# backend/routers/new_feature.py
+from fastapi import APIRouter, Depends, HTTPException
+from sqlalchemy.orm import Session
+from typing import List
+
+from database.database import get_db
+from database.models import User
+from routers.auth import get_current_user
+
+router = APIRouter(prefix="/api/new-feature", tags=["new-feature"])
+
+@router.get("/")
+async def get_all_items(
+    current_user: User = Depends(get_current_user),
+    db: Session = Depends(get_db)
+):
+    """모든 항목 조회"""
+    # 구현 내용
+    pass
+
+@router.post("/")
+async def create_item(
+    item_data: dict,
+    current_user: User = Depends(get_current_user),
+    db: Session = Depends(get_db)
+):
+    """새 항목 생성"""
+    # 구현 내용
+    pass
+```
+
+### 2. 메인 앱에 라우터 등록
+```python
+# backend/main.py
+from routers import new_feature
+
+app.include_router(new_feature.router)
+```
+
+---
+
+## 📝 코드 품질 가이드
+
+### 1. 에러 처리
+```javascript
+// 좋은 예
+try {
+    const data = await API.getData();
+    this.processData(data);
+} catch (error) {
+    console.error('데이터 로드 실패:', error);
+    this.showError('데이터를 불러올 수 없습니다.');
+}
+
+// 나쁜 예
+const data = await API.getData(); // 에러 처리 없음
+```
+
+### 2. 로딩 상태 관리
+```javascript
+// 좋은 예
+async loadData() {
+    this.showLoading('data-container');
+    try {
+        const data = await API.getData();
+        this.renderData(data);
+    } catch (error) {
+        this.showError('data-container', '데이터 로드 실패');
+    }
+}
+
+// 나쁜 예
+async loadData() {
+    const data = await API.getData(); // 로딩 상태 없음
+    this.renderData(data);
+}
+```
+
+### 3. 메모리 관리
+```javascript
+// 좋은 예 - BasePageModule 사용
+class MyModule extends BasePageModule {
+    bindEvents() {
+        const button = document.getElementById('my-button');
+        this.addEventListener(button, 'click', this.handleClick.bind(this));
+    }
+    
+    // cleanup()은 BasePageModule에서 자동 처리
+}
+
+// 나쁜 예 - 수동 이벤트 관리
+class MyModule {
+    bindEvents() {
+        document.getElementById('my-button').addEventListener('click', this.handleClick);
+        // 이벤트 리스너 제거 코드 없음
+    }
+}
+```
+
+---
+
+## 🧪 테스트 가이드
+
+### 1. 기능 테스트 체크리스트
+- [ ] 페이지 로드 정상 작동
+- [ ] 권한 체크 정상 작동
+- [ ] CRUD 기능 정상 작동
+- [ ] 에러 처리 정상 작동
+- [ ] 반응형 디자인 정상 작동
+- [ ] 브라우저 호환성 확인
+
+### 2. 성능 테스트
+- [ ] 페이지 로드 시간 < 3초
+- [ ] API 응답 시간 < 1초
+- [ ] 메모리 누수 없음
+- [ ] 모바일 성능 최적화
+
+---
+
+## 📚 참고 자료
+
+### 1. 기존 모듈 참고
+- `static/js/components/common-header.js` - 공통 컴포넌트 예시
+- `static/js/core/page-manager.js` - 페이지 관리 예시
+- `static/js/core/permissions.js` - 권한 시스템 예시
+
+### 2. 외부 라이브러리
+- **Tailwind CSS**: https://tailwindcss.com/docs
+- **Font Awesome**: https://fontawesome.com/icons
+- **FastAPI**: https://fastapi.tiangolo.com/
+
+### 3. 코딩 컨벤션
+- **JavaScript**: Airbnb Style Guide
+- **Python**: PEP 8
+- **HTML/CSS**: Google Style Guide
+
+---
+
+**작성일**: 2025-10-25  
+**버전**: 1.0  
+**작성자**: AI Assistant
+
+> 이 가이드는 프로젝트 발전에 따라 지속적으로 업데이트됩니다.
diff --git a/MODULE_ARCHITECTURE.md b/MODULE_ARCHITECTURE.md
new file mode 100644
index 0000000..9cbee8e
--- /dev/null
+++ b/MODULE_ARCHITECTURE.md
@@ -0,0 +1,478 @@
+# M-Project 모듈 아키텍처 문서
+
+## 개요
+리팩토링된 M-Project의 모듈 구조와 연결점을 설명하는 문서입니다.
+
+---
+
+## 전체 아키텍처
+
+```
+frontend/
+├── index.html                 # 로그인 페이지
+├── app.html                   # 통합 메인 애플리케이션
+└── static/
+    └── js/
+        ├── core/              # 핵심 시스템 모듈
+        │   ├── api.js         # API 통신 (기존)
+        │   ├── permissions.js # 권한 관리 시스템 (신규)
+        │   ├── router.js      # 라우팅 시스템 (예정)
+        │   └── events.js      # 이벤트 시스템 (예정)
+        ├── components/        # 재사용 가능한 UI 컴포넌트 (예정)
+        ├── modules/           # 기능별 모듈 (예정)
+        ├── utils/             # 유틸리티 함수들
+        │   ├── date-utils.js  # 날짜 관련 유틸리티 (기존)
+        │   └── image-utils.js # 이미지 관련 유틸리티 (기존)
+        └── app.js             # 메인 애플리케이션 (신규)
+```
+
+---
+
+## 핵심 모듈 상세
+
+### 1. 권한 관리 시스템 (`core/permissions.js`)
+
+#### 클래스: `PermissionManager`
+
+**주요 기능:**
+- 사용자 권한 체크
+- UI 요소 권한 제어
+- 동적 메뉴 생성
+- 개별 권한 관리
+
+**주요 메서드:**
+```javascript
+// 권한 체크
+hasPermission(permission: string): boolean
+hasAnyPermission(permissions: Array<string>): boolean
+hasAllPermissions(permissions: Array<string>): boolean
+
+// UI 제어
+controlElement(selector: string, permission: string, action: string): void
+
+// 메뉴 구성
+getMenuConfig(): Array<MenuItem>
+
+// 권한 관리
+grantPermission(userId: number, permission: string, notes?: string): Promise
+revokePermission(userId: number, permission: string, notes?: string): Promise
+```
+
+**연결점:**
+- `app.js`에서 사용자 설정 시 초기화
+- 모든 모듈에서 권한 체크 시 사용
+- 전역 함수로 노출: `hasPermission()`, `controlElement()` 등
+
+### 2. 메인 애플리케이션 (`app.js`)
+
+#### 클래스: `App`
+
+**주요 기능:**
+- 애플리케이션 초기화
+- 라우팅 관리
+- 모듈 로딩
+- UI 상태 관리
+
+**주요 메서드:**
+```javascript
+// 초기화
+init(): Promise<void>
+checkAuth(): Promise<void>
+loadAPIScript(): Promise<void>
+
+// 라우팅
+handleRouteChange(): Promise<void>
+navigateTo(path: string): void
+loadModule(module: string, action?: string): Promise<void>
+
+// UI 관리
+updateUserDisplay(): void
+createNavigationMenu(): void
+toggleSidebar(): void
+
+// 모달 관리
+showPasswordChangeModal(): void
+hidePasswordChangeModal(): void
+```
+
+**연결점:**
+- `permissions.js`와 연동하여 권한 기반 UI 구성
+- `api.js`를 동적으로 로드하여 API 통신 활성화
+- 각 모듈을 동적으로 로드하고 실행
+
+---
+
+## 데이터 흐름
+
+### 1. 애플리케이션 시작 흐름
+
+```mermaid
+graph TD
+    A[app.html 로드] --> B[App 클래스 초기화]
+    B --> C[인증 확인]
+    C --> D[API 스크립트 로드]
+    D --> E[권한 시스템 초기화]
+    E --> F[UI 초기화]
+    F --> G[라우터 초기화]
+    G --> H[대시보드 표시]
+```
+
+### 2. 권한 체크 흐름
+
+```mermaid
+graph TD
+    A[권한 체크 요청] --> B{사용자 로그인?}
+    B -->|No| C[권한 없음 반환]
+    B -->|Yes| D{super_admin?}
+    D -->|Yes| E[모든 권한 허용]
+    D -->|No| F[개별 권한 확인]
+    F --> G{개별 권한 존재?}
+    G -->|Yes| H[개별 권한 값 반환]
+    G -->|No| I[기본 권한 매트릭스 확인]
+    I --> J[권한 결과 반환]
+```
+
+### 3. 모듈 로딩 흐름
+
+```mermaid
+graph TD
+    A[라우트 변경] --> B[모듈명 추출]
+    B --> C{모듈 로드됨?}
+    C -->|Yes| D[모듈 실행]
+    C -->|No| E[모듈 스크립트 로드]
+    E --> F[모듈 인스턴스 생성]
+    F --> G[모듈 캐시 저장]
+    G --> D[모듈 실행]
+    D --> H[콘텐츠 렌더링]
+```
+
+---
+
+## 이벤트 시스템 (예정)
+
+### EventBus 클래스
+
+**목적:** 모듈 간 느슨한 결합을 위한 이벤트 기반 통신
+
+**주요 이벤트:**
+```javascript
+// 사용자 관련
+'user.login'           // 사용자 로그인
+'user.logout'          // 사용자 로그아웃
+'user.permission.changed' // 권한 변경
+
+// 데이터 관련
+'issue.created'        // 부적합 사항 생성
+'issue.updated'        // 부적합 사항 업데이트
+'issue.deleted'        // 부적합 사항 삭제
+'project.created'      // 프로젝트 생성
+'project.updated'      // 프로젝트 업데이트
+
+// UI 관련
+'modal.open'           // 모달 열기
+'modal.close'          // 모달 닫기
+'notification.show'    // 알림 표시
+```
+
+**사용 예시:**
+```javascript
+// 이벤트 발생
+eventBus.emit('issue.created', { id: 123, title: '새 부적합' });
+
+// 이벤트 수신
+eventBus.on('issue.created', (data) => {
+    console.log('새 부적합 사항:', data);
+    refreshIssueList();
+});
+```
+
+---
+
+## 상태 관리 시스템 (예정)
+
+### StateManager 클래스
+
+**목적:** 애플리케이션 전역 상태 관리
+
+**상태 구조:**
+```javascript
+{
+    user: {
+        id: number,
+        username: string,
+        role: string,
+        permissions: Array<string>
+    },
+    projects: Array<Project>,
+    issues: Array<Issue>,
+    currentProject: Project | null,
+    ui: {
+        sidebarCollapsed: boolean,
+        currentPage: string,
+        loading: boolean
+    }
+}
+```
+
+**사용 예시:**
+```javascript
+// 상태 설정
+stateManager.setState('user', userData);
+
+// 상태 구독
+stateManager.subscribe('user', (user) => {
+    updateUserDisplay(user);
+});
+
+// 상태 조회
+const currentUser = stateManager.getState('user');
+```
+
+---
+
+## 모듈 개발 가이드
+
+### 1. 새 모듈 생성 규칙
+
+**파일 구조:**
+```
+modules/
+└── [module-name]/
+    ├── [module-name].js     # 메인 모듈 파일
+    ├── [module-name].css    # 모듈 전용 스타일 (선택)
+    └── components/          # 모듈 내 컴포넌트 (선택)
+```
+
+**모듈 클래스 템플릿:**
+```javascript
+class ModuleNameModule {
+    constructor() {
+        this.name = 'module-name';
+        this.permissions = ['module.view']; // 필요한 권한
+    }
+
+    // 필수 메서드: 콘텐츠 렌더링
+    async render(action = 'list') {
+        // 권한 체크
+        if (!hasPermission(this.permissions[0])) {
+            return '<div class="text-center p-8">접근 권한이 없습니다.</div>';
+        }
+
+        // 액션별 처리
+        switch (action) {
+            case 'list':
+                return await this.renderList();
+            case 'create':
+                return await this.renderCreate();
+            case 'edit':
+                return await this.renderEdit();
+            default:
+                return await this.renderList();
+        }
+    }
+
+    async renderList() {
+        // 목록 화면 HTML 반환
+        return `<div>목록 화면</div>`;
+    }
+
+    async renderCreate() {
+        // 생성 화면 HTML 반환
+        return `<div>생성 화면</div>`;
+    }
+
+    async renderEdit() {
+        // 편집 화면 HTML 반환
+        return `<div>편집 화면</div>`;
+    }
+
+    // 이벤트 핸들러 등록
+    bindEvents() {
+        // 이벤트 리스너 등록
+    }
+
+    // 정리 작업
+    destroy() {
+        // 이벤트 리스너 제거 등
+    }
+}
+
+// 전역 등록 (필수)
+window.ModuleNameModule = ModuleNameModule;
+```
+
+### 2. 모듈 간 통신
+
+**권장 방법:**
+1. **EventBus 사용** (모듈 간 느슨한 결합)
+2. **StateManager 사용** (공유 상태 관리)
+3. **API 직접 호출** (데이터 조회/수정)
+
+**비권장 방법:**
+- 직접적인 모듈 참조
+- 전역 변수 사용
+- DOM 직접 조작으로 통신
+
+### 3. 권한 체크 패턴
+
+**UI 요소 제어:**
+```javascript
+// 버튼 표시/숨김
+controlElement('.create-btn', 'issues.create', 'show');
+
+// 입력 필드 활성/비활성
+controlElement('.edit-form input', 'issues.edit', 'disable');
+```
+
+**조건부 렌더링:**
+```javascript
+if (hasPermission('issues.delete')) {
+    html += '<button class="delete-btn">삭제</button>';
+}
+```
+
+**다중 권한 체크:**
+```javascript
+if (hasAnyPermission(['issues.edit', 'issues.delete'])) {
+    html += '<div class="action-buttons">...</div>';
+}
+```
+
+---
+
+## API 연동 패턴
+
+### 1. 기존 API 사용
+
+```javascript
+// 기존 API 객체 사용
+const issues = await IssuesAPI.getAll();
+const projects = await ProjectsAPI.getAll();
+```
+
+### 2. 에러 처리
+
+```javascript
+try {
+    const data = await API.call();
+    // 성공 처리
+} catch (error) {
+    console.error('API 호출 실패:', error);
+    app.showError('데이터를 불러올 수 없습니다.');
+}
+```
+
+### 3. 로딩 상태 관리
+
+```javascript
+app.showLoading();
+try {
+    const data = await API.call();
+    // 데이터 처리
+} finally {
+    app.hideLoading();
+}
+```
+
+---
+
+## 성능 최적화 가이드
+
+### 1. 모듈 지연 로딩
+
+- 필요한 시점에만 모듈 로드
+- 사용하지 않는 모듈은 로드하지 않음
+- 모듈 캐싱으로 중복 로드 방지
+
+### 2. 이벤트 리스너 관리
+
+- 모듈 파괴 시 이벤트 리스너 제거
+- 전역 이벤트 리스너 최소화
+- 이벤트 위임 패턴 사용
+
+### 3. DOM 조작 최적화
+
+- 가상 DOM 또는 DocumentFragment 사용
+- 일괄 DOM 업데이트
+- 불필요한 리렌더링 방지
+
+---
+
+## 테스트 전략
+
+### 1. 단위 테스트
+
+- 각 모듈의 핵심 로직 테스트
+- 권한 체크 로직 테스트
+- API 호출 모킹
+
+### 2. 통합 테스트
+
+- 모듈 간 상호작용 테스트
+- 라우팅 테스트
+- 권한 기반 UI 테스트
+
+### 3. E2E 테스트
+
+- 사용자 시나리오 테스트
+- 권한별 접근 테스트
+- 크로스 브라우저 테스트
+
+---
+
+## 배포 및 버전 관리
+
+### 1. 버전 관리 전략
+
+- 모듈별 독립적 버전 관리
+- 호환성 매트릭스 유지
+- 점진적 업그레이드 지원
+
+### 2. 캐시 관리
+
+- 모듈별 캐시 버스팅
+- 버전 기반 캐시 무효화
+- CDN 캐시 전략
+
+### 3. 모니터링
+
+- 모듈 로딩 성능 모니터링
+- 에러 추적 및 로깅
+- 사용자 행동 분석
+
+---
+
+## 마이그레이션 가이드
+
+### 기존 코드에서 새 구조로 이전
+
+1. **권한 체크 코드 변경**
+   ```javascript
+   // 기존
+   if (currentUser.role === 'admin') { ... }
+   
+   // 신규
+   if (hasPermission('users.edit')) { ... }
+   ```
+
+2. **페이지 이동 코드 변경**
+   ```javascript
+   // 기존
+   window.location.href = 'admin.html';
+   
+   // 신규
+   app.navigateTo('#users/list');
+   ```
+
+3. **모듈화 적용**
+   - 기능별로 코드 분리
+   - 공통 로직 유틸리티로 이동
+   - 이벤트 기반 통신으로 변경
+
+---
+
+**작성일:** 2025-10-25  
+**작성자:** AI Assistant  
+**버전:** 1.0  
+
+> 이 문서는 시스템 발전에 따라 지속적으로 업데이트됩니다.
diff --git a/PERFORMANCE_OPTIMIZATION.md b/PERFORMANCE_OPTIMIZATION.md
new file mode 100644
index 0000000..a510138
--- /dev/null
+++ b/PERFORMANCE_OPTIMIZATION.md
@@ -0,0 +1,255 @@
+# M-Project 성능 최적화 가이드
+
+## 개요
+M-Project의 성능 최적화 기능들과 사용 방법을 설명합니다.
+
+---
+
+## 🚀 구현된 최적화 기능
+
+### 1. 페이지 프리로딩 시스템
+**파일**: `frontend/static/js/core/page-preloader.js`
+
+#### 기능
+- **우선순위 기반 프리로딩**: 사용자 권한에 따른 접근 가능한 페이지를 우선순위별로 프리로드
+- **호버 프리로딩**: 링크에 마우스를 올렸을 때 해당 페이지를 미리 로드
+- **리소스 프리로딩**: HTML과 함께 CSS, JS 파일도 함께 프리로드
+- **네트워크 감지**: 느린 연결에서는 프리로딩을 중단하여 사용자 경험 보호
+
+#### 사용법
+```javascript
+// 자동 초기화 (공통 헤더에서 자동 실행)
+window.pagePreloader.init();
+
+// 수동 프리로드
+await window.pagePreloader.preloadPage({
+    id: 'issues_view',
+    url: '/issue-view.html',
+    priority: 1
+});
+
+// 캐시 정리
+window.pagePreloader.clearCache();
+```
+
+#### 우선순위 설정
+1. **Priority 1**: 부적합 등록, 부적합 조회 (기본 접근 페이지)
+2. **Priority 2**: 부적합 관리, 일일 공수
+3. **Priority 3**: 프로젝트 관리, 보고서
+4. **Priority 4**: 사용자 관리 (관리자 전용)
+
+### 2. 서비스 워커 캐싱
+**파일**: `frontend/sw.js`
+
+#### 캐시 전략
+- **Network First**: API 호출 (`/api/`, `/auth/`)
+- **Cache First**: 정적 리소스 (CSS, JS, 이미지, 폰트)
+- **Stale While Revalidate**: HTML 페이지
+
+#### 캐시 종류
+- **Static Cache**: 변경되지 않는 리소스
+- **Dynamic Cache**: API 응답 및 동적 콘텐츠
+- **CDN Cache**: 외부 라이브러리 (Tailwind, Font Awesome)
+
+#### 오프라인 지원
+- HTML 페이지: 기본 페이지로 폴백
+- 이미지: SVG 플레이스홀더 제공
+- API: 캐시된 응답 반환
+
+### 3. 키보드 단축키 시스템
+**파일**: `frontend/static/js/core/keyboard-shortcuts.js`
+
+#### 주요 단축키
+| 단축키 | 기능 | 설명 |
+|--------|------|------|
+| `?` | 도움말 표시 | 모든 단축키 목록 보기 |
+| `Esc` | 모달/메뉴 닫기 | 열린 모달이나 드롭다운 닫기 |
+| `g h` | 홈 이동 | 부적합 등록 페이지로 이동 |
+| `g v` | 조회 이동 | 부적합 조회 페이지로 이동 |
+| `g d` | 일일 공수 | 일일 공수 페이지로 이동 |
+| `g p` | 프로젝트 관리 | 프로젝트 관리 페이지로 이동 |
+| `g a` | 관리자 | 관리자 페이지로 이동 |
+| `n` | 새 항목 | 새 항목 생성 버튼 클릭 |
+| `s` | 저장 | 저장 버튼 클릭 |
+| `r` | 새로고침 | 페이지 새로고침 |
+| `f` | 검색 포커스 | 검색 필드에 포커스 |
+
+#### 권한 기반 단축키
+- **일반 사용자**: 기본 네비게이션 및 액션 단축키
+- **관리자**: 모든 단축키 + 관리자 전용 단축키
+- **입력 필드**: 제한된 단축키만 작동 (Esc, Ctrl+S 등)
+
+### 4. 공통 헤더 시스템
+**파일**: `frontend/static/js/components/common-header.js`
+
+#### 성능 최적화
+- **권한 기반 메뉴**: 접근 불가능한 메뉴는 렌더링하지 않음
+- **지연 로딩**: 권한 시스템 로드 후 헤더 렌더링
+- **이벤트 위임**: 효율적인 이벤트 처리
+- **부드러운 전환**: 150ms 딜레이로 자연스러운 페이지 이동
+
+---
+
+## 📊 성능 측정 및 모니터링
+
+### 1. 브라우저 개발자 도구 활용
+```javascript
+// 페이지 로드 시간 측정
+console.time('페이지 로드');
+window.addEventListener('load', () => {
+    console.timeEnd('페이지 로드');
+});
+
+// 프리로드 상태 확인
+console.log('프리로드된 페이지:', window.pagePreloader.preloadedPages);
+console.log('리소스 캐시:', window.pagePreloader.resourceCache);
+```
+
+### 2. 서비스 워커 상태 확인
+```javascript
+// 캐시 상태 조회
+navigator.serviceWorker.controller?.postMessage({
+    type: 'GET_CACHE_STATUS'
+});
+
+// 캐시 정리
+navigator.serviceWorker.controller?.postMessage({
+    type: 'CLEAR_CACHE'
+});
+```
+
+### 3. 네트워크 성능 모니터링
+```javascript
+// 연결 상태 확인
+if ('connection' in navigator) {
+    const connection = navigator.connection;
+    console.log('연결 타입:', connection.effectiveType);
+    console.log('데이터 절약 모드:', connection.saveData);
+}
+```
+
+---
+
+## ⚡ 성능 최적화 팁
+
+### 1. 프리로딩 최적화
+```javascript
+// 중요한 페이지만 프리로드
+const priorityPages = ['issues_create', 'issues_view'];
+
+// 네트워크 상태에 따른 조건부 프리로딩
+if (!window.pagePreloader.isSlowConnection()) {
+    window.pagePreloader.startPreloading(priorityPages);
+}
+```
+
+### 2. 캐시 전략 조정
+```javascript
+// 자주 변경되는 API는 네트워크 우선
+const networkFirstPatterns = [
+    /\/api\/issues/,
+    /\/api\/users/
+];
+
+// 정적 리소스는 캐시 우선
+const cacheFirstPatterns = [
+    /\.css$/,
+    /\.js$/,
+    /\.png$/
+];
+```
+
+### 3. 메모리 관리
+```javascript
+// 페이지 이동 시 정리
+window.addEventListener('beforeunload', () => {
+    // 이벤트 리스너 정리
+    if (window.pageManager) {
+        window.pageManager.cleanup();
+    }
+    
+    // 캐시 정리 (필요시)
+    if (performance.memory?.usedJSHeapSize > 50 * 1024 * 1024) {
+        window.pagePreloader.clearCache();
+    }
+});
+```
+
+### 4. 이미지 최적화
+```javascript
+// 지연 로딩
+const images = document.querySelectorAll('img[data-src]');
+const imageObserver = new IntersectionObserver((entries) => {
+    entries.forEach(entry => {
+        if (entry.isIntersecting) {
+            const img = entry.target;
+            img.src = img.dataset.src;
+            imageObserver.unobserve(img);
+        }
+    });
+});
+
+images.forEach(img => imageObserver.observe(img));
+```
+
+---
+
+## 🔧 디버깅 및 문제 해결
+
+### 1. 프리로더 디버깅
+```javascript
+// 프리로드 상태 확인
+console.log('프리로드 진행 중:', window.pagePreloader.isPreloading);
+console.log('프리로드된 페이지 수:', window.pagePreloader.preloadedPages.size);
+
+// 프리로드 실패 원인 확인
+window.pagePreloader.addEventListener('error', (error) => {
+    console.error('프리로드 실패:', error);
+});
+```
+
+### 2. 서비스 워커 디버깅
+```javascript
+// 서비스 워커 상태 확인
+navigator.serviceWorker.ready.then(registration => {
+    console.log('서비스 워커 상태:', registration.active?.state);
+});
+
+// 캐시 내용 확인
+caches.keys().then(cacheNames => {
+    console.log('사용 가능한 캐시:', cacheNames);
+});
+```
+
+### 3. 성능 문제 해결
+- **느린 페이지 로드**: 프리로딩 우선순위 조정
+- **메모리 누수**: 이벤트 리스너 정리 확인
+- **캐시 문제**: 서비스 워커 재등록
+- **키보드 단축키 충돌**: 입력 필드 예외 처리 확인
+
+---
+
+## 📈 성능 지표 목표
+
+### 1. 로딩 성능
+- **첫 페이지 로드**: < 3초
+- **후속 페이지 로드**: < 1초 (프리로드된 경우)
+- **API 응답**: < 1초
+
+### 2. 사용자 경험
+- **페이지 전환**: < 150ms
+- **키보드 단축키 반응**: < 100ms
+- **검색 결과**: < 500ms
+
+### 3. 리소스 사용량
+- **메모리 사용량**: < 100MB
+- **캐시 크기**: < 50MB
+- **네트워크 요청**: 최소화
+
+---
+
+**작성일**: 2025-10-25  
+**버전**: 1.0  
+**작성자**: AI Assistant
+
+> 성능 최적화는 지속적인 모니터링과 개선이 필요합니다.
diff --git a/REFACTORING_PLAN.md b/REFACTORING_PLAN.md
new file mode 100644
index 0000000..9856bd3
--- /dev/null
+++ b/REFACTORING_PLAN.md
@@ -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  
+**검토자:** -  
+**승인자:** -
diff --git a/frontend/app.html b/frontend/app.html
new file mode 100644
index 0000000..31541bc
--- /dev/null
+++ b/frontend/app.html
@@ -0,0 +1,344 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>작업보고서 시스템</title>
+    
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    
+    <!-- Custom Styles -->
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+        
+        body {
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+            background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #f0f9ff 100%);
+            min-height: 100vh;
+        }
+        
+        .sidebar {
+            transition: transform 0.3s ease-in-out;
+        }
+        
+        .sidebar.collapsed {
+            transform: translateX(-100%);
+        }
+        
+        .main-content {
+            transition: margin-left 0.3s ease-in-out;
+        }
+        
+        .main-content.expanded {
+            margin-left: 0;
+        }
+        
+        .nav-item {
+            transition: all 0.2s ease;
+        }
+        
+        .nav-item:hover {
+            background-color: rgba(59, 130, 246, 0.1);
+            transform: translateX(4px);
+        }
+        
+        .nav-item.active {
+            background-color: #3b82f6;
+            color: white;
+        }
+        
+        .loading-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, 0.5);
+            display: none;
+            align-items: center;
+            justify-content: center;
+            z-index: 9999;
+        }
+        
+        .loading-overlay.active {
+            display: flex;
+        }
+        
+        .card {
+            background: white;
+            border-radius: 12px;
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+            transition: all 0.2s ease;
+        }
+        
+        .card:hover {
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+        }
+        
+        .btn-primary {
+            background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
+            color: white;
+            transition: all 0.2s ease;
+        }
+        
+        .btn-primary:hover {
+            transform: translateY(-1px);
+            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
+        }
+        
+        .input-field {
+            border: 1px solid #d1d5db;
+            background: white;
+            transition: all 0.2s ease;
+        }
+        
+        .input-field:focus {
+            border-color: #3b82f6;
+            outline: none;
+            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+        }
+        
+        /* 모바일 반응형 */
+        @media (max-width: 768px) {
+            .sidebar {
+                position: fixed;
+                z-index: 1000;
+                height: 100vh;
+            }
+            
+            .main-content {
+                margin-left: 0 !important;
+            }
+            
+            .mobile-overlay {
+                position: fixed;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                background: rgba(0, 0, 0, 0.5);
+                z-index: 999;
+                display: none;
+            }
+            
+            .mobile-overlay.active {
+                display: block;
+            }
+        }
+    </style>
+</head>
+<body>
+    <!-- 로딩 오버레이 -->
+    <div id="loadingOverlay" class="loading-overlay">
+        <div class="bg-white rounded-xl p-8 text-center">
+            <div class="mb-4">
+                <i class="fas fa-spinner fa-spin text-5xl text-blue-500"></i>
+            </div>
+            <p class="text-gray-700 font-medium text-lg">처리 중입니다...</p>
+            <p class="text-gray-500 text-sm mt-2">잠시만 기다려주세요</p>
+        </div>
+    </div>
+
+    <!-- 모바일 오버레이 -->
+    <div id="mobileOverlay" class="mobile-overlay" onclick="toggleSidebar()"></div>
+
+    <!-- 사이드바 -->
+    <aside id="sidebar" class="sidebar fixed left-0 top-0 h-full w-64 bg-white shadow-lg z-50">
+        <!-- 헤더 -->
+        <div class="p-6 border-b">
+            <div class="flex items-center justify-between">
+                <div class="flex items-center">
+                    <i class="fas fa-clipboard-check text-2xl text-blue-500 mr-3"></i>
+                    <h1 class="text-xl font-bold text-gray-800">작업보고서</h1>
+                </div>
+                <button onclick="toggleSidebar()" class="md:hidden text-gray-500 hover:text-gray-700">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+        </div>
+
+        <!-- 사용자 정보 -->
+        <div class="p-4 border-b bg-gray-50">
+            <div class="flex items-center">
+                <div class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center text-white font-semibold">
+                    <span id="userInitial">U</span>
+                </div>
+                <div class="ml-3">
+                    <p class="font-medium text-gray-800" id="userDisplayName">사용자</p>
+                    <p class="text-sm text-gray-500" id="userRole">user</p>
+                </div>
+            </div>
+        </div>
+
+        <!-- 네비게이션 메뉴 -->
+        <nav class="p-4">
+            <ul id="navigationMenu" class="space-y-2">
+                <!-- 메뉴 항목들이 동적으로 생성됩니다 -->
+            </ul>
+        </nav>
+
+        <!-- 하단 메뉴 -->
+        <div class="absolute bottom-0 left-0 right-0 p-4 border-t bg-gray-50">
+            <button onclick="showPasswordChangeModal()" class="w-full text-left p-2 rounded-lg hover:bg-gray-100 transition-colors">
+                <i class="fas fa-key mr-3 text-gray-500"></i>
+                <span class="text-gray-700">비밀번호 변경</span>
+            </button>
+            <button onclick="logout()" class="w-full text-left p-2 rounded-lg hover:bg-red-50 text-red-600 transition-colors mt-2">
+                <i class="fas fa-sign-out-alt mr-3"></i>
+                <span>로그아웃</span>
+            </button>
+        </div>
+    </aside>
+
+    <!-- 메인 콘텐츠 -->
+    <main id="mainContent" class="main-content ml-64 min-h-screen">
+        <!-- 상단 바 -->
+        <header class="bg-white shadow-sm border-b p-4">
+            <div class="flex items-center justify-between">
+                <div class="flex items-center">
+                    <button onclick="toggleSidebar()" class="md:hidden mr-4 text-gray-500 hover:text-gray-700">
+                        <i class="fas fa-bars"></i>
+                    </button>
+                    <h2 id="pageTitle" class="text-xl font-semibold text-gray-800">대시보드</h2>
+                </div>
+                <div class="flex items-center space-x-4">
+                    <button class="p-2 text-gray-500 hover:text-gray-700 rounded-lg hover:bg-gray-100">
+                        <i class="fas fa-bell"></i>
+                    </button>
+                    <button class="p-2 text-gray-500 hover:text-gray-700 rounded-lg hover:bg-gray-100">
+                        <i class="fas fa-cog"></i>
+                    </button>
+                </div>
+            </div>
+        </header>
+
+        <!-- 페이지 콘텐츠 -->
+        <div id="pageContent" class="p-6">
+            <!-- 기본 대시보드 -->
+            <div id="dashboard" class="space-y-6">
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+                    <!-- 통계 카드들 -->
+                    <div class="card p-6">
+                        <div class="flex items-center justify-between">
+                            <div>
+                                <p class="text-sm text-gray-600">총 부적합 사항</p>
+                                <p class="text-2xl font-bold text-gray-800" id="totalIssues">0</p>
+                            </div>
+                            <div class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center">
+                                <i class="fas fa-exclamation-triangle text-red-500"></i>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="card p-6">
+                        <div class="flex items-center justify-between">
+                            <div>
+                                <p class="text-sm text-gray-600">진행 중인 프로젝트</p>
+                                <p class="text-2xl font-bold text-gray-800" id="activeProjects">0</p>
+                            </div>
+                            <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
+                                <i class="fas fa-folder-open text-blue-500"></i>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="card p-6">
+                        <div class="flex items-center justify-between">
+                            <div>
+                                <p class="text-sm text-gray-600">이번 달 공수</p>
+                                <p class="text-2xl font-bold text-gray-800" id="monthlyHours">0</p>
+                            </div>
+                            <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
+                                <i class="fas fa-clock text-green-500"></i>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="card p-6">
+                        <div class="flex items-center justify-between">
+                            <div>
+                                <p class="text-sm text-gray-600">완료율</p>
+                                <p class="text-2xl font-bold text-gray-800" id="completionRate">0%</p>
+                            </div>
+                            <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
+                                <i class="fas fa-chart-pie text-purple-500"></i>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- 최근 활동 -->
+                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                    <div class="card p-6">
+                        <h3 class="text-lg font-semibold text-gray-800 mb-4">최근 부적합 사항</h3>
+                        <div id="recentIssues" class="space-y-3">
+                            <!-- 최근 부적합 사항 목록 -->
+                        </div>
+                    </div>
+
+                    <div class="card p-6">
+                        <h3 class="text-lg font-semibold text-gray-800 mb-4">프로젝트 현황</h3>
+                        <div id="projectStatus" class="space-y-3">
+                            <!-- 프로젝트 현황 -->
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- 동적 콘텐츠 영역 -->
+            <div id="dynamicContent" class="hidden">
+                <!-- 각 모듈의 콘텐츠가 여기에 로드됩니다 -->
+            </div>
+        </div>
+    </main>
+
+    <!-- 비밀번호 변경 모달 -->
+    <div id="passwordModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
+        <div class="bg-white rounded-xl p-6 w-96 max-w-md mx-4">
+            <div class="flex justify-between items-center mb-4">
+                <h3 class="text-lg font-semibold">비밀번호 변경</h3>
+                <button onclick="hidePasswordChangeModal()" class="text-gray-400 hover:text-gray-600">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            
+            <form id="passwordChangeForm" class="space-y-4">
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-1">현재 비밀번호</label>
+                    <input type="password" id="currentPassword" class="input-field w-full px-3 py-2 rounded-lg" required>
+                </div>
+                
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-1">새 비밀번호</label>
+                    <input type="password" id="newPassword" class="input-field w-full px-3 py-2 rounded-lg" required minlength="6">
+                </div>
+                
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-1">새 비밀번호 확인</label>
+                    <input type="password" id="confirmPassword" class="input-field w-full px-3 py-2 rounded-lg" required>
+                </div>
+                
+                <div class="flex gap-2 pt-4">
+                    <button type="button" onclick="hidePasswordChangeModal()" 
+                        class="flex-1 px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50">
+                        취소
+                    </button>
+                    <button type="submit" class="flex-1 px-4 py-2 btn-primary rounded-lg">
+                        변경
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <!-- Scripts -->
+    <script src="/static/js/utils/date-utils.js"></script>
+    <script src="/static/js/utils/image-utils.js"></script>
+    <script src="/static/js/core/permissions.js"></script>
+    <script src="/static/js/app.js"></script>
+</body>
+</html>
diff --git a/frontend/static/js/app.js b/frontend/static/js/app.js
new file mode 100644
index 0000000..78c0193
--- /dev/null
+++ b/frontend/static/js/app.js
@@ -0,0 +1,490 @@
+/**
+ * 메인 애플리케이션 JavaScript
+ * 통합된 SPA 애플리케이션의 핵심 로직
+ */
+
+class App {
+    constructor() {
+        this.currentUser = null;
+        this.currentPage = 'dashboard';
+        this.modules = new Map();
+        this.sidebarCollapsed = false;
+        
+        this.init();
+    }
+
+    /**
+     * 애플리케이션 초기화
+     */
+    async init() {
+        try {
+            // 인증 확인
+            await this.checkAuth();
+            
+            // API 스크립트 로드
+            await this.loadAPIScript();
+            
+            // 권한 시스템 초기화
+            window.pagePermissionManager.setUser(this.currentUser);
+            
+            // UI 초기화
+            this.initializeUI();
+            
+            // 라우터 초기화
+            this.initializeRouter();
+            
+            // 대시보드 데이터 로드
+            await this.loadDashboardData();
+            
+        } catch (error) {
+            console.error('앱 초기화 실패:', error);
+            this.redirectToLogin();
+        }
+    }
+
+    /**
+     * 인증 확인
+     */
+    async checkAuth() {
+        const token = localStorage.getItem('access_token');
+        if (!token) {
+            throw new Error('토큰 없음');
+        }
+
+        // 임시로 localStorage에서 사용자 정보 가져오기
+        const storedUser = localStorage.getItem('currentUser');
+        if (storedUser) {
+            this.currentUser = JSON.parse(storedUser);
+        } else {
+            throw new Error('사용자 정보 없음');
+        }
+    }
+
+    /**
+     * API 스크립트 동적 로드
+     */
+    async loadAPIScript() {
+        return new Promise((resolve, reject) => {
+            const script = document.createElement('script');
+            script.src = `/static/js/api.js?v=${Date.now()}`;
+            script.onload = resolve;
+            script.onerror = reject;
+            document.head.appendChild(script);
+        });
+    }
+
+    /**
+     * UI 초기화
+     */
+    initializeUI() {
+        // 사용자 정보 표시
+        this.updateUserDisplay();
+        
+        // 네비게이션 메뉴 생성
+        this.createNavigationMenu();
+        
+        // 이벤트 리스너 등록
+        this.registerEventListeners();
+    }
+
+    /**
+     * 사용자 정보 표시 업데이트
+     */
+    updateUserDisplay() {
+        const userInitial = document.getElementById('userInitial');
+        const userDisplayName = document.getElementById('userDisplayName');
+        const userRole = document.getElementById('userRole');
+
+        const displayName = this.currentUser.full_name || this.currentUser.username;
+        const initial = displayName.charAt(0).toUpperCase();
+
+        userInitial.textContent = initial;
+        userDisplayName.textContent = displayName;
+        userRole.textContent = this.getRoleDisplayName(this.currentUser.role);
+    }
+
+    /**
+     * 역할 표시명 가져오기
+     */
+    getRoleDisplayName(role) {
+        const roleNames = {
+            'admin': '관리자',
+            'user': '사용자'
+        };
+        return roleNames[role] || role;
+    }
+
+    /**
+     * 네비게이션 메뉴 생성
+     */
+    createNavigationMenu() {
+        const menuConfig = window.pagePermissionManager.getMenuConfig();
+        const navigationMenu = document.getElementById('navigationMenu');
+        
+        navigationMenu.innerHTML = '';
+
+        menuConfig.forEach(item => {
+            const menuItem = this.createMenuItem(item);
+            navigationMenu.appendChild(menuItem);
+        });
+    }
+
+    /**
+     * 메뉴 아이템 생성
+     */
+    createMenuItem(item) {
+        const li = document.createElement('li');
+        
+        // 단순한 단일 메뉴 아이템만 지원
+        li.innerHTML = `
+            <div class="nav-item p-3 rounded-lg cursor-pointer" onclick="app.navigateTo('${item.path}')">
+                <div class="flex items-center">
+                    <i class="${item.icon} mr-3 text-gray-500"></i>
+                    <span class="text-gray-700">${item.title}</span>
+                </div>
+            </div>
+        `;
+
+        return li;
+    }
+
+
+    /**
+     * 라우터 초기화
+     */
+    initializeRouter() {
+        // 해시 변경 감지
+        window.addEventListener('hashchange', () => {
+            this.handleRouteChange();
+        });
+
+        // 초기 라우트 처리
+        this.handleRouteChange();
+    }
+
+    /**
+     * 라우트 변경 처리
+     */
+    async handleRouteChange() {
+        const hash = window.location.hash.substring(1) || 'dashboard';
+        const [module, action] = hash.split('/');
+
+        try {
+            await this.loadModule(module, action);
+            this.updateActiveNavigation(hash);
+            this.updatePageTitle(module, action);
+        } catch (error) {
+            console.error('라우트 처리 실패:', error);
+            this.showError('페이지를 로드할 수 없습니다.');
+        }
+    }
+
+    /**
+     * 모듈 로드
+     */
+    async loadModule(module, action = 'list') {
+        if (module === 'dashboard') {
+            this.showDashboard();
+            return;
+        }
+
+        // 모듈이 이미 로드되어 있는지 확인
+        if (!this.modules.has(module)) {
+            await this.loadModuleScript(module);
+        }
+
+        // 모듈 실행
+        const moduleInstance = this.modules.get(module);
+        if (moduleInstance && typeof moduleInstance.render === 'function') {
+            const content = await moduleInstance.render(action);
+            this.showDynamicContent(content);
+        }
+    }
+
+    /**
+     * 모듈 스크립트 로드
+     */
+    async loadModuleScript(module) {
+        return new Promise((resolve, reject) => {
+            const script = document.createElement('script');
+            script.src = `/static/js/modules/${module}/${module}.js?v=${Date.now()}`;
+            script.onload = () => {
+                // 모듈이 전역 객체에 등록되었는지 확인
+                const moduleClass = window[module.charAt(0).toUpperCase() + module.slice(1) + 'Module'];
+                if (moduleClass) {
+                    this.modules.set(module, new moduleClass());
+                }
+                resolve();
+            };
+            script.onerror = reject;
+            document.head.appendChild(script);
+        });
+    }
+
+    /**
+     * 대시보드 표시
+     */
+    showDashboard() {
+        document.getElementById('dashboard').classList.remove('hidden');
+        document.getElementById('dynamicContent').classList.add('hidden');
+        this.currentPage = 'dashboard';
+    }
+
+    /**
+     * 동적 콘텐츠 표시
+     */
+    showDynamicContent(content) {
+        document.getElementById('dashboard').classList.add('hidden');
+        const dynamicContent = document.getElementById('dynamicContent');
+        dynamicContent.innerHTML = content;
+        dynamicContent.classList.remove('hidden');
+    }
+
+    /**
+     * 네비게이션 활성화 상태 업데이트
+     */
+    updateActiveNavigation(hash) {
+        // 모든 네비게이션 아이템에서 active 클래스 제거
+        document.querySelectorAll('.nav-item').forEach(item => {
+            item.classList.remove('active');
+        });
+
+        // 현재 페이지에 해당하는 네비게이션 아이템에 active 클래스 추가
+        // 구현 필요
+    }
+
+    /**
+     * 페이지 제목 업데이트
+     */
+    updatePageTitle(module, action) {
+        const titles = {
+            'dashboard': '대시보드',
+            'issues': '부적합 사항',
+            'projects': '프로젝트',
+            'daily_work': '일일 공수',
+            'reports': '보고서',
+            'users': '사용자 관리'
+        };
+
+        const title = titles[module] || module;
+        document.getElementById('pageTitle').textContent = title;
+    }
+
+    /**
+     * 대시보드 데이터 로드
+     */
+    async loadDashboardData() {
+        try {
+            // 통계 데이터 로드 (임시 데이터)
+            document.getElementById('totalIssues').textContent = '0';
+            document.getElementById('activeProjects').textContent = '0';
+            document.getElementById('monthlyHours').textContent = '0';
+            document.getElementById('completionRate').textContent = '0%';
+
+            // 실제 API 호출로 대체 예정
+            // const stats = await API.getDashboardStats();
+            // this.updateDashboardStats(stats);
+        } catch (error) {
+            console.error('대시보드 데이터 로드 실패:', error);
+        }
+    }
+
+    /**
+     * 이벤트 리스너 등록
+     */
+    registerEventListeners() {
+        // 비밀번호 변경 폼
+        document.getElementById('passwordChangeForm').addEventListener('submit', (e) => {
+            e.preventDefault();
+            this.handlePasswordChange();
+        });
+
+        // 모바일 반응형
+        window.addEventListener('resize', () => {
+            if (window.innerWidth >= 768) {
+                this.hideMobileOverlay();
+            }
+        });
+    }
+
+    /**
+     * 페이지 이동
+     */
+    navigateTo(path) {
+        window.location.hash = path.startsWith('#') ? path.substring(1) : path;
+        
+        // 모바일에서 사이드바 닫기
+        if (window.innerWidth < 768) {
+            this.toggleSidebar();
+        }
+    }
+
+    /**
+     * 사이드바 토글
+     */
+    toggleSidebar() {
+        const sidebar = document.getElementById('sidebar');
+        const mainContent = document.getElementById('mainContent');
+        const mobileOverlay = document.getElementById('mobileOverlay');
+
+        if (window.innerWidth < 768) {
+            // 모바일
+            if (sidebar.classList.contains('collapsed')) {
+                sidebar.classList.remove('collapsed');
+                mobileOverlay.classList.add('active');
+            } else {
+                sidebar.classList.add('collapsed');
+                mobileOverlay.classList.remove('active');
+            }
+        } else {
+            // 데스크톱
+            if (this.sidebarCollapsed) {
+                sidebar.classList.remove('collapsed');
+                mainContent.classList.remove('expanded');
+                this.sidebarCollapsed = false;
+            } else {
+                sidebar.classList.add('collapsed');
+                mainContent.classList.add('expanded');
+                this.sidebarCollapsed = true;
+            }
+        }
+    }
+
+    /**
+     * 모바일 오버레이 숨기기
+     */
+    hideMobileOverlay() {
+        document.getElementById('sidebar').classList.add('collapsed');
+        document.getElementById('mobileOverlay').classList.remove('active');
+    }
+
+    /**
+     * 비밀번호 변경 모달 표시
+     */
+    showPasswordChangeModal() {
+        document.getElementById('passwordModal').classList.remove('hidden');
+        document.getElementById('passwordModal').classList.add('flex');
+    }
+
+    /**
+     * 비밀번호 변경 모달 숨기기
+     */
+    hidePasswordChangeModal() {
+        document.getElementById('passwordModal').classList.add('hidden');
+        document.getElementById('passwordModal').classList.remove('flex');
+        document.getElementById('passwordChangeForm').reset();
+    }
+
+    /**
+     * 비밀번호 변경 처리
+     */
+    async handlePasswordChange() {
+        const currentPassword = document.getElementById('currentPassword').value;
+        const newPassword = document.getElementById('newPassword').value;
+        const confirmPassword = document.getElementById('confirmPassword').value;
+
+        if (newPassword !== confirmPassword) {
+            this.showError('새 비밀번호가 일치하지 않습니다.');
+            return;
+        }
+
+        try {
+            // API 호출 (구현 필요)
+            // await AuthAPI.changePassword(currentPassword, newPassword);
+            
+            this.showSuccess('비밀번호가 성공적으로 변경되었습니다.');
+            this.hidePasswordChangeModal();
+        } catch (error) {
+            this.showError('비밀번호 변경에 실패했습니다.');
+        }
+    }
+
+    /**
+     * 로그아웃
+     */
+    logout() {
+        localStorage.removeItem('access_token');
+        localStorage.removeItem('currentUser');
+        this.redirectToLogin();
+    }
+
+    /**
+     * 로그인 페이지로 리다이렉트
+     */
+    redirectToLogin() {
+        window.location.href = '/index.html';
+    }
+
+    /**
+     * 로딩 표시
+     */
+    showLoading() {
+        document.getElementById('loadingOverlay').classList.add('active');
+    }
+
+    /**
+     * 로딩 숨기기
+     */
+    hideLoading() {
+        document.getElementById('loadingOverlay').classList.remove('active');
+    }
+
+    /**
+     * 성공 메시지 표시
+     */
+    showSuccess(message) {
+        this.showToast(message, 'success');
+    }
+
+    /**
+     * 에러 메시지 표시
+     */
+    showError(message) {
+        this.showToast(message, 'error');
+    }
+
+    /**
+     * 토스트 메시지 표시
+     */
+    showToast(message, type = 'info') {
+        const toast = document.createElement('div');
+        toast.className = `fixed bottom-4 right-4 px-6 py-3 rounded-lg text-white z-50 ${
+            type === 'success' ? 'bg-green-500' : 
+            type === 'error' ? 'bg-red-500' : 'bg-blue-500'
+        }`;
+        toast.innerHTML = `
+            <div class="flex items-center">
+                <i class="fas fa-${type === 'success' ? 'check-circle' : type === 'error' ? 'exclamation-circle' : 'info-circle'} mr-2"></i>
+                <span>${message}</span>
+            </div>
+        `;
+        
+        document.body.appendChild(toast);
+        
+        setTimeout(() => {
+            toast.remove();
+        }, 3000);
+    }
+}
+
+// 전역 함수들 (HTML에서 호출)
+function toggleSidebar() {
+    window.app.toggleSidebar();
+}
+
+function showPasswordChangeModal() {
+    window.app.showPasswordChangeModal();
+}
+
+function hidePasswordChangeModal() {
+    window.app.hidePasswordChangeModal();
+}
+
+function logout() {
+    window.app.logout();
+}
+
+// 앱 초기화
+document.addEventListener('DOMContentLoaded', () => {
+    window.app = new App();
+});
diff --git a/frontend/test_api.html b/frontend/test_api.html
new file mode 100644
index 0000000..053f86a
--- /dev/null
+++ b/frontend/test_api.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>API 테스트</title>
+</head>
+<body>
+    <h1>API 테스트 페이지</h1>
+    <button onclick="testLogin()">로그인 테스트</button>
+    <button onclick="testUsers()">사용자 목록 테스트</button>
+    <div id="result"></div>
+
+    <script>
+        let token = null;
+
+        async function testLogin() {
+            try {
+                const formData = new URLSearchParams();
+                formData.append('username', 'hyungi');
+                formData.append('password', '123456');
+                
+                const response = await fetch('http://localhost:16080/api/auth/login', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/x-www-form-urlencoded'
+                    },
+                    body: formData.toString()
+                });
+                
+                const data = await response.json();
+                token = data.access_token;
+                document.getElementById('result').innerHTML = `<pre>로그인 성공: ${JSON.stringify(data, null, 2)}</pre>`;
+            } catch (error) {
+                document.getElementById('result').innerHTML = `<pre>로그인 실패: ${error.message}</pre>`;
+            }
+        }
+
+        async function testUsers() {
+            if (!token) {
+                alert('먼저 로그인하세요');
+                return;
+            }
+
+            try {
+                const response = await fetch('http://localhost:16080/api/auth/users', {
+                    headers: {
+                        'Authorization': `Bearer ${token}`
+                    }
+                });
+                
+                const data = await response.json();
+                document.getElementById('result').innerHTML = `<pre>사용자 목록: ${JSON.stringify(data, null, 2)}</pre>`;
+            } catch (error) {
+                document.getElementById('result').innerHTML = `<pre>사용자 목록 실패: ${error.message}</pre>`;
+            }
+        }
+    </script>
+</body>
+</html>
diff --git a/test_api.html b/test_api.html
new file mode 100644
index 0000000..053f86a
--- /dev/null
+++ b/test_api.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>API 테스트</title>
+</head>
+<body>
+    <h1>API 테스트 페이지</h1>
+    <button onclick="testLogin()">로그인 테스트</button>
+    <button onclick="testUsers()">사용자 목록 테스트</button>
+    <div id="result"></div>
+
+    <script>
+        let token = null;
+
+        async function testLogin() {
+            try {
+                const formData = new URLSearchParams();
+                formData.append('username', 'hyungi');
+                formData.append('password', '123456');
+                
+                const response = await fetch('http://localhost:16080/api/auth/login', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/x-www-form-urlencoded'
+                    },
+                    body: formData.toString()
+                });
+                
+                const data = await response.json();
+                token = data.access_token;
+                document.getElementById('result').innerHTML = `<pre>로그인 성공: ${JSON.stringify(data, null, 2)}</pre>`;
+            } catch (error) {
+                document.getElementById('result').innerHTML = `<pre>로그인 실패: ${error.message}</pre>`;
+            }
+        }
+
+        async function testUsers() {
+            if (!token) {
+                alert('먼저 로그인하세요');
+                return;
+            }
+
+            try {
+                const response = await fetch('http://localhost:16080/api/auth/users', {
+                    headers: {
+                        'Authorization': `Bearer ${token}`
+                    }
+                });
+                
+                const data = await response.json();
+                document.getElementById('result').innerHTML = `<pre>사용자 목록: ${JSON.stringify(data, null, 2)}</pre>`;
+            } catch (error) {
+                document.getElementById('result').innerHTML = `<pre>사용자 목록 실패: ${error.message}</pre>`;
+            }
+        }
+    </script>
+</body>
+</html>