CorkCharge-AN/webview-bridge-example.html at develop · CorkCharge/CorkCharge-AN · 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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>웹뷰 JavaScript Bridge 예제</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            padding: 20px;
            max-width: 600px;
            margin: 0 auto;
        }
        button {
            display: block;
            width: 100%;
            padding: 15px;
            margin: 10px 0;
            font-size: 16px;
            border: none;
            border-radius: 8px;
            background: #007AFF;
            color: white;
            cursor: pointer;
        }
        button:active {
            background: #0051D5;
        }
        .info {
            background: #f0f0f0;
            padding: 15px;
            border-radius: 8px;
            margin: 20px 0;
        }
        code {
            background: #e8e8e8;
            padding: 2px 6px;
            border-radius: 4px;
            font-family: 'Monaco', 'Courier New', monospace;
        }
    </style>
</head>
<body>
    <h1>웹뷰 Bridge 예제</h1>

    <div class="info">
        <h3>사용 방법</h3>
        <p>아래 버튼들을 클릭하면 앱으로 메시지가 전송됩니다.</p>
        <p>메시지는 JSON 형식으로 <code>window.kmpJsBridge.callNative()</code>를 통해 전송됩니다.</p>
    </div>

    <h2>기본 이벤트</h2>
    <button onclick="sendSimpleMessage('RESERVATION_CLICK')">예약 화면으로 이동</button>
    <button onclick="sendSimpleMessage('LOGIN_REQUIRED')">로그인 화면으로 이동</button>

    <h2>플랫폼 기능</h2>
    <button onclick="callPhone()">전화 걸기</button>
    <button onclick="shareContent()">공유하기</button>
    <button onclick="openBrowser()">외부 브라우저 열기</button>

    <h2>화면 이동</h2>
    <button onclick="navigateToScreen('reservation_list')">예약 목록 화면</button>
    <button onclick="navigateToScreen('login')">로그인 화면</button>

    <script>
        // 간단한 문자열 메시지 전송 (sendToNative 메소드 사용)
        function sendSimpleMessage(message) {
            if (window.kmpJsBridge) {
                const data = JSON.stringify({
                    action: message
                });
                window.kmpJsBridge.callNative(
                    "sendToNative",
                    data,
                    function(response) {
                        console.log('앱 응답:', response);
                    }
                );
                console.log('메시지 전송:', message);
            } else {
                console.warn('kmpJsBridge를 사용할 수 없습니다.');
            }
        }

        // 전화 걸기
        function callPhone() {
            if (window.kmpJsBridge) {
                const data = JSON.stringify({
                    phoneNumber: '010-1234-5678'
                });
                window.kmpJsBridge.callNative(
                    "callPhone",
                    data,
                    function(response) {
                        console.log('전화 걸기 응답:', response);
                    }
                );
            }
        }

        // 공유하기
        function shareContent() {
            if (window.kmpJsBridge) {
                const data = JSON.stringify({
                    title: '코르크차지',
                    text: '코르크차지에서 최고의 콜키지 맛집을 찾아보세요!',
                    url: 'https://corkcharge.com'
                });
                window.kmpJsBridge.callNative(
                    "share",
                    data,
                    function(response) {
                        console.log('공유하기 응답:', response);
                    }
                );
            }
        }

        // 외부 브라우저로 열기
        function openBrowser() {
            if (window.kmpJsBridge) {
                const data = JSON.stringify({
                    url: 'https://corkcharge.com'
                });
                window.kmpJsBridge.callNative(
                    "openBrowser",
                    data,
                    function(response) {
                        console.log('브라우저 열기 응답:', response);
                    }
                );
            }
        }

        // 앱 내부 화면 이동
        function navigateToScreen(screenName) {
            if (window.kmpJsBridge) {
                const data = JSON.stringify({
                    screen: screenName
                });
                window.kmpJsBridge.callNative(
                    "navigate",
                    data,
                    function(response) {
                        console.log('화면 이동 응답:', response);
                    }
                );
            }
        }

        // 페이지 로드 시 kmpJsBridge 확인
        window.addEventListener('load', function() {
            if (window.kmpJsBridge) {
                console.log('✅ JavaScript Bridge가 준비되었습니다.');
            } else {
                console.warn('⚠️ JavaScript Bridge를 사용할 수 없습니다. 웹 브라우저에서 실행 중입니다.');
            }
        });
    </script>
</body>
</html>