From 7b8dba4545bf9e77191a733430d9858664c634b0 Mon Sep 17 00:00:00 2001 From: darkdulgi Date: Sat, 17 Aug 2024 12:58:25 +0900 Subject: [PATCH 1/2] =?UTF-8?q?[refactor]=20=EC=BD=94=EB=93=9C=20=EB=A6=AC?= =?UTF-8?q?=ED=8C=A9=ED=84=B0=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .prettierrc | 3 +- src/common/constants.js | 2 ++ src/common/utils.js | 5 +-- .../description/InteractionSlide.jsx | 35 ++++++++----------- .../interactions/description/TapBar.jsx | 14 +++----- src/mainPage/features/interactions/index.jsx | 34 ++++++------------ .../interactions/modal/InteractionAnswer.jsx | 31 +++++----------- .../features/interactions/modal/joinEvent.js | 5 +-- 8 files changed, 49 insertions(+), 80 deletions(-) diff --git a/.prettierrc b/.prettierrc index 93f8ff5f..7ffdd6fd 100644 --- a/.prettierrc +++ b/.prettierrc @@ -4,5 +4,6 @@ "trailingComma": "all", "semi": true, "tabWidth": 2, - "useTabs": false + "useTabs": false, + "printWidth": 100 } \ No newline at end of file diff --git a/src/common/constants.js b/src/common/constants.js index db149ca1..a3e7cca1 100644 --- a/src/common/constants.js +++ b/src/common/constants.js @@ -5,3 +5,5 @@ 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"; + +export const DAY_MILLISEC = 1000 * 24 * 60 * 60; \ No newline at end of file diff --git a/src/common/utils.js b/src/common/utils.js index c607e3ab..e689fd56 100644 --- a/src/common/utils.js +++ b/src/common/utils.js @@ -1,3 +1,5 @@ +import { DAY_MILLISEC } from "./constants"; + export function clamp(target, min, max) { if (target < min) return min; if (target > max) return max; @@ -107,8 +109,7 @@ export function getDayDifference(_date1, _date2) { date2.getDate(), ); - const timeDifference = date2WithoutTime - date1WithoutTime; - const dayDifference = timeDifference / (1000 * HOURS * MINUTES * SECONDS); + const dayDifference = (date2WithoutTime - date1WithoutTime) / DAY_MILLISEC; return dayDifference; } diff --git a/src/mainPage/features/interactions/description/InteractionSlide.jsx b/src/mainPage/features/interactions/description/InteractionSlide.jsx index 46c6e49c..64ca8e2f 100644 --- a/src/mainPage/features/interactions/description/InteractionSlide.jsx +++ b/src/mainPage/features/interactions/description/InteractionSlide.jsx @@ -1,13 +1,12 @@ import InteractionModal from "../modal/InteractionModal"; import openModal from "@common/modal/openModal.js"; import { padNumber } from "@common/utils.js"; -import { EVENT_START_DATE } from "@common/constants"; +import { EVENT_START_DATE, DAY_MILLISEC } from "@common/constants"; +import useEventStore from "@main/realtimeEvent/store.js"; -function getEventDate(index) { +function getEventDateString(eventDate) { const day = ["일", "월", "화", "수", "목", "금", "토"]; - const fullDate = new Date( - EVENT_START_DATE.getTime() + index * 24 * 60 * 60 * 1000, - ); + const fullDate = new Date(eventDate); const month = fullDate.getMonth() + 1; const date = fullDate.getDate(); @@ -19,21 +18,21 @@ export default function InteractionSlide({ interactionDesc, index, isCurrent, - joined, + isJoined, slideTo, answer, }) { + const currentServerTime = useEventStore((state) => state.currentServerTime); const activeImgPath = `images/active${index + 1}.png`; const inactiveImgPath = `images/inactive${index + 1}.png`; const numberImgPath = `icons/rect${index + 1}.svg`; + const eventDate = EVENT_START_DATE.getTime() + index * DAY_MILLISEC; + const isOpened = currentServerTime >= eventDate; function onClickExperience() { - if (joined < 0) return; + if (isJoined < 0) return; - openModal( - , - "interaction", - ); + openModal(, "interaction"); } return ( @@ -42,7 +41,7 @@ export default function InteractionSlide({ className="w-full h-full flex flex-col justify-center items-center select-none" > - {getEventDate(index)} + {getEventDateString(eventDate)}
@@ -57,17 +56,13 @@ export default function InteractionSlide({ - + 오픈 예정 diff --git a/src/mainPage/features/interactions/description/TapBar.jsx b/src/mainPage/features/interactions/description/TapBar.jsx index b4a0d907..cfaf0509 100644 --- a/src/mainPage/features/interactions/description/TapBar.jsx +++ b/src/mainPage/features/interactions/description/TapBar.jsx @@ -1,4 +1,4 @@ -export default function TapBar({ currentInteraction, joinedList, slideTo }) { +export default function TapBar({ currentInteraction, isJoinedList, slideTo }) { return ( <> @@ -14,17 +14,13 @@ export default function TapBar({ currentInteraction, joinedList, slideTo }) {
- {joinedList.map((joined, index) => ( + {isJoinedList.map((isJoined, index) => (
slideTo(index)} className="flex flex-col items-center select-none cursor-pointer" > - 체크 0 ? "" : "invisible"}`} - /> + 체크 0 ? "text-green-400" : "text-neutral-700"}`} + className={`text-body-m font-bold ${isJoined ? "text-green-400" : "text-neutral-700"}`} > - {joined > 0 ? "참여 완료" : !joined ? "미참여" : ""} + {isJoined ? "참여 완료" : "미참여"}
))} diff --git a/src/mainPage/features/interactions/index.jsx b/src/mainPage/features/interactions/index.jsx index 56be6210..0e59509d 100644 --- a/src/mainPage/features/interactions/index.jsx +++ b/src/mainPage/features/interactions/index.jsx @@ -8,52 +8,39 @@ import EventDescriptionLayout from "@main/eventDescription/EventDescriptionLayou 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 { 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"; +import { EVENT_DRAW_ID, 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 [isJoinedList, setIsJoinedList] = useState([false, false, false, false, false]); const slideTo = (_index) => swiperRef.current.swiper.slideTo(_index); + useSectionInitialize(INTERACTION_SECTION, sectionRef); useEffect(() => { fetchServer(`/api/v1/event/draw/${EVENT_DRAW_ID}/participation`) .then(({ dates }) => { - let newJoinedList = [0, 0, 0, 0, 0]; + let newJoinedList = [false, false, false, false, false]; dates.forEach((date) => { const day = getDayDifference(EVENT_START_DATE, new Date(date)); - newJoinedList[day] = 1; + newJoinedList[day] = true; }); - for (let i = 0; i < newJoinedList.length; i++) { - if ( - currentServerTime < - EVENT_START_DATE.getTime() + i * 24 * 60 * 60 * 1000 - ) { - newJoinedList[i] = -1; - } - } - setJoinedList(newJoinedList); + setIsJoinedList(newJoinedList); }) .catch((e) => { console.log(e); }); - }, [currentServerTime]); + }, []); return ( -
+
@@ -71,13 +58,14 @@ export default function InteractionPage() { interactionDesc={interactionDesc} index={index} isCurrent={currentInteraction === index} - joined={joinedList[index]} + isJoined={isJoinedList[index]} slideTo={slideTo} answer={JSONData.answer[index]} /> ))} +
diff --git a/src/mainPage/features/interactions/modal/InteractionAnswer.jsx b/src/mainPage/features/interactions/modal/InteractionAnswer.jsx index d9f553dc..24963b51 100644 --- a/src/mainPage/features/interactions/modal/InteractionAnswer.jsx +++ b/src/mainPage/features/interactions/modal/InteractionAnswer.jsx @@ -7,26 +7,19 @@ import openModal from "@common/modal/openModal.js"; import Button from "@common/components/Button.jsx"; import { fetchServer } from "@common/dataFetch/fetchServer"; import userStore from "@main/auth/store.js"; -import { EVENT_START_DATE } from "@common/constants.js"; +import { EVENT_START_DATE, DAY_MILLISEC } 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, - index, -}) { +export default function InteractionAnswer({ isAnswerUp, setIsAnswerUp, answer, close, 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 eventDate = EVENT_START_DATE.getTime() + index * DAY_MILLISEC; const [isAniPlaying, setIsAniPlaying] = useState(false); - const isEventToday = - getEventDateState(currentServerTime, eventDate) === "active"; + const isEventToday = getEventDateState(currentServerTime, eventDate) === "active"; const authModal = joinEvent(index)} />; async function onClickWrite() { @@ -77,13 +70,9 @@ export default function InteractionAnswer({
- - {answer.desc} - + {answer.desc} - - {answer.subdesc} - + {answer.subdesc}
@@ -91,15 +80,11 @@ export default function InteractionAnswer({ {isLogin || !isEventToday ? ( <> - {isEventToday - ? "오늘 응모가 완료되었습니다!" - : "응모 기간이 지났습니다!"} + {isEventToday ? "오늘 응모가 완료되었습니다!" : "응모 기간이 지났습니다!"}
-
+
당첨확률 UP! diff --git a/src/mainPage/features/interactions/modal/joinEvent.js b/src/mainPage/features/interactions/modal/joinEvent.js index 8a1f2728..3eeb769b 100644 --- a/src/mainPage/features/interactions/modal/joinEvent.js +++ b/src/mainPage/features/interactions/modal/joinEvent.js @@ -1,13 +1,13 @@ 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 { EVENT_START_DATE, DAY_MILLISEC } 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 eventDate = EVENT_START_DATE.getTime() + index * DAY_MILLISEC; const currentServerTime = useEventStore.getState().currentServerTime; if (isLogin && getDayDifference(eventDate, currentServerTime) === 0) { @@ -15,6 +15,7 @@ export default function joinEvent(index) { method: "POST", }).catch((e) => { console.log(e); + alert("이벤트 참여 전송 실패.") }); } } From 39951b4baae1c8a1824d1a2329cae5d1b9a3ed06 Mon Sep 17 00:00:00 2001 From: darkdulgi Date: Sat, 17 Aug 2024 13:04:24 +0900 Subject: [PATCH 2/2] =?UTF-8?q?[chore]=20=EB=B6=88=ED=95=84=EC=9A=94=20?= =?UTF-8?q?=EC=BD=94=EB=93=9C=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../interactions/description/InteractionSlide.jsx | 11 +---------- src/mainPage/features/interactions/index.jsx | 1 - 2 files changed, 1 insertion(+), 11 deletions(-) diff --git a/src/mainPage/features/interactions/description/InteractionSlide.jsx b/src/mainPage/features/interactions/description/InteractionSlide.jsx index 64ca8e2f..9f011ef8 100644 --- a/src/mainPage/features/interactions/description/InteractionSlide.jsx +++ b/src/mainPage/features/interactions/description/InteractionSlide.jsx @@ -14,14 +14,7 @@ function getEventDateString(eventDate) { return `${padNumber(month)}월 ${padNumber(date)}일(${day[fullDate.getDay()]})`; } -export default function InteractionSlide({ - interactionDesc, - index, - isCurrent, - isJoined, - slideTo, - answer, -}) { +export default function InteractionSlide({ interactionDesc, index, isCurrent, slideTo, answer }) { const currentServerTime = useEventStore((state) => state.currentServerTime); const activeImgPath = `images/active${index + 1}.png`; const inactiveImgPath = `images/inactive${index + 1}.png`; @@ -30,8 +23,6 @@ export default function InteractionSlide({ const isOpened = currentServerTime >= eventDate; function onClickExperience() { - if (isJoined < 0) return; - openModal(, "interaction"); } diff --git a/src/mainPage/features/interactions/index.jsx b/src/mainPage/features/interactions/index.jsx index 0e59509d..a15b6ce6 100644 --- a/src/mainPage/features/interactions/index.jsx +++ b/src/mainPage/features/interactions/index.jsx @@ -58,7 +58,6 @@ export default function InteractionPage() { interactionDesc={interactionDesc} index={index} isCurrent={currentInteraction === index} - isJoined={isJoinedList[index]} slideTo={slideTo} answer={JSONData.answer[index]} />