90 lines
3.4 KiB
TypeScript
90 lines
3.4 KiB
TypeScript
import React, { useState, useEffect, useRef, useCallback } from 'react';
|
|
import { createPortal } from 'react-dom';
|
|
|
|
// 현재 문서의 스타일(CSS)을 새 창으로 복사하는 함수
|
|
const copyStyles = (sourceDoc: Document, targetDoc: Document) => {
|
|
Array.from(sourceDoc.styleSheets).forEach(styleSheet => {
|
|
try {
|
|
if (styleSheet.cssRules) { // <style> 태그로 주입된 CSS
|
|
const newStyleEl = sourceDoc.createElement('style');
|
|
Array.from(styleSheet.cssRules).forEach(cssRule => {
|
|
newStyleEl.appendChild(sourceDoc.createTextNode(cssRule.cssText));
|
|
});
|
|
targetDoc.head.appendChild(newStyleEl);
|
|
} else if (styleSheet.href) { // <link> 태그로 연결된 CSS 파일
|
|
const newLinkEl = sourceDoc.createElement('link');
|
|
newLinkEl.rel = 'stylesheet';
|
|
newLinkEl.href = styleSheet.href;
|
|
targetDoc.head.appendChild(newLinkEl);
|
|
}
|
|
} catch (e) {
|
|
console.warn('스타일시트를 복사할 수 없습니다:', e);
|
|
}
|
|
});
|
|
};
|
|
|
|
interface NewWindowPortalProps {
|
|
children: React.ReactNode;
|
|
onClose: () => void;
|
|
title?: string;
|
|
}
|
|
|
|
const NewWindowPortal: React.FC<NewWindowPortalProps> = ({ children, onClose, title = "Detail" }) => {
|
|
const [container, setContainer] = useState<HTMLElement | null>(null);
|
|
const newWindowRef = useRef<Window | null>(null);
|
|
const onCloseRef = useRef(onClose);
|
|
|
|
// onClose 함수를 ref로 저장하여 의존성 문제 해결
|
|
useEffect(() => {
|
|
onCloseRef.current = onClose;
|
|
}, [onClose]);
|
|
|
|
const handleUnload = useCallback(() => {
|
|
onCloseRef.current();
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
// 이미 창이 열려있으면 새로 열지 않음
|
|
if (newWindowRef.current && !newWindowRef.current.closed) return;
|
|
|
|
// 1. 새 창을 열고 참조를 저장합니다.
|
|
newWindowRef.current = window.open('', title, 'width=900,height=800,resizable=yes,scrollbars=yes');
|
|
|
|
if (newWindowRef.current) {
|
|
newWindowRef.current.document.title = title;
|
|
|
|
// 2. React 컴포넌트를 마운트할 컨테이너 div를 생성하여 새 창의 body에 추가합니다.
|
|
const div = newWindowRef.current.document.createElement('div');
|
|
newWindowRef.current.document.body.appendChild(div);
|
|
setContainer(div);
|
|
|
|
// 3. 메인 창의 스타일을 새 창으로 복사합니다. (매우 중요)
|
|
copyStyles(document, newWindowRef.current.document);
|
|
|
|
// 4. 사용자가 창을 닫을 때 부모에게 알리기 위한 이벤트 리스너를 설정합니다.
|
|
// const handleUnload = () => {
|
|
// onClose();
|
|
// };
|
|
newWindowRef.current.addEventListener('unload', handleUnload);
|
|
|
|
// 5. 컴포넌트가 사라질 때 창을 닫는 클린업 함수를 반환합니다.
|
|
return () => {
|
|
if (newWindowRef.current) {
|
|
newWindowRef.current.removeEventListener('unload', handleUnload);
|
|
if (!newWindowRef.current.closed) {
|
|
newWindowRef.current.close();
|
|
}
|
|
}
|
|
};
|
|
} else {
|
|
alert('팝업이 차단되었습니다. 팝업 차단을 해제하고 다시 시도해주세요.');
|
|
onCloseRef.current();
|
|
// onClose();
|
|
}
|
|
}, [handleUnload, onClose, title]);
|
|
|
|
// `createPortal`을 사용해 children을 새 창의 container div에 렌더링합니다.
|
|
return container ? createPortal(children, container) : null;
|
|
};
|
|
|
|
export default NewWindowPortal; |