Merge branch 'feature/animation' into dev

Author: abyss-s

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

@@ -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/pages/ChangePW.tsx

@@ -60,8 +60,10 @@ const ChangePW = () => {
             className="w-[40%] aspect-square flex justify-center items-center object-contain m-5 pr-13 pt-13"
           />
         )}
-        <div className="flex flex-col justify-center w-full md:w-[50%] p-6 gap-6">
-          <h2 className="font-gumi text-center text-[24px] md:text-[32px] mb-4">
+        <div
+          className={`flex flex-col justify-center ${isDesktop ? 'w-1/2 px-8' : 'w-full px-6 gap-[2vw]'}`}
+        >
+          <h2 className={`font-gumi text-center mb-8 ${isDesktop ? 'text-[3vw]' : 'text-[6vw]'}`}>
             <span className="text-[var(--color-primary-base)]">너</span>로 정했다!
           </h2>
 

react-app/src/pages/Main.tsx

@@ -1,4 +1,5 @@
 import Button from '@/components/Button/Button';
+import FloatingBackground from '@/components/FloatingBackground/FloatingBackground';
 import { useCallback, useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
@@ -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 ? '투표 결과 발표까지 남은 시간' : '투표 집계가 완료되었습니다.'}