FEAT: #224 메인 페이지 애니메이션 롤백

Author: abyss-s

react-app/package-lock.json

@@ -15,6 +15,7 @@
     "@tanstack/react-query": "^5.74.11",
     "axios": "^1.8.4",
     "dayjs": "^1.11.13",
+    "framer-motion": "^12.12.1",
     "react": "^18.2.0",
     "react-canvas-confetti": "^2.0.7",
     "react-card-flip": "^1.2.3",

react-app/package.json

@@ -0,0 +1,78 @@
+import { motion, useAnimation } from 'framer-motion';
+import { useEffect } from 'react';
+
+interface FloatItemProps {
+  src: string;
+  size?: string;
+  duration?: number;
+  interval?: number;
+}
+
+// 랜덤 이동
+const getRandomPosition = () => ({
+  x: Math.floor(Math.random() * 100 - 50),
+  y: Math.floor(Math.random() * 100 - 50),
+});
+
+const FloatingItem = ({ src, size = 'w-20', duration = 6, interval = 8000 }: FloatItemProps) => {
+  const controls = useAnimation();
+
+  useEffect(() => {
+    const animateRandomly = () => {
+      const { x, y } = getRandomPosition();
+      controls.start({
+        x: `${x}vw`,
+        y: `${y}vh`,
+        transition: {
+          duration,
+          ease: 'easeInOut',
+        },
+      });
+    };
+
+    animateRandomly(); // 첫 애니메이션
+    const intervalId = setInterval(animateRandomly, interval);
+
+    return () => clearInterval(intervalId);
+  }, [controls, duration, interval]);
+
+  return (
+    <motion.img
+      src={src}
+      className={`absolute ${size} opacity-80 pointer-events-none`}
+      style={{
+        left: '50%',
+        top: '50%',
+        transform: 'translate(-50%, -50%)', // 중앙에서 시작
+      }}
+      animate={controls}
+      alt="floating item"
+    />
+  );
+};
+const FloatingBackground = () => {
+  return (
+    <div className="fixed inset-0 -z-1000 overflow-hidden pointer-events-none">
+      <FloatingItem
+        src="https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1741777507/noticon/dihnlmrn8aopedon41ur.gif"
+        size="w-20"
+        duration={5}
+        interval={7000}
+      />
+      <FloatingItem
+        src="https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1683523256/noticon/kyp3frg9corycovxokx6.gif"
+        size="w-16"
+        duration={6}
+        interval={9000}
+      />
+      <FloatingItem
+        src="https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1686670279/noticon/gvasp3qtaz16spmwoorl.gif"
+        size="w-24"
+        duration={7}
+        interval={10000}
+      />
+    </div>
+  );
+};
+
+export default FloatingBackground;

react-app/src/components/FloatingBackground/FloatingBackground.tsx

@@ -1,6 +1,7 @@
 import Button from '@/components/Button/Button';
 import { useCallback, useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
+import FloatingBackground from '@/components/FloatingBackground/FloatingBackground';
 
 const Main = () => {
   const [restTime, setRestTime] = useState(10);
@@ -43,6 +44,7 @@ const Main = () => {
 
   return (
     <div className="flex flex-col justify-center items-center h-full px-4 text-center relative">
+      <FloatingBackground />
       <div className="flex flex-col justify-center gap-6">
         <p className="text-base sm:text-lg md:text-xl text-gray-600 font-pb">
           {restTime > 0 ? '투표 결과 발표까지 남은 시간' : '투표 집계가 완료되었습니다.'}