📚

학습 모드

이 페이지는 / (Cockpit) 의 사본입니다. 각 박스 우측 상단의 ▶ 라벨 에 마우스를 올리면 어떤 컴포넌트/파일인지 설명이 나옵니다. 궁금한 부분이 있으면 컴포넌트 이름을 알려주시면 그것만 따로 자세히 설명해드립니다.

Executive Cockpit

Global Inventory Health

As of 2025-12-31 · 8 legal entities · 50,000 SKUs

Last refresh

08:31:42 KST

Page Header

컴포넌트

Page Header

app/learn/page.tsx (이 파일 안)

페이지 맨 위 제목 영역. 별도 컴포넌트가 아니라 그냥 div 로 만들어진 인라인 헤더입니다. 'Executive Cockpit' 라벨, 큰 제목, 부제, 우측 마지막 갱신 시간으로 구성.

Total Inventory

$14.45B

across 8 LE

Slow Inventory

$6.24B

43.2% of total

Aging 366+

$4.05B

immediate attention

Slow SKUs

7.1K

of 47.4K active

Forecast Accuracy

84%

last 24 months

Datasets Live

in dhub

KpiCard × 6

컴포넌트

KpiCard × 6

components/KpiCard.tsx

KPI 한 칸짜리 카드. label/value/sublabel/icon/trend/highlight 6개의 prop 을 받아서 표시. highlight='warning' 이면 노란 테두리, 'critical' 이면 빨간 테두리. 6번 반복 호출해서 6개 카드가 만들어집니다.

AI Insights·dhub Agent slow-inventory-orchestrator 가 오늘 08:30 분석 완료

SEC-KR 47개 SKU가 30일 내 부진재고 전환 예측

$2.4M

FORECAST_BIAS 패턴 26개 + ECO_LEFTOVER 12개 + EOL_DELAY 9개. AI가 forecast 곡선과 ECO 발생 시점 분석 결과 도출.

Cross-LE 불균형: SEV-VN 부족 ↔ SEC-KR 과잉 12개 SKU

$850.0K

재배치로 즉시 해소 가능. 추천 액션 8건이 Action Center에 대기 중.

ECO-002847 영향 R3 revision 입고 1,247단위 발견

$320.0K

ECO 적용 후에도 구형 R3 revision 입고가 계속됨. Knowledge RAG에서 ECO 문서 자동 인용.

AiAlertBanner

컴포넌트

AiAlertBanner

components/AiAlertBanner.tsx

dhub Agent 가 자동 생성한 인사이트를 카드 형태로 보여줌. severity (critical/warning/info) 에 따라 색이 다름. 데이터는 cockpit.json 의 ai_alerts 배열에서 옴. 실제 시연에선 이 카드들이 매일 아침 갱신되는 걸 강조.

Global Inventory Distribution (3D)

막대 높이 = 재고가치, 색상 = 건전성, 호(arc) = 본사↔지점 운영 흐름

8 / 8 entities

🌍 지구본 로딩 중...

Good Warning Critical

막대 높이 = 재고가치 · 호(arc) = 본사↔불균형 법인 흐름

🖱️ 드래그 회전 · 휠 줌 · 노드/사이드 클릭 시 줌인

Legal Entities · sorted by slow %

Globe3D

컴포넌트

Globe3D

components/Globe3D.tsx

Three.js 기반 3D 지구본 (react-globe.gl 라이브러리 사용). 8개 법인 위치에 막대(bar) 가 솟아있음. 막대 높이=재고가치, 색상=건전성. SEC-KR 본사에서 다른 법인으로 호(arc) 가 흐르며 글로벌 운영망 표현. 자동 회전, 드래그 회전, 휠 줌, 막대 클릭 시 카메라 줌인. WebGL 기반이라 ssr:false 로 dynamic import.

6-Month Trend

총 재고 vs 부진재고 추이

Slow ratio peak43.3%

TrendChart

컴포넌트

TrendChart

components/TrendChart.tsx

recharts 라이브러리의 AreaChart. 두 개의 면 그래프를 겹쳐 그림 — 파란색 = 총 재고, 빨간색 = 부진재고. 데이터는 cockpit.json 의 trend_6m 배열 (6개월치 월별).

Footer

컴포넌트

Footer

app/learn/page.tsx (이 파일 안)

페이지 맨 아래 작은 출처 표기 줄. 별도 컴포넌트 아니고 그냥 div. 영업적으로 'dhub 위에서 돌아갑니다' 를 슬쩍 끼워넣는 자리.