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

…page [feat, refactor] mock 서버와 통신 관련 구체화
softeerbootcamp4th · Aug 12, 2024 · 086ee37 · 086ee37
2 parents eee17cb + 89bdbd2
commit 086ee37
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 30 deletions.
diff --git a/src/common/constants.js b/src/common/constants.js
@@ -1,3 +1,6 @@
-export const EVENT_ID = "0";
+export const EVENT_FCFS_ID = "";
+export const EVENT_DRAW_ID = "HD-19700101-01";
+export const EVENT_START_DATE = new Date(2024, 8, 9);
+
 export const SERVICE_TOKEN_ID = "AWESOME_ORANGE_ACCESS_TOKEN";
 export const ADMIN_TOKEN_ID = "AWESOME_ORANGE_ADMIN_ACCESS_TOKEN";
diff --git a/src/mainPage/features/interactions/index.jsx b/src/mainPage/features/interactions/index.jsx
@@ -1,4 +1,4 @@
-import { useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import TapBar from "./description/TapBar.jsx";
 import InteractionSlide from "./description/InteractionSlide.jsx";
 import GiftDetail from "./description/GiftDetail.jsx";
@@ -9,15 +9,29 @@ import { INTERACTION_SECTION } from "@main/scroll/constants.js";
 import useSwiperState from "@main/hooks/useSwiperState.js";
 
 import JSONData from "./content.json";
+import { fetchServer } from "@common/dataFetch/fetchServer.js";
+import { EVENT_DRAW_ID } from "@common/constants.js";
 
 export default function InteractionPage() {
   const sectionRef = useRef(null);
   const [currentInteraction, swiperRef] = useSwiperState();
+  const [joinedList, setJoinedList] = useState([-1, -1, -1, -1, -1]);
+  const slideTo = (_index) => swiperRef.current.swiper.slideTo(_index);
   useSectionInitialize(INTERACTION_SECTION, sectionRef);
 
-  const joinedList = [1, 0, 0, 1, -1];
-
-  const slideTo = (_index) => swiperRef.current.swiper.slideTo(_index);
+  useEffect(() => {
+    fetchServer(`/api/v1/draw/${EVENT_DRAW_ID}`)
+      .then((res) => {
+        console.log(res);
+        /*
+         * 사용자가 참여한 이벤트 날짜 문자열이 들어간 가변적 길이의 리스트를 서버로부터 받아올 예정. 그런데 그 문자열의 형식을 아직 모른다..
+         */
+        setJoinedList([0, 1, 1, 0, -1]);
+      })
+      .catch((e) => {
+        console.log(e);
+      });
+  }, []);
 
   return (
     <section

diff --git a/src/mainPage/features/interactions/mock.js b/src/mainPage/features/interactions/mock.js
@@ -0,0 +1,10 @@
+import { http, HttpResponse } from "msw";
+
+const handlers = [
+  http.get("/api/v1/draw/:eventDrawId", () =>
+    HttpResponse.json(["20240909", "20240911"]),
+  ),
+  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
@@ -5,39 +5,48 @@ import { COMMENT_SECTION } from "@main/scroll/constants.js";
 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 useEventStore from "@main/realtimeEvent/store.js";
+import getEventDateState from "@main/realtimeEvent/getEventDateState";
 
 import style from "./InteractionAnswer.module.css";
-// import useEventStore from "@main/realtimeEvent/store";
 
 export default function InteractionAnswer({
   isAnswerUp,
   setIsAnswerUp,
   answer,
   close,
   isLogin,
+  index,
 }) {
-  // const currentServerTime = fcfsStore((state) => state.currentServerTime);
+  const currentServerTime = useEventStore((state) => state.currentServerTime);
+  const eventDate = EVENT_START_DATE.getTime() + index * 24 * 60 * 60 * 1000;
   const [isAniPlaying, setIsAniPlaying] = useState(false);
-  const [isEventToday, setIsEventToday] = useState(false);
   const [isJoined, setIsJoined] = useState(false);
   const authModal = (
     <AuthModal
       onComplete={() => {
-        /*
-         *  비로그인자가 정보등록을 성공시켰을 때 서버로 추첨이벤트 참여 api를 보내는 코드 미구현
-         */
+        // 추첨 이벤트 참가 전송. API 주소 추후 바뀔 수 있음
+        fetchServer(`/api/v1/draw/${EVENT_DRAW_ID}`, {
+          method: "POST",
+        })
+          .then((res) => {
+            console.log(res);
+            setIsJoined(true);
+          })
+          .catch((e) => {
+            console.log(e);
+          });
       }}
     />
   );
 
   useEffect(() => {
-    /*
-     *  서버에서 해당 날짜의 사용자 응모 여부와, 시간을 받아온 후 이벤트 날짜와 비교하는 코드 미구현
-     */
-
-    setIsEventToday(true);
-    setIsJoined(false);
-  }, []);
+    if (getEventDateState(currentServerTime, eventDate) === "active") {
+      setIsJoined(true);
+    }
+  }, [currentServerTime, eventDate]);
 
   async function onClickWrite() {
     await close();
@@ -47,12 +56,20 @@ export default function InteractionAnswer({
   function onClickShare() {
     setIsAniPlaying(true);
 
-    /*
-     *  서버에서 단축 url을 받아오는 코드 미구현
-     */
-
-    const simpleURL = "https://youtu.be/KMU0tzLwhbE";
-    navigator.clipboard.writeText(simpleURL);
+    // 단축 URL 받아오는 요청. 추후 수정 필요
+    fetchServer(
+      `/api/v1/url/shorten?originalUrl=https%3A%2F%2Fsofteer-awesome-orange.vercel.app%2F&userId=1`,
+      {
+        method: "POST",
+      },
+    )
+      .then((res) => {
+        console.log(res);
+        navigator.clipboard.writeText("https://youtu.be/KMU0tzLwhbE");
+      })
+      .catch((e) => {
+        console.log(e);
+      });
   }
 
   return (
@@ -101,7 +118,7 @@ export default function InteractionAnswer({
             <div className="flex gap-4 items-end">
               <div className="flex flex-col gap-2">
                 <div
-                  className={`${isEventToday ? "" : "hidden"} relative flex flex-col items-center animate-bounce`}
+                  className={`${isJoined ? "" : "hidden"} relative flex flex-col items-center animate-bounce`}
                 >
                   <span className=" bg-green-400 text-nowrap text-body-s xl:text-body-m text-neutral-800 rounded-full px-4 xl:px-8 py-1 xl:py-2 font-bold">
                     당첨확률 UP!

diff --git a/src/mainPage/features/interactions/modal/InteractionModal.jsx b/src/mainPage/features/interactions/modal/InteractionModal.jsx
@@ -1,11 +1,13 @@
 import { lazy, useContext, useRef, useState } from "react";
 
 import InteractionAnswer from "./InteractionAnswer.jsx";
+
 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 = [
@@ -29,9 +31,16 @@ export default function InteractionModal({ index, answer }) {
   function joinEvent() {
     setIsAnswerUp(true);
     if (isLogin) {
-      /*
-       *  로그인 유저가 서버로 추첨이벤트 참여 api 전송하는 코드 미구현
-       */
+      // 추첨 이벤트 참가 전송. API 주소 추후 바뀔 수 있음
+      fetchServer(`/api/v1/draw/${EVENT_DRAW_ID}`, {
+        method: "POST",
+      })
+        .then((res) => {
+          console.log(res);
+        })
+        .catch((e) => {
+          console.log(e);
+        });
     }
   }
 
@@ -71,6 +80,7 @@ export default function InteractionModal({ index, answer }) {
         answer={answer}
         close={close}
         isLogin={isLogin}
+        index={index}
       />
     </div>
   );

diff --git a/src/mainPage/mock.js b/src/mainPage/mock.js
@@ -2,8 +2,14 @@ import { setupWorker } from "msw/browser";
 import commentHandler from "./features/comment/mock.js";
 import authHandler from "./shared/auth/mock.js";
 import fcfsHandler from "./features/fcfs/mock.js";
+import interactionHandler from "./features/interactions/mock.js";
 
 // mocking은 기본적으로 각 feature 폴더 내의 mock.js로 정의합니다.
 // 새로운 feature의 mocking을 추가하셨으면, mock.js의 setupWorker 내부 함수에 인자를 spread 연산자를 이용해 추가해주세요.
 // 예시 : export default setupWorker(...authHandler, ...questionHandler, ...articleHandler);
-export default setupWorker(...commentHandler, ...authHandler, ...fcfsHandler);
+export default setupWorker(
+  ...commentHandler,
+  ...authHandler,
+  ...fcfsHandler,
+  ...interactionHandler,
+);