목록으로 돌아가기

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

Client logo

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

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