11 KiB
11 KiB
리포트 관리 시스템 구현 진행 상황
프로젝트 개요
동적 리포트 디자이너 시스템 구현
- 사용자가 드래그 앤 드롭으로 리포트 레이아웃 설계
- SQL 쿼리 연동으로 실시간 데이터 표시
- 미리보기 및 인쇄 기능
완료된 작업 ✅
1. 데이터베이스 설계 및 구축
report_template테이블 생성 (18개 초기 템플릿)report_master테이블 생성 (리포트 메타 정보)report_layout테이블 생성 (레이아웃 JSON)report_query테이블 생성 (쿼리 정의)
파일: db/report_schema.sql, db/report_query_schema.sql
2. 백엔드 API 구현
- 리포트 CRUD API (생성, 조회, 수정, 삭제)
- 템플릿 조회 API
- 레이아웃 저장/조회 API
- 쿼리 실행 API (파라미터 지원)
- 리포트 복사 API
- Raw SQL 기반 구현 (Prisma 대신 pg 사용)
파일:
backend-node/src/types/report.tsbackend-node/src/services/reportService.tsbackend-node/src/controllers/reportController.tsbackend-node/src/routes/reportRoutes.ts
3. 프론트엔드 - 리포트 목록 페이지
- 리포트 리스트 조회 및 표시
- 검색 기능
- 페이지네이션
- 새 리포트 생성 (디자이너로 이동)
- 수정/복사/삭제 액션 버튼
파일:
frontend/app/(main)/admin/report/page.tsxfrontend/components/report/ReportListTable.tsxfrontend/hooks/useReportList.ts
4. 프론트엔드 - 리포트 디자이너 기본 구조
- Context 기반 상태 관리 (
ReportDesignerContext) - 툴바 (저장, 미리보기, 초기화, 뒤로가기)
- 3단 레이아웃 (좌측 팔레트 / 중앙 캔버스 / 우측 속성)
- "new" 리포트 처리 (저장 시 생성)
파일:
frontend/contexts/ReportDesignerContext.tsxfrontend/app/(main)/admin/report/designer/[reportId]/page.tsxfrontend/components/report/designer/ReportDesignerToolbar.tsx
5. 컴포넌트 팔레트 및 캔버스
- 드래그 가능한 컴포넌트 목록 (텍스트, 레이블, 테이블)
- 드래그 앤 드롭으로 캔버스에 컴포넌트 배치
- 컴포넌트 이동 (드래그)
- 컴포넌트 크기 조절 (리사이즈 핸들)
- 컴포넌트 선택 및 삭제
파일:
frontend/components/report/designer/ComponentPalette.tsxfrontend/components/report/designer/ReportDesignerCanvas.tsxfrontend/components/report/designer/CanvasComponent.tsx
6. 쿼리 관리 시스템
- 쿼리 추가/수정/삭제 (마스터/디테일)
- SQL 파라미터 자동 감지 ($1, $2 등)
- 파라미터 타입 선택 (text, number, date)
- 파라미터 입력값 검증
- 쿼리 실행 및 결과 표시
- "new" 리포트에서도 쿼리 실행 가능
- 실행 결과를 Context에 저장
파일:
frontend/components/report/designer/QueryManager.tsxfrontend/contexts/ReportDesignerContext.tsx(QueryResult 관리)
7. 데이터 바인딩 시스템
- 속성 패널에서 컴포넌트-쿼리 연결
- 텍스트/레이블: 쿼리 + 필드 선택
- 테이블: 쿼리 선택 (모든 필드 자동 표시)
- 캔버스에서 실제 데이터 표시 (바인딩된 필드의 값)
- 실행 결과가 없으면
{필드명}표시
파일:
frontend/components/report/designer/ReportDesignerRightPanel.tsxfrontend/components/report/designer/CanvasComponent.tsx
8. 미리보기 및 내보내기
- 미리보기 모달
- 실제 쿼리 데이터로 렌더링
- 편집용 UI 제거 (순수 데이터만 표시)
- 브라우저 인쇄 기능
- PDF 다운로드 (브라우저 네이티브 인쇄 기능)
- WORD 다운로드 (docx 라이브러리)
- 파일명 자동 생성 (리포트명_날짜)
파일:
frontend/components/report/designer/ReportPreviewModal.tsx
사용 라이브러리:
docx: WORD 문서 생성 (PDF는 브라우저 기본 기능 사용)
9. 템플릿 시스템
- 시스템 템플릿 적용 (발주서, 청구서, 기본)
- 템플릿별 기본 컴포넌트 자동 배치
- 템플릿별 기본 쿼리 자동 생성
- 사용자 정의 템플릿 저장 기능
- 사용자 정의 템플릿 목록 조회
- 사용자 정의 템플릿 삭제
- 사용자 정의 템플릿 적용 (백엔드 연동)
파일:
frontend/contexts/ReportDesignerContext.tsx(템플릿 적용 로직)frontend/components/report/designer/TemplatePalette.tsxfrontend/components/report/designer/SaveAsTemplateModal.tsxbackend-node/src/services/reportService.ts(createTemplateFromLayout)
10. 외부 DB 연동
- 쿼리별 외부 DB 연결 선택
- 외부 DB 연결 목록 조회 API
- 쿼리 실행 시 외부 DB 지원
- 내부/외부 DB 선택 UI
파일:
frontend/components/report/designer/QueryManager.tsxbackend-node/src/services/reportService.ts(executeQuery with external DB)
11. 컴포넌트 스타일링
- 폰트 크기 설정
- 폰트 색상 설정 (컬러피커)
- 폰트 굵기 (보통/굵게)
- 텍스트 정렬 (좌/중/우)
- 배경색 설정 (투명 옵션 포함)
- 테두리 설정 (두께, 색상)
- 캔버스 및 미리보기에 스타일 반영
파일:
frontend/components/report/designer/ReportDesignerRightPanel.tsxfrontend/components/report/designer/CanvasComponent.tsx
12. 레이아웃 도구 (완료!)
- Grid Snap: 10px 단위 그리드에 자동 정렬
- 정렬 가이드라인: 드래그 시 빨간색 가이드라인 표시
- 복사/붙여넣기: Ctrl+C/V로 컴포넌트 복사 (20px 오프셋)
- Undo/Redo: 히스토리 관리 (Ctrl+Z / Ctrl+Shift+Z)
- 컴포넌트 정렬: 좌/우/상/하/가로중앙/세로중앙 정렬
- 컴포넌트 배치: 가로/세로 균등 배치 (3개 이상)
- 크기 조정: 같은 너비/높이/크기로 조정 (2개 이상)
- 화살표 키 이동: 1px 이동, Shift+화살표 10px 이동
- 레이어 관리: 맨 앞/뒤, 한 단계 앞/뒤 (Z-Index 조정)
- 컴포넌트 잠금: 편집/이동/삭제 방지, 🔒 표시
- 눈금자 표시: 가로/세로 mm 단위 눈금자
- 컴포넌트 그룹화: 여러 컴포넌트를 그룹으로 묶어 함께 이동, 👥 표시
파일:
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: 추가 컴포넌트 ✅ 완료!
-
이미지 컴포넌트 ✅
- 파일 업로드 (multer, 10MB 제한)
- 회사별 디렉토리 분리 저장
- 맞춤 방식 (contain/cover/fill/none)
- CORS 설정으로 이미지 로딩
- 캔버스 및 미리보기 렌더링
- 로고, 서명, 도장 등에 활용
-
구분선 컴포넌트 (Divider) ✅
- 가로/세로 방향 선택
- 선 두께 (lineWidth) 독립 속성
- 선 색상 (lineColor) 독립 속성
- 선 스타일 (solid/dashed/dotted/double)
- 캔버스 및 미리보기 렌더링
파일:
backend-node/src/controllers/reportController.ts(uploadImage)backend-node/src/routes/reportRoutes.ts(multer 설정)frontend/types/report.ts(이미지/구분선 속성)frontend/components/report/designer/ComponentPalette.tsxfrontend/components/report/designer/CanvasComponent.tsxfrontend/components/report/designer/ReportDesignerRightPanel.tsxfrontend/components/report/designer/ReportPreviewModal.tsxfrontend/lib/api/client.ts(getFullImageUrl)
- 차트 컴포넌트 (선택사항) ⬅️ 다음 권장 작업
- 막대 차트
- 선 차트
- 원형 차트
- 쿼리 데이터 연동
Phase 2: 고급 기능
-
조건부 서식
- 특정 조건에 따른 스타일 변경
- 값 범위에 따른 색상 표시
- 수식 기반 표시/숨김
-
쿼리 관리 개선
- 쿼리 미리보기 개선 (테이블 형태)
- 쿼리 저장/불러오기
- 쿼리 템플릿
Phase 3: 성능 및 보안
-
성능 최적화
- 쿼리 결과 캐싱
- 대용량 데이터 페이징
- 렌더링 최적화
- 이미지 레이지 로딩
-
권한 관리
- 리포트별 접근 권한
- 수정 권한 분리
- 템플릿 공유
- 사용자별 리포트 목록 필터링
기술 스택
백엔드
- 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 - 초기 설계 문서
- 레포트드자이너.html - 참조 프로토타입
다음 작업: 리포트 복사/삭제 테스트 및 검증
테스트 항목
-
복사 기능 테스트
- 리포트 복사 버튼 클릭
- 복사된 리포트명 확인 (원본명 + "_copy")
- 복사된 리포트의 레이아웃 확인
- 복사된 리포트의 쿼리 확인
- 목록 자동 새로고침 확인
-
삭제 기능 테스트
- 삭제 버튼 클릭 시 확인 다이얼로그 표시
- 취소 버튼 동작 확인
- 삭제 실행 후 목록에서 제거 확인
- Toast 메시지 표시 확인
-
에러 처리 테스트
- 존재하지 않는 리포트 삭제 시도
- 네트워크 오류 시 Toast 메시지
- 로딩 중 버튼 비활성화 확인
추가 개선 사항
- 컴포넌트 복사 기능 (Ctrl+C/Ctrl+V)
- 다중 선택 및 정렬 기능
- 실행 취소/다시 실행 (Undo/Redo)
- 사용자 정의 템플릿 저장
최종 업데이트: 2025-10-01 작성자: AI Assistant 상태: 이미지 & 구분선 컴포넌트 완료 (기본 컴포넌트 완료, 약 99% 완료)