[NextJS] Image 컴포넌트 Legacy prop 리팩토링

처음에는 테스트 아이템 컴포넌트의 코드를 다음과 같이 구성하여 모든 컴포넌트에서 이미지가 차지하는 비율이 같도록 설정해주었다.

<div
      className="col-span-6 md:col-span-4 lg:col-span-3 w-full bg-purple-200 cursor-pointer transition duration-200
      ease-in transform sm:hover:scale-105 hover:z-50"
      onClick={handleShowDetails}
    >
      <div className="aspect-w-3 aspect-h-2">
        <div
          style={{
            position: "relative",
            width: "100%",
            height: "0",
            paddingTop: "66.67%",
          }}
        >
          <Image
            src={image}
            alt={title}
            layout="fill"
            objectFit="cover"
            sizes="(min-width: 640px) 50vw, 100vw"
          />
       </div>
</div>

이렇게 짜도 정상적으로 작동은 되지만 경고 문구로 layout과 objectFit이 Legacy 코드라는 말이 계속 뜨고, VSCode에서도 해당 props에 자꾸 취소선이 그어져 나왔다. 

이 경고 문구를 없애기 위해 다음과 같이 두 속성을 쓰지 않는 방향으로 코드를 리팩토링 하였다.

<div
        className="aspect-w-3 aspect-h-2"
        style={{ position: "relative", width: "100%", paddingBottom: "66.67%" }}
      >
        <div
          className="absolute inset-0"
          style={{ width: "100%", height: "100%" }}
        >
          <Image
            src={image}
            alt={title}
            width={400}
            height={300}
            className="object-cover"
            style={{ width: "100%", height: "100%" }}
            priority={true}
          />
        </div>
      </div>

paddigBottom을 통해 부모 요소가 이미지의 세로 비율을 고정시켜주는 부분이 상위 div로 옮겨졌고, 이미지 컴포넌트를 감싸는 div 컴포넌트를 하나 만들어 position을 absolute, inset-0 처리를 통해 부모 요소가 차지하는 자리에 이미지가 꽉 차게 들어설 수 있도록 했다.