From 13de62028d61427e72e5ce0b0e012a62f2f8e3a7 Mon Sep 17 00:00:00 2001
From: HeesungB <hezo25@naver.com>
Date: Thu, 15 Dec 2022 13:25:07 +0900
Subject: [PATCH] Remove next image warning

---
 components/chain-list/chain-image.tsx         |  9 ++++++-
 .../connect-wallet-modal/wallet-item.tsx      |  7 +++++-
 components/logo/index.tsx                     | 24 +++++++++++++++++--
 components/logo/styled.ts                     | 16 -------------
 components/search-input/index.tsx             | 10 ++------
 components/twitter-profile/index.tsx          |  1 +
 pages/index.tsx                               | 24 +++++++++++++++----
 7 files changed, 59 insertions(+), 32 deletions(-)
 delete mode 100644 components/logo/styled.ts

diff --git a/components/chain-list/chain-image.tsx b/components/chain-list/chain-image.tsx
index 167a5af..c40282f 100644
--- a/components/chain-list/chain-image.tsx
+++ b/components/chain-list/chain-image.tsx
@@ -6,5 +6,12 @@ import KeplrIcon from "../../public/images/svg/keplr-icon.svg";
 export const ChainImage = (props: ImageProps) => {
   const [src, setSrc] = useState(props.src);
 
-  return <Image {...props} src={src} onError={() => setSrc(KeplrIcon)} />;
+  return (
+    <Image
+      {...props}
+      src={src}
+      sizes="3rem"
+      onError={() => setSrc(KeplrIcon)}
+    />
+  );
 };
diff --git a/components/connect-wallet-modal/wallet-item.tsx b/components/connect-wallet-modal/wallet-item.tsx
index 65f08bd..6416cc9 100644
--- a/components/connect-wallet-modal/wallet-item.tsx
+++ b/components/connect-wallet-modal/wallet-item.tsx
@@ -52,7 +52,12 @@ export const WalletItem: FunctionComponent<Props> = (props: Props) => {
   return (
     <WalletContainer isReady={wallet.isReady} onClick={onClickWalletItem}>
       <WalletIcon>
-        <Image src={wallet.image} fill={true} alt="wallet Icon" />
+        <Image
+          src={wallet.image}
+          fill={true}
+          sizes="3.75rem"
+          alt="wallet Icon"
+        />
       </WalletIcon>
       <WalletContentContainer>
         <WalletName>{wallet.name}</WalletName>
diff --git a/components/logo/index.tsx b/components/logo/index.tsx
index eb1f80e..3f96f86 100644
--- a/components/logo/index.tsx
+++ b/components/logo/index.tsx
@@ -6,15 +6,35 @@ import Link from "next/link";
 import LogoIcon from "../../public/images/svg/logo.svg";
 
 // Styles
-import { LogoContainer } from "./styled";
+import styled from "styled-components";
 import { FunctionComponent } from "react";
 
 export const Logo: FunctionComponent = () => {
   return (
     <Link href="/">
       <LogoContainer>
-        <Image src={LogoIcon} fill={true} alt="Home Logo" />
+        <Image
+          src={LogoIcon}
+          fill={true}
+          sizes="10rem"
+          alt="Home Logo"
+          priority
+        />
       </LogoContainer>
     </Link>
   );
 };
+
+export const LogoContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  position: absolute;
+
+  width: 10rem;
+  height: 5rem;
+
+  margin-top: 80px;
+  margin-left: 80px;
+`;
diff --git a/components/logo/styled.ts b/components/logo/styled.ts
deleted file mode 100644
index d51df61..0000000
--- a/components/logo/styled.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-// Styles
-import styled from "styled-components";
-
-export const LogoContainer = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  position: absolute;
-
-  width: 160px;
-  height: 80px;
-
-  margin-top: 80px;
-  margin-left: 80px;
-`;
diff --git a/components/search-input/index.tsx b/components/search-input/index.tsx
index f535cbb..407e663 100644
--- a/components/search-input/index.tsx
+++ b/components/search-input/index.tsx
@@ -1,10 +1,4 @@
-import {
-  Dispatch,
-  FunctionComponent,
-  SetStateAction,
-  useRef,
-  useState,
-} from "react";
+import { Dispatch, FunctionComponent, SetStateAction } from "react";
 
 import Image from "next/image";
 
@@ -24,7 +18,7 @@ export const SearchInput: FunctionComponent<Props> = (props) => {
   return (
     <SearchContainer>
       <SearchIconContainer>
-        <Image src={SearchIcon} fill={true} alt="search icon" />
+        <Image src={SearchIcon} fill={true} sizes="1.3rem" alt="search icon" />
       </SearchIconContainer>
 
       <SearchText
diff --git a/components/twitter-profile/index.tsx b/components/twitter-profile/index.tsx
index 6314efb..3be22df 100644
--- a/components/twitter-profile/index.tsx
+++ b/components/twitter-profile/index.tsx
@@ -17,6 +17,7 @@ export const TwitterProfile: FunctionComponent<Props> = (props) => {
         <Image
           src={twitterProfileInformation?.profile_image_url ?? ""}
           fill={true}
+          sizes="5rem"
           alt="twitter profile image"
         />
       </ProfileImageContainer>
diff --git a/pages/index.tsx b/pages/index.tsx
index 394c039..cdff9c5 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -36,7 +36,13 @@ export default function Home() {
         <MainTitleContainer>
           <MainTitleImageBackground>
             <MainTitleImageContainer>
-              <Image src={MainTitle} fill={true} alt="Main Title" />
+              <Image
+                src={MainTitle}
+                fill={true}
+                sizes="60rem"
+                alt="Main Title"
+                priority
+              />
             </MainTitleImageContainer>
           </MainTitleImageBackground>
 
@@ -48,14 +54,24 @@ export default function Home() {
           <SubContainer>
             <CheckContainer>
               <CheckIconContainer>
-                <Image src={CheckIcon} fill={true} alt="Check Icon" />
+                <Image
+                  src={CheckIcon}
+                  fill={true}
+                  sizes="1.6rem"
+                  alt="Check Icon"
+                />
               </CheckIconContainer>
               You are a <CheckBoldText>&nbsp;keplr&nbsp;</CheckBoldText> user.
               if not, you can install here
             </CheckContainer>
             <CheckContainer>
               <CheckIconContainer>
-                <Image src={CheckIcon} fill={true} alt="Check Icon" />
+                <Image
+                  src={CheckIcon}
+                  fill={true}
+                  sizes="1.6rem"
+                  alt="Check Icon"
+                />
               </CheckIconContainer>
               <CheckBoldText>Osmo&nbsp;</CheckBoldText> is required for this
               transaction
@@ -64,7 +80,7 @@ export default function Home() {
         </MainTitleContainer>
 
         <MainLogoContainer>
-          <Image src={MainLogo} layout="fixed" fill={true} alt="Main Logo" />
+          <Image src={MainLogo} fill={true} sizes="25rem" alt="Main Logo" />
         </MainLogoContainer>
       </MainContainer>