From 7c7fa8188e6d70fb6f38bc3b6961383c85a7502e Mon Sep 17 00:00:00 2001 From: subsub-e Date: Wed, 21 Aug 2024 18:36:32 +0900 Subject: [PATCH 1/7] =?UTF-8?q?[add]=20confetti=20=EB=9D=BC=EC=9D=B4?= =?UTF-8?q?=EB=B8=8C=EB=9F=AC=EB=A6=AC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- service/package.json | 1 + service/yarn.lock | 5 +++++ 2 files changed, 6 insertions(+) diff --git a/service/package.json b/service/package.json index 72e4bb0..a9fd602 100644 --- a/service/package.json +++ b/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", diff --git a/service/yarn.lock b/service/yarn.lock index 20705d1..f4603d3 100644 --- a/service/yarn.lock +++ b/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" From a8cb44c17d53d6a2f01f82f24bfa9c5f981ef5a1 Mon Sep 17 00:00:00 2001 From: subsub-e Date: Wed, 21 Aug 2024 18:36:47 +0900 Subject: [PATCH 2/7] =?UTF-8?q?[add]=20router=20header,=20footer=20?= =?UTF-8?q?=EC=88=A8=EA=B9=80=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- service/src/App.jsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/service/src/App.jsx b/service/src/App.jsx index 247f0f0..01fed5e 100644 --- a/service/src/App.jsx +++ b/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 => From a3bd64cce011ed5919ff3ed8a6efb88763c8a128 Mon Sep 17 00:00:00 2001 From: subsub-e Date: Wed, 21 Aug 2024 18:37:09 +0900 Subject: [PATCH 3/7] =?UTF-8?q?[add]=20loading=20svg=20=EC=B6=94=EA=B0=80?= =?UTF-8?q?=20=EB=B0=8F=20=EC=95=A0=EB=8B=88=EB=A9=94=EC=9D=B4=EC=85=98=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- service/src/assets/icons/Loading.svg | 10 ++++++++++ service/src/styles/global.css | 13 +++++++++++++ 2 files changed, 23 insertions(+) create mode 100644 service/src/assets/icons/Loading.svg diff --git a/service/src/assets/icons/Loading.svg b/service/src/assets/icons/Loading.svg new file mode 100644 index 0000000..b04b312 --- /dev/null +++ b/service/src/assets/icons/Loading.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/service/src/styles/global.css b/service/src/styles/global.css index 1081974..3e0b369 100644 --- a/service/src/styles/global.css +++ b/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); + } +} From 7fea7ba3400af0b43c232d24d84c077f677e44fe Mon Sep 17 00:00:00 2001 From: subsub-e Date: Wed, 21 Aug 2024 18:38:14 +0900 Subject: [PATCH 4/7] =?UTF-8?q?[fix]=20=EA=B2=BD=ED=92=88=20=EC=9D=91?= =?UTF-8?q?=EB=AA=A8=20=EB=A1=9C=EC=A7=81=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/modal/EventResultModal.jsx | 7 +++++-- .../src/pages/joinEvent/JoinEventIntroMain.jsx | 16 ++-------------- 2 files changed, 7 insertions(+), 16 deletions(-) diff --git a/service/src/components/modal/EventResultModal.jsx b/service/src/components/modal/EventResultModal.jsx index 678b07a..ff1f367 100644 --- a/service/src/components/modal/EventResultModal.jsx +++ b/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 ? (
- successImage + successImage { - 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 ( From 4717661f7bebe482b56d3de7b7ab31470fc348ef Mon Sep 17 00:00:00 2001 From: subsub-e Date: Wed, 21 Aug 2024 18:38:30 +0900 Subject: [PATCH 5/7] =?UTF-8?q?[feat]=20=EA=B2=BD=ED=92=88=EC=9D=91?= =?UTF-8?q?=EB=AA=A8=20=EB=A1=9C=EB=94=A9,=20=EC=BB=A8=ED=8E=98=ED=8A=B8?= =?UTF-8?q?=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- service/src/pages/joinEvent/Reward.jsx | 94 ++++++++++++++++++++++++-- 1 file changed, 89 insertions(+), 5 deletions(-) diff --git a/service/src/pages/joinEvent/Reward.jsx b/service/src/pages/joinEvent/Reward.jsx index f4b6c9d..71d4fb1 100644 --- a/service/src/pages/joinEvent/Reward.jsx +++ b/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 ( +
+

+ 보유하신 툴박스가 없어요... +

+ +
+ ); + } + return (
+ {loading && !error && ( +
+
+ Loading +

+ 경품을 응모중입니다. +

+

+ 잠시만 기다려주세요. +

+
+
+ )} {openResultModal && ( Date: Wed, 21 Aug 2024 18:38:42 +0900 Subject: [PATCH 6/7] =?UTF-8?q?[fix]=20loading=20=ED=99=94=EB=A9=B4=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../pages/joinEvent/commentList/CommentDetail.jsx | 12 ++++++++++-- service/src/pages/joinEvent/commentList/Redirect.jsx | 9 ++++++++- 2 files changed, 18 insertions(+), 3 deletions(-) diff --git a/service/src/pages/joinEvent/commentList/CommentDetail.jsx b/service/src/pages/joinEvent/commentList/CommentDetail.jsx index 29fde23..8a538eb 100644 --- a/service/src/pages/joinEvent/commentList/CommentDetail.jsx +++ b/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
Loading...
; + if (loading) { + console.log('ddd'); + return ( +
+ Loading +
+ ); } return ( diff --git a/service/src/pages/joinEvent/commentList/Redirect.jsx b/service/src/pages/joinEvent/commentList/Redirect.jsx index 0555c08..454551e 100644 --- a/service/src/pages/joinEvent/commentList/Redirect.jsx +++ b/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 ( +
+ Loading +
+ ); } export default Redirect; From 4d804a36078a5d408c5c1c2086df65f4ca7665f4 Mon Sep 17 00:00:00 2001 From: subsub-e Date: Wed, 21 Aug 2024 18:45:01 +0900 Subject: [PATCH 7/7] =?UTF-8?q?[fix]=20=EC=97=90=EB=9F=AC=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=ED=85=8D=EC=8A=A4=ED=8A=B8=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- service/src/pages/joinEvent/Reward.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/service/src/pages/joinEvent/Reward.jsx b/service/src/pages/joinEvent/Reward.jsx index 71d4fb1..0853991 100644 --- a/service/src/pages/joinEvent/Reward.jsx +++ b/service/src/pages/joinEvent/Reward.jsx @@ -82,7 +82,7 @@ function Reward() { return (

- 보유하신 툴박스가 없어요... + 예상하지 못한 에러가 발생했습니다..!