💄 style : Optimize images

Optimize images for SSR and CSR

Related issue: YJU-OKURA#128

Author: dorimu0

public/gif/eclipse.gif

@@ -4,7 +4,7 @@ const icons = {
   door: '/svgs/navbar/door.svg',
   moreHoriz: '/svgs/navbar/moreHoriz.svg',
   moreVert: '/svgs/navbar/moreVert.svg',
-  mypage: '/svgs/navbar/mypage.svg',
+  myPage: '/svgs/navbar/mypage.svg',
   search: '/svgs/navbar/search.svg',
   plus: '/svgs/navbar/plus.svg',
 };

public/svgs/navbar/index.ts

@@ -13,6 +13,7 @@ const Login = () => {
       }
     });
   };
+
   return (
     <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
       <div
@@ -32,7 +33,13 @@ const Login = () => {
               </div>
             </div>
             <div className="w-full flex justify-center items-center">
-              <Image src={svgs.login} alt="logo" width={370} height={370} />
+              <Image
+                src={svgs.login}
+                alt="logo"
+                width={370}
+                height={258}
+                style={{width: 370, height: 258}}
+              />
             </div>
           </div>
           {/* RIGHT */}

src/app/components/login/Login.tsx

@@ -37,7 +37,13 @@ const Page = () => {
     <div className="absolute top-0 opacity-50 w-full h-[100vh] flex justify-center items-center bg-[#8c8c8c]">
       <div className="w-[650px] h-[500px] bg-white drop-shadow-xl rounded-lg flex justify-center items-center">
         <div className="text-xl text-gray-400">
-          <Image src={gifs.eclipse} alt="loading" width={70} height={70} />
+          <Image
+            src={gifs.eclipse}
+            alt="loading"
+            width={70}
+            height={70}
+            priority
+          />
         </div>
       </div>
     </div>

src/app/googleLogin/page.tsx

@@ -43,7 +43,13 @@ const Page = () => {
           학습의 편의성을 향상시키고 즐겁게 학습하는 경험을 만끽해 보세요!
         </div>
         <div>
-          <Image src={intro.introImg} width={500} height={500} alt="mainImg" />
+          <Image
+            src={intro.introImg}
+            width={500}
+            height={500}
+            alt="mainImg"
+            priority
+          />
         </div>
         <button
           onClick={openModal}