fix: keyframe 분리

spark-web/src/domains/Results/components/ResultInteraction/index.tsx

@@ -1,3 +1,5 @@
+import { Keyframe } from '@/shared/components';
+
 interface ResultInteraction {
   channelName: string;
 }
@@ -12,22 +14,19 @@ const animation = {
   animationFillMode: 'forwards',
 } as React.CSSProperties;
 
-export function ResultInteraction({ channelName }: ResultInteraction) {
+export default function ResultInteraction({ channelName }: ResultInteraction) {
   return (
     <div
       className={
         'text-white text-title3-eb px-[10px] py-[20px] text-center border border-white rounded-extraLarges bg-white bg-opacity-30 mx-[35px] absolute z-20'
       }
       style={animation}
     >
-      <style>
-        {`
-      @keyframes ResultInteraction {
-        from { top: -20%; visibility: visible;}
-        to { top: 33%; visibility: visible;}
-      }
-    `}
-      </style>
+      <Keyframe
+        animationName={'ResultInteraction'}
+        from={{ top: '-20%', visibility: 'visible' }}
+        to={{ top: '33%', visibility: 'visible' }}
+      />
       {channelName}님의
       <br /> 채널 분석이 완료 됐어요!
     </div>

spark-web/src/domains/Results/components/index.ts

@@ -1 +1 @@
-export * from './ResultInteraction';
+export { default as ResultInteraction } from './ResultInteraction';

spark-web/src/shared/components/Keyframe/index.tsx

@@ -0,0 +1,23 @@
+interface Keyframe {
+  animationName: string;
+  from: React.CSSProperties;
+  to: React.CSSProperties;
+}
+
+export default function Keyframe({ animationName, from, to }: Keyframe) {
+  const objToCss = (obj: React.CSSProperties) =>
+    Object.entries(obj)
+      .map(([key, value]) => `${key}: ${value};`)
+      .join('; ');
+
+  return (
+    <>
+      <style>
+        {`@keyframes ${animationName}{
+            from{ ${objToCss(from)}}
+            to{ ${objToCss(to)}}
+            }`}
+      </style>
+    </>
+  );
+}

spark-web/src/shared/components/index.ts

@@ -1,5 +1,6 @@
 export { default as NavigationHeader } from './NavigationHeader';
 export { default as PrimaryChips } from './Chips';
 export * from './Buttons';
+export { default as Keyframe } from './Keyframe';
 export { default as RouteMove } from './RouteMove';
 export { default as NextPageFooter } from './NextPageFooter';