Refactor: OODDFrame Loading Modal 컴포넌트 리팩토링

Author: gustn99

src/components/Frame/Frame.tsx

@@ -1,7 +1,6 @@
 import styled from 'styled-components';
-import theme from '../../styles/theme';
+import theme from '@styles/theme';
 
-// 공통 레이아웃 -> 모두 적용해주세요
 export const OODDFrame = styled.div`
 	${theme.breakPoints};
 	background-color: ${({ theme }) => theme.colors.white};

src/components/Loading/styles.tsx

@@ -39,5 +39,5 @@ export const Dot = styled.hr<{ $index: number }>`
 
 	// 각 점에 대해 딜레이를 적용하여 순차적으로 애니메이션을 시작
 	animation: ${bounceGroup} 2s ease-in-out infinite;
-	animation-delay: ${({ $index }) => `${($index % 3) * 0.2}s`}};
+	animation-delay: ${({ $index }) => `${($index % 3) * 0.2}s`};
 `;

src/components/Modal/index.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { ModalWrapper, ModalContainer, CloseButton, ConfirmButton } from './styles';
-import { StyledText } from '../Text/StyledText';
-import { ModalProps } from './dto';
-import XIcon from '../../assets/default/x.svg';
+import { StyledText } from '@components/Text/StyledText';
+import type { ModalProps } from './dto';
+import closeIcon from '@assets/default/x.svg';
 
 const Modal: React.FC<ModalProps> = ({ isCloseButtonVisible, onClose, content, button }) => {
 	const handleBackgroundClick = (e: React.MouseEvent) => {
@@ -26,7 +26,7 @@ const Modal: React.FC<ModalProps> = ({ isCloseButtonVisible, onClose, content, b
 			<ModalContainer $isCloseButtonVisible={isCloseButtonVisible || false}>
 				{isCloseButtonVisible && (
 					<CloseButton onClick={onClose}>
-						<img src={XIcon} alt="" />
+						<img src={closeIcon} alt="" />
 					</CloseButton>
 				)}
 				<StyledText $textTheme={{ style: 'body2-regular' }}>{content}</StyledText>