KIRA Battery Dashboard

배터리 공급망 생성 및 규제 대응을 위한 원청사/협력사 분리형 운영 관제 데모입니다.
Next.js 14, TypeScript, Tailwind CSS 기반으로 구성되어 있습니다.

데모 로그인

계정 유형	아이디	비밀번호	이동 화면
원청사	prime@kira.demo	demo1234	/dashboard
협력사	supplier@hanyang-cell.com	demo1234	/partner

/ 경로는 로그인 화면입니다. 입력한 계정 권한에 따라 원청사 화면과 협력사 화면으로 자동 분기됩니다.

주요 경로

경로	화면	핵심 기능
/	로그인	원청사/협력사 계정 자동 분기
/dashboard	원청사 대시보드	운영 KPI, 우선 조치, 고위험/제출/발행 상태 요약
/suppliers	협력사 목록	상태, 리스크, SLA, 제출 현황 기반 협력사 탐색
/suppliers/[id]/info	협력사 상세	기업 정보, 담당자, 사업장, 인증서, 데이터 완성도
/supply-chain	공급망 맵 허브(원청)	고객·제품·BOM 선택 → 맵 생성/조회, 협력사 Pool 확정, 자료 일괄요청, 최종 검증 요약·엑셀 다운로드
/supply-chain/map	공급망 맵 상세	N차 트리·공급비율·검증 상태 시각화
/partner	협력사 업무공간	내 기업 정보, 자료 제출(AI 처리 확인), 원청 알림, 하위 협력사 초대
/partner/onboarding	협력사 온보딩(URL 초대 진입)	제3자 정보제공 동의 → 회사·PIC·필요문서 등록(회원가입 전 진입점)

화면 구성

원청사

• 전체 협력사와 공급망을 기준으로 운영 현황을 확인합니다.
• 고위험 협력사, SLA 초과, 제출 미완료를 우선순위로 관리합니다.
• 공급망 맵은 노드 정보를 간결하게 보여주고, 세부 정보는 오른쪽 패널과 표에서 확인합니다.
• 협력사 상세 정보, 입력 요청 맵, 제출 자료 검토, 감사 추적 화면으로 이어집니다.

협력사

• 자기 회사 정보와 직접 연결된 parent/child 공급망만 확인합니다.
• 원청사가 요청한 자료, 내 제출 자료, 검토 결과, 재요청 사유, 제출 기한을 확인합니다.
• 타 협력사의 상세 연락처, 사업자번호, 내부 HITL 판단 로그, 감사 로그, 경쟁사 비교 지표는 표시하지 않습니다.

실행

npm install
npm run dev

로컬 확인:

http://localhost:3000

필요하면 다른 포트로 실행할 수 있습니다.

npm run dev -- -p 3001

배포

Vercel에서 GitHub 저장소를 연결한 뒤 Framework Preset을 Next.js로 선택하면 됩니다.

npm run build

API 프록시 / 환경변수

브라우저는 항상 상대경로 /api/* 로 호출하고, next.config.js의 rewrite가 이를 BACKEND_ORIGIN으로 프록시한다.

• 로컬: BACKEND_ORIGIN=http://localhost:8000 (미설정 시 기본값 동일). 단, 도커 스택은 백엔드를 nginx(:80)로만 노출하므로 로컬 백엔드 연동 시 origin을 실제 노출 포트에 맞춘다.
• 운영(Vercel): 프로젝트 환경변수 BACKEND_ORIGIN에 EC2 origin 지정.