해외법인 실적 대시보드

엑셀(.xlsx) 파일을 업로드하면 컬럼을 자동으로 분석해 핵심 지표·차트·검색 가능한 표로 바꿔 주는 웹 대시보드입니다.

백엔드와 데이터베이스를 쓰지 않습니다. 엑셀 파싱부터 집계까지 전부 브라우저 안에서 처리되므로, 업로드한 파일은 어디로도 전송되지 않습니다.

실행 방법

run.bat

run.bat을 더블클릭하면 의존성 설치(최초 1회)와 개발 서버 실행이 이어서 진행되고, 브라우저가 http://localhost:5173으로 열립니다.

직접 실행하려면:

npm install && npm run dev

Node.js 18 이상이 필요합니다.

주요 기능

기능	설명
엑셀 업로드	파일 선택 또는 드래그 앤 드롭. .xlsx만 허용
헤더 자동 인식	제목 배너·그룹 헤더를 건너뛰고 실제 컬럼 헤더 행을 찾음
합계 행 제외	ANNUAL TOTAL, 합계 같은 요약 행을 집계에서 자동 배제
지표 카드	컬럼 성격에 맞춰 합계·평균·건수 지표를 자동 구성
차트	분류별 비교, 기간별 추이, 구성비, 상위 항목 비교
기준 변경	차트마다 기준 축·값을 드롭다운으로 바꿔 볼 수 있음
검색 / 필터	전 컬럼 검색과 분류 컬럼 필터를 AND 조건으로 조합

화면이 파일에 맞춰 달라집니다

특정 양식에 고정되어 있지 않습니다. 업로드한 시트의 컬럼을 분석해 지표와 차트를 그때그때 구성합니다.

업로드한 데이터	자동으로 만들어진 지표	자동으로 만들어진 차트
해외법인 분기실적	매출 합계 / 영업이익 합계 / 평균 영업이익률 / 법인 수	지역별 · 분기별 추이 · 사업부문 구성비 · 법인 TOP15
거래 원장	총액 합계 / 거래량 합계 / 평균 영업이익률 / 고객사 수	사업부문별 · 거래일별 추이 · 결제조건 구성비 · 고객사 TOP15
발전소 월간운영	발전량 합계 / 연료소비 합계 / 평균 가동률 / 발전소 수	사업유형별 · 월별 추이 · 효율등급 구성비 · 발전소 TOP15
터미널 월간운영	전체 합계 / 평균 전월대비 / 데이터 건수	구역별 · 월별 추이 · 운영지표 구성비

입력 엑셀 형식

첫 번째 시트만 읽습니다. 컬럼명이 정확히 일치할 필요는 없고, 키워드가 포함되어 있으면 인식합니다.

• 분류 축 — 값의 종류가 2~15개인 텍스트 컬럼 (지역, 구역, 사업부문, 사업유형 등)
• 개체 축 — 종류가 많은 이름 컬럼 (법인명, 발전소명, 고객사 등). 상위 항목 비교에 사용
• 측정값 — 숫자 컬럼. 매출, 총액, 영업이익, 발전량, 거래량 등이 우선 지표가 됨
• 비율 — (%)가 붙거나 ~율/~률로 끝나는 컬럼은 합계 대신 평균으로 집계
• 기간 — 월, 거래일 같은 컬럼이나 YYYY-MM 형식 값. Q1매출~Q4매출처럼 분기가 컬럼으로 펼쳐진 경우도 인식

숫자 표기는 한 곳에서 통일해 관리합니다. 천 단위 컴마를 적용하고, 소수 자릿수는 컬럼별로 고정하며, 차트 축은 한 축 안에서 단위가 섞이지 않도록 최댓값 기준으로 스케일을 하나만 씁니다.

저장소에는 실습용 원본 엑셀이 포함되어 있지 않습니다. 위 형식에 맞는 파일을 직접 업로드해 주세요.

기술 스택

• React 18 + Vite 5
• xlsx — 브라우저에서 엑셀 파싱
• recharts — 차트

프로젝트 구조

├── run.bat                   # 실행 파일
├── index.html
├── docs/                     # BRD · PRD
└── src/
    ├── App.jsx               # 상태 관리 및 화면 조립
    ├── index.css             # 다크 테마 · 반응형
    ├── components/
    │   ├── UploadArea.jsx    # 업로드 및 인식 결과 요약
    │   ├── KpiCards.jsx      # 지표 카드
    │   ├── Charts.jsx        # 차트 4종
    │   └── DataTable.jsx     # 데이터 표 · 검색 · 필터
    └── utils/
        ├── parseExcel.js     # 헤더 탐지 · 합계 행 제외 · 단위 추출
        ├── analyze.js        # 컬럼 분류 · 지표/차트 자동 구성
        └── format.js         # 숫자 표기 규칙 (한 곳에서 관리)

문서

• BRD — 사업요구사항정의서
• PRD — 제품요구사항정의서