한계점을 감지해 modal 넣기

1. 한계점 감지하기

함수

const AboutProduct = () => {
   const trigger = useRef(false);
   const [openContent, setOpenContent] = useState(false);
   useEffect(() => {});

   useEffect(() => {
     const observer = new IntersectionObserver(obsHandler, { threshold: 0.5 });
     if (trigger.current) observer.observe(trigger.current);
     return () => {
       observer.disconnect();
     };
   }, []);
   useEffect(() => {
     window.onbeforeunload = function pushRefresh() {
       window.scrollTo(0, 0);
     };
   }, []);
   const obsHandler = () => {
     setOpenContent(prev => !prev);
   };

감지

<S.DetailTopContainer ref={trigger}>

 

오픈될 창

<S.MiniContainer index={openContent}>

 

이것의 단점은 새로고침이 되어야지 내가 원하는 곳에 붙게 되는거라 아쉬웠다. 다른 곳으로 갈때마다 굳이 새로고침을 설정하지 않아도 새로고침이 되어 페이지를 이동하면 처음부터 보게하게 하는법을 알아봐야겠다.