Merge pull request #75 from softeerbootcamp4th/feature/10-interaction…

…page

[feat] 인터랙션 슬라이드 구현

src/interactions/GiftDetail.jsx

@@ -20,7 +20,7 @@ export default function GiftDetail({ contentList }) {
             </span>
           </div>
 
-          <div className="absolute right-0 top-0 z-40 translate-x-1/2 -translate-y-1/3">
+          <div className="absolute right-0 top-0 z-40 sm:translate-x-1/2 -translate-y-1/4">
             <Star fill={content.starColor} />
 
             <span

src/interactions/InteractionSlide.jsx

@@ -0,0 +1,95 @@
+import openModal from "@/modal/openModal.js";
+import { lazy } from "react";
+import Suspense from "@/common/Suspense.jsx";
+
+export default function InteractionSlide({
+  interactionDesc,
+  index,
+  isCurrent,
+  joined,
+}) {
+  const activeImgPath = `active${index + 1}.png`;
+  const inactiveImgPath = `inactive${index + 1}.png`;
+  const numberImgPath = `icons/rect${index + 1}.svg`;
+
+  function eventDate() {
+    const day = ["일", "월", "화", "수", "목", "금", "토"];
+    const fullDate = new Date(2024, 8, 9);
+    fullDate.setDate(fullDate.getDate() + index);
+
+    const month = fullDate.getMonth();
+    const date = fullDate.getDate();
+
+    return `${month < 9 ? "0" : ""}${month + 1}월 ${date < 10 ? "0" : ""}${date}일(${day[fullDate.getDay()]})`;
+  }
+
+  const lazyInteractionList = [
+    lazy(() => import("./distanceDriven")),
+    lazy(() => import("./fastCharge")),
+    lazy(() => import("./univasalIsland")),
+    lazy(() => import("./v2l")),
+    lazy(() => import("./subsidy")),
+  ];
+
+  function onClickExperience() {
+    if (joined < 0) return;
+
+    const InteractionComponent = lazyInteractionList[index];
+    if (!InteractionComponent) return;
+
+    const InteractionModal = (
+      <Suspense fallback={<div>Loading...</div>}>
+        <div className="w-5/6 h-5/6 backdrop-blur-[100px] border border-neutral-600 rounded">
+          <InteractionComponent />
+        </div>
+      </Suspense>
+    );
+
+    openModal(InteractionModal, "interaction");
+  }
+
+  return (
+    <div className="w-full h-full flex flex-col items-center select-none">
+      <span className="pt-[150px] text-body-l text-white font-bold">
+        {eventDate()}
+      </span>
+
+      <div className="pt-5 flex items-center">
+        <img src={numberImgPath} />
+
+        <span
+          className={`${isCurrent ? "opacity-100" : "opacity-50"} pl-3 text-head-s text-white font-bold`}
+        >
+          {interactionDesc}
+        </span>
+      </div>
+
+      <button
+        onClick={onClickExperience}
+        disabled={!isCurrent || joined < 0}
+        className={`mt-8 py-4 px-10 bg-white ${joined < 0 ? "hidden" : isCurrent ? "opacity-100" : "opacity-50"}`}
+      >
+        <span className="text-body-s text-black font-bold">
+          안터랙션 체험하기
+        </span>
+      </button>
+
+      <span
+        className={`pt-5 text-title-m text-neutral-200 ${joined < 0 ? "" : "hidden"}`}
+      >
+        오픈 예정
+      </span>
+
+      <img
+        src={inactiveImgPath}
+        alt="inactiveImage"
+        className={`-z-10 absolute transition ease-in-out duration-200 ${isCurrent ? "opacity-0" : "opacity-100"}`}
+      />
+      <img
+        src={activeImgPath}
+        alt="activeImage"
+        className={`-z-10 absolute transition ease-in-out duration-200 ${isCurrent ? "opacity-100" : "opacity-0"}`}
+      />
+    </div>
+  );
+}

src/interactions/TabBar.jsx → src/interactions/TapBar.jsx

@@ -1,7 +1,7 @@
-export default function TarBar({
+export default function TapBar({
   currentInteraction,
-  setCurrentInteraction,
-  isJoinedList,
+  joinedList,
+  swiperRef,
 }) {
   return (
     <>
@@ -17,29 +17,29 @@ export default function TarBar({
         {`The new IONIQ 5의 새로운 기능을 날마다 체험하고 이벤트에 응모하세요!\n추첨을 통해 IONIQ과 함께하는 제주 여행 패키지를 드립니다`}
       </span>
 
-      <div className="py-12 flex gap-[60px]">
-        {isJoinedList.map((isJoined, index) => (
+      <div className="py-12 flex gap-5 sm:gap-[60px]">
+        {joinedList.map((joined, index) => (
           <div
             key={index}
-            onClick={() => setCurrentInteraction(index)}
-            className="flex flex-col items-center select-none"
+            onClick={() => swiperRef.current.swiper.slideTo(index)}
+            className="flex flex-col items-center select-none cursor-pointer"
           >
             <img
               src="icons/check-mint.svg"
               alt="체크"
-              className={`${isJoined > 0 ? "" : "invisible"}`}
+              className={`${joined > 0 ? "" : "invisible"}`}
             />
 
             <span
-              className={`text-body-l  font-bold ${currentInteraction === index ? "text-neutral-100" : "text-neutral-500"}`}
+              className={`text-body-l font-bold transition ease-in-out duration-200 ${currentInteraction === index ? "text-neutral-100" : "text-neutral-500"}`}
             >
               Day{index + 1}
             </span>
 
             <span
-              className={`text-body-m font-bold ${isJoined > 0 ? "text-green-400" : "text-neutral-700"}`}
+              className={`text-body-m font-bold ${joined > 0 ? "text-green-400" : "text-neutral-700"}`}
             >
-              {isJoined > 0 ? "참여 완료" : !isJoined ? "미참여" : ""}
+              {joined > 0 ? "참여 완료" : !joined ? "미참여" : ""}
             </span>
           </div>
         ))}

src/interactions/content.json

@@ -1,4 +1,5 @@
 {
+  "interaction":["걱정 없이, 더 멀리", "불편함 없이, 더 빠르게", "나에게 맞게 자유자재로", "언제 어디서나, 편리하게", "누구보다 경제적으로"],
   "howto": [
     ["매일매일 공개되는", " 더 뉴 아이오닉5과 관련한 ", "인터랙션을 수행한다."],
     ["", "이벤트 경품을 받기 위한 ", "필수 정보를 입력하면 응모 완료!"],

src/interactions/fastCharge/index.jsx

@@ -49,7 +49,7 @@ function FastChargeInteraction({ interactCallback, $ref }) {
         <img
           src={dialSvg}
           alt="다이얼"
-          className="w-full h-full absolute left-0 top-0 cursor-pointer touch-none"
+          className="w-full h-full absolute left-0 top-0 cursor-pointer touch-none select-none"
           style={dialStyle}
           ref={dialRef}
           onPointerDown={(e) => {

src/interactions/index.jsx

@@ -1,53 +1,50 @@
-import { useRef, useState } from "react";
-import useSectionInitialize from "../scroll/useSectionInitialize";
+import { useRef } from "react";
+import useSectionInitialize from "@/scroll/useSectionInitialize";
+import useSwiperState from "@/common/useSwiperState";
 import IntroductionDetail from "./IntroductionDetail";
 import GiftDetail from "./GiftDetail";
 import JSONData from "./content.json";
-import TabBar from "./TabBar";
-import { Swiper, SwiperSlide } from "swiper/react";
-import "swiper/css";
-import "swiper/css/pagination";
-import { Pagination } from "swiper/modules";
+import TapBar from "./TapBar";
+import InteractionSlide from "./InteractionSlide";
 
 export default function InteractionPage() {
   const SECTION_IDX = 1;
   const sectionRef = useRef(null);
-  const [currentInteraction, setCurrentInteraction] = useState(0);
+  const [currentInteraction, swiperRef] = useSwiperState();
   useSectionInitialize(SECTION_IDX, sectionRef);
 
-  const isJoinedList = [1, 0, 0, 1, -1];
+  const joinedList = [1, 0, 0, 1, -1];
 
   return (
     <section
       ref={sectionRef}
       className="bg-black py-60 flex flex-col items-center"
     >
-      <TabBar
+      <TapBar
         currentInteraction={currentInteraction}
-        setCurrentInteraction={setCurrentInteraction}
-        isJoinedList={isJoinedList}
+        joinedList={joinedList}
+        swiperRef={swiperRef}
       />
 
-      <Swiper
-        slidesPerView={"auto"}
-        centeredSlides={true}
-        spaceBetween={15}
-        pagination={{
-          clickable: true,
-        }}
-        modules={[Pagination]}
-        className="w-full bg-white h-full"
+      <swiper-container
+        slides-per-view="auto"
+        centered-slides="true"
+        space-between="16"
+        class="w-full"
+        speed="200"
+        ref={swiperRef}
       >
-        <SwiperSlide className="w-1/3 h-[500px]">
-          <div className="bg-red-400">1</div>
-        </SwiperSlide>
-        <SwiperSlide className="w-1/3 h-[500px]">
-          <div className="bg-red-500">2</div>
-        </SwiperSlide>
-        <SwiperSlide className="w-1/3 h-[500px]">
-          <div className="bg-red-400">3</div>
-        </SwiperSlide>
-      </Swiper>
+        {JSONData.interaction.map((interactionDesc, index) => (
+          <swiper-slide key={index} class="w-[566px] h-[456px]">
+            <InteractionSlide
+              interactionDesc={interactionDesc}
+              index={index}
+              isCurrent={currentInteraction === index}
+              joined={joinedList[index]}
+            />
+          </swiper-slide>
+        ))}
+      </swiper-container>
 
       <div className="pt-32 flex flex-col xl:flex-row gap-[140px]">
         <IntroductionDetail contentList={JSONData.howto} />