Merge pull request #130 from TripInfoWeb/dev_informations

Feature: 이미지 뷰어 기능 수정

src/components/informations/detail/ImageList.tsx

@@ -1,7 +1,7 @@
 import { useDragScrollType } from "@/hooks/useDragScroll";
 import Image from "next/image";
 import { Dispatch, SetStateAction } from "react";
-import ImageViewer from "./ImageViewer";
+import ImageViewerContainer from "@/containers/informations/detail/ImageViewerContainer";
 
 interface Props {
   scrollHook: useDragScrollType;
@@ -25,7 +25,15 @@ const ImageList = ({
   return (
     <div className="dark:opacity-65">
       {viewerVisible && (
-        <ImageViewer imageUrl={mainImageUrl} closeViewer={closeViewer} />
+        <ImageViewerContainer
+          imageUrls={[
+            mainImageUrl,
+            ...images
+              .filter((image) => image.address !== mainImageUrl)
+              .map((image) => image.address),
+          ]}
+          closeViewer={closeViewer}
+        />
       )}
       <div className="relative h-[26.0625rem] w-full max-[744px]:h-[19.125rem]">
         <Image

src/components/informations/detail/ImageViewer.tsx

@@ -1,26 +1,50 @@
 import Image from "next/image";
+import { Dispatch, SetStateAction } from "react";
+import { FaCaretLeft, FaCaretRight } from "react-icons/fa";
 import { MdClose } from "react-icons/md";
 
 interface Props {
-  imageUrl: string;
+  imageUrls: string[];
+  length: number;
+  index: number;
+  setIndex: Dispatch<SetStateAction<number>>;
   closeViewer: () => void;
 }
 
-const ImageViewer = ({ imageUrl, closeViewer }: Props) => {
+const ImageViewer = ({
+  imageUrls,
+  length,
+  index,
+  setIndex,
+  closeViewer,
+}: Props) => {
   return (
-    <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="z-top fixed left-0 top-0 z-50 flex h-full w-full items-center justify-center bg-black/25 text-white">
       <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">
+        <div className="absolute right-5 top-4 cursor-pointer self-end rounded-md 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 className="mt-8 flex h-full w-full flex-row items-center">
+          <FaCaretLeft
+            className="animate-arrow cursor-pointer"
+            size="2rem"
+            onClick={() => setIndex((index + length - 1) % length)}
+          />
+          <div className="relative h-full w-full">
+            <Image
+              src={imageUrls[index]}
+              alt="image"
+              fill={true}
+              style={{ objectFit: "contain" }}
+            />
+          </div>
+          <FaCaretRight
+            className="animate-arrow cursor-pointer"
+            size="2rem"
+            onClick={() => setIndex((index + 1) % length)}
           />
         </div>
+        <p className="self-center text-lg">{`${index + 1} / ${length}`}</p>
       </div>
     </div>
   );

src/components/skeleton/common/TopListSkeleton.tsx

@@ -5,7 +5,7 @@ interface Props {
 const TopListSkeleton = ({ title }: Props) => {
   return (
     <div className="z-10 -mt-28 flex h-fit w-[60rem] flex-col justify-center rounded-2xl bg-white px-24 py-16 shadow shadow-[#CCECE2] max-[1024px]:w-[39.75rem] max-[1024px]:px-8 max-[1024px]:py-12 max-[744px]:-mt-24 max-[744px]:w-[calc(100%_-_48px)] dark:bg-slate-800">
-      <h2 className="mb-9 border-b-2 border-gray3 pb-3 text-2xl font-semibold text-black dark:text-slate-200">
+      <h2 className="mb-9 border-b-[0.0625rem] border-gray3 pb-3 text-2xl font-semibold text-black dark:text-slate-200">
         {`${title} 정보 `}
         <span className="font-bold text-main">Top 5</span>
       </h2>

src/containers/informations/detail/ImageViewerContainer.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import ImageViewer from "@/components/informations/detail/ImageViewer";
+import { useMemo, useState } from "react";
+
+interface Props {
+  imageUrls: string[];
+  closeViewer: () => void;
+}
+
+const ImageViewerContainer = ({ imageUrls, closeViewer }: Props) => {
+  const [index, setIndex] = useState<number>(0);
+  const length = useMemo(() => imageUrls.length, [imageUrls.length]);
+
+  return (
+    <ImageViewer
+      imageUrls={imageUrls}
+      length={length}
+      index={index}
+      setIndex={setIndex}
+      closeViewer={closeViewer}
+    />
+  );
+};
+
+export default ImageViewerContainer;

tailwind.config.ts

@@ -62,6 +62,10 @@ const config: Config = {
               "linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%)",
           },
         },
+        arrow: {
+          from: { transform: "scale(1)" },
+          to: { transform: "scale(1.5)" },
+        },
       },
       animation: {
         sidebarFadeIn: "sidebarFadeIn 0.3s",
@@ -73,6 +77,7 @@ const config: Config = {
         cardFlip: "cardFlip 0.5s linear",
         cardFlip2: "cardFlip2 0.5s linear",
         pulseAuth: "pulseAuth 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
+        arrow: "arrow 1s linear infinite alternate",
       },
     },
   },