From 09d24f5022b8cb7c5ff3e91d4666dd517876eb62 Mon Sep 17 00:00:00 2001 From: Haewon Kam Date: Thu, 6 Aug 2026 11:17:16 +0900 Subject: [PATCH] =?UTF-8?q?[fix]=20landing:=20=EA=B5=AC=EB=A7=A4=EC=9E=90?= =?UTF-8?q?=20=EB=AA=A8=EB=93=9C=20=EC=9D=91=EC=88=98=EC=97=90=20=EB=AA=A9?= =?UTF-8?q?=ED=91=9C=EA=B0=80=20=EB=B0=98=EC=98=81=20=C2=B7=20=EB=AC=B4?= =?UTF-8?q?=EB=8C=80=20=EC=84=A0=ED=83=9D=EC=83=89=20=C2=B7=20=ED=94=8C?= =?UTF-8?q?=EB=A0=88=EC=9D=B4=20=ED=99=94=EB=A9=B4=20=EC=9C=A0=EB=A6=AC=20?= =?UTF-8?q?=ED=8C=A8=EB=84=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 구매 담당자 모드 공급사 모드와 같은 문제가 있었다. simulateBuyerRun 의 에이전트 첫 수가 marketLow 만 읊어서, 목표가를 얼마로 잡든 같은 문장이 나왔다 — 위임한 기준이 반영되는지 확인할 길이 없었다. 이제 목표가를 받았다고 명시하고, 시장 최저가 대비 위치에 따라 태도를 달리한다(근거부터 깔겠다 / 무리 없이 접근하겠다). 여는 말(협력사 정가 제시)은 아직 목표가를 모르는 시점이라 상수로 둔다. 무대 위 드래그 선택색 루트의 selection:text-primary 는 라이트 본문 기준이다. 그 값(#0101F3)을 무대(#070E24) 위에 얹으면 명암비 2.0:1 — app.css 의 --color-primary-on-stage 주석이 경고하는 바로 그 상황이다. 무대 섹션에서 텍스트를 드래그하면 글자가 사라졌다. .stage-bg / [data-stage-hero] 안에서는 무대용 액센트로 갈아끼운다. 플레이 화면 유리 패널 컨트롤과 대화 로그가 섹션 배경 위에 그냥 얹혀 있어 무대와 같은 색이라 경계가 없었고, 조작 가능한 영역인지 읽히지 않았다. 재질은 무대 위 2차 CTA 와 같게 맞췄다 — 화면 안에 재질이 두 종류면 따로 논다. 테두리는 white/12 로 얕게: 면이지 조작 요소가 아니라 버튼만큼 세우면 카드가 버튼처럼 보인다. Co-Authored-By: Claude Opus 5 --- landing/app/app.css | 11 +++++++++++ .../app/components/sections/negotiation-demo.tsx | 15 ++++++++++++++- landing/app/lib/negotiation-sim.ts | 11 ++++++++++- 3 files changed, 35 insertions(+), 2 deletions(-) diff --git a/landing/app/app.css b/landing/app/app.css index 3c183e1..e810418 100644 --- a/landing/app/app.css +++ b/landing/app/app.css @@ -107,6 +107,17 @@ radial-gradient(100% 100% at 50% 42%, var(--color-stage) 0%, var(--color-stage-deep) 100%); } +/* 드래그 선택 색. + 루트에 걸린 selection:text-primary 는 라이트 본문 기준이다. 그 값(#0101F3)을 다크 무대 + 위에 얹으면 명암비가 2.0:1 이라 — 위 --color-primary-on-stage 주석이 경고하는 바로 그 + 상황 — 무대 섹션에서 텍스트를 드래그하면 글자가 사라진다. + 무대 안에서는 무대용 액센트로 갈아끼운다. 라이트 본문은 기존 그대로. */ +.stage-bg ::selection, +[data-stage-hero] ::selection { + background-color: color-mix(in srgb, var(--color-primary-on-stage) 30%, transparent); + color: var(--color-on-stage); +} + html { scroll-behavior: smooth; background-color: #ffffff; diff --git a/landing/app/components/sections/negotiation-demo.tsx b/landing/app/components/sections/negotiation-demo.tsx index 7ad9b02..f295053 100644 --- a/landing/app/components/sections/negotiation-demo.tsx +++ b/landing/app/components/sections/negotiation-demo.tsx @@ -208,8 +208,20 @@ export function NegotiationDemo() { initial={{ opacity: 0, y: 16 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.28, ease: EASE_OUT_EXPO }} - className="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12" + /* 유리 패널로 띄운다. 컨트롤과 대화 로그가 섹션 배경 위에 그냥 얹혀 있으면 + 무대와 같은 색이라 경계가 없고, 조작할 수 있는 영역인지 읽히지 않는다. + 재질은 무대 위 2차 CTA 와 같다 — 옅은 흰 채움 + backdrop-blur + 위쪽 + 안쪽 하이라이트 + 아래로 깔리는 그림자. 화면 안에 재질이 두 종류면 따로 논다. + 테두리는 white/12 로 얕게 둔다. 이건 조작 요소가 아니라 면이라 버튼만큼 + 세울 필요가 없고, 세우면 오히려 카드가 버튼처럼 보인다. */ + className={ + "rounded-card border border-white/12 bg-white/[0.06] " + + "backdrop-blur-xl backdrop-saturate-150 " + + "shadow-[inset_0_1px_0_0_rgba(255,255,255,0.12),0_24px_60px_-24px_rgba(3,6,15,0.9)] " + + "p-6 sm:p-8 lg:p-10" + } > +
{/* 좌 — 품목·컨트롤·현재가 */}
@@ -412,6 +424,7 @@ export function NegotiationDemo() { )}
+
)} diff --git a/landing/app/lib/negotiation-sim.ts b/landing/app/lib/negotiation-sim.ts index 51bff6b..4233119 100644 --- a/landing/app/lib/negotiation-sim.ts +++ b/landing/app/lib/negotiation-sim.ts @@ -153,9 +153,18 @@ export function simulateBuyerRun(item: DemoItem, target: number): { turns: Turn[ // 에이전트는 기준 밖으로 나가지 않으므로 개찰로 끝난다 — 제품의 안전장치를 보여주는 케이스다. const reachable = target >= item.anchor + /* 에이전트의 첫 수는 사용자가 준 목표가를 물고 있어야 한다. 예전엔 marketLow 만 읊어서 + 목표가를 얼마로 잡든 같은 문장이 나왔다 — 위임한 기준이 반영되는지 확인할 수가 없었다. + 여는 말(협력사 정가 제시)은 아직 목표가를 모르는 시점이라 상수로 둔다. */ + const stance = + target < item.marketLow + ? `시장 최저가보다 낮은 목표라 근거부터 깔겠습니다.` + : `시장 최저가 선이라 무리 없이 접근하겠습니다.` push( "agent", - `같은 사양 인터넷 최저가가 ${won(item.marketLow)}원입니다. 연간 물량을 보증하면 어느 선까지 가능하신가요?`, + `목표가 ${won(target)}원 받았습니다. ${stance} 같은 사양 인터넷 최저가가 ${won( + item.marketLow, + )}원입니다. 연간 물량을 보증하면 어느 선까지 가능하신가요?`, item.marketLow, )