docs: 다양한 문서 및 가이드 업데이트
- 여러 문서의 내용을 업데이트하여 최신 정보를 반영하였습니다. - 컴포넌트 개발 가이드와 관련된 문서의 목차를 재구성하고, V2 및 Zod 레이아웃 시스템에 대한 내용을 추가하였습니다. - 화면 컴포넌트 개발 가이드를 개선하여 핵심 원칙과 패턴을 명확히 설명하였습니다. - 불필요한 문서 및 가이드를 삭제하고, 통합된 가이드를 통해 개발자들이 쉽게 참고할 수 있도록 하였습니다.
This commit is contained in:
kjs
@@ -0,0 +1,304 @@
|
||||
# vexplor 프로젝트 NCP Kubernetes 배포 가이드
|
||||
|
||||
## 배포 환경
|
||||
- **Kubernetes 클러스터**: NCP Kubernetes
|
||||
- **네임스페이스**: apps
|
||||
- **GitOps 도구**: Argo CD (https://argocd.kpslp.kr)
|
||||
- **CI/CD**: Jenkins (Kaniko 빌드)
|
||||
- **컨테이너 레지스트리**: registry.kpslp.kr
|
||||
|
||||
## 전제 조건
|
||||
|
||||
### 1. GitLab 레포지토리
|
||||
- [x] 프로젝트 코드 레포: 이미 생성됨 (현재 레포)
|
||||
- [ ] Helm Charts 레포: `https://gitlab.kpslp.kr/root/helm-charts` 접근 권한 필요
|
||||
|
||||
### 2. 필요한 권한
|
||||
- [ ] GitLab 계정 및 레포지토리 접근 권한
|
||||
- [ ] Jenkins 프로젝트 생성 권한 또는 담당자 요청
|
||||
- [ ] Argo CD 접속 계정
|
||||
- [ ] Container Registry 푸시 권한
|
||||
|
||||
---
|
||||
|
||||
## 배포 단계
|
||||
|
||||
### Step 1: Helm Charts 레포지토리 설정
|
||||
|
||||
김욱동 책임님께 다음 사항을 요청하세요:
|
||||
|
||||
```
|
||||
안녕하세요.
|
||||
|
||||
vexplor 프로젝트 배포를 위해 다음 작업이 필요합니다:
|
||||
|
||||
1. helm-charts 레포지토리 접근 권한 부여
|
||||
- 레포지토리: https://gitlab.kpslp.kr/root/helm-charts
|
||||
- 현재 404 오류로 접근 불가
|
||||
- 계정: [본인 GitLab 사용자명]
|
||||
|
||||
2. values 파일 업로드
|
||||
- 첨부된 values_vexplor.yaml 파일을
|
||||
- kpslp/values_vexplor.yaml 경로에 업로드해주시거나
|
||||
- 업로드 방법을 안내해주세요
|
||||
|
||||
3. Jenkins 프로젝트 생성
|
||||
- 프로젝트명: vexplor
|
||||
- Git 레포지토리: [현재 프로젝트 GitLab URL]
|
||||
- Jenkinsfile: 프로젝트 루트에 이미 준비됨
|
||||
|
||||
감사합니다.
|
||||
```
|
||||
|
||||
**첨부 파일**: `values_vexplor.yaml` (프로젝트 루트에 생성됨)
|
||||
|
||||
---
|
||||
|
||||
### Step 2: Jenkins 프로젝트 등록
|
||||
|
||||
Jenkins에서 새 파이프라인 프로젝트를 생성합니다:
|
||||
|
||||
1. **Jenkins 접속** (URL은 담당자에게 문의)
|
||||
2. **New Item** 클릭
|
||||
3. **프로젝트명**: `vexplor`
|
||||
4. **Pipeline** 선택
|
||||
5. **Pipeline 설정**:
|
||||
- Definition: `Pipeline script from SCM`
|
||||
- SCM: `Git`
|
||||
- Repository URL: `[현재 프로젝트 GitLab URL]`
|
||||
- Credentials: `gitlab_userpass_root` (또는 담당자가 안내한 credential)
|
||||
- Branch: `*/main`
|
||||
- Script Path: `Jenkinsfile`
|
||||
|
||||
---
|
||||
|
||||
### Step 3: Argo CD 애플리케이션 등록
|
||||
|
||||
1. **Argo CD 접속**: https://argocd.kpslp.kr
|
||||
|
||||
2. **New App 생성**:
|
||||
- **Application Name**: `vexplor`
|
||||
- **Project**: `default`
|
||||
- **Sync Policy**: `Automatic` (자동 배포) 또는 `Manual` (수동 배포)
|
||||
- **Auto-Create Namespace**: ✓ (체크)
|
||||
|
||||
3. **Source 설정**:
|
||||
- **Repository URL**: `https://gitlab.kpslp.kr/root/helm-charts`
|
||||
- **Revision**: `HEAD` 또는 `main`
|
||||
- **Path**: `kpslp`
|
||||
- **Helm Values**: `values_vexplor.yaml`
|
||||
|
||||
4. **Destination 설정**:
|
||||
- **Cluster URL**: `https://kubernetes.default.svc` (기본값)
|
||||
- **Namespace**: `apps`
|
||||
|
||||
5. **Create** 클릭
|
||||
|
||||
---
|
||||
|
||||
### Step 4: 첫 배포 실행
|
||||
|
||||
#### 4-1. Git Push로 Jenkins 빌드 트리거
|
||||
```bash
|
||||
git add .
|
||||
git commit -m "feat: NCP Kubernetes 배포 설정 완료"
|
||||
git push origin main
|
||||
```
|
||||
|
||||
#### 4-2. Jenkins 빌드 모니터링
|
||||
1. Jenkins에서 `vexplor` 프로젝트 열기
|
||||
2. 빌드 시작 확인 (자동 트리거 또는 수동 빌드)
|
||||
3. 로그 확인:
|
||||
- **Checkout**: Git 소스 다운로드
|
||||
- **Build**: Docker 이미지 빌드 (`registry.kpslp.kr/slp/vexplor:xxxxx`)
|
||||
- **Update Image Tag**: helm-charts 레포의 values 파일 업데이트
|
||||
|
||||
#### 4-3. Argo CD 배포 확인
|
||||
1. Argo CD 대시보드에서 `vexplor` 앱 열기
|
||||
2. **Sync Status**: `OutOfSync` → `Synced` 변경 확인
|
||||
3. **Health Status**: `Progressing` → `Healthy` 변경 확인
|
||||
4. Pod 상태 확인 (Running 상태여야 함)
|
||||
|
||||
---
|
||||
|
||||
## 배포 후 확인사항
|
||||
|
||||
### 1. Pod 상태 확인
|
||||
```bash
|
||||
kubectl get pods -n apps | grep vexplor
|
||||
```
|
||||
**예상 출력**:
|
||||
```
|
||||
vexplor-xxxxxxxxxx-xxxxx 1/1 Running 0 2m
|
||||
```
|
||||
|
||||
### 2. 서비스 확인
|
||||
```bash
|
||||
kubectl get svc -n apps | grep vexplor
|
||||
```
|
||||
|
||||
### 3. Ingress 확인
|
||||
```bash
|
||||
kubectl get ingress -n apps | grep vexplor
|
||||
```
|
||||
|
||||
### 4. 로그 확인
|
||||
```bash
|
||||
# 전체 로그
|
||||
kubectl logs -n apps -l app=vexplor
|
||||
|
||||
# 최근 50줄
|
||||
kubectl logs -n apps -l app=vexplor --tail=50
|
||||
|
||||
# 실시간 로그 (스트리밍)
|
||||
kubectl logs -n apps -l app=vexplor -f
|
||||
```
|
||||
|
||||
### 5. 애플리케이션 접속
|
||||
- **URL**: `https://vexplor.kpslp.kr` (values 파일에 설정한 도메인)
|
||||
- **헬스체크**: `https://vexplor.kpslp.kr/api/health`
|
||||
|
||||
---
|
||||
|
||||
## 트러블슈팅
|
||||
|
||||
### 문제 1: Jenkins 빌드 실패
|
||||
**증상**: Build 단계에서 에러 발생
|
||||
|
||||
**확인사항**:
|
||||
- Docker 이미지 빌드 로그 확인
|
||||
- `Dockerfile`이 프로젝트 루트에 있는지 확인
|
||||
- 빌드 컨텍스트에 필요한 파일들이 있는지 확인
|
||||
|
||||
**해결**:
|
||||
```bash
|
||||
# 로컬에서 Docker 빌드 테스트
|
||||
docker build -f Dockerfile -t vexplor:test .
|
||||
```
|
||||
|
||||
### 문제 2: helm-charts 레포 푸시 실패
|
||||
**증상**: Update Image Tag 단계에서 실패
|
||||
|
||||
**원인**: `gitlab_userpass_root` credential 문제 또는 권한 부족
|
||||
|
||||
**해결**: 김욱동 책임님께 credential 확인 요청
|
||||
|
||||
### 문제 3: Argo CD Sync 실패
|
||||
**증상**: `OutOfSync` 상태에서 변경 없음
|
||||
|
||||
**확인사항**:
|
||||
- values 파일이 올바른 경로에 있는지 (`kpslp/values_vexplor.yaml`)
|
||||
- Argo CD가 helm-charts 레포를 읽을 수 있는지
|
||||
|
||||
**해결**: Argo CD에서 수동 Sync 시도 또는 담당자에게 문의
|
||||
|
||||
### 문제 4: Pod가 CrashLoopBackOff 상태
|
||||
**증상**: Pod가 계속 재시작됨
|
||||
|
||||
**확인**:
|
||||
```bash
|
||||
kubectl describe pod -n apps [pod-name]
|
||||
kubectl logs -n apps [pod-name] --previous
|
||||
```
|
||||
|
||||
**일반적인 원인**:
|
||||
- 환경 변수 누락 (DATABASE_HOST 등)
|
||||
- 데이터베이스 연결 실패
|
||||
- 포트 바인딩 문제
|
||||
|
||||
**해결**:
|
||||
1. `values_vexplor.yaml`의 `env` 섹션 확인
|
||||
2. 데이터베이스 서비스명 확인 (`postgres-service.apps.svc.cluster.local`)
|
||||
3. Secret 설정 확인 (DB 비밀번호 등)
|
||||
|
||||
---
|
||||
|
||||
## 업데이트 배포 프로세스
|
||||
|
||||
코드 수정 후 배포 절차:
|
||||
|
||||
```bash
|
||||
# 1. 코드 수정
|
||||
git add .
|
||||
git commit -m "feat: 새로운 기능 추가"
|
||||
git push origin main
|
||||
|
||||
# 2. Jenkins 자동 빌드 (자동 트리거)
|
||||
# - Git push 감지
|
||||
# - Docker 이미지 빌드
|
||||
# - 새 이미지 태그로 values 파일 업데이트
|
||||
|
||||
# 3. Argo CD 자동 배포 (Sync Policy가 Automatic인 경우)
|
||||
# - helm-charts 레포 변경 감지
|
||||
# - Kubernetes에 새 이미지 배포
|
||||
# - Rolling Update 수행
|
||||
```
|
||||
|
||||
**수동 배포**: Argo CD 대시보드에서 `Sync` 버튼 클릭
|
||||
|
||||
---
|
||||
|
||||
## 체크리스트
|
||||
|
||||
배포 전 확인사항:
|
||||
|
||||
- [ ] Jenkinsfile 수정 완료 (단일 이미지 빌드)
|
||||
- [ ] Dockerfile 확인 (멀티스테이지 빌드)
|
||||
- [ ] values_vexplor.yaml 작성 및 업로드
|
||||
- [ ] Jenkins 프로젝트 생성
|
||||
- [ ] Argo CD 애플리케이션 등록
|
||||
- [ ] 환경 변수 설정 (DATABASE_HOST 등)
|
||||
- [ ] Secret 생성 (DB 비밀번호 등)
|
||||
- [ ] Ingress 도메인 설정
|
||||
- [ ] 헬스체크 엔드포인트 확인 (`/api/health`)
|
||||
|
||||
---
|
||||
|
||||
## 참고 자료
|
||||
|
||||
- **Kaniko**: 컨테이너 내에서 Docker 이미지를 빌드하는 도구
|
||||
- **GitOps**: Git을 Single Source of Truth로 사용하는 배포 방식
|
||||
- **Argo CD**: GitOps를 위한 Kubernetes CD 도구
|
||||
- **Helm**: Kubernetes 패키지 매니저
|
||||
|
||||
---
|
||||
|
||||
## 담당자 연락처
|
||||
|
||||
- **NCP 클러스터 관리**: 김욱동 책임 (엘에스티라유텍)
|
||||
- **Bastion 서버**: 223.130.135.25:22 (Docker 직접 배포용 아님)
|
||||
- **Argo CD**: https://argocd.kpslp.kr
|
||||
- **Kubernetes 네임스페이스**: apps
|
||||
|
||||
---
|
||||
|
||||
## 추가 설정 (선택사항)
|
||||
|
||||
### PostgreSQL 데이터베이스 설정
|
||||
클러스터 내부에 PostgreSQL이 없다면:
|
||||
|
||||
```yaml
|
||||
# values_vexplor.yaml 에 추가
|
||||
postgresql:
|
||||
enabled: true
|
||||
auth:
|
||||
username: vexplor
|
||||
password: changeme123 # Secret으로 관리 권장
|
||||
database: vexplor
|
||||
primary:
|
||||
persistence:
|
||||
enabled: true
|
||||
size: 10Gi
|
||||
```
|
||||
|
||||
### Secret 생성 (민감 정보)
|
||||
```bash
|
||||
kubectl create secret generic vexplor-secrets \
|
||||
--from-literal=db-password='your-secure-password' \
|
||||
--from-literal=jwt-secret='your-jwt-secret' \
|
||||
-n apps
|
||||
```
|
||||
|
||||
### 모니터링 (Prometheus + Grafana)
|
||||
담당자에게 메트릭 수집 설정 요청
|
||||
|
||||
@@ -0,0 +1,58 @@
|
||||
# 프로젝트 진행 상황 (2025-11-20)
|
||||
|
||||
## 작업 개요: 디지털 트윈 3D 야드 고도화 (동적 계층 구조)
|
||||
|
||||
### 1. 핵심 변경 사항
|
||||
기존의 고정된 `Area` -> `Location` 2단계 구조를 유연한 **N-Level 동적 계층 구조**로 변경하고, 공간적 제약을 강화했습니다.
|
||||
|
||||
### 2. 완료된 작업
|
||||
|
||||
#### 데이터베이스
|
||||
- **마이그레이션 실행**: `db/migrations/042_refactor_digital_twin_hierarchy.sql`
|
||||
- **스키마 변경**:
|
||||
- `digital_twin_layout` 테이블에 `hierarchy_config` (JSONB) 컬럼 추가
|
||||
- `digital_twin_objects` 테이블에 `hierarchy_level`, `parent_key`, `external_key` 컬럼 추가
|
||||
- 기존 하드코딩된 테이블 매핑 컬럼 제거
|
||||
|
||||
#### 백엔드 (Node.js)
|
||||
- **API 추가/수정**:
|
||||
- `POST /api/digital-twin/data/hierarchy`: 계층 설정에 따른 전체 데이터 조회
|
||||
- `POST /api/digital-twin/data/children`: 특정 부모의 하위 데이터 조회
|
||||
- 기존 레거시 API (`getWarehouses` 등) 호환성 유지
|
||||
- **컨트롤러 수정**:
|
||||
- `digitalTwinDataController.ts`: 동적 쿼리 생성 로직 구현
|
||||
- `digitalTwinLayoutController.ts`: 레이아웃 저장/수정 시 `hierarchy_config` 및 객체 계층 정보 처리
|
||||
|
||||
#### 프론트엔드 (React)
|
||||
- **신규 컴포넌트**: `HierarchyConfigPanel.tsx`
|
||||
- 레벨 추가/삭제, 테이블 및 컬럼 매핑 설정 UI
|
||||
- **유틸리티**: `spatialContainment.ts`
|
||||
- `validateSpatialContainment`: 자식 객체가 부모 객체 내부에 있는지 검증 (AABB)
|
||||
- `updateChildrenPositions`: 부모 이동 시 자식 객체 자동 이동 (그룹 이동)
|
||||
- **에디터 통합 (`DigitalTwinEditor.tsx`)**:
|
||||
- `HierarchyConfigPanel` 적용
|
||||
- 동적 데이터 로드 로직 구현
|
||||
- 3D 캔버스 드래그앤드롭 시 공간적 종속성 검증 적용
|
||||
- 객체 이동 시 그룹 이동 적용
|
||||
|
||||
### 3. 현재 상태
|
||||
- **백엔드 서버**: 재시작 완료, 정상 동작 중 (PostgreSQL 연결 이슈 해결됨)
|
||||
- **DB**: 마이그레이션 스크립트 실행 완료
|
||||
|
||||
### 4. 다음 단계 (테스트 필요)
|
||||
새로운 세션에서 다음 시나리오를 테스트해야 합니다:
|
||||
1. **계층 설정**: 에디터에서 창고 -> 구역(Lv1) -> 위치(Lv2) 설정 및 매핑 저장
|
||||
2. **배치 검증**:
|
||||
- 구역 배치 후, 위치를 구역 **내부**에 배치 (성공해야 함)
|
||||
- 위치를 구역 **외부**에 배치 (실패해야 함)
|
||||
3. **이동 검증**: 구역 이동 시 내부의 위치들도 같이 따라오는지 확인
|
||||
|
||||
### 5. 관련 파일
|
||||
- `frontend/components/admin/dashboard/widgets/yard-3d/DigitalTwinEditor.tsx`
|
||||
- `frontend/components/admin/dashboard/widgets/yard-3d/HierarchyConfigPanel.tsx`
|
||||
- `frontend/components/admin/dashboard/widgets/yard-3d/spatialContainment.ts`
|
||||
- `backend-node/src/controllers/digitalTwinDataController.ts`
|
||||
- `backend-node/src/routes/digitalTwinRoutes.ts`
|
||||
- `db/migrations/042_refactor_digital_twin_hierarchy.sql`
|
||||
|
||||
|
||||
@@ -0,0 +1,591 @@
|
||||
# 리포트 디자이너 그리드 시스템 구현 계획
|
||||
|
||||
## 개요
|
||||
|
||||
현재 자유 배치 방식의 리포트 디자이너를 **그리드 기반 스냅 시스템**으로 전환합니다.
|
||||
안드로이드 홈 화면의 위젯 배치 방식과 유사하게, 모든 컴포넌트는 그리드에 맞춰서만 배치 및 크기 조절이 가능합니다.
|
||||
|
||||
## 목표
|
||||
|
||||
1. **정렬된 레이아웃**: 그리드 기반으로 요소들이 자동 정렬
|
||||
2. **Word/PDF 변환 개선**: 그리드 정보를 활용하여 정확한 문서 변환
|
||||
3. **직관적인 UI**: 그리드 시각화를 통한 명확한 배치 가이드
|
||||
4. **사용자 제어**: 그리드 크기, 가시성 등 사용자 설정 가능
|
||||
|
||||
## 핵심 개념
|
||||
|
||||
### 그리드 시스템
|
||||
|
||||
```typescript
|
||||
interface GridConfig {
|
||||
// 그리드 설정
|
||||
cellWidth: number; // 그리드 셀 너비 (px)
|
||||
cellHeight: number; // 그리드 셀 높이 (px)
|
||||
rows: number; // 세로 그리드 수 (계산값: pageHeight / cellHeight)
|
||||
columns: number; // 가로 그리드 수 (계산값: pageWidth / cellWidth)
|
||||
|
||||
// 표시 설정
|
||||
visible: boolean; // 그리드 표시 여부
|
||||
snapToGrid: boolean; // 그리드 스냅 활성화 여부
|
||||
|
||||
// 시각적 설정
|
||||
gridColor: string; // 그리드 선 색상
|
||||
gridOpacity: number; // 그리드 투명도 (0-1)
|
||||
}
|
||||
```
|
||||
|
||||
### 컴포넌트 위치/크기 (그리드 기반)
|
||||
|
||||
```typescript
|
||||
interface ComponentPosition {
|
||||
// 그리드 좌표 (셀 단위)
|
||||
gridX: number; // 시작 열 (0부터 시작)
|
||||
gridY: number; // 시작 행 (0부터 시작)
|
||||
gridWidth: number; // 차지하는 열 수
|
||||
gridHeight: number; // 차지하는 행 수
|
||||
|
||||
// 실제 픽셀 좌표 (계산값)
|
||||
x: number; // gridX * cellWidth
|
||||
y: number; // gridY * cellHeight
|
||||
width: number; // gridWidth * cellWidth
|
||||
height: number; // gridHeight * cellHeight
|
||||
}
|
||||
```
|
||||
|
||||
## 구현 단계
|
||||
|
||||
### Phase 1: 그리드 시스템 기반 구조
|
||||
|
||||
#### 1.1 타입 정의
|
||||
|
||||
- **파일**: `frontend/types/report.ts`
|
||||
- **내용**:
|
||||
- `GridConfig` 인터페이스 추가
|
||||
- `ComponentConfig`에 `gridX`, `gridY`, `gridWidth`, `gridHeight` 추가
|
||||
- `ReportPage`에 `gridConfig` 추가
|
||||
|
||||
#### 1.2 Context 확장
|
||||
|
||||
- **파일**: `frontend/contexts/ReportDesignerContext.tsx`
|
||||
- **내용**:
|
||||
- `gridConfig` 상태 추가
|
||||
- `updateGridConfig()` 함수 추가
|
||||
- `snapToGrid()` 유틸리티 함수 추가
|
||||
- 컴포넌트 추가/이동/리사이즈 시 그리드 스냅 적용
|
||||
|
||||
#### 1.3 그리드 계산 유틸리티
|
||||
|
||||
- **파일**: `frontend/lib/utils/gridUtils.ts` (신규)
|
||||
- **내용**:
|
||||
|
||||
```typescript
|
||||
// 픽셀 좌표 → 그리드 좌표 변환
|
||||
export function pixelToGrid(pixel: number, cellSize: number): number;
|
||||
|
||||
// 그리드 좌표 → 픽셀 좌표 변환
|
||||
export function gridToPixel(grid: number, cellSize: number): number;
|
||||
|
||||
// 컴포넌트 위치/크기를 그리드에 스냅
|
||||
export function snapComponentToGrid(
|
||||
component: ComponentConfig,
|
||||
gridConfig: GridConfig
|
||||
): ComponentConfig;
|
||||
|
||||
// 그리드 충돌 감지
|
||||
export function detectGridCollision(
|
||||
component: ComponentConfig,
|
||||
otherComponents: ComponentConfig[]
|
||||
): boolean;
|
||||
```
|
||||
|
||||
### Phase 2: 그리드 시각화
|
||||
|
||||
#### 2.1 그리드 레이어 컴포넌트
|
||||
|
||||
- **파일**: `frontend/components/report/designer/GridLayer.tsx` (신규)
|
||||
- **내용**:
|
||||
- Canvas 위에 그리드 선 렌더링
|
||||
- SVG 또는 Canvas API 사용
|
||||
- 그리드 크기/색상/투명도 적용
|
||||
- 줌/스크롤 시에도 정확한 위치 유지
|
||||
|
||||
```tsx
|
||||
interface GridLayerProps {
|
||||
gridConfig: GridConfig;
|
||||
pageWidth: number;
|
||||
pageHeight: number;
|
||||
}
|
||||
|
||||
export function GridLayer({
|
||||
gridConfig,
|
||||
pageWidth,
|
||||
pageHeight,
|
||||
}: GridLayerProps) {
|
||||
if (!gridConfig.visible) return null;
|
||||
|
||||
// SVG로 그리드 선 렌더링
|
||||
return (
|
||||
<svg className="absolute inset-0 pointer-events-none">
|
||||
{/* 세로 선 */}
|
||||
{Array.from({ length: gridConfig.columns + 1 }).map((_, i) => (
|
||||
<line
|
||||
key={`v-${i}`}
|
||||
x1={i * gridConfig.cellWidth}
|
||||
y1={0}
|
||||
x2={i * gridConfig.cellWidth}
|
||||
y2={pageHeight}
|
||||
stroke={gridConfig.gridColor}
|
||||
strokeOpacity={gridConfig.opacity}
|
||||
/>
|
||||
))}
|
||||
{/* 가로 선 */}
|
||||
{Array.from({ length: gridConfig.rows + 1 }).map((_, i) => (
|
||||
<line
|
||||
key={`h-${i}`}
|
||||
x1={0}
|
||||
y1={i * gridConfig.cellHeight}
|
||||
x2={pageWidth}
|
||||
y2={i * gridConfig.cellHeight}
|
||||
stroke={gridConfig.gridColor}
|
||||
strokeOpacity={gridConfig.opacity}
|
||||
/>
|
||||
))}
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
#### 2.2 Canvas 통합
|
||||
|
||||
- **파일**: `frontend/components/report/designer/ReportDesignerCanvas.tsx`
|
||||
- **내용**:
|
||||
- `<GridLayer />` 추가
|
||||
- 컴포넌트 렌더링 시 그리드 기반 위치 사용
|
||||
|
||||
### Phase 3: 드래그 앤 드롭 스냅
|
||||
|
||||
#### 3.1 드래그 시 그리드 스냅
|
||||
|
||||
- **파일**: `frontend/components/report/designer/ReportDesignerCanvas.tsx`
|
||||
- **내용**:
|
||||
- `useDrop` 훅 수정
|
||||
- 드롭 위치를 그리드에 스냅
|
||||
- 실시간 스냅 가이드 표시
|
||||
|
||||
```typescript
|
||||
const [, drop] = useDrop({
|
||||
accept: ["TEXT", "LABEL", "TABLE", "SIGNATURE", "STAMP"],
|
||||
drop: (item: any, monitor) => {
|
||||
const offset = monitor.getClientOffset();
|
||||
if (!offset) return;
|
||||
|
||||
// 캔버스 상대 좌표 계산
|
||||
const canvasRect = canvasRef.current?.getBoundingClientRect();
|
||||
if (!canvasRect) return;
|
||||
|
||||
let x = offset.x - canvasRect.left;
|
||||
let y = offset.y - canvasRect.top;
|
||||
|
||||
// 그리드 스냅 적용
|
||||
if (gridConfig.snapToGrid) {
|
||||
const gridX = Math.round(x / gridConfig.cellWidth);
|
||||
const gridY = Math.round(y / gridConfig.cellHeight);
|
||||
x = gridX * gridConfig.cellWidth;
|
||||
y = gridY * gridConfig.cellHeight;
|
||||
}
|
||||
|
||||
// 컴포넌트 추가
|
||||
addComponent({ type: item.type, x, y });
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
#### 3.2 리사이즈 시 그리드 스냅
|
||||
|
||||
- **파일**: `frontend/components/report/designer/ComponentWrapper.tsx`
|
||||
- **내용**:
|
||||
- `react-resizable` 또는 `react-rnd`의 `snap` 설정 활용
|
||||
- 리사이즈 핸들 드래그 시 그리드 단위로만 크기 조절
|
||||
|
||||
```typescript
|
||||
<Rnd
|
||||
position={{ x: component.x, y: component.y }}
|
||||
size={{ width: component.width, height: component.height }}
|
||||
onDragStop={(e, d) => {
|
||||
let newX = d.x;
|
||||
let newY = d.y;
|
||||
|
||||
if (gridConfig.snapToGrid) {
|
||||
const gridX = Math.round(newX / gridConfig.cellWidth);
|
||||
const gridY = Math.round(newY / gridConfig.cellHeight);
|
||||
newX = gridX * gridConfig.cellWidth;
|
||||
newY = gridY * gridConfig.cellHeight;
|
||||
}
|
||||
|
||||
updateComponent(component.id, { x: newX, y: newY });
|
||||
}}
|
||||
onResizeStop={(e, direction, ref, delta, position) => {
|
||||
let newWidth = parseInt(ref.style.width);
|
||||
let newHeight = parseInt(ref.style.height);
|
||||
|
||||
if (gridConfig.snapToGrid) {
|
||||
const gridWidth = Math.round(newWidth / gridConfig.cellWidth);
|
||||
const gridHeight = Math.round(newHeight / gridConfig.cellHeight);
|
||||
newWidth = gridWidth * gridConfig.cellWidth;
|
||||
newHeight = gridHeight * gridConfig.cellHeight;
|
||||
}
|
||||
|
||||
updateComponent(component.id, {
|
||||
width: newWidth,
|
||||
height: newHeight,
|
||||
...position,
|
||||
});
|
||||
}}
|
||||
grid={
|
||||
gridConfig.snapToGrid
|
||||
? [gridConfig.cellWidth, gridConfig.cellHeight]
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
```
|
||||
|
||||
### Phase 4: 그리드 설정 UI
|
||||
|
||||
#### 4.1 그리드 설정 패널
|
||||
|
||||
- **파일**: `frontend/components/report/designer/GridSettingsPanel.tsx` (신규)
|
||||
- **내용**:
|
||||
- 그리드 크기 조절 (cellWidth, cellHeight)
|
||||
- 그리드 표시/숨김 토글
|
||||
- 스냅 활성화/비활성화 토글
|
||||
- 그리드 색상/투명도 조절
|
||||
|
||||
```tsx
|
||||
export function GridSettingsPanel() {
|
||||
const { gridConfig, updateGridConfig } = useReportDesigner();
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-sm">그리드 설정</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
{/* 그리드 표시 */}
|
||||
<div className="flex items-center justify-between">
|
||||
<Label>그리드 표시</Label>
|
||||
<Switch
|
||||
checked={gridConfig.visible}
|
||||
onCheckedChange={(visible) => updateGridConfig({ visible })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 스냅 활성화 */}
|
||||
<div className="flex items-center justify-between">
|
||||
<Label>그리드 스냅</Label>
|
||||
<Switch
|
||||
checked={gridConfig.snapToGrid}
|
||||
onCheckedChange={(snapToGrid) => updateGridConfig({ snapToGrid })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 셀 크기 */}
|
||||
<div className="space-y-2">
|
||||
<Label>셀 너비 (px)</Label>
|
||||
<Input
|
||||
type="number"
|
||||
value={gridConfig.cellWidth}
|
||||
onChange={(e) =>
|
||||
updateGridConfig({ cellWidth: parseInt(e.target.value) })
|
||||
}
|
||||
min={10}
|
||||
max={100}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>셀 높이 (px)</Label>
|
||||
<Input
|
||||
type="number"
|
||||
value={gridConfig.cellHeight}
|
||||
onChange={(e) =>
|
||||
updateGridConfig({ cellHeight: parseInt(e.target.value) })
|
||||
}
|
||||
min={10}
|
||||
max={100}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 프리셋 */}
|
||||
<div className="space-y-2">
|
||||
<Label>프리셋</Label>
|
||||
<Select
|
||||
onValueChange={(value) => {
|
||||
const presets: Record<
|
||||
string,
|
||||
{ cellWidth: number; cellHeight: number }
|
||||
> = {
|
||||
fine: { cellWidth: 10, cellHeight: 10 },
|
||||
medium: { cellWidth: 20, cellHeight: 20 },
|
||||
coarse: { cellWidth: 50, cellHeight: 50 },
|
||||
};
|
||||
updateGridConfig(presets[value]);
|
||||
}}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="그리드 크기 선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="fine">세밀 (10x10)</SelectItem>
|
||||
<SelectItem value="medium">중간 (20x20)</SelectItem>
|
||||
<SelectItem value="coarse">넓음 (50x50)</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
#### 4.2 툴바에 그리드 토글 추가
|
||||
|
||||
- **파일**: `frontend/components/report/designer/ReportDesignerToolbar.tsx`
|
||||
- **내용**:
|
||||
- 그리드 표시/숨김 버튼
|
||||
- 그리드 설정 모달 열기 버튼
|
||||
- 키보드 단축키 (`G` 키로 그리드 토글)
|
||||
|
||||
### Phase 5: Word 변환 개선
|
||||
|
||||
#### 5.1 그리드 기반 레이아웃 변환
|
||||
|
||||
- **파일**: `frontend/components/report/designer/ReportPreviewModal.tsx`
|
||||
- **내용**:
|
||||
- 그리드 정보를 활용하여 더 정확한 테이블 레이아웃 생성
|
||||
- 그리드 행/열을 Word 테이블의 행/열로 매핑
|
||||
|
||||
```typescript
|
||||
const handleDownloadWord = async () => {
|
||||
// 그리드 기반으로 컴포넌트 배치 맵 생성
|
||||
const gridMap: (ComponentConfig | null)[][] = Array(gridConfig.rows)
|
||||
.fill(null)
|
||||
.map(() => Array(gridConfig.columns).fill(null));
|
||||
|
||||
// 각 컴포넌트를 그리드 맵에 배치
|
||||
for (const component of components) {
|
||||
const gridX = Math.round(component.x / gridConfig.cellWidth);
|
||||
const gridY = Math.round(component.y / gridConfig.cellHeight);
|
||||
const gridWidth = Math.round(component.width / gridConfig.cellWidth);
|
||||
const gridHeight = Math.round(component.height / gridConfig.cellHeight);
|
||||
|
||||
// 컴포넌트가 차지하는 모든 셀에 참조 저장
|
||||
for (let y = gridY; y < gridY + gridHeight; y++) {
|
||||
for (let x = gridX; x < gridX + gridWidth; x++) {
|
||||
if (y < gridConfig.rows && x < gridConfig.columns) {
|
||||
gridMap[y][x] = component;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 그리드 맵을 Word 테이블로 변환
|
||||
const tableRows: TableRow[] = [];
|
||||
|
||||
for (let y = 0; y < gridConfig.rows; y++) {
|
||||
const cells: TableCell[] = [];
|
||||
let x = 0;
|
||||
|
||||
while (x < gridConfig.columns) {
|
||||
const component = gridMap[y][x];
|
||||
|
||||
if (!component) {
|
||||
// 빈 셀
|
||||
cells.push(new TableCell({ children: [new Paragraph("")] }));
|
||||
x++;
|
||||
} else {
|
||||
// 컴포넌트 셀
|
||||
const gridWidth = Math.round(component.width / gridConfig.cellWidth);
|
||||
const gridHeight = Math.round(component.height / gridConfig.cellHeight);
|
||||
|
||||
const cell = createTableCell(component, gridWidth, gridHeight);
|
||||
if (cell) cells.push(cell);
|
||||
|
||||
x += gridWidth;
|
||||
}
|
||||
}
|
||||
|
||||
if (cells.length > 0) {
|
||||
tableRows.push(new TableRow({ children: cells }));
|
||||
}
|
||||
}
|
||||
|
||||
// ... Word 문서 생성
|
||||
};
|
||||
```
|
||||
|
||||
### Phase 6: 데이터 마이그레이션
|
||||
|
||||
#### 6.1 기존 레이아웃 자동 변환
|
||||
|
||||
- **파일**: `frontend/lib/utils/layoutMigration.ts` (신규)
|
||||
- **내용**:
|
||||
- 기존 절대 위치 데이터를 그리드 기반으로 변환
|
||||
- 가장 가까운 그리드 셀에 스냅
|
||||
- 마이그레이션 로그 생성
|
||||
|
||||
```typescript
|
||||
export function migrateLayoutToGrid(
|
||||
layout: ReportLayoutConfig,
|
||||
gridConfig: GridConfig
|
||||
): ReportLayoutConfig {
|
||||
return {
|
||||
...layout,
|
||||
pages: layout.pages.map((page) => ({
|
||||
...page,
|
||||
gridConfig,
|
||||
components: page.components.map((component) => {
|
||||
// 픽셀 좌표를 그리드 좌표로 변환
|
||||
const gridX = Math.round(component.x / gridConfig.cellWidth);
|
||||
const gridY = Math.round(component.y / gridConfig.cellHeight);
|
||||
const gridWidth = Math.max(
|
||||
1,
|
||||
Math.round(component.width / gridConfig.cellWidth)
|
||||
);
|
||||
const gridHeight = Math.max(
|
||||
1,
|
||||
Math.round(component.height / gridConfig.cellHeight)
|
||||
);
|
||||
|
||||
return {
|
||||
...component,
|
||||
gridX,
|
||||
gridY,
|
||||
gridWidth,
|
||||
gridHeight,
|
||||
x: gridX * gridConfig.cellWidth,
|
||||
y: gridY * gridConfig.cellHeight,
|
||||
width: gridWidth * gridConfig.cellWidth,
|
||||
height: gridHeight * gridConfig.cellHeight,
|
||||
};
|
||||
}),
|
||||
})),
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
#### 6.2 마이그레이션 UI
|
||||
|
||||
- **파일**: `frontend/components/report/designer/MigrationModal.tsx` (신규)
|
||||
- **내용**:
|
||||
- 기존 리포트 로드 시 마이그레이션 필요 여부 체크
|
||||
- 마이그레이션 전/후 미리보기
|
||||
- 사용자 확인 후 적용
|
||||
|
||||
## 데이터베이스 스키마 변경
|
||||
|
||||
### report_layout_pages 테이블
|
||||
|
||||
```sql
|
||||
ALTER TABLE report_layout_pages
|
||||
ADD COLUMN grid_cell_width INTEGER DEFAULT 20,
|
||||
ADD COLUMN grid_cell_height INTEGER DEFAULT 20,
|
||||
ADD COLUMN grid_visible BOOLEAN DEFAULT true,
|
||||
ADD COLUMN grid_snap_enabled BOOLEAN DEFAULT true,
|
||||
ADD COLUMN grid_color VARCHAR(7) DEFAULT '#e5e7eb',
|
||||
ADD COLUMN grid_opacity DECIMAL(3,2) DEFAULT 0.5;
|
||||
```
|
||||
|
||||
### report_layout_components 테이블
|
||||
|
||||
```sql
|
||||
ALTER TABLE report_layout_components
|
||||
ADD COLUMN grid_x INTEGER,
|
||||
ADD COLUMN grid_y INTEGER,
|
||||
ADD COLUMN grid_width INTEGER,
|
||||
ADD COLUMN grid_height INTEGER;
|
||||
|
||||
-- 기존 데이터 마이그레이션
|
||||
UPDATE report_layout_components
|
||||
SET
|
||||
grid_x = ROUND(position_x / 20.0),
|
||||
grid_y = ROUND(position_y / 20.0),
|
||||
grid_width = GREATEST(1, ROUND(width / 20.0)),
|
||||
grid_height = GREATEST(1, ROUND(height / 20.0))
|
||||
WHERE grid_x IS NULL;
|
||||
```
|
||||
|
||||
## 테스트 계획
|
||||
|
||||
### 단위 테스트
|
||||
|
||||
- `gridUtils.ts`의 모든 함수 테스트
|
||||
- 그리드 좌표 ↔ 픽셀 좌표 변환 정확성
|
||||
- 충돌 감지 로직
|
||||
|
||||
### 통합 테스트
|
||||
|
||||
- 드래그 앤 드롭 시 그리드 스냅 동작
|
||||
- 리사이즈 시 그리드 스냅 동작
|
||||
- 그리드 크기 변경 시 컴포넌트 재배치
|
||||
|
||||
### E2E 테스트
|
||||
|
||||
- 새 리포트 생성 및 그리드 설정
|
||||
- 기존 리포트 마이그레이션
|
||||
- Word 다운로드 시 레이아웃 정확성
|
||||
|
||||
## 예상 개발 일정
|
||||
|
||||
- **Phase 1**: 그리드 시스템 기반 구조 (2일)
|
||||
- **Phase 2**: 그리드 시각화 (1일)
|
||||
- **Phase 3**: 드래그 앤 드롭 스냅 (2일)
|
||||
- **Phase 4**: 그리드 설정 UI (1일)
|
||||
- **Phase 5**: Word 변환 개선 (2일)
|
||||
- **Phase 6**: 데이터 마이그레이션 (1일)
|
||||
- **테스트 및 디버깅**: (2일)
|
||||
|
||||
**총 예상 기간**: 11일
|
||||
|
||||
## 기술적 고려사항
|
||||
|
||||
### 성능 최적화
|
||||
|
||||
- 그리드 렌더링: SVG 대신 Canvas API 고려 (많은 셀의 경우)
|
||||
- 메모이제이션: 그리드 계산 결과 캐싱
|
||||
- 가상화: 큰 페이지에서 보이는 영역만 렌더링
|
||||
|
||||
### 사용자 경험
|
||||
|
||||
- 실시간 스냅 가이드: 드래그 중 스냅될 위치 미리 표시
|
||||
- 키보드 단축키: 방향키로 그리드 단위 이동, Shift+방향키로 픽셀 단위 미세 조정
|
||||
- 언두/리두: 그리드 스냅 적용 전/후 상태 저장
|
||||
|
||||
### 하위 호환성
|
||||
|
||||
- 기존 리포트는 자동 마이그레이션 제공
|
||||
- 마이그레이션 옵션: 자동 / 수동 선택 가능
|
||||
- 레거시 모드: 그리드 없이 자유 배치 가능 (옵션)
|
||||
|
||||
## 추가 기능 (향후 확장)
|
||||
|
||||
### 스마트 가이드
|
||||
|
||||
- 다른 컴포넌트와 정렬 시 가이드 라인 표시
|
||||
- 균등 간격 가이드
|
||||
|
||||
### 그리드 템플릿
|
||||
|
||||
- 자주 사용하는 그리드 레이아웃 템플릿 제공
|
||||
- 문서 종류별 프리셋 (계약서, 보고서, 송장 등)
|
||||
|
||||
### 그리드 병합
|
||||
|
||||
- 여러 그리드 셀을 하나로 병합
|
||||
- 복잡한 레이아웃 지원
|
||||
|
||||
## 참고 자료
|
||||
|
||||
- Android Home Screen Widget System
|
||||
- Microsoft Word Table Layout
|
||||
- CSS Grid Layout
|
||||
- Figma Auto Layout
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,358 @@
|
||||
# 리포트 관리 시스템 구현 진행 상황
|
||||
|
||||
## 프로젝트 개요
|
||||
|
||||
동적 리포트 디자이너 시스템 구현
|
||||
|
||||
- 사용자가 드래그 앤 드롭으로 리포트 레이아웃 설계
|
||||
- SQL 쿼리 연동으로 실시간 데이터 표시
|
||||
- 미리보기 및 인쇄 기능
|
||||
|
||||
---
|
||||
|
||||
## 완료된 작업 ✅
|
||||
|
||||
### 1. 데이터베이스 설계 및 구축
|
||||
|
||||
- [x] `report_template` 테이블 생성 (18개 초기 템플릿)
|
||||
- [x] `report_master` 테이블 생성 (리포트 메타 정보)
|
||||
- [x] `report_layout` 테이블 생성 (레이아웃 JSON)
|
||||
- [x] `report_query` 테이블 생성 (쿼리 정의)
|
||||
|
||||
**파일**: `db/report_schema.sql`, `db/report_query_schema.sql`
|
||||
|
||||
### 2. 백엔드 API 구현
|
||||
|
||||
- [x] 리포트 CRUD API (생성, 조회, 수정, 삭제)
|
||||
- [x] 템플릿 조회 API
|
||||
- [x] 레이아웃 저장/조회 API
|
||||
- [x] 쿼리 실행 API (파라미터 지원)
|
||||
- [x] 리포트 복사 API
|
||||
- [x] Raw SQL 기반 구현 (Prisma 대신 pg 사용)
|
||||
|
||||
**파일**:
|
||||
|
||||
- `backend-node/src/types/report.ts`
|
||||
- `backend-node/src/services/reportService.ts`
|
||||
- `backend-node/src/controllers/reportController.ts`
|
||||
- `backend-node/src/routes/reportRoutes.ts`
|
||||
|
||||
### 3. 프론트엔드 - 리포트 목록 페이지
|
||||
|
||||
- [x] 리포트 리스트 조회 및 표시
|
||||
- [x] 검색 기능
|
||||
- [x] 페이지네이션
|
||||
- [x] 새 리포트 생성 (디자이너로 이동)
|
||||
- [x] 수정/복사/삭제 액션 버튼
|
||||
|
||||
**파일**:
|
||||
|
||||
- `frontend/app/(main)/admin/report/page.tsx`
|
||||
- `frontend/components/report/ReportListTable.tsx`
|
||||
- `frontend/hooks/useReportList.ts`
|
||||
|
||||
### 4. 프론트엔드 - 리포트 디자이너 기본 구조
|
||||
|
||||
- [x] Context 기반 상태 관리 (`ReportDesignerContext`)
|
||||
- [x] 툴바 (저장, 미리보기, 초기화, 뒤로가기)
|
||||
- [x] 3단 레이아웃 (좌측 팔레트 / 중앙 캔버스 / 우측 속성)
|
||||
- [x] "new" 리포트 처리 (저장 시 생성)
|
||||
|
||||
**파일**:
|
||||
|
||||
- `frontend/contexts/ReportDesignerContext.tsx`
|
||||
- `frontend/app/(main)/admin/report/designer/[reportId]/page.tsx`
|
||||
- `frontend/components/report/designer/ReportDesignerToolbar.tsx`
|
||||
|
||||
### 5. 컴포넌트 팔레트 및 캔버스
|
||||
|
||||
- [x] 드래그 가능한 컴포넌트 목록 (텍스트, 레이블, 테이블)
|
||||
- [x] 드래그 앤 드롭으로 캔버스에 컴포넌트 배치
|
||||
- [x] 컴포넌트 이동 (드래그)
|
||||
- [x] 컴포넌트 크기 조절 (리사이즈 핸들)
|
||||
- [x] 컴포넌트 선택 및 삭제
|
||||
|
||||
**파일**:
|
||||
|
||||
- `frontend/components/report/designer/ComponentPalette.tsx`
|
||||
- `frontend/components/report/designer/ReportDesignerCanvas.tsx`
|
||||
- `frontend/components/report/designer/CanvasComponent.tsx`
|
||||
|
||||
### 6. 쿼리 관리 시스템
|
||||
|
||||
- [x] 쿼리 추가/수정/삭제 (마스터/디테일)
|
||||
- [x] SQL 파라미터 자동 감지 ($1, $2 등)
|
||||
- [x] 파라미터 타입 선택 (text, number, date)
|
||||
- [x] 파라미터 입력값 검증
|
||||
- [x] 쿼리 실행 및 결과 표시
|
||||
- [x] "new" 리포트에서도 쿼리 실행 가능
|
||||
- [x] 실행 결과를 Context에 저장
|
||||
|
||||
**파일**:
|
||||
|
||||
- `frontend/components/report/designer/QueryManager.tsx`
|
||||
- `frontend/contexts/ReportDesignerContext.tsx` (QueryResult 관리)
|
||||
|
||||
### 7. 데이터 바인딩 시스템
|
||||
|
||||
- [x] 속성 패널에서 컴포넌트-쿼리 연결
|
||||
- [x] 텍스트/레이블: 쿼리 + 필드 선택
|
||||
- [x] 테이블: 쿼리 선택 (모든 필드 자동 표시)
|
||||
- [x] 캔버스에서 실제 데이터 표시 (바인딩된 필드의 값)
|
||||
- [x] 실행 결과가 없으면 `{필드명}` 표시
|
||||
|
||||
**파일**:
|
||||
|
||||
- `frontend/components/report/designer/ReportDesignerRightPanel.tsx`
|
||||
- `frontend/components/report/designer/CanvasComponent.tsx`
|
||||
|
||||
### 8. 미리보기 및 내보내기
|
||||
|
||||
- [x] 미리보기 모달
|
||||
- [x] 실제 쿼리 데이터로 렌더링
|
||||
- [x] 편집용 UI 제거 (순수 데이터만 표시)
|
||||
- [x] 브라우저 인쇄 기능
|
||||
- [x] PDF 다운로드 (브라우저 네이티브 인쇄 기능)
|
||||
- [x] WORD 다운로드 (docx 라이브러리)
|
||||
- [x] 파일명 자동 생성 (리포트명\_날짜)
|
||||
|
||||
**파일**:
|
||||
|
||||
- `frontend/components/report/designer/ReportPreviewModal.tsx`
|
||||
|
||||
**사용 라이브러리**:
|
||||
|
||||
- `docx`: WORD 문서 생성 (PDF는 브라우저 기본 기능 사용)
|
||||
|
||||
### 9. 템플릿 시스템
|
||||
|
||||
- [x] 시스템 템플릿 적용 (발주서, 청구서, 기본)
|
||||
- [x] 템플릿별 기본 컴포넌트 자동 배치
|
||||
- [x] 템플릿별 기본 쿼리 자동 생성
|
||||
- [x] 사용자 정의 템플릿 저장 기능
|
||||
- [x] 사용자 정의 템플릿 목록 조회
|
||||
- [x] 사용자 정의 템플릿 삭제
|
||||
- [x] 사용자 정의 템플릿 적용 (백엔드 연동)
|
||||
|
||||
**파일**:
|
||||
|
||||
- `frontend/contexts/ReportDesignerContext.tsx` (템플릿 적용 로직)
|
||||
- `frontend/components/report/designer/TemplatePalette.tsx`
|
||||
- `frontend/components/report/designer/SaveAsTemplateModal.tsx`
|
||||
- `backend-node/src/services/reportService.ts` (createTemplateFromLayout)
|
||||
|
||||
### 10. 외부 DB 연동
|
||||
|
||||
- [x] 쿼리별 외부 DB 연결 선택
|
||||
- [x] 외부 DB 연결 목록 조회 API
|
||||
- [x] 쿼리 실행 시 외부 DB 지원
|
||||
- [x] 내부/외부 DB 선택 UI
|
||||
|
||||
**파일**:
|
||||
|
||||
- `frontend/components/report/designer/QueryManager.tsx`
|
||||
- `backend-node/src/services/reportService.ts` (executeQuery with external DB)
|
||||
|
||||
### 11. 컴포넌트 스타일링
|
||||
|
||||
- [x] 폰트 크기 설정
|
||||
- [x] 폰트 색상 설정 (컬러피커)
|
||||
- [x] 폰트 굵기 (보통/굵게)
|
||||
- [x] 텍스트 정렬 (좌/중/우)
|
||||
- [x] 배경색 설정 (투명 옵션 포함)
|
||||
- [x] 테두리 설정 (두께, 색상)
|
||||
- [x] 캔버스 및 미리보기에 스타일 반영
|
||||
|
||||
**파일**:
|
||||
|
||||
- `frontend/components/report/designer/ReportDesignerRightPanel.tsx`
|
||||
- `frontend/components/report/designer/CanvasComponent.tsx`
|
||||
|
||||
### 12. 레이아웃 도구 (완료!)
|
||||
|
||||
- [x] **Grid Snap**: 10px 단위 그리드에 자동 정렬
|
||||
- [x] **정렬 가이드라인**: 드래그 시 빨간색 가이드라인 표시
|
||||
- [x] **복사/붙여넣기**: Ctrl+C/V로 컴포넌트 복사 (20px 오프셋)
|
||||
- [x] **Undo/Redo**: 히스토리 관리 (Ctrl+Z / Ctrl+Shift+Z)
|
||||
- [x] **컴포넌트 정렬**: 좌/우/상/하/가로중앙/세로중앙 정렬
|
||||
- [x] **컴포넌트 배치**: 가로/세로 균등 배치 (3개 이상)
|
||||
- [x] **크기 조정**: 같은 너비/높이/크기로 조정 (2개 이상)
|
||||
- [x] **화살표 키 이동**: 1px 이동, Shift+화살표 10px 이동
|
||||
- [x] **레이어 관리**: 맨 앞/뒤, 한 단계 앞/뒤 (Z-Index 조정)
|
||||
- [x] **컴포넌트 잠금**: 편집/이동/삭제 방지, 🔒 표시
|
||||
- [x] **눈금자 표시**: 가로/세로 mm 단위 눈금자
|
||||
- [x] **컴포넌트 그룹화**: 여러 컴포넌트를 그룹으로 묶어 함께 이동, 👥 표시
|
||||
|
||||
**파일**:
|
||||
|
||||
- `frontend/contexts/ReportDesignerContext.tsx` (레이아웃 도구 로직)
|
||||
- `frontend/components/report/designer/ReportDesignerToolbar.tsx` (버튼 UI)
|
||||
- `frontend/components/report/designer/ReportDesignerCanvas.tsx` (Grid, 가이드라인)
|
||||
- `frontend/components/report/designer/CanvasComponent.tsx` (잠금, 그룹)
|
||||
- `frontend/components/report/designer/Ruler.tsx` (눈금자 컴포넌트)
|
||||
|
||||
---
|
||||
|
||||
## 진행 중인 작업 🚧
|
||||
|
||||
없음 (모든 레이아웃 도구 구현 완료!)
|
||||
|
||||
---
|
||||
|
||||
## 남은 작업 (우선순위순) 📋
|
||||
|
||||
### Phase 1: 추가 컴포넌트 ✅ 완료!
|
||||
|
||||
1. **이미지 컴포넌트** ✅
|
||||
|
||||
- [x] 파일 업로드 (multer, 10MB 제한)
|
||||
- [x] 회사별 디렉토리 분리 저장
|
||||
- [x] 맞춤 방식 (contain/cover/fill/none)
|
||||
- [x] CORS 설정으로 이미지 로딩
|
||||
- [x] 캔버스 및 미리보기 렌더링
|
||||
- 로고, 서명, 도장 등에 활용
|
||||
|
||||
2. **구분선 컴포넌트 (Divider)** ✅
|
||||
|
||||
- [x] 가로/세로 방향 선택
|
||||
- [x] 선 두께 (lineWidth) 독립 속성
|
||||
- [x] 선 색상 (lineColor) 독립 속성
|
||||
- [x] 선 스타일 (solid/dashed/dotted/double)
|
||||
- [x] 캔버스 및 미리보기 렌더링
|
||||
|
||||
**파일**:
|
||||
- `backend-node/src/controllers/reportController.ts` (uploadImage)
|
||||
- `backend-node/src/routes/reportRoutes.ts` (multer 설정)
|
||||
- `frontend/types/report.ts` (이미지/구분선 속성)
|
||||
- `frontend/components/report/designer/ComponentPalette.tsx`
|
||||
- `frontend/components/report/designer/CanvasComponent.tsx`
|
||||
- `frontend/components/report/designer/ReportDesignerRightPanel.tsx`
|
||||
- `frontend/components/report/designer/ReportPreviewModal.tsx`
|
||||
- `frontend/lib/api/client.ts` (getFullImageUrl)
|
||||
|
||||
3. **차트 컴포넌트** (선택사항) ⬅️ 다음 권장 작업
|
||||
- 막대 차트
|
||||
- 선 차트
|
||||
- 원형 차트
|
||||
- 쿼리 데이터 연동
|
||||
|
||||
### Phase 2: 고급 기능
|
||||
|
||||
4. **조건부 서식**
|
||||
|
||||
- 특정 조건에 따른 스타일 변경
|
||||
- 값 범위에 따른 색상 표시
|
||||
- 수식 기반 표시/숨김
|
||||
|
||||
5. **쿼리 관리 개선**
|
||||
- 쿼리 미리보기 개선 (테이블 형태)
|
||||
- 쿼리 저장/불러오기
|
||||
- 쿼리 템플릿
|
||||
|
||||
### Phase 3: 성능 및 보안
|
||||
|
||||
6. **성능 최적화**
|
||||
|
||||
- 쿼리 결과 캐싱
|
||||
- 대용량 데이터 페이징
|
||||
- 렌더링 최적화
|
||||
- 이미지 레이지 로딩
|
||||
|
||||
7. **권한 관리**
|
||||
- 리포트별 접근 권한
|
||||
- 수정 권한 분리
|
||||
- 템플릿 공유
|
||||
- 사용자별 리포트 목록 필터링
|
||||
|
||||
---
|
||||
|
||||
## 기술 스택
|
||||
|
||||
### 백엔드
|
||||
|
||||
- Node.js + TypeScript
|
||||
- Express.js
|
||||
- PostgreSQL (raw SQL)
|
||||
- pg (node-postgres)
|
||||
|
||||
### 프론트엔드
|
||||
|
||||
- Next.js 14 (App Router)
|
||||
- React 18
|
||||
- TypeScript
|
||||
- Tailwind CSS
|
||||
- Shadcn UI
|
||||
- react-dnd (드래그 앤 드롭)
|
||||
|
||||
---
|
||||
|
||||
## 주요 아키텍처 결정
|
||||
|
||||
### 1. Context API 사용
|
||||
|
||||
- 리포트 디자이너의 복잡한 상태를 Context로 중앙 관리
|
||||
- 컴포넌트 간 prop drilling 방지
|
||||
|
||||
### 2. Raw SQL 사용
|
||||
|
||||
- Prisma 대신 직접 SQL 작성
|
||||
- 복잡한 쿼리와 트랜잭션 처리에 유리
|
||||
- 데이터베이스 제어 수준 향상
|
||||
|
||||
### 3. JSON 기반 레이아웃 저장
|
||||
|
||||
- 레이아웃을 JSONB로 DB에 저장
|
||||
- 버전 관리 용이
|
||||
- 유연한 스키마
|
||||
|
||||
### 4. 쿼리 실행 결과 메모리 관리
|
||||
|
||||
- Context에 쿼리 결과 저장
|
||||
- 컴포넌트에서 실시간 참조
|
||||
- 불필요한 API 호출 방지
|
||||
|
||||
---
|
||||
|
||||
## 참고 문서
|
||||
|
||||
- [리포트*관리*시스템\_설계.md](./리포트_관리_시스템_설계.md) - 초기 설계 문서
|
||||
- [레포트드자이너.html](../레포트드자이너.html) - 참조 프로토타입
|
||||
|
||||
---
|
||||
|
||||
## 다음 작업: 리포트 복사/삭제 테스트 및 검증
|
||||
|
||||
### 테스트 항목
|
||||
|
||||
1. **복사 기능 테스트**
|
||||
|
||||
- 리포트 복사 버튼 클릭
|
||||
- 복사된 리포트명 확인 (원본명 + "\_copy")
|
||||
- 복사된 리포트의 레이아웃 확인
|
||||
- 복사된 리포트의 쿼리 확인
|
||||
- 목록 자동 새로고침 확인
|
||||
|
||||
2. **삭제 기능 테스트**
|
||||
|
||||
- 삭제 버튼 클릭 시 확인 다이얼로그 표시
|
||||
- 취소 버튼 동작 확인
|
||||
- 삭제 실행 후 목록에서 제거 확인
|
||||
- Toast 메시지 표시 확인
|
||||
|
||||
3. **에러 처리 테스트**
|
||||
- 존재하지 않는 리포트 삭제 시도
|
||||
- 네트워크 오류 시 Toast 메시지
|
||||
- 로딩 중 버튼 비활성화 확인
|
||||
|
||||
### 추가 개선 사항
|
||||
|
||||
- [ ] 컴포넌트 복사 기능 (Ctrl+C/Ctrl+V)
|
||||
- [ ] 다중 선택 및 정렬 기능
|
||||
- [ ] 실행 취소/다시 실행 (Undo/Redo)
|
||||
- [ ] 사용자 정의 템플릿 저장
|
||||
|
||||
---
|
||||
|
||||
**최종 업데이트**: 2025-10-01
|
||||
**작성자**: AI Assistant
|
||||
**상태**: 이미지 & 구분선 컴포넌트 완료 (기본 컴포넌트 완료, 약 99% 완료)
|
||||
@@ -0,0 +1,679 @@
|
||||
# 리포트 관리 시스템 설계
|
||||
|
||||
## 1. 프로젝트 개요
|
||||
|
||||
### 1.1 목적
|
||||
|
||||
ERP 시스템에서 다양한 업무 문서(발주서, 청구서, 거래명세서 등)를 동적으로 디자인하고 관리할 수 있는 리포트 관리 시스템을 구축합니다.
|
||||
|
||||
### 1.2 주요 기능
|
||||
|
||||
- 리포트 목록 조회 및 관리
|
||||
- 드래그 앤 드롭 기반 리포트 디자이너
|
||||
- 템플릿 관리 (기본 템플릿 + 사용자 정의 템플릿)
|
||||
- 쿼리 관리 (마스터/디테일)
|
||||
- 외부 DB 연동
|
||||
- 인쇄 및 내보내기 (PDF, WORD)
|
||||
- 미리보기 기능
|
||||
|
||||
## 2. 화면 구성
|
||||
|
||||
### 2.1 리포트 목록 화면 (`/admin/report`)
|
||||
|
||||
```
|
||||
┌──────────────────────────────────────────────────────────────────┐
|
||||
│ 리포트 관리 [+ 새 리포트] │
|
||||
├──────────────────────────────────────────────────────────────────┤
|
||||
│ 검색: [____________________] [검색] [초기화] │
|
||||
├──────────────────────────────────────────────────────────────────┤
|
||||
│ No │ 리포트명 │ 작성자 │ 수정일 │ 액션 │
|
||||
├────┼──────────────┼────────┼───────────┼────────────────────────┤
|
||||
│ 1 │ 발주서 양식 │ 홍길동 │ 2025-10-01 │ 수정 │ 복사 │ 삭제 │
|
||||
│ 2 │ 청구서 기본 │ 김철수 │ 2025-09-28 │ 수정 │ 복사 │ 삭제 │
|
||||
│ 3 │ 거래명세서 │ 이영희 │ 2025-09-25 │ 수정 │ 복사 │ 삭제 │
|
||||
└──────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**기능**
|
||||
|
||||
- 리포트 목록 조회 (페이징, 정렬, 검색)
|
||||
- 새 리포트 생성
|
||||
- 기존 리포트 수정
|
||||
- 리포트 복사
|
||||
- 리포트 삭제
|
||||
- 리포트 미리보기
|
||||
|
||||
### 2.2 리포트 디자이너 화면
|
||||
|
||||
```
|
||||
┌──────────────────────────────────────────────────────────────────┐
|
||||
│ 리포트 디자이너 [저장] [미리보기] [초기화] [목록으로] │
|
||||
├──────┬────────────────────────────────────────────────┬──────────┤
|
||||
│ │ │ │
|
||||
│ 템플릿│ 작업 영역 (캔버스) │ 속성 패널 │
|
||||
│ │ │ │
|
||||
│ 컴포넌트│ [드래그 앤 드롭] │ 쿼리 관리 │
|
||||
│ │ │ │
|
||||
│ │ │ DB 연동 │
|
||||
└──────┴────────────────────────────────────────────────┴──────────┘
|
||||
```
|
||||
|
||||
### 2.3 미리보기 모달
|
||||
|
||||
```
|
||||
┌──────────────────────────────────────────────────────────────────┐
|
||||
│ 미리보기 [닫기] │
|
||||
├──────────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ [리포트 내용 미리보기] │
|
||||
│ │
|
||||
├──────────────────────────────────────────────────────────────────┤
|
||||
│ [인쇄] [PDF] [WORD] │
|
||||
└──────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
## 3. 데이터베이스 설계
|
||||
|
||||
### 3.1 테이블 구조
|
||||
|
||||
#### REPORT_TEMPLATE (리포트 템플릿)
|
||||
|
||||
```sql
|
||||
CREATE TABLE report_template (
|
||||
template_id VARCHAR(50) PRIMARY KEY, -- 템플릿 ID
|
||||
template_name_kor VARCHAR(100) NOT NULL, -- 템플릿명 (한국어)
|
||||
template_name_eng VARCHAR(100), -- 템플릿명 (영어)
|
||||
template_type VARCHAR(30) NOT NULL, -- 템플릿 타입 (ORDER, INVOICE, STATEMENT, etc)
|
||||
is_system CHAR(1) DEFAULT 'N', -- 시스템 기본 템플릿 여부 (Y/N)
|
||||
thumbnail_url VARCHAR(500), -- 썸네일 이미지 경로
|
||||
description TEXT, -- 템플릿 설명
|
||||
layout_config TEXT, -- 레이아웃 설정 (JSON)
|
||||
default_queries TEXT, -- 기본 쿼리 (JSON)
|
||||
use_yn CHAR(1) DEFAULT 'Y', -- 사용 여부
|
||||
sort_order INTEGER DEFAULT 0, -- 정렬 순서
|
||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||
created_by VARCHAR(50),
|
||||
updated_at TIMESTAMP,
|
||||
updated_by VARCHAR(50)
|
||||
);
|
||||
```
|
||||
|
||||
#### REPORT_MASTER (리포트 마스터)
|
||||
|
||||
```sql
|
||||
CREATE TABLE report_master (
|
||||
report_id VARCHAR(50) PRIMARY KEY, -- 리포트 ID
|
||||
report_name_kor VARCHAR(100) NOT NULL, -- 리포트명 (한국어)
|
||||
report_name_eng VARCHAR(100), -- 리포트명 (영어)
|
||||
template_id VARCHAR(50), -- 템플릿 ID (FK)
|
||||
report_type VARCHAR(30) NOT NULL, -- 리포트 타입
|
||||
company_code VARCHAR(20), -- 회사 코드
|
||||
description TEXT, -- 설명
|
||||
use_yn CHAR(1) DEFAULT 'Y', -- 사용 여부
|
||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||
created_by VARCHAR(50),
|
||||
updated_at TIMESTAMP,
|
||||
updated_by VARCHAR(50),
|
||||
FOREIGN KEY (template_id) REFERENCES report_template(template_id)
|
||||
);
|
||||
```
|
||||
|
||||
#### REPORT_LAYOUT (리포트 레이아웃)
|
||||
|
||||
```sql
|
||||
CREATE TABLE report_layout (
|
||||
layout_id VARCHAR(50) PRIMARY KEY, -- 레이아웃 ID
|
||||
report_id VARCHAR(50) NOT NULL, -- 리포트 ID (FK)
|
||||
canvas_width INTEGER DEFAULT 210, -- 캔버스 너비 (mm)
|
||||
canvas_height INTEGER DEFAULT 297, -- 캔버스 높이 (mm)
|
||||
page_orientation VARCHAR(10) DEFAULT 'portrait', -- 페이지 방향 (portrait/landscape)
|
||||
margin_top INTEGER DEFAULT 20, -- 상단 여백 (mm)
|
||||
margin_bottom INTEGER DEFAULT 20, -- 하단 여백 (mm)
|
||||
margin_left INTEGER DEFAULT 20, -- 좌측 여백 (mm)
|
||||
margin_right INTEGER DEFAULT 20, -- 우측 여백 (mm)
|
||||
components TEXT, -- 컴포넌트 배치 정보 (JSON)
|
||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||
created_by VARCHAR(50),
|
||||
updated_at TIMESTAMP,
|
||||
updated_by VARCHAR(50),
|
||||
FOREIGN KEY (report_id) REFERENCES report_master(report_id)
|
||||
);
|
||||
```
|
||||
|
||||
## 4. 컴포넌트 목록
|
||||
|
||||
### 4.1 기본 컴포넌트
|
||||
|
||||
#### 텍스트 관련
|
||||
|
||||
- **Text Field**: 단일 라인 텍스트 입력/표시
|
||||
- **Text Area**: 여러 줄 텍스트 입력/표시
|
||||
- **Label**: 고정 라벨 텍스트
|
||||
- **Rich Text**: 서식이 있는 텍스트 (굵게, 기울임, 색상)
|
||||
|
||||
#### 숫자/날짜 관련
|
||||
|
||||
- **Number**: 숫자 표시 (통화 형식 지원)
|
||||
- **Date**: 날짜 표시 (형식 지정 가능)
|
||||
- **Date Time**: 날짜 + 시간 표시
|
||||
- **Calculate Field**: 계산 필드 (합계, 평균 등)
|
||||
|
||||
#### 테이블/그리드
|
||||
|
||||
- **Data Table**: 데이터 테이블 (디테일 쿼리 바인딩)
|
||||
- **Summary Table**: 요약 테이블
|
||||
- **Group Table**: 그룹핑 테이블
|
||||
|
||||
#### 이미지/그래픽
|
||||
|
||||
- **Image**: 이미지 표시 (로고, 서명 등)
|
||||
- **Line**: 구분선
|
||||
- **Rectangle**: 사각형 (테두리)
|
||||
|
||||
#### 특수 컴포넌트
|
||||
|
||||
- **Page Number**: 페이지 번호
|
||||
- **Current Date**: 현재 날짜/시간
|
||||
- **Company Info**: 회사 정보 (자동)
|
||||
- **Signature**: 서명란
|
||||
- **Stamp**: 도장란
|
||||
|
||||
### 4.2 컴포넌트 속성
|
||||
|
||||
각 컴포넌트는 다음 공통 속성을 가집니다:
|
||||
|
||||
```typescript
|
||||
interface ComponentBase {
|
||||
id: string; // 컴포넌트 ID
|
||||
type: string; // 컴포넌트 타입
|
||||
x: number; // X 좌표
|
||||
y: number; // Y 좌표
|
||||
width: number; // 너비
|
||||
height: number; // 높이
|
||||
zIndex: number; // Z-인덱스
|
||||
|
||||
// 스타일
|
||||
fontSize?: number; // 글자 크기
|
||||
fontFamily?: string; // 폰트
|
||||
fontWeight?: string; // 글자 굵기
|
||||
fontColor?: string; // 글자 색상
|
||||
backgroundColor?: string; // 배경색
|
||||
borderWidth?: number; // 테두리 두께
|
||||
borderColor?: string; // 테두리 색상
|
||||
borderRadius?: number; // 모서리 둥글기
|
||||
textAlign?: string; // 텍스트 정렬
|
||||
padding?: number; // 내부 여백
|
||||
|
||||
// 데이터 바인딩
|
||||
queryId?: string; // 연결된 쿼리 ID
|
||||
fieldName?: string; // 필드명
|
||||
defaultValue?: string; // 기본값
|
||||
format?: string; // 표시 형식
|
||||
|
||||
// 기타
|
||||
visible?: boolean; // 표시 여부
|
||||
printable?: boolean; // 인쇄 여부
|
||||
conditional?: string; // 조건부 표시 (수식)
|
||||
}
|
||||
```
|
||||
|
||||
## 5. 템플릿 목록
|
||||
|
||||
### 5.1 기본 템플릿 (시스템)
|
||||
|
||||
#### 구매/발주 관련
|
||||
|
||||
- **발주서 (Purchase Order)**: 거래처에 발주하는 문서
|
||||
- **구매요청서 (Purchase Request)**: 내부 구매 요청 문서
|
||||
- **발주 확인서 (PO Confirmation)**: 발주 확인 문서
|
||||
|
||||
#### 판매/청구 관련
|
||||
|
||||
- **청구서 (Invoice)**: 고객에게 청구하는 문서
|
||||
- **견적서 (Quotation)**: 견적 제공 문서
|
||||
- **거래명세서 (Transaction Statement)**: 거래 내역 명세
|
||||
- **세금계산서 (Tax Invoice)**: 세금 계산서
|
||||
- **영수증 (Receipt)**: 영수 증빙 문서
|
||||
|
||||
#### 재고/입출고 관련
|
||||
|
||||
- **입고증 (Goods Receipt)**: 입고 증빙 문서
|
||||
- **출고증 (Delivery Note)**: 출고 증빙 문서
|
||||
- **재고 현황표 (Inventory Report)**: 재고 현황
|
||||
- **이동 전표 (Transfer Note)**: 재고 이동 문서
|
||||
|
||||
#### 생산 관련
|
||||
|
||||
- **작업지시서 (Work Order)**: 생산 작업 지시
|
||||
- **생산 일보 (Production Daily Report)**: 생산 일일 보고
|
||||
- **품질 검사표 (Quality Inspection)**: 품질 검사 기록
|
||||
- **불량 보고서 (Defect Report)**: 불량 보고
|
||||
|
||||
#### 회계/경영 관련
|
||||
|
||||
- **손익 계산서 (Income Statement)**: 손익 현황
|
||||
- **대차대조표 (Balance Sheet)**: 재무 상태
|
||||
- **현금 흐름표 (Cash Flow Statement)**: 현금 흐름
|
||||
- **급여 명세서 (Payroll Slip)**: 급여 내역
|
||||
|
||||
#### 일반 문서
|
||||
|
||||
- **기본 양식 (Basic Template)**: 빈 캔버스
|
||||
- **일반 보고서 (General Report)**: 일반 보고 양식
|
||||
- **목록 양식 (List Template)**: 목록형 양식
|
||||
|
||||
### 5.2 사용자 정의 템플릿
|
||||
|
||||
- 사용자가 직접 생성한 템플릿
|
||||
- 기본 템플릿을 복사하여 수정 가능
|
||||
- 회사별로 관리 가능
|
||||
|
||||
## 6. API 설계
|
||||
|
||||
### 6.1 리포트 목록 API
|
||||
|
||||
#### GET `/api/admin/reports`
|
||||
|
||||
리포트 목록 조회
|
||||
|
||||
```typescript
|
||||
// Request
|
||||
interface GetReportsRequest {
|
||||
page?: number;
|
||||
limit?: number;
|
||||
searchText?: string;
|
||||
reportType?: string;
|
||||
useYn?: string;
|
||||
sortBy?: string;
|
||||
sortOrder?: "ASC" | "DESC";
|
||||
}
|
||||
|
||||
// Response
|
||||
interface GetReportsResponse {
|
||||
items: ReportMaster[];
|
||||
total: number;
|
||||
page: number;
|
||||
limit: number;
|
||||
}
|
||||
```
|
||||
|
||||
#### GET `/api/admin/reports/:reportId`
|
||||
|
||||
리포트 상세 조회
|
||||
|
||||
```typescript
|
||||
// Response
|
||||
interface ReportDetail {
|
||||
report: ReportMaster;
|
||||
layout: ReportLayout;
|
||||
queries: ReportQuery[];
|
||||
components: Component[];
|
||||
}
|
||||
```
|
||||
|
||||
#### POST `/api/admin/reports`
|
||||
|
||||
리포트 생성
|
||||
|
||||
```typescript
|
||||
// Request
|
||||
interface CreateReportRequest {
|
||||
reportNameKor: string;
|
||||
reportNameEng?: string;
|
||||
templateId?: string;
|
||||
reportType: string;
|
||||
description?: string;
|
||||
}
|
||||
|
||||
// Response
|
||||
interface CreateReportResponse {
|
||||
reportId: string;
|
||||
message: string;
|
||||
}
|
||||
```
|
||||
|
||||
#### PUT `/api/admin/reports/:reportId`
|
||||
|
||||
리포트 수정
|
||||
|
||||
```typescript
|
||||
// Request
|
||||
interface UpdateReportRequest {
|
||||
reportNameKor?: string;
|
||||
reportNameEng?: string;
|
||||
reportType?: string;
|
||||
description?: string;
|
||||
useYn?: string;
|
||||
}
|
||||
```
|
||||
|
||||
#### DELETE `/api/admin/reports/:reportId`
|
||||
|
||||
리포트 삭제
|
||||
|
||||
#### POST `/api/admin/reports/:reportId/copy`
|
||||
|
||||
리포트 복사
|
||||
|
||||
### 6.2 템플릿 API
|
||||
|
||||
#### GET `/api/admin/reports/templates`
|
||||
|
||||
템플릿 목록 조회
|
||||
|
||||
```typescript
|
||||
// Response
|
||||
interface GetTemplatesResponse {
|
||||
system: ReportTemplate[]; // 시스템 템플릿
|
||||
custom: ReportTemplate[]; // 사용자 정의 템플릿
|
||||
}
|
||||
```
|
||||
|
||||
#### POST `/api/admin/reports/templates`
|
||||
|
||||
템플릿 생성 (사용자 정의)
|
||||
|
||||
```typescript
|
||||
// Request
|
||||
interface CreateTemplateRequest {
|
||||
templateNameKor: string;
|
||||
templateNameEng?: string;
|
||||
templateType: string;
|
||||
description?: string;
|
||||
layoutConfig: any;
|
||||
defaultQueries?: any;
|
||||
}
|
||||
```
|
||||
|
||||
#### PUT `/api/admin/reports/templates/:templateId`
|
||||
|
||||
템플릿 수정
|
||||
|
||||
#### DELETE `/api/admin/reports/templates/:templateId`
|
||||
|
||||
템플릿 삭제
|
||||
|
||||
### 6.3 레이아웃 API
|
||||
|
||||
#### GET `/api/admin/reports/:reportId/layout`
|
||||
|
||||
레이아웃 조회
|
||||
|
||||
#### PUT `/api/admin/reports/:reportId/layout`
|
||||
|
||||
레이아웃 저장
|
||||
|
||||
```typescript
|
||||
// Request
|
||||
interface SaveLayoutRequest {
|
||||
canvasWidth: number;
|
||||
canvasHeight: number;
|
||||
pageOrientation: string;
|
||||
margins: {
|
||||
top: number;
|
||||
bottom: number;
|
||||
left: number;
|
||||
right: number;
|
||||
};
|
||||
components: Component[];
|
||||
}
|
||||
```
|
||||
|
||||
### 6.4 인쇄/내보내기 API
|
||||
|
||||
#### POST `/api/admin/reports/:reportId/preview`
|
||||
|
||||
미리보기 생성
|
||||
|
||||
```typescript
|
||||
// Request
|
||||
interface PreviewRequest {
|
||||
parameters?: { [key: string]: any };
|
||||
format?: "HTML" | "PDF";
|
||||
}
|
||||
|
||||
// Response
|
||||
interface PreviewResponse {
|
||||
html?: string; // HTML 미리보기
|
||||
pdfUrl?: string; // PDF URL
|
||||
}
|
||||
```
|
||||
|
||||
#### POST `/api/admin/reports/:reportId/print`
|
||||
|
||||
인쇄 (PDF 생성)
|
||||
|
||||
```typescript
|
||||
// Request
|
||||
interface PrintRequest {
|
||||
parameters?: { [key: string]: any };
|
||||
format: "PDF" | "WORD" | "EXCEL";
|
||||
}
|
||||
|
||||
// Response
|
||||
interface PrintResponse {
|
||||
fileUrl: string;
|
||||
fileName: string;
|
||||
fileSize: number;
|
||||
}
|
||||
```
|
||||
|
||||
## 7. 프론트엔드 구조
|
||||
|
||||
### 7.1 페이지 구조
|
||||
|
||||
```
|
||||
/admin/report
|
||||
├── ReportListPage.tsx # 리포트 목록 페이지
|
||||
├── ReportDesignerPage.tsx # 리포트 디자이너 페이지
|
||||
└── components/
|
||||
├── ReportList.tsx # 리포트 목록 테이블
|
||||
├── ReportSearchForm.tsx # 검색 폼
|
||||
├── TemplateSelector.tsx # 템플릿 선택기
|
||||
├── ComponentPalette.tsx # 컴포넌트 팔레트
|
||||
├── Canvas.tsx # 캔버스 영역
|
||||
├── ComponentRenderer.tsx # 컴포넌트 렌더러
|
||||
├── PropertyPanel.tsx # 속성 패널
|
||||
├── QueryManager.tsx # 쿼리 관리
|
||||
├── QueryCard.tsx # 쿼리 카드
|
||||
├── ConnectionManager.tsx # 외부 DB 연결 관리
|
||||
├── PreviewModal.tsx # 미리보기 모달
|
||||
└── PrintOptionsModal.tsx # 인쇄 옵션 모달
|
||||
```
|
||||
|
||||
### 7.2 상태 관리
|
||||
|
||||
```typescript
|
||||
interface ReportDesignerState {
|
||||
// 리포트 기본 정보
|
||||
report: ReportMaster | null;
|
||||
|
||||
// 레이아웃
|
||||
layout: ReportLayout | null;
|
||||
components: Component[];
|
||||
selectedComponentId: string | null;
|
||||
|
||||
// 쿼리
|
||||
queries: ReportQuery[];
|
||||
queryResults: { [queryId: string]: any[] };
|
||||
|
||||
// 외부 연결
|
||||
connections: ReportExternalConnection[];
|
||||
|
||||
// UI 상태
|
||||
isDragging: boolean;
|
||||
isResizing: boolean;
|
||||
showPreview: boolean;
|
||||
showPrintOptions: boolean;
|
||||
|
||||
// 히스토리 (Undo/Redo)
|
||||
history: {
|
||||
past: Component[][];
|
||||
present: Component[];
|
||||
future: Component[][];
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
## 8. 구현 우선순위
|
||||
|
||||
### Phase 1: 기본 기능 (2주)
|
||||
|
||||
- [ ] 데이터베이스 테이블 생성
|
||||
- [ ] 리포트 목록 화면
|
||||
- [ ] 리포트 CRUD API
|
||||
- [ ] 템플릿 목록 조회
|
||||
- [ ] 기본 템플릿 데이터 생성
|
||||
|
||||
### Phase 2: 디자이너 기본 (2주)
|
||||
|
||||
- [ ] 캔버스 구현
|
||||
- [ ] 컴포넌트 드래그 앤 드롭
|
||||
- [ ] 컴포넌트 선택/이동/크기 조절
|
||||
- [ ] 속성 패널 (기본)
|
||||
- [ ] 저장/불러오기
|
||||
|
||||
### Phase 3: 쿼리 관리 (1주)
|
||||
|
||||
- [ ] 쿼리 추가/수정/삭제
|
||||
- [ ] 파라미터 감지 및 입력
|
||||
- [ ] 쿼리 실행 (내부 DB)
|
||||
- [ ] 쿼리 결과를 컴포넌트에 바인딩
|
||||
|
||||
### Phase 4: 쿼리 관리 고급 (1주)
|
||||
|
||||
- [ ] 쿼리 필드 매핑
|
||||
- [ ] 컴포넌트와 데이터 바인딩
|
||||
- [ ] 파라미터 전달 및 처리
|
||||
|
||||
### Phase 5: 미리보기/인쇄 (1주)
|
||||
|
||||
- [ ] HTML 미리보기
|
||||
- [ ] PDF 생성
|
||||
- [ ] WORD 생성
|
||||
- [ ] 브라우저 인쇄
|
||||
|
||||
### Phase 6: 고급 기능 (2주)
|
||||
|
||||
- [ ] 템플릿 생성 기능
|
||||
- [ ] 컴포넌트 추가 (이미지, 서명, 도장)
|
||||
- [ ] 계산 필드
|
||||
- [ ] 조건부 표시
|
||||
- [ ] Undo/Redo
|
||||
- [ ] 다국어 지원
|
||||
|
||||
## 9. 기술 스택
|
||||
|
||||
### Backend
|
||||
|
||||
- **Node.js + TypeScript**: 백엔드 서버
|
||||
- **PostgreSQL**: 데이터베이스
|
||||
- **Prisma**: ORM
|
||||
- **Puppeteer**: PDF 생성
|
||||
- **docx**: WORD 생성
|
||||
|
||||
### Frontend
|
||||
|
||||
- **Next.js + React**: 프론트엔드 프레임워크
|
||||
- **TypeScript**: 타입 안정성
|
||||
- **TailwindCSS**: 스타일링
|
||||
- **react-dnd**: 드래그 앤 드롭
|
||||
- **react-grid-layout**: 레이아웃 관리
|
||||
- **react-to-print**: 인쇄 기능
|
||||
- **react-pdf**: PDF 미리보기
|
||||
|
||||
## 10. 보안 고려사항
|
||||
|
||||
### 10.1 쿼리 실행 보안
|
||||
|
||||
- SELECT 쿼리만 허용 (INSERT, UPDATE, DELETE 금지)
|
||||
- 쿼리 결과 크기 제한 (최대 1000 rows)
|
||||
- 실행 시간 제한 (30초)
|
||||
- SQL 인젝션 방지 (파라미터 바인딩 강제)
|
||||
- 위험한 함수 차단 (DROP, TRUNCATE 등)
|
||||
|
||||
### 10.2 파일 보안
|
||||
|
||||
- 생성된 PDF/WORD 파일은 임시 디렉토리에 저장
|
||||
- 파일은 24시간 후 자동 삭제
|
||||
- 파일 다운로드 시 토큰 검증
|
||||
|
||||
### 10.3 접근 권한
|
||||
|
||||
- 리포트 생성/수정/삭제 권한 체크
|
||||
- 관리자만 템플릿 생성 가능
|
||||
- 사용자별 리포트 접근 제어
|
||||
|
||||
## 11. 성능 최적화
|
||||
|
||||
### 11.1 PDF 생성 최적화
|
||||
|
||||
- 백그라운드 작업으로 처리
|
||||
- 생성된 PDF는 CDN에 캐싱
|
||||
|
||||
### 11.2 프론트엔드 최적화
|
||||
|
||||
- 컴포넌트 가상화 (많은 컴포넌트 처리)
|
||||
- 디바운싱/쓰로틀링 (드래그 앤 드롭)
|
||||
- 이미지 레이지 로딩
|
||||
|
||||
### 11.3 데이터베이스 최적화
|
||||
|
||||
- 레이아웃 데이터는 JSON 형태로 저장
|
||||
- 리포트 목록 조회 시 인덱스 활용
|
||||
- 자주 사용하는 템플릿 캐싱
|
||||
|
||||
## 12. 테스트 계획
|
||||
|
||||
### 12.1 단위 테스트
|
||||
|
||||
- API 엔드포인트 테스트
|
||||
- 쿼리 파싱 테스트
|
||||
- PDF 생성 테스트
|
||||
|
||||
### 12.2 통합 테스트
|
||||
|
||||
- 리포트 생성 → 쿼리 실행 → PDF 생성 전체 플로우
|
||||
- 템플릿 적용 → 데이터 바인딩 테스트
|
||||
|
||||
### 12.3 UI 테스트
|
||||
|
||||
- 드래그 앤 드롭 동작 테스트
|
||||
- 컴포넌트 속성 변경 테스트
|
||||
|
||||
## 13. 향후 확장 계획
|
||||
|
||||
### 13.1 고급 기능
|
||||
|
||||
- 차트/그래프 컴포넌트
|
||||
- 조건부 서식 (색상 변경 등)
|
||||
- 그룹핑 및 집계 함수
|
||||
- 마스터-디테일 관계 자동 설정
|
||||
|
||||
### 13.2 협업 기능
|
||||
|
||||
- 리포트 공유
|
||||
- 버전 관리
|
||||
- 댓글 기능
|
||||
|
||||
### 13.3 자동화
|
||||
|
||||
- 스케줄링 (정기적 리포트 생성)
|
||||
- 이메일 자동 발송
|
||||
- 알림 설정
|
||||
|
||||
## 14. 참고 자료
|
||||
|
||||
### 14.1 유사 솔루션
|
||||
|
||||
- Crystal Reports
|
||||
- JasperReports
|
||||
- BIRT (Business Intelligence and Reporting Tools)
|
||||
- FastReport
|
||||
|
||||
### 14.2 라이브러리
|
||||
|
||||
- [react-grid-layout](https://github.com/react-grid-layout/react-grid-layout)
|
||||
- [react-dnd](https://react-dnd.github.io/react-dnd/)
|
||||
- [puppeteer](https://pptr.dev/)
|
||||
- [docx](https://docx.js.org/)
|
||||
@@ -0,0 +1,371 @@
|
||||
# 리포트 문서 번호 자동 채번 시스템 설계
|
||||
|
||||
## 1. 개요
|
||||
|
||||
리포트 관리 시스템에 체계적인 문서 번호 자동 채번 시스템을 추가하여, 기업 환경에서 문서를 추적하고 관리할 수 있도록 합니다.
|
||||
|
||||
## 2. 문서 번호 형식
|
||||
|
||||
### 2.1 기본 형식
|
||||
|
||||
```
|
||||
{PREFIX}-{YEAR}-{SEQUENCE}
|
||||
예: RPT-2024-0001, INV-2024-0123
|
||||
```
|
||||
|
||||
### 2.2 확장 형식 (선택 사항)
|
||||
|
||||
```
|
||||
{PREFIX}-{DEPT_CODE}-{YEAR}-{SEQUENCE}
|
||||
예: RPT-SALES-2024-0001, INV-FIN-2024-0123
|
||||
```
|
||||
|
||||
### 2.3 구성 요소
|
||||
|
||||
- **PREFIX**: 문서 유형 접두사 (예: RPT, INV, PO, QT)
|
||||
- **DEPT_CODE**: 부서 코드 (선택 사항)
|
||||
- **YEAR**: 연도 (4자리)
|
||||
- **SEQUENCE**: 순차 번호 (0001부터 시작, 자릿수 설정 가능)
|
||||
|
||||
## 3. 데이터베이스 스키마
|
||||
|
||||
### 3.1 문서 번호 규칙 테이블
|
||||
|
||||
```sql
|
||||
-- 문서 번호 규칙 정의
|
||||
CREATE TABLE report_number_rules (
|
||||
rule_id SERIAL PRIMARY KEY,
|
||||
rule_name VARCHAR(100) NOT NULL, -- 규칙 이름
|
||||
prefix VARCHAR(20) NOT NULL, -- 접두사 (RPT, INV 등)
|
||||
use_dept_code BOOLEAN DEFAULT FALSE, -- 부서 코드 사용 여부
|
||||
use_year BOOLEAN DEFAULT TRUE, -- 연도 사용 여부
|
||||
sequence_length INTEGER DEFAULT 4, -- 순차 번호 자릿수
|
||||
reset_period VARCHAR(20) DEFAULT 'YEARLY', -- 초기화 주기 (YEARLY, MONTHLY, NEVER)
|
||||
separator VARCHAR(5) DEFAULT '-', -- 구분자
|
||||
description TEXT, -- 설명
|
||||
is_active BOOLEAN DEFAULT TRUE, -- 활성화 여부
|
||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||
created_by VARCHAR(50),
|
||||
updated_by VARCHAR(50)
|
||||
);
|
||||
|
||||
-- 기본 데이터 삽입
|
||||
INSERT INTO report_number_rules (rule_name, prefix, description)
|
||||
VALUES ('리포트 문서 번호', 'RPT', '일반 리포트 문서 번호 규칙');
|
||||
```
|
||||
|
||||
### 3.2 문서 번호 시퀀스 테이블
|
||||
|
||||
```sql
|
||||
-- 문서 번호 시퀀스 관리 (연도/부서별 현재 번호)
|
||||
CREATE TABLE report_number_sequences (
|
||||
sequence_id SERIAL PRIMARY KEY,
|
||||
rule_id INTEGER NOT NULL REFERENCES report_number_rules(rule_id),
|
||||
dept_code VARCHAR(20), -- 부서 코드 (NULL 가능)
|
||||
year INTEGER NOT NULL, -- 연도
|
||||
current_number INTEGER DEFAULT 0, -- 현재 번호
|
||||
last_generated_at TIMESTAMP, -- 마지막 생성 시각
|
||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||
UNIQUE (rule_id, dept_code, year) -- 규칙+부서+연도 조합 유니크
|
||||
);
|
||||
```
|
||||
|
||||
### 3.3 리포트 테이블 수정
|
||||
|
||||
```sql
|
||||
-- 기존 report_layout 테이블에 컬럼 추가
|
||||
ALTER TABLE report_layout
|
||||
ADD COLUMN document_number VARCHAR(100), -- 생성된 문서 번호
|
||||
ADD COLUMN number_rule_id INTEGER REFERENCES report_number_rules(rule_id), -- 사용된 규칙
|
||||
ADD COLUMN number_generated_at TIMESTAMP; -- 번호 생성 시각
|
||||
|
||||
-- 문서 번호 인덱스 (검색 성능)
|
||||
CREATE INDEX idx_report_layout_document_number ON report_layout(document_number);
|
||||
```
|
||||
|
||||
### 3.4 문서 번호 이력 테이블 (감사용)
|
||||
|
||||
```sql
|
||||
-- 문서 번호 생성 이력
|
||||
CREATE TABLE report_number_history (
|
||||
history_id SERIAL PRIMARY KEY,
|
||||
report_id INTEGER REFERENCES report_layout(id),
|
||||
document_number VARCHAR(100) NOT NULL,
|
||||
rule_id INTEGER REFERENCES report_number_rules(rule_id),
|
||||
generated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||
generated_by VARCHAR(50),
|
||||
is_voided BOOLEAN DEFAULT FALSE, -- 번호 무효화 여부
|
||||
void_reason TEXT, -- 무효화 사유
|
||||
voided_at TIMESTAMP,
|
||||
voided_by VARCHAR(50)
|
||||
);
|
||||
|
||||
-- 문서 번호로 검색 인덱스
|
||||
CREATE INDEX idx_report_number_history_doc_number ON report_number_history(document_number);
|
||||
```
|
||||
|
||||
## 4. 백엔드 구현
|
||||
|
||||
### 4.1 서비스 레이어 (`reportNumberService.ts`)
|
||||
|
||||
```typescript
|
||||
export class ReportNumberService {
|
||||
// 문서 번호 생성
|
||||
static async generateNumber(
|
||||
ruleId: number,
|
||||
deptCode?: string
|
||||
): Promise<string>;
|
||||
|
||||
// 문서 번호 형식 검증
|
||||
static async validateNumber(documentNumber: string): Promise<boolean>;
|
||||
|
||||
// 문서 번호 중복 체크
|
||||
static async isDuplicate(documentNumber: string): Promise<boolean>;
|
||||
|
||||
// 문서 번호 무효화
|
||||
static async voidNumber(
|
||||
documentNumber: string,
|
||||
reason: string,
|
||||
userId: string
|
||||
): Promise<void>;
|
||||
|
||||
// 특정 규칙의 다음 번호 미리보기
|
||||
static async previewNextNumber(
|
||||
ruleId: number,
|
||||
deptCode?: string
|
||||
): Promise<string>;
|
||||
}
|
||||
```
|
||||
|
||||
### 4.2 컨트롤러 (`reportNumberController.ts`)
|
||||
|
||||
```typescript
|
||||
// GET /api/report/number-rules - 규칙 목록
|
||||
// GET /api/report/number-rules/:id - 규칙 상세
|
||||
// POST /api/report/number-rules - 규칙 생성
|
||||
// PUT /api/report/number-rules/:id - 규칙 수정
|
||||
// DELETE /api/report/number-rules/:id - 규칙 삭제
|
||||
|
||||
// POST /api/report/:reportId/generate-number - 문서 번호 생성
|
||||
// POST /api/report/number/preview - 다음 번호 미리보기
|
||||
// POST /api/report/number/void - 문서 번호 무효화
|
||||
// GET /api/report/number/history/:documentNumber - 문서 번호 이력
|
||||
```
|
||||
|
||||
### 4.3 핵심 로직 (번호 생성)
|
||||
|
||||
```typescript
|
||||
async generateNumber(ruleId: number, deptCode?: string): Promise<string> {
|
||||
// 1. 트랜잭션 시작
|
||||
const client = await pool.connect();
|
||||
try {
|
||||
await client.query('BEGIN');
|
||||
|
||||
// 2. 규칙 조회
|
||||
const rule = await this.getRule(ruleId);
|
||||
|
||||
// 3. 현재 연도/월
|
||||
const now = new Date();
|
||||
const year = now.getFullYear();
|
||||
|
||||
// 4. 시퀀스 조회 또는 생성 (FOR UPDATE로 락)
|
||||
let sequence = await this.getSequence(ruleId, deptCode, year, true);
|
||||
|
||||
if (!sequence) {
|
||||
sequence = await this.createSequence(ruleId, deptCode, year);
|
||||
}
|
||||
|
||||
// 5. 다음 번호 계산
|
||||
const nextNumber = sequence.current_number + 1;
|
||||
|
||||
// 6. 문서 번호 생성
|
||||
const documentNumber = this.formatNumber(rule, deptCode, year, nextNumber);
|
||||
|
||||
// 7. 시퀀스 업데이트
|
||||
await this.updateSequence(sequence.sequence_id, nextNumber);
|
||||
|
||||
// 8. 커밋
|
||||
await client.query('COMMIT');
|
||||
|
||||
return documentNumber;
|
||||
|
||||
} catch (error) {
|
||||
await client.query('ROLLBACK');
|
||||
throw error;
|
||||
} finally {
|
||||
client.release();
|
||||
}
|
||||
}
|
||||
|
||||
// 번호 포맷팅
|
||||
private formatNumber(
|
||||
rule: NumberRule,
|
||||
deptCode: string | undefined,
|
||||
year: number,
|
||||
sequence: number
|
||||
): string {
|
||||
const parts = [rule.prefix];
|
||||
|
||||
if (rule.use_dept_code && deptCode) {
|
||||
parts.push(deptCode);
|
||||
}
|
||||
|
||||
if (rule.use_year) {
|
||||
parts.push(year.toString());
|
||||
}
|
||||
|
||||
// 0 패딩
|
||||
const paddedSequence = sequence.toString().padStart(rule.sequence_length, '0');
|
||||
parts.push(paddedSequence);
|
||||
|
||||
return parts.join(rule.separator);
|
||||
}
|
||||
```
|
||||
|
||||
## 5. 프론트엔드 구현
|
||||
|
||||
### 5.1 문서 번호 규칙 관리 화면
|
||||
|
||||
**경로**: `/admin/report/number-rules`
|
||||
|
||||
**기능**:
|
||||
|
||||
- 규칙 목록 조회
|
||||
- 규칙 생성/수정/삭제
|
||||
- 규칙 미리보기 (다음 번호 확인)
|
||||
- 규칙 활성화/비활성화
|
||||
|
||||
### 5.2 리포트 목록 화면 수정
|
||||
|
||||
**변경 사항**:
|
||||
|
||||
- 문서 번호 컬럼 추가
|
||||
- 문서 번호로 검색 기능
|
||||
|
||||
### 5.3 리포트 저장 시 번호 생성
|
||||
|
||||
**위치**: `ReportDesignerContext.tsx` - `saveLayout` 함수
|
||||
|
||||
```typescript
|
||||
const saveLayout = async () => {
|
||||
// 1. 새 리포트인 경우 문서 번호 자동 생성
|
||||
if (reportId === "new" && !documentNumber) {
|
||||
const response = await fetch(`/api/report/generate-number`, {
|
||||
method: "POST",
|
||||
body: JSON.stringify({ ruleId: 1 }), // 기본 규칙
|
||||
});
|
||||
const { documentNumber: newNumber } = await response.json();
|
||||
setDocumentNumber(newNumber);
|
||||
}
|
||||
|
||||
// 2. 리포트 저장 (문서 번호 포함)
|
||||
await saveReport({ ...reportData, documentNumber });
|
||||
};
|
||||
```
|
||||
|
||||
### 5.4 문서 번호 표시 UI
|
||||
|
||||
**위치**: 디자이너 헤더
|
||||
|
||||
```tsx
|
||||
<div className="document-number">
|
||||
<Label>문서 번호</Label>
|
||||
<Badge variant="outline">{documentNumber || "저장 시 자동 생성"}</Badge>
|
||||
</div>
|
||||
```
|
||||
|
||||
## 6. 동시성 제어
|
||||
|
||||
### 6.1 문제점
|
||||
|
||||
여러 사용자가 동시에 문서 번호를 생성할 때 중복 발생 가능성
|
||||
|
||||
### 6.2 해결 방법
|
||||
|
||||
**PostgreSQL의 `FOR UPDATE` 사용**
|
||||
|
||||
```sql
|
||||
-- 시퀀스 조회 시 행 락 걸기
|
||||
SELECT * FROM report_number_sequences
|
||||
WHERE rule_id = $1 AND year = $2
|
||||
FOR UPDATE;
|
||||
```
|
||||
|
||||
**트랜잭션 격리 수준**
|
||||
|
||||
```typescript
|
||||
await client.query("SET TRANSACTION ISOLATION LEVEL SERIALIZABLE");
|
||||
```
|
||||
|
||||
## 7. 테스트 시나리오
|
||||
|
||||
### 7.1 기본 기능 테스트
|
||||
|
||||
- [ ] 규칙 생성 → 문서 번호 생성 → 포맷 확인
|
||||
- [ ] 연속 생성 시 순차 번호 증가 확인
|
||||
- [ ] 연도 변경 시 시퀀스 초기화 확인
|
||||
|
||||
### 7.2 동시성 테스트
|
||||
|
||||
- [ ] 10명이 동시에 문서 번호 생성 → 중복 없음 확인
|
||||
- [ ] 동일 규칙으로 100개 생성 → 순차 번호 연속성 확인
|
||||
|
||||
### 7.3 에러 처리
|
||||
|
||||
- [ ] 존재하지 않는 규칙 ID → 에러 메시지
|
||||
- [ ] 비활성화된 규칙 사용 → 경고 메시지
|
||||
- [ ] 시퀀스 최대값 초과 → 관리자 알림
|
||||
|
||||
## 8. 구현 순서
|
||||
|
||||
### Phase 1: 데이터베이스 (1단계)
|
||||
|
||||
1. 테이블 생성 SQL 작성
|
||||
2. 마이그레이션 실행
|
||||
3. 기본 데이터 삽입
|
||||
|
||||
### Phase 2: 백엔드 (2단계)
|
||||
|
||||
1. `reportNumberService.ts` 구현
|
||||
2. `reportNumberController.ts` 구현
|
||||
3. 라우트 추가
|
||||
4. 단위 테스트
|
||||
|
||||
### Phase 3: 프론트엔드 (3단계)
|
||||
|
||||
1. 문서 번호 규칙 관리 화면
|
||||
2. 리포트 목록 화면 수정
|
||||
3. 디자이너 문서 번호 표시
|
||||
4. 저장 시 자동 생성 연동
|
||||
|
||||
### Phase 4: 테스트 및 최적화 (4단계)
|
||||
|
||||
1. 통합 테스트
|
||||
2. 동시성 테스트
|
||||
3. 성능 최적화
|
||||
4. 사용자 가이드 작성
|
||||
|
||||
## 9. 향후 확장
|
||||
|
||||
### 9.1 고급 기능
|
||||
|
||||
- 문서 번호 예약 기능
|
||||
- 번호 건너뛰기 허용 설정
|
||||
- 커스텀 포맷 지원 (정규식 기반)
|
||||
- 연/월/일 단위 초기화 선택
|
||||
|
||||
### 9.2 통합
|
||||
|
||||
- 승인 완료 시점에 최종 번호 확정
|
||||
- 외부 시스템과 번호 동기화
|
||||
- 바코드/QR 코드 자동 생성
|
||||
|
||||
## 10. 보안 고려사항
|
||||
|
||||
- 문서 번호 생성 권한 제한
|
||||
- 번호 무효화 감사 로그
|
||||
- 시퀀스 직접 수정 방지
|
||||
- API 호출 횟수 제한 (Rate Limiting)
|
||||
|
||||
@@ -0,0 +1,388 @@
|
||||
# 리포트 페이지 관리 시스템 설계
|
||||
|
||||
## 1. 개요
|
||||
|
||||
리포트 디자이너에 다중 페이지 관리 기능을 추가하여 여러 페이지에 걸친 복잡한 문서를 작성할 수 있도록 합니다.
|
||||
|
||||
## 2. 주요 기능
|
||||
|
||||
### 2.1 페이지 관리
|
||||
|
||||
- 페이지 추가/삭제
|
||||
- 페이지 복사
|
||||
- 페이지 순서 변경 (드래그 앤 드롭)
|
||||
- 페이지 이름 지정
|
||||
|
||||
### 2.2 페이지 네비게이션
|
||||
|
||||
- 좌측 페이지 썸네일 패널
|
||||
- 페이지 간 전환 (클릭)
|
||||
- 이전/다음 페이지 이동
|
||||
- 페이지 번호 표시
|
||||
|
||||
### 2.3 페이지별 설정
|
||||
|
||||
- 페이지 크기 (A4, A3, Letter, 사용자 정의)
|
||||
- 페이지 방향 (세로/가로)
|
||||
- 여백 설정
|
||||
- 배경색
|
||||
|
||||
### 2.4 컴포넌트 관리
|
||||
|
||||
- 컴포넌트는 특정 페이지에 속함
|
||||
- 페이지 간 컴포넌트 복사/이동
|
||||
- 현재 페이지의 컴포넌트만 표시
|
||||
|
||||
## 3. 데이터베이스 스키마
|
||||
|
||||
### 3.1 기존 구조 활용 (변경 없음)
|
||||
|
||||
**report_layout 테이블의 layout_config (JSONB) 활용**
|
||||
|
||||
기존:
|
||||
|
||||
```json
|
||||
{
|
||||
"width": 210,
|
||||
"height": 297,
|
||||
"orientation": "portrait",
|
||||
"components": [...]
|
||||
}
|
||||
```
|
||||
|
||||
변경 후:
|
||||
|
||||
```json
|
||||
{
|
||||
"pages": [
|
||||
{
|
||||
"page_id": "page-uuid-1",
|
||||
"page_name": "표지",
|
||||
"page_order": 0,
|
||||
"width": 210,
|
||||
"height": 297,
|
||||
"orientation": "portrait",
|
||||
"margins": {
|
||||
"top": 20,
|
||||
"bottom": 20,
|
||||
"left": 20,
|
||||
"right": 20
|
||||
},
|
||||
"background_color": "#ffffff",
|
||||
"components": [
|
||||
{
|
||||
"id": "comp-1",
|
||||
"type": "text",
|
||||
"x": 100,
|
||||
"y": 50,
|
||||
...
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"page_id": "page-uuid-2",
|
||||
"page_name": "본문",
|
||||
"page_order": 1,
|
||||
"width": 210,
|
||||
"height": 297,
|
||||
"orientation": "portrait",
|
||||
"margins": { "top": 20, "bottom": 20, "left": 20, "right": 20 },
|
||||
"background_color": "#ffffff",
|
||||
"components": [...]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### 3.2 마이그레이션 전략
|
||||
|
||||
기존 단일 페이지 리포트 자동 변환:
|
||||
|
||||
```typescript
|
||||
// 기존 구조 감지 시
|
||||
if (layoutConfig.components && !layoutConfig.pages) {
|
||||
// 자동으로 pages 구조로 변환
|
||||
layoutConfig = {
|
||||
pages: [
|
||||
{
|
||||
page_id: uuidv4(),
|
||||
page_name: "페이지 1",
|
||||
page_order: 0,
|
||||
width: layoutConfig.width || 210,
|
||||
height: layoutConfig.height || 297,
|
||||
orientation: layoutConfig.orientation || "portrait",
|
||||
margins: { top: 20, bottom: 20, left: 20, right: 20 },
|
||||
background_color: "#ffffff",
|
||||
components: layoutConfig.components,
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
## 4. 프론트엔드 구조
|
||||
|
||||
### 4.1 타입 정의 (types/report.ts)
|
||||
|
||||
```typescript
|
||||
export interface ReportPage {
|
||||
page_id: string;
|
||||
report_id: string;
|
||||
page_order: number;
|
||||
page_name: string;
|
||||
|
||||
// 페이지 설정
|
||||
width: number;
|
||||
height: number;
|
||||
orientation: 'portrait' | 'landscape';
|
||||
|
||||
// 여백
|
||||
margin_top: number;
|
||||
margin_bottom: number;
|
||||
margin_left: number;
|
||||
margin_right: number;
|
||||
|
||||
// 배경
|
||||
background_color: string;
|
||||
|
||||
created_at?: string;
|
||||
updated_at?: string;
|
||||
}
|
||||
|
||||
export interface ComponentConfig {
|
||||
id: string;
|
||||
// page_id 불필요 (페이지의 components 배열에 포함됨)
|
||||
type: 'text' | 'label' | 'image' | 'table' | ...;
|
||||
x: number;
|
||||
y: number;
|
||||
width: number;
|
||||
height: number;
|
||||
// ... 기타 속성
|
||||
}
|
||||
|
||||
export interface ReportLayoutConfig {
|
||||
pages: ReportPage[];
|
||||
}
|
||||
```
|
||||
|
||||
### 4.2 Context 구조 변경
|
||||
|
||||
```typescript
|
||||
interface ReportDesignerContextType {
|
||||
// 페이지 관리
|
||||
pages: ReportPage[];
|
||||
currentPageId: string | null;
|
||||
currentPage: ReportPage | null;
|
||||
|
||||
addPage: () => void;
|
||||
deletePage: (pageId: string) => void;
|
||||
duplicatePage: (pageId: string) => void;
|
||||
reorderPages: (sourceIndex: number, targetIndex: number) => void;
|
||||
selectPage: (pageId: string) => void;
|
||||
updatePage: (pageId: string, updates: Partial<ReportPage>) => void;
|
||||
|
||||
// 컴포넌트 (현재 페이지만)
|
||||
currentPageComponents: ComponentConfig[];
|
||||
|
||||
// ... 기존 기능들
|
||||
}
|
||||
```
|
||||
|
||||
### 4.3 UI 구조
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────┐
|
||||
│ ReportDesignerToolbar (저장, 미리보기, 페이지 추가 등) │
|
||||
├──────────┬────────────────────────────────────┬─────────────┤
|
||||
│ │ │ │
|
||||
│ PageList │ ReportDesignerCanvas │ Right │
|
||||
│ (좌측) │ (현재 페이지만 표시) │ Panel │
|
||||
│ │ │ (속성) │
|
||||
│ - Page 1 │ ┌──────────────────────────┐ │ │
|
||||
│ - Page 2 │ │ │ │ │
|
||||
│ * Page 3 │ │ [컴포넌트들] │ │ │
|
||||
│ (현재) │ │ │ │ │
|
||||
│ │ └──────────────────────────┘ │ │
|
||||
│ [+ 추가] │ │ │
|
||||
│ │ 이전 | 다음 (페이지 네비게이션) │ │
|
||||
└──────────┴────────────────────────────────────┴─────────────┘
|
||||
```
|
||||
|
||||
## 5. 컴포넌트 구조
|
||||
|
||||
### 5.1 새 컴포넌트
|
||||
|
||||
#### PageListPanel.tsx
|
||||
|
||||
```typescript
|
||||
- 좌측 페이지 목록 패널
|
||||
- 페이지 썸네일 표시
|
||||
- 드래그 앤 드롭으로 순서 변경
|
||||
- 페이지 추가/삭제/복사 버튼
|
||||
- 현재 페이지 하이라이트
|
||||
```
|
||||
|
||||
#### PageNavigator.tsx
|
||||
|
||||
```typescript
|
||||
- 캔버스 하단의 페이지 네비게이션
|
||||
- 이전/다음 버튼
|
||||
- 현재 페이지 번호 표시
|
||||
- 페이지 점프 (1/5 형식)
|
||||
```
|
||||
|
||||
#### PageSettingsPanel.tsx
|
||||
|
||||
```typescript
|
||||
- 우측 패널 내 페이지 설정 섹션
|
||||
- 페이지 크기, 방향
|
||||
- 여백 설정
|
||||
- 배경색
|
||||
```
|
||||
|
||||
### 5.2 수정할 컴포넌트
|
||||
|
||||
#### ReportDesignerContext.tsx
|
||||
|
||||
- pages 상태 추가
|
||||
- currentPageId 상태 추가
|
||||
- 페이지 관리 함수들 추가
|
||||
- components를 currentPageComponents로 필터링
|
||||
|
||||
#### ReportDesignerCanvas.tsx
|
||||
|
||||
- currentPageComponents만 렌더링
|
||||
- 캔버스 크기를 currentPage 기준으로 설정
|
||||
- 컴포넌트 추가 시 page_id 포함
|
||||
|
||||
#### ReportDesignerToolbar.tsx
|
||||
|
||||
- "페이지 추가" 버튼 추가
|
||||
- 저장 시 pages도 함께 저장
|
||||
|
||||
#### ReportPreviewModal.tsx
|
||||
|
||||
- 모든 페이지 순서대로 미리보기
|
||||
- 페이지 구분선 표시
|
||||
- PDF 저장 시 모든 페이지 포함
|
||||
|
||||
## 6. API 엔드포인트
|
||||
|
||||
### 6.1 페이지 관리
|
||||
|
||||
```typescript
|
||||
// 페이지 목록 조회
|
||||
GET /api/report/:reportId/pages
|
||||
Response: { pages: ReportPage[] }
|
||||
|
||||
// 페이지 생성
|
||||
POST /api/report/:reportId/pages
|
||||
Body: { page_name, width, height, orientation, margins }
|
||||
Response: { page: ReportPage }
|
||||
|
||||
// 페이지 수정
|
||||
PUT /api/report/pages/:pageId
|
||||
Body: Partial<ReportPage>
|
||||
Response: { page: ReportPage }
|
||||
|
||||
// 페이지 삭제
|
||||
DELETE /api/report/pages/:pageId
|
||||
Response: { success: boolean }
|
||||
|
||||
// 페이지 순서 변경
|
||||
PUT /api/report/:reportId/pages/reorder
|
||||
Body: { pageOrders: Array<{ page_id, page_order }> }
|
||||
Response: { success: boolean }
|
||||
|
||||
// 페이지 복사
|
||||
POST /api/report/pages/:pageId/duplicate
|
||||
Response: { page: ReportPage }
|
||||
```
|
||||
|
||||
### 6.2 레이아웃 (기존 수정)
|
||||
|
||||
```typescript
|
||||
// 레이아웃 저장 (페이지별)
|
||||
PUT /api/report/:reportId/layout
|
||||
Body: {
|
||||
pages: ReportPage[],
|
||||
components: ComponentConfig[] // page_id 포함
|
||||
}
|
||||
```
|
||||
|
||||
## 7. 구현 단계
|
||||
|
||||
### Phase 1: DB 및 백엔드 (0.5일)
|
||||
|
||||
1. ✅ DB 스키마 생성
|
||||
2. ✅ API 엔드포인트 구현
|
||||
3. ✅ 기존 리포트 마이그레이션 (단일 페이지 생성)
|
||||
|
||||
### Phase 2: 타입 및 Context (0.5일)
|
||||
|
||||
1. ✅ 타입 정의 업데이트
|
||||
2. ✅ Context에 페이지 상태/함수 추가
|
||||
3. ✅ API 연동
|
||||
|
||||
### Phase 3: UI 컴포넌트 (1일)
|
||||
|
||||
1. ✅ PageListPanel 구현
|
||||
2. ✅ PageNavigator 구현
|
||||
3. ✅ PageSettingsPanel 구현
|
||||
|
||||
### Phase 4: 통합 및 수정 (1일)
|
||||
|
||||
1. ✅ Canvas에서 현재 페이지만 표시
|
||||
2. ✅ 컴포넌트 추가/수정 시 page_id 처리
|
||||
3. ✅ 미리보기에서 모든 페이지 표시
|
||||
4. ✅ PDF/WORD 저장에서 모든 페이지 처리
|
||||
|
||||
### Phase 5: 테스트 및 최적화 (0.5일)
|
||||
|
||||
1. ✅ 페이지 전환 성능 확인
|
||||
2. ✅ 썸네일 렌더링 최적화
|
||||
3. ✅ 버그 수정
|
||||
|
||||
**총 예상 기간: 3-4일**
|
||||
|
||||
## 8. 주의사항
|
||||
|
||||
### 8.1 성능 최적화
|
||||
|
||||
- 페이지 썸네일은 저해상도로 렌더링
|
||||
- 현재 페이지 컴포넌트만 DOM에 유지
|
||||
- 페이지 전환 시 애니메이션 최소화
|
||||
|
||||
### 8.2 호환성
|
||||
|
||||
- 기존 리포트는 자동으로 단일 페이지로 마이그레이션
|
||||
- 템플릿도 페이지 구조 포함
|
||||
|
||||
### 8.3 사용자 경험
|
||||
|
||||
- 페이지 삭제 시 확인 다이얼로그
|
||||
- 컴포넌트가 있는 페이지 삭제 시 경고
|
||||
- 페이지 순서 변경 시 즉시 반영
|
||||
|
||||
## 9. 추후 확장 기능
|
||||
|
||||
### 9.1 페이지 템플릿
|
||||
|
||||
- 자주 사용하는 페이지 레이아웃 저장
|
||||
- 페이지 추가 시 템플릿 선택
|
||||
|
||||
### 9.2 마스터 페이지
|
||||
|
||||
- 모든 페이지에 공통으로 적용되는 헤더/푸터
|
||||
- 페이지 번호 자동 삽입
|
||||
|
||||
### 9.3 페이지 연결
|
||||
|
||||
- 테이블 데이터가 여러 페이지에 자동 분할
|
||||
- 페이지 오버플로우 처리
|
||||
|
||||
## 10. 참고 자료
|
||||
|
||||
- 오즈리포트 메뉴얼
|
||||
- Crystal Reports 페이지 관리
|
||||
- Adobe InDesign 페이지 시스템
|
||||
@@ -0,0 +1,773 @@
|
||||
# 테이블 변경 이력 로그 시스템 구현 계획서
|
||||
|
||||
## 1. 개요
|
||||
|
||||
테이블 생성 시 해당 테이블의 변경 이력을 자동으로 기록하는 로그 테이블 생성 기능을 추가합니다.
|
||||
사용자가 테이블을 생성할 때 로그 테이블 생성 여부를 선택할 수 있으며, 선택 시 자동으로 로그 테이블과 트리거가 생성됩니다.
|
||||
|
||||
## 2. 핵심 기능
|
||||
|
||||
### 2.1 로그 테이블 생성 옵션
|
||||
|
||||
- 테이블 생성 폼에 "변경 이력 로그 테이블 생성" 체크박스 추가
|
||||
- 체크 시 `{원본테이블명}_log` 형식의 로그 테이블 자동 생성
|
||||
|
||||
### 2.2 로그 테이블 스키마 구조
|
||||
|
||||
```sql
|
||||
CREATE TABLE {table_name}_log (
|
||||
log_id SERIAL PRIMARY KEY, -- 로그 고유 ID
|
||||
operation_type VARCHAR(10) NOT NULL, -- INSERT, UPDATE, DELETE
|
||||
original_id {원본PK타입}, -- 원본 테이블의 PK 값
|
||||
changed_column VARCHAR(100), -- 변경된 컬럼명 (UPDATE 시)
|
||||
old_value TEXT, -- 변경 전 값
|
||||
new_value TEXT, -- 변경 후 값
|
||||
changed_by VARCHAR(50), -- 변경한 사용자 ID
|
||||
changed_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, -- 변경 시각
|
||||
ip_address VARCHAR(50), -- 변경 요청 IP
|
||||
user_agent TEXT, -- 변경 요청 User-Agent
|
||||
full_row_before JSONB, -- 변경 전 전체 행 (JSON)
|
||||
full_row_after JSONB -- 변경 후 전체 행 (JSON)
|
||||
);
|
||||
|
||||
CREATE INDEX idx_{table_name}_log_original_id ON {table_name}_log(original_id);
|
||||
CREATE INDEX idx_{table_name}_log_changed_at ON {table_name}_log(changed_at);
|
||||
CREATE INDEX idx_{table_name}_log_operation ON {table_name}_log(operation_type);
|
||||
```
|
||||
|
||||
### 2.3 트리거 함수 생성
|
||||
|
||||
```sql
|
||||
CREATE OR REPLACE FUNCTION {table_name}_log_trigger_func()
|
||||
RETURNS TRIGGER AS $$
|
||||
DECLARE
|
||||
v_column_name TEXT;
|
||||
v_old_value TEXT;
|
||||
v_new_value TEXT;
|
||||
v_user_id VARCHAR(50);
|
||||
v_ip_address VARCHAR(50);
|
||||
BEGIN
|
||||
-- 세션 변수에서 사용자 정보 가져오기
|
||||
v_user_id := current_setting('app.user_id', TRUE);
|
||||
v_ip_address := current_setting('app.ip_address', TRUE);
|
||||
|
||||
IF (TG_OP = 'INSERT') THEN
|
||||
INSERT INTO {table_name}_log (
|
||||
operation_type, original_id, changed_by, ip_address,
|
||||
full_row_after
|
||||
) VALUES (
|
||||
'INSERT', NEW.{pk_column}, v_user_id, v_ip_address,
|
||||
row_to_json(NEW)::jsonb
|
||||
);
|
||||
RETURN NEW;
|
||||
|
||||
ELSIF (TG_OP = 'UPDATE') THEN
|
||||
-- 각 컬럼별로 변경사항 기록
|
||||
FOR v_column_name IN
|
||||
SELECT column_name
|
||||
FROM information_schema.columns
|
||||
WHERE table_name = TG_TABLE_NAME
|
||||
LOOP
|
||||
EXECUTE format('SELECT ($1).%I::TEXT, ($2).%I::TEXT',
|
||||
v_column_name, v_column_name)
|
||||
INTO v_old_value, v_new_value
|
||||
USING OLD, NEW;
|
||||
|
||||
IF v_old_value IS DISTINCT FROM v_new_value THEN
|
||||
INSERT INTO {table_name}_log (
|
||||
operation_type, original_id, changed_column,
|
||||
old_value, new_value, changed_by, ip_address,
|
||||
full_row_before, full_row_after
|
||||
) VALUES (
|
||||
'UPDATE', NEW.{pk_column}, v_column_name,
|
||||
v_old_value, v_new_value, v_user_id, v_ip_address,
|
||||
row_to_json(OLD)::jsonb, row_to_json(NEW)::jsonb
|
||||
);
|
||||
END IF;
|
||||
END LOOP;
|
||||
RETURN NEW;
|
||||
|
||||
ELSIF (TG_OP = 'DELETE') THEN
|
||||
INSERT INTO {table_name}_log (
|
||||
operation_type, original_id, changed_by, ip_address,
|
||||
full_row_before
|
||||
) VALUES (
|
||||
'DELETE', OLD.{pk_column}, v_user_id, v_ip_address,
|
||||
row_to_json(OLD)::jsonb
|
||||
);
|
||||
RETURN OLD;
|
||||
END IF;
|
||||
|
||||
RETURN NULL;
|
||||
END;
|
||||
$$ LANGUAGE plpgsql;
|
||||
```
|
||||
|
||||
### 2.4 트리거 생성
|
||||
|
||||
```sql
|
||||
CREATE TRIGGER {table_name}_audit_trigger
|
||||
AFTER INSERT OR UPDATE OR DELETE ON {table_name}
|
||||
FOR EACH ROW EXECUTE FUNCTION {table_name}_log_trigger_func();
|
||||
```
|
||||
|
||||
## 3. 데이터베이스 스키마 변경
|
||||
|
||||
### 3.1 table_type_mng 테이블 수정
|
||||
|
||||
```sql
|
||||
ALTER TABLE table_type_mng
|
||||
ADD COLUMN use_log_table VARCHAR(1) DEFAULT 'N';
|
||||
|
||||
COMMENT ON COLUMN table_type_mng.use_log_table IS '변경 이력 로그 테이블 사용 여부 (Y/N)';
|
||||
```
|
||||
|
||||
### 3.2 새로운 관리 테이블 추가
|
||||
|
||||
```sql
|
||||
CREATE TABLE table_log_config (
|
||||
config_id SERIAL PRIMARY KEY,
|
||||
original_table_name VARCHAR(100) NOT NULL,
|
||||
log_table_name VARCHAR(100) NOT NULL,
|
||||
trigger_name VARCHAR(100) NOT NULL,
|
||||
trigger_function_name VARCHAR(100) NOT NULL,
|
||||
is_active VARCHAR(1) DEFAULT 'Y',
|
||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||
created_by VARCHAR(50),
|
||||
UNIQUE(original_table_name)
|
||||
);
|
||||
|
||||
COMMENT ON TABLE table_log_config IS '테이블 로그 설정 관리';
|
||||
COMMENT ON COLUMN table_log_config.original_table_name IS '원본 테이블명';
|
||||
COMMENT ON COLUMN table_log_config.log_table_name IS '로그 테이블명';
|
||||
COMMENT ON COLUMN table_log_config.trigger_name IS '트리거명';
|
||||
COMMENT ON COLUMN table_log_config.trigger_function_name IS '트리거 함수명';
|
||||
COMMENT ON COLUMN table_log_config.is_active IS '활성 상태 (Y/N)';
|
||||
```
|
||||
|
||||
## 4. 백엔드 구현
|
||||
|
||||
### 4.1 Service Layer 수정
|
||||
|
||||
**파일**: `backend-node/src/services/admin/table-type-mng.service.ts`
|
||||
|
||||
#### 4.1.1 로그 테이블 생성 로직
|
||||
|
||||
```typescript
|
||||
/**
|
||||
* 로그 테이블 생성
|
||||
*/
|
||||
private async createLogTable(
|
||||
tableName: string,
|
||||
columns: any[],
|
||||
connectionId?: number,
|
||||
userId?: string
|
||||
): Promise<void> {
|
||||
const logTableName = `${tableName}_log`;
|
||||
const triggerFuncName = `${tableName}_log_trigger_func`;
|
||||
const triggerName = `${tableName}_audit_trigger`;
|
||||
|
||||
// PK 컬럼 찾기
|
||||
const pkColumn = columns.find(col => col.isPrimaryKey);
|
||||
if (!pkColumn) {
|
||||
throw new Error('PK 컬럼이 없으면 로그 테이블을 생성할 수 없습니다.');
|
||||
}
|
||||
|
||||
// 로그 테이블 DDL 생성
|
||||
const logTableDDL = this.generateLogTableDDL(
|
||||
logTableName,
|
||||
pkColumn.COLUMN_NAME,
|
||||
pkColumn.DATA_TYPE
|
||||
);
|
||||
|
||||
// 트리거 함수 DDL 생성
|
||||
const triggerFuncDDL = this.generateTriggerFunctionDDL(
|
||||
triggerFuncName,
|
||||
logTableName,
|
||||
tableName,
|
||||
pkColumn.COLUMN_NAME
|
||||
);
|
||||
|
||||
// 트리거 DDL 생성
|
||||
const triggerDDL = this.generateTriggerDDL(
|
||||
triggerName,
|
||||
tableName,
|
||||
triggerFuncName
|
||||
);
|
||||
|
||||
try {
|
||||
// 1. 로그 테이블 생성
|
||||
await this.executeDDL(logTableDDL, connectionId);
|
||||
|
||||
// 2. 트리거 함수 생성
|
||||
await this.executeDDL(triggerFuncDDL, connectionId);
|
||||
|
||||
// 3. 트리거 생성
|
||||
await this.executeDDL(triggerDDL, connectionId);
|
||||
|
||||
// 4. 로그 설정 저장
|
||||
await this.saveLogConfig({
|
||||
originalTableName: tableName,
|
||||
logTableName,
|
||||
triggerName,
|
||||
triggerFunctionName: triggerFuncName,
|
||||
createdBy: userId
|
||||
});
|
||||
|
||||
console.log(`로그 테이블 생성 완료: ${logTableName}`);
|
||||
} catch (error) {
|
||||
console.error('로그 테이블 생성 실패:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 로그 테이블 DDL 생성
|
||||
*/
|
||||
private generateLogTableDDL(
|
||||
logTableName: string,
|
||||
pkColumnName: string,
|
||||
pkDataType: string
|
||||
): string {
|
||||
return `
|
||||
CREATE TABLE ${logTableName} (
|
||||
log_id SERIAL PRIMARY KEY,
|
||||
operation_type VARCHAR(10) NOT NULL,
|
||||
original_id ${pkDataType},
|
||||
changed_column VARCHAR(100),
|
||||
old_value TEXT,
|
||||
new_value TEXT,
|
||||
changed_by VARCHAR(50),
|
||||
changed_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||
ip_address VARCHAR(50),
|
||||
user_agent TEXT,
|
||||
full_row_before JSONB,
|
||||
full_row_after JSONB
|
||||
);
|
||||
|
||||
CREATE INDEX idx_${logTableName}_original_id ON ${logTableName}(original_id);
|
||||
CREATE INDEX idx_${logTableName}_changed_at ON ${logTableName}(changed_at);
|
||||
CREATE INDEX idx_${logTableName}_operation ON ${logTableName}(operation_type);
|
||||
|
||||
COMMENT ON TABLE ${logTableName} IS '${logTableName.replace('_log', '')} 테이블 변경 이력';
|
||||
COMMENT ON COLUMN ${logTableName}.operation_type IS '작업 유형 (INSERT/UPDATE/DELETE)';
|
||||
COMMENT ON COLUMN ${logTableName}.original_id IS '원본 테이블 PK 값';
|
||||
COMMENT ON COLUMN ${logTableName}.changed_column IS '변경된 컬럼명';
|
||||
COMMENT ON COLUMN ${logTableName}.old_value IS '변경 전 값';
|
||||
COMMENT ON COLUMN ${logTableName}.new_value IS '변경 후 값';
|
||||
`;
|
||||
}
|
||||
|
||||
/**
|
||||
* 트리거 함수 DDL 생성
|
||||
*/
|
||||
private generateTriggerFunctionDDL(
|
||||
funcName: string,
|
||||
logTableName: string,
|
||||
originalTableName: string,
|
||||
pkColumnName: string
|
||||
): string {
|
||||
return `
|
||||
CREATE OR REPLACE FUNCTION ${funcName}()
|
||||
RETURNS TRIGGER AS $$
|
||||
DECLARE
|
||||
v_column_name TEXT;
|
||||
v_old_value TEXT;
|
||||
v_new_value TEXT;
|
||||
v_user_id VARCHAR(50);
|
||||
v_ip_address VARCHAR(50);
|
||||
BEGIN
|
||||
v_user_id := current_setting('app.user_id', TRUE);
|
||||
v_ip_address := current_setting('app.ip_address', TRUE);
|
||||
|
||||
IF (TG_OP = 'INSERT') THEN
|
||||
INSERT INTO ${logTableName} (
|
||||
operation_type, original_id, changed_by, ip_address, full_row_after
|
||||
) VALUES (
|
||||
'INSERT', NEW.${pkColumnName}, v_user_id, v_ip_address, row_to_json(NEW)::jsonb
|
||||
);
|
||||
RETURN NEW;
|
||||
|
||||
ELSIF (TG_OP = 'UPDATE') THEN
|
||||
FOR v_column_name IN
|
||||
SELECT column_name
|
||||
FROM information_schema.columns
|
||||
WHERE table_name = '${originalTableName}'
|
||||
LOOP
|
||||
EXECUTE format('SELECT ($1).%I::TEXT, ($2).%I::TEXT', v_column_name, v_column_name)
|
||||
INTO v_old_value, v_new_value
|
||||
USING OLD, NEW;
|
||||
|
||||
IF v_old_value IS DISTINCT FROM v_new_value THEN
|
||||
INSERT INTO ${logTableName} (
|
||||
operation_type, original_id, changed_column, old_value, new_value,
|
||||
changed_by, ip_address, full_row_before, full_row_after
|
||||
) VALUES (
|
||||
'UPDATE', NEW.${pkColumnName}, v_column_name, v_old_value, v_new_value,
|
||||
v_user_id, v_ip_address, row_to_json(OLD)::jsonb, row_to_json(NEW)::jsonb
|
||||
);
|
||||
END IF;
|
||||
END LOOP;
|
||||
RETURN NEW;
|
||||
|
||||
ELSIF (TG_OP = 'DELETE') THEN
|
||||
INSERT INTO ${logTableName} (
|
||||
operation_type, original_id, changed_by, ip_address, full_row_before
|
||||
) VALUES (
|
||||
'DELETE', OLD.${pkColumnName}, v_user_id, v_ip_address, row_to_json(OLD)::jsonb
|
||||
);
|
||||
RETURN OLD;
|
||||
END IF;
|
||||
|
||||
RETURN NULL;
|
||||
END;
|
||||
$$ LANGUAGE plpgsql;
|
||||
`;
|
||||
}
|
||||
|
||||
/**
|
||||
* 트리거 DDL 생성
|
||||
*/
|
||||
private generateTriggerDDL(
|
||||
triggerName: string,
|
||||
tableName: string,
|
||||
funcName: string
|
||||
): string {
|
||||
return `
|
||||
CREATE TRIGGER ${triggerName}
|
||||
AFTER INSERT OR UPDATE OR DELETE ON ${tableName}
|
||||
FOR EACH ROW EXECUTE FUNCTION ${funcName}();
|
||||
`;
|
||||
}
|
||||
|
||||
/**
|
||||
* 로그 설정 저장
|
||||
*/
|
||||
private async saveLogConfig(config: {
|
||||
originalTableName: string;
|
||||
logTableName: string;
|
||||
triggerName: string;
|
||||
triggerFunctionName: string;
|
||||
createdBy?: string;
|
||||
}): Promise<void> {
|
||||
const query = `
|
||||
INSERT INTO table_log_config (
|
||||
original_table_name, log_table_name, trigger_name,
|
||||
trigger_function_name, created_by
|
||||
) VALUES ($1, $2, $3, $4, $5)
|
||||
`;
|
||||
|
||||
await this.executeQuery(query, [
|
||||
config.originalTableName,
|
||||
config.logTableName,
|
||||
config.triggerName,
|
||||
config.triggerFunctionName,
|
||||
config.createdBy
|
||||
]);
|
||||
}
|
||||
```
|
||||
|
||||
#### 4.1.2 테이블 생성 메서드 수정
|
||||
|
||||
```typescript
|
||||
async createTable(params: {
|
||||
tableName: string;
|
||||
columns: any[];
|
||||
useLogTable?: boolean; // 추가
|
||||
connectionId?: number;
|
||||
userId?: string;
|
||||
}): Promise<void> {
|
||||
const { tableName, columns, useLogTable, connectionId, userId } = params;
|
||||
|
||||
// 1. 원본 테이블 생성
|
||||
const ddl = this.generateCreateTableDDL(tableName, columns);
|
||||
await this.executeDDL(ddl, connectionId);
|
||||
|
||||
// 2. 로그 테이블 생성 (옵션)
|
||||
if (useLogTable === true) {
|
||||
await this.createLogTable(tableName, columns, connectionId, userId);
|
||||
}
|
||||
|
||||
// 3. 메타데이터 저장
|
||||
await this.saveTableMetadata({
|
||||
tableName,
|
||||
columns,
|
||||
useLogTable: useLogTable ? 'Y' : 'N',
|
||||
connectionId,
|
||||
userId
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
### 4.2 Controller Layer 수정
|
||||
|
||||
**파일**: `backend-node/src/controllers/admin/table-type-mng.controller.ts`
|
||||
|
||||
```typescript
|
||||
/**
|
||||
* 테이블 생성
|
||||
*/
|
||||
async createTable(req: Request, res: Response): Promise<void> {
|
||||
try {
|
||||
const { tableName, columns, useLogTable, connectionId } = req.body;
|
||||
const userId = req.user?.userId;
|
||||
|
||||
await this.tableTypeMngService.createTable({
|
||||
tableName,
|
||||
columns,
|
||||
useLogTable: useLogTable === 'Y' || useLogTable === true,
|
||||
connectionId,
|
||||
userId
|
||||
});
|
||||
|
||||
res.json({
|
||||
success: true,
|
||||
message: useLogTable
|
||||
? '테이블 및 로그 테이블이 생성되었습니다.'
|
||||
: '테이블이 생성되었습니다.'
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('테이블 생성 오류:', error);
|
||||
res.status(500).json({
|
||||
success: false,
|
||||
message: '테이블 생성 중 오류가 발생했습니다.'
|
||||
});
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 4.3 세션 변수 설정 미들웨어
|
||||
|
||||
**파일**: `backend-node/src/middleware/db-session.middleware.ts`
|
||||
|
||||
```typescript
|
||||
import { Request, Response, NextFunction } from "express";
|
||||
|
||||
/**
|
||||
* DB 세션 변수 설정 미들웨어
|
||||
* 트리거에서 사용할 사용자 정보를 세션 변수에 설정
|
||||
*/
|
||||
export const setDBSessionVariables = async (
|
||||
req: Request,
|
||||
res: Response,
|
||||
next: NextFunction
|
||||
): Promise<void> => {
|
||||
try {
|
||||
const userId = req.user?.userId || "system";
|
||||
const ipAddress = req.ip || req.socket.remoteAddress || "unknown";
|
||||
|
||||
// PostgreSQL 세션 변수 설정
|
||||
const queries = [
|
||||
`SET app.user_id = '${userId}'`,
|
||||
`SET app.ip_address = '${ipAddress}'`,
|
||||
];
|
||||
|
||||
// 각 DB 연결에 세션 변수 설정
|
||||
// (실제 구현은 DB 연결 풀 관리 방식에 따라 다름)
|
||||
|
||||
next();
|
||||
} catch (error) {
|
||||
console.error("DB 세션 변수 설정 오류:", error);
|
||||
next(error);
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
## 5. 프론트엔드 구현
|
||||
|
||||
### 5.1 테이블 생성 폼 수정
|
||||
|
||||
**파일**: `frontend/src/app/admin/tableMng/components/TableCreateForm.tsx`
|
||||
|
||||
```typescript
|
||||
const TableCreateForm = () => {
|
||||
const [useLogTable, setUseLogTable] = useState<boolean>(false);
|
||||
|
||||
return (
|
||||
<div className="table-create-form">
|
||||
{/* 기존 폼 필드들 */}
|
||||
|
||||
{/* 로그 테이블 옵션 추가 */}
|
||||
<div className="form-group">
|
||||
<label className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={useLogTable}
|
||||
onChange={(e) => setUseLogTable(e.target.checked)}
|
||||
className="w-4 h-4"
|
||||
/>
|
||||
<span>변경 이력 로그 테이블 생성</span>
|
||||
</label>
|
||||
<p className="text-sm text-gray-600 mt-1">
|
||||
체크 시 데이터 변경 이력을 기록하는 로그 테이블이 자동으로 생성됩니다.
|
||||
(테이블명: {tableName}_log)
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{useLogTable && (
|
||||
<div className="bg-blue-50 p-4 rounded border border-blue-200">
|
||||
<h4 className="font-semibold mb-2">로그 테이블 정보</h4>
|
||||
<ul className="text-sm space-y-1">
|
||||
<li>• INSERT/UPDATE/DELETE 작업이 자동으로 기록됩니다</li>
|
||||
<li>• 변경 전후 값과 변경자 정보가 저장됩니다</li>
|
||||
<li>
|
||||
• 로그는 별도 테이블에 저장되어 원본 테이블 성능에 영향을
|
||||
최소화합니다
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### 5.2 로그 조회 화면 추가
|
||||
|
||||
**파일**: `frontend/src/app/admin/tableMng/components/TableLogViewer.tsx`
|
||||
|
||||
```typescript
|
||||
interface TableLogViewerProps {
|
||||
tableName: string;
|
||||
}
|
||||
|
||||
const TableLogViewer: React.FC<TableLogViewerProps> = ({ tableName }) => {
|
||||
const [logs, setLogs] = useState<any[]>([]);
|
||||
const [filters, setFilters] = useState({
|
||||
operationType: "",
|
||||
startDate: "",
|
||||
endDate: "",
|
||||
changedBy: "",
|
||||
});
|
||||
|
||||
const fetchLogs = async () => {
|
||||
// 로그 데이터 조회
|
||||
const response = await fetch(`/api/admin/table-log/${tableName}`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(filters),
|
||||
});
|
||||
const data = await response.json();
|
||||
setLogs(data.logs);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="table-log-viewer">
|
||||
<h3>변경 이력 조회: {tableName}</h3>
|
||||
|
||||
{/* 필터 */}
|
||||
<div className="filters">
|
||||
<select
|
||||
value={filters.operationType}
|
||||
onChange={(e) =>
|
||||
setFilters({ ...filters, operationType: e.target.value })
|
||||
}
|
||||
>
|
||||
<option value="">전체</option>
|
||||
<option value="INSERT">추가</option>
|
||||
<option value="UPDATE">수정</option>
|
||||
<option value="DELETE">삭제</option>
|
||||
</select>
|
||||
|
||||
{/* 날짜 필터, 사용자 필터 등 */}
|
||||
</div>
|
||||
|
||||
{/* 로그 테이블 */}
|
||||
<table className="log-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>작업유형</th>
|
||||
<th>원본ID</th>
|
||||
<th>변경컬럼</th>
|
||||
<th>변경전</th>
|
||||
<th>변경후</th>
|
||||
<th>변경자</th>
|
||||
<th>변경시각</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{logs.map((log) => (
|
||||
<tr key={log.log_id}>
|
||||
<td>{log.operation_type}</td>
|
||||
<td>{log.original_id}</td>
|
||||
<td>{log.changed_column}</td>
|
||||
<td>{log.old_value}</td>
|
||||
<td>{log.new_value}</td>
|
||||
<td>{log.changed_by}</td>
|
||||
<td>{log.changed_at}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
## 6. API 엔드포인트
|
||||
|
||||
### 6.1 로그 조회 API
|
||||
|
||||
```
|
||||
POST /api/admin/table-log/:tableName
|
||||
Request Body:
|
||||
{
|
||||
"operationType": "UPDATE", // 선택: INSERT, UPDATE, DELETE
|
||||
"startDate": "2024-01-01", // 선택
|
||||
"endDate": "2024-12-31", // 선택
|
||||
"changedBy": "user123", // 선택
|
||||
"originalId": 123 // 선택
|
||||
}
|
||||
|
||||
Response:
|
||||
{
|
||||
"success": true,
|
||||
"logs": [
|
||||
{
|
||||
"log_id": 1,
|
||||
"operation_type": "UPDATE",
|
||||
"original_id": "123",
|
||||
"changed_column": "user_name",
|
||||
"old_value": "홍길동",
|
||||
"new_value": "김철수",
|
||||
"changed_by": "admin",
|
||||
"changed_at": "2024-10-21T10:30:00Z",
|
||||
"ip_address": "192.168.1.100"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### 6.2 로그 테이블 활성화/비활성화 API
|
||||
|
||||
```
|
||||
POST /api/admin/table-log/:tableName/toggle
|
||||
Request Body:
|
||||
{
|
||||
"isActive": "Y" // Y 또는 N
|
||||
}
|
||||
|
||||
Response:
|
||||
{
|
||||
"success": true,
|
||||
"message": "로그 기능이 활성화되었습니다."
|
||||
}
|
||||
```
|
||||
|
||||
## 7. 테스트 계획
|
||||
|
||||
### 7.1 단위 테스트
|
||||
|
||||
- [ ] 로그 테이블 DDL 생성 함수 테스트
|
||||
- [ ] 트리거 함수 DDL 생성 함수 테스트
|
||||
- [ ] 트리거 DDL 생성 함수 테스트
|
||||
- [ ] 로그 설정 저장 함수 테스트
|
||||
|
||||
### 7.2 통합 테스트
|
||||
|
||||
- [ ] 테이블 생성 시 로그 테이블 자동 생성 테스트
|
||||
- [ ] INSERT 작업 시 로그 기록 테스트
|
||||
- [ ] UPDATE 작업 시 로그 기록 테스트
|
||||
- [ ] DELETE 작업 시 로그 기록 테스트
|
||||
- [ ] 여러 컬럼 동시 변경 시 로그 기록 테스트
|
||||
|
||||
### 7.3 성능 테스트
|
||||
|
||||
- [ ] 대량 데이터 INSERT 시 성능 영향 측정
|
||||
- [ ] 대량 데이터 UPDATE 시 성능 영향 측정
|
||||
- [ ] 로그 테이블 크기 증가에 따른 성능 영향 측정
|
||||
|
||||
## 8. 주의사항 및 제약사항
|
||||
|
||||
### 8.1 성능 고려사항
|
||||
|
||||
- 트리거는 모든 변경 작업에 대해 실행되므로 성능 영향이 있을 수 있음
|
||||
- 대량 데이터 처리 시 로그 테이블 크기가 급격히 증가할 수 있음
|
||||
- 로그 테이블에 적절한 인덱스 설정 필요
|
||||
|
||||
### 8.2 운영 고려사항
|
||||
|
||||
- 로그 데이터의 보관 주기 정책 수립 필요
|
||||
- 오래된 로그 데이터 아카이빙 전략 필요
|
||||
- 로그 테이블의 정기적인 파티셔닝 고려
|
||||
|
||||
### 8.3 보안 고려사항
|
||||
|
||||
- 로그 데이터에는 민감한 정보가 포함될 수 있으므로 접근 권한 관리 필요
|
||||
- 로그 데이터 자체의 무결성 보장 필요
|
||||
- 로그 데이터의 암호화 저장 고려
|
||||
|
||||
## 9. 향후 확장 계획
|
||||
|
||||
### 9.1 로그 분석 기능
|
||||
|
||||
- 변경 패턴 분석
|
||||
- 사용자별 변경 통계
|
||||
- 시간대별 변경 추이
|
||||
|
||||
### 9.2 로그 알림 기능
|
||||
|
||||
- 특정 테이블/컬럼 변경 시 알림
|
||||
- 비정상적인 대량 변경 감지
|
||||
- 특정 사용자의 변경 작업 모니터링
|
||||
|
||||
### 9.3 로그 복원 기능
|
||||
|
||||
- 특정 시점으로 데이터 롤백
|
||||
- 변경 이력 기반 데이터 복구
|
||||
- 변경 이력 시각화
|
||||
|
||||
## 10. 마이그레이션 가이드
|
||||
|
||||
### 10.1 기존 테이블에 로그 기능 추가
|
||||
|
||||
```typescript
|
||||
// 기존 테이블에 로그 테이블 추가하는 API
|
||||
POST /api/admin/table-log/:tableName/enable
|
||||
|
||||
// 실행 순서:
|
||||
// 1. 로그 테이블 생성
|
||||
// 2. 트리거 함수 생성
|
||||
// 3. 트리거 생성
|
||||
// 4. 로그 설정 저장
|
||||
```
|
||||
|
||||
### 10.2 로그 기능 제거
|
||||
|
||||
```typescript
|
||||
// 로그 기능 제거 API
|
||||
POST /api/admin/table-log/:tableName/disable
|
||||
|
||||
// 실행 순서:
|
||||
// 1. 트리거 삭제
|
||||
// 2. 트리거 함수 삭제
|
||||
// 3. 로그 테이블 삭제 (선택)
|
||||
// 4. 로그 설정 비활성화
|
||||
```
|
||||
|
||||
## 11. 개발 우선순위
|
||||
|
||||
### Phase 1: 기본 기능 (필수)
|
||||
|
||||
1. DB 스키마 변경 (table_type_mng, table_log_config)
|
||||
2. 로그 테이블 DDL 생성 로직
|
||||
3. 트리거 함수/트리거 DDL 생성 로직
|
||||
4. 테이블 생성 시 로그 테이블 자동 생성
|
||||
|
||||
### Phase 2: UI 개발
|
||||
|
||||
1. 테이블 생성 폼에 로그 옵션 추가
|
||||
2. 로그 조회 화면 개발
|
||||
3. 로그 필터링 기능
|
||||
|
||||
### Phase 3: 고급 기능
|
||||
|
||||
1. 로그 활성화/비활성화 기능
|
||||
2. 기존 테이블에 로그 추가 기능
|
||||
3. 로그 데이터 아카이빙 기능
|
||||
|
||||
### Phase 4: 분석 및 최적화
|
||||
|
||||
1. 로그 분석 대시보드
|
||||
2. 성능 최적화
|
||||
3. 로그 데이터 파티셔닝
|
||||
Reference in New Issue
Block a user