Refactor: OODDFrame & Loading & StyledText 컬러시스템 적용

Author: gustn99

src/components/Frame/Frame.tsx

@@ -3,7 +3,7 @@ import theme from '@styles/theme';
 
 export const OODDFrame = styled.div`
 	${theme.breakPoints};
-	background-color: ${({ theme }) => theme.colors.white};
+	background-color: ${({ theme }) => theme.colors.background.primary};
 	height: 100vh;
 	margin: auto;
 	display: flex;

src/components/Loading/styles.tsx

@@ -35,7 +35,7 @@ export const Dot = styled.hr<{ $index: number }>`
 	z-index: 200;
 	border-radius: 50%;
 	border: none;
-	background-color: ${({ theme }) => theme.colors.gray2};
+	background-color: ${({ theme }) => theme.colors.gray[300]};
 
 	// 각 점에 대해 딜레이를 적용하여 순차적으로 애니메이션을 시작
 	animation: ${bounceGroup} 2s ease-in-out infinite;

src/components/Text/StyledText.tsx

@@ -4,7 +4,7 @@ import { useMediaQuery } from 'react-responsive';
 import type { StyledTextProps } from './dto';
 
 export const StyledText = styled.div<StyledTextProps>`
-	color: ${(props) => props.color || theme.colors.black};
+	color: ${(props) => props.color || theme.colors.text.primary};
 	white-space: pre-line;
 	${(props) => {
 		const isMobile = useMediaQuery({ maxWidth: '767px' });