feat: 홈 화면 리뉴얼 - QR 스캐너 + 카카오 로그인 + 세션 상태 표시

- 인라인 HTML → index.html 템플릿으로 전환
- HTML5 QR 코드 스캐너 (html5-qrcode 라이브러리)
- 로그인 상태에 따라 다른 메뉴 표시:
  - 비로그인: 카카오로 시작하기 + 마일리지 조회
  - 로그인: 내 마일리지 + 로그아웃
- QR 스캔 → /claim 자동 이동 (로그인 시 자동 적립)
- 디자인 시스템 통일 (Noto Sans KR, 보라색 그라디언트)
- PWA 메타 태그 + 개인정보 처리방침 푸터 링크

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
thug0bin
2026-02-25 08:57:55 +09:00
parent ed2a3f28bf
commit c4fa655005
2 changed files with 449 additions and 51 deletions

View File

@@ -527,57 +527,12 @@ def find_user_by_kakao_id(kakao_id):
@app.route('/')
def index():
"""메인 페이지"""
return """
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>청춘약국 마일리지</title>
<style>
body {
font-family: 'Malgun Gothic', sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
margin: 0;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.container {
background: white;
border-radius: 20px;
padding: 40px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
max-width: 400px;
width: 100%;
text-align: center;
}
h1 {
color: #667eea;
margin-bottom: 30px;
font-size: 28px;
}
.info {
color: #666;
line-height: 1.8;
margin-bottom: 30px;
}
</style>
</head>
<body>
<div class="container">
<h1>🏥 청춘약국 마일리지</h1>
<div class="info">
영수증 QR 코드를 스캔하여<br>
마일리지를 적립해보세요!<br><br>
<strong>구매금액의 3%</strong>를<br>
포인트로 돌려드립니다.
</div>
</div>
</body>
</html>
"""
logged_in = 'logged_in_user_id' in session
return render_template('index.html',
logged_in=logged_in,
logged_in_name=session.get('logged_in_name', ''),
logged_in_phone=session.get('logged_in_phone', '')
)
@app.route('/claim')