Refactor: StyledText 리팩토링

Author: gustn99

src/components/Text/StyledText.tsx

@@ -1,39 +1,24 @@
 import styled from 'styled-components';
-import theme from '../../styles/theme';
+import theme from '@styles/theme';
 import { useMediaQuery } from 'react-responsive';
-
-export type FontStyleKey = keyof typeof theme.fontStyles;
-
-// 플랫폼 별 폰트가 다른 경우
-interface FontStylesByPlatform {
-	mobile: FontStyleKey;
-	tablet: FontStyleKey;
-	desktop: FontStyleKey;
-}
-
-export interface StyledTextProps {
-	$textTheme: {
-		style: FontStyleKey | FontStylesByPlatform;
-		lineHeight?: number;
-	};
-	color?: string;
-	children: any;
-}
+import type { StyledTextProps } from './dto';
 
 export const StyledText = styled.div<StyledTextProps>`
 	color: ${(props) => props.color || theme.colors.black};
 	white-space: pre-line;
-	line-height: ${(props) => props.$textTheme.lineHeight || 1.5};
 	${(props) => {
 		const isMobile = useMediaQuery({ maxWidth: '767px' });
 		const isTabletPortrait = useMediaQuery({ minWidth: '768px', maxWidth: '991px' });
 		const isTabletLandscape = useMediaQuery({ minWidth: '992px', maxWidth: '1219px' });
 		const isDesktop = useMediaQuery({ minWidth: '1220px' });
 
 		let fontStyle;
+
 		if (typeof props.$textTheme.style === 'string') {
+			// style이 문자열이면 일괄적으로 사용
 			fontStyle = theme.fontStyles[props.$textTheme.style];
 		} else if (typeof props.$textTheme.style === 'object') {
+			// style이 객체면 기기에 따른 분기
 			if (isMobile) {
 				fontStyle = theme.fontStyles[props.$textTheme.style.mobile];
 			} else if (isTabletPortrait || isTabletLandscape) {

src/components/Text/dto.ts

@@ -0,0 +1,19 @@
+import theme from '@styles/theme';
+
+// 플랫폼 별 폰트가 다른 경우
+interface FontStylesByPlatform {
+	mobile: FontStyleKey;
+	tablet: FontStyleKey;
+	desktop: FontStyleKey;
+}
+
+export interface StyledTextProps {
+	$textTheme: {
+		style: FontStyleKey | FontStylesByPlatform;
+		lineHeight?: number;
+	};
+	color?: string;
+	children: any;
+}
+
+export type FontStyleKey = keyof typeof theme.fontStyles;