feat(CLAP-180): flow 재조정 및 기기별 애니메이션 구분

packages/service/src/common/components/GlobalNavigationBar/GlobalNavs/GlobalNavs.tsx

@@ -83,7 +83,7 @@ const GlobalNavs = ({ isOpen, setIsOpen }: IGlobalNavsProps) => {
             css={linkStyles}
             onClick={() => handleNavigation(LOTTER_APPLY_INFO_PAGE_ROUTE)}
           >
-            응모 내역 확인
+            기대평 / 공유
           </div>
         </>
       )}

packages/service/src/common/utils/deviceChecker.ts

@@ -0,0 +1,55 @@
+export type Device =
+  | "ANDROID"
+  | "IPHONE"
+  | "CHROME"
+  | "SAFARI"
+  | "EDGE"
+  | "EDGE_CHROMIUM"
+  | "OPERA"
+  | "FIREFOX"
+  | "IE"
+  | "OTHER";
+
+export const checkDeviceType = (): Device => {
+  const agent = navigator.userAgent.toLowerCase();
+
+  switch (true) {
+    case agent.indexOf("android") > -1:
+      return "ANDROID";
+
+    case agent.indexOf("iphone") > -1:
+    case agent.indexOf("ipad") > -1:
+    case agent.indexOf("ipod") > -1:
+      return "IPHONE";
+
+    case agent.indexOf("edg/") > -1:
+      return "EDGE_CHROMIUM"; // Edge (Chromium-based)
+
+    case agent.indexOf("edge") > -1:
+      return "EDGE"; // MS Edge
+
+    case agent.indexOf("opr") > -1:
+      return "OPERA"; // Opera
+
+    case agent.indexOf("chrome") > -1:
+      return "CHROME"; // Chrome
+
+    case agent.indexOf("trident") > -1:
+      return "IE"; // Internet Explorer
+
+    case agent.indexOf("firefox") > -1:
+      return "FIREFOX"; // Mozilla Firefox
+
+    case agent.indexOf("safari") > -1:
+      return "SAFARI"; // Safari
+
+    default:
+      return "OTHER";
+  }
+};
+
+export const isCardAnimationSupportedOnDevice = (): boolean => {
+  const deviceType = checkDeviceType();
+  if (deviceType === "IPHONE" || deviceType === "SAFARI") return false;
+  return true;
+};

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

@@ -122,6 +122,33 @@ export const cardBaseStyles = css`
     animation: rotateCard 3s ease forwards;
   }
 
+  &.iphoneFlipped {
+    animation: rotateShake 1s ease forwards;
+  }
+
+  @keyframes rotateShake {
+    0% {
+      transform: rotate(0deg);
+      opacity: 1;
+    }
+    25% {
+      transform: rotate(5deg);
+      opacity: 0.7;
+    }
+    50% {
+      transform: rotate(-5deg);
+      opacity: 0.5;
+    }
+    75% {
+      transform: rotate(5deg);
+      opacity: 0.7;
+    }
+    100% {
+      transform: rotate(0deg);
+      opacity: 1;
+    }
+  }
+
   @-webkit-keyframes rotateCard {
     0% {
       -webkit-transform: perspective(800px) rotateY(0deg) rotateX(0deg) scale(1);

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

@@ -11,6 +11,7 @@ import {
 } from "@service/common/utils/confettiCrafter";
 import { apiPostParts } from "@service/apis/partsEvent";
 import { MODAL_CONTENT_NO_REMAINING_CHANCES } from "@service/common/components/ModalContainer/content/modalContent";
+import { isCardAnimationSupportedOnDevice } from "@service/common/utils/deviceChecker";
 
 interface CardProps {
   backImage: string;
@@ -62,9 +63,11 @@ export const PartsCard = ({
   const cardRef = useRef<HTMLDivElement>(null);
   const styleRef = useRef<HTMLStyleElement>(document.createElement("style"));
   const [isFlipped, setIsFlipped] = useState(false);
+  const [isIphoneFlipped, setIsIphoneFlipped] = useState(false);
   const [isFrontShow, setIsFrontShow] = useState(false);
   const { getIsLogin } = useAuth();
   const { openModal } = useModal();
+  const isCardAnimationSupported = isCardAnimationSupportedOnDevice();
 
   const handleMouseMove = (e: React.MouseEvent | React.TouchEvent) => {
     const $card = cardRef.current;
@@ -124,6 +127,7 @@ export const PartsCard = ({
 
   const handleClick = () => {
     if (isFlipped) return;
+    if (isIphoneFlipped) return;
     if (!getIsLogin()) return;
     if (remainChance < 1) {
       openModal({
@@ -139,17 +143,23 @@ export const PartsCard = ({
       craftFireworks(1);
       return;
     }
-    setIsFlipped(true);
+
+    if (isCardAnimationSupported) setIsFlipped(true);
+    else setIsIphoneFlipped(true);
 
     apiPostParts().then((data) => {
       setPartsInfo(data);
 
-      setTimeout(() => {
-        craftSideCannons(1);
-        setIsFrontShow(true);
-        setIsFlipped(false);
-        setIsPickComplete(true);
-      }, 3000);
+      setTimeout(
+        () => {
+          craftSideCannons(1);
+          setIsFrontShow(true);
+          setIsFlipped(false);
+          setIsIphoneFlipped(false);
+          setIsPickComplete(true);
+        },
+        isCardAnimationSupported ? 3000 : 1000,
+      );
     });
   };
 
@@ -161,7 +171,7 @@ export const PartsCard = ({
 
   return (
     <CardWrapper
-      className={`card ${isFlipped ? "flipped" : ""}`}
+      className={`card ${isFlipped ? "flipped" : ""} ${isIphoneFlipped ? "iphoneFlipped" : ""}`}
       ref={cardRef}
       onClick={handleClick}
       onMouseMove={handleMouseMove}

packages/service/src/constants/routes.ts

@@ -16,6 +16,5 @@ export const PARTS_COLLECTION_PAGE_ROUTE = "/parts-collection" as const;
 export const SHARE_PAGE_ROUTE = "/share/:linkKey" as const;
 export const N_QUIZ_EVENT_PAGE_WINNER_APLLY_PAGE_ROUTE =
   "/quiz-event-apply" as const;
-export const LOTTER_APPLY_FINISH_PAGE_ROUTE = "/lottery/apply-finish" as const;
 export const LOTTER_APPLY_INFO_PAGE_ROUTE = "/lottery/apply-info" as const;
 export const NOT_FOUND_PAGE_ROUTE = "*" as const;