Merge pull request #30 from team-acode/develop

[feat] Image의 blur placeholder 설정

app/perfumes/[id]/page.tsx

@@ -7,6 +7,7 @@ import Navbar from '@/components/detail/NavBar';
 import PerfumeDetailList from '@/components/detail/PerfumeDetailList';
 import { redirect } from 'next/navigation';
 import { getSession } from '@/utils/auth';
+import { getPlaiceholder } from 'plaiceholder';
 
 interface DetailPageProps {
   params: { id: string };
@@ -49,10 +50,21 @@ const page = async ({ params, searchParams }: DetailPageProps) => {
   } = await res.json();
 
   const images = [thumbnail, image1, image2].filter((image) => image);
+  const blurImageUrls = await Promise.all(
+    images.map(async (image) => {
+      const buffer = await fetch(image).then(async (bres) =>
+        Buffer.from(await bres.arrayBuffer()),
+      );
+
+      const { base64 } = await getPlaiceholder(buffer);
+      return base64;
+    }),
+  );
+
   return (
     <section className="mb-[186px]">
       <Navbar id={params.id} initialWishState={scraped} />
-      <ImageSlider images={images} />
+      <ImageSlider images={images} blurImageUrls={blurImageUrls} />
       <PerfumeInfo
         brandName={brandName}
         fragranceName={fragranceName}

components/common/DetailPageTemplate.tsx

@@ -1,6 +1,7 @@
 import InfinitePerfumeList from '@/components/common/InfinitePerfumeList';
 import { TPerfume } from '@/types';
 import Image from 'next/image';
+import { getPlaiceholder } from 'plaiceholder';
 
 interface DetailPageTemplateProps {
   sort: string;
@@ -27,11 +28,19 @@ const DetailPageTemplate = async ({
 
   const info = await res.json();
 
+  const buffer = await fetch(info.background).then(async (bres) =>
+    Buffer.from(await bres.arrayBuffer()),
+  );
+
+  const { base64 } = await getPlaiceholder(buffer);
+
   return (
     <div className="text-acodewhite">
       <div className="relative h-[386px] px-4">
         <Image
-          src={info.background || '/images/detail-temp-bg.png'} // 임시로 지정해둠 변경해야됨
+          placeholder="blur"
+          blurDataURL={base64}
+          src={info.background} // 임시로 지정해둠 변경해야됨
           fill
           style={{ objectFit: 'cover', zIndex: -1 }}
           alt="detail bg"

components/common/PerfumeItem.tsx

@@ -11,7 +11,7 @@ const PerfumeItem = ({ perfume }: PerfumeItemProps) => {
     <Link href={`/perfumes/${perfume.fragranceId}`} className="h-[187px]">
       <div className="relative h-[140px]">
         <Image
-          src={perfume.thumbnail || '/images/perfume-temp-bg.png'}
+          src={perfume.thumbnail!}
           alt="perfume"
           style={{ objectFit: 'cover' }}
           className="!h-[140px] rounded-[4px]"

components/detail/PerfumeImageSlider.tsx

@@ -9,9 +9,10 @@ import 'swiper/css/pagination';
 
 interface ImageSliderProps {
   images: string[];
+  blurImageUrls: string[];
 }
 
-const ImageSlider = ({ images }: ImageSliderProps) => {
+const ImageSlider = ({ images, blurImageUrls }: ImageSliderProps) => {
   return (
     <Swiper
       pagination={{ type: 'bullets' }}
@@ -22,10 +23,12 @@ const ImageSlider = ({ images }: ImageSliderProps) => {
       {images.map((image, index) => (
         <SwiperSlide key={image} className="">
           <Image
+            placeholder="blur"
+            blurDataURL={blurImageUrls[index]}
             src={image}
             alt={`Perfume ${index}`}
-            layout="fill"
-            objectFit="cover"
+            fill
+            className="object-cover"
           />
         </SwiperSlide>
       ))}

components/detail/SimilarPerfume.tsx

@@ -1,5 +1,6 @@
 import Image from 'next/image';
 import Link from 'next/link';
+import { getPlaiceholder } from 'plaiceholder';
 // import Slider from './Slider';
 
 interface SimilarProps {
@@ -31,7 +32,16 @@ const SimilarPerfume = async ({ id }: SimilarProps) => {
   if (!data) return null;
 
   const perfumes: Fragrance[] = data.similarFragranceList;
+  const blurImageUrls = await Promise.all(
+    perfumes.map(async (perfume) => {
+      const buffer = await fetch(perfume.thumbnail).then(async (pres) =>
+        Buffer.from(await pres.arrayBuffer()),
+      );
 
+      const { base64 } = await getPlaiceholder(buffer);
+      return base64;
+    }),
+  );
   return (
     <div className="">
       <div className="text-acodeblack h2 mb-5 mx-4">이런 향수는 어때요?</div>
@@ -40,15 +50,15 @@ const SimilarPerfume = async ({ id }: SimilarProps) => {
           <Link
             href={`/perfumes/${perfume.fragranceId}`}
             key={perfume.fragranceName}
-            className="w-[138px] shrink-0"
+            className="relative w-[138px] h-[138px] shrink-0"
           >
             <Image
+              placeholder="blur"
+              blurDataURL={blurImageUrls[index]}
               src={perfume.thumbnail}
               alt={`Test Perfume ${index + 1}`}
-              width={138}
-              height={138}
-              objectFit="cover"
-              className="w-[138px] h-[138px] rounded-[4px]"
+              fill
+              className="w-[138px] h-[138px] rounded-[4px] object-cover"
             />
             <div className="w-[134px] h-[35px] flex flex-col justify-center bg-white pl-[2px] mt-[10px]">
               <div className="text-acodegray-500 caption2 mb-1">

components/home/Menu.tsx

@@ -3,7 +3,7 @@ import Image from 'next/image';
 import Link from 'next/link';
 import ad1 from '@/public/images/ad1.png';
 
-const Menu = () => {
+const Menu = async () => {
   return (
     <div className="mt-9 px-4 flex text-[14px] overflow-auto">
       <Link
@@ -43,7 +43,8 @@ const Menu = () => {
       >
         <Image
           src={ad1}
-          placeholder="empty"
+          placeholder="blur"
+          blurDataURL={ad1.blurDataURL}
           className="h-[95px] w-[198px]"
           alt="ad banner"
           height={95}

components/home/PerfumeListElement.tsx

@@ -1,12 +1,19 @@
 import { TPerfume } from '@/types';
 import Image from 'next/image';
 import Link from 'next/link';
+import { getPlaiceholder } from 'plaiceholder';
 
 interface PerfumeListElementProps {
   perfume: TPerfume;
 }
 
-const PerfumeListElement = ({ perfume }: PerfumeListElementProps) => {
+const PerfumeListElement = async ({ perfume }: PerfumeListElementProps) => {
+  const buffer = await fetch(perfume.poster!).then(async (res) =>
+    Buffer.from(await res.arrayBuffer()),
+  );
+
+  const { base64 } = await getPlaiceholder(buffer);
+
   return (
     <li className="w-full relative mb-[5px]">
       <Image
@@ -15,6 +22,8 @@ const PerfumeListElement = ({ perfume }: PerfumeListElementProps) => {
         style={{ objectFit: 'cover', zIndex: -1 }}
         alt="perfume pg"
         quality={100}
+        placeholder="blur"
+        blurDataURL={base64}
       />
       <Link
         href={`perfumes/${perfume.fragranceId}`}

next.config.js → next.config.mjs

@@ -1,4 +1,6 @@
 /** @type {import('next').NextConfig} */
+import withPlaiceholder from '@plaiceholder/next';
+
 const nextConfig = {
   async rewrites() {
     return [
@@ -30,4 +32,4 @@ const nextConfig = {
   },
 };
 
-module.exports = nextConfig;
+export default withPlaiceholder(nextConfig);

package.json

@@ -9,11 +9,14 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@plaiceholder/next": "^3.0.0",
     "browser-image-compression": "^2.0.2",
     "next": "13.5.6",
+    "plaiceholder": "^3.0.0",
     "react": "^18",
     "react-dom": "^18",
     "react-intersection-observer": "^9.5.3",
+    "sharp": "^0.33.2",
     "swiper": "^11.0.5"
   },
   "devDependencies": {