frontend-app/App.js at master · OnlineMemo/frontend-app · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
import * as React from 'react';
import { WebView } from 'react-native-webview';
import { StyleSheet, BackHandler, View } from 'react-native';
import Constants from 'expo-constants';
import { useEffect, useRef } from 'react';
import * as Clipboard from 'expo-clipboard';
import { useSafeAreaInsets, SafeAreaProvider } from 'react-native-safe-area-context';
import { StatusBar } from 'expo-status-bar';

// !!! 'react-native-safe-area-context' 도입으로 미사용 !!!
// const styles = StyleSheet.create({
//   container: {
//     flex: 1,
//     marginTop: Constants.statusBarHeight,
//   },
// });

function WebViewScreen() {
  const webview = useRef(null);
  const insets = useSafeAreaInsets();

  const onAndroidBackPress = () => {
    if (webview.current) {
      webview.current.goBack();
      return true;
    }
    return false;
  };

  const handleWebViewMessage = async (event) => {
    const clipboardData = event.nativeEvent.data;
    // 모바일 클립보드에 데이터 저장
    await Clipboard.setStringAsync(clipboardData);
  };

  useEffect(() => {
    // Android 하드웨어 뒤로 가기 버튼 처리를 위한 이벤트 리스너 추가
    BackHandler.addEventListener('hardwareBackPress', onAndroidBackPress);
    // 언마운트 시 해당 이벤트 리스너 제거
    return () => {
      BackHandler.removeEventListener('hardwareBackPress', onAndroidBackPress);
    };
  }, []);

  return (
    <View style={{
      flex: 1,
      paddingTop: insets.top,
      paddingBottom: insets.bottom,
      paddingLeft: insets.left,
      paddingRight: insets.right,
    }}>
      <StatusBar style="dark" translucent backgroundColor="transparent" />
      <WebView
        style={{ flex: 1 }}
        source={{ uri: 'https://www.onlinememo.kr' }}
        ref={webview}
        textZoom={100}
        onMessage={handleWebViewMessage}
      />
    </View>
  );
}

export default function App() {
  return (
    <SafeAreaProvider>
      <WebViewScreen />
    </SafeAreaProvider>
  );
}

/*
< 플레이스토어 AAB 빌드 방법 >

eas build --platform android --profile production
eas build --platform android --profile production --clear-cache  // 설정변경 후 적용 빌드의 경우

< apk 빌드 방법 >

eas build --platform android --profile preview
eas build --platform android --profile preview --clear-cache  // 설정변경 후 적용 빌드의 경우

< 번외: expo SDK 업그레이드 >

npm install expo@latest
npx expo install --fix
npx expo-doctor

< 번외: expo cli 업그레이드 >

expo-cli upgrade
*/

/*

< Android API/SDK 타겟팅 버전 업그레이드 (예시) >

1. app.json 파일
"version": "2.1.0" -> "2.2.0"
"versionCode": 6 -> 7
"compileSdkVersion": 35 -> 36
"targetSdkVersion": 35 -> 36
"buildToolsVersion": "35.0.0" -> "36.0.0"

2. 터미널 입력 (expo 세팅)
npm install expo@latest
npx expo install --fix
npx expo-doctor

3. 터미널 입력 (expo 빌드)
eas build --platform android --profile production --clear-cache
eas build --platform android --profile preview --clear-cache

*/