thug0bin/pharmacy-pos-qr-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 세션 설정: 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>
This commit is contained in:
thug0bin
2026-02-25 08:52:19 +09:00
parent 62502c81b3
commit ed2a3f28bf
7 changed files with 242 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
backend/templates/claim_form.html
View File

@@ -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>

15
backend/templates/claim_kakao_phone.html
View File

@@ -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>

58
backend/templates/claim_kakao_success.html
View File

@@ -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>

8
backend/templates/error.html
View File

@@ -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>

21
backend/templates/my_page.html
View File

@@ -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>
<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>
<div style="display: flex; align-items: center; gap: 8px;">
<a href="/my-page" class="btn-logout">다른 번호</a>
<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 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>

8
backend/templates/my_page_login.html
View File

@@ -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>