Merge pull request #105 from softeerbootcamp4th/feature/10-interactio…

…npage [feat] api 주소 수정, getDayDifference 함수 정의
softeerbootcamp4th · Aug 16, 2024 · 8c24e63 · 8c24e63
2 parents 5451298 + aed5fda
commit 8c24e63
Show file tree

Hide file tree

Showing 6 changed files with 86 additions and 46 deletions.
diff --git 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
@@ -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 (
     <section

diff --git a/src/mainPage/features/interactions/mock.js b/src/mainPage/features/interactions/mock.js
@@ -1,10 +1,20 @@
 import { http, HttpResponse } from "msw";
 
+const eventParticipationDate = {
+  dates: [
+    "2024-09-09T06:46:21.585Z",
+    "2024-09-11T06:46:21.585Z",
+    "2024-09-13T06:46:21.585Z",
+  ],
+};
+
 const handlers = [
-  http.get("/api/v1/draw/:eventDrawId", () =>
-    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
@@ -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 = (
-    <AuthModal
-      onComplete={() => {
-        // 추첨 이벤트 참가 전송. API 주소 추후 바뀔 수 있음
-        fetchServer(`/api/v1/draw/${EVENT_DRAW_ID}`, {
-          method: "POST",
-        }).catch((e) => {
-          console.log(e);
-        });
-      }}
-    />
-  );
+  const authModal = <AuthModal onComplete={() => 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
@@ -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 }) {
 
       <div className="absolute bottom-6 left-1/2 -translate-x-1/2 flex gap-4">
         <Button
-          onClick={joinEvent}
+          onClick={onClickConfirm}
           styleType="filled"
           backdrop="dark"
           disabled={!isActive}
@@ -79,7 +65,6 @@ export default function InteractionModal({ index, answer }) {
         setIsAnswerUp={setIsAnswerUp}
         answer={answer}
         close={close}
-        isLogin={isLogin}
         index={index}
       />
     </div>

diff --git a/src/mainPage/features/interactions/modal/joinEvent.js 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);
+    });
+  }
+}