Haewon Kam
6785c8a6f4
레퍼런스(statworx·jitter·infinith) 실측값으로 디자인 시스템을 다시 잡고, 스크롤 재생형 콘솔을 사용자가 직접 협상하는 데모로 교체했다. 디자인 토큰 - 타이포: 굵기·크기·자간을 함께 조정(섹션 제목 44→64px/600→800/자간 -0.042em). 한글 행간은 1.07 — 라틴 기준 0.95 를 쓰면 네모틀이 꽉 차 줄이 닿는다. - 모서리: 12가지로 흩어져 있던 값을 card 8px / control 4px / full 셋으로 수렴. 20~32px 짜리 뭉툭한 카드가 제네릭 SaaS 의 가장 강한 신호였다. - 다크 무대 토큰 신설(stage/on-stage/counter) + 배경 그라데이션. - primary-on-stage(#7C8CFF) 추가 — #0101F3 은 무대 배경 대비 2.0:1 로 WCAG 최소(4.5:1)의 절반도 안 돼 다크 위에서 읽히지 않았다. - 영문 디스플레이 서체 Playfair Display self-host(latin 서브셋 39KB). 히어로 - 배경 캔버스가 실제 파이프라인을 그린다: 수집→분류→대조→산정→협상→학습. 분류 단계는 거래 품목(시트)·사용자·협력사로 갈라지고 라벨이 붙는다. - z 좌표 + 원근 투영. 군집마다 z 평면을 하나씩 줘 격자는 온전한 채 깊이만 생긴다. - 순환 링(정원, 점선 궤도 회전). 진행도는 ref 로 공유해 60fps 리렌더를 피한다. - 카피에 진입 애니메이션을 걸지 않는다 — LCP 요소라 opacity:0 으로 시작하면 하이드레이션 전까지 첫 화면이 빈다. 협상 데모 (신규) - 역할 선택(공급사/구매 담당자) → 품목·단가 제시 → 턴 협상 → 낙찰/개찰 → 상담 신청. - 판정 규칙은 실제 엔진과 동일: 앵커링가 이하 낙찰, 협상 카드 3장, 소진 시 개찰. - 로직은 lib/negotiation-sim.ts 순수 함수로 분리 — 나중에 agent 서비스 연동 시 컴포넌트를 건드리지 않는다. 카피 감사 - "봇" 21곳 → "에이전트"(로봇 아이콘 3개 포함). 대리인은 조달 실무의 정당한 역할이다. - "악역은 봇이", "단가를 깎는 악역" 제거 — 협력사를 적으로 규정하는 프레임은 같은 페이지 FAQ(공급사 만족도 82%)와 모순이고, 동반성장 평가를 받는 대기업 구매팀 결재 라인에 올릴 수 없다. - 번역투 최상급(초정밀·압도적·완벽히·최적의)과 데모 대화문 전면 재작성. 버그 수정 - 헤더가 흰 배경 위에 흰 글자 버튼을 그리던 문제. onStage 를 스크롤 수치로 계산해 하이드레이션 전 스크롤 복원 시 초기값이 굳었다 → IntersectionObserver 로 교체. - 버튼 transition-all → transition-colors (variant 교체 시 배경 플리커). - 폼 입력 14px → 16px. iOS 사파리는 16px 미만 입력에 포커스하면 화면을 확대해 모바일 폼 이탈을 만든다. 정리 - 대체된 히어로 3종·기존 협상 콘솔 삭제(약 760줄). - 라벨 아이콘·알약 배지·blur(120px) 글로우 블롭 제거. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
80 lines
2.9 KiB
TypeScript
80 lines
2.9 KiB
TypeScript
import { motion } from "motion/react"
|
|
import { GitMerge, RefreshCw, Scale, type LucideIcon } from "lucide-react"
|
|
|
|
import { Section } from "@/components/ui/section"
|
|
import { SectionHeading } from "@/components/ui/section-heading"
|
|
import { Typography } from "@/components/ui/typography"
|
|
import { useFadeUp } from "@/lib/motion"
|
|
|
|
/** 강화학습 섹션 — 협상할수록 좋아진다는 3개 필러 카드. */
|
|
export function Reinforcement() {
|
|
const fadeUp = useFadeUp()
|
|
|
|
return (
|
|
<Section id="reinforcement" bg="stage">
|
|
<motion.div {...fadeUp} className="mb-20">
|
|
<SectionHeading
|
|
className="text-center md:text-left"
|
|
tone="stage"
|
|
eyebrow="Reinforcement Learning"
|
|
title="협상할수록, 더 좋은 조건으로"
|
|
description={
|
|
<>
|
|
잘 깎는 요령은 담당자 머릿속에만 남고, 결과는 그날 컨디션에 흔들립니다. negotium은 지난 거래 기록과
|
|
협력사가 거절한 지점을 <span className="font-semibold text-on-stage">강화학습</span>에 넣습니다. 어디까지가
|
|
받아들여지는 선인지를 데이터로 익혀서, 결렬 없이 도달 가능한 최선을 찾아갑니다.
|
|
</>
|
|
}
|
|
descriptionClassName="mt-8 max-w-3xl"
|
|
/>
|
|
</motion.div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
{PILLARS.map((pillar, idx) => (
|
|
<PillarCard key={pillar.title} pillar={pillar} delay={0.1 * (idx + 1)} />
|
|
))}
|
|
</div>
|
|
</Section>
|
|
)
|
|
}
|
|
|
|
type Pillar = { icon: LucideIcon; title: string; description: string }
|
|
|
|
function PillarCard({ pillar, delay }: { pillar: Pillar; delay: number }) {
|
|
const fadeUp = useFadeUp(delay)
|
|
|
|
return (
|
|
<motion.div {...fadeUp} className="bg-stage-raised border border-stage-line p-8 rounded-card flex flex-col justify-between h-[240px]">
|
|
<div className="w-11 h-11 rounded-control bg-primary/15 text-on-stage flex items-center justify-center">
|
|
<pillar.icon className="w-5 h-5" />
|
|
</div>
|
|
<div>
|
|
<Typography variant="cardTitle" className="mb-2 text-on-stage">
|
|
{pillar.title}
|
|
</Typography>
|
|
<Typography variant="caption" className="text-on-stage-soft">
|
|
{pillar.description}
|
|
</Typography>
|
|
</div>
|
|
</motion.div>
|
|
)
|
|
}
|
|
|
|
const PILLARS: Pillar[] = [
|
|
{
|
|
icon: Scale,
|
|
title: "협상 기준의 일관성",
|
|
description: "개인 감정이나 친분에 휘둘리지 않고, 사내 기준과 가이드라인대로만 협상합니다.",
|
|
},
|
|
{
|
|
icon: RefreshCw,
|
|
title: "쓸수록 올라가는 기준선",
|
|
description: "협상이 쌓일수록 기준선이 올라갑니다. 운영 기간이 그대로 협상력이 됩니다.",
|
|
},
|
|
{
|
|
icon: GitMerge,
|
|
title: "결렬 없는 합의",
|
|
description: "성사되지 않을 선까지 밀지 않습니다. 합의 가능한 범위 안에서 최선을 찾습니다.",
|
|
},
|
|
]
|