Feat: card img 최적화

components/common/Header.tsx

@@ -5,6 +5,7 @@ import { useRouter } from "next/router";
 import { Profile } from "@/styles/commonStyle";
 import LinkButton from "./atoms/LinkButton";
 import Link from "next/link";
+import Image from "next/image";
 
 const logo = '/assets/logo/logo.svg';
 

components/common/atoms/Input.tsx

@@ -64,7 +64,7 @@ function Input({
           </Button>
         )}
       </Relative>
-    {value && <SearchResults><span>{value}</span>으로 검색한 결과입니다.</SearchResults>}
+    {value && <SearchResults><span>{value} </span>으로 검색한 결과입니다.</SearchResults>}
    </>
   );
 }

components/folder/PostCard.tsx

@@ -2,10 +2,11 @@ import { useMemo, useState } from "react";
 import Link from "next/link";
 import { IFolderContent} from "@/pages/folder/interface";
 import { IModal } from "../modal/interface";
-import { BookMarkBtn, CardMenu, CardWrap } from "./PostCardStyle";
 import { calculateTimeAgo } from "@/src/utils/calcTilmAgo";
 import Modal from "../modal/Modal";
+import { BookMarkBtn, CardMenu, CardWrap } from "./PostCardStyle";
 import { DFlaxAlignCenterBtw, EllipsisLine } from "@/styles/commonStyle";
+import Image from "next/image";
 
 const emptyImg = '/assets/logo/logo.svg';
 
@@ -46,7 +47,7 @@ export default function PostCard({ image_source, description, created_at}: IFold
           <figure>
             <div className="card__image">
               {image_source ? (
-                <img src={image_source} alt={image_source} />
+                <Image fill src={image_source} alt={image_source} />
               ) : (
                 <img className="empty" src={emptyImg} alt="" />
               )}

components/folder/PostCardStyle.ts

@@ -14,30 +14,26 @@ export const CardWrap = styled.div`
       border: 1px solid ${theme.color.primary};
       .card__image {
         img {
-          transform: scale(1.3) translate(-40%,-40%);
+          transform: scale(1.3)
         }
       }
     }
   }
   .card {
     &__image {
       position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
       width: 100%;
       height: 12.5rem;
       overflow: hidden;
       background-color: #DDDFFF;
       img {
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        width: 100%;
-        transform: translate(-50%,-50%);
+        object-fit: cover;
         transition: transform 0.3s;
         &.empty {
-          left: 50%;
-          width: 133px;
-          opacity:.18;
-          transform: translateX(-50%);
+          opacity: 0.5;
         }
       }
     }

next.config.js

@@ -1,6 +1,16 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: '**',
+        port: '',
+        pathname: '/**',
+      },
+    ],
+  },
 }
 
 module.exports = nextConfig