From 716c5f79a43b389f24b3df2469e30a35d8dd61d7 Mon Sep 17 00:00:00 2001
From: HyunJinNo <nhj9831@naver.com>
Date: Sun, 21 Jul 2024 17:09:22 +0900
Subject: [PATCH] =?UTF-8?q?=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EB=B7=B0?=
 =?UTF-8?q?=EC=96=B4=20=EC=83=9D=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../informations/detail/ImageList.tsx         | 81 +++++++++++++++++++
 .../informations/detail/ImageViewer.tsx       | 71 ++++------------
 .../informations/detail/InformationViewer.tsx |  4 +-
 .../detail/ImageListContainer.tsx             | 31 +++++++
 .../detail/ImageViewerContainer.tsx           | 25 ------
 5 files changed, 131 insertions(+), 81 deletions(-)
 create mode 100644 src/components/informations/detail/ImageList.tsx
 create mode 100644 src/containers/informations/detail/ImageListContainer.tsx
 delete mode 100644 src/containers/informations/detail/ImageViewerContainer.tsx

diff --git a/src/components/informations/detail/ImageList.tsx b/src/components/informations/detail/ImageList.tsx
new file mode 100644
index 00000000..5fc19940
--- /dev/null
+++ b/src/components/informations/detail/ImageList.tsx
@@ -0,0 +1,81 @@
+import { useDragScrollType } from "@/hooks/useDragScroll";
+import Image from "next/image";
+import { Dispatch, SetStateAction } from "react";
+import ImageViewer from "./ImageViewer";
+
+interface Props {
+  scrollHook: useDragScrollType;
+  images: Array<Readonly<{ imageStatus: string; address: string }>>;
+  mainImageUrl: string;
+  viewerVisible: boolean;
+  setMainImageUrl: Dispatch<SetStateAction<string>>;
+  openViewer: () => void;
+  closeViewer: () => void;
+}
+
+const ImageList = ({
+  scrollHook,
+  images,
+  mainImageUrl,
+  viewerVisible,
+  setMainImageUrl,
+  openViewer,
+  closeViewer,
+}: Props) => {
+  return (
+    <div className="dark:opacity-65">
+      {viewerVisible && (
+        <ImageViewer imageUrl={mainImageUrl} closeViewer={closeViewer} />
+      )}
+      <div className="relative h-[26.0625rem] w-full max-[744px]:h-[19.125rem]">
+        <Image
+          className="cursor-pointer rounded-2xl border-[0.0625rem] hover:border-main"
+          src={mainImageUrl}
+          alt={"/background"}
+          fill={true}
+          style={{
+            objectFit: "cover",
+          }}
+          onClick={() => openViewer()}
+        />
+      </div>
+      <div
+        className="flex flex-row items-center gap-[0.875rem] overflow-x-auto pt-[0.875rem]"
+        ref={scrollHook.listRef}
+        onMouseDown={(e) => {
+          e.preventDefault();
+          scrollHook.onDragStart(e);
+        }}
+        onMouseMove={scrollHook.onDragMove}
+        onMouseUp={scrollHook.onDragEnd}
+        onMouseLeave={scrollHook.onDragEnd}
+        onTouchStart={scrollHook.onTouchStart}
+        onTouchMove={scrollHook.onTouchMove}
+        onTouchEnd={scrollHook.onTouchEnd}
+      >
+        {images.map((image, index) => (
+          <div
+            key={index}
+            className="relative h-[6.6875rem] w-[6.6875rem] rounded-lg border-[0.0625rem]"
+            onClick={() => {
+              setMainImageUrl(image.address);
+            }}
+            onTouchEnd={() => {
+              setMainImageUrl(image.address);
+            }}
+          >
+            <Image
+              className="cursor-pointer rounded-lg"
+              src={image.address}
+              alt={"/background"}
+              fill={true}
+              style={{ objectFit: "cover" }}
+            />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default ImageList;
diff --git a/src/components/informations/detail/ImageViewer.tsx b/src/components/informations/detail/ImageViewer.tsx
index 55521143..adeae07a 100644
--- a/src/components/informations/detail/ImageViewer.tsx
+++ b/src/components/informations/detail/ImageViewer.tsx
@@ -1,63 +1,26 @@
-import { useDragScrollType } from "@/hooks/useDragScroll";
 import Image from "next/image";
+import { MdClose } from "react-icons/md";
 
 interface Props {
-  images: Array<Readonly<{ imageStatus: string; address: string }>>;
-  mainImageIndex: number;
-  scrollHook: useDragScrollType;
-  setMainImageIndex: (index: number) => void;
+  imageUrl: string;
+  closeViewer: () => void;
 }
 
-const ImageViewer = ({ images, scrollHook, setMainImageIndex }: Props) => {
+const ImageViewer = ({ imageUrl, closeViewer }: Props) => {
   return (
-    <div className="dark:opacity-65">
-      <div className="relative h-[26.0625rem] w-full text-slate-200 max-[744px]:h-[19.125rem]">
-        <Image
-          className="rounded-2xl border-[0.0625rem]"
-          src={
-            images.filter((image) => image.imageStatus === "썸네일")[0].address
-          }
-          alt={"/background"}
-          fill={true}
-          style={{
-            objectFit: "cover",
-          }}
-        />
-      </div>
-      <div
-        className="flex flex-row items-center gap-[0.875rem] overflow-x-auto pt-[0.875rem]"
-        ref={scrollHook.listRef}
-        onMouseDown={(e) => {
-          e.preventDefault();
-          scrollHook.onDragStart(e);
-        }}
-        onMouseMove={scrollHook.onDragMove}
-        onMouseUp={scrollHook.onDragEnd}
-        onMouseLeave={scrollHook.onDragEnd}
-        onTouchStart={scrollHook.onTouchStart}
-        onTouchMove={scrollHook.onTouchMove}
-        onTouchEnd={scrollHook.onTouchEnd}
-      >
-        {images.map((image, index) => (
-          <div
-            key={index}
-            className="relative h-[6.6875rem] w-[6.6875rem] rounded-lg border-[0.0625rem]"
-            onClick={() => {
-              setMainImageIndex(index);
-            }}
-            onTouchEnd={() => {
-              setMainImageIndex(index);
-            }}
-          >
-            <Image
-              className="cursor-pointer rounded-lg"
-              src={image.address}
-              alt={"/background"}
-              fill={true}
-              style={{ objectFit: "cover" }}
-            />
-          </div>
-        ))}
+    <div className="z-top fixed left-0 top-0 z-50 flex h-full w-full items-center justify-center bg-black/25">
+      <div className="relative flex h-[calc(100%_-_48px)] w-[calc(100%_-_48px)] flex-col gap-3 rounded-2xl bg-gray-900 p-6">
+        <div className="absolute right-5 top-4 cursor-pointer self-end rounded-md text-white hover:text-main dark:bg-slate-600">
+          <MdClose size={"2rem"} onClick={() => closeViewer()} />
+        </div>
+        <div className="relative mt-8 h-full w-full">
+          <Image
+            src={imageUrl}
+            alt="image"
+            fill={true}
+            style={{ objectFit: "contain" }}
+          />
+        </div>
       </div>
     </div>
   );
diff --git a/src/components/informations/detail/InformationViewer.tsx b/src/components/informations/detail/InformationViewer.tsx
index 6059019b..fc8e4e9a 100644
--- a/src/components/informations/detail/InformationViewer.tsx
+++ b/src/components/informations/detail/InformationViewer.tsx
@@ -3,10 +3,10 @@ import Image from "next/image";
 import { FaRegHeart } from "react-icons/fa";
 import { TiLocation } from "react-icons/ti";
 import KakaoMapLinkContainer from "@/containers/common/KakaoMapLinkContainer";
-import ImageViewerContainer from "@/containers/informations/detail/ImageViewerContainer";
 import { LuEye } from "react-icons/lu";
 import { InformationDetailDto } from "@/types/InformationDto";
 import ButtonListContainer from "@/containers/informations/detail/ButtonListContainer";
+import ImageListContainer from "@/containers/informations/detail/ImageListContainer";
 
 async function getInformation(id: number) {
   const response = await fetch(
@@ -70,7 +70,7 @@ const InformationViewer = async ({ informationId }: Props) => {
           </div>
         </div>
         <div className="h-[34.5rem] w-[29.375rem] max-[1024px]:w-full max-[744px]:h-[27.5625rem]">
-          <ImageViewerContainer images={data.imageResponses} />
+          <ImageListContainer images={data.imageResponses} />
         </div>
         <div className="flex h-[34.5rem] w-[29.375rem] flex-col overflow-y-auto px-[1.25rem] max-[1024px]:h-fit max-[1024px]:w-full max-[1024px]:px-0 max-[1024px]:pt-8">
           <div className="max-[1024px]:hidden">
diff --git a/src/containers/informations/detail/ImageListContainer.tsx b/src/containers/informations/detail/ImageListContainer.tsx
new file mode 100644
index 00000000..4d507245
--- /dev/null
+++ b/src/containers/informations/detail/ImageListContainer.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import ImageList from "@/components/informations/detail/ImageList";
+import useDragScroll from "@/hooks/useDragScroll";
+import { useState } from "react";
+
+interface Props {
+  images: Array<Readonly<{ imageStatus: string; address: string }>>;
+}
+
+const ImageListContainer = ({ images }: Props) => {
+  const scrollHook = useDragScroll();
+  const [mainImageUrl, setMainImageUrl] = useState<string>(
+    images.find((image) => image.imageStatus === "썸네일")?.address ?? "",
+  );
+  const [viewerVisible, setViewerVisible] = useState<boolean>(false);
+
+  return (
+    <ImageList
+      scrollHook={scrollHook}
+      images={images}
+      mainImageUrl={mainImageUrl}
+      viewerVisible={viewerVisible}
+      setMainImageUrl={setMainImageUrl}
+      openViewer={() => setViewerVisible(true)}
+      closeViewer={() => setViewerVisible(false)}
+    />
+  );
+};
+
+export default ImageListContainer;
diff --git a/src/containers/informations/detail/ImageViewerContainer.tsx b/src/containers/informations/detail/ImageViewerContainer.tsx
deleted file mode 100644
index 6e80d07b..00000000
--- a/src/containers/informations/detail/ImageViewerContainer.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-"use client";
-
-import ImageViewer from "@/components/informations/detail/ImageViewer";
-import useDragScroll from "@/hooks/useDragScroll";
-import { useState } from "react";
-
-interface Props {
-  images: Array<Readonly<{ imageStatus: string; address: string }>>;
-}
-
-const ImageViewerContainer = ({ images }: Props) => {
-  const [mainImageIndex, setMainImageIndex] = useState<number>(0);
-  const scrollHook = useDragScroll();
-
-  return (
-    <ImageViewer
-      images={images}
-      mainImageIndex={mainImageIndex}
-      scrollHook={scrollHook}
-      setMainImageIndex={setMainImageIndex}
-    />
-  );
-};
-
-export default ImageViewerContainer;