invite-page/index.html at main · Nompangs/invite-page · 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
162
163
164
165
166
167
168
169
170
171
172
173
174
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>모멘티 초대</title>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap" rel="stylesheet">
  <style>
    body {
      font-family: 'Noto Sans KR', sans-serif;
      text-align: center;
      padding: 2rem;
      margin: 0;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
      color: #2c3e50;
    }

    .container {
      background: white;
      padding: 3rem;
      border-radius: 20px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.1);
      max-width: 500px;
      width: 90%;
      animation: fadeIn 0.8s ease-out;
    }

    h2 {
      font-size: 1.8rem;
      margin-bottom: 1.5rem;
      color: #2c3e50;
    }

    p {
      font-size: 1.1rem;
      line-height: 1.6;
      color: #34495e;
      margin-bottom: 2rem;
    }

    .button {
      display: inline-block;
      margin-top: 1rem;
      padding: 1rem 2.5rem;
      font-size: 1.2rem;
      background: linear-gradient(45deg, #3498db, #2980b9);
      color: white;
      border-radius: 50px;
      text-decoration: none;
      transition: transform 0.2s, box-shadow 0.2s;
      box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
    }

    .button:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4);
    }

    .small {
      font-size: 0.9rem;
      color: #7f8c8d;
      margin-top: 2rem;
      line-height: 1.6;
    }

    .small a {
      color: #3498db;
      text-decoration: none;
      font-weight: 500;
      transition: color 0.2s;
    }

    .small a:hover {
      color: #2980b9;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
  </style>
  <script>
    const params = new URLSearchParams(window.location.search);
    const roomId = params.get('roomId');
    const encodedDataFromHtmlUrl = params.get('data');

    let appDeepLink = '';

    if (roomId && encodedDataFromHtmlUrl) {
      appDeepLink = `nompangs://invite?roomId=${roomId}&data=${encodedDataFromHtmlUrl}`;
    } else if (roomId) {
      appDeepLink = `nompangs://invite?roomId=${roomId}`;
    } else {
      document.addEventListener('DOMContentLoaded', () => {
        const container = document.querySelector('.container');
        if (container) {
          container.innerHTML = `<h2>오류</h2><p>초대 정보(초대 코드)가 올바르지 않습니다. QR 코드를 다시 확인해주세요.</p>`;
        }
      });
    }

    if (appDeepLink) {
      // 앱 실행 관련 타이밍 설정
      const autoOpenDelay = 2000; // 자동 앱 실행 시도까지 대기 시간 (2초)
      const fallbackDelay = 5000; // 앱 미설치 시 앱스토어 이동까지 대기 시간 (5초)
      let appOpenedByBlur = false;
      let fallbackTimeoutId;

      // window.location.href를 사용하여 커스텀 URL 스킴(nompangs://)을 호출하는 방식으로 앱 실행
      // 이는 iOS/Android에서 가장 일반적으로 사용되는 딥링크 방식
      const launchApp = () => {
        window.location.href = appDeepLink;
      };

      // 앱이 성공적으로 열리면 blur 이벤트가 발생
      // 이를 통해 앱이 실제로 열렸는지 감지
      const handleBlur = () => {
        appOpenedByBlur = true;
        window.removeEventListener('blur', handleBlur);
        if (fallbackTimeoutId) {
          clearTimeout(fallbackTimeoutId);
        }
      };

      window.addEventListener('blur', handleBlur);

      // 자동으로 앱 실행 시도
      setTimeout(launchApp, autoOpenDelay);

      // 앱이 열리지 않은 경우(blur 이벤트가 발생하지 않은 경우) 앱스토어로 리다이렉트
      fallbackTimeoutId = setTimeout(() => {
        window.removeEventListener('blur', handleBlur);
        if (!appOpenedByBlur) {
          const downloadLinkElement = document.querySelector('.small a');
          if (downloadLinkElement && downloadLinkElement.href && downloadLinkElement.href !== '#') {
            window.location.href = downloadLinkElement.href;
          }
        }
      }, fallbackDelay);
    }

    function openApp() {
      if (appDeepLink) {
        launchApp();
      } else {
        alert('초대 정보가 올바르지 않아 앱을 열 수 없습니다.');
      }
    }
  </script>
</head>
<body>
  <div class="container">
    <h2>모멘티 앱으로 이동 중입니다...</h2>
    <p>앱이 자동으로 열리지 않으면 아래 버튼을 눌러주세요.</p>
    <a class="button" href="#" onclick="openApp()">앱 열기</a>

    <div class="small">
      앱이 설치되어 있지 않다면<br/>
      <a href="https://yourdomain.com/download">여기에서 다운로드하세요</a>
    </div>
  </div>
</body>
</html>