v7:UI 보완_20260130

README.md

@@ -1,14 +1,14 @@
-# 글벗 (Geulbeot) v6.0
+# 글벗 (Geulbeot) v7.0
 
-**HWPX 템플릿 분석·저장·관리**
+**UI 고도화 — 템플릿 관리·작성 방식·문서 유형 선택 UI**
 
 다양한 형식의 자료(PDF·HWP·이미지·Excel 등)를 입력하면, AI가 RAG 파이프라인으로 분석한 뒤
 선택한 문서 유형(기획서·보고서·발표자료 등)에 맞는 표준 HTML 문서를 자동 생성합니다.
 생성된 문서는 웹 편집기에서 수정하고, HTML / PDF / HWP로 출력합니다.
 
-v6에서는 HWPX 템플릿 관리 기능을 추가했습니다.
-HWPX 파일을 업로드하면 XML을 파싱하여 폰트·색상·여백·표 구조·테두리 등을 자동 분석하고,
-재사용 가능한 템플릿으로 저장합니다.
+v7에서는 프론트엔드 UI를 고도화했습니다.
+v6에서 백엔드로만 존재하던 템플릿 관리를 화면에서 직접 조작할 수 있게 되었고,
+자료 활용 방식(형식 변경·재구성·신규 작성)과 문서 유형을 시각적으로 선택하는 UI가 추가되었습니다.
 
 ---
 
@@ -20,17 +20,20 @@ HWPX 파일을 업로드하면 XML을 파싱하여 폰트·색상·여백·표
 자료 입력 (파일/폴더)
     │
     ▼
+작성 방식 선택 ─── 형식만 변경 / 내용 재구성 / 신규 작성 (v7 신규)
+    │
+    ▼
 RAG 파이프라인 (9단계) ─── 공통 처리
     │
     ▼
-문서 유형 선택
+문서 유형 선택 ─── UI 리스트 (v7 신규)
     ├─ 기획서        (기본)
     ├─ 보고서        (기본)
     ├─ 발표자료      (기본)
     └─ 사용자 등록   (확장 가능)
     │
     ▼
-글벗 표준 HTML 생성 ◀── 템플릿 스타일 참조 (v6 신규)
+글벗 표준 HTML 생성 ◀── 템플릿 스타일 참조 + 요소 선택 (v7 신규)
     │
     ▼
 웹 편집기 (수기 편집 / AI 편집)
@@ -48,11 +51,11 @@ RAG 파이프라인 (9단계) ─── 공통 처리
   - OpenAI API — RAG 임베딩, 인덱싱, 텍스트 추출
   - Gemini API — 보고서 콘텐츠·HTML 생성
 - **Features**:
-  - 자료 입력 → 9단계 RAG 파이프라인 (파일 변환 → 추출 → 도메인 분석 → 청킹 → 임베딩 → 코퍼스 → 인덱싱 → 콘텐츠 생성 → HTML 조립)
+  - 자료 입력 → 9단계 RAG 파이프라인
   - 문서 유형별 생성: 기획서 (Claude 3단계), 보고서 (Gemini 2단계)
   - AI 편집: 전체 수정 (`/refine`), 부분 수정 (`/refine-selection`)
-  - HWPX 템플릿 분석·저장·관리 (v6 신규)
-  - HWP 변환: 하이브리드 방식 — pyhwpx 기본 생성 → HWPX 스타일 주입 → 표 열 너비 수정
+  - HWPX 템플릿 분석·저장·관리
+  - HWP 변환: 하이브리드 방식 — pyhwpx → HWPX 스타일 주입 → 표 열 너비 수정
   - PDF 변환: WeasyPrint 기반
 
 ### 2. Frontend (순수 JavaScript)
@@ -61,6 +64,9 @@ RAG 파이프라인 (9단계) ─── 공통 처리
   - 웹 WYSIWYG 편집기 — 브라우저에서 생성된 문서 직접 수정
   - 페이지 넘김·들여쓰기·정렬 등 서식 도구
   - HTML / PDF / HWP 다운로드
+  - **작성 방식 선택 탭 (v7 신규)**: 📄 형식만 변경 / 🔄 내용의 재구성 / ✨ 문서 참고 신규 작성
+  - **문서 유형 선택 UI (v7 신규)**: 기획서·보고서 라디오 리스트 + 배지 스타일
+  - **템플릿 관리 UI (v7 신규)**: 사이드바에서 템플릿 업로드·선택·삭제, 적용할 요소 체크박스
 
 ### 3. 변환 엔진 (Converters)
 
@@ -68,25 +74,23 @@ RAG 파이프라인 (9단계) ─── 공통 처리
 - **분량 자동 판단**: 5,000자 기준 — 긴 문서는 전체 파이프라인, 짧은 문서는 축약 파이프라인
 - **HWP 변환 (하이브리드 방식)**: HTML 분석 → pyhwpx 변환 → HWPX 스타일 주입 → 표 열 너비 수정
 
-### 4. 템플릿 관리 (v6 신규)
+### 4. 템플릿 관리
 
 - **HWPX 파싱**: 업로드된 HWPX를 압축 해제하여 header.xml + section*.xml 구조 분석
-- **자동 추출 항목**:
-  - 폰트 정보 (이름·크기·굵기·색상)
-  - 문단 스타일 (정렬·줄간격·들여쓰기·번호 체계)
-  - 표 구조 (열 너비·행 수·셀 병합·테두리 스타일·선 종류)
-  - 배경 (색상·이미지 채우기)
-  - 테두리 (ARGB 8자리 색상 정규화, NONE 제외)
-  - 페이지 설정 (여백·용지 크기)
-- **CSS 자동 생성**: 분석된 스타일을 CSS로 변환하여 HTML 생성 시 참조 가능
-- **저장소**: `templates_store/` 디렉토리에 메타데이터(meta.json) + 원본 파일 + 분석 결과 저장
+- **자동 추출**: 폰트·문단·표·배경·테두리·페이지 설정
+- **CSS 자동 생성**: 분석된 스타일 → CSS 변환
+- **저장소**: `templates_store/` — meta.json + 원본 + 분석 결과
+- **UI 연동 (v7 신규)**: 사이드바에서 목록 조회·선택·삭제, 요소별 적용 체크박스
 
 ### 5. 주요 시나리오 (Core Scenarios)
 
 1. **기획서 생성**: 텍스트 또는 파일을 입력하면, RAG 분석 후 Claude API가 구조 추출 → 페이지 배치 계획 → 글벗 표준 HTML 기획서를 생성. 1~N페이지 옵션 지원
 2. **보고서 생성**: 폴더 경로의 자료들을 RAG 파이프라인으로 분석하고, Gemini API가 섹션별 콘텐츠 초안 → 표지·목차·간지·별첨이 포함된 다페이지 HTML 보고서를 생성
-3. **AI 편집**: 생성된 문서를 웹 편집기에서 확인 후, 피드백으로 전체 또는 선택 부분을 AI가 수정
-4. **템플릿 등록 (v6 신규)**: HWPX 파일을 업로드하면 XML을 파싱하여 폰트·표·테두리·색상 등을 자동 분석하고, 재사용 가능한 템플릿으로 저장. 등록된 템플릿은 조회·삭제 가능
+3. **작성 방식 선택 (v7 신규)**: 업로드 자료를 어떻게 활용할지 3가지 모드 중 선택
+   - 📄 **형식만 변경** — 원본 내용 유지, 글벗 양식으로만 변환
+   - 🔄 **내용의 재구성** — 원본 기반으로 구조와 내용을 재구성 (기본값)
+   - ✨ **문서 참고 신규 작성** — 원본을 참고 자료로만 활용, 새로 작성
+4. **템플릿 적용**: 등록된 HWPX 템플릿을 선택하고, 적용할 요소(제목 스타일·표 스타일·색상 등)를 체크박스로 선택
 5. **HWP 내보내기**: pyhwpx 변환 후 HWPX 스타일 주입 + 표 열 너비 정밀 수정
 
 ### 프로세스 플로우
@@ -119,87 +123,18 @@ flowchart TD
     I --> J
 ```
 
-#### 문서 유형별 생성 → 편집 → 출력
-
-```mermaid
-flowchart TD
-    classDef decision fill:#fffde7,stroke:#f9a825,stroke-width:2px,color:#333
-    classDef aiClaude fill:#fff3cd,stroke:#d97706,stroke-width:2px,color:#856404
-    classDef aiGemini fill:#d6eaf8,stroke:#4285f4,stroke-width:2px,color:#1a4d8f
-    classDef editStyle fill:#fff3e0,stroke:#ef6c00,stroke-width:1.5px,color:#e65100
-    classDef exportStyle fill:#f3e5f5,stroke:#7b1fa2,stroke-width:1.5px,color:#4a148c
-    classDef startEnd fill:#1a365d,stroke:#1a365d,color:#fff,stroke-width:2px
-    classDef planned fill:#f5f5f5,stroke:#999,stroke-width:1px,stroke-dasharray: 5 5,color:#999
-    classDef newModule fill:#e0f2f1,stroke:#00695c,stroke-width:2px,color:#004d40
-
-    A(["📋 RAG 분석 결과"]):::startEnd
-    B{"문서 유형 선택"}:::decision
-
-    C["기획서 생성\n구조추출→배치→HTML\n⚡ Claude API"]:::aiClaude
-    D["보고서 생성\n콘텐츠→HTML 조립\n⚡ Gemini API"]:::aiGemini
-    E["발표자료 생성\n예정"]:::planned
-    F["사용자 등록 유형\n확장 가능"]:::planned
-
-    T["📋 템플릿 스타일 참조\ntemplates_store/\n(v6 신규)"]:::newModule
-
-    G["글벗 표준 HTML\nA4·Navy·Noto Sans KR"]:::startEnd
-
-    H{"편집 방식"}:::decision
-    I["웹 편집기\n수기 편집"]:::editStyle
-    J["AI 편집\n전체·부분 수정\n⚡ Claude API"]:::aiClaude
-
-    K{"출력 형식"}:::decision
-    L["HTML / PDF"]:::exportStyle
-    M["HWP 변환 (하이브리드)\npyhwpx→스타일주입→표주입"]:::exportStyle
-    N["PPT 변환\n예정"]:::planned
-    O(["✅ 최종 산출물"]):::startEnd
-
-    A --> B
-    B -->|"기획서"| C --> G
-    B -->|"보고서"| D --> G
-    B -->|"발표자료"| E -.-> G
-    B -->|"확장"| F -.-> G
-
-    T -.->|"스타일 참조"| G
-
-    G --> H
-    H -->|"수기"| I --> K
-    H -->|"AI"| J --> K
-    K -->|"웹/인쇄"| L --> O
-    K -->|"HWP"| M --> O
-    K -->|"PPT"| N -.-> O
-```
-
-#### 템플릿 분석 (v6 신규)
-
-```mermaid
-flowchart LR
-    classDef process fill:#e8f4fd,stroke:#1a365d,stroke-width:1.5px,color:#1a365d
-    classDef newModule fill:#fff3e0,stroke:#ef6c00,stroke-width:2px,color:#e65100
-    classDef dataStore fill:#e0f2f1,stroke:#00695c,stroke-width:1.5px,color:#004d40
-    classDef startEnd fill:#1a365d,stroke:#1a365d,color:#fff,stroke-width:2px
-
-    A(["📄 HWPX 업로드"]):::startEnd
-    B["압축 해제\nheader.xml\nsection*.xml"]:::process
-    C["XML 파싱\n폰트·표·테두리·색상\n페이지 설정"]:::newModule
-    D["CSS 자동 생성\n스타일 요약"]:::newModule
-    E[("📋 templates_store/\nmeta.json\n+ 분석 결과")]:::dataStore
-
-    A --> B --> C --> D --> E
-```
-
 ---
 
-## 🔄 v5 → v6 변경사항
+## 🔄 v6 → v7 변경사항
 
-| 영역 | v5 | v6 |
+| 영역 | v6 | v7 |
 |------|------|------|
-| 템플릿 관리 | 없음 | **handlers/template/ 패키지 신규** |
-| HWPX 분석 | 없음 | header.xml·section.xml 파싱 (폰트·표·테두리·배경·페이지) |
-| CSS 자동 생성 | 없음 | 분석된 스타일 → CSS 변환 |
-| 신규 API | — | `GET /templates` · `POST /analyze-template` · `DELETE /delete-template/<id>` |
-| 저장소 | — | `templates_store/` (meta.json + 원본 + 분석 결과) |
-| AI 프롬프트 | — | `analyze_template.txt` — 구조 분석 보조 |
+| 작성 방식 | 없음 (무조건 재구성) | **3가지 모드 UI**: 형식 변경 / 재구성 / 신규 작성 |
+| 문서 유형 선택 | 기획서·보고서 구분 없이 탭 | **문서 유형 라디오 리스트** + 배지 스타일 |
+| 템플릿 관리 UI | API만 존재 (화면 없음) | **사이드바 UI**: 목록·선택·삭제 + 요소별 체크박스 |
+| 템플릿 업로드 | API 직접 호출 | **모달 UI**: 파일 선택 + 이름 입력 + 업로드 |
+| index.html | 2,974줄 | 3,400줄 (+426) |
+| Python | 변경 없음 | 변경 없음 |
 
 ---
 
@@ -210,8 +145,8 @@ flowchart LR
 - **Phase 3**: 출력 — HTML/PDF 다운로드, HWP 변환 (🔧 기본 구현)
 - **Phase 4**: HWP/HWPX/HTML 매핑 — 스타일 분석·HWPX 생성·스타일 주입·표 주입 (🔧 기본 구현)
 - **Phase 5**: 문서 유형 분석·등록 — HWPX 업로드 → AI 구조 분석 → 유형 CRUD + 확장 (예정)
-- **Phase 6**: HWPX 템플릿 관리 — 파싱·스타일 추출·CSS 생성·저장·조회·삭제 (🔧 기본 구현 · 현재 버전)
-- **Phase 7**: UI 고도화 — 프론트 모듈화, 데모 모드, AI 편집 개선, 도메인 선택기 (예정)
+- **Phase 6**: HWPX 템플릿 관리 — 파싱·스타일 추출·CSS 생성·저장·조회·삭제 (🔧 기본 구현)
+- **Phase 7**: UI 고도화 — 작성 방식 선택, 문서 유형 UI, 템플릿 관리 UI (🔧 기본 구현 · 현재 버전)
 - **Phase 8**: 백엔드 재구조화 + 배포 — 패키지 정리, API 키 공통화, 로깅, Docker (예정)
 
 ---
@@ -230,8 +165,8 @@ flowchart LR
 
 ```bash
 # 저장소 클론 및 설정
-git clone http://[Gitea주소]/kei/geulbeot-v6.git
-cd geulbeot-v6
+git clone http://[Gitea주소]/kei/geulbeot-v7.git
+cd geulbeot-v7
 
 # 가상환경
 python -m venv venv
@@ -265,7 +200,7 @@ python app.py
 ## 📂 프로젝트 구조
 
 ```
-geulbeot_6th/
+geulbeot_7th/
 ├── app.py                          # Flask 웹 서버 — API 라우팅
 ├── api_config.py                   # .env 환경변수 로더
 │
@@ -273,36 +208,31 @@ geulbeot_6th/
 │   ├── common.py                   #   Claude API 호출, JSON/HTML 추출
 │   ├── briefing/                   #   기획서 처리 (구조추출 → 배치 → HTML)
 │   ├── report/                     #   보고서 처리 (RAG 파이프라인 연동)
-│   └── template/                   #   ★ v6 신규 — 템플릿 관리
-│       ├── processor.py            #     HWPX 파싱·분석·CSS 생성·CRUD
-│       └── prompts/
-│           └── analyze_template.txt #    AI 구조 분석 프롬프트
+│   └── template/                   #   템플릿 관리 (HWPX 파싱·분석·CRUD)
 │
 ├── converters/                     # 변환 엔진
 │   ├── pipeline/                   #   9단계 RAG 파이프라인
-│   │   ├── router.py               #     분량 판단 (5,000자 기준)
-│   │   └── step1 ~ step9          #     변환→추출→분석→청킹→임베딩→코퍼스→인덱싱→콘텐츠→HTML
 │   ├── style_analyzer.py          #   HTML 요소 역할 분류
 │   ├── hwpx_generator.py          #   HWPX 파일 직접 생성
 │   ├── hwp_style_mapping.py       #   역할 → HWP 스타일 매핑
 │   ├── hwpx_style_injector.py     #   HWPX 커스텀 스타일 주입
 │   ├── hwpx_table_injector.py     #   HWPX 표 열 너비 정밀 수정
-│   ├── html_to_hwp.py             #   보고서 → HWP 변환 (하이브리드 워크플로우)
+│   ├── html_to_hwp.py             #   보고서 → HWP 변환
 │   └── html_to_hwp_briefing.py    #   기획서 → HWP 변환
 │
-├── templates_store/                # ★ v6 신규 — 등록된 템플릿 저장소
+├── templates_store/                # 등록된 템플릿 저장소
 │
 ├── static/
 │   ├── js/editor.js                # 웹 WYSIWYG 편집기
 │   └── css/editor.css              # 편집기 스타일
 ├── templates/
-│   ├── index.html                  # 메인 UI
+│   ├── index.html                  # ★ v7 고도화 — 작성 방식·문서 유형·템플릿 UI
 │   └── hwp_guide.html             # HWP 변환 가이드
 │
 ├── .env / .env.sample              # API 키 관리
 ├── .gitignore
 ├── requirements.txt
-├── Procfile                        # 배포 설정 (Gunicorn)
+├── Procfile
 └── README.md
 ```
 
@@ -326,7 +256,8 @@ geulbeot_6th/
 - API 키 분산: 파이프라인 각 step에 개별 정의 (공통화 미완)
 - HWP 변환: Windows + pyhwpx + 한글 프로그램 필수
 - 문서 유형: 기획서·보고서만 구현, 발표자료·사용자 등록 유형 미구현
-- 템플릿 → 문서 생성 연동: 아직 미연결 (분석·저장만 가능, 생성 시 자동 적용은 예정)
+- 작성 방식: UI만 구현, 백엔드 로직 미연동 (모드별 프롬프트 분기 예정)
+- 템플릿 → 문서 생성 연동: 아직 미연결 (선택·체크는 가능, 생성 시 자동 적용은 예정)
 - 레거시 잔존: prompts/ 디렉토리
 
 ---
@@ -335,9 +266,9 @@ geulbeot_6th/
 
 | 영역 | 줄 수 |
 |------|-------|
-| Python 전체 | 11,406 (+624) |
-| 프론트엔드 (JS + CSS + HTML) | 3,859 |
-| **합계** | **~15,300** |
+| Python 전체 | 11,500 |
+| 프론트엔드 (JS + CSS + HTML) | 4,904 (+1,045) |
+| **합계** | **~16,400** |
 
 ---
 
@@ -350,7 +281,8 @@ geulbeot_6th/
 | v3 | 9단계 RAG 파이프라인 + HWP 변환 |
 | v4 | 코드 모듈화 (handlers 패키지) + 스타일 분석기·HWPX 생성기 |
 | v5 | HWPX 스타일 주입 + 표 열 너비 정밀 변환 |
-| **v6** | **HWPX 템플릿 분석·저장·관리** |
+| v6 | HWPX 템플릿 분석·저장·관리 |
+| **v7** | **UI 고도화 — 작성 방식·문서 유형·템플릿 관리 UI** |
 
 ---