리액트에서 스크롤 여부에 따라서 video가 자동재생 되도록 해야 했다. 나는 scrollevent를 사용해 autoplay속성을 setAttruibute로 적용해봤으나, 코드에는 autoplay속성이 들어갔는데 정작 재생이 안됬다. 스택오버플로와 코드박스를 참고하여 해결했다. import React, { useEffect, useRef } from "react"; import "./styles.css"; const App = () => { const videoRef = useRef(null); useEffect(() => { let options = { rootMargin: "0px", threshold: [0.25, 0.75] }; let handlePlay = (entries, observer) =..
왜인지 아래 속성이 두개 다 되지 않았다. function close(){ document.querySelector(".modal").classList.add("hidden"); document.querySelector(".modal").style.display("none"); }; 해결한 방법은 이렇다. 먼저 변수로 선언을 해주고, 속성을 더하는 식으로 했다. function ex() { let elem = document.querySelector('.modal'); elem.classList.add("hidden"); };
MUI tooltip을 커스텀하여 사용해보자. 보통 에 를 감싸 사용하는데, 나는 Routes에 감쌌다. MUI Tooltip에 arrow 부분이 default값으로 설정되어 있어서 동떨어져 있었다. styleOverrides부분에 arrow &::before를 추가했다. 전체 코드 Routers.tsx import { createTheme, ThemeProvider } from '@mui/material'; const Routers = () => { const theme = createTheme({ components: { MuiTooltip: { styleOverrides: { arrow: { '&::before': { color: 'rgba(0, 0, 0, 0.6)', }, }, tooltip: {..
