Merge pull request #155 from softeerbootcamp4th/feat/#151/rewardResul…

…tFix

Feat/#151/reward result fix

service/package.json

@@ -21,6 +21,7 @@
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "framer-motion": "^11.3.28",
+    "js-confetti": "^0.12.0",
     "json-server": "^1.0.0-beta.1",
     "micro-slider": "^1.1.0",
     "postcss": "^8.4.39",

service/src/App.jsx

@@ -16,6 +16,7 @@ function App() {
     /^\/event\/noQuiz$/,
     /^\/event\/reward$/,
     /^\/event\/comments\/commentId\/\d+$/,
+    /^\/event\/\w+$/,
   ];
 
   const hideHeader = hideHeaderPattern.some(pattern =>
@@ -30,6 +31,7 @@ function App() {
     /^\/event\/noQuiz$/,
     /^\/event\/reward$/,
     /^\/event\/comments\/commentId\/\d+$/,
+    /^\/event\/\w+$/,
   ];
 
   const hideFooter = hideFooterPattern.some(pattern =>

service/src/components/modal/EventResultModal.jsx

@@ -1,6 +1,5 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
-
 import ModalFrame from './ModalFrame';
 import BlueButton from '@/components/buttons/BlueButton';
 import BlueCheckIcon from '@/assets/icons/blueCheckIcon.svg';
@@ -26,7 +25,11 @@ function EventResultModal({ closeResultModal, data, handleSendPrize }) {
     >
       {data.isDrawWin ? (
         <div className="flex-col px-3000 set-center min-w-[800px]">
-          <img src={data.image} alt="successImage" className="mb-900" />
+          <img
+            src={data.image}
+            alt="successImage"
+            className="mb-900 max-w-[450px] h-auto"
+          />
           <BlueButton
             value="상품 받기"
             onClickFunc={handleSendPrize}

service/src/pages/joinEvent/JoinEventIntroMain.jsx

@@ -4,15 +4,14 @@ import ToolBoxCard from '@/pages/joinEvent/ToolBoxCard';
 import PhoneInputModal from '@/components/modal/PhoneInputModal';
 import { AuthContext } from '@/context/authContext';
 import BluePurpleButton from '@/components/buttons/BluePurpleButton';
-import { postReward } from '@/api/rapple/index';
 import { useNavigate } from 'react-router-dom';
 import { getScenario } from '@/api/scenario';
 import { animationVariants } from '@/styles/FramerMotion';
 import { motion } from 'framer-motion';
 
 function JoinEventIntroMain() {
   const navigate = useNavigate();
-  const { userInfo, setUserInfo } = useContext(AuthContext);
+  const { userInfo } = useContext(AuthContext);
   const [openPhoneInputModal, setOpenPhoneInputModal] = useState(false);
   const [day, setDay] = useState(null);
   const [scenario, setScenario] = useState('');
@@ -42,18 +41,7 @@ function JoinEventIntroMain() {
   };
 
   const handleReward = async () => {
-    try {
-      const response = await postReward();
-      if (response && response.image) {
-        const updatedUserInfo = { ...userInfo, toolBoxCnt: toolBoxCnt - 1 };
-        setUserInfo(updatedUserInfo);
-        navigate(`/event/reward`, { state: response });
-      } else {
-        console.log('유효하지 않은 응답입니다: ', response);
-      }
-    } catch (error) {
-      console.error(error);
-    }
+    navigate(`/event/reward`);
   };
 
   return (

service/src/pages/joinEvent/Reward.jsx

@@ -1,15 +1,63 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect, useContext } from 'react';
 import EventResultModal from '@/components/modal/EventResultModal';
 import PrizeLinkSentModal from '@/components/modal/PrizeLinkSentModal';
-import { useNavigate, useLocation } from 'react-router-dom';
-import { postSendPrize } from '@/api/rapple/index';
+import { useNavigate } from 'react-router-dom';
+import { postReward, postSendPrize } from '@/api/rapple/index';
+import { AuthContext } from '@/context/authContext';
+import Loading from '@/assets/icons/Loading.svg';
+import BlueButton from '@/components/buttons/BlueButton';
+import JSConfetti from 'js-confetti';
 
 function Reward() {
   const navigate = useNavigate();
-  const [openResultModal, setOpenResultModal] = useState(true);
+  const [openResultModal, setOpenResultModal] = useState(false);
   const [openMessageModal, setOpenMessageModal] = useState(false);
   const [resultImage, setResultImage] = useState('');
-  const data = useLocation().state;
+  const { userInfo, setUserInfo } = useContext(AuthContext);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(false);
+  const [data, setData] = useState({});
+  const { toolBoxCnt } = userInfo;
+
+  useEffect(() => {
+    const confetti = new JSConfetti();
+
+    const timer = setTimeout(() => {
+      handleReward(confetti);
+    }, 1500);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  const handleReward = async confetti => {
+    if (userInfo.toolBoxCnt > 0) {
+      try {
+        const response = await postReward();
+        console.log(response);
+        if (response && response.image) {
+          setData(response);
+          const updatedUserInfo = { ...userInfo, toolBoxCnt: toolBoxCnt - 1 };
+          setUserInfo(updatedUserInfo);
+          setLoading(false);
+          setOpenResultModal(true);
+          if (response.isDrawWin && confetti) {
+            confetti.addConfetti({
+              confettiColors: ['#CAB0FF'],
+              confettiNumber: 500,
+            });
+          }
+        } else {
+          console.log('유효하지 않은 응답입니다: ', response);
+          setError(true);
+        }
+      } catch (error) {
+        console.error(error);
+        setError(true);
+      }
+    } else {
+      setError(true);
+    }
+  };
 
   const closeResultModal = () => {
     setOpenResultModal(false);
@@ -26,8 +74,44 @@ function Reward() {
     }
   };
 
+  const goToEventPage = () => {
+    navigate('/event');
+  };
+
+  if (error) {
+    return (
+      <div className="flex-col h-screen set-center">
+        <p className="text-heading-banner-title-3 text-gradient-blue-purple mb-2500">
+          예상하지 못한 에러가 발생했습니다..!
+        </p>
+        <BlueButton
+          value="돌아가기"
+          onClickFunc={goToEventPage}
+          styles="text-body-3-semibold px-1300 py-200 mt-[-5%]"
+        />
+      </div>
+    );
+  }
+
   return (
     <div>
+      {loading && !error && (
+        <div className="w-screen h-screen set-center">
+          <div className="set-center flex-col w-[400px] h-[400px] rounded-[30px] bg-white shadow-2xl pt-[50px]">
+            <img
+              src={Loading}
+              alt="Loading"
+              className="rotate-360 w-[100px] h-auto"
+            />
+            <p className="text-neutral-black mt-1000 text-detail-1-semibold">
+              경품을 응모중입니다.
+            </p>
+            <p className="text-neutral-black mt-300 text-detail-1-semibold">
+              잠시만 기다려주세요.
+            </p>
+          </div>
+        </div>
+      )}
       {openResultModal && (
         <EventResultModal
           closeResultModal={closeResultModal}

service/src/pages/joinEvent/commentList/CommentDetail.jsx

@@ -4,6 +4,7 @@ import CommentModal from '@/components/modal/CommentModal';
 import { AuthContext } from '@/context/authContext';
 import { getEachComment, postLike } from '@/api/comment';
 import PhoneInputModal from '@/components/modal/PhoneInputModal';
+import Loading from '@/assets/icons/Loading.svg';
 
 function CommentDetail() {
   const navigate = useNavigate();
@@ -14,6 +15,7 @@ function CommentDetail() {
   const [openCommentModal, setOpenCommentModal] = useState(true);
   const [isLiked, setIsLiked] = useState(false);
   const [likeCount, setLikeCount] = useState(0);
+  const [loading, setLoading] = useState(true);
 
   const closeCommentModal = () => {
     setOpenCommentModal(false);
@@ -69,6 +71,7 @@ function CommentDetail() {
       setComment(response);
       setIsLiked(response.isLiked);
       setLikeCount(response.likeCount);
+      setLoading(false);
     } catch (error) {
       console.error('Failed to fetch comment detail:', error);
     }
@@ -82,8 +85,13 @@ function CommentDetail() {
     fetchComment();
   }, [userInfo]);
 
-  if (!comment) {
-    return <div>Loading...</div>;
+  if (loading) {
+    console.log('ddd');
+    return (
+      <div className="w-screen h-screen set-center bg-neutral-400">
+        <img src={Loading} alt="Loading" className="rotate-360" />
+      </div>
+    );
   }
 
   return (

service/src/pages/joinEvent/commentList/Redirect.jsx

@@ -1,6 +1,7 @@
-import { useEffect } from 'react';
+import React, { useEffect } from 'react';
 import { getRedirectLink } from '@/api/comment/index';
 import { useParams, useNavigate } from 'react-router-dom';
+import Loading from '@/assets/icons/Loading.svg';
 
 function Redirect() {
   const navigate = useNavigate();
@@ -13,6 +14,12 @@ function Redirect() {
   useEffect(() => {
     getLink();
   }, []);
+
+  return (
+    <div className="w-screen h-screen set-center bg-neutral-400">
+      <img src={Loading} alt="Loading" className="rotate-360" />
+    </div>
+  );
 }
 
 export default Redirect;

service/src/styles/global.css

@@ -27,3 +27,16 @@
   transition: transform 1s;
   transform: rotate(180deg);
 }
+
+.rotate-360 {
+  animation: spin 2s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

service/yarn.lock

@@ -4032,6 +4032,11 @@ jiti@^1.21.0:
   resolved "https://registry.npmjs.org/jiti/-/jiti-1.21.6.tgz"
   integrity sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==
 
+js-confetti@^0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/js-confetti/-/js-confetti-0.12.0.tgz#5ed74dc6f430c0137115f350b2e3f1f119840157"
+  integrity sha512-1R0Akxn3Zn82pMqW65N1V2NwKkZJ75bvBN/VAb36Ya0YHwbaSiAJZVRr/19HBxH/O8x2x01UFAbYI18VqlDN6g==
+
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz"