가상 농산물 유통회사의 외부 기업 홈페이지(PUBLIC) 와 내부 AI Agent 운영 시스템(ADMIN) 을 함께 담은 정적 프로토타입입니다. 기준 문서는 프로젝트_정의서_v0.5입니다.
회사명은 햇들 농산(영문
HAETDEUL AGRI)으로 확정했습니다. 화면에 쓰이는 이름은js/core/shared.js의BRAND상수 한 곳에서만 관리합니다.
저장소 루트의 index.html(기업 홈페이지)을 브라우저로 열면 됩니다. 로그인하면 admin.html(운영 시스템)로 들어갑니다.
PUBLIC WEBSITE LOGIN ADMIN
index.html → login.html → admin.html
company / business
market / partners
disclosure
UI/
├── index.html # PUBLIC 홈
├── company.html # 회사소개
├── business.html # 유통사업
├── market.html # 공개 시장정보
├── partners.html # 파트너
├── disclosure.html # 공개 경영정보
├── login.html / signup.html # 로그인 · 회원가입
├── admin.html # ADMIN 앱 셸 (Sidebar · Header · Chatbot)
├── 400·401·403·404·500·503·offline.html
├── assets/ # 동작·표정·턴어라운드별 개별 마스코트 PNG
├── css/
│ ├── common.css # 공통 CSS 엔트리 (토큰 · 타이포)
│ ├── style.css # ADMIN 디자인 언어와 공통 컴포넌트
│ ├── components/ # 마스코트 · 로딩 · 모바일 내비게이션
│ ├── public/public.css # PUBLIC 레이아웃 전용
│ └── pages/ # ADMIN 라우트별 스타일
├── js/
│ ├── core/
│ │ ├── shared.js # BRAND · 포맷터 · 마크업 헬퍼 (PUBLIC/ADMIN 공용)
│ │ ├── config.js # ADMIN 내비게이션 그룹 · 상태 · 축 정책(AXIS_POLICY)
│ │ ├── router.js # ADMIN 라우터와 접이식 사이드바
│ │ ├── page-registry.js # 메뉴 키와 화면 렌더러 매핑
│ │ ├── page-events.js # ADMIN 화면별 인터랙션
│ │ └── settings-events.js # 관리 화면 폼 동작
│ ├── public/
│ │ ├── shell.js # Sticky Header · Footer · 스크롤 리빌
│ │ ├── sections.js # 시세 보드 · 프로세스 · 파트너 등 섹션 조각
│ │ ├── pages.js # PUBLIC 화면 6종
│ │ └── app.js # PUBLIC 부트스트랩
│ ├── components/ # 예측 그래프 · 챗봇
│ ├── pages/ # ADMIN 화면 렌더러
│ ├── data/mock-data.js # API 교체 대상 Mock Data
│ ├── auth.js / error.js
│ └── app.js # ADMIN 부트스트랩
├── docs/nextjs-migration.md
└── .github/workflows/ # GitHub Pages 자동 배포
외부 사용자에게는 회사를 이해하고 → 신뢰하고 → 거래를 시작하는 흐름만 보여줍니다. Dashboard도, 내부 Agent 용어도 노출하지 않습니다.
| 화면 | 구성 |
|---|---|
| 홈 | Hero · 오늘의 시세 · 유통 프로세스 · 데이터 기반 의사결정 · 취급 품목 · 파트너 · 공개 경영정보 · CTA |
| 회사소개 | 회사 개요 · 운영 규모 · 보관/운송/품질 인프라 · 회사 정보 |
| 유통사업 | 5단계 프로세스 · 매입 판단 기준 · 운영 규모 · 취급 품목 |
| 시장정보 | 품목별 현재가 · 전일 대비 · 최근 20영업일 흐름 · 시세 요약표 |
| 파트너 | 거래처 유형 6종 · 거래처 등록 절차 · 산지 파트너 계약 |
| 경영정보 | 주요 경영지표 · 분기 실적 그래프와 표 · 공개 기준 고지 |
- 헤더는 Sticky이며 Sidebar를 쓰지 않습니다. 모바일에서는 햄버거 메뉴와 하단 고정 CTA로 바뀝니다.
- 시세는 실측 구간만 공개합니다. D+18 ML 예측 화면은 내부 전용입니다.
- 모든 수치에
Simulation Data배지를 붙여 실제 실적으로 오인되지 않게 합니다. - 마스코트는 Hero를 차지하지 않고 회사소개 보조 영역, 챗봇, 오류 화면에서만 씁니다.
내부 화면이 답하는 질문은 하나입니다. "오늘 회사가 어떤 상태이며, 어떤 의사결정을 승인해야 하는가?" 대시보드는 그 순서대로 내려갑니다.
기준일 / 시뮬레이션 일차 / as_of / 자율성 모드
↓
오늘의 상태 — 가용자금 · 재고 · 확정주문 · 예측
↓
오늘의 Agent Pipeline
T0 상태 스냅샷 → ML 가격 예측 → T1 매입 초안
→ T2 제약 검토 (재고·물류 / 영업 / 재무 병렬)
→ T3 오케스트레이터 조정 → Critic → 사람 최종 승인 → T4 반영
↓
오늘의 매입 시나리오 A · B · C
↓
가격 예측 D+1 ~ D+18 · 취급 품목 시세
사이드바는 기능을 줄이지 않고 그룹으로 접습니다.
| 그룹 | 화면 |
|---|---|
| 대시보드 | — |
| AI 의사결정 | 가격 예측 / 금일 제안 상세 / 제안 이력 / 시장 시세 / 매입 내역 / 매입 설정(상수값) |
| 운영 | 재고 현황 / 출고 이력 / 인력 관리 / 배송 현황 |
| 재무 | 자산 통합 / 지출 상세 / 보유 자산 현황 / 가용 자산 / 급여 관리 |
| 거래처 | 거래처 현황 / 거래 내역 / 영수증 출력 |
| 관리 | 회원 생성 / 회원 관리(최상위) / 회사 관리 / 외부 페이지 관리 / 이상치 탐지 알림 / 알림 로그 |
| 프로토타입 | 시뮬레이션 페르소나 / 오류 화면 미리보기 |
매입 > 금일 제안 상세가 정의서 §3.1의 하루 한 사이클을 그대로 담습니다.
| 단계 | 화면 영역 | 내용 |
|---|---|---|
| T0 | 대시보드 | 가용자금 · 재고 · 확정주문 · 예측을 전원에게 동일 배포 |
| T1 | 매입 초안 | 시나리오 2~3안. 예산 초과 인지 시 exceed_reason 명시 |
| T2 | 제약 검토 | 3부서 병렬 회신 = 판정 + 데이터 + 이유 + 변경안(suggested_adjustment) |
| T3 | 조정 · 검증 | 부서 변경안 결합, 사전 feedback 루프, Critic 검증 |
| — | 사람 승인 | 제한 모드이므로 사람이 최종 선택·승인 (§4) |
| T4 | 재무 · 재고 화면 | 승인 결과가 현금 · 재고 · 손익에 반영 |
관리 > 외부 페이지 관리에서 저장한 Hero 문구, 대표 이미지 설명, 회사 소개, 파트너 안내, 공개 경영정보 고지가 agriSim.publicSite에 저장되고, PUBLIC 화면이 publicSiteContent()로 즉시 읽습니다. 상호명·대표번호·위치·이메일은 회사 관리(agriSim.company)에서 관리하며 푸터와 회사소개에 함께 표시됩니다.
- 공통 디자인 토큰·브랜드·마스코트는 PUBLIC과 ADMIN이 공유하지만, 컴포넌트는 공유하지 않습니다. Dashboard Card를 외부 섹션에 재사용하지 않습니다.
- PUBLIC/ADMIN 공용 유틸은
js/core/shared.js에만 둡니다. 화면 전용 컴포넌트는 각 영역 폴더로 갑니다. - 화면 마크업은
html태그 템플릿을 사용합니다. 사용자 입력값은 반드시escapeHtml()을 거쳐야 합니다. - ADMIN의 반복 표·카드는
dataTable(),sectionCard(),kpiCards(),pageIntro()헬퍼로 만듭니다. - 이벤트는
bindPage()에 직접 누적하지 않고bindProposalPage처럼 기능별 바인더로 분리합니다. - HTML 문자열 안의 인라인
onclick은 쓰지 않고addEventListener로 연결합니다. - 백엔드 연결 시
window.AgriSimData를 API 응답 상태로 교체합니다. - 인증은 Mock 동작이며 실제 토큰이나 비밀번호를 저장하지 않습니다.
- 가격 숫자는 LLM이 만들지 않습니다.
js/data/mock-data.js의 시계열은 고정 시드 의사난수로 만든 ML 파이프라인 산출물 대역이며, 새로고침해도 같은 값이 재현됩니다. - 숫자를 포함한 주장에는
ref_id가 붙습니다. 스냅샷 카드, 제약 회신, 산출 근거 표에 모두 표기합니다. - 모든 조회는
as_of시점으로 자릅니다. 대시보드 상단 스트립과 근거 카드에 기준 시점을 항상 표시합니다. - 부서는 자기 축의 변경안만 냅니다 (§3.4.2).
js/core/config.js의AXIS_POLICY가logistics=수량·타이밍,sales=판매단가·수량,finance=금액을 코드 레벨에서 강제하고,checkAxisPolicy()결과를 제안 상세에 PASS/FAIL로 표시합니다. - 최종 결합 수량은 오케스트레이터만 산출합니다. 부서 카드에는 상한만, 결합 결과는 T3 카드에만 나타납니다.
- 완화 지시는 부서 변경안을 그대로 전달합니다 (§3.2). 사전 feedback 루프 카드에 전달 문구와 원본 출처를 함께 보여줍니다.
- 루프 예산은 사전 2회 · 사후 2회이며, 모두 소진되면
매입 보류로 안전 종료합니다. - 외부 화면에서는 내부 기술 용어를 번역합니다.
Finance Agent CONDITIONAL / axis=amount는 외부에서 "자금 안정성을 고려한 매입 의사결정"으로 표현합니다.
- 헤더의
홈페이지버튼으로 ADMIN에서 PUBLIC으로,로그인으로 PUBLIC에서 ADMIN으로 이동합니다. - 사이드바 그룹 제목을 누르면 접히고 펼쳐지며, 현재 화면이 속한 그룹은 항상 열려 있습니다.
- 대시보드의 시세 카드나 헤더 품목 선택을 바꾸면 그래프와 예측이 해당 품목 기준으로 갱신됩니다.
- 가격 예측 화면에서 소매가·중도매가·경락가 칩을 켜고 끌 수 있습니다. 그래프 위를 지나가면 세로 기준선 하나에 세 가격이 같은 시점 기준으로 표시되고, 예측 구간을 클릭하면 그 시점이 고정됩니다. 슬라이더도 같은 표식을 움직입니다.
- 금일 제안 상세에서 시나리오를 고르고 세 부서 축 검사 결과를 확인한 뒤 승인 · 재조정 요청 · 매입 보류를 선택할 수 있습니다.
관리 > 외부 페이지 관리에서 문구를 저장하면 기업 홈페이지 Hero와 CTA에 바로 반영됩니다.- 헤더 알림 버튼을 누르면 최근 알림 요약이 팝오버로 열리고, 항목을 누르면
관리 > 알림 로그의 해당 상세로 이동합니다. - 매입 설정, 회사 관리, 이상치 탐지 알림 값과 알림 확인 여부는
localStorage에 저장되어 새로고침 후에도 유지됩니다. - 사이드바
프로토타입 > 오류 화면 미리보기에서 400·401·403·404·500·503·오프라인 화면을 열 수 있습니다.
npx --yes prettier@3.6.2 --write "*.html" "css/**/*.css" "js/**/*.js" "README.md" "docs/*.md"포매팅 규칙은 .prettierrc.json, 제외 경로는 .prettierignore에서 관리합니다.
main 브랜치에 push하면 GitHub Actions가 저장소 루트의 정적 파일을 GitHub Pages에 배포합니다. 저장소 Settings → Pages의 Source는 GitHub Actions로 선택해야 합니다. 배포 시 첫 화면은 index.html, 즉 기업 홈페이지입니다.