diff --git a/public/icons/left-arrow.svg b/public/icons/left-arrow.svg new file mode 100644 index 00000000..9fadbd4f --- /dev/null +++ b/public/icons/left-arrow.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/icons/polygon-tri.svg b/public/icons/polygon-tri.svg new file mode 100644 index 00000000..ab64f4b9 --- /dev/null +++ b/public/icons/polygon-tri.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/interactions/InteractionAnswer.jsx b/src/interactions/InteractionAnswer.jsx new file mode 100644 index 00000000..b491669d --- /dev/null +++ b/src/interactions/InteractionAnswer.jsx @@ -0,0 +1,98 @@ +import userStore from "@/auth/store.js"; +import scrollTo from "@/scroll/scrollTo"; +import style from "./InteractionAnswer.module.css"; +import { useState } from "react"; + +export default function InteractionAnswer({ + isAnswerUp, + setIsAnswerUp, + answer, + close, +}) { + const isLogin = userStore((state) => state.isLogin); + const [isAniPlaying, setIsAniPlaying] = useState(false); + + function onClickWrite() { + close(); + scrollTo(3); + } + + function onClickShare() { + setIsAniPlaying(true); + + /* + * 서버에서 받아온 단축 url을 클립보드에 복사하는 코드 미구현 + */ + } + + return ( +
+ setIsAniPlaying(false)} + className={`${isAniPlaying ? style.toast : ""} opacity-0 fixed top-10 left-1/2 -translate-x-1/2 px-8 py-4 rounded-full bg-blue-100 text-neutral-600 text-body-m font-bold`} + > + 단축 URL이 클립보드에 복사 되었습니다! + + + + +
+ + {answer.head} + +
+ {answer.desc} + + {answer.subdesc} +
+
+ +
+ {isLogin ? ( + <> + + 오늘 응모가 완료되었습니다! + + +
+
+
+ + 당첨확률 UP! + + + 역삼각형 +
+ + +
+ + +
+ + ) : ( + + )} +
+
+ ); +} diff --git a/src/interactions/InteractionAnswer.module.css b/src/interactions/InteractionAnswer.module.css new file mode 100644 index 00000000..d6507531 --- /dev/null +++ b/src/interactions/InteractionAnswer.module.css @@ -0,0 +1,18 @@ +.toast { + animation: toast-ani 5s linear; +} + +@keyframes toast-ani { + 0% { + opacity: 0; + } + 5% { + opacity: 1; + } + 95% { + opacity: 1; + } + 100% { + opacity: 0; + } +} diff --git a/src/interactions/InteractionModal.jsx b/src/interactions/InteractionModal.jsx index f6659377..db5d22be 100644 --- a/src/interactions/InteractionModal.jsx +++ b/src/interactions/InteractionModal.jsx @@ -1,25 +1,28 @@ import Suspense from "@/common/Suspense.jsx"; import { ModalCloseContext } from "@/modal/modal.jsx"; import { lazy, useContext, useRef, useState } from "react"; +import InteractionAnswer from "./InteractionAnswer"; -export default function InteractionModal({ index }) { - const lazyInteractionList = [ - lazy(() => import("./distanceDriven")), - lazy(() => import("./fastCharge")), - lazy(() => import("./univasalIsland")), - lazy(() => import("./v2l")), - lazy(() => import("./subsidy")), - ]; +const lazyInteractionList = [ + lazy(() => import("./distanceDriven")), + lazy(() => import("./fastCharge")), + lazy(() => import("./univasalIsland")), + lazy(() => import("./v2l")), + lazy(() => import("./subsidy")), +]; + +export default function InteractionModal({ index, answer }) { const close = useContext(ModalCloseContext); const InteractionComponent = lazyInteractionList[index]; const [isActive, setIsActive] = useState(false); + const [isAnswerUp, setIsAnswerUp] = useState(false); const interactionRef = useRef(null); if (!InteractionComponent) return <>; return ( Loading...}> -
+
+ +
); diff --git a/src/interactions/InteractionSlide.jsx b/src/interactions/InteractionSlide.jsx index 75f5ea82..24dafef1 100644 --- a/src/interactions/InteractionSlide.jsx +++ b/src/interactions/InteractionSlide.jsx @@ -7,6 +7,7 @@ export default function InteractionSlide({ isCurrent, joined, swiperRef, + answer, }) { const activeImgPath = `active${index + 1}.png`; const inactiveImgPath = `inactive${index + 1}.png`; @@ -26,7 +27,10 @@ export default function InteractionSlide({ function onClickExperience() { if (joined < 0) return; - openModal(, "interaction"); + openModal( + , + "interaction", + ); } return ( diff --git a/src/interactions/content.json b/src/interactions/content.json index 73652075..1b5e9cbd 100644 --- a/src/interactions/content.json +++ b/src/interactions/content.json @@ -18,7 +18,7 @@ "subdesc": "배터리 용량이 늘어났음에도 기존과 동일하거나 더 빠른 속도로 차량을 충전할 수 있습니다. 또한 다양한 EV 충전 솔루션과 충전 서비스를 통해 차별화된 충전 경험을 제공합니다." }, { - "head": "Universal Island", + "head": "Universal\nIsland", "desc": "더 뉴 아이오닉 5는 유니버설 아일랜드를 적용해 다양한 상황에 맞는 최적화된 공간 활용성을 제공합니다.", "subdesc": "기존 모델과 달리 더 뉴 아이오닉 5에서는 자주 사용하는 기능을 버튼식으로 배치했으며, 스마트폰 무선 충전 패드도 상단으로 옮겨 사용 편의성을 높였습니다." }, diff --git a/src/interactions/index.jsx b/src/interactions/index.jsx index f15601a0..1382228d 100644 --- a/src/interactions/index.jsx +++ b/src/interactions/index.jsx @@ -42,6 +42,7 @@ export default function InteractionPage() { isCurrent={currentInteraction === index} joined={joinedList[index]} swiperRef={swiperRef} + answer={JSONData.answer[index]} /> ))}