kjs
/
ERP-node
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
ERP-node/docs/리포트_관리_시스템_구현_진행상황.md

8.7 KiB
Raw Blame History

리포트 관리 시스템 구현 진행 상황

프로젝트 개요

동적 리포트 디자이너 시스템 구현

  • 사용자가 드래그 앤 드롭으로 리포트 레이아웃 설계
  • 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.ts
  • backend-node/src/services/reportService.ts
  • backend-node/src/controllers/reportController.ts
  • backend-node/src/routes/reportRoutes.ts

3. 프론트엔드 - 리포트 목록 페이지

  • 리포트 리스트 조회 및 표시
  • 검색 기능
  • 페이지네이션
  • 새 리포트 생성 (디자이너로 이동)
  • 수정/복사/삭제 액션 버튼

파일:

  • frontend/app/(main)/admin/report/page.tsx
  • frontend/components/report/ReportListTable.tsx
  • frontend/hooks/useReportList.ts

4. 프론트엔드 - 리포트 디자이너 기본 구조

  • Context 기반 상태 관리 (ReportDesignerContext)
  • 툴바 (저장, 미리보기, 초기화, 뒤로가기)
  • 3단 레이아웃 (좌측 팔레트 / 중앙 캔버스 / 우측 속성)
  • "new" 리포트 처리 (저장 시 생성)

파일:

  • frontend/contexts/ReportDesignerContext.tsx
  • frontend/app/(main)/admin/report/designer/[reportId]/page.tsx
  • frontend/components/report/designer/ReportDesignerToolbar.tsx

5. 컴포넌트 팔레트 및 캔버스

  • 드래그 가능한 컴포넌트 목록 (텍스트, 레이블, 테이블)
  • 드래그 앤 드롭으로 캔버스에 컴포넌트 배치
  • 컴포넌트 이동 (드래그)
  • 컴포넌트 크기 조절 (리사이즈 핸들)
  • 컴포넌트 선택 및 삭제

파일:

  • frontend/components/report/designer/ComponentPalette.tsx
  • frontend/components/report/designer/ReportDesignerCanvas.tsx
  • frontend/components/report/designer/CanvasComponent.tsx

6. 쿼리 관리 시스템

  • 쿼리 추가/수정/삭제 (마스터/디테일)
  • SQL 파라미터 자동 감지 ($1, $2 등)
  • 파라미터 타입 선택 (text, number, date)
  • 파라미터 입력값 검증
  • 쿼리 실행 및 결과 표시
  • "new" 리포트에서도 쿼리 실행 가능
  • 실행 결과를 Context에 저장

파일:

  • frontend/components/report/designer/QueryManager.tsx
  • frontend/contexts/ReportDesignerContext.tsx (QueryResult 관리)

7. 데이터 바인딩 시스템

  • 속성 패널에서 컴포넌트-쿼리 연결
  • 텍스트/레이블: 쿼리 + 필드 선택
  • 테이블: 쿼리 선택 (모든 필드 자동 표시)
  • 캔버스에서 실제 데이터 표시 (바인딩된 필드의 값)
  • 실행 결과가 없으면 {필드명} 표시

파일:

  • frontend/components/report/designer/ReportDesignerRightPanel.tsx
  • frontend/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.tsx
  • frontend/components/report/designer/SaveAsTemplateModal.tsx
  • backend-node/src/services/reportService.ts (createTemplateFromLayout)

10. 외부 DB 연동

  • 쿼리별 외부 DB 연결 선택
  • 외부 DB 연결 목록 조회 API
  • 쿼리 실행 시 외부 DB 지원
  • 내부/외부 DB 선택 UI

파일:

  • frontend/components/report/designer/QueryManager.tsx
  • backend-node/src/services/reportService.ts (executeQuery with external DB)

11. 컴포넌트 스타일링

  • 폰트 크기 설정
  • 폰트 색상 설정 (컬러피커)
  • 폰트 굵기 (보통/굵게)
  • 텍스트 정렬 (좌/중/우)
  • 배경색 설정 (투명 옵션 포함)
  • 테두리 설정 (두께, 색상)
  • 캔버스 및 미리보기에 스타일 반영

파일:

  • frontend/components/report/designer/ReportDesignerRightPanel.tsx
  • frontend/components/report/designer/CanvasComponent.tsx

진행 중인 작업 🚧

없음 (현재 모든 핵심 기능 구현 완료)

남은 작업 (우선순위순) 📋

Phase 1: 사용성 개선 (권장)

  1. 레이아웃 도구 ⬅️ 다음 권장 작업

    • 격자 스냅 (Grid Snap)
    • 정렬 가이드라인
    • 컴포넌트 그룹화
    • 실행 취소/다시 실행 (Undo/Redo)

  2. 쿼리 관리 개선

    • 쿼리 미리보기 개선 (테이블 형태)
    • 쿼리 저장/불러오기
    • 쿼리 템플릿

Phase 2: 추가 컴포넌트

  1. 다양한 컴포넌트 추가

    • 이미지 컴포넌트
    • 차트 컴포넌트 (막대, 선, 원형)
    • 바코드/QR코드 (선택사항)
    • 구분선 (Divider)
    • 체크박스/라디오 버튼

  2. 조건부 서식

    • 특정 조건에 따른 스타일 변경
    • 값 범위에 따른 색상 표시
    • 수식 기반 표시/숨김

Phase 3: 성능 및 보안

  1. 성능 최적화

    • 쿼리 결과 캐싱
    • 대용량 데이터 페이징
    • 렌더링 최적화
    • 이미지 레이지 로딩

  2. 권한 관리

    • 리포트별 접근 권한
    • 수정 권한 분리
    • 템플릿 공유
    • 사용자별 리포트 목록 필터링

기술 스택

백엔드

  • 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 호출 방지

참고 문서

다음 작업: 리포트 복사/삭제 테스트 및 검증

테스트 항목

  1. 복사 기능 테스트

    • 리포트 복사 버튼 클릭
    • 복사된 리포트명 확인 (원본명 + "_copy")
    • 복사된 리포트의 레이아웃 확인
    • 복사된 리포트의 쿼리 확인
    • 목록 자동 새로고침 확인

  2. 삭제 기능 테스트

    • 삭제 버튼 클릭 시 확인 다이얼로그 표시
    • 취소 버튼 동작 확인
    • 삭제 실행 후 목록에서 제거 확인
    • Toast 메시지 표시 확인

  3. 에러 처리 테스트

    • 존재하지 않는 리포트 삭제 시도
    • 네트워크 오류 시 Toast 메시지
    • 로딩 중 버튼 비활성화 확인

추가 개선 사항

  • 컴포넌트 복사 기능 (Ctrl+C/Ctrl+V)
  • 다중 선택 및 정렬 기능
  • 실행 취소/다시 실행 (Undo/Redo)
  • 사용자 정의 템플릿 저장

최종 업데이트: 2025-10-01 작성자: AI Assistant 상태: PDF/WORD 내보내기 완료 (95% 완료)