[FE] feat : 폰트 preload 적용 (#605)

* fix: BundleAnalyzerPlugin 실행 환경 오류 수정

- dev 모드가 아닌 prod 모드에서 실행하도록 수정

* feat: 구글 폰트 preload 적용

* feat: pretendard virable font로 변경 및 preload 적용

* fix : pretendard css 불러오는 link 수정

- 변경 사유 :rel이 preload인 link, stylesheet인 link가 두 개 같이 존재해서 헷갈림
- 변경 방법 : onload="this.onload=null;this.rel='stylesheet'" 사용

* fix: useStepList 테스트 오류 수정

* chore: BundleAnalyzerPlugin 주석 처리

frontend/public/index.html

@@ -16,12 +16,14 @@
   </script>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <!--font-->
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap"
-    rel="stylesheet" />
-  <link rel="stylesheet" type="text/css"
-    href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css" />
+  <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin="anonymous">
+
+  <link rel="preload" href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap"
+  as="style" />
+  <link rel="preload" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/variable/pretendardvariable-dynamic-subset.css" onload="this.onload=null;this.rel='stylesheet'" />
   <title>REVIEW ME</title>
 </head>
 

frontend/src/pages/ReviewWritingPage/progressBar/hooks/useStepList/test.tsx

@@ -179,10 +179,10 @@ describe('프로그레스 바 테스트', () => {
 
           return newMap;
         });
-      });
 
-      //두번째 카드 이동 불가
-      expect(result.current.stepList[1].isMovingAvailable).toBeFalsy();
+        //두번째 카드 이동 불가
+        expect(result.current.stepList[1].isMovingAvailable).toBeFalsy();
+      });
     });
   });
 });

frontend/src/styles/globalStyles.ts

@@ -10,7 +10,7 @@ const globalStyles = css`
   }
 
   body {
-    font-family: 'Pretendard', 'Noto Sans', sans-serif;
+    font-family: 'Pretendard Variable', 'Noto Sans', sans-serif;
     margin: 0;
     padding: 0;
     box-sizing: border-box;

frontend/webpack.config.js

@@ -4,7 +4,7 @@ const path = require('path');
 const Dotenv = require('dotenv-webpack');
 const { sentryWebpackPlugin } = require('@sentry/webpack-plugin');
 
-const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
 module.exports = (env, argv) => {
   const isProduction = argv.mode === 'production';
@@ -63,7 +63,7 @@ module.exports = (env, argv) => {
         favicon: './src/favicons/favicon.ico',
       }),
       new CleanWebpackPlugin(),
-      !isProduction && new BundleAnalyzerPlugin(),
+      // new BundleAnalyzerPlugin(),
       new Dotenv({
         systemvars: true,
         path: './.env',