feat: add openUrl app message (#54)

* feat: add openUrl app message

* feat: add openUrl function when clicking external url

Author: Najeong-Kim

src/entities/slope/model/model.d.ts

@@ -17,6 +17,7 @@ export type WebcamRaw = {
   number: number;
   description: string;
   url: string;
+  isExternal?: boolean;
 };
 
 export type SlopeResponse = {

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

@@ -24,7 +24,7 @@ interface SlopeWebcamProps {
 
 const SlopeCamera = ({
   isWebview = false,
-  webcam: { scale, name, position, url, id },
+  webcam: { scale, name, position, url, id, isExternal },
   webcamScale,
   isOpen,
   containerRef,
@@ -45,8 +45,6 @@ const SlopeCamera = ({
   }, [id, updateCameraPosition, cameraRef]);
 
   const openVideo = () => {
-    setOpenCamera();
-
     if (!url) {
       postAppMessage('showToast', '선택한 웹캠은 아직 준비중 이에요', isWebview, (message) =>
         toast(
@@ -55,6 +53,13 @@ const SlopeCamera = ({
           </>
         )
       );
+      return;
+    }
+
+    if (isExternal) {
+      postAppMessage('openUrl', url, isWebview, () => window.open(url, '_blank'));
+    } else {
+      setOpenCamera();
     }
   };
 

src/shared/lib/postAppMessage.ts

@@ -1,10 +1,11 @@
-type AppMessageMethod = 'showToast' | 'setHeight';
+type AppMessageMethod = 'showToast' | 'setHeight' | 'openUrl';
 
 declare global {
   interface Window {
     Android: {
       showToast: (message: string) => void;
       setHeight: (message: string) => void;
+      openUrl: (message: string) => void;
     };
     webkit: {
       messageHandlers: {
@@ -28,6 +29,8 @@ const postAppMessage = (method: AppMessageMethod, message: string, isWebview: bo
           return window.Android.showToast(message);
         case 'setHeight':
           return window.Android.setHeight(message);
+        case 'openUrl':
+          return window.Android.openUrl(message);
       }
     } else if (iphone !== null) {
       return window.webkit.messageHandlers.weski.postMessage({ method: method, message: message });