hotfix: blur placeholder 삭제

이유는 모르겠는데 로딩이 너무 오래걸려 일단 삭제했다.
team-acode · Jan 31, 2024 · 6989000 · 6989000
1 parent 4c16122
commit 6989000
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 43 deletions.
diff --git a/app/perfumes/[id]/page.tsx b/app/perfumes/[id]/page.tsx
@@ -7,7 +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';
+// import { getPlaiceholder } from 'plaiceholder';
 
 interface DetailPageProps {
   params: { id: string };
@@ -50,21 +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 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;
-    }),
-  );
+  //     const { base64 } = await getPlaiceholder(buffer);
+  //     return base64;
+  //   }),
+  // );
 
   return (
     <section className="mb-[186px]">
       <Navbar id={params.id} initialWishState={scraped} />
-      <ImageSlider images={images} blurImageUrls={blurImageUrls} />
+      <ImageSlider images={images} />
       <PerfumeInfo
         brandName={brandName}
         fragranceName={fragranceName}

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

diff --git a/components/detail/PerfumeImageSlider.tsx b/components/detail/PerfumeImageSlider.tsx
@@ -9,10 +9,9 @@ import 'swiper/css/pagination';
 
 interface ImageSliderProps {
   images: string[];
-  blurImageUrls: string[];
 }
 
-const ImageSlider = ({ images, blurImageUrls }: ImageSliderProps) => {
+const ImageSlider = ({ images }: ImageSliderProps) => {
   return (
     <Swiper
       pagination={{ type: 'bullets' }}
@@ -23,8 +22,8 @@ const ImageSlider = ({ images, blurImageUrls }: ImageSliderProps) => {
       {images.map((image, index) => (
         <SwiperSlide key={image} className="">
           <Image
-            placeholder="blur"
-            blurDataURL={blurImageUrls[index]}
+            // placeholder="blur"
+            // blurDataURL={blurImageUrls[index]}
             src={image}
             alt={`Perfume ${index}`}
             fill

diff --git a/components/detail/SimilarPerfume.tsx b/components/detail/SimilarPerfume.tsx
@@ -1,6 +1,6 @@
 import Image from 'next/image';
 import Link from 'next/link';
-import { getPlaiceholder } from 'plaiceholder';
+// import { getPlaiceholder } from 'plaiceholder';
 // import Slider from './Slider';
 
 interface SimilarProps {
@@ -32,16 +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 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;
-    }),
-  );
+  //     const { base64 } = await getPlaiceholder(buffer);
+  //     return base64;
+  //   }),
+  // );
   return (
     <div className="">
       <div className="text-acodeblack h2 mb-5 mx-4">이런 향수는 어때요?</div>
@@ -53,8 +53,8 @@ const SimilarPerfume = async ({ id }: SimilarProps) => {
             className="relative w-[138px] h-[138px] shrink-0"
           >
             <Image
-              placeholder="blur"
-              blurDataURL={blurImageUrls[index]}
+              // placeholder="blur"
+              // blurDataURL={blurImageUrls[index]}
               src={perfume.thumbnail}
               alt={`Test Perfume ${index + 1}`}
               fill

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

diff --git a/next.config.mjs → next.config.js b/next.config.mjs → next.config.js
@@ -1,5 +1,5 @@
 /** @type {import('next').NextConfig} */
-import withPlaiceholder from '@plaiceholder/next';
+// import withPlaiceholder from '@plaiceholder/next';
 
 const nextConfig = {
   async rewrites() {
@@ -32,4 +32,4 @@ const nextConfig = {
   },
 };
 
-export default withPlaiceholder(nextConfig);
+module.exports = nextConfig;