⚡️ improve : 이미지 모달로 크게 보기 속도 개선 ( ImageModal -> PoseImage)

src/app/(Main)/pick/components/PickSection.tsx

@@ -1,21 +1,18 @@
 'use client';
 
-import Image from 'next/image';
 import { useEffect, useState } from 'react';
 import Lottie from 'react-lottie-player';
 
 import lottiePick from '#/lotties/pick.json';
 import { usePosePickQuery } from '@/apis';
 import { BottomFixedDiv, PrimaryButton } from '@/components/Button';
-import { ImageModal } from '@/components/Modal';
-import { useOverlay } from '@/components/Overlay/useOverlay';
+import PoseImage from '@/components/Modal/PoseImage';
 import { SelectionBasic } from '@/components/Selection';
 import { Spacing } from '@/components/Spacing';
 import { peopleCountList } from '@/constants/data';
 
 export default function PickSection() {
   const [countState, setCountState] = useState(1);
-  const { open } = useOverlay();
   const [image, setImage] = useState<string>('/images/image-frame.png');
   const [isLottie, setIsLottie] = useState(true);
   const { refetch } = usePosePickQuery(countState, {
@@ -50,14 +47,7 @@ export default function PickSection() {
           </div>
         )}
         <div className="absolute inset-0 flex justify-center bg-black">
-          <Image
-            src={image}
-            fill
-            priority
-            className="cursor-pointer object-contain"
-            onClick={() => open(({ exit }) => <ImageModal image={image} onClose={exit} />)}
-            alt="포즈픽"
-          />
+          <PoseImage src={image} />
         </div>
       </div>
       <Spacing size={100} />

src/app/(Sub)/detail/[id]/components/DetailSection.tsx

@@ -1,14 +1,13 @@
 'use client';
 
-import Image from 'next/image';
 import { usePathname } from 'next/navigation';
 
 import Source from './Source';
 import TagButton from './TagButton';
 import { usePoseDetailQuery } from '@/apis';
 import { BottomFixedDiv, PrimaryButton } from '@/components/Button';
 import { Popup } from '@/components/Modal';
-import ImageModal from '@/components/Modal/ImageModal.client';
+import PoseImage from '@/components/Modal/PoseImage';
 import { useOverlay } from '@/components/Overlay/useOverlay';
 import { BASE_SITE_URL } from '@/constants/env';
 import useKakaoShare from '@/hooks/useKakaoShare';
@@ -29,7 +28,6 @@ export default function DetailSection({ poseId }: DetailSectionProps) {
 
   const handleShareLink = async () => {
     await copy(BASE_SITE_URL + pathname);
-
     open(({ exit }) => (
       <Popup content="링크가 복사되었습니다.">
         <PrimaryButton text="확인" onClick={exit} />
@@ -40,17 +38,8 @@ export default function DetailSection({ poseId }: DetailSectionProps) {
   return (
     <div className="overflow-y-auto pb-160">
       {source && <Source source={source} url={sourceUrl} />}
-      <div className="flex justify-center">
-        <div className="relative">
-          <Image
-            src={imageKey}
-            alt="detailImage"
-            className="cursor-pointer"
-            width={450}
-            height={440}
-            onClick={() => open(({ exit }) => <ImageModal image={imageKey} onClose={exit} />)}
-          />
-        </div>
+      <div className="block">
+        <PoseImage src={imageKey} responsive={true} />
       </div>
       <div className="flex flex-wrap gap-10 px-20 py-12">
         <TagButton type="people" value={peopleCount} name={`${peopleCount}인`} />

src/components/Modal/PoseImage.tsx

@@ -0,0 +1,45 @@
+import Image from 'next/image';
+import { useState } from 'react';
+
+interface DetailedImageI {
+  src: string;
+  responsive?: boolean;
+}
+export default function PoseImage({ src, responsive = false }: DetailedImageI) {
+  const [isModalShow, setIsModalShow] = useState(false);
+  return (
+    <>
+      {isModalShow && (
+        <div
+          className="fixed inset-x-0 inset-y-0 z-30 flex items-center justify-center"
+          onClick={() => setIsModalShow(false)}
+        >
+          <div className="fixed inset-x-0 inset-y-0 bg-dimmed opacity-70" />
+          <div className="h-screen w-full">
+            <Image src={src} alt="fullImage" fill className="object-contain" />
+          </div>
+        </div>
+      )}
+      {responsive ? (
+        <Image
+          src={src}
+          alt="이미지"
+          layout="responsive"
+          width={400}
+          height={400}
+          className="cursor-pointer object-contain"
+          onClick={() => setIsModalShow(true)}
+        />
+      ) : (
+        <Image
+          src={src}
+          fill
+          priority
+          className="cursor-pointer object-contain"
+          alt="포즈픽"
+          onClick={() => setIsModalShow(true)}
+        />
+      )}
+    </>
+  );
+}

src/components/Modal/index.ts

@@ -1,3 +1,2 @@
 export { default as Popup } from './Popup';
-export { default as ImageModal } from './ImageModal.client';
 export { default as PreparingPopup } from './PreparingPopup';