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

feat: 카카오 로그인으로 마일리지 적립 기능 추가

Browse Source 
- 카카오 OAuth 2.0 클라이언트 모듈 추가 (services/kakao_client.py)
- 적립 페이지에 "카카오로 적립하기" 버튼 추가
- OAuth 콜백 처리: 전화번호 자동 적립 / 미제공 시 폰 입력 폴백
- state 파라미터로 claim 컨텍스트 보존 + CSRF 보호
- customer_identities 테이블 활용한 카카오 계정 연결
- 마이페이지 헤더 sticky 고정
- 카카오 OAuth 설정 가이드 문서 추가

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
thug0bin
2026-02-25 02:27:05 +09:00
parent 82220a4a44
commit 31cf6e3816
8 changed files with 1188 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

442
backend/templates/claim_kakao_phone.html Normal file
View File

@@ -0,0 +1,442 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>카카오 적립 - 청춘약국</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap" rel="stylesheet">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
background: #f5f7fa;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 16px;
-webkit-font-smoothing: antialiased;
}
.app-container {
background: #ffffff;
border-radius: 24px;
max-width: 420px;
width: 100%;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
overflow: hidden;
}
.header {
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
padding: 32px 24px 140px 24px;
position: relative;
}
.header::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 120px;
background: #ffffff;
border-radius: 32px 32px 0 0;
}
.header-content {
position: relative;
z-index: 2;
}
.pharmacy-name {
color: rgba(255, 255, 255, 0.9);
font-size: 15px;
font-weight: 500;
letter-spacing: -0.2px;
margin-bottom: 4px;
}
.header-title {
color: #ffffff;
font-size: 26px;
font-weight: 700;
letter-spacing: -0.5px;
}
.card {
background: #ffffff;
border-radius: 20px;
padding: 24px;
margin: -100px 24px 24px 24px;
position: relative;
z-index: 3;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}
.kakao-profile {
text-align: center;
padding: 20px 0;
border-bottom: 1px solid #f1f3f5;
margin-bottom: 24px;
}
.kakao-profile img {
width: 64px;
height: 64px;
border-radius: 50%;
margin-bottom: 12px;
border: 3px solid #FEE500;
}
.kakao-profile-name {
font-size: 18px;
font-weight: 700;
color: #212529;
letter-spacing: -0.3px;
margin-bottom: 4px;
}
.kakao-profile-badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12px;
color: #191919;
background: #FEE500;
padding: 4px 10px;
border-radius: 20px;
font-weight: 600;
}
.points-info {
text-align: center;
padding: 16px 0 24px 0;
}
.points-label {
color: #868e96;
font-size: 13px;
font-weight: 500;
margin-bottom: 8px;
}
.points-value {
color: #6366f1;
font-size: 36px;
font-weight: 700;
letter-spacing: -1px;
}
.form-section { margin-top: 0; }
.input-group {
margin-bottom: 20px;
}
.input-group label {
display: block;
color: #495057;
font-size: 14px;
font-weight: 600;
margin-bottom: 10px;
letter-spacing: -0.2px;
}
.input-wrapper input {
width: 100%;
padding: 16px 18px;
border: 2px solid #e9ecef;
border-radius: 14px;
font-size: 16px;
font-weight: 500;
transition: all 0.2s ease;
background: #f8f9fa;
letter-spacing: -0.3px;
}
.input-wrapper input:focus {
outline: none;
border-color: #6366f1;
background: #ffffff;
box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.08);
}
.input-wrapper input::placeholder {
color: #adb5bd;
font-weight: 400;
}
.btn-submit {
width: 100%;
padding: 18px;
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
color: #ffffff;
border: none;
border-radius: 14px;
font-size: 17px;
font-weight: 700;
cursor: pointer;
letter-spacing: -0.3px;
transition: all 0.2s ease;
box-shadow: 0 4px 16px rgba(99, 102, 241, 0.24);
}
.btn-submit:active { transform: scale(0.98); }
.btn-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.alert {
display: none;
padding: 14px 16px;
border-radius: 12px;
font-size: 14px;
font-weight: 500;
margin-top: 16px;
letter-spacing: -0.2px;
}
.alert.error {
background: #fff5f5;
color: #e03131;
border: 1px solid #ffc9c9;
}
/* 성공 화면 */
.success-screen {
display: none;
text-align: center;
padding: 60px 24px;
}
.success-icon-wrap {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
border-radius: 50%;
margin: 0 auto 24px auto;
display: flex;
align-items: center;
justify-content: center;
}
.success-icon-wrap svg {
width: 40px;
height: 40px;
fill: none;
stroke: #ffffff;
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
}
.success-title {
font-size: 24px;
font-weight: 700;
color: #212529;
margin-bottom: 16px;
letter-spacing: -0.5px;
}
.success-points {
font-size: 48px;
font-weight: 700;
color: #6366f1;
margin-bottom: 8px;
letter-spacing: -1.5px;
}
.success-balance {
color: #868e96;
font-size: 15px;
font-weight: 500;
margin-bottom: 32px;
letter-spacing: -0.2px;
}
.success-balance strong {
color: #495057;
}
.button-group {
display: flex;
gap: 12px;
}
.btn-secondary, .btn-primary {
flex: 1;
padding: 16px;
border-radius: 14px;
font-size: 15px;
font-weight: 600;
text-decoration: none;
text-align: center;
transition: all 0.2s ease;
letter-spacing: -0.2px;
}
.btn-secondary {
background: #f1f3f5;
color: #495057;
}
.btn-primary {
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
color: #ffffff;
}
@media (max-width: 480px) {
body { padding: 0; }
.app-container { border-radius: 0; min-height: 100vh; }
.header { padding-top: 48px; }
}
</style>
</head>
<body>
<div class="app-container">
<div class="header">
<div class="header-content">
<div class="pharmacy-name">청춘약국</div>
<div class="header-title">포인트 적립</div>
</div>
</div>
<div id="claimForm">
<div class="card">
<div class="kakao-profile">
{% if kakao_profile_image %}
<img src="{{ kakao_profile_image }}" alt="프로필">
{% else %}
<div style="width: 64px; height: 64px; border-radius: 50%; background: #FEE500; margin: 0 auto 12px auto; display: flex; align-items: center; justify-content: center;">
<svg width="28" height="28" 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>
</div>
{% endif %}
<div class="kakao-profile-name">{{ kakao_name }}님</div>
<span class="kakao-profile-badge">
<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>
카카오 인증됨
</span>
</div>
<div class="points-info">
<div class="points-label">적립 포인트</div>
<div class="points-value">+{{ "{:,}".format(token_info.claimable_points) }}P</div>
</div>
<form id="formKakaoClaim" class="form-section">
<div class="input-group">
<label for="phone">전화번호를 입력해주세요</label>
<div class="input-wrapper" style="display: flex; align-items: center; gap: 8px;">
<span style="font-size: 18px; font-weight: 600; color: #495057; white-space: nowrap; padding: 16px 0 16px 4px;">010 -</span>
<input type="tel" id="phone"
placeholder="0000-0000"
inputmode="numeric"
maxlength="9"
autocomplete="tel"
required
style="flex: 1;">
</div>
</div>
<button type="submit" class="btn-submit" id="btnSubmit">포인트 적립하기</button>
</form>
<div class="alert error" id="alertMsg"></div>
</div>
</div>
<div id="successScreen" class="success-screen">
<div class="success-icon-wrap">
<svg viewBox="0 0 52 52">
<path d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
</svg>
</div>
<div class="success-title">적립 완료!</div>
<div class="success-points" id="successPoints">0P</div>
<div class="success-balance">
총 포인트 <strong id="successBalance">0P</strong>
</div>
<div class="button-group">
<a href="/" class="btn-secondary">홈으로</a>
<a href="#" class="btn-primary" id="btnMyPage">내역 보기</a>
</div>
</div>
</div>
<script>
const phoneInput = document.getElementById('phone');
const form = document.getElementById('formKakaoClaim');
const btnSubmit = document.getElementById('btnSubmit');
const alertMsg = document.getElementById('alertMsg');
// 자동 하이픈
phoneInput.addEventListener('input', function(e) {
let value = e.target.value.replace(/[^0-9]/g, '');
if (value.length <= 4) {
e.target.value = value;
} else {
e.target.value = value.slice(0, 4) + '-' + value.slice(4, 8);
}
});
phoneInput.focus();
form.addEventListener('submit', async function(e) {
e.preventDefault();
const phoneRaw = phoneInput.value.replace(/[^0-9]/g, '');
if (phoneRaw.length < 7) {
showAlert('전화번호를 정확히 입력해주세요.');
return;
}
const phone = '010' + phoneRaw;
btnSubmit.disabled = true;
btnSubmit.textContent = '처리 중...';
alertMsg.style.display = 'none';
try {
const response = await fetch('/api/claim/kakao', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ phone: phone })
});
const data = await response.json();
if (data.success) {
showSuccess(data.points, data.balance, phone);
} else {
showAlert(data.message);
btnSubmit.disabled = false;
btnSubmit.textContent = '포인트 적립하기';
}
} catch (error) {
showAlert('네트워크 오류가 발생했습니다.');
btnSubmit.disabled = false;
btnSubmit.textContent = '포인트 적립하기';
}
});
function showAlert(msg) {
alertMsg.textContent = msg;
alertMsg.style.display = 'block';
setTimeout(() => { alertMsg.style.display = 'none'; }, 5000);
}
function showSuccess(points, balance, phone) {
document.getElementById('claimForm').style.display = 'none';
document.getElementById('successPoints').textContent = points.toLocaleString() + 'P';
document.getElementById('successBalance').textContent = balance.toLocaleString() + 'P';
document.getElementById('btnMyPage').href = '/my-page?phone=' + encodeURIComponent(phone);
document.getElementById('successScreen').style.display = 'block';
}
</script>
</body>
</html>