모바일과 PC에서 지도가 잘 보이는데, 크롬버전 108.0.5359.98로 업데이트하면서 프린트시 해당 영역 밖으로도 지도가 노출되는 이슈가 발생하고 있습니다. 카카오지도 상위 element에 overflow: hidden 또한 누락되지 않은것 확인했으나 지속적으로 이슈가 나타나고 있습니다. 이번에 크롬업데이트로 인하여서 웹킷 문제일 가능성이 있어보여서 확인부탁드립니다!
현상을 확인할 수 있는 코드 함께 첨부 부탁드립니다.
네넵!! 코드 올리드립니닷!
import { FunctionComponent, useCallback, useMemo, useState } from "react";
import dynamic from "next/dynamic";
import { useObserver } from "mobx-react-lite";
import styled from "styled-components";
import ReportBalloonMapOverlay from "../../../../Map/NewKakaoMap/_components/MapOverlay/ReportBalloon";
import Initializer from "../SimilarRealPricePage/Map/Initializer";
import type {
IGeoPolygon,
IGeoMultiPolygon,
} from "../../../../../@types/geometry";
import type { TBounds, TLocation } from "../../../../../utils/@type/api/map";
import type { TTransformBounds } from "../../../../../utils/coordinates";
const Map = dynamic({
loader: import("tenel-react-kakao-map/build/Map"),
ssr: false,
});
interface IMapBlockProps {
className?: string;
currentPage?: boolean;
data: {
bounds?: TBounds | null;
height?: string;
level?: number;
title: string;
baseMapType?: "ROADMAP" | "SKYVIEW" | "HYBRID";
overlayMapTypes?: any;
address: {
common: string;
jibun: string;
pnu: string;
road: string;
};
mapCenter: TLocation;
location: TLocation;
geometry?: {
master: IGeoPolygon | IGeoMultiPolygon | null;
child: any[];
};
};
view?: boolean;
onTilesLoaded?: () => void;
onBoundChange?(e: { center: TLocation; zoomLevel: number }): void;
}
const MapBlock: FunctionComponent<IMapBlockProps> = (props) => {
return useObserver(() => {
const [zoomLevel, setZoomLevel] = useState(props.data.level ?? 4);
const [container, setContainer] = useState<HTMLElement | null>(null);
const address = useMemo(() => {
const jibunSplit = props.data.address?.jibun.split(" ") ?? [];
return {
dong: jibunSplit.slice(0, jibunSplit.length - 1).join(" "),
jibunNum: jibunSplit[jibunSplit.length - 1],
};
}, [props.data.address?.jibun]);
const transformBounds = useCallback(
(bounds: TBounds | null): TTransformBounds | undefined => {
if (!bounds) return;
return {
value: [
{ lat: bounds[0][0], lng: bounds[0][1] },
{ lat: bounds[1][0], lng: bounds[1][1] },
],
paddingTop: 60 * (props.view ? 1 : 1.4),
paddingBottom: 60 * (props.view ? 1 : 1.4),
paddingRight: 60 * (props.view ? 1 : 1.4),
paddingLeft: 60 * (props.view ? 1 : 1.4),
};
},
[props.data.bounds]
);
return (
<div className={props.className} ref={(ref) => setContainer(ref)}>
{container && (
<Map
container={container}
center={props.data.mapCenter}
level={zoomLevel}
bounds={transformBounds(props?.data?.bounds ?? null)}
baseMapType={props.data.baseMapType}
overlayMapTypes={props.data.overlayMapTypes}
onTilesLoaded={props.onTilesLoaded}
onIdle={({ position, zoomLevel }) =>
props.onBoundChange?.({ center: position, zoomLevel })
}
>
<Initializer
center={props.data.mapCenter}
relayout={props.currentPage || false}
/>
<ReportBalloonMapOverlay
theme="ppt-report"
title={props.data.title}
address={address}
loading={false}
location={props.data.location}
geometry={props.data.geometry || { master: null, child: [] }}
showDanjiOverlay={!props.data.geometry}
/>
{props.onBoundChange && (
<div className="map-controller-button map-level-container user-controller-area">
<div
className="map-level map-level-plus"
onClick={() => {
setZoomLevel((prevValue) => (prevValue -= 1));
}}
/>
<div
className="map-level map-level-minus"
onClick={() => {
if (5 !== zoomLevel) {
setZoomLevel((prevValue) => (prevValue += 1));
} else {
alert("더 이상 줌 레벨을 설정할 수 없습니다.");
}
}}
/>
</div>
)}
</Map>
)}
</div>
);
});
};
export default styled(MapBlock)`
width: 100%;
height: ${(props) => props.data?.height ?? "28rem"};
overflow: hidden;
position: relative;
.marker-summary {
.marker-summary-address {
font-size: 10px;
}
.marker-summary-title {
font-size: 10px;
}
}
.map-level-container {
min-width: 40px;
box-shadow: rgba(37, 54, 72, 0.4) 0px 1px 6px 0px;
background: #fff;
border-radius: 8px;
color: rgb(51, 51, 51);
font-size: 14px;
font-weight: bold;
height: 80px;
display: flex;
flex-direction: column;
z-index: 10;
position: absolute;
right: 24px;
top: 50%;
transform: translateY(-50%);
.map-level {
cursor: pointer;
width: 40px;
height: 50%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
&::after,
&::before {
content: "";
width: 16px;
border: 1px solid #666666;
position: absolute;
top: 48%;
left: 27%;
}
&.map-level-plus {
border-bottom: 1px solid #e1e5ea;
&::before {
transform: rotate(90deg);
}
}
}
}
`;
tenel-react-kakao-map은 공식적으로 제공하는 라이브러리가 아닌 점 참고해주시고
지도 크기를 사각형 박스 크기로 설정해서 확인 부탁드립니다.
그리고 크롬 108 버전에서 프린트 레이아웃 이슈에 대해 리포트가 되고 있습니다.
링크에 나온 방법 중 지도 스타일에 contain: strict을 적용해서 확인해주세요.
https://support.google.com/chrome/thread/191619088/print-preview-broken-in-last-update?hl=en