자동 보고서 생성 및 공유 기능 구현

자동 보고서 생성 및 공유 기능 구현

이전 글에서는 실습 데이터를 기반으로 한 대시보드 최적화 및 비교 분석 기능을 다루었습니다. 이번 글에서는 그 연장선으로, 실습 결과를 PDF 보고서 또는 공유 가능한 URL로 자동 생성하는 기능을 구현하는 방법을 설명합니다.

이 기능은 실습자 또는 마케터가 분석 결과를 외부로 공유하거나 문서화하여 보고하는 데 매우 유용합니다.

---

1. 자동 보고서 생성 기능 개요

기능 설명

PDF 보고서 생성	실습 결과를 시각화하여 PDF로 저장
공유 가능한 링크 생성	누구나 접근 가능한 리포트 페이지 URL 제공
실습 보고서 자동 생성 시점	미션 완료 시점, 버튼 클릭 시 등 조건부 생성

---

2. PDF 보고서 생성 기능 구현

2-1. jsPDF 라이브러리 활용 예시

반응형

import jsPDF from "jspdf";

const generatePDF = (reportData) => {
  const doc = new jsPDF();
  doc.setFontSize(14);
  doc.text("🎯 실습 보고서", 20, 20);

  doc.setFontSize(11);
  reportData.events.forEach((e, idx) => {
    doc.text(`${idx + 1}. 이벤트: ${e.name}, 횟수: ${e.count}`, 20, 30 + idx * 10);
  });

  doc.save("practice-report.pdf");
};

2-2. PDF 버튼 트리거 UI

<button onClick={() => generatePDF(reportData)} className="btn btn-primary">
  PDF로 저장하기
</button>

---

3. 공유 가능한 리포트 링크 생성

3-1. 서버에서 리포트 저장 및 UUID 발급

import { v4 as uuidv4 } from 'uuid';

const saveSharedReport = async (userId, reportData) => {
  const shareId = uuidv4();
  await supabase.from("shared_reports").insert({
    user_id: userId,
    share_id: shareId,
    data: reportData,
    created_at: new Date()
  });
  return `https://analytics-playground.com/shared/${shareId}`;
};

3-2. 공유된 리포트 페이지 구성

export async function getServerSideProps(context) {
  const { shareId } = context.params;
  const { data } = await supabase
    .from("shared_reports")
    .select("*")
    .eq("share_id", shareId)
    .single();

  return { props: { reportData: data } };
}

---

4. 리포트 항목 예시 구성

항목 데이터 예시

분석 기간	2024.03.01 ~ 2024.03.07
전환 퍼널	PAGE_VIEW → CTA_CLICK → FORM_SUBMIT
각 단계 이벤트 수	1000 → 620 → 150
전환율	15%
AI 인사이트 요약	“이탈 구간은 회원가입 전. UI 개선 필요”

---

5. 보고서 자동화 확장 전략

기능 설명

이메일 전송	보고서를 PDF로 자동 첨부하여 사용자에게 발송
Slack 공유	버튼 클릭 시 슬랙 채널로 리포트 요약 공유
자동 생성 주기 설정	실습 완료 시 자동 생성, 주간 보고서 등

---

다음 글에서는 시리즈의 마무리로 프로젝트 전체 정리 및 확장 방향을 설명합니다.
→ 12편. Analytics Playground 프로젝트 마무리 및 향후 확장 계획

---