TIL)노마드코더 React hooks(3)

//scroll에 따라 변하는 hooks
const useScroll= () => {
const [state,setState] = useState({x:0,y:0});
const onScroll = () => {
  setState({x:Window.scrollX,y:window.scrollY})
}
useEffect(()=> {
  window.addEventListener("scroll",onScroll)
  return () => window.removeEventListener("scroll",onScroll)
},[])
  return state;
}

export default function App() {
  const {y} = useScroll();
  return (
    <div className="App" style={{height : "1000vh"}}>
      <h1 style={{position:"fixed",color: y > 10 ? "red": "blue"}}>hi</h1>
    </div>
  );
}

//contents fullscreen on&off 기능
const useFullscreen = (onFulls) => {
  const element = useRef();
  const triggerFull = () => {
    if (element.current) {
      element.current.requestFullscreen();
      if(onFulls && typeof onFulls === "function") {
        onFulls(true)
      }
    }
  };
  const exitFUll = () => {
    //원상복구할때는 document를 사용..왜인지는 모름..
    document.exitFullscreen();
    if(onFulls && typeof onFulls === "function") {
      onFulls(false)
    }
  };
  return { element, triggerFull, exitFUll };
};

export default function App() {
  const onFulls = (e)=> {
    console.log( e ? "good" : "bad")
  }
  const { element, triggerFull, exitFUll } = useFullscreen(onFulls);
  return (
    <div className="App" style={{ height: "1000vh" }}>
      <div ref={element}>
        <img
          alt="i"
          src="https://ssl.pstatic.net/melona/libs/1443/1443905/48bda2f142ea0bbe369a_20230414132123951.jpg"
        />
      </div>
      <button onClick={triggerFull}>aa</button>
      <button onClick={exitFUll}>aa2</button>
    </div>
  );
}