Merge pull request #167 from softeerbootcamp4th/fix/#154/code

Fix/#154/code
softeerbootcamp4th · Aug 23, 2024 · 9ad0d52 · 9ad0d52
2 parents c8d36c2 + 7babcb6
commit 9ad0d52
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 28 deletions.
diff --git a/service/src/pages/joinEvent/JoinEventIntroMain.jsx b/service/src/pages/joinEvent/JoinEventIntroMain.jsx
@@ -68,33 +68,35 @@ function JoinEventIntroMain() {
             </div>
           </div>
           <SlideUpMotion delay={0.5}>
-            <div className="relative flex flex-col">
+            <div className="relative flex-col">
               <div className="text-heading-banner-title-2 text-nowrap mb-1000">
                 <span className="text-gradient-blue-purple">캐스퍼 EV</span>와
                 떠나기
               </div>
-              <div className="w-max bg-op-30-blue px-400 py-100 mb-400 text-detail-2-medium text-neutral-white">
-                Day {day}
+              <div className="inline-block w-auto bg-op-30-blue px-400 py-100 mb-400">
+                <p className="text-detail-2-medium text-neutral-white">
+                  Day {day}
+                </p>
               </div>
               <div className="whitespace-pre-line h-1800 text-detail-1-regular text-neutral-black mb-1500">
                 {scenario}
               </div>
-              <div>
+              <div className="relative">
                 <BluePurpleButton
                   value="결과 보기"
                   onClickFunc={handleReward}
                   styles="text-body-3-regular px-5000 py-400"
                   disabled={isRewardButtonDisabled}
                 />
+                {isRewardButtonDisabled && (
+                  <>
+                    <div className="absolute top-[97px] left-[279px] h-0 w-0 border-x-[12px] border-b-[12px] border-x-transparent border-b-neutral-white"></div>
+                    <div className="absolute top-[103px] left-[91px] w-[400px] rounded-[5px] py-300 text-center bg-neutral-white text-primary-blue">
+                      이벤트에 참여해서 추첨을 위한 아이템을 모아보아요!
+                    </div>
+                  </>
+                )}
               </div>
-              {isRewardButtonDisabled && (
-                <>
-                  <div className="absolute top-[417px] left-[279px] h-0 w-0 border-x-[12px] border-b-[12px] border-x-transparent border-b-neutral-white"></div>
-                  <div className="absolute top-[423px] left-[91px] w-[400px] rounded-[5px] py-300 text-center bg-neutral-white text-primary-blue">
-                    이벤트에 참여해서 추첨을 위한 아이템을 모아보아요!
-                  </div>
-                </>
-              )}
             </div>
           </SlideUpMotion>
         </div>

diff --git a/service/src/pages/joinEvent/MiniQuiz.jsx b/service/src/pages/joinEvent/MiniQuiz.jsx
@@ -6,27 +6,26 @@ import miniQuizIntro3 from '@/assets/images/miniQuizIntro3.svg';
 import {
   getMillisecondsUntilNextSecond,
   getMillisecondsUntilNextHour,
-  getSecondsUntilNextHourFromNoon,
+  getSecondsUntilNextQuiz,
 } from '@/utils/miniQuizUtils';
 
 import { useNavigate } from 'react-router-dom';
 
 function MiniQuiz() {
   const navigate = useNavigate();
-  const [seconds, setSeconds] = useState(() =>
-    getSecondsUntilNextHourFromNoon(),
-  );
+  const [seconds, setSeconds] = useState(() => getSecondsUntilNextQuiz());
   const [countDownStart, setCountDownStart] = useState(false);
 
   useEffect(() => {
     const checkTime = () => {
-      const remainingTime = getSecondsUntilNextHourFromNoon();
+      const remainingTime = getSecondsUntilNextQuiz(); //12시까지 몇 초 남았는지 계산
       if (remainingTime !== -1) {
+        //-1이 아니면 12시와 13시 사이라는 의미로 카운트 다운 시작
         setCountDownStart(true);
       }
 
-      const sleepTime = getMillisecondsUntilNextHour();
-      const timeoutId = setTimeout(checkTime, sleepTime);
+      const sleepTime = getMillisecondsUntilNextHour(); //다음 정각까지 남은 시간 계산
+      const timeoutId = setTimeout(checkTime, sleepTime); //다음 정각에 checkTime 함수 호출
       return () => clearTimeout(timeoutId);
     };
 
@@ -36,14 +35,15 @@ function MiniQuiz() {
   useEffect(() => {
     if (countDownStart) {
       const tick = () => {
-        const remainingTime = getSecondsUntilNextHourFromNoon();
+        const remainingTime = getSecondsUntilNextQuiz(); //퀴즈 시간까지 남은 초 확인
         setSeconds(remainingTime);
 
         if (remainingTime !== -1) {
-          const timeoutId = setTimeout(tick, getMillisecondsUntilNextSecond());
+          //12시와 13시 사이
+          const timeoutId = setTimeout(tick, getMillisecondsUntilNextSecond()); //다음 초에 tick 함수 재호출로 남은 시간 재설정
           return () => clearTimeout(timeoutId);
         } else {
-          setCountDownStart(false);
+          setCountDownStart(false); //12시와 13시 사이가 아니면 카운트 다운을 종료
         }
       };
 
@@ -66,9 +66,9 @@ function MiniQuiz() {
           </div>
         )}
         <div className="absolute inset-0 flex gap-600">
-          <img src={miniQuizIntro1} alt="miniQuizIntro1" />
-          <img src={miniQuizIntro2} alt="miniQuizIntro2" />
-          <img src={miniQuizIntro3} alt="miniQuizIntro3" />
+          <img src={miniQuizIntro1} alt="miniQuizIntro1" loading="lazy" />
+          <img src={miniQuizIntro2} alt="miniQuizIntro2" loading="lazy" />
+          <img src={miniQuizIntro3} alt="miniQuizIntro3" loading="lazy" />
         </div>
       </div>
       <div className="relative w-[780px] z-0 ml-3000">

diff --git a/service/src/utils/miniQuizUtils.js b/service/src/utils/miniQuizUtils.js
@@ -1,8 +1,14 @@
+/*
+ * 현재 시간에서 다음 초까지의 시간 계산(정확성을 위한 수단)
+ */
 export function getMillisecondsUntilNextSecond() {
   const now = new Date();
   return 1000 - now.getMilliseconds();
 }
 
+/*
+ * 다음 정각까지 남은 milli초 계산(정각마다 퀴즈 시작 1시간 전인지 확인을 하기에)
+ */
 export function getMillisecondsUntilNextHour() {
   const now = new Date();
   const millisecondsUntilNextHour =
@@ -12,11 +18,12 @@ export function getMillisecondsUntilNextHour() {
   return millisecondsUntilNextHour;
 }
 
-export function getSecondsUntilNextHourFromNoon() {
+export function getSecondsUntilNextQuiz(hour = 13) {
+  //퀴즈 시간 변동 가능성에 따른 인자 전달
   const now = new Date();
   const currentHours = now.getHours();
-  if (currentHours !== 12) {
-    return -1;
+  if (currentHours !== hour - 1) {
+    return -1; // 12시와 13시 사이(퀴즈 시작 1시간 이내)가 아니면 -1 반환
   }
   return (60 - now.getMinutes()) * 60 - now.getSeconds();
 }