hotfix: fix toast condition (#49)

Author: Najeong-Kim

src/features/slop/ui/slop-camera.tsx

@@ -13,6 +13,7 @@ import calculateWebcamScaleRatio from '../lib/calculateWebcamScale';
 import SlopVideo from './slop-video';
 
 interface SlopWebcamProps {
+  isWebview?: boolean;
   webcam: Webcam;
   webcamScale: number;
   isOpen: boolean;
@@ -22,6 +23,7 @@ interface SlopWebcamProps {
 }
 
 const SlopCamera = ({
+  isWebview = false,
   webcam: { scale, name, position, src, id },
   webcamScale,
   isOpen,
@@ -46,7 +48,7 @@ const SlopCamera = ({
     setOpenCamera();
 
     if (!src) {
-      postAppMessage('선택한 웹캠은 아직 준비중 이에요', (message) =>
+      postAppMessage('선택한 웹캠은 아직 준비중 이에요', isWebview, (message) =>
         toast(
           <>
             <NeutralFace /> {message}

src/shared/lib/postAppMessage.ts

@@ -13,22 +13,26 @@ declare global {
   }
 }
 
-const postAppMessage = (message: string, showToast: (message: string) => void) => {
+const postAppMessage = (message: string, isWebview: boolean, showToast: (message: string) => void) => {
   const userAgent = navigator.userAgent.toLowerCase();
   const android = userAgent.match(/android/i);
   const iphone = userAgent.match(/iphone/i);
 
-  if (android !== null) {
-    return window.Android.showToast(message);
-  } else if (iphone !== null) {
-    if (window.webkit.messageHandlers.weski) {
-      window.webkit.messageHandlers.weski.postMessage({ method: "showToast", message: message });
+  if (isWebview) {
+    if (android !== null) {
+      return window.Android.showToast(message);
+    } else if (iphone !== null) {
+      if (window.webkit.messageHandlers.weski) {
+        window.webkit.messageHandlers.weski.postMessage({ method: "showToast", message: message });
+      } else {
+        console.error("Weski bridge is not available.");
+      }
     } else {
-      console.error("Weski bridge is not available.");
+      return showToast(message);
     }
-  } else {
-    return showToast(message);
   }
+  
+  return showToast(message);
 }
 
 export default postAppMessage;

src/views/webcam/ui/webcam-mobile-map-page.tsx

@@ -37,6 +37,7 @@ const WebCamMobileMapPage = ({ data }: { resortId?: number; data: ResortInfo })
       <WebcamMap
         ref={ref}
         style={style}
+        isWebview
         containerRef={containerRef}
         slops={data.slops}
         webcams={data.webcams}

src/widgets/webcam/ui/webcam-map.tsx

@@ -7,6 +7,7 @@ import type { Position, ResortInfo } from '@/entities/slop/model/model';
 import { cn } from '@/shared/lib';
 
 interface WebcamMapProps extends ResortInfo {
+  isWebview?: boolean;
   containerRef: React.RefObject<HTMLElement>;
   onCameraClick: ({ scale, id }: { scale: number; id: string }) => void;
   style: {
@@ -19,7 +20,16 @@ interface WebcamMapProps extends ResortInfo {
 
 const WebcamMap = forwardRef<HTMLDivElement, WebcamMapProps>(
   (
-    { slops, webcams, style, MapComponent, onCameraClick, containerRef, updateCameraPosition },
+    {
+      isWebview,
+      slops,
+      webcams,
+      style,
+      MapComponent,
+      onCameraClick,
+      containerRef,
+      updateCameraPosition,
+    },
     ref
   ) => {
     const { selectedSlop } = useSlopStore();
@@ -33,6 +43,7 @@ const WebcamMap = forwardRef<HTMLDivElement, WebcamMapProps>(
 
             return (
               <SlopCamera
+                isWebview={isWebview}
                 key={webcam.id}
                 webcam={webcam}
                 webcamScale={style.scale.animation.to as number}