Haewon Kam
55e3ab02aa
디자인 시스템이 색·활자만 소유하고 간격은 각 섹션 파일에 흩어져 있어, 같은 관계에 값이 여러 개 생겼다. 스크롤할 때 섹션마다 호흡이 달라지던 원인. eyebrow → title 12/20px → 16px title → description 16/20/32px → 20px (display 티어 32px) 머리 → 본문 48~96px 5종 → 56px / 80px(md) 컨트롤 → 본문 56/64px → 48px 리드 → CTA 56/48px → 48px - SectionHeading 이 리듬을 소유하고 HEADING_GAP·CONTROL_GAP·CTA_GAP· DISPLAY_LEAD_GAP 를 노출. 섹션 파일에서 mb-24 같은 값을 직접 쓰지 않는다. - negotiation-demo·final-cta 가 Section/SectionHeading 을 우회해 머리를 직접 조판하고 있었다 — 아이브로우 간격이 이 둘만 20px 이던 원인. 프리미티브로 환원. - SectionHeading 이 eyebrow 없이도 빈 span 을 렌더해 유령 여백이 생기던 버그 수정. - descriptionClassName 의 text-[17px] 중복 선언 제거. lead 변형이 이미 갖고 있는 모바일 축소 단계(text-[16px] sm:text-[17px])를 지우고 있었다. - reinforcement: text-balance 가 쉼표를 넘어 끊던 헤드라인을 <br /> 로 명시. reinforcement 만 gap="none" 인데, 머리가 그리드 셀 안이라 마진이 상쇄되지 않아 items-center 정렬을 밀기 때문. 간격은 그리드 래퍼가 진다. 검증: tsc --noEmit 통과, 프로덕션 빌드 통과. DOM 실측으로 375/868/1440px 전 구간에서 머리→본문·eyebrow→title·컨트롤→본문 값 일치 확인. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
81 lines
4.2 KiB
TypeScript
81 lines
4.2 KiB
TypeScript
import { useRef, useState } from "react"
|
|
import { ArrowRight } from "lucide-react"
|
|
|
|
import { Button } from "@/components/ui/button"
|
|
import { CTA_GAP, DISPLAY_LEAD_GAP } from "@/components/ui/section-heading"
|
|
import { Typography } from "@/components/ui/typography"
|
|
import { CLUSTER_ANCHORS, DataFlowCanvas, type DataFlowPhase } from "@/components/ui/data-flow-canvas"
|
|
|
|
/**
|
|
* 다크 무대 히어로 — 배경 모션이 negotium 파이프라인 자체를 그린다.
|
|
*
|
|
* 캡션이 모션과 같이 움직이는 게 핵심이다. 입자가 예뻐서 넣은 게 아니라
|
|
* 지금 화면에서 무슨 일이 일어나는지 읽히게 하려고 넣었다.
|
|
*/
|
|
export function HeroDataFlow() {
|
|
const [phase, setPhase] = useState<DataFlowPhase>("scatter")
|
|
// 순환 링이 캔버스와 같은 시계로 돌도록 진행도를 공유한다.
|
|
const progressRef = useRef(0)
|
|
|
|
return (
|
|
<section
|
|
data-stage-hero
|
|
className="stage-bg relative min-h-screen text-on-stage flex flex-col overflow-hidden"
|
|
>
|
|
<DataFlowCanvas onPhaseChange={setPhase} progressRef={progressRef} className="absolute inset-0 w-full h-full" />
|
|
|
|
{/* 무대 바닥으로 떨어지는 암전 — 아래 라이트 섹션과의 경계를 부드럽게 */}
|
|
<div className="absolute inset-x-0 bottom-0 h-32 bg-linear-to-b from-transparent to-stage pointer-events-none" />
|
|
|
|
{/* 분류 단계에서만 뜨는 무리 라벨. 아이콘만으로는 "무엇이" 분류됐는지 절반만 전달된다.
|
|
좌표는 캔버스가 쓰는 값을 그대로 받아 써서 둘이 어긋날 일이 없다. */}
|
|
<div aria-hidden className="absolute inset-0 pointer-events-none z-10 hidden md:block">
|
|
{CLUSTER_ANCHORS.map((anchor) => (
|
|
<span
|
|
key={anchor.key}
|
|
className={`absolute -translate-x-1/2 -translate-y-1/2 whitespace-nowrap text-[13px] font-semibold text-on-stage-soft/80 transition-opacity duration-500 ${
|
|
phase === "cluster" ? "opacity-100" : "opacity-0"
|
|
}`}
|
|
style={{ left: `${anchor.screenX * 100}%`, top: `${anchor.labelY * 100}%` }}
|
|
>
|
|
{anchor.label}
|
|
</span>
|
|
))}
|
|
</div>
|
|
|
|
{/* 카피는 상단 55%, 데이터 흐름은 하단 밴드. 둘이 겹치지 않게 층을 나눈다. */}
|
|
<div className="relative z-10 max-w-4xl mx-auto px-6 w-full text-center pt-[104px] md:pt-[19vh]">
|
|
{/* 히어로 카피에는 진입 애니메이션을 걸지 않는다.
|
|
여기가 LCP 요소라 opacity:0 으로 시작하면 하이드레이션 전까지 첫 화면이 비고,
|
|
광고 유입처럼 JS 가 느린 환경에서 그대로 손실이 된다. 모션은 배경 캔버스가 맡는다. */}
|
|
{/* 2톤 헤드라인의 약한 쪽은 별도 회색이 아니라 같은 흰색의 투명도로 낮춘다.
|
|
네이비 위에 라벤더 회색을 얹으면 화면에 색상각이 하나 더 생겨 탁해진다. */}
|
|
<Typography variant="stageDisplay">
|
|
<span className="text-white">협력사 전원과 1:1로,</span>
|
|
<br />
|
|
<span className="text-on-stage-soft/60">동시에 협상합니다.</span>
|
|
</Typography>
|
|
|
|
{/* 히어로는 h1 이어야 해서 SectionHeading(h2 고정)을 못 쓴다. 대신 간격만은
|
|
같은 상수를 물려 최종 CTA 와 리듬이 어긋나지 않게 한다. */}
|
|
<p className={`${DISPLAY_LEAD_GAP} text-base sm:text-lg text-on-stage-soft leading-relaxed break-keep max-w-2xl mx-auto`}>
|
|
품목·목표가·마감일만 정하면 됩니다. 협상 에이전트가 협력사마다 따로 붙어 단가를 조율하고, 마감 시각에
|
|
최저 투찰가로 낙찰까지 판정합니다.
|
|
</p>
|
|
|
|
<div className={`${CTA_GAP} flex flex-col sm:flex-row gap-3 justify-center`}>
|
|
<Button href="#how-it-works" variant="stage" size="stageRound" className="group">
|
|
<span>직접 협상해 보기</span>
|
|
<ArrowRight className="w-4 h-4 transition-transform group-hover:translate-x-0.5" />
|
|
</Button>
|
|
<Button href="#contact-section" variant="stageGhost" size="stageRound">
|
|
도입 문의
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
</section>
|
|
)
|
|
}
|
|
|