diff --git a/src/components/Event/BodyRandomBox/index.css b/src/components/Event/BodyRandomBox/index.css index 5c042ca24..2c07e414a 100644 --- a/src/components/Event/BodyRandomBox/index.css +++ b/src/components/Event/BodyRandomBox/index.css @@ -16,22 +16,6 @@ will-change: transform; } -.c2023fallevent-randombox-side-front { - transform: rotateX(-25deg) rotateY(-25deg) translateZ(250px); -} - -.c2023fallevent-randombox-side-back { - transform: rotateX(-25deg) rotateY(-25deg) rotateY(180deg) translateZ(250px); -} - -.c2023fallevent-randombox-side-left { - transform: rotateX(-25deg) rotateY(-25deg) rotateY(-90deg) translateZ(250px); -} - -.c2023fallevent-randombox-side-right { - transform: rotateX(-25deg) rotateY(-25deg) rotateY(90deg) translateZ(250px); -} - .c2023fallevent-randombox-side-top { transform-origin: 0px 0px 0px; top: -24px; @@ -61,6 +45,7 @@ } .c2023fallevent-randombox-open .c2023fallevent-emoji { + opacity: 0; animation: raiseEmoji 4s 4s ease-out forwards, rotateEmoji 5s 8s linear infinite; } @@ -82,7 +67,14 @@ } @keyframes raiseEmoji { + 0% { + opacity: 0; + } + 20% { + opacity: 0.5; + } 100% { + opacity: 1; transform: rotateX(-25deg) rotateY(-25deg) translate(calc(250px - 50%), -400px); } diff --git a/src/components/Event/BodyRandomBox/index.tsx b/src/components/Event/BodyRandomBox/index.tsx index dba986000..c4958d296 100644 --- a/src/components/Event/BodyRandomBox/index.tsx +++ b/src/components/Event/BodyRandomBox/index.tsx @@ -3,12 +3,11 @@ import { memo, useCallback, useEffect, useRef, useState } from "react"; import "./index.css"; -import { ReactComponent as BackPlane } from "static/events/2023fallRandomboxBack.svg"; -import { ReactComponent as FrontPlane } from "static/events/2023fallRandomboxFront.svg"; -import { ReactComponent as FrontPlaneLight } from "static/events/2023fallRandomboxFrontLight.svg"; -import { ReactComponent as LeftPlane } from "static/events/2023fallRandomboxLeft.svg"; -import { ReactComponent as RightPlane } from "static/events/2023fallRandomboxRight.svg"; -import { ReactComponent as RightPlaneLight } from "static/events/2023fallRandomboxRightLight.svg"; +import theme from "tools/theme"; + +import BackPlaneImage from "static/events/2023fallRandomboxBack.png"; +import FrontPlaneImage from "static/events/2023fallRandomboxFront.png"; +import FrontPlaneLightImage from "static/events/2023fallRandomboxFrontLight.png"; import { ReactComponent as TopPlane } from "static/events/2023fallRandomboxTop.svg"; type BodyRandomBoxProps = { @@ -41,8 +40,17 @@ const BodyRandomBox = ({ width: "100%", height: "100%", }; - const stylePlaneLRInversion = { - transform: "scaleX(-1)", + const stylePlaneFront = { + position: "absolute" as const, + top: "-32px", + left: "-84px", + width: "670px", + }; + const stylePlaneBack = { + position: "absolute" as const, + top: "-120px", + left: "-80px", + width: "664px", }; const stylePlaneFlash = css` animation: ${keyframes` @@ -73,44 +81,37 @@ const BodyRandomBox = ({ height: `${boxSize}px`, aspectRatio: 1, margin: `0 auto`, + ...theme.cursor(isBoxOpend), transform: `scale(${ (boxSize / 500) * 0.8 }) translateX(-160px) translateY(-70px)`, }} + onClick={onClickBox} > +
-
- - -
-
- -
-
- -
-
- - -
-
-
- {itemImageUrl ? ( - item - ) : ( - "๐ŸŽŸ" - )} -
+ {isBoxOpend && ( +
+ {itemImageUrl && ( + item + )} +
+ )}
+ +
); diff --git a/src/hooks/event/useEventEffect.ts b/src/hooks/event/useEventEffect.ts index 6c775ce3a..ce4df074b 100644 --- a/src/hooks/event/useEventEffect.ts +++ b/src/hooks/event/useEventEffect.ts @@ -4,7 +4,6 @@ import type { QuestId } from "types/event2023fall"; import { useValueRecoilState } from "hooks/useFetchRecoilState"; -// import { sendPopupInAppNotificationEventToFlutter } from "tools/sendEventToFlutter"; import toast from "tools/toast"; export const useEventEffect = () => { @@ -39,7 +38,6 @@ export const useEventEffect = () => { } ํš๋“ํ•˜์…จ์Šต๋‹ˆ๋‹ค.`, button: { text: "ํ™•์ธํ•˜๊ธฐ", path: "/event/2023fall-missions" }, }; - // sendPopupInAppNotificationEventToFlutter(notificationValue); toast(notificationValue); }); prevEventStatusRef.current = completedQuests; diff --git a/src/hooks/skeleton/useFlutterEventCommunicationEffect.tsx b/src/hooks/skeleton/useFlutterEventCommunicationEffect.tsx index 003f500d3..13722932c 100644 --- a/src/hooks/skeleton/useFlutterEventCommunicationEffect.tsx +++ b/src/hooks/skeleton/useFlutterEventCommunicationEffect.tsx @@ -156,17 +156,30 @@ export const sendTryNotificationEventToFlutter = async (): Promise => { } }; -/** ํด๋ฆฝ๋ณด๋“œ๋กœ ํ…์ŠคํŠธ ๋ณต์‚ฌ ์‹œ Flutter์—๊ฒŒ ์ด๋ฒคํŠธ๋ฅผ ์ „๋‹ฌํ•ฉ๋‹ˆ๋‹ค. */ -export const sendClipboardCopyEventToFlutter = async (value: string) => { - if (!isWebViewInFlutter) return true; +/** + * ํด๋ฆฝ๋ณด๋“œ๋กœ ํ…์ŠคํŠธ ๋ณต์‚ฌ ์‹œ Flutter์—๊ฒŒ ์ด๋ฒคํŠธ๋ฅผ ์ „๋‹ฌํ•ฉ๋‹ˆ๋‹ค. + * ๋ณต์‚ฌ ์—ฌ๋ถ€๋ฅผ ๋ฐ˜ํ™˜๋ฐ›์Šต๋‹ˆ๋‹ค. + */ +export const sendClipboardCopyEventToFlutter = async ( + value: string +): Promise => { + if (!isWebViewInFlutter) return false; try { - await window.flutter_inappwebview.callHandler("clipboard_copy", value); + const result = await window.flutter_inappwebview.callHandler( + "clipboard_copy", + value + ); + return !!result; } catch (e) { console.error(e); + return false; } }; -/** ์ธ์•ฑ ์•Œ๋ฆผ ๋ฐœ์ƒ ์‹œ Flutter์— ์ด๋ฒคํŠธ๋ฅผ ์ „๋‹ฌํ•ฉ๋‹ˆ๋‹ค. */ +/** + * ์ธ์•ฑ ์•Œ๋ฆผ ๋ฐœ์ƒ ์‹œ Flutter์— ์ด๋ฒคํŠธ๋ฅผ ์ „๋‹ฌํ•ฉ๋‹ˆ๋‹ค. + * ์ธ์•ฑ ์•Œ๋ฆผ ์„ฑ๊ณต ์—ฌ๋ถ€๋ฅผ ๋ฐ˜ํ™˜๋ฐ›์Šต๋‹ˆ๋‹ค. + */ export const sendPopupInAppNotificationEventToFlutter = async ( value: InAppNotification ): Promise => { diff --git a/src/pages/Event/Event2023FallLeaderboard.tsx b/src/pages/Event/Event2023FallLeaderboard.tsx index a5d52ea9f..f1c9eabf4 100644 --- a/src/pages/Event/Event2023FallLeaderboard.tsx +++ b/src/pages/Event/Event2023FallLeaderboard.tsx @@ -350,7 +350,7 @@ const Event2023FallLeaderboard = () => { >
โ€ข ๋ฆฌ๋”๋ณด๋“œ์˜ ์ถ”์ฒจ ํ™•๋ฅ ์€ ์ •ํ™•ํ•œ ํ™•๋ฅ ์ด ์•„๋‹Œ ๋‚ด๋ถ€ ๋ชจ๋ธ์„ ์‚ฌ์šฉํ•˜์—ฌ - ๊ณ„์‚ฐํ•œ ๊ทผ์‚ฌ๊ฐ’์ž…๋‹ˆ๋‹ค. + ๊ณ„์‚ฐํ•œ ๊ทผ์‚ฟ๊ฐ’์ž…๋‹ˆ๋‹ค.
โ€ข ๊ฒฝํ’ˆ ์ถ”์ฒจ ์ „์ฒด ์ฐธ์—ฌ์ž ์ˆ˜ : {totalUserAmount || 0}๋ช… diff --git a/src/static/events/2023fallRandomboxBack.png b/src/static/events/2023fallRandomboxBack.png new file mode 100644 index 000000000..1a0e91d26 Binary files /dev/null and b/src/static/events/2023fallRandomboxBack.png differ diff --git a/src/static/events/2023fallRandomboxBack.svg b/src/static/events/2023fallRandomboxBack.svg deleted file mode 100644 index 95de4dd6c..000000000 --- a/src/static/events/2023fallRandomboxBack.svg +++ /dev/null @@ -1,26 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/static/events/2023fallRandomboxFront.png b/src/static/events/2023fallRandomboxFront.png new file mode 100644 index 000000000..d6ebe5cf2 Binary files /dev/null and b/src/static/events/2023fallRandomboxFront.png differ diff --git a/src/static/events/2023fallRandomboxFront.svg b/src/static/events/2023fallRandomboxFront.svg deleted file mode 100644 index bce4e895e..000000000 --- a/src/static/events/2023fallRandomboxFront.svg +++ /dev/null @@ -1,34 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/static/events/2023fallRandomboxFrontLight.png b/src/static/events/2023fallRandomboxFrontLight.png new file mode 100644 index 000000000..58aa1d19d Binary files /dev/null and b/src/static/events/2023fallRandomboxFrontLight.png differ diff --git a/src/static/events/2023fallRandomboxFrontLight.svg b/src/static/events/2023fallRandomboxFrontLight.svg deleted file mode 100644 index b86e8f2a2..000000000 --- a/src/static/events/2023fallRandomboxFrontLight.svg +++ /dev/null @@ -1,56 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/static/events/2023fallRandomboxLeft.svg b/src/static/events/2023fallRandomboxLeft.svg deleted file mode 100644 index 036872eaa..000000000 --- a/src/static/events/2023fallRandomboxLeft.svg +++ /dev/null @@ -1,26 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/static/events/2023fallRandomboxRight.svg b/src/static/events/2023fallRandomboxRight.svg deleted file mode 100644 index cde82b1ae..000000000 --- a/src/static/events/2023fallRandomboxRight.svg +++ /dev/null @@ -1,34 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/static/events/2023fallRandomboxRightLight.svg b/src/static/events/2023fallRandomboxRightLight.svg deleted file mode 100644 index a49f70c81..000000000 --- a/src/static/events/2023fallRandomboxRightLight.svg +++ /dev/null @@ -1,51 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/tools/toast/index.tsx b/src/tools/toast/index.tsx index 206b9532e..1e8f7ad0d 100644 --- a/src/tools/toast/index.tsx +++ b/src/tools/toast/index.tsx @@ -10,6 +10,7 @@ import Button from "components/Button"; import "./index.css"; +// import { sendPopupInAppNotificationEventToFlutter } from "tools/sendEventToFlutter"; import theme from "tools/theme"; let isToastInitialized = false; @@ -114,7 +115,7 @@ const Toast = ({ ); }; -const toast = (value: InAppNotification) => { +const toast = async (value: InAppNotification) => { if (!isToastInitialized) { document.documentElement.style.setProperty( "--toastify-color-progress-light", @@ -126,7 +127,9 @@ const toast = (value: InAppNotification) => { ); } - return _toast(, { autoClose: 5000 }); + // const result = await sendPopupInAppNotificationEventToFlutter(value); + // if (!result) _toast(, { autoClose: 5000 }); + _toast(, { autoClose: 5000 }); }; export default toast;