ESG·사회적가치 진단 플랫폼
ESG 및 사회적가치 진단 항목 입력부터 자동 채점, 결과 리포트 생성, PDF 출력까지 이어지는 진단 플랫폼을 Supabase Auth·RLS 기반 계정별 데이터 격리 구조로 구현합니다.
프로젝트 개요
ESG 및 사회적가치 진단 항목 입력부터 자동 채점, 결과 리포트 생성, PDF 출력까지 이어지는 진단 플랫폼을 Supabase Auth·RLS 기반 계정별 데이터 격리 구조로 구현합니다. 이메일 인증, 진단 이력 비교, Netlify 배포 환경 구성까지 포함한 풀사이클 구현한 프로젝트입니다.
작업 범위
- ESG 진단 대시보드: 로그인 계정이 최근 진단 점수, 항목별 요약, 인증 상태를 한 화면에서 확인할 수 있는 통합 대시보드
- 회원가입·이메일 인증: 이메일 인증 절차를 포함한 회원가입, 로그인, 세션 만료 처리 화면
- 진단 항목 입력·리포트 생성: ESG 및 사회적가치 진단 항목을 입력하고 실시간 검증 후 자동 채점으로 결과 리포트를 생성하는 화면
- 진단 이력 비교·PDF 출력: 계정별 과거 진단 이력을 조회하고 이전 결과와 비교하며, 결과를 PDF로 출력하는 화면
주요 업무
- ESG 진단 대시보드 화면: Supabase Auth 세션 검증 후 RLS 정책으로 본인 조직의 진단 데이터만 조회하도록 구현할 예정
- 회원가입·이메일 인증 화면: Supabase Auth 이메일 인증 플로우 연동, 인증 실패·세션 만료 예외 처리 로직 설계
- 진단 항목 입력·리포트 생성 화면: 입력값 검증 로직과 항목별 가중치 채점 알고리즘을 Supabase에 연동해 결과를 저장하는 구조로 구현할 예정
- 진단 이력 비교·PDF 출력 화면: RLS로 본인 조직 이력만 조회하도록 제한하고, jsPDF로 리포트를 PDF 출력하는 구조로 구현할 예정
프로젝트 핵심 과제
ESG·사회적가치 진단 항목별 배점 기준이 계정마다 달라질 수
유연한 채점 스키마 설계 필요
Supabase RLS 정책을 세밀하게 설계하지 않으면 계정 간 진단 데이터 노출 위험
정책 테스트 케이스 마련 필요
PDF 리포트에 차트·표를 포함해 출력할 때 레이아웃 깨짐 없이 렌더링하는 방식 설계
이메일 인증 미완료 상태에서 세션이 만료될 경우 재인증 흐름을 매끄럽게 처리하는 로직
핵심 기능 상세
ESG 진단 대시보드
로그인 계정이 최근 진단 점수, 항목별 요약, 인증 상태를 한 화면에서 확인할 수 있는 통합 대시보드. Supabase Auth 세션 검증 후 RLS 정책으로 본인 조직의 진단 데이터만 조회하도록 구현할 예정.
- Supabase Auth 세션 토큰 검증 미들웨어와 RLS 정책 연동
- sparkline 기반 진단 점수 추이 시각화 컴포넌트 설계
- 계정별 요약 데이터를 캐싱해 대시보드 최초 로딩 구조 설계
Supabase Row Level Security 정책을 DB 레벨에서 적용해 계정 단위 데이터 격리 구조를 구현합니다.
회원가입·이메일 인증
이메일 인증 절차를 포함한 회원가입, 로그인, 세션 만료 처리 화면. Supabase Auth 이메일 인증 플로우 연동, 인증 실패·세션 만료 예외 처리 로직 설계.
- Supabase Auth 이메일 인증 링크 발송·검증 플로우 연동
- 인증 실패·세션 만료 3가지 예외 케이스별 사용자 피드백 설계
- 재인증 유도 UI와 인증 상태 배지 컴포넌트 설계
인증 실패와 세션 만료 시나리오를 예외 처리 로직으로 안정화하는 구조를 설계합니다.
진단 항목 입력·리포트 생성
ESG 및 사회적가치 진단 항목을 입력하고 실시간 검증 후 자동 채점으로 결과 리포트를 생성하는 화면. 입력값 검증 로직과 항목별 가중치 채점 알고리즘을 Supabase에 연동해 결과를 저장하는 구조로 구현할 예정.
- 진단 항목별 실시간 입력 검증 및 필수값 하이라이트 처리
- 항목 가중치 기반 자동 채점 로직을 Supabase 함수로 연동 설계
- 결과 리포트 화면에 항목별 점수 차트(Chart.js) 렌더링
진단 입력값을 실시간 검증하고 Supabase에 연동해 결과를 저장하는 구조를 구현합니다.
진단 이력 비교·PDF 출력
계정별 과거 진단 이력을 조회하고 이전 결과와 비교하며, 결과를 PDF로 출력하는 화면. RLS로 본인 조직 이력만 조회하도록 제한하고, jsPDF로 리포트를 PDF 출력하는 구조로 구현할 예정.
- jsPDF 기반 진단 리포트 PDF 출력 및 인쇄 레이아웃 구현
- 이전 진단 대비 항목별 변동을 diff 형태로 시각화
- RLS 정책으로 본인 조직 이력만 조회 가능하도록 쿼리 제한
jsPDF 기반 PDF 출력 기능과 이력 비교 시각화 구조를 구현합니다.
프로젝트 진행 단계
요구사항 분석 및 Supabase 스키마 설계 · 2026.09
기존 HTML/JS 진단 로직 분석, Supabase 테이블 6~8개 및 RLS 정책 초안 설계
Supabase Auth 연동 및 이메일 인증 구현 · 2026.09
회원가입·로그인·이메일 인증 플로우 연동, 세션 만료·인증 실패 예외 처리 로직 구현
진단 폼·리포트 생성·PDF 출력 구현 · 2026.09
진단 항목 입력 검증, 가중치 채점 로직, jsPDF 기반 리포트 PDF 출력 구현
이력 비교 및 Netlify 배포·QA · 2026.09
진단 이력 비교 UI 구현, Netlify 빌드·환경변수 분리 배포, 가입~리포트 출력 전 구간 QA 검증
주요 성과
기술적 주안점
- Supabase Row Level Security 정책을 DB 레벨에서 적용해 계정 단위 데이터 격리 구조를 구현합니다
- 인증 실패와 세션 만료 시나리오를 예외 처리 로직으로 안정화하는 구조를 설계합니다
- 진단 입력값을 실시간 검증하고 Supabase에 연동해 결과를 저장하는 구조를 구현합니다
