From 2492a1599417e23fe8294c9e337073b9c502570b Mon Sep 17 00:00:00 2001 From: DaegyunOh Date: Wed, 31 Jan 2024 23:43:01 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20Image=EC=9D=98=20blur=20placeholder=20?= =?UTF-8?q?=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/perfumes/[id]/page.tsx | 14 +- components/common/DetailPageTemplate.tsx | 11 +- components/common/PerfumeItem.tsx | 2 +- components/detail/PerfumeImageSlider.tsx | 9 +- components/detail/SimilarPerfume.tsx | 20 ++- components/home/Menu.tsx | 5 +- components/home/PerfumeListElement.tsx | 11 +- next.config.js => next.config.mjs | 4 +- package.json | 3 + yarn.lock | 194 ++++++++++++++++++++++- 10 files changed, 257 insertions(+), 16 deletions(-) rename next.config.js => next.config.mjs (88%) diff --git a/app/perfumes/[id]/page.tsx b/app/perfumes/[id]/page.tsx index 1b7b083..90ccf5f 100644 --- a/app/perfumes/[id]/page.tsx +++ b/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 (
- + + Buffer.from(await bres.arrayBuffer()), + ); + + const { base64 } = await getPlaiceholder(buffer); + return (
detail bg {
perfume { +const ImageSlider = ({ images, blurImageUrls }: ImageSliderProps) => { return ( { {images.map((image, index) => ( {`Perfume ))} diff --git a/components/detail/SimilarPerfume.tsx b/components/detail/SimilarPerfume.tsx index 79447f9..6071615 100644 --- a/components/detail/SimilarPerfume.tsx +++ b/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 (
이런 향수는 어때요?
@@ -40,15 +50,15 @@ const SimilarPerfume = async ({ id }: SimilarProps) => { {`Test
diff --git a/components/home/Menu.tsx b/components/home/Menu.tsx index 5ffdd88..0c25c3d 100644 --- a/components/home/Menu.tsx +++ b/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 (
{ > ad banner { +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 (
  • { style={{ objectFit: 'cover', zIndex: -1 }} alt="perfume pg" quality={100} + placeholder="blur" + blurDataURL={base64} />