Merge pull request #267 from modern-agile-team/modify/change_font/#265

폰트 적용방식 변경2

Author: zzzRYT

src/components/common/Seo.tsx

@@ -7,6 +7,11 @@ export default function Seo() {
         rel="icon"
         href="https://menbosha-s3.s3.ap-northeast-2.amazonaws.com/public/mainpage/titleLogo.svg"
       />
+      <link
+        rel="stylesheet"
+        type="text/css"
+        href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable.css"
+      />
       <title>멘보샤</title>
       <meta
         name="naver-site-verification"

src/pages/_app.tsx

@@ -6,6 +6,56 @@ import MSWProvider from '@/components/common/MSWProvider';
 import { SocketProvider } from '@/hooks/useSocket';
 import Seo from '@/components/common/Seo';
 import ScrollToTopButton from '@/components/common/scroll-to-top/ScrollToTopButton';
+import localFont from 'next/font/local';
+const pretendard = localFont({
+  src: [
+    {
+      path: './fonts/Pretendard-Black.woff2',
+      weight: '900',
+      style: 'normal',
+    },
+    {
+      path: './fonts/Pretendard-ExtraBold.woff2',
+      weight: '800',
+      style: 'normal',
+    },
+    {
+      path: './fonts/Pretendard-Bold.woff2',
+      weight: '700',
+      style: 'normal',
+    },
+    {
+      path: './fonts/Pretendard-SemiBold.woff2',
+      weight: '600',
+      style: 'normal',
+    },
+    {
+      path: './fonts/Pretendard-Medium.woff2',
+      weight: '500',
+      style: 'normal',
+    },
+    {
+      path: './fonts/Pretendard-Regular.woff2',
+      weight: '400',
+      style: 'normal',
+    },
+    {
+      path: './fonts/Pretendard-Light.woff2',
+      weight: '300',
+      style: 'normal',
+    },
+    {
+      path: './fonts/Pretendard-ExtraLight.woff2',
+      weight: '200',
+      style: 'normal',
+    },
+    {
+      path: './fonts/Pretendard-Thin.woff2',
+      weight: '100',
+      style: 'normal',
+    },
+  ],
+});
 
 export default function App({ Component, pageProps }: AppProps) {
   const [isClient, setIsClient] = useState(false);
@@ -20,9 +70,11 @@ export default function App({ Component, pageProps }: AppProps) {
         <React.Suspense fallback={<div>Loading...</div>}>
           {isClient && (
             <MSWProvider>
-              <Seo />
-              <Component {...pageProps} />
-              <ScrollToTopButton />
+              <main className={pretendard.className}>
+                <Seo />
+                <Component {...pageProps} />
+                <ScrollToTopButton />
+              </main>
             </MSWProvider>
           )}
         </React.Suspense>

public/fonts/Pretendard-Black.woff2 src/pages/fonts/Pretendard-Black.woff2

@@ -14,7 +14,7 @@ body {
   font-size: 24px;
   scroll-behavior: smooth;
 }
-
+/* 
 @font-face {
   font-family: 'Pretendard', sans-serif;
   src: url('/public/fonts/Pretendard-Black.woff2') format('woff2');
@@ -77,11 +77,11 @@ body {
   font-weight: 100;
   font-style: normal;
   font-display: swap;
-}
+} */
 
-* {
+/* * {
   font-family: 'Pretendard', sans-serif;
-}
+} */
 
 /* react-quill에 대한 스타일 지정 */
 .ql-editor {