목록으로 돌아가기

기업 ESG 공시 데이터 관리 플랫폼

Client logo

기업의 ESG 공시 데이터를 체계적으로 수집하고 관리하는 ESG 경영 플랫폼
환경·사회·지배구조 지표별 데이터 입력과 규제 기준에 맞는 보고서 생성을 지원합니다.

기업 ESG 공시 데이터 관리 플랫폼 - 미디어 1
1 / 7

담당 역할

기획디자인프론트엔드백엔드

기술 스택

React
TypeScript
Vite
TanStack Query
Recoil
Ant Design
styled-components
i18next

주요 기능

  • 중대이슈 관리: 기업의 ESG 중대이슈(Material Issues)를 Topic/Sub-Topic 구조로 등록하고 담당자를 지정하여 평가 진행 관리
  • 지표 Set 관리: ESRS, ISSB, GRI, SEC 등 글로벌 공시기준별 지표를 선택하고 담당자/승인권자를 지정하여 체계적으로 관리
  • 공시데이터 입력/관리: 기업, 팀, 담당자 레벨에서 데이터 포인트를 할당하고 입력값을 관리하는 다계층 워크플로우
  • 엑셀 일괄 업로드: 대량의 ESG 데이터를 엑셀 템플릿을 통해 일괄 업로드하고 검증 후 저장
  • 데이터 승인 워크플로우: 데이터 입력 → 저장 → 승인요청 → 승인/반려의 상태 관리 및 이력 추적

수행 업무

  • 컴포넌트 라이브러리 구축: Ant Design을 기반으로 프로젝트 디자인 시스템에 맞게 커스터마이징한 재사용 가능한 컴포넌트 라이브러리(CTable, CButton, CModal 등) 개발
  • 역할 기반 UI 분기: Recoil selector를 활용하여 사용자 권한(본사 ESG팀, 자회사 팀 등)에 따라 탭 및 기능 노출을 동적으로 제어
  • TanStack Query 기반 데이터 관리: API 상태 관리, 캐싱, 낙관적 업데이트를 위한 일관된 React Query 훅 패턴 구현
  • 다단계 스텝 폼 구현: 지표 추가, 이슈 등록 등 복잡한 입력 과정을 단계별 스텝 UI로 설계하여 사용자 경험 개선
  • 테이블 필터링/정렬 시스템: 공시기준, 상태 등 다양한 조건으로 필터링하고 컬럼별 정렬이 가능한 데이터 테이블 구현
  • 다국어 지원(i18n): i18next를 활용한 한국어/영어 다국어 지원 및 언어 자동 감지 기능 구현
  • 계층적 네비게이션: 다단계 메뉴 구조와 Breadcrumb을 통한 직관적인 정보 계층 탐색 지원
#ESG
#엔터프라이즈
#React
#TypeScript
#데이터관리
#KPMG