From 3ba6dd5cd1a44296c602c1b9116025c0ef68b237 Mon Sep 17 00:00:00 2001
From: ujinsim <syj11243@naver.com>
Date: Sun, 19 Jan 2025 16:50:55 +0900
Subject: [PATCH] =?UTF-8?q?feat=20:=20=EC=B6=94=EA=B0=80=20=EC=8A=A4?=
 =?UTF-8?q?=ED=83=80=EC=9D=BC=20=EC=A0=95=EC=9D=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/shared/Typography/TypographyStyles.ts | 63 +++++++++++++++++++++++
 1 file changed, 63 insertions(+)
 create mode 100644 src/shared/Typography/TypographyStyles.ts

diff --git a/src/shared/Typography/TypographyStyles.ts b/src/shared/Typography/TypographyStyles.ts
new file mode 100644
index 0000000..3317680
--- /dev/null
+++ b/src/shared/Typography/TypographyStyles.ts
@@ -0,0 +1,63 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+
+export const typographyStyles = {
+  Title1: css`
+    font-size: 32px;
+    font-weight: bold;
+  `,
+  Title2: css`
+    font-size: 28px;
+    font-weight: bold;
+  `,
+  Title3: css`
+    font-size: 24px;
+    font-weight: bold;
+  `,
+  Subtitle1: css`
+    font-size: 22px;
+    font-weight: bold;
+  `,
+  Subtitle2: css`
+    font-size: 20px;
+    font-weight: semi-bold;
+  `,
+  Subtitle3: css`
+    font-size: 18px;
+    font-weight: semi-bold;
+  `,
+  Body1: css`
+    font-size: 16px;
+    font-weight: medium;
+  `,
+  Body2: css`
+    font-size: 14px;
+    font-weight: medium;
+  `,
+  Body3: css`
+    font-size: 12px;
+    font-weight: medium;
+  `,
+  Caption1: css`
+    font-size: 10px;
+    font-weight: regular;
+  `,
+  Caption2: css`
+    font-size: 8px;
+    font-weight: regular;
+  `,
+  ButtonTitle1: css`
+    font-size: 18px;
+    font-weight: bold;
+  `,
+  ButtonTitle2: css`
+    font-size: 14px;
+    font-weight: bold;
+  `,
+};
+
+export type TypographyVariant = keyof typeof typographyStyles;
+
+export const StyledTypography = styled.p<{ variant: TypographyVariant }>`
+  ${({ variant }) => typographyStyles[variant]}
+`;