안녕하세요. 카카오 맵 api를 이용해 로드뷰를 구현중입니다.
로드뷰 컨테이너를 Resizable 컴포넌트로 감싸 드래그로 사이즈를 바꿔줄 수 있게 만들었습니다.
resize 후 로드뷰 객체를 relayout() 해주었을때 화면 깨짐 현상이 발생합니다.
mouse over 하면 그제서야 정상적으로 표출됩니다.
시연 영상
테스트 코드(react + ts)
export function Test() {
const rvContanier = useRef<HTMLDivElement>(null);
const [rv, setRv] = useState<kakao.maps.Roadview>();
useEffect(() => {
if(!rvContanier.current) return;
const rv = new kakao.maps.Roadview(rvContanier.current, {panoId: 507541});
setRv(rv);
}, [])
return (
<>
<Resizable
defaultSize={{ width: "30vw", height: "30vh" }}
>
<Box
bd="1px solid red"
w="100%"
h="100%"
ref={rvContanier}
>
</Box>
</Resizable>
<Button onClick={() => rv?.relayout()}>relayout</Button>
</>
)
}