diff --git a/src/common/constants.js b/src/common/constants.js index 15bb2edb..27c8d4d8 100644 --- 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 index c47fa534..be155259 100644 --- 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 (
+ 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 index fb05ec65..7515cbcc 100644 --- a/src/mainPage/features/interactions/modal/InteractionAnswer.jsx +++ b/src/mainPage/features/interactions/modal/InteractionAnswer.jsx @@ -5,9 +5,12 @@ 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, @@ -15,29 +18,35 @@ export default function InteractionAnswer({ 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 = ( { - /* - * 비로그인자가 정보등록을 성공시켰을 때 서버로 추첨이벤트 참여 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({
당첨확률 UP! diff --git a/src/mainPage/features/interactions/modal/InteractionModal.jsx b/src/mainPage/features/interactions/modal/InteractionModal.jsx index 61debf67..58c77347 100644 --- 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} />
); diff --git a/src/mainPage/mock.js b/src/mainPage/mock.js index 81c2f9b0..7c6e392e 100644 --- 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, +);