58 lines
1.9 KiB
TypeScript
58 lines
1.9 KiB
TypeScript
'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 }}
|
|
/>
|
|
);
|
|
}
|