⚡️ improve : ✨ feat : 포즈픽 로딩 분기처리 고도화 -> 이미지 렌더링 구분 필요

dnd-side-project · Mar 21, 2024 · 2dfc1ca · 2dfc1ca
1 parent 60116fc
commit 2dfc1ca
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 7 deletions.
diff --git 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
@@ -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,20 +24,23 @@ 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)}
         />
       ) : (
         <Image
           src={src}
           fill
-          priority
           className="cursor-pointer object-contain"
+          placeholder="blur"
+          blurDataURL={src}
           alt="포즈픽"
+          onLoad={onLoad}
           onClick={() => setIsModalShow(true)}
         />
       )}