🌾 원료 시세 조회 · 동결건조 원가 계산기
농수산물 공공가격 API · 농촌진흥청 영양 DB 연동
{/* API 키 설정 — 서버에 AGRO_API_KEY 등록 시 입력 불필요 */}
서버 API 키 사용 중
{showApiKeyInput && (
<>
{ setApiKey(e.target.value); localStorage.setItem("phytolab-agro-apikey", e.target.value); }}
/>
키 발급 →
)}
{/* 검색 입력 */}
suggestions.length && setShowSug(true)}
onBlur={() => setTimeout(() => setShowSug(false), 150)}
onKeyDown={e => e.key === "Enter" && handleSearch()}
/>
{showSug && (
{suggestions.map((s, i) => (
selectSuggestion(s.name)}>
{s.name}
수분 {s.moisture}g/100g
))}
)}
{error &&
{error}
}
{/* 영양 DB 매칭 결과 */}
{nutrientInfo && (
📊 영양DB 매칭
{nutrientInfo.name}
수분 {nutrientInfo.moisture}g/100g
{nutrientInfo.energy != null && 에너지 {nutrientInfo.energy}kcal}
{nutrientInfo.protein != null && 단백질 {nutrientInfo.protein}g}
)}
{/* 조회 결과 */}
{result && (
소매 평균 시세
₩{result.avgPricePerKg.toLocaleString()}/kg
{result.avgPricePerGram && (
₩/g 환산
₩{result.avgPricePerGram}/g
)}
조회 건수
{result.latestItems.length}건
기간
{result.start}~{result.end}
{/* 최신 시세 테이블 */}
{result.latestItems.length > 0 && (
{result.latestItems.slice(0, 8).map((it, i) => (
{it.yearMonth}
{it.channelName}
{it.itemName}{it.varietyName ? ` (${it.varietyName})` : ""}
{it.gradeName}
{it.unitQty}{it.unit}
₩{it.pricePerKg.toLocaleString()}
))}
)}
{result.latestItems.length === 0 && (
해당 품목의 가격 데이터가 없습니다. 키워드를 달리 입력해보세요 (예: "깐마늘" → "마늘")
)}
)}
{/* 동결건조 분말 원가 계산기 — 접이식 */}
{result && result.avgPricePerKg > 0 && (
{showFreezeDry && (
<>
{fdResult && (
1kg 원물 단가₩{fdResult.rawUnitPrice.toLocaleString()} /kg
원물 {fdRawKg}kg 총 비용₩{fdResult.totalRawCost.toLocaleString()}
수분 {fdMoisture}% → 고형분 {fdResult.solidPct.toFixed(1)}%분말 {fdResult.powderYieldKg.toFixed(2)} kg
추가 제조원가+ ₩{fdMfgCost.toLocaleString()}
총 생산 비용₩{fdResult.totalCost.toLocaleString()}
동결건조 분말 최종 원가
₩{Math.round(fdResult.powderCostPerKg).toLocaleString()} /kg
= ₩{fdResult.powderCostPerG.toFixed(2)} /g
{onApplyPrice && (
)}
)}
)}
{/* 동결건조 미사용 시 원물 단가 직접 적용 */}
{result.avgPricePerGram && !fdResult && onApplyPrice && (
)}
)}
);
}
/* ─────────────────────────────────────────────────────────
NaN-safe 포맷 헬퍼
───────────────────────────────────────────────────────── */
function fmtWon(v, opts) {
return isFinite(v) ? v.toLocaleString(undefined, opts || { maximumFractionDigits: 0 }) : "계산 중";
}
function fmtFixed(v, d) {
return isFinite(v) ? v.toFixed(d ?? 1) : "–";
}
function fmtWonFixed(v, d) {
return isFinite(v) ? v.toFixed(d ?? 0) : "계산 중";
}
/* ─────────────────────────────────────────────────────────
컴포넌트 외부: 원료 시세 자동 일괄 조회
React 렌더 사이클 밖에서 실행 → window.__autoFetchedPrices 에 저장
완료 시 CustomEvent 발행 → Step4Cost가 구독해서 state 갱신
───────────────────────────────────────────────────────── */
window.__autoFetchedPrices = window.__autoFetchedPrices || {};
window.__autoFetchStatus = window.__autoFetchStatus || {};
async function runAutoFetch(ings) {
const key = ings.map(x => x.id).join(",");
if (window.__autoFetchKey === key) return; // 이미 조회 완료
window.__autoFetchKey = key;
for (let i = 0; i < ings.length; i++) {
const ing = ings[i];
window.__autoFetchStatus[ing.id] = "loading";
await new Promise(r => setTimeout(r, i === 0 ? 0 : 300));
const baseName = ing.name.replace(/\s*[（(【\[\(].*/g, "").trim();
try {
const res = await fetch(`/api/ingredient-price?keyword=${encodeURIComponent(baseName)}`);
const data = await res.json();
if (data.ok && data.avgPricePerGram) {
window.__autoFetchedPrices[ing.id] = data.avgPricePerGram;
window.__autoFetchStatus[ing.id] = "ok";
} else {
window.__autoFetchStatus[ing.id] = "fail";
}
} catch {
window.__autoFetchStatus[ing.id] = "fail";
}
// 매 원료 완료마다 이벤트 발행 → UI 즉시 갱신
window.dispatchEvent(new CustomEvent("autoFetchUpdate"));
}
}
/* ─────────────────────────────────────────────────────────
Step4Cost 메인 컴포넌트
───────────────────────────────────────────────────────── */
const Step4Cost = () => {
const fPhyto = PHYTO_DATA.formula;
const FALLBACK_COST = {
packaging: { liquidPack: 240, outerBox: 620, shipperBox: 180, label: 120, sterilization: 480 },
overhead: { labor: 780, utility: 340, qa: 320, depreciation: 420, logistics: 380 },
target: { wholesaleMarkup: 1.7, retailMarkup: 2.3, msrp: 39000 },
};
const rawC = PHYTO_DATA.cost;
const c = (rawC?.packaging && rawC?.overhead && rawC?.target) ? rawC : FALLBACK_COST;
const ctx = window.useFormula ? window.useFormula() : null;
const Reveal = window.RevealSection || (({ children }) => children);
// 로컬 폴백 state
const [localServings, setLocalServings] = useState(24);
const [localYield, setLocalYield] = useState(93);
const [localBatch, setLocalBatch] = useState(30000);
const [localMsrp, setLocalMsrp] = useState(45000);
const [localChannel, setLocalChannel] = useState("병원");
const [localPriceMode, setLocalPriceMode] = useState("example");
const [localCustomPrices, setLocalCustomPrices] = useState({});
// 원료 시세 패널 열기/닫기 + 빠른 조회 원료명
const [showPriceLookup, setShowPriceLookup] = useState(false);
const [lookupIngredient, setLookupIngredient] = useState(null); // null = 수동 입력, string = 자동조회
// 자동 시세 조회: window 글로벌 객체 구독 (React 렌더 외부에서 fetch 실행)
const [autoFetchTick, setAutoFetchTick] = useState(0); // 이벤트 수신 시 증가 → 리렌더
// autoFetchedPrices/Status는 window 객체에서 직접 읽음
const autoFetchedPrices = window.__autoFetchedPrices;
const autoFetchStatus = window.__autoFetchStatus;
// window 이벤트 구독 (1회만)
const fetchListenerRef = React.useRef(false);
if (!fetchListenerRef.current) {
fetchListenerRef.current = true;
window.addEventListener("autoFetchUpdate", () => setAutoFetchTick(t => t + 1));
}
// 원료 목록이 준비되면 runAutoFetch 호출
const currentIngsForFetch = ctx?.ings || fPhyto?.ingredients || [];
const ingsToFetch = currentIngsForFetch.filter(x => x.id !== "wat");
if (ingsToFetch.length > 0) runAutoFetch(ingsToFetch);
const servingsPerBox = ctx?.servings ?? localServings;
const setServingsPerBox = ctx?.setServings || setLocalServings;
const yieldOverall = ctx?.yieldOverall ?? localYield;
const setYieldOverall = ctx?.setYieldOverall || setLocalYield;
const batchSize = ctx?.batchSize ?? localBatch;
const setBatchSize = ctx?.setBatchSize || setLocalBatch;
const msrp = ctx?.msrp ?? localMsrp;
const setMsrp = ctx?.setMsrp || setLocalMsrp;
const channel = ctx?.channel ?? localChannel;
const setChannel = ctx?.setChannel || setLocalChannel;
// 원료 단가: 예시 단가(example) vs 기업이 직접 입력한 자사 단가(custom)
const priceMode = ctx?.priceMode ?? localPriceMode;
const setPriceMode = ctx?.setPriceMode || setLocalPriceMode;
const customPrices = ctx?.customPrices ?? localCustomPrices;
const updateCustomPrice = ctx?.updateCustomPrice || ((id, val) => setLocalCustomPrices(prev => {
if (val === null || val === undefined || isNaN(val)) { const next = {...prev}; delete next[id]; return next; }
return {...prev, [id]: Math.max(0, val)};
}));
// 예시 단가: autoFetchedPrices 우선, 없으면 ing.price(추정값) fallback
// ※ ctx?.priceFor 는 autoFetchedPrices를 모르므로 항상 로컬 함수 사용
const priceFor = (ing) => {
if (priceMode === "custom" && customPrices[ing.id] != null) return customPrices[ing.id];
if (priceMode === "example" && autoFetchedPrices[ing.id] != null) return autoFetchedPrices[ing.id];
return ing.price;
};
// 원가 계산 — priceFor는 autoFetchedPrices 반영한 로컬 함수로 항상 직접 계산
const currentIngs = ctx?.ings || fPhyto.ingredients;
const ingCostPerPack = currentIngs.reduce((s, x) => s + x.amount * priceFor(x) / (x.yieldPct/100), 0);
const rawPerBox = ingCostPerPack * servingsPerBox / (yieldOverall/100);
const packPerBox = ctx?.packPerBox ?? (c.packaging.liquidPack * servingsPerBox + c.packaging.outerBox + c.packaging.shipperBox + c.packaging.label + c.packaging.sterilization);
const ohPerBox = c.overhead.labor + c.overhead.utility + c.overhead.qa + c.overhead.depreciation + c.overhead.logistics;
const ohAdjusted = ctx?.ohAdjusted ?? (ohPerBox * (30000 / Math.max(1, batchSize)) ** 0.15);
const totalCost = ctx?.totalCost ?? (rawPerBox + packPerBox + ohAdjusted);
const wholesale = totalCost * c.target.wholesaleMarkup;
const marginPct = ctx?.marginPct ?? (((msrp - totalCost) / msrp) * 100);
const f = fPhyto;
// 인라인 토스트 상태
const [applyToast, setApplyToast] = useState(null);
function showToast(msg, isOk) {
setApplyToast({ msg, isOk });
setTimeout(() => setApplyToast(null), 3500);
}
// 원료 시세 조회 결과 → 자사단가 + 예시단가 동시 적용 핸들러
function handleApplyIngredientPrice(keyword, pricePerG) {
// 원료 이름으로 id 매칭 시도 (부분 일치)
const kwLower = keyword.replace(/\s/g, "").toLowerCase();
const ing = f.ingredients.find(x =>
x.name.replace(/\s/g, "").toLowerCase().includes(kwLower) ||
kwLower.includes(x.name.replace(/\s/g, "").toLowerCase())
);
if (ing) {
// 예시단가 탭에도 API 조회가로 갱신 (🟢 표시)
setAutoFetchedPrices(prev => ({ ...prev, [ing.id]: pricePerG }));
setAutoFetchStatus(prev => ({ ...prev, [ing.id]: "ok" }));
// 자사단가 탭으로 전환 + 적용
setPriceMode("custom");
updateCustomPrice(ing.id, pricePerG);
setLookupIngredient(null); // 자동조회 키 초기화
showToast(`✅ "${ing.name}" → ₩${pricePerG.toFixed(2)}/g 자사단가 적용`, true);
} else {
showToast(`"${keyword}"와 일치하는 배합 원료 없음 — 자사단가 탭에서 직접 수정`, false);
}
}
// FSMP 채널 (병원·요양시설·급여 채널 반영)
const channelFees = { "병원": 0.18, "요양시설": 0.15, "약국·H&B": 0.28, "온라인 D2C": 0.12, "홈쇼핑": 0.35 };
const fee = channelFees[channel] || 0;
const netRevenue = msrp * (1 - fee);
const opProfit = netRevenue - totalCost;
const opProfitPct = msrp > 0 ? (opProfit / msrp) * 100 : 0;
const parts = [
{ label: "원료비", value: isFinite(rawPerBox) ? rawPerBox : 0, color: "oklch(0.72 0.16 235)" },
{ label: "부자재·살균", value: isFinite(packPerBox) ? packPerBox : 0, color: "oklch(0.78 0.14 195)" },
{ label: "제조간접비", value: isFinite(ohAdjusted) ? ohAdjusted : 0, color: "oklch(0.7 0.16 275)" },
];
const total = parts.reduce((s,x)=>s+x.value, 0);
return (
{label}
{display}
onChange(+e.target.value)}
className="sim-slider"
style={{"--pct": `${pct}%`}} />
{format ? format(min) : min}{format ? format(max) : max}
);
}
function ChannelBar({ msrp, fee, cost }) {
const feeAmt = msrp * fee;
const feePct = (feeAmt / msrp) * 100;
const costPct = (cost / msrp) * 100;
const profitPct = Math.max(0, 100 - feePct - costPct);
return (