refactor: 공용 스타일(폰트,색상), 로컬 폰트 적용 및 기타 오류 해결

src/styles/GlobalStyles.css.ts

@@ -1,13 +1,11 @@
 import { globalStyle } from '@vanilla-extract/css';
+import { Pretendard } from './pretendardFont.css';
 
-globalStyle('html', {
-  fontSize: '62.5%',
-  color: '#19191B', //글자기본색
-});
+globalStyle('html', { fontSize: '62.5%', color: '#19191B' });
 
-globalStyle('*', {
+globalStyle('body *', {
   boxSizing: 'border-box',
-  fontFamily: 'Pretendard',
+  fontFamily: Pretendard,
 });
 
 globalStyle('html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, dl, dt, dd, ol, ul, li, form, label, table, button', {

src/styles/pretendardFont.css.ts

@@ -0,0 +1,48 @@
+import { globalFontFace } from '@vanilla-extract/css';
+
+export const Pretendard = 'GlobalPretendard';
+
+globalFontFace(Pretendard, {
+  fontWeight: 900,
+  src: `url('/fonts/Pretendard-Black.woff2') format('woff2')`,
+});
+
+globalFontFace(Pretendard, {
+  fontWeight: 800,
+  src: `url('/fonts/Pretendard-ExtraBold.woff2') format('woff2')`,
+});
+
+globalFontFace(Pretendard, {
+  fontWeight: 700,
+  src: `url('/fonts/Pretendard-Bold.woff2') format('woff2')`,
+});
+
+globalFontFace(Pretendard, {
+  fontWeight: 600,
+  src: `url('/fonts/Pretendard-SemiBold.woff2') format('woff2')`,
+});
+
+globalFontFace(Pretendard, {
+  fontWeight: 500,
+  src: `url('/fonts/Pretendard-Medium.woff2') format('woff2')`,
+});
+
+globalFontFace(Pretendard, {
+  fontWeight: 400,
+  src: `url('/fonts/Pretendard-Regular.woff2') format('woff2')`,
+});
+
+globalFontFace(Pretendard, {
+  fontWeight: 300,
+  src: `url('/fonts/Pretendard-Light.woff2') format('woff2')`,
+});
+
+globalFontFace(Pretendard, {
+  fontWeight: 200,
+  src: `url('/fonts/Pretendard-ExtraLight.woff2') format('woff2')`,
+});
+
+globalFontFace(Pretendard, {
+  fontWeight: 100,
+  src: `url('/fonts/Pretendard-Thin.woff2') format('woff2')`,
+});