diff --git a/public/active1.png b/public/active1.png new file mode 100644 index 00000000..a0fcd2e3 Binary files /dev/null and b/public/active1.png differ diff --git a/public/active2.png b/public/active2.png new file mode 100644 index 00000000..8110d0b6 Binary files /dev/null and b/public/active2.png differ diff --git a/public/active3.png b/public/active3.png new file mode 100644 index 00000000..dece5655 Binary files /dev/null and b/public/active3.png differ diff --git a/public/active4.png b/public/active4.png new file mode 100644 index 00000000..aef8a1c6 Binary files /dev/null and b/public/active4.png differ diff --git a/public/active5.png b/public/active5.png new file mode 100644 index 00000000..3abaf70d Binary files /dev/null and b/public/active5.png differ diff --git a/public/icons/rect1.svg b/public/icons/rect1.svg new file mode 100644 index 00000000..b7d9d015 --- /dev/null +++ b/public/icons/rect1.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icons/rect2.svg b/public/icons/rect2.svg new file mode 100644 index 00000000..e63ca1e9 --- /dev/null +++ b/public/icons/rect2.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icons/rect3.svg b/public/icons/rect3.svg new file mode 100644 index 00000000..890bdd00 --- /dev/null +++ b/public/icons/rect3.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icons/rect4.svg b/public/icons/rect4.svg new file mode 100644 index 00000000..2482ca5f --- /dev/null +++ b/public/icons/rect4.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icons/rect5.svg b/public/icons/rect5.svg new file mode 100644 index 00000000..0cd93844 --- /dev/null +++ b/public/icons/rect5.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/inactive1.png b/public/inactive1.png new file mode 100644 index 00000000..13b1e1b7 Binary files /dev/null and b/public/inactive1.png differ diff --git a/public/inactive2.png b/public/inactive2.png new file mode 100644 index 00000000..0f2fc2c1 Binary files /dev/null and b/public/inactive2.png differ diff --git a/public/inactive3.png b/public/inactive3.png new file mode 100644 index 00000000..6eccfa57 Binary files /dev/null and b/public/inactive3.png differ diff --git a/public/inactive4.png b/public/inactive4.png new file mode 100644 index 00000000..b8aba4a9 Binary files /dev/null and b/public/inactive4.png differ diff --git a/public/inactive5.png b/public/inactive5.png new file mode 100644 index 00000000..1637f7ba Binary files /dev/null and b/public/inactive5.png differ diff --git a/src/interactions/GiftDetail.jsx b/src/interactions/GiftDetail.jsx index a8c54e57..cc9fd1ac 100644 --- a/src/interactions/GiftDetail.jsx +++ b/src/interactions/GiftDetail.jsx @@ -20,7 +20,7 @@ export default function GiftDetail({ contentList }) { -
+
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 = ( + Loading...
}> +
+ +
+ + ); + + openModal(InteractionModal, "interaction"); + } + + return ( +
+ + {eventDate()} + + +
+ + + + {interactionDesc} + +
+ + + + + 오픈 예정 + + + inactiveImage + activeImage +
+ ); +} diff --git a/src/interactions/TabBar.jsx b/src/interactions/TapBar.jsx similarity index 57% rename from src/interactions/TabBar.jsx rename to src/interactions/TapBar.jsx index 323b0de2..57cf89e1 100644 --- a/src/interactions/TabBar.jsx +++ b/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과 함께하는 제주 여행 패키지를 드립니다`} -
- {isJoinedList.map((isJoined, index) => ( +
+ {joinedList.map((joined, index) => (
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" > 체크 0 ? "" : "invisible"}`} + className={`${joined > 0 ? "" : "invisible"}`} /> Day{index + 1} 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 ? "미참여" : ""}
))} diff --git a/src/interactions/content.json b/src/interactions/content.json index 8f742396..fcf01ba8 100644 --- a/src/interactions/content.json +++ b/src/interactions/content.json @@ -1,4 +1,5 @@ { + "interaction":["걱정 없이, 더 멀리", "불편함 없이, 더 빠르게", "나에게 맞게 자유자재로", "언제 어디서나, 편리하게", "누구보다 경제적으로"], "howto": [ ["매일매일 공개되는", " 더 뉴 아이오닉5과 관련한 ", "인터랙션을 수행한다."], ["", "이벤트 경품을 받기 위한 ", "필수 정보를 입력하면 응모 완료!"], diff --git a/src/interactions/fastCharge/index.jsx b/src/interactions/fastCharge/index.jsx index b93cedb9..ea9d6e08 100644 --- a/src/interactions/fastCharge/index.jsx +++ b/src/interactions/fastCharge/index.jsx @@ -49,7 +49,7 @@ function FastChargeInteraction({ interactCallback, $ref }) { 다이얼 { diff --git a/src/interactions/index.jsx b/src/interactions/index.jsx index dda9f1f2..d10e2cf9 100644 --- a/src/interactions/index.jsx +++ b/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 (
- - - -
1
- - -
2
- - -
3
- - + {JSONData.interaction.map((interactionDesc, index) => ( + + + + ))} +