From aed5fdab6f2c3181961dbae9ac0b51e2a56d1dca Mon Sep 17 00:00:00 2001 From: darkdulgi Date: Fri, 16 Aug 2024 18:22:02 +0900 Subject: [PATCH] =?UTF-8?q?[fix]=20api=20=EC=A3=BC=EC=86=8C=20=EC=88=98?= =?UTF-8?q?=EC=A0=95,=20getDayDifference=20=ED=95=A8=EC=88=98=20=EC=A0=95?= =?UTF-8?q?=EC=9D=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/common/utils.js | 21 +++++++++++++ src/mainPage/features/interactions/index.jsx | 31 +++++++++++++------ src/mainPage/features/interactions/mock.js | 16 ++++++++-- .../interactions/modal/InteractionAnswer.jsx | 19 +++--------- .../interactions/modal/InteractionModal.jsx | 25 +++------------ .../features/interactions/modal/joinEvent.js | 20 ++++++++++++ 6 files changed, 86 insertions(+), 46 deletions(-) create mode 100644 src/mainPage/features/interactions/modal/joinEvent.js diff --git a/src/common/utils.js b/src/common/utils.js index 40fce027..c607e3ab 100644 --- a/src/common/utils.js +++ b/src/common/utils.js @@ -91,3 +91,24 @@ export class GroupMap { this.map.delete(key); } } + +export function getDayDifference(_date1, _date2) { + const date1 = new Date(_date1); + const date2 = new Date(_date2); + + const date1WithoutTime = Date.UTC( + date1.getFullYear(), + date1.getMonth(), + date1.getDate(), + ); + const date2WithoutTime = Date.UTC( + date2.getFullYear(), + date2.getMonth(), + date2.getDate(), + ); + + const timeDifference = date2WithoutTime - date1WithoutTime; + const dayDifference = timeDifference / (1000 * HOURS * MINUTES * SECONDS); + + return dayDifference; +} diff --git a/src/mainPage/features/interactions/index.jsx b/src/mainPage/features/interactions/index.jsx index be155259..56be6210 100644 --- a/src/mainPage/features/interactions/index.jsx +++ b/src/mainPage/features/interactions/index.jsx @@ -2,36 +2,49 @@ import { useEffect, useRef, useState } from "react"; import TapBar from "./description/TapBar.jsx"; import InteractionSlide from "./description/InteractionSlide.jsx"; import GiftDetail from "./description/GiftDetail.jsx"; +import JSONData from "./content.json"; import EventDescriptionLayout from "@main/eventDescription/EventDescriptionLayout.jsx"; import useSectionInitialize from "@main/scroll/useSectionInitialize.js"; import { INTERACTION_SECTION } from "@main/scroll/constants.js"; import useSwiperState from "@main/hooks/useSwiperState.js"; +import useEventStore from "@main/realtimeEvent/store.js"; -import JSONData from "./content.json"; import { fetchServer } from "@common/dataFetch/fetchServer.js"; import { EVENT_DRAW_ID } from "@common/constants.js"; +import { getDayDifference } from "@common/utils.js"; +import { EVENT_START_DATE } from "@common/constants.js"; export default function InteractionPage() { const sectionRef = useRef(null); const [currentInteraction, swiperRef] = useSwiperState(); + const currentServerTime = useEventStore((state) => state.currentServerTime); const [joinedList, setJoinedList] = useState([-1, -1, -1, -1, -1]); const slideTo = (_index) => swiperRef.current.swiper.slideTo(_index); useSectionInitialize(INTERACTION_SECTION, sectionRef); useEffect(() => { - fetchServer(`/api/v1/draw/${EVENT_DRAW_ID}`) - .then((res) => { - console.log(res); - /* - * 사용자가 참여한 이벤트 날짜 문자열이 들어간 가변적 길이의 리스트를 서버로부터 받아올 예정. 그런데 그 문자열의 형식을 아직 모른다.. - */ - setJoinedList([0, 1, 1, 0, -1]); + fetchServer(`/api/v1/event/draw/${EVENT_DRAW_ID}/participation`) + .then(({ dates }) => { + let newJoinedList = [0, 0, 0, 0, 0]; + dates.forEach((date) => { + const day = getDayDifference(EVENT_START_DATE, new Date(date)); + newJoinedList[day] = 1; + }); + for (let i = 0; i < newJoinedList.length; i++) { + if ( + currentServerTime < + EVENT_START_DATE.getTime() + i * 24 * 60 * 60 * 1000 + ) { + newJoinedList[i] = -1; + } + } + setJoinedList(newJoinedList); }) .catch((e) => { console.log(e); }); - }, []); + }, [currentServerTime]); return (
- HttpResponse.json(["20240909", "20240911"]), + http.get("/api/v1/event/draw/:eventId/participation", () => + HttpResponse.json(eventParticipationDate), + ), + http.post("/api/v1/event/draw/:eventId/participation", () => + HttpResponse.json(true), ), - http.post("/api/v1/draw/:eventDrawId", () => HttpResponse.json(true)), ]; export default handlers; diff --git a/src/mainPage/features/interactions/modal/InteractionAnswer.jsx b/src/mainPage/features/interactions/modal/InteractionAnswer.jsx index fcdd8448..d9f553dc 100644 --- a/src/mainPage/features/interactions/modal/InteractionAnswer.jsx +++ b/src/mainPage/features/interactions/modal/InteractionAnswer.jsx @@ -6,37 +6,28 @@ import AuthModal from "@main/auth/AuthModal.jsx"; import openModal from "@common/modal/openModal.js"; import Button from "@common/components/Button.jsx"; import { fetchServer } from "@common/dataFetch/fetchServer"; -import { EVENT_DRAW_ID, EVENT_START_DATE } from "@common/constants.js"; +import userStore from "@main/auth/store.js"; +import { EVENT_START_DATE } from "@common/constants.js"; import useEventStore from "@main/realtimeEvent/store.js"; import getEventDateState from "@main/realtimeEvent/getEventDateState"; import style from "./InteractionAnswer.module.css"; +import joinEvent from "./joinEvent"; export default function InteractionAnswer({ isAnswerUp, setIsAnswerUp, answer, close, - isLogin, index, }) { + const isLogin = userStore((state) => state.isLogin); const currentServerTime = useEventStore((state) => state.currentServerTime); const eventDate = EVENT_START_DATE.getTime() + index * 24 * 60 * 60 * 1000; const [isAniPlaying, setIsAniPlaying] = useState(false); const isEventToday = getEventDateState(currentServerTime, eventDate) === "active"; - const authModal = ( - { - // 추첨 이벤트 참가 전송. API 주소 추후 바뀔 수 있음 - fetchServer(`/api/v1/draw/${EVENT_DRAW_ID}`, { - method: "POST", - }).catch((e) => { - console.log(e); - }); - }} - /> - ); + const authModal = joinEvent(index)} />; async function onClickWrite() { await close(); diff --git a/src/mainPage/features/interactions/modal/InteractionModal.jsx b/src/mainPage/features/interactions/modal/InteractionModal.jsx index 58c77347..8e7c165b 100644 --- a/src/mainPage/features/interactions/modal/InteractionModal.jsx +++ b/src/mainPage/features/interactions/modal/InteractionModal.jsx @@ -1,14 +1,12 @@ import { lazy, useContext, useRef, useState } from "react"; import InteractionAnswer from "./InteractionAnswer.jsx"; +import joinEvent from "./joinEvent.js"; import { ModalCloseContext } from "@common/modal/modal.jsx"; -import { fetchServer } from "@common/dataFetch/fetchServer.js"; import Suspense from "@common/components/Suspense.jsx"; import Button from "@common/components/Button.jsx"; import ResetButton from "@main/components/ResetButton.jsx"; -import { EVENT_DRAW_ID } from "@common/constants.js"; -import userStore from "@main/auth/store.js"; const lazyInteractionList = [ lazy(() => import("../distanceDriven")), @@ -24,24 +22,12 @@ export default function InteractionModal({ index, answer }) { const [isActive, setIsActive] = useState(false); const [isAnswerUp, setIsAnswerUp] = useState(false); const interactionRef = useRef(null); - const isLogin = userStore((state) => state.isLogin); - if (!InteractionComponent) return <>; + if (!InteractionComponent) return; - function joinEvent() { + function onClickConfirm(){ setIsAnswerUp(true); - if (isLogin) { - // 추첨 이벤트 참가 전송. API 주소 추후 바뀔 수 있음 - fetchServer(`/api/v1/draw/${EVENT_DRAW_ID}`, { - method: "POST", - }) - .then((res) => { - console.log(res); - }) - .catch((e) => { - console.log(e); - }); - } + joinEvent(index); } // backdrop-blur-[100px]을 적용시키면 느린 성능의 컴퓨터에서 인터랙션이 매우 느리게 동작함 @@ -63,7 +49,7 @@ export default function InteractionModal({ index, answer }) {
diff --git a/src/mainPage/features/interactions/modal/joinEvent.js b/src/mainPage/features/interactions/modal/joinEvent.js new file mode 100644 index 00000000..8a1f2728 --- /dev/null +++ b/src/mainPage/features/interactions/modal/joinEvent.js @@ -0,0 +1,20 @@ +import userStore from "@main/auth/store.js"; +import { EVENT_DRAW_ID } from "@common/constants.js"; +import { fetchServer } from "@common/dataFetch/fetchServer.js"; +import { EVENT_START_DATE } from "@common/constants"; +import useEventStore from "@main/realtimeEvent/store.js"; +import { getDayDifference } from "@common/utils"; + +export default function joinEvent(index) { + const isLogin = userStore.getState().isLogin; + const eventDate = EVENT_START_DATE.getTime() + index * 24 * 60 * 60 * 1000; + const currentServerTime = useEventStore.getState().currentServerTime; + + if (isLogin && getDayDifference(eventDate, currentServerTime) === 0) { + fetchServer(`/api/v1/event/draw/${EVENT_DRAW_ID}/participation`, { + method: "POST", + }).catch((e) => { + console.log(e); + }); + } +}