#658.1 랜덤박스 성능 개선

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);
   }

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}
       >
+        <img src={BackPlaneImage} alt="" css={stylePlaneBack} />
         <div
           className={[
             "c2023fallevent-randombox",
             ...(isBoxOpend ? ["c2023fallevent-randombox-open"] : []),
           ].join(" ")}
-          onClick={onClickBox}
         >
-          <div className="c2023fallevent-randombox-side c2023fallevent-randombox-side-front">
-            <FrontPlane css={stylePlane} />
-            <FrontPlaneLight css={[stylePlane, stylePlaneFlash]} />
-          </div>
-          <div className="c2023fallevent-randombox-side c2023fallevent-randombox-side-back">
-            <BackPlane css={{ ...stylePlane, ...stylePlaneLRInversion }} />
-          </div>
-          <div className="c2023fallevent-randombox-side c2023fallevent-randombox-side-left">
-            <LeftPlane css={{ ...stylePlane, ...stylePlaneLRInversion }} />
-          </div>
-          <div className="c2023fallevent-randombox-side c2023fallevent-randombox-side-right">
-            <RightPlane css={stylePlane} />
-            <RightPlaneLight css={[stylePlane, stylePlaneFlash]} />
-          </div>
           <div className="c2023fallevent-randombox-side c2023fallevent-randombox-side-top">
             <TopPlane css={stylePlane} />
           </div>
-          <div className="c2023fallevent-randombox-side c2023fallevent-randombox-side-bottom" />
-          <div className="c2023fallevent-emoji">
-            {itemImageUrl ? (
-              <img src={itemImageUrl} alt="item" css={styleItem} />
-            ) : (
-              "🎟"
-            )}
-          </div>
+          {isBoxOpend && (
+            <div className="c2023fallevent-emoji">
+              {itemImageUrl && (
+                <img src={itemImageUrl} alt="item" css={styleItem} />
+              )}
+            </div>
+          )}
         </div>
+        <img src={FrontPlaneImage} alt="" css={stylePlaneFront} />
+        <img
+          src={FrontPlaneLightImage}
+          alt=""
+          css={[stylePlaneFront, stylePlaneFlash]}
+        />
       </div>
     </div>
   );

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;

src/hooks/skeleton/useFlutterEventCommunicationEffect.tsx

@@ -156,17 +156,30 @@ export const sendTryNotificationEventToFlutter = async (): Promise<boolean> => {
   }
 };
 
-/** 클립보드로 텍스트 복사 시 Flutter에게 이벤트를 전달합니다. */
-export const sendClipboardCopyEventToFlutter = async (value: string) => {
-  if (!isWebViewInFlutter) return true;
+/**
+ * 클립보드로 텍스트 복사 시 Flutter에게 이벤트를 전달합니다.
+ * 복사 여부를 반환받습니다.
+ */
+export const sendClipboardCopyEventToFlutter = async (
+  value: string
+): Promise<boolean> => {
+  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<boolean> => {

src/pages/Event/Event2023FallLeaderboard.tsx

@@ -350,7 +350,7 @@ const Event2023FallLeaderboard = () => {
             >
               <div css={{ color: theme.purple_disabled, ...theme.font12 }}>
                 • 리더보드의 추첨 확률은 정확한 확률이 아닌 내부 모델을 사용하여
-                계산한 근사값입니다.
+                계산한 근삿값입니다.
               </div>
               <div css={{ color: theme.purple_disabled, ...theme.font12 }}>
                 • 경품 추첨 전체 참여자 수 : {totalUserAmount || 0}명