hotfix: 아이폰에서 카드 뽑기 애니메이션 미작동 및 파츠컬렉션 안내 아이콘

packages/service/src/components/ClickInduceIcon/ClickInduceIcon.tsx → packages/service/src/common/components/ClickInduceIcon/ClickInduceIcon.tsx

@@ -2,14 +2,25 @@ import { motion } from "framer-motion";
 import { css } from "@emotion/react";
 import { PiMouseLeftClickFill } from "react-icons/pi";
 import { theme } from "@watermelon-clap/core/src/theme";
+import { mobile } from "@service/common/responsive/responsive";
+import { useMobile } from "@service/common/hooks/useMobile";
 
-export const ClickInduceIcon = () => {
+export interface ClickInduceIconProps {
+  text: string;
+}
+
+export const ClickInduceIcon = ({ text }: ClickInduceIconProps) => {
+  const isMobile = useMobile();
   return (
     <motion.div
       css={css`
         position: relative;
-        top: 60px;
+        top: 10px;
         z-index: 2;
+
+        ${mobile(css`
+          top: 20px;
+        `)}
       `}
       transition={{
         duration: 0.8,
@@ -18,7 +29,7 @@ export const ClickInduceIcon = () => {
         ease: "easeInOut",
       }}
       animate={{
-        y: -100,
+        y: isMobile ? -70 : -100,
       }}
     >
       <div
@@ -31,16 +42,20 @@ export const ClickInduceIcon = () => {
           `,
         ]}
       >
-        <PiMouseLeftClickFill size={40} />
+        <PiMouseLeftClickFill size={isMobile ? 30 : 40} />
         <h4
           css={[
             theme.font.pcpB,
             css`
               margin-top: 4px;
+
+              ${mobile(css`
+                font-size: 12px;
+              `)}
             `,
           ]}
         >
-          CLICK
+          {text}
         </h4>
       </div>
     </motion.div>

packages/service/src/components/partsCollection/PinContainer/PinContainer.tsx

@@ -3,6 +3,7 @@ import { Pin } from "./Pin";
 import { useMobile } from "@service/common/hooks/useMobile";
 import { ICustomCardProps } from "@service/components/partsCollection/CustomCard/CustomCard";
 import * as styles from "./PinContainer.css";
+import { ClickInduceIcon } from "@service/common/components/ClickInduceIcon";
 
 interface PinContainerProps {
   children: React.ReactNode;
@@ -82,6 +83,10 @@ export const PinContainer = ({
             customCss={styles.pinSpoilerCustom}
           />
         )}
+
+        {perspectiveOpacity === 0 && (
+          <ClickInduceIcon text={isMobile ? "CLICK" : "HOVER"} />
+        )}
       </div>
     </div>
   );

packages/service/src/components/partsPick/PartsCard/PartsCard.css.ts

@@ -59,8 +59,8 @@ export const cardBaseStyles = css`
 
   &:after {
     opacity: 1;
-    background-image: url("https://assets.codepen.io/13471/sparkles.gif"),
-      url("https://assets.codepen.io/13471/holo.png"),
+    background-image: url("/images/parts/sparkles.gif"),
+      url("/images/parts/holo.png"),
       linear-gradient(
         125deg,
         #ff008450 15%,
@@ -122,29 +122,34 @@ export const cardBaseStyles = css`
     animation: rotateCard 3s ease forwards;
   }
 
-  @keyframes rotateCard {
+  @-webkit-keyframes rotateCard {
     0% {
-      transform: perspective(800px) rotateY(0deg) rotateX(0deg) scale(1);
+      -webkit-transform: perspective(800px) rotateY(0deg) rotateX(0deg) scale(1);
       opacity: 1;
     }
     25% {
-      transform: perspective(800px) rotateY(20deg) rotateX(10deg) scale(1.1);
+      -webkit-transform: perspective(800px) rotateY(20deg) rotateX(10deg)
+        scale(1.1);
       opacity: 0.8;
     }
     50% {
-      transform: perspective(800px) rotateY(-20deg) rotateX(-10deg) scale(1.05);
+      -webkit-transform: perspective(800px) rotateY(-20deg) rotateX(-10deg)
+        scale(1.05);
       opacity: 0.6;
     }
     75% {
-      transform: perspective(800px) rotateY(0deg) rotateX(5deg) scale(1.1);
+      -webkit-transform: perspective(800px) rotateY(0deg) rotateX(5deg)
+        scale(1.1);
       opacity: 0.8;
     }
     95% {
-      transform: perspective(800px) rotateY(720deg) rotateX(0deg) scale(1.2);
+      -webkit-transform: perspective(800px) rotateY(720deg) rotateX(0deg)
+        scale(1.2);
       opacity: 0.9;
     }
     100% {
-      transform: perspective(800px) rotateY(720deg) rotateX(0deg) scale(1);
+      -webkit-transform: perspective(800px) rotateY(720deg) rotateX(0deg)
+        scale(1);
       opacity: 1;
     }
   }

packages/service/src/components/partsPick/PartsCard/PartsCard.tsx

@@ -167,8 +167,10 @@ export const PartsCard = ({
       onMouseMove={handleMouseMove}
       onMouseLeave={handleMouseOut}
       onTouchMove={handleMouseMove}
-      onTouchEnd={handleMouseOut}
-      onTouchCancel={handleMouseOut}
+      onTouchEnd={() => {
+        handleMouseOut();
+        handleClick();
+      }}
       color1={color1}
       color2={color2}
     >

packages/service/src/pages/PartsPick/PartsPick.tsx

@@ -15,7 +15,7 @@ import { LOTTER_APPLY_FINISH_PAGE_ROUTE } from "@service/constants/routes";
 import { useSuspenseQuery } from "@tanstack/react-query";
 import { getAccessToken } from "@watermelon-clap/core/src/utils";
 import { IParts } from "@watermelon-clap/core/src/types";
-import { ClickInduceIcon } from "@service/components/ClickInduceIcon";
+import { ClickInduceIcon } from "@service/common/components/ClickInduceIcon";
 import { MODAL_CONTENT_NO_REMAINING_CHANCES } from "@service/common/components/ModalContainer/content/modalContent";
 import { Helmet } from "react-helmet";
 
@@ -78,7 +78,7 @@ export const PartsPick = () => {
           setPartsInfo={setPartsInfo}
         />
 
-        {!partsInfo && <ClickInduceIcon />}
+        {!partsInfo && <ClickInduceIcon text="CLICK" />}
 
         <Space size={isMobile ? 4 : 6} />
         {isPickComplete && (