[FE] feat: Actions 아이콘들에 애니메이션 추가 (#74)

Author: zelkovaria

src/frontend/src/components/guild/VoiceChannelActions/index.tsx

@@ -1,3 +1,4 @@
+import { motion } from 'framer-motion';
 import { BiSolidVideo, BiSolidVideoOff } from 'react-icons/bi';
 import { LuScreenShare } from 'react-icons/lu';
 import { TbConfetti, TbTriangleSquareCircle } from 'react-icons/tb';
@@ -16,10 +17,22 @@ const VoiceChannelActions = () => {
     soundBoard: <TbConfetti size={24} />,
   };
 
+  const bounceAnimation = {
+    y: [0, -5, 0],
+    transition: {
+      duration: 0.6,
+      repeat: 3,
+      repeatType: 'reverse' as const,
+      ease: 'easeInOut',
+    },
+  };
+
   return (
     <S.VoiceChannelActions>
       {Object.entries(actions).map(([key, value]) => (
-        <S.Action key={key}>{value}</S.Action>
+        <motion.div key={key} initial={{ y: 0 }} whileHover={bounceAnimation}>
+          <S.Action key={key}>{value}</S.Action>
+        </motion.div>
       ))}
     </S.VoiceChannelActions>
   );

src/frontend/src/pages/VideoPage/styles.ts

@@ -13,4 +13,6 @@ export const EmptyParticipant = styled.div`
   justify-content: center;
 
   width: 100%;
+
+  background-color: ${({ theme }) => theme.colors.black};
 `;