add :: 데이터 보내기 성공

+ useEffect 땜에 첫 랜더링이 안되는 에러 onLoad써서 처리함

App.tsx

@@ -1,28 +1,46 @@
-import * as React from "react";
-import { WebView } from "react-native-webview";
-import { StyleSheet, View, StatusBar } from "react-native";
-import Constants from "expo-constants";
+import React, { useEffect, useRef } from 'react';
+import { WebView, WebViewMessageEvent } from 'react-native-webview';
+import { StyleSheet, View, StatusBar } from 'react-native';
+import Constants from 'expo-constants';
 
-export default function App() {
-  return (
-    <>
-      <View style={styles.statusbar}>
-        <StatusBar backgroundColor="transparent" barStyle="dark-content" translucent={true} />
-      </View>
-      <WebView
-        style={styles.container}
-        source={{ uri: "http://localhost:3000/auth" }}
-        allowsBackForwardNavigationGestures={true}
-      />
-    </>
-  );
+export default function App(): React.ReactElement {
+	const statusBarHeight: number = Constants.statusBarHeight;
+	const webViewRef = useRef<WebView>(null);
+
+	const handleWebViewLoad = () => {
+		webViewRef.current?.postMessage(statusBarHeight.toString());
+	};
+
+	useEffect(() => {
+		if (webViewRef.current) {
+			webViewRef.current.postMessage(statusBarHeight.toString());
+		}
+	}, [statusBarHeight]);
+
+	return (
+		<>
+			<View style={styles.statusbar}>
+				<StatusBar
+					backgroundColor='transparent'
+					barStyle='dark-content'
+					translucent={true}
+				/>
+			</View>
+			<WebView
+				style={styles.container}
+				source={{ uri: 'http://localhost:3000/auth' }}
+				ref={webViewRef}
+				onLoad={handleWebViewLoad}
+			/>
+		</>
+	);
 }
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  statusbar: {
-    backgroundColor: 'transparent',
-  }
+	container: {
+		flex: 1,
+	},
+	statusbar: {
+		backgroundColor: 'transparent',
+	},
 });