diff --git a/src/components/Common/Text/Text.styled.ts b/src/components/Common/Text/Text.styled.ts
new file mode 100644
index 0000000..ab6c077
--- /dev/null
+++ b/src/components/Common/Text/Text.styled.ts
@@ -0,0 +1,18 @@
+import { css } from '@emotion/react';
+
+import type { TextProps } from './Text';
+
+export const getTextSizeStyling = (size: Required<TextProps>['$size']) => {
+  const style = {
+    small: css({
+      fontSize: '10px',
+    }),
+    medium: css({
+      fontSize: '14px',
+    }),
+    large: css({
+      fontSize: '18px',
+    }),
+  };
+  return style[size];
+};
diff --git a/src/components/Common/Text/Text.tsx b/src/components/Common/Text/Text.tsx
index 714f3a5..f79d630 100644
--- a/src/components/Common/Text/Text.tsx
+++ b/src/components/Common/Text/Text.tsx
@@ -1,13 +1,16 @@
-type TextProps = {
+import { getTextSizeStyling } from './Text.styled';
+
+export interface TextProps {
   content: string;
-};
+  $size?: 'small' | 'medium' | 'large';
+}
 
-function Text({ content }: TextProps) {
+function Text({ content, $size = 'medium' }: TextProps) {
   return (
     <div css={{ width: '100%' }}>
       {content.split('\n').map((line, index) => {
         return (
-          <span key={index} css={{ width: '100%', wordBreak: 'break-all' }}>
+          <span key={index} css={[getTextSizeStyling($size)]}>
             {line}
             <br />
           </span>