Refactor: 로딩 애니메이션을 animation으로 수정

Author: gustn99

src/components/Loading/index.tsx

@@ -1,24 +1,12 @@
-import { useEffect, useState } from 'react';
 import { Dot, DotBox, LoadingWrapper } from './styles';
 
 const Loading: React.FC = () => {
-	const [dotIndex, setDotIndex] = useState(0);
-
-	useEffect(() => {
-		const interval = setInterval(() => {
-			setDotIndex((prev) => prev + 1);
-		}, 300); // 0.3초마다 업데이트
-
-		// 컴포넌트가 언마운트되면 interval을 정리
-		return () => clearInterval(interval);
-	}, []);
-
 	return (
 		<LoadingWrapper>
 			<DotBox>
-				<Dot $index={0} $dotIndex={dotIndex} />
-				<Dot $index={1} $dotIndex={dotIndex} />
-				<Dot $index={2} $dotIndex={dotIndex} />
+				<Dot $index={0} />
+				<Dot $index={1} />
+				<Dot $index={2} />
 			</DotBox>
 		</LoadingWrapper>
 	);

src/components/Loading/styles.tsx

@@ -1,4 +1,16 @@
-import styled, { css } from 'styled-components';
+import styled, { keyframes } from 'styled-components';
+
+// 점이 활성화될 때의 애니메이션 (Y축으로 움직임)
+const bounce = keyframes`
+  0%, 100% {
+    transform: translateY(0);
+    opacity: 0.5;
+  }
+  50% {
+    transform: translateY(-2px);
+    opacity: 1;
+  }
+`;
 
 export const LoadingWrapper = styled.div`
 	position: fixed;
@@ -18,20 +30,15 @@ export const DotBox = styled.div`
 	margin: auto;
 `;
 
-export const Dot = styled.hr<{ $index: number; $dotIndex: number }>`
-	width: 7px;
-	height: 7px;
+export const Dot = styled.hr<{ $index: number }>`
+	width: 8px;
+	height: 8px;
 	z-index: 200;
 	border-radius: 50%;
 	border: none;
 	background-color: ${({ theme }) => theme.colors.gray2};
-	transition:
-		opacity 0.3s,
-		transform 0.3s;
 
-	// 점이 활성화되었을 때의 스타일
-	${({ $index, $dotIndex }) => css`
-		opacity: ${$dotIndex % 3 === $index ? 1 : 0.5};
-		transform: translateY(${$dotIndex % 3 === $index ? -1 : 0}px);
-	`}
+	// 각 점에 대해 딜레이를 적용하여 순차적으로 애니메이션을 시작
+	animation: ${bounce} 0.6s ease-in-out infinite;
+	animation-delay: ${({ $index }) => $index * 0.2}s;
 `;