Merge pull request #175 from softeerbootcamp4th/refactor/#174-lightho…

…use-performance [Refactor] LightHouse 성능 개선
softeerbootcamp4th · Aug 20, 2024 · 420afc0 · 420afc0
2 parents e5d12ae + 03a9473
commit 420afc0
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 3 deletions.
diff --git a/client/index.html b/client/index.html
@@ -11,8 +11,49 @@
         <meta property="og:image" content="/assets/og-image.png" />
         <meta property="og:image:width" content="1200" />
         <meta property="og:image:height" content="630" />
+
         <link rel="icon" href="/assets/favicon.ico" type="image/x-icon" />
+
+        <link
+            rel="preload"
+            fetchpriority="high"
+            as="image"
+            type="image"
+            href="/assets/main/car-1.jpg"
+        />
+        <link
+            rel="preload"
+            fetchpriority="high"
+            as="image"
+            type="image/webp"
+            href="/assets/main/title.webp"
+        />
+
+        <link
+            rel="preload"
+            fetchpriority="high"
+            as="image"
+            type="image/webp"
+            href="/assets/lottery/electric-line.webp"
+        />
+        <link
+            rel="preload"
+            fetchpriority="high"
+            as="image"
+            type="image/webp"
+            href="/assets/lottery/casper-badges.webp"
+        />
+
+        <link
+            rel="preload"
+            fetchpriority="high"
+            as="image"
+            type="image"
+            href="/assets/rush/two-car.jpg"
+        />
+
         <title>Hybrid-JGS</title>
+        <meta name="description" content="캐스퍼 일렉트릭 출시 기념 이벤트" />
     </head>
     <body>
         <div id="root"></div>

diff --git a/client/public/assets/main/lottery/prize-1.png b/client/public/assets/main/lottery/prize-1.png
diff --git a/client/robots.txt b/client/robots.txt
@@ -0,0 +1,2 @@
+User-agent: *
+Allow: /
diff --git a/client/src/components/LotteryEvent/index.tsx b/client/src/components/LotteryEvent/index.tsx
@@ -9,7 +9,7 @@ export default function LotteryEvent({ rank, image, prizeName, winnerCount }: Lo
     return (
         <div className="flex flex-col gap-400 w-[100px] h-[156px]">
             <div className="relative w-[100px] h-[100px] rounded-500 bg-n-white flex justify-center items-center">
-                <img src={image} alt="event prize" className="w-[80px] h-[80px] object-cover" />
+                <img src={image} alt="event prize" className="w-[80px] h-[80px]" />
                 <p className="absolute bottom-0 right-0 translate-x-1/4 z-10 h-detail-1-bold rounded-full bg-s-red p-2 text-n-white">
                     {rank}등
                 </p>

diff --git a/client/src/components/RushEvent/index.tsx b/client/src/components/RushEvent/index.tsx
@@ -21,12 +21,12 @@ export default function RushEvent({
 
     return (
         <div
-            className={`relative w-[160px] h-[200px] py-7 px-5 rounded-500 bg-n-white flex flex-col gap-4 justify-between items-center border ${borderClass} ${opacityClass}`}
+            className={`relative w-[160px] h-[200px] py-7 px-[15px] rounded-500 bg-n-white flex flex-col gap-4 justify-between items-center border ${borderClass} ${opacityClass}`}
         >
             <p className={`h-body-2-bold ${textClass} text-nowrap`}>
                 {isTodayEvent ? "Today" : formatSingleDateWithSlash(date)}
             </p>
-            <img src={image} alt="event prize" className="object-cover" />
+            <img src={image} alt="event prize" className="w-[130px] h-[80px] object-contain" />
             <p className="h-body-2-medium text-n-neutral-950 text-nowrap">{prizeName}</p>
             {isPastEvent && (
                 <p

diff --git a/client/src/index.css b/client/src/index.css
@@ -23,29 +23,35 @@ p {
 @font-face {
     font-family: "HyundaiSansHeadOffice-Bold";
     src: url("/public/fonts/hyundai-sans/HyundaiSansHeadKROTFBold.otf") format("opentype");
+    font-display: swap;
 }
 
 @font-face {
     font-family: "HyundaiSansHeadOffice-Medium";
     src: url("/public/fonts/hyundai-sans/HyundaiSansHeadKROTFMedium.otf") format("opentype");
+    font-display: swap;
 }
 
 @font-face {
     font-family: "HyundaiSansHeadOffice-Regular";
     src: url("/public/fonts/hyundai-sans/HyundaiSansHeadKROTFRegular.otf") format("opentype");
+    font-display: swap;
 }
 
 @font-face {
     font-family: "HyundaiSansTextOffice-Bold";
     src: url("/public/fonts/hyundai-sans/HyundaiSansTextKROTFBold.otf") format("opentype");
+    font-display: swap;
 }
 
 @font-face {
     font-family: "HyundaiSansTextOffice-Medium";
     src: url("/public/fonts/hyundai-sans/HyundaiSansTextKROTFMedium.otf") format("opentype");
+    font-display: swap;
 }
 
 @font-face {
     font-family: "HyundaiSansTextOffice-Regular";
     src: url("/public/fonts/hyundai-sans/HyundaiSansTextKROTFRegular.otf") format("opentype");
+    font-display: swap;
 }