fix: lazyloading 스킵 처리

4bujak-4bujak · Jul 3, 2024 · 815c7b6 · 815c7b6
1 parent 8f9e774
commit 815c7b6
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 13 deletions.
diff --git a/src/components/home/MainHeader.tsx b/src/components/home/MainHeader.tsx
@@ -14,18 +14,26 @@ const MainHeader = () => {
             width={115}
             height={20}
             className="w-full"
+            loading="eager"
           />
         </div>
         <div className="flex justify-center items-center gap-6 ">
           <div className="cursor-pointer" onClick={() => router.push('mypage/question')}>
-            <Image src="/home/Inquiry_white.svg" alt="inquiry" width={20} height={20} />
+            <Image
+              src="/home/Inquiry_white.svg"
+              alt="inquiry"
+              width={20}
+              height={20}
+              loading="eager"
+            />
           </div>
           <div className="cursor-pointer" onClick={() => router.push('/notification')}>
             <Image
               src="/home/Notification_white.svg"
               alt="notification"
               width={20}
               height={20}
+              loading="eager"
             />
           </div>
         </div>

diff --git a/src/components/layout/footer/Footer.tsx b/src/components/layout/footer/Footer.tsx
@@ -21,9 +21,21 @@ const Footer = () => {
           <div className="  h-[44.84px] flex-col justify-start items-center gap-2.5 inline-flex">
             <div className=" w-[22.06px] h-[21.82px] flex-col justify-center items-center  ml-[3px] mt-[3px]">
               {filteredPathName === '' ? (
-                <Image src="/CheckedHome.svg" alt="home" width={20} height={20} />
+                <Image
+                  src="/CheckedHome.svg"
+                  alt="home"
+                  width={20}
+                  height={20}
+                  loading="eager"
+                />
               ) : (
-                <Image src="/Home.svg" alt="home" width={20} height={20} />
+                <Image
+                  src="/Home.svg"
+                  alt="home"
+                  width={20}
+                  height={20}
+                  loading="eager"
+                />
               )}
             </div>
             <div className="text-center text-black text-xs font-normal font-['Pretendard']">
@@ -40,9 +52,16 @@ const Footer = () => {
                   alt="resoulvation"
                   width={20}
                   height={20}
+                  loading="eager"
                 />
               ) : (
-                <Image src="/Reservation.svg" alt="resoulvation" width={20} height={20} />
+                <Image
+                  src="/Reservation.svg"
+                  alt="resoulvation"
+                  width={20}
+                  height={20}
+                  loading="eager"
+                />
               )}
             </div>
             <div className="text-center text-black text-xs font-normal font-['Pretendard']">
@@ -54,9 +73,21 @@ const Footer = () => {
           <div className="h-[43.75px] flex-col justify-start items-center gap-2.5 inline-flex">
             <div className="w-[22.06px] h-[21.82px]  flex-col  justify-center items-center">
               {filteredPathName === 'map' ? (
-                <Image src="/CheckedNavigation.svg" alt="map" width={20} height={20} />
+                <Image
+                  src="/CheckedNavigation.svg"
+                  alt="map"
+                  width={20}
+                  height={20}
+                  loading="eager"
+                />
               ) : (
-                <Image src="/Navigation.svg" alt="map" width={20} height={20} />
+                <Image
+                  src="/Navigation.svg"
+                  alt="map"
+                  width={20}
+                  height={20}
+                  loading="eager"
+                />
               )}
             </div>
             <div className="text-center text-black text-xs font-normal font-['Pretendard']">
@@ -85,9 +116,21 @@ const Footer = () => {
           className="cursor-pointer h-[44.84px] flex-col justify-start items-center gap-2.5 inline-flex">
           <div className="w-[22.06px] h-[21.82px] flex-col justify-center items-center">
             {filteredPathName === 'community' ? (
-              <Image src="/CheckedCommunity.svg" alt="community" width={20} height={20} />
+              <Image
+                src="/CheckedCommunity.svg"
+                alt="community"
+                width={20}
+                height={20}
+                loading="eager"
+              />
             ) : (
-              <Image src="/Community.svg" alt="community" width={20} height={20} />
+              <Image
+                src="/Community.svg"
+                alt="community"
+                width={20}
+                height={20}
+                loading="eager"
+              />
             )}
           </div>
           <div className="text-center text-black text-xs font-normal font-['Pretendard']">
@@ -98,9 +141,21 @@ const Footer = () => {
           <div className="h-[44.84px] flex-col justify-start items-center gap-2.5 inline-flex">
             <div className="w-[22.06px] h-[21.82px] flex-col justify-center items-center">
               {filteredPathName === 'mypage' ? (
-                <Image src="/CheckedProfile.svg" alt="mypage" width={20} height={20} />
+                <Image
+                  src="/CheckedProfile.svg"
+                  alt="mypage"
+                  width={20}
+                  height={20}
+                  loading="eager"
+                />
               ) : (
-                <Image src="/Profile.svg" alt="mypage" width={20} height={20} />
+                <Image
+                  src="/Profile.svg"
+                  alt="mypage"
+                  width={20}
+                  height={20}
+                  loading="eager"
+                />
               )}
             </div>
             <div className="text-center text-black text-xs font-normal font-['Pretendard']">

diff --git a/src/components/layout/header/Header.tsx b/src/components/layout/header/Header.tsx
@@ -6,15 +6,33 @@ const Header = () => {
   return (
     <header className="border-b border-stone-50  bg-white fixed top-0 w-[393px] h-20 px-4 py-6 flex justify-between items-center z-[9999]">
       <div onClick={() => router.push('/')} className="w-[116px] cursor-pointer">
-        <Image src="/OffispaceBlack.png" alt="logo" width={115} height={20} />
+        <Image
+          src="/OffispaceBlack.png"
+          alt="logo"
+          width={115}
+          height={20}
+          loading="eager"
+        />
       </div>
       <div className="flex items-center justify-center gap-6">
         <div onClick={() => router.push('mypage/question')} className="cursor-pointer">
-          <Image src="/Inquiry.svg" alt="inquiry" width={20} height={20} />
+          <Image
+            src="/Inquiry.svg"
+            alt="inquiry"
+            width={20}
+            height={20}
+            loading="eager"
+          />
         </div>
         <Link href={'/notification'}>
           <div className="cursor-pointer">
-            <Image src="/Notification.svg" alt="notification" width={20} height={20} />
+            <Image
+              src="/Notification.svg"
+              alt="notification"
+              width={20}
+              height={20}
+              loading="eager"
+            />
           </div>
         </Link>
       </div>