게임화면1 아이템 떨어지기

interface AnimationType {
  delay: number;
  duration: number;
  easing: string;
  iterations: number;
  // fill:string;
}
const MainPage = () => {
  const [score, SetScore] = useState<number>(0);
  const [imgUrl, setImgUrl] = useState<string[]>([]);
  const randomImg = imgUrl[Math.floor(Math.random()) * imgUrl.length];

  const keyframes = [
    { opacity: 0.9, transform: "translateX(0px)" },
    { opacity: 1, transform: "translate(0px, 500px)" },
  ];
  const options: AnimationType = {
    delay: 1000,
    duration: 4000,
    easing: "ease-in",
    iterations: 1,
  };


  const keyframes2 = [
    { opacity: 0.9, transform: "translateX(100px)" },
    { opacity: 1, transform: "translate(100px, 500px)" },
  ];
  const options2: AnimationType = {
    delay: 2000,
    duration: 4000,
    easing: "ease-in",
    iterations: 1,
  };

  const keyframes3 = [
    { opacity: 0.9, transform: "translateX(300px)" },
    { opacity: 1, transform: "translate(300px, 500px)" },
  ];
  const options3: AnimationType = {
    delay: 2000,
    duration: 4000,
    easing: "ease-in",
    iterations: 1,
  };

  const keyframes4 = [
    { opacity: 0.9, transform: "translateX(150px)" },
    { opacity: 1, transform: "translate(150px, 500px)" },
  ];
  const options4: AnimationType = {
    delay: 1000,
    duration: 4000,
    easing: "ease-in",
    iterations: 1,
  };



  
  const handleImgClick = () => {
    const blockImg = document.querySelector(".block");
    blockImg?.classList.remove("block");
    blockImg?.classList.add("disnone");
    SetScore(score + 1);
  };


  useEffect(() => {
    const storage = getStorage(firebaseApp);
    const imageRef = ref(storage, `img/`);

    listAll(imageRef)
      .then((response) => {
        const downloadURLPromises = response.items.map((item) =>
          getDownloadURL(item)
        );
        return Promise.all(downloadURLPromises);
      })
      .then((urls) => {
        setImgUrl(urls);
      })
      .catch((error) => {
        console.error("Error getting download URLs:", error);
      });

    document.querySelector("#imgMove0")?.animate(keyframes, options);
    document.querySelector("#imgMove1")?.animate(keyframes2, options2);
    document.querySelector("#imgMove2")?.animate(keyframes3, options3);
    document.querySelector("#imgMove3")?.animate(keyframes4, options4);
  }, []);
  console.log(randomImg);
  return (
    <div
      style={{
        position: "relative",
        background: "skyblue",
        height: "600px",
        width: "700px",
        margin: "auto",
      }}
    >
      <div>{score}</div>
        <div
        className="imgBox"
        style={{
          position: "relative",
          padding: "10px",
          background: "darkblue",
          height: "530px",
          display:"flex"
        }}
      >
        {imgUrl.map((item, index)=>
            <img
            key={index}
            id={`imgMove${index}`}
            className="block"
            src={item}
            alt="고양이 이미지"
            onClick={handleImgClick}
          />
        )}
     
      </div>
    </div>
  );
};

export default MainPage;

css옵션 타입
AnimationType
이미지를 움직일 애니메이션 css
keyframes : 이미지 위치
options: AnimationType : 이미지 움직임

총 4개를 만들어서 위에서 아래로 떨어 지는 코드

파이어베이스에서 이미지 불러오기

 listAll(imageRef)
      .then((response) => {
        const downloadURLPromises = response.items.map((item) =>
          getDownloadURL(item)
        );
        return Promise.all(downloadURLPromises);
      })
      .then((urls) => {
        setImgUrl(urls);
      })
      .catch((error) => {
        console.error("Error getting download URLs:", error);
      });

경로에서 불러온 이미지 setImgUrl(urls);로 전달 후id 값에 맞춰 이미지 이동

결과 : 이미지가 렌더링 될때 전부 다 출력 됨 코드를 저장 했을때 이미지가 움직이고
브라우저에서 새로고침하면 이미지가 안 움직임

useEffect(() => {
    const storage = getStorage(firebaseApp);
    const imageRef = ref(storage, `img/`);

    listAll(imageRef)
      .then((response) => {
        const downloadURLPromises = response.items.map((item) =>
          getDownloadURL(item)
        );
        return Promise.all(downloadURLPromises);
      })
      .then((urls) => {
          console.log('----------------urls');
        setImgUrl(urls);
      })
      .then(()=>{
        console.log('----------------animation');
        startAnimation();
      })
      .catch((error) => {
        console.error("Error getting download URLs:", error);
      });

     
  }, []);
  const startAnimation = ()=>{
    imgUrl.forEach((i,index)=>{
        console.log(index);
        const keyframes = [
            { opacity: 0.9, transform: `translateX(${index * 100}px)` },
            { opacity: 1, transform: `translate(${index * 100}px, 500px)` },
          ];

          console.log(keyframes);
          const options: AnimationType = {
            delay: 2000 * (index +1),
            duration: 4000,
            easing: "ease-in",
            iterations: 1,
          };
        
          animateImage(index, keyframes,options);
    })
  }

이미지를 불러오는 것과 css 적용 하는 함수를 따로 분리 했는데도
브라우저 새로고침해도 이미지가 안움직임

useEffect(() => {
    const imgData = async()=>{
        try {
            const storage = getStorage(firebaseApp);
            const imageRef = ref(storage, `img/`);
            const response = await  listAll(imageRef);

            const downloadURLPromises = response.items.map((item) =>
            getDownloadURL(item)
          );
          const urls = await Promise.all(downloadURLPromises);

          console.log('----------------urls');
          setImgUrl(urls);
        } catch (error) {
            console.error("Error getting download URLs:", error);
        }
    }
    imgData();
  }, []);
  
  
   const startAnimation = ()=>{
    imgUrl.forEach((i,index)=>{
        console.log(index);
        const keyframes = [
            { opacity: 0.9, transform: `translateX(${index * 100}px)` },
            { opacity: 1, transform: `translate(${index * 100}px, 500px)` },
          ];

          console.log(keyframes);
          const options: AnimationType = {
            delay: 2000 * (index +1),
            duration: 4000,
            easing: "ease-in",
            iterations: 1,
          };
        
          animateImage(index, keyframes,options);
    })
  }
 useEffect(()=>{
    startAnimation();
 },[imgUrl])

이미지를 불러오는 곳을 비동기로 변경 하고
모든 코드가 렌더링 될때 다 같이 실행이 되어서
이미지만 보이고 이미지가 움직이는 함수는 실행 되지않는것을 확인
이미지가 먼저 다 로드 되고 난 후 함수 실행 하도록 수정