From 48e0c46bc87d0fa671e1ad17531518475a968cf7 Mon Sep 17 00:00:00 2001 From: Haewon Kam Date: Thu, 1 Oct 2026 10:48:15 +0900 Subject: [PATCH] =?UTF-8?q?fix(contact):=20=EB=AC=B8=EC=9D=98=20=EB=AA=A8?= =?UTF-8?q?=EB=8B=AC=EC=9D=B4=20=ED=97=A4=EB=8D=94=20=EC=95=88=EC=97=90=20?= =?UTF-8?q?=EA=B0=87=ED=98=80=20=EC=9E=98=EB=A6=AC=EB=8D=98=20=EB=AC=B8?= =?UTF-8?q?=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Navbar 는 backdrop-blur-md 를 쓴다. backdrop-filter 가 걸린 요소는 position:fixed 자손의 기준 블록이 되므로, 모달 오버레이의 inset-0 이 뷰포트가 아니라 nav 박스(1396x80)로 잡혔다. 그 결과 모달이 헤더 높이 안에서 잘려 페이지 콘텐츠가 위를 덮는 것처럼 보였다. 오버레이를 document.body 로 포털한다. 조상의 기준 블록·쌓임 맥락에서 완전히 벗어나므로 푸터 등 다른 위치에서 열어도 같은 문제가 생기지 않는다. 실측: 수정 전 오버레이 높이 80px → 수정 후 893px(뷰포트와 일치), 화면 중앙 좌표가 모달 내부로 잡히는 것 확인. Co-Authored-By: Claude Opus 5 (1M context) --- src/components/ContactModal.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/components/ContactModal.tsx b/src/components/ContactModal.tsx index e59aeda..b73d9e8 100644 --- a/src/components/ContactModal.tsx +++ b/src/components/ContactModal.tsx @@ -8,6 +8,7 @@ * 두 종류로 보이지 않게 하기 위해서다. */ import { useEffect, useState } from 'react'; +import { createPortal } from 'react-dom'; import { AnimatePresence, motion } from 'motion/react'; import { ArrowRight } from 'lucide-react'; import { submitLead } from '../lib/submitLead'; @@ -76,7 +77,11 @@ export default function ContactModal({ open, onClose, source }: ContactModalProp return `mailto:${CONTACT_EMAIL}?subject=${encodeURIComponent('[INFINITH] 도입 문의')}&body=${encodeURIComponent(body)}`; }; - return ( + // 반드시 body 로 포털한다. 이 모달을 여는 Navbar 는 backdrop-blur-md 를 쓰는데, + // backdrop-filter 가 걸린 요소는 position:fixed 자손의 기준 블록이 된다. + // 그대로 두면 오버레이의 inset-0 이 뷰포트가 아니라 nav 박스(높이 80px)로 잡혀 + // 모달이 헤더 안에 갇혀 잘린다. 2026-10-01 프로덕션에서 실제로 그렇게 나왔다. + return createPortal( {open && ( )} - + , + document.body, ); }