From 6c0f58dd2dabd17cb12a44a3e70da3c7073d76d9 Mon Sep 17 00:00:00 2001
From: Kjiw0n <rwd0904@naver.com>
Date: Thu, 28 Nov 2024 00:29:05 +0900
Subject: [PATCH] style: add font-weight, font-family

---
 src/styles/font.ts | 40 +++++++++++++++++++++++++++++-----------
 1 file changed, 29 insertions(+), 11 deletions(-)

diff --git a/src/styles/font.ts b/src/styles/font.ts
index 126fdc79..f7226ca1 100644
--- a/src/styles/font.ts
+++ b/src/styles/font.ts
@@ -1,8 +1,8 @@
 const fonts = {
-	PretendardBold: 'Pretendard-Bold',
-	PretendardSemiBold: 'Pretendard-SemiBold',
-	PretendardMedium: 'Pretendard-Medium',
-	PretendardRegular: 'Pretendard-Regular',
+	PretendardBold: 'Pretendard-Bold, -apple-system, Helvetica, Arial, sans-serif',
+	PretendardSemiBold: 'Pretendard-SemiBold, -apple-system, Helvetica, Arial, sans-serif',
+	PretendardMedium: 'Pretendard-Medium, -apple-system, Helvetica, Arial, sans-serif',
+	PretendardRegular: 'Pretendard-Regular, -apple-system, Helvetica, Arial, sans-serif',
 };
 
 interface Font {
@@ -10,22 +10,26 @@ interface Font {
 	size: number;
 	height: number;
 	letterSpacing: number;
+	fontWeight: number;
 	textDecoration?: string;
 }
 
-const FONT = ({ family, size, height, letterSpacing, textDecoration = 'none' }: Font): string => `
-          font-family:${family};
-          font-size:${size}rem;
-          line-height:${height}%;
-          letter-spacing: ${letterSpacing}%;
-          text-decoration: ${textDecoration};
-      `;
+const FONT = ({ family, size, height, letterSpacing, fontWeight, textDecoration = 'none' }: Font): string => `
+	font-family: ${family};
+	font-size: ${size}rem;
+	line-height: ${height}%;
+	letter-spacing: ${letterSpacing}%;
+	font-weight: ${fontWeight};
+	text-decoration: ${textDecoration};
+`;
+
 const font = {
 	title01: FONT({
 		family: fonts.PretendardMedium,
 		size: 2.4,
 		height: 100,
 		letterSpacing: -3,
+		fontWeight: 500,
 	}),
 
 	title02: FONT({
@@ -33,6 +37,7 @@ const font = {
 		size: 2,
 		height: 140,
 		letterSpacing: -1,
+		fontWeight: 600,
 	}),
 
 	body01: FONT({
@@ -40,6 +45,7 @@ const font = {
 		size: 1.5,
 		height: 140,
 		letterSpacing: -1,
+		fontWeight: 500,
 	}),
 
 	body02: FONT({
@@ -47,6 +53,7 @@ const font = {
 		size: 1.5,
 		height: 140,
 		letterSpacing: -1,
+		fontWeight: 500,
 	}),
 
 	body03: FONT({
@@ -54,6 +61,7 @@ const font = {
 		size: 1.4,
 		height: 135,
 		letterSpacing: -2,
+		fontWeight: 600,
 	}),
 
 	body04: FONT({
@@ -61,6 +69,7 @@ const font = {
 		size: 1.4,
 		height: 135,
 		letterSpacing: -1,
+		fontWeight: 400,
 	}),
 
 	body05: FONT({
@@ -68,6 +77,7 @@ const font = {
 		size: 1.2,
 		height: 100,
 		letterSpacing: -3,
+		fontWeight: 500,
 	}),
 
 	label01: FONT({
@@ -75,6 +85,7 @@ const font = {
 		size: 2.2,
 		height: 100,
 		letterSpacing: 0,
+		fontWeight: 600,
 	}),
 
 	label02: FONT({
@@ -82,6 +93,7 @@ const font = {
 		size: 1.8,
 		height: 100,
 		letterSpacing: -4,
+		fontWeight: 600,
 	}),
 
 	label03: FONT({
@@ -89,6 +101,7 @@ const font = {
 		size: 1.6,
 		height: 100,
 		letterSpacing: 0,
+		fontWeight: 600,
 	}),
 
 	label04: FONT({
@@ -96,6 +109,7 @@ const font = {
 		size: 1.5,
 		height: 100,
 		letterSpacing: 0,
+		fontWeight: 600,
 	}),
 
 	label05: FONT({
@@ -103,6 +117,7 @@ const font = {
 		size: 1.4,
 		height: 100,
 		letterSpacing: 0,
+		fontWeight: 600,
 	}),
 
 	caption01: FONT({
@@ -110,6 +125,7 @@ const font = {
 		size: 1.4,
 		height: 100,
 		letterSpacing: -5,
+		fontWeight: 500,
 	}),
 
 	caption02: FONT({
@@ -117,6 +133,7 @@ const font = {
 		size: 1.2,
 		height: 100,
 		letterSpacing: -2,
+		fontWeight: 400,
 	}),
 
 	caption03: FONT({
@@ -124,6 +141,7 @@ const font = {
 		size: 1.2,
 		height: 100,
 		letterSpacing: -2,
+		fontWeight: 400,
 		textDecoration: 'line-through',
 	}),
 };