Merge pull request #26 from DEVOCEAN-YOUNG-404/seungjun

Refactor: 이미지 지연 로딩
DEVOCEAN-YOUNG-404 · Oct 18, 2023 · 29da11c · 29da11c
2 parents 50a044f + cfd9244
commit 29da11c
Show file tree

Hide file tree

Showing 8 changed files with 60 additions and 41 deletions.
diff --git a/front/build.css b/front/build.css
diff --git a/front/package-lock.json b/front/package-lock.json
diff --git a/front/package.json b/front/package.json
@@ -24,6 +24,7 @@
     "react-fullpage": "^0.1.19",
     "react-hook-form": "^7.45.4",
     "react-icons": "^4.10.1",
+    "react-lazy-load": "^4.0.1",
     "react-router-dom": "^6.14.1",
     "react-scripts": "5.0.1",
     "react-spinners": "^0.13.8",

diff --git a/front/src/pages/MainPage/Page1.tsx b/front/src/pages/MainPage/Page1.tsx
@@ -1,3 +1,4 @@
+import LazyLoad from "react-lazy-load";
 import logo from "../../assets/icons/logo.svg";
 import main from "../../assets/images/main.webp";
 import { Link } from "react-router-dom";
@@ -12,12 +13,10 @@ const Page1 = () => {
         <p className="font-bold text-black text-[2rem] mb-[10px] font-main">
           내 손 안의 작은 수어 통역가
         </p>
-        <img
-          src={logo}
-          loading="lazy"
-          alt="logo"
-          className="w-[190px] mb-[20px]"
-        />
+        <LazyLoad>
+          <img src={logo} alt="logo" className="w-[190px] mb-[20px]" />
+        </LazyLoad>
+
         <p className="text-lg text-gray-400 font-main mb-[10px]">
           HandTalker와 함께라면
           <br /> 언제든 수어 번역 서비스를 이용하실 수 있습니다.

diff --git a/front/src/pages/MainPage/Page2.tsx b/front/src/pages/MainPage/Page2.tsx
@@ -1,17 +1,21 @@
 import main2 from "../../assets/images/main2.webp";
 import logo from "../../assets/icons/logo.svg";
+import LazyLoad from "react-lazy-load";
 
 const Page2 = () => {
   return (
     <div
       id="section2"
       className="w-full h-[100vh] flex flex-row items-center justify-start md:space-x-20 px-10 md:pr-20"
     >
-      <img
-        src={main2}
-        alt="main2"
-        className="hidden md:block w-auto max-w-full md:h-[23rem] lg:h-[27rem] xl:h-[30rem]"
-      />
+      <LazyLoad>
+        <img
+          src={main2}
+          alt="main2"
+          className="hidden md:block w-auto max-w-full md:h-[23rem] lg:h-[27rem] xl:h-[30rem]"
+        />
+      </LazyLoad>
+
       <div className="md:min-w-[26rem] md:w-[28rem] lg:w-[35rem] xl:w-[43rem] flex flex-col">
         <div className="flex flex-row items-center justify-start">
           <img

diff --git a/front/src/pages/MainPage/Page4.tsx b/front/src/pages/MainPage/Page4.tsx
@@ -2,6 +2,7 @@ import logo from "../../assets/icons/logo.svg";
 import discord from "../../assets/icons/discord.webp";
 import slack from "../../assets/icons/slack.webp";
 import kakaotalk from "../../assets/icons/kakaotalk.webp";
+import LazyLoad from "react-lazy-load";
 
 const Page4 = () => {
   return (
@@ -19,18 +20,29 @@ const Page4 = () => {
         </p>
       </div>
       <div className="flex flex-row items-center justify-center mt-[60px] space-x-6 md:space-x-[4rem]">
-        <img
-          src={discord}
-          alt="discord"
-          className="w-auto h-[5rem] md:h-[10rem]"
-        />
-        <img src={slack} alt="slack" className="w-auto h-[5rem] md:h-[10rem]" />
-        <div className="rounded-full">
+        <LazyLoad>
+          <img
+            src={discord}
+            alt="discord"
+            className="w-auto h-[5rem] md:h-[10rem]"
+          />
+        </LazyLoad>
+        <LazyLoad>
           <img
-            src={kakaotalk}
-            alt="kakaotalk"
+            src={slack}
+            alt="slack"
             className="w-auto h-[5rem] md:h-[10rem]"
           />
+        </LazyLoad>
+
+        <div className="rounded-full">
+          <LazyLoad>
+            <img
+              src={kakaotalk}
+              alt="kakaotalk"
+              className="w-auto h-[5rem] md:h-[10rem]"
+            />
+          </LazyLoad>
         </div>
       </div>
     </div>

diff --git a/front/src/pages/MainPage/Page5.tsx b/front/src/pages/MainPage/Page5.tsx
@@ -4,6 +4,7 @@ import sujin from "../../assets/images/sujin.webp";
 import hyeonbin from "../../assets/images/hyeonbin.webp";
 import bokyeong from "../../assets/images/bokyeong.webp";
 import { AiFillGithub } from "react-icons/ai";
+import LazyLoad from "react-lazy-load";
 
 const Page5 = () => {
   return (
@@ -30,7 +31,9 @@ const Page5 = () => {
         <div className="flex flex-row items-center justify-center">
           <div className="flex flex-col md:flex-row items-center justify-start mt-[50px] md:ml-[10px] w-[200px] md:w-[400px]">
             <div className="w-[80px] h-[80px] md:w-[180px] md:h-[180px] rounded-full overflow-hidden">
-              <img src={sujin} alt="sujin" className="w-full" loading="lazy" />
+              <LazyLoad>
+                <img src={sujin} alt="sujin" className="w-full" />
+              </LazyLoad>
             </div>
             <div className="flex flex-col items-center md:items-start justify-center md:ml-[20px]">
               <p className="mt-2 text-2xl font-bold text-black md:m-0 md:text-4xl font-main">
@@ -52,12 +55,9 @@ const Page5 = () => {
           </div>
           <div className="flex flex-col md:flex-row items-center justify-start mt-[50px] md:ml-[10px] w-[200px] md:w-[400px]">
             <div className="w-[80px] h-[80px] md:w-[180px] md:h-[180px] rounded-full overflow-hidden">
-              <img
-                src={bokyeong}
-                alt="bokyeong"
-                className="w-full"
-                loading="lazy"
-              />
+              <LazyLoad>
+                <img src={bokyeong} alt="bokyeong" className="w-full" />
+              </LazyLoad>
             </div>
             <div className="flex flex-col items-center md:items-start justify-center md:ml-[20px]">
               <p className="mt-2 text-2xl font-bold text-black md:m-0 md:text-4xl font-main">
@@ -81,12 +81,9 @@ const Page5 = () => {
         <div className="flex flex-row items-center justify-center mt-[10px] md:mt-[50px]">
           <div className="flex flex-col md:flex-row items-center justify-start mt-[50px] md:ml-[10px] w-[200px] md:w-[400px]">
             <div className="w-[80px] h-[80px] md:w-[180px] md:h-[180px] rounded-full overflow-hidden">
-              <img
-                src={seungjun}
-                alt="seungjun"
-                className="w-full"
-                loading="lazy"
-              />
+              <LazyLoad>
+                <img src={seungjun} alt="seungjun" className="w-full" />
+              </LazyLoad>
             </div>
             <div className="flex flex-col items-center md:items-start justify-center md:ml-[20px]">
               <p className="mt-2 text-2xl font-bold text-black md:m-0 md:text-4xl font-main">
@@ -108,12 +105,9 @@ const Page5 = () => {
           </div>
           <div className="flex flex-col md:flex-row items-center justify-start mt-[50px] md:ml-[10px] w-[200px] md:w-[400px]">
             <div className="w-[80px] h-[80px] md:w-[180px] md:h-[180px] rounded-full overflow-hidden">
-              <img
-                src={hyeonbin}
-                alt="hyeonbin"
-                className="w-full"
-                loading="lazy"
-              />
+              <LazyLoad>
+                <img src={hyeonbin} alt="hyeonbin" className="w-full" />
+              </LazyLoad>
             </div>
             <div className="flex flex-col items-center md:items-start justify-center md:ml-[20px]">
               <p className="mt-2 text-2xl font-bold text-black md:m-0 md:text-4xl font-main">

diff --git a/front/tailwind.config.js b/front/tailwind.config.js
@@ -23,7 +23,6 @@ module.exports = {
     extend: {
       fontFamily: {
         main: ["Pretendard"],
-        skt: ["skt"],
       },
       dropShadow: {
         xl: "0px 0px 4px rgba(0, 0, 0, 0.35)",