SP-694 메인페이지, 모집공고 모아보기 페이지 성능 개선

package.json

@@ -92,6 +92,7 @@
     "ts-node": "^10.9.2",
     "typescript": "^5.2.2",
     "vite": "^5.0.8",
+    "vite-bundle-analyzer": "^0.10.5",
     "vite-plugin-mkcert": "^1.17.3",
     "vite-plugin-radar": "^0.9.6",
     "vite-plugin-svgr": "^4.2.0"

src/Assets/index.tsx

@@ -33,28 +33,26 @@ export { default as TwoWay } from './icons/twoway.svg?react';
 export { default as PrevArrow } from './icons/prevArrow.svg?react';
 export { default as NextArrow } from './icons/nextArrow.svg?react';
 export { default as CreateStudy } from './icons/createstudy.svg?react';
+export { default as DefaultStudyThumbnail } from './icons/studyThumbnail.svg';
 export { default as SearchRecruitment } from './icons/recruitment.svg?react';
 
 // Logo
-export { default as BlankLogo } from './images/blank-logo.png';
-export { default as Logo } from './images/logo.png';
-export { default as FooterLogo } from './images/logo2.png';
-export { default as UTLogo } from './images/logo3.png';
+export { default as BlankLogo } from './images/blank-logo.webp';
+export { default as Logo } from './images/logo.webp';
+export { default as FooterLogo } from './images/logo2.webp';
+export { default as UTLogo } from './images/logo3.webp';
 
 // Character
-export { default as NotFound } from './images/character1.png';
-export { default as LoginFail } from './images/character2.png';
-export { default as SignUpFail } from './images/character3.png';
-export { default as ErrorBoundaryImage } from './images/character4.png';
+export { default as NotFound } from './images/character1.webp';
+export { default as LoginFail } from './images/character2.webp';
+export { default as SignUpFail } from './images/character3.webp';
+export { default as ErrorBoundaryImage } from './images/character4.webp';
 
 // Background
-export { default as SignUpBackground } from './images/background.png';
+export { default as SignUpBackground } from './images/background.webp';
 
 // Banner
-export { default as Banner1 } from './images/banner1.png';
-export { default as Banner2 } from './images/banner2.png';
-export { default as MobileBanner1 } from './images/mobilebanner1.png';
-export { default as MobileBanner2 } from './images/mobilebanner2.png';
-
-// Study
-export { default as DefaultStudyThumbnail } from './icons/studyThumbnail.svg';
+export { default as Banner1 } from './images/banner1.webp';
+export { default as Banner2 } from './images/banner2.webp';
+export { default as MobileBanner1 } from './images/mobilebanner1.webp';
+export { default as MobileBanner2 } from './images/mobilebanner2.webp';

src/Components/Banner/CustomArrowBtn/index.tsx

@@ -12,7 +12,7 @@ export const CustomArrowBtn = ({
   onClick,
 }: CustomArrowBtnprops & Pick<CustomArrowProps, 'onClick' | 'style'>) => {
   return (
-    <CustomArrowBtnWrapper $type={type} onClick={onClick}>
+    <CustomArrowBtnWrapper $type={type} aria-label="arrow" onClick={onClick} type="button">
       {type === 'PREV' ? <PrevArrow /> : <NextArrow />}
     </CustomArrowBtnWrapper>
   );

src/Components/RecruitmentCard/index.tsx

@@ -48,7 +48,12 @@ const RecruitmentCard = (recruitment: Recruitment) => {
               recruitment.stacks.map(
                 (stack: Stack, idx) =>
                   idx < 5 && (
-                    <Image key={stack.id} size={32} src={`${import.meta.env.VITE_BASE_API_URL}${stack.imageUrl}`} />
+                    <Image
+                      key={stack.id}
+                      size={32}
+                      src={`${import.meta.env.VITE_BASE_API_URL}${stack.imageUrl}`}
+                      alt="stack-image"
+                    />
                   ),
               )
             ) : (

src/utils/axios.ts

@@ -20,20 +20,20 @@ export const createClient = (config?: AxiosRequestConfig) => {
       return response;
     },
     async (error: AxiosError) => {
-      console.log('axios response', error, error.response, error.response?.status);
+      // console.log('axios response', error, error.response, error.response?.status);
 
       if (error.response?.status === 400) {
-        console.log('400', error.response);
+        // console.log('400', error.response);
       }
 
       // 토큰이 만료된 경우
       else if (error.response?.status === 401) {
-        console.log('401', error.response);
+        // console.log('401', error.response);
         try {
           const data = await logOut();
           if (data) window.location.href = '/';
         } catch (e) {
-          console.log(e);
+          // console.log(e);
         }
       }
       // Login Provider에서 에러 핸들링하도록 reject

vite.config.ts

@@ -4,6 +4,7 @@ import react from '@vitejs/plugin-react';
 import * as path from 'path';
 import mkcert from 'vite-plugin-mkcert';
 import { VitePluginRadar } from 'vite-plugin-radar';
+import { analyzer } from 'vite-bundle-analyzer';
 
 export default defineConfig({
   plugins: [
@@ -20,6 +21,7 @@ export default defineConfig({
         id: 'GTM-WLWBHQRJ',
       },
     }),
+    analyzer(),
   ],
   resolve: {
     alias: [{ find: '@', replacement: path.resolve(__dirname, 'src') }],

yarn.lock

@@ -10302,6 +10302,11 @@ vfile@^6.0.0:
     unist-util-stringify-position "^4.0.0"
     vfile-message "^4.0.0"
 
+vite-bundle-analyzer@^0.10.5:
+  version "0.10.5"
+  resolved "https://registry.yarnpkg.com/vite-bundle-analyzer/-/vite-bundle-analyzer-0.10.5.tgz#a0fee795b9a57b8084ab4b68588a2c35f39d4fea"
+  integrity sha512-gxIFQ6ifoQjDXaVWJmXHwI2VEVqyz6FXHKicNpTe4Pr2MAka6NQVRcmgznziRzbl9rhMP0qIc5Be8PxfGXUhgQ==
+
 vite-plugin-mkcert@^1.17.3:
   version "1.17.5"
   resolved "https://registry.yarnpkg.com/vite-plugin-mkcert/-/vite-plugin-mkcert-1.17.5.tgz#175f1a2a99c110fa87b2f2e6390b22656674a67b"