INIT

frontend/src/components/common/AnimatedDesktop.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+export function AnimatedDesktop() {
+  const [svgContent, setSvgContent] = useState('');
+
+  useEffect(() => {
+    // SVG 파일을 fetch해서 내용을 가져옴
+    fetch('/images/Desktop_SVG.svg')
+      .then(res => res.text())
+      .then(text => {
+        // SVG 내용에 CSS 애니메이션을 추가
+        const parser = new DOMParser();
+        const svgDoc = parser.parseFromString(text, 'image/svg+xml');
+        const svg = svgDoc.documentElement;
+
+        // style 태그 추가
+        const style = svgDoc.createElementNS('http://www.w3.org/2000/svg', 'style');
+        style.textContent = `
+          @keyframes rotate-circle {
+            from { transform: rotate(0deg); }
+            to { transform: rotate(360deg); }
+          }
+          .rotating-element {
+            animation: rotate-circle 4s linear infinite;
+            transform-origin: center;
+            transform-box: fill-box;
+          }
+        `;
+        svg.insertBefore(style, svg.firstChild);
+
+        // 회전시킬 요소 찾기 (fill="#38BDD4" and transform="translate(813,386)")
+        const paths = svg.querySelectorAll('path');
+        paths.forEach(path => {
+          const fill = path.getAttribute('fill');
+          const transform = path.getAttribute('transform');
+          if (fill === '#38BDD4' && transform && transform.includes('translate(813,386)')) {
+            path.classList.add('rotating-element');
+          }
+        });
+
+        // 수정된 SVG를 문자열로 변환
+        const serializer = new XMLSerializer();
+        const modifiedSvg = serializer.serializeToString(svg);
+        setSvgContent(modifiedSvg);
+      })
+      .catch(console.error);
+  }, []);
+
+  return (
+    <div
+      className="relative w-full h-full flex items-center justify-center"
+      dangerouslySetInnerHTML={{ __html: svgContent }}
+    />
+  );
+}