Merge branch 'develop' into feat/#60-home-layout

custom.d.ts

@@ -0,0 +1,3 @@
+declare interface Window {
+  ReactNativeWebView: any;
+}

package.json

@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",

src/components/Post/PostButton.tsx

@@ -1,14 +1,9 @@
 import styled from 'styled-components';
 import ButtonWithTip from '../common/Button/ButtonWithTip/ButtonWithTip';
-import { SetStateAction, useState } from 'react';
-import {
-  copyText,
-  downloadImage,
-  getImageFullUrl,
-  getPackageName,
-  isAndroid,
-} from '../../utils/utils';
+import { useEffect, useState } from 'react';
+import { copyText, downloadImage, getImageFullUrl, isReactNative } from '../../utils/utils';
 import { POSTING_CHANNEL } from '../../core/Post';
+import { postMessage } from '../../utils/native';
 
 interface PostButtonProps {
   image?: string;
@@ -31,15 +26,19 @@ export default function PostButton({ image, text, sns, onChange }: PostButtonPro
       return;
     }
 
-    if (onChange) onChange(true);
     const url = getImageFullUrl(image);
     console.log('🔗 이미지 URL', url);
 
-    const saveFunc = isAndroid() ? saveImage : downloadImage;
-    Promise.all([saveFunc(url), copyText(text)])
+    if (isReactNative()) handleSaveAllWithRN(url, text);
+    else handleSaveAllWithWeb(url, text);
+  }
+
+  function handleSaveAllWithWeb(url: string, text: string) {
+    if (onChange) onChange(true);
+
+    Promise.all([downloadImage(url), copyText(text)])
       .then((res) => {
         console.log('✅ saveFunc -> ', res);
-        setFile(res[0] as SetStateAction<string>);
 
         alert('성공하였습니다');
         setIsSaved(true);
@@ -53,24 +52,45 @@ export default function PostButton({ image, text, sns, onChange }: PostButtonPro
       });
   }
 
-  function saveImage(url: string) {
-    return new Promise<String>((resolve, reject) => {
-      const uri = Android.downloadImage(url);
-      if (uri === '') reject();
-      else resolve(uri);
-    });
+  function handleSaveAllWithRN(url: string, text: string) {
+    postMessage('saveAll', { url: url, text: text });
   }
 
+  useEffect(() => {
+    window.addEventListener('message', handleMessageFromApp);
+
+    return () => {
+      window.removeEventListener('message', handleMessageFromApp);
+    };
+  }, []);
+
+  const handleMessageFromApp = (event: MessageEvent) => {
+    const { type, data } = JSON.parse(event.data);
+    console.log(`{${type}} ${data}`);
+
+    if (type === 'saveAllResult') {
+      if (data.success) {
+        setFile(data.imagePath);
+        setIsSaved(true);
+
+        console.log('이미지 저장 성공. 이미지 경로:', data.imagePath);
+      } else {
+        alert('이미지 저장에 실패하였습니다.');
+        console.log('이미지 저장 실패');
+      }
+    }
+  };
+
   // (2) SNS 공유하기
-  // Android인 경우, openApp() / else인 경우, 지원 X
+  // isReactNative가 아닌 경우, 지원 X
   function handleShare() {
     try {
       if (!sns) throw new Error('공유할 SNS가 선택되지 않았습니다.');
-      if (!isAndroid()) throw new Error('공유하기 기능을 지원하지 않는 기기입니다.');
+      if (!isReactNative()) throw new Error('공유하기 기능을 지원하지 않는 기기입니다.');
       if (file == '') throw new Error('이미지를 다시 저장해 주세요.');
 
-      if (sns == POSTING_CHANNEL.INSTAGRAM) Android.shareInsta(file);
-      else Android.openApp(getPackageName(sns));
+      if (sns == POSTING_CHANNEL.INSTAGRAM) postMessage('shareInsta', { filePath: file });
+      else alert('지원하지 않는 SNS입니다. ');
     } catch (e) {
       alert(e);
     }

src/utils/native.ts

@@ -0,0 +1,12 @@
+import { isAndroid, isIos } from './utils';
+
+/**
+ *
+ * @param type
+ * @param data
+ */
+export function postMessage(type: string, data: any) {
+  console.log(`[* >>> *] aos - ${isAndroid()} / ios - ${isIos}`);
+  console.log(`[* >>> *] ${type}  `, data);
+  window.ReactNativeWebView?.postMessage(JSON.stringify({ type, data }));
+}

src/utils/utils.ts

@@ -10,6 +10,23 @@ export function isAndroid() {
   }
 }
 
+/**
+ * Ios App 확인 함수 (sodong-ios)
+ */
+export function isIos() {
+  if (window) {
+    const userAgent = window.navigator.userAgent.toLowerCase();
+    return /sodong_ios/i.test(userAgent);
+  }
+}
+
+/**
+ * 웹뷰로 띄워졌는지 확인하는 함수
+ */
+export function isReactNative() {
+  return window.ReactNativeWebView;
+}
+
 /**
  * 텍스트 복사 함수
  */
@@ -23,7 +40,7 @@ export function copyText(text: string): Promise<void> {
         resolve();
       });
     } catch (e) {
-      reject();
+      reject(e);
     }
   });
 }