From 2dfc1ca8dd9e345dda70e640f2e01424b23b8819 Mon Sep 17 00:00:00 2001
From: seondal <sseondal@gmail.com>
Date: Thu, 21 Mar 2024 20:51:38 +0900
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20improve=20:=20=20=E2=9C=A8?=
 =?UTF-8?q?=20feat=20:=20=20=ED=8F=AC=EC=A6=88=ED=94=BD=20=EB=A1=9C?=
 =?UTF-8?q?=EB=94=A9=20=EB=B6=84=EA=B8=B0=EC=B2=98=EB=A6=AC=20=EA=B3=A0?=
 =?UTF-8?q?=EB=8F=84=ED=99=94=20->=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?=
 =?UTF-8?q?=EB=A0=8C=EB=8D=94=EB=A7=81=20=EA=B5=AC=EB=B6=84=20=ED=95=84?=
 =?UTF-8?q?=EC=9A=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(Main)/pick/components/PickSection.tsx | 11 +++++++----
 src/components/Modal/PoseImage.tsx             | 10 +++++++---
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/app/(Main)/pick/components/PickSection.tsx b/src/app/(Main)/pick/components/PickSection.tsx
index 2c61edcd..2f4b9535 100644
--- a/src/app/(Main)/pick/components/PickSection.tsx
+++ b/src/app/(Main)/pick/components/PickSection.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import Image from 'next/image';
 import { useEffect, useState } from 'react';
 import Lottie from 'react-lottie-player';
 
@@ -14,6 +15,7 @@ import { peopleCountList } from '@/constants/data';
 export default function PickSection() {
   const [countState, setCountState] = useState(1);
   const [image, setImage] = useState<string>('/images/image-frame.png');
+  const [isRendered, setIsRendered] = useState(false);
   const [isLottie, setIsLottie] = useState(true);
   const { refetch } = usePosePickQuery(countState, {
     onSuccess: (data) => {
@@ -26,9 +28,10 @@ export default function PickSection() {
   }, []);
 
   const handlePickClick = () => {
+    setIsRendered(false);
     refetch();
-    setIsLottie(true);
-    setTimeout(() => setIsLottie(false), 800);
+    // setIsLottie(true);
+    // setTimeout(() => setIsLottie(false), 600);
   };
 
   return (
@@ -41,13 +44,13 @@ export default function PickSection() {
         />
       </div>
       <div className="relative flex flex-1">
-        {isLottie && (
+        {(isLottie || !isRendered) && (
           <div className="absolute inset-0 z-10 flex justify-center bg-black">
             <Lottie animationData={lottiePick} play />
           </div>
         )}
         <div className="absolute inset-0 flex justify-center bg-black">
-          <PoseImage src={image} />
+          <PoseImage src={image} onLoad={() => setIsRendered(true)} />
         </div>
       </div>
       <Spacing size={100} />
diff --git a/src/components/Modal/PoseImage.tsx b/src/components/Modal/PoseImage.tsx
index 337c22c8..e71407d1 100644
--- a/src/components/Modal/PoseImage.tsx
+++ b/src/components/Modal/PoseImage.tsx
@@ -4,8 +4,9 @@ import { useState } from 'react';
 interface DetailedImageI {
   src: string;
   responsive?: boolean;
+  onLoad?: () => void;
 }
-export default function PoseImage({ src, responsive = false }: DetailedImageI) {
+export default function PoseImage({ src, responsive = false, onLoad }: DetailedImageI) {
   const [isModalShow, setIsModalShow] = useState(false);
   return (
     <>
@@ -23,10 +24,11 @@ export default function PoseImage({ src, responsive = false }: DetailedImageI) {
       {responsive ? (
         <Image
           src={src}
-          alt="이미지"
+          alt="상세보기"
           layout="responsive"
           width={400}
           height={400}
+          onLoad={onLoad}
           className="cursor-pointer object-contain"
           onClick={() => setIsModalShow(true)}
         />
@@ -34,9 +36,11 @@ export default function PoseImage({ src, responsive = false }: DetailedImageI) {
         <Image
           src={src}
           fill
-          priority
           className="cursor-pointer object-contain"
+          placeholder="blur"
+          blurDataURL={src}
           alt="포즈픽"
+          onLoad={onLoad}
           onClick={() => setIsModalShow(true)}
         />
       )}