Merge pull request #46 from Strong-Potato/27-feat-create-detail-page-…

…main-swiper

Feat: create main swiper

package.json

@@ -22,7 +22,8 @@
     "react-hook-form": "^7.49.2",
     "react-icons": "^4.12.0",
     "react-router-dom": "^6.21.1",
-    "recoil": "^0.7.7"
+    "recoil": "^0.7.7",
+    "swiper": "^11.0.5"
   },
   "devDependencies": {
     "@tanstack/eslint-plugin-query": "^5.14.6",

public/mockServiceWorker.js

@@ -2,7 +2,7 @@
 /* tslint:disable */
 
 /**
- * Mock Service Worker (2.0.11).
+ * Mock Service Worker (2.0.12).
  * @see https://github.com/mswjs/msw
  * - Please do NOT modify this file.
  * - Please do NOT serve this file on production.
@@ -89,14 +89,14 @@ self.addEventListener('fetch', function (event) {
   const { request } = event
 
   // Bypass navigation requests.
-  if (request.mode === "navigate") {
-    return;
+  if (request.mode === 'navigate') {
+    return
   }
 
   // Opening the DevTools triggers the "only-if-cached" request
   // that cannot be handled by the worker. Bypass such requests.
-  if (request.cache === "only-if-cached" && request.mode !== "same-origin") {
-    return;
+  if (request.cache === 'only-if-cached' && request.mode !== 'same-origin') {
+    return
   }
 
   // Bypass all requests when there are no active clients.
@@ -107,9 +107,9 @@ self.addEventListener('fetch', function (event) {
   }
 
   // Generate unique request ID.
-  const requestId = crypto.randomUUID();
-  event.respondWith(handleRequest(event, requestId));
-});
+  const requestId = crypto.randomUUID()
+  event.respondWith(handleRequest(event, requestId))
+})
 
 async function handleRequest(event, requestId) {
   const client = await resolveMainClient(event)
@@ -162,29 +162,29 @@ async function resolveMainClient(event) {
   return allClients
     .filter((client) => {
       // Get only those clients that are currently visible.
-      return client.visibilityState === "visible";
+      return client.visibilityState === 'visible'
     })
     .find((client) => {
       // Find the client ID that's recorded in the
       // set of clients that have registered the worker.
-      return activeClientIds.has(client.id);
-    });
+      return activeClientIds.has(client.id)
+    })
 }
 
 async function getResponse(event, client, requestId) {
   const { request } = event
 
   // Clone the request because it might've been already used
   // (i.e. its body has been read and sent to the client).
-  const requestClone = request.clone();
+  const requestClone = request.clone()
 
   function passthrough() {
     const headers = Object.fromEntries(requestClone.headers.entries())
 
     // Remove internal MSW request header so the passthrough request
     // complies with any potential CORS preflight checks on the server.
     // Some servers forbid unknown request headers.
-    delete headers["x-msw-intention"];
+    delete headers['x-msw-intention']
 
     return fetch(requestClone, { headers })
   }
@@ -204,13 +204,13 @@ async function getResponse(event, client, requestId) {
 
   // Bypass requests with the explicit bypass header.
   // Such requests can be issued by "ctx.fetch()".
-  const mswIntention = request.headers.get("x-msw-intention");
-  if (["bypass", "passthrough"].includes(mswIntention)) {
-    return passthrough();
+  const mswIntention = request.headers.get('x-msw-intention')
+  if (['bypass', 'passthrough'].includes(mswIntention)) {
+    return passthrough()
   }
 
   // Notify the client that a request has been intercepted.
-  const requestBuffer = await request.arrayBuffer();
+  const requestBuffer = await request.arrayBuffer()
   const clientMessage = await sendToClient(
     client,
     {

src/components/Detail/Contents/Information/Others/Others.module.scss

@@ -17,7 +17,15 @@
 
     overflow: hidden;
 
+    &:hover {
+      button {
+        visibility: visible;
+      }
+    }
+
     &__leftBtn {
+      visibility: hidden;
+
       position: absolute;
       top: 50%;
       left: 10px;
@@ -38,6 +46,8 @@
     }
 
     &__rightBtn {
+      visibility: hidden;
+
       position: absolute;
       top: 50%;
       right: 10px;

src/components/Detail/Contents/Information/Others/Others.tsx

@@ -60,7 +60,7 @@ function Others() {
         <h3>주변 다른 숙소</h3>
       </div>
       <div className={styles.container__slideContainer}>
-        <div
+        <button
           className={styles.container__slideContainer__leftBtn}
           style={{ display: slideLocation === 0 ? "none" : "block" }}
           onClick={() => {
@@ -70,8 +70,8 @@ function Others() {
           <AiOutlineLeft
             className={styles.container__slideContainer__leftBtn__icon}
           />
-        </div>
-        <div
+        </button>
+        <button
           className={styles.container__slideContainer__rightBtn}
           style={{
             display: -slideLocation >= 160 * 4 - size.width ? "none" : "block",
@@ -83,7 +83,7 @@ function Others() {
           <AiOutlineRight
             className={styles.container__slideContainer__rightBtn__icon}
           />
-        </div>
+        </button>
         <div
           className={styles.container__slideContainer__slide}
           style={{ left: slideLocation + "px" }}

src/components/Detail/Contents/Information/ShortReveiws/ShortReviews.tsx

@@ -3,7 +3,7 @@ import { GoStarFill } from "react-icons/go";
 
 import styles from "./ShortReviews.module.scss";
 
-import Review from "@/components/Review/Review";
+import Review from "@/components/Detail/Contents/Review/Review";
 
 function ShortReviews() {
   const reviewData = [

src/components/Review/ReviewImageSlider/ReviewImageSlider.module.scss → src/components/Detail/Contents/Review/ReviewImageSlider/ReviewImageSlider.module.scss

@@ -2,6 +2,12 @@
   overflow: hidden;
   position: relative;
 
+  &:hover {
+    button {
+      visibility: visible;
+    }
+  }
+
   &__imgWrapper {
     position: relative;
     display: flex;
@@ -15,6 +21,8 @@
   }
 
   &__leftBtn {
+    visibility: hidden;
+
     position: absolute;
     top: 50%;
     left: 10px;
@@ -26,6 +34,7 @@
 
     background-color: #ffffff;
     z-index: 2;
+
     &__icon {
       position: absolute;
       top: 50%;
@@ -35,6 +44,8 @@
   }
 
   &__rightBtn {
+    visibility: hidden;
+
     position: absolute;
     top: 50%;
     right: 10px;
@@ -46,6 +57,7 @@
 
     background-color: #ffffff;
     z-index: 2;
+
     &__icon {
       position: absolute;
       top: 50%;

src/components/Review/ReviewImageSlider/ReviewImageSlider.tsx → src/components/Detail/Contents/Review/ReviewImageSlider/ReviewImageSlider.tsx

@@ -11,16 +11,16 @@ function ReviewImageSlider({ images }: { images: string[] }) {
 
   return (
     <div className={styles.container}>
-      <div
+      <button
         className={styles.container__leftBtn}
         style={{ display: slideLocation === 0 ? "none" : "block" }}
         onClick={() => {
           setSlideLocation(slideLocation + 84);
         }}
       >
         <AiOutlineLeft className={styles.container__leftBtn__icon} />
-      </div>
-      <div
+      </button>
+      <button
         className={styles.container__rightBtn}
         style={{
           display:
@@ -33,7 +33,7 @@ function ReviewImageSlider({ images }: { images: string[] }) {
         }}
       >
         <AiOutlineRight className={styles.container__rightBtn__icon} />
-      </div>
+      </button>
       <div
         className={styles.container__imgWrapper}
         style={{ left: slideLocation + "px" }}

src/components/Detail/Contents/Reviews/Reviews.tsx

@@ -3,7 +3,7 @@ import { GoStarFill } from "react-icons/go";
 
 import styles from "./Rviews.module.scss";
 
-import Review from "@/components/Review/Review";
+import Review from "@/components/Detail/Contents/Review/Review";
 
 // 무한 스크롤 구현 필요
 function Reviews() {

src/components/Detail/Main/ImageSwiper/Swiper.module.scss

@@ -0,0 +1,38 @@
+.container {
+  width: 100%;
+
+  // 비율 3:2 조절
+  aspect-ratio: 3 / 2;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  background-color: #efefef;
+
+  position: relative;
+
+  &:hover {
+    button {
+      visibility: visible;
+    }
+  }
+
+  &__swiperSlide {
+    text-align: center;
+    font-size: 18px;
+    background: #fff;
+
+    /* Center slide text vertically */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  img {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+}

src/components/Detail/Main/ImageSwiper/Swiper.tsx

@@ -0,0 +1,45 @@
+import { useState } from "react";
+import { Swiper, SwiperSlide } from "swiper/react";
+// Import Swiper styles
+import "swiper/css";
+import "swiper/css/navigation";
+import "swiper/css/pagination";
+import "swiper/css/scrollbar";
+
+import styles from "./Swiper.module.scss";
+
+import SwiperButton from "./SwiperButton/SwiperButton";
+import SwiperIndex from "./SwiperIndex/SwiperIndex";
+
+const image =
+  "https://m.eejmall.com/web/product/big/201708/211_shop1_627935.jpg";
+
+function ImageSwiper() {
+  const images = new Array(6).fill(image);
+  const [imageIndex, setImageIndex] = useState<number>(1);
+
+  return (
+    <Swiper
+      pagination={{
+        type: "fraction",
+      }}
+      className={styles.container}
+      onActiveIndexChange={(swiper) => {
+        setImageIndex(swiper.activeIndex + 1);
+      }}
+    >
+      {images.map((data) => (
+        <SwiperSlide className={styles.container__swiperSlide}>
+          <img src={data} alt="#" />
+        </SwiperSlide>
+      ))}
+      <SwiperButton
+        imageIndex={imageIndex}
+        imageLength={images.length}
+      />
+      <SwiperIndex imageIndex={imageIndex} imageLength={images.length} />
+    </Swiper>
+  );
+}
+
+export default ImageSwiper;

src/components/Detail/Main/ImageSwiper/SwiperButton/SwiperButton.module.scss

@@ -0,0 +1,52 @@
+.container {
+  position: absolute;
+  width: 100%;
+  top: 50%;
+  transform: translate(0, -50%);
+
+  display: flex;
+  justify-content: space-between;
+
+  z-index: 2;
+
+  &__prevBtn {
+    visibility: hidden;
+
+    position: absolute;
+    top: 50%;
+    left: 10px;
+    transform: translate(0, -50%);
+
+    width: 2.4rem;
+    height: 2.2rem;
+    border-radius: 1.2rem;
+
+    background-color: #ffffff;
+    z-index: 2;
+  }
+
+  &__nextBtn {
+    visibility: hidden;
+
+    width: 40px;
+
+    position: absolute;
+    top: 50%;
+    right: 10px;
+    transform: translate(0, -50%);
+
+    width: 2.4rem;
+    height: 2.2rem;
+    border-radius: 1.2rem;
+
+    background-color: #ffffff;
+    z-index: 2;
+  }
+
+  &__icon {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+}