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>

backend/app.py

@@ -34,6 +34,11 @@ from db.dbsetup import DatabaseManager
 app = Flask(__name__)
 app.secret_key = 'pharmacy-qr-mileage-secret-key-2026'
 
+# 세션 설정 (PWA 자동적립 지원)
+app.config['SESSION_COOKIE_SECURE'] = not app.debug  # HTTPS 전용 (로컬 개발 시 제외)
+app.config['SESSION_COOKIE_SAMESITE'] = 'Lax'        # QR 스캔 시 쿠키 전송 허용
+app.config['PERMANENT_SESSION_LIFETIME'] = timedelta(days=90)  # 3개월 유지
+
 # 데이터베이스 매니저
 db_manager = DatabaseManager()
 
@@ -599,10 +604,33 @@ def claim():
     if not success:
         return render_template('error.html', message=message)
 
+    # 세션에 로그인된 유저가 있으면 자동 적립 (PWA)
+    if 'logged_in_user_id' in session:
+        auto_user_id = session['logged_in_user_id']
+        conn = db_manager.get_sqlite_connection()
+        cursor = conn.cursor()
+        cursor.execute("SELECT id, nickname, phone, mileage_balance FROM users WHERE id = ?", (auto_user_id,))
+        auto_user = cursor.fetchone()
+
+        if auto_user:
+            auto_success, auto_msg, auto_balance = claim_mileage(auto_user_id, token_info)
+            if auto_success:
+                return render_template('claim_kakao_success.html',
+                    points=token_info['claimable_points'],
+                    balance=auto_balance,
+                    phone=auto_user['phone'],
+                    name=auto_user['nickname'])
+            return render_template('error.html', message=auto_msg)
+        else:
+            # 유저가 삭제됨 - 세션 클리어
+            session.pop('logged_in_user_id', None)
+            session.pop('logged_in_phone', None)
+            session.pop('logged_in_name', None)
+
     # MSSQL에서 구매 품목 조회
     sale_items = []
     try:
-        session = db_manager.get_session('PM_PRES')
+        db_session = db_manager.get_session('PM_PRES')
         sale_sub_query = text("""
             SELECT
                 ISNULL(G.GoodsName, '(약품명 없음)') AS goods_name,
@@ -613,7 +641,7 @@ def claim():
             WHERE S.SL_NO_order = :transaction_id
             ORDER BY S.DrugCode
         """)
-        rows = session.execute(sale_sub_query, {'transaction_id': transaction_id}).fetchall()
+        rows = db_session.execute(sale_sub_query, {'transaction_id': transaction_id}).fetchall()
         sale_items = [
             {'name': r.goods_name, 'qty': int(r.quantity or 0), 'total': int(r.total or 0)}
             for r in rows
@@ -688,6 +716,12 @@ def api_claim():
                 'message': message
             }), 500
 
+        # 세션에 유저 정보 저장 (PWA 자동적립용)
+        session.permanent = True
+        session['logged_in_user_id'] = user_id
+        session['logged_in_phone'] = phone
+        session['logged_in_name'] = name
+
         return jsonify({
             'success': True,
             'message': message,
@@ -858,6 +892,12 @@ def claim_kakao_callback():
         if not success:
             return render_template('error.html', message=msg)
 
+        # 세션에 유저 정보 저장 (PWA 자동적립용)
+        session.permanent = True
+        session['logged_in_user_id'] = user_id
+        session['logged_in_phone'] = kakao_phone
+        session['logged_in_name'] = kakao_name
+
         return render_template('claim_kakao_success.html',
             points=token_info['claimable_points'],
             balance=new_balance,
@@ -923,6 +963,12 @@ def api_claim_kakao():
     if not success:
         return jsonify({'success': False, 'message': message}), 500
 
+    # 세션에 유저 정보 저장 (PWA 자동적립용)
+    session.permanent = True
+    session['logged_in_user_id'] = user_id
+    session['logged_in_phone'] = phone
+    session['logged_in_name'] = name
+
     return jsonify({
         'success': True,
         'message': message,
@@ -1003,6 +1049,34 @@ def my_page():
     return render_template('my_page.html', user=user, transactions=transactions)
 
 
+# ============================================================================
+# PWA / 공통 라우트
+# ============================================================================
+
+@app.route('/sw.js')
+def service_worker():
+    """서비스 워커를 루트 경로에서 제공 (scope='/' 허용)"""
+    return app.send_static_file('sw.js'), 200, {
+        'Content-Type': 'application/javascript',
+        'Service-Worker-Allowed': '/'
+    }
+
+
+@app.route('/privacy')
+def privacy():
+    """개인정보 처리방침"""
+    return render_template('privacy.html')
+
+
+@app.route('/logout')
+def logout():
+    """세션 로그아웃"""
+    session.pop('logged_in_user_id', None)
+    session.pop('logged_in_phone', None)
+    session.pop('logged_in_name', None)
+    return redirect('/')
+
+
 @app.route('/admin/transaction/<transaction_id>')
 def admin_transaction_detail(transaction_id):
     """거래 세부 내역 조회 (MSSQL)"""

backend/templates/claim_form.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>
@@ -548,7 +555,7 @@
                         <label class="checkbox-container">
                             <input type="checkbox" id="privacyConsent" required>
                             <span class="checkmark"></span>
-                            <span class="consent-text">개인정보 수집·이용 동의</span>
+                            <span class="consent-text"><a href="/privacy" target="_blank" style="color: #6366f1; text-decoration: underline;">개인정보 수집·이용</a> 동의</span>
                         </label>
                     </div>
 
@@ -575,6 +582,13 @@
                 </a>
 
                 <div class="alert error" id="alertMsg"></div>
+
+                <div style="text-align: center; padding: 16px 0 8px;">
+                    <a href="/privacy" target="_blank"
+                       style="color: #adb5bd; font-size: 12px; text-decoration: none; letter-spacing: -0.2px;">
+                        개인정보 처리방침
+                    </a>
+                </div>
             </div>
         </div>
 
@@ -594,6 +608,17 @@
                 <a href="/" class="btn-secondary">홈으로</a>
                 <a href="#" class="btn-primary" id="btnMyPage">내역 보기</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>
     </div>
 
@@ -707,5 +732,40 @@
             successScreen.style.display = 'block';
         }
     </script>
+    <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');
+        if (!banner) return;
+
+        if (window.matchMedia('(display-mode: standalone)').matches || navigator.standalone) return;
+
+        let deferredPrompt = null;
+        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'; });
+            }
+        });
+
+        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>

backend/templates/claim_kakao_phone.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>
@@ -347,6 +354,13 @@
                 </form>
 
                 <div class="alert error" id="alertMsg"></div>
+
+                <div style="text-align: center; padding: 16px 0 8px;">
+                    <a href="/privacy" target="_blank"
+                       style="color: #adb5bd; font-size: 12px; text-decoration: none; letter-spacing: -0.2px;">
+                        개인정보 처리방침
+                    </a>
+                </div>
             </div>
         </div>
 
@@ -438,5 +452,6 @@
             document.getElementById('successScreen').style.display = 'block';
         }
     </script>
+    <script>if('serviceWorker' in navigator){navigator.serviceWorker.register('/sw.js').catch(()=>{});}</script>
 </body>
 </html>

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>

backend/templates/error.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>
@@ -98,5 +105,6 @@
             <a href="/" class="btn-home">홈으로 이동</a>
         </div>
     </div>
+    <script>if('serviceWorker' in navigator){navigator.serviceWorker.register('/sw.js').catch(()=>{});}</script>
 </body>
 </html>

backend/templates/my_page.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>
@@ -271,11 +278,14 @@
     <div class="app-container">
         <div class="header-top">
             <div class="header-title">마이페이지</div>
-            <a href="/my-page" class="btn-logout">다른 번호로 조회</a>
+            <div style="display: flex; align-items: center; gap: 8px;">
-            <a href="/my-page/kakao/start" class="btn-logout" style="display: flex; align-items: center; gap: 4px; background: #FEE500; color: #191919; padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 600;">
+                <a href="/my-page" class="btn-logout">다른 번호</a>
-                <svg width="12" height="12" viewBox="0 0 20 20" fill="none"><path d="M10 1C4.477 1 0 4.477 0 8.5c0 2.58 1.693 4.847 4.243 6.134l-1.084 3.97a.3.3 0 00.457.338L7.7 16.392c.75.112 1.52.17 2.3.17 5.523 0 10-3.477 10-7.562C20 4.477 15.523 1 10 1z" fill="#191919"/></svg>
+                <a href="/my-page/kakao/start" class="btn-logout" style="display: flex; align-items: center; gap: 4px; background: #FEE500; color: #191919; padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 600;">
-                카카오 조회
+                    <svg width="12" height="12" viewBox="0 0 20 20" fill="none"><path d="M10 1C4.477 1 0 4.477 0 8.5c0 2.58 1.693 4.847 4.243 6.134l-1.084 3.97a.3.3 0 00.457.338L7.7 16.392c.75.112 1.52.17 2.3.17 5.523 0 10-3.477 10-7.562C20 4.477 15.523 1 10 1z" fill="#191919"/></svg>
-            </a>
+                    카카오
+                </a>
+                <a href="/logout" class="btn-logout" style="font-size: 12px; opacity: 0.7;">로그아웃</a>
+            </div>
         </div>
 
         <div class="header-profile">
@@ -382,5 +392,6 @@
         }
     }
     </script>
+    <script>if('serviceWorker' in navigator){navigator.serviceWorker.register('/sw.js').catch(()=>{});}</script>
 </body>
 </html>

backend/templates/my_page_login.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>
@@ -206,5 +213,6 @@
 
         phoneInput.focus();
     </script>
+    <script>if('serviceWorker' in navigator){navigator.serviceWorker.register('/sw.js').catch(()=>{});}</script>
 </body>
 </html>