feat: PWA 세션 유지 자동적립 + 메타 태그 + 설치 유도 배너

- 세션 설정: 90일 유지, SameSite=Lax (QR 스캔 시 쿠키 전송) - 적립 성공 시 세션에 유저 정보 저장 (3곳) - /claim 자동적립: 세션에 유저가 있으면 입력 없이 바로 적립 - /logout 라우트 추가, 마이페이지 헤더에 로그아웃 버튼 - /sw.js, /privacy 라우트 추가 - 고객용 템플릿 6개에 PWA 메타 태그 + 서비스 워커 등록 - 적립 성공 화면에 PWA 설치 유도 배너 (iOS/Android 분기) - session 변수명 충돌 수정 (db_session으로 변경) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-25 08:52:19 +09:00
parent 62502c81b3
commit ed2a3f28bf
7 changed files with 242 additions and 8 deletions
--- a/backend/templates/claim_kakao_success.html
+++ b/backend/templates/claim_kakao_success.html
@@ -3,6 +3,13 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <meta name="theme-color" content="#6366f1">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+    <meta name="apple-mobile-web-app-title" content="청춘약국">
+    <link rel="manifest" href="/static/manifest.json">
+    <link rel="apple-touch-icon" href="/static/icons/icon-192.png">
+    <link rel="icon" type="image/png" sizes="192x192" href="/static/icons/icon-192.png">
    <title>적립 완료 - 청춘약국</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -182,6 +189,57 @@
            <a href="/" class="btn-secondary">홈으로</a>
            <a href="/my-page?phone={{ phone }}" class="btn-primary">내역 보기</a>
        </div>
+
+        <!-- PWA 설치 유도 배너 -->
+        <div id="installBanner" style="display:none; margin-top:24px; padding:16px 20px; background:#f8f9fa; border-radius:14px; text-align:left;">
+            <div style="font-size:14px; font-weight:700; color:#212529; margin-bottom:6px; letter-spacing:-0.3px;">
+                홈 화면에 추가하면 더 편해요!
+            </div>
+            <div id="installDesc" style="font-size:13px; color:#868e96; line-height:1.6; letter-spacing:-0.2px;"></div>
+            <button id="installBtn" style="display:none; margin-top:10px; width:100%; padding:12px; background:linear-gradient(135deg,#6366f1,#8b5cf6); color:#fff; border:none; border-radius:10px; font-size:14px; font-weight:600; cursor:pointer; letter-spacing:-0.2px;">
+                앱 설치하기
+            </button>
+        </div>
    </div>
+
+    <script>
+    if('serviceWorker' in navigator){navigator.serviceWorker.register('/sw.js').catch(()=>{});}
+
+    // PWA 설치 유도
+    (function() {
+        const banner = document.getElementById('installBanner');
+        const desc = document.getElementById('installDesc');
+        const btn = document.getElementById('installBtn');
+
+        // 이미 PWA로 실행 중이면 표시 안 함
+        if (window.matchMedia('(display-mode: standalone)').matches || navigator.standalone) return;
+
+        let deferredPrompt = null;
+
+        // Android Chrome: beforeinstallprompt 이벤트
+        window.addEventListener('beforeinstallprompt', function(e) {
+            e.preventDefault();
+            deferredPrompt = e;
+            desc.textContent = '다음부터 QR 스캔하면 입력 없이 바로 적립됩니다.';
+            btn.style.display = 'block';
+            banner.style.display = 'block';
+        });
+
+        btn.addEventListener('click', function() {
+            if (deferredPrompt) {
+                deferredPrompt.prompt();
+                deferredPrompt.userChoice.then(function() { banner.style.display = 'none'; });
+            }
+        });
+
+        // iOS Safari 감지
+        const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
+        const isSafari = /Safari/.test(navigator.userAgent) && !/CriOS|FxiOS/.test(navigator.userAgent);
+        if (isIOS && isSafari && !deferredPrompt) {
+            desc.innerHTML = '하단 <strong style="color:#495057;">공유 버튼</strong> ➜ <strong style="color:#495057;">홈 화면에 추가</strong>를 누르면<br>다음부터 QR만 찍으면 바로 적립!';
+            banner.style.display = 'block';
+        }
+    })();
+    </script>
 </body>
 </html>