[fix] landing: 히어로 카피와 입자 밴드 겹침 — 경계를 구조로 강제
버튼 행이 입자 밴드를 파고들었다. 1280x720 에서 34px, 무리 라벨과는 7px. 1440x900 에서만 여유가 있어(45px) 안 보이던 문제다. 원인은 두 값이 서로 다른 기준으로 움직인 것: 카피 상단 여백 19vh 화면 비율 카피 높이 351px 고정 밴드 시작 0.63×높이 화면 비율 카피만 px 고정이라 화면이 짧아지면 밴드가 카피를 덮는다. 0.19H + 351 > 0.63H → H < 798px 이면 전부 겹친다. 1280x720, 1366x768 같은 흔한 노트북 높이가 여기 들어간다. pt-[19vh] 는 위치만 잡을 뿐 경계를 강제하지 못한다. 그래서: - 카피 영역 높이를 밴드 시작선에 묶었다. 뷰포트와 무관하게 구조적으로 못 겹친다. - BAND_TOP 을 export 해 캔버스와 카피가 같은 값을 쓴다. 라벨 좌표가 이미 쓰던 방식이다. - 높이·밴드를 한 식에서 뽑는다. 따로 두면 어긋난다 — 밴드를 63vh 로 두고 높이만 키웠더니 짧은 화면에서 변수가 실제 밴드보다 위를 가리켰다. - min-h 바닥 780px. 밴드 위 공간에 헤더(104)+카피(351)+여유(24)=479px 가 들어가려면 높이 760px 이 하한이라, 정렬만으로는 짧은 화면을 못 구한다. 살짝 스크롤될 뿐이다. - pt-[104px] 를 md 이상에서도 유지. 빼면 가운데 정렬이 카피를 fixed 헤더 밑으로 민다. 검증(실측, 음수 = 밴드 밖): 1280x620 +20 → -30, 헤더 여유 +12, 라벨 75px 1280x720 +34 → -30, 헤더 여유 +12, 라벨 75px 1440x900 -45 → -68, 헤더 여유 +50, 라벨 122px 375x812 -57, 헤더 여유 +6 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
parent
d3bcc61609
commit
7f15bc10d1
@ -1,10 +1,14 @@
|
||||
import type * as React from "react"
|
||||
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"
|
||||
import { BAND_TOP, CLUSTER_ANCHORS, DataFlowCanvas, type DataFlowPhase } from "@/components/ui/data-flow-canvas"
|
||||
|
||||
/** 히어로 최소 높이. 밴드 위에 헤더·카피가 들어갈 세로 예산의 하한(계산은 section 주석 참조). */
|
||||
const HERO_MIN_H = "780px"
|
||||
|
||||
/**
|
||||
* 다크 무대 히어로 — 배경 모션이 negotium 파이프라인 자체를 그린다.
|
||||
@ -20,7 +24,17 @@ export function HeroDataFlow() {
|
||||
return (
|
||||
<section
|
||||
data-stage-hero
|
||||
className="stage-bg relative min-h-screen text-on-stage flex flex-col overflow-hidden"
|
||||
className="stage-bg relative text-on-stage flex flex-col overflow-hidden"
|
||||
/* 높이와 밴드 시작선을 같은 식에서 뽑는다. 따로 쓰면 반드시 어긋난다 —
|
||||
밴드를 63vh 로 두고 높이만 키우면, 짧은 화면에서 변수가 실제 밴드보다 위를 가리킨다.
|
||||
밴드 위 공간(0.63×높이)에 헤더(104) + 카피(351) + 여유(24) = 479px 가 들어가야 하므로
|
||||
높이 바닥은 760px 이 하한이다. 780px 로 잡으면 짧은 화면은 살짝 스크롤될 뿐이다. */
|
||||
style={
|
||||
{
|
||||
minHeight: `max(100vh, ${HERO_MIN_H})`,
|
||||
"--band-top": `calc(${BAND_TOP} * max(100vh, ${HERO_MIN_H}))`,
|
||||
} as React.CSSProperties
|
||||
}
|
||||
>
|
||||
<DataFlowCanvas onPhaseChange={setPhase} progressRef={progressRef} className="absolute inset-0 w-full h-full" />
|
||||
|
||||
@ -43,8 +57,15 @@ export function HeroDataFlow() {
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 카피는 상단 55%, 데이터 흐름은 하단 밴드. 둘이 겹치지 않게 층을 나눈다. */}
|
||||
<div className="relative z-10 max-w-4xl mx-auto px-6 w-full text-center pt-[104px] md:pt-[19vh]">
|
||||
{/* 카피는 밴드 위 영역, 데이터 흐름은 하단 밴드.
|
||||
예전엔 pt-[19vh] 로 위치만 잡았는데 그건 경계를 강제하지 못한다 — 카피 높이는
|
||||
px 로 고정인데 밴드는 화면 비율로 내려오니, 뷰포트가 798px 보다 낮으면 버튼이
|
||||
밴드를 파고들었다(1280x720 에서 34px, 라벨과는 7px). 1440x900 에서만 안 보였다.
|
||||
카피 영역 높이를 밴드 시작선에 묶으면 뷰포트와 무관하게 구조적으로 겹칠 수 없다.
|
||||
1.5rem 은 밴드 위 최소 숨통.
|
||||
pt-[104px] 는 md 이상에서도 유지한다 — 헤더가 fixed 라 이걸 빼면 짧은 뷰포트에서
|
||||
가운데 정렬이 카피를 헤더 밑으로 밀어올린다(620px 높이에서 제목 상단 8px). */}
|
||||
<div className="relative z-10 w-full flex-none pt-[104px] md:h-[calc(var(--band-top)-1.5rem)] md:flex md:items-center"><div className="max-w-4xl mx-auto px-6 w-full text-center">
|
||||
{/* 히어로 카피에는 진입 애니메이션을 걸지 않는다.
|
||||
여기가 LCP 요소라 opacity:0 으로 시작하면 하이드레이션 전까지 첫 화면이 비고,
|
||||
광고 유입처럼 JS 가 느린 환경에서 그대로 손실이 된다. 모션은 배경 캔버스가 맡는다. */}
|
||||
@ -72,6 +93,7 @@ export function HeroDataFlow() {
|
||||
도입 문의
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
@ -58,7 +58,9 @@ export type DataFlowPhase = (typeof PHASES)[number]["key"]
|
||||
|
||||
/* 구도는 화면 하단 밴드에 앉힌다. 헤드라인·CTA 는 그 위에 서고, 데이터는 무대 바닥을
|
||||
흐르는 그림. 아래 목표 좌표는 전부 밴드 기준 지역 좌표(0..1)로 쓰고 band() 로 옮긴다. */
|
||||
const BAND_TOP = 0.63
|
||||
/* 히어로 카피도 이 값을 읽어 자기 높이를 잡는다 — 카피가 밴드를 침범하지 않는 건
|
||||
두 숫자가 우연히 안 만나서가 아니라 같은 값을 공유하기 때문이어야 한다. */
|
||||
export const BAND_TOP = 0.63
|
||||
const BAND_H = 0.30 /* 히어로 하단 전체. 순환 링은 강화학습 섹션으로 옮겼다. */
|
||||
const band = (localY: number) => BAND_TOP + localY * BAND_H
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user