[chore] landing: 렌더되지 않던 ROI 시뮬레이터 제거
roi-simulator.tsx 는 어디에서도 import 되지 않아 화면에 나오지 않았다.
누락이 아니라 의도적으로 내린 것이다 — 9ccf42c("카피 정직화")에서 <ROISimulator /> 를
빼고 그 자리에 <Comparison />, <Faq /> 를 넣었다.
되살리지 않는 이유는 파일 자체에 있다. 카피는 "아직 실제 도입 실증 사례가 없는
신규 카테고리"라고 스스로 인정하면서 절감액을 제시하고, 계산은 근거 없는 추산이다
(협력사당 6.5시간). 브랜드 보이스 가드레일 통과 기준 3번 — 주장·수치에 출처가 붙어야
하고 출처 없는 주장은 FAIL — 과 정면으로 부딪힌다. 다시 붙이려면 근거부터 확보해야 한다.
range-slider.tsx 도 함께 지운다. 사용처가 roi-simulator 하나뿐이라 같이 죽는다.
되살릴 일이 생기면 git 이력에 그대로 남아 있다.
남은 고아 두 개는 이번 작업과 무관한 기존 항목이라 두었다:
components/ui/price-sparkline.tsx
components/ui/slate-renderer.tsx
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
parent
ab77900dac
commit
631a501c5c
@ -1,156 +0,0 @@
|
|||||||
import { useState } from "react"
|
|
||||||
import { ArrowRight, Clock, ShieldCheck } from "lucide-react"
|
|
||||||
|
|
||||||
import { RangeSlider } from "@/components/ui/range-slider"
|
|
||||||
import { Section } from "@/components/ui/section"
|
|
||||||
import { SectionHeading } from "@/components/ui/section-heading"
|
|
||||||
import { Typography } from "@/components/ui/typography"
|
|
||||||
|
|
||||||
/** 도입 ROI 시뮬레이터 — 예산·협력사 수 슬라이더로 예상 절감액을 즉시 계산. */
|
|
||||||
export function ROISimulator() {
|
|
||||||
// 연간 총 구매 예산(억 원)
|
|
||||||
const [budget, setBudget] = useState(50)
|
|
||||||
// 관리 중인 협력사 수
|
|
||||||
const [suppliers, setSuppliers] = useState(50)
|
|
||||||
|
|
||||||
// 보수적 절감율 2.8%~4.5% — 협력사가 많을수록 병렬 대안이 늘어 상향
|
|
||||||
const savingRate = Math.min(0.045, 0.028 + (suppliers / 300) * 0.015)
|
|
||||||
const estimatedSavingsValue = budget * savingRate
|
|
||||||
|
|
||||||
// 협력사당 왕복 흥정 수작업 절약분을 ~6.5시간으로 잡은 추산
|
|
||||||
const savedHours = Math.round(suppliers * 6.5)
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Section id="benchmarks" width="lg" bordered className="border-b border-line">
|
|
||||||
<SectionHeading
|
|
||||||
align="center"
|
|
||||||
eyebrow="ROI Simulation"
|
|
||||||
title={
|
|
||||||
<>
|
|
||||||
네고시움 도입 시 <br />
|
|
||||||
예상 절감액 확인하기
|
|
||||||
</>
|
|
||||||
}
|
|
||||||
description={
|
|
||||||
<>
|
|
||||||
아직 실제 도입 실증 사례가 없는 신규 카테고리여도 신뢰할 수 있습니다. <br />
|
|
||||||
연간 구매 예산과 공급사 수만 입력해 보수적인 시뮬레이션 성과를 즉시 시각화해 보세요.
|
|
||||||
</>
|
|
||||||
}
|
|
||||||
descriptionClassName="max-w-2xl"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-16 items-start">
|
|
||||||
{/* 좌: 입력 슬라이더 */}
|
|
||||||
<div className="lg:col-span-6 space-y-12">
|
|
||||||
<div className="space-y-4">
|
|
||||||
<div className="flex justify-between items-center">
|
|
||||||
<label className="text-[16px] font-bold text-ink">연간 총 구매 예산</label>
|
|
||||||
<span className="text-lg font-black text-primary font-mono">{formatCurrency(budget)}</span>
|
|
||||||
</div>
|
|
||||||
<Typography variant="caption">원자재, 부자재, 가공비, 운송비 등 협상에 연동할 총 연간 구매 규모입니다.</Typography>
|
|
||||||
<div className="pt-2">
|
|
||||||
<RangeSlider min={5} max={1000} step={5} value={budget} onChange={setBudget} />
|
|
||||||
<div className="flex justify-between text-[11px] text-ink-faint font-bold pt-2">
|
|
||||||
<span>5억 원</span>
|
|
||||||
<span>500억 원</span>
|
|
||||||
<span>1조 원</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-4">
|
|
||||||
<div className="flex justify-between items-center">
|
|
||||||
<label className="text-[16px] font-bold text-ink">관리 중인 총 협력사 수</label>
|
|
||||||
<span className="text-lg font-black text-primary font-mono">{suppliers}개사</span>
|
|
||||||
</div>
|
|
||||||
<Typography variant="caption">에이전트가 동시에 1:1로 조율할 협력사 수입니다.</Typography>
|
|
||||||
<div className="pt-2">
|
|
||||||
<RangeSlider min={5} max={300} step={5} value={suppliers} onChange={setSuppliers} />
|
|
||||||
<div className="flex justify-between text-[11px] text-ink-faint font-bold pt-2">
|
|
||||||
<span>5개사</span>
|
|
||||||
<span>150개사</span>
|
|
||||||
<span>300개사</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex gap-3 bg-surface p-5 rounded-card border border-line">
|
|
||||||
<ShieldCheck className="w-5 h-5 text-positive flex-shrink-0 mt-0.5" />
|
|
||||||
<Typography variant="caption" className="text-ink-soft">
|
|
||||||
최저가 스캔(LPS) 시세와 B2B 협상 데이터의 보수적 평균(3.1~4.2% 절감)을 적용한 추정치입니다.
|
|
||||||
실제 데이터로 검증해 보시려면 파일만 주시면 됩니다.
|
|
||||||
</Typography>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 우: 결과 지표 */}
|
|
||||||
<div className="lg:col-span-6 lg:pl-10 space-y-12">
|
|
||||||
<div className="space-y-3">
|
|
||||||
<Typography variant="micro" className="text-primary block">
|
|
||||||
ESTIMATED ANNUAL SAVINGS
|
|
||||||
</Typography>
|
|
||||||
<h3 className="text-sm font-semibold text-ink-muted">매년 절감 가능한 구매 원가 (보수적 추산)</h3>
|
|
||||||
<div className="text-3xl sm:text-[44px] font-black text-primary font-mono tracking-tight leading-tight pt-1">
|
|
||||||
{formatSavings(estimatedSavingsValue)}
|
|
||||||
</div>
|
|
||||||
<Typography variant="caption" className="text-ink-soft font-medium pt-1">
|
|
||||||
그동안 손이 못 가던 꼬리 거래(Tail Spend)까지 동시에 협상합니다. 수동으로는 놓치던 구간입니다.
|
|
||||||
</Typography>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="border-t border-line pt-8 space-y-3">
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<Clock className="w-5 h-5 text-ink-muted" />
|
|
||||||
<span className="text-xs font-bold text-ink-soft">
|
|
||||||
연간 실무 단축 시간: <b className="text-ink font-mono text-sm ml-1">{savedHours.toLocaleString()}시간</b>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<Typography variant="caption">
|
|
||||||
메일 전송, 유선 협의, 엑셀 취합에 쓰이던 시간이 링크 한 번과 에이전트 응대로
|
|
||||||
완전히 생략되어 고부가가치 전략 구매 기획에 전념할 수 있습니다.
|
|
||||||
</Typography>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="border-t border-line pt-8 flex items-center justify-between">
|
|
||||||
<div>
|
|
||||||
<h4 className="text-xs font-bold text-ink">예상 도입 ROI 회수 기간</h4>
|
|
||||||
<p className="text-[11px] text-ink-muted font-semibold mt-1">도입 즉시 마진 확보 개시</p>
|
|
||||||
</div>
|
|
||||||
<a
|
|
||||||
href="#contact-section"
|
|
||||||
className="inline-flex items-center gap-2 text-xs font-bold text-primary hover:gap-3 transition-all"
|
|
||||||
>
|
|
||||||
<span>무상 맞춤 검증 신청하기</span>
|
|
||||||
<ArrowRight className="w-4 h-4" />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Section>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 억 원 단위 → "50억 원" / "1조 200억 원" 표기 */
|
|
||||||
function formatCurrency(val: number) {
|
|
||||||
if (val >= 100) {
|
|
||||||
const b = Math.floor(val / 100)
|
|
||||||
const m = val % 100
|
|
||||||
return m > 0 ? `${b}조 ${m}00억 원` : `${b}조 원`
|
|
||||||
}
|
|
||||||
return `${val}억 원`
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 억 원 단위 → "1억 5,500만 원" 표기 */
|
|
||||||
function formatSavings(val: number) {
|
|
||||||
const rawWon = val * 100000000
|
|
||||||
if (rawWon >= 100000000) {
|
|
||||||
const eonPart = Math.floor(rawWon / 100000000)
|
|
||||||
const manPart = Math.floor((rawWon % 100000000) / 10000)
|
|
||||||
if (manPart > 0) {
|
|
||||||
return `${eonPart}억 ${manPart.toLocaleString()}만 원`
|
|
||||||
}
|
|
||||||
return `${eonPart}억 원`
|
|
||||||
}
|
|
||||||
return `${Math.floor(rawWon / 10000).toLocaleString()}만 원`
|
|
||||||
}
|
|
||||||
@ -1,28 +0,0 @@
|
|||||||
type RangeSliderProps = {
|
|
||||||
min: number
|
|
||||||
max: number
|
|
||||||
step: number
|
|
||||||
value: number
|
|
||||||
onChange: (value: number) => void
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 채워진 트랙이 값을 따라가는 파란 슬라이더 (ROI 시뮬레이터·히어로 콘솔 공용). */
|
|
||||||
function RangeSlider({ min, max, step, value, onChange }: RangeSliderProps) {
|
|
||||||
const filled = ((value - min) / (max - min)) * 100
|
|
||||||
return (
|
|
||||||
<input
|
|
||||||
type="range"
|
|
||||||
min={min}
|
|
||||||
max={max}
|
|
||||||
step={step}
|
|
||||||
value={value}
|
|
||||||
onChange={(e) => onChange(Number(e.target.value))}
|
|
||||||
className="w-full h-1.5 rounded-control appearance-none cursor-pointer accent-primary transition-all"
|
|
||||||
style={{
|
|
||||||
background: `linear-gradient(to right, var(--color-primary) 0%, var(--color-primary) ${filled}%, var(--color-line-strong) ${filled}%, var(--color-line-strong) 100%)`,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export { RangeSlider }
|
|
||||||
Loading…
Reference in New Issue
Block a user