d868a494c2
- claim_form.html, my_page_login.html 카카오 버튼을 JS SDK Kakao.Auth.authorize()로 전환 - 카카오톡 앱 설치 시 앱으로 직접 전환 (원탭 로그인), 미설치 시 웹 폴백 - JS SDK 로드 실패 시 기존 서버 리다이렉트(/claim/kakao/start) 폴백 유지 - app.py: /claim, /my-page 라우트에서 kakao_state 생성하여 템플릿에 전달 - kakao_client.py: birthyear 스코프 제거 (미승인 → KOE205 에러 방지) - docs/kakao-oauth-setup.md: 플랫폼 키, JS SDK 비교, 다른 계정 적립 안내, 콘솔 설정 문서화 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
237 lines
8.3 KiB
HTML
237 lines
8.3 KiB
HTML
<!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">
|
|
<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>
|
|
<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;
|
|
}
|
|
|
|
.login-container {
|
|
background: #ffffff;
|
|
border-radius: 24px;
|
|
padding: 48px 32px;
|
|
max-width: 420px;
|
|
width: 100%;
|
|
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
|
|
}
|
|
|
|
.header {
|
|
text-align: center;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.logo {
|
|
width: 64px;
|
|
height: 64px;
|
|
margin: 0 auto 20px auto;
|
|
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
|
|
border-radius: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 32px;
|
|
}
|
|
|
|
.header-title {
|
|
color: #212529;
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
margin-bottom: 8px;
|
|
letter-spacing: -0.5px;
|
|
}
|
|
|
|
.header-subtitle {
|
|
color: #868e96;
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
letter-spacing: -0.2px;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.form-group label {
|
|
display: block;
|
|
color: #495057;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
margin-bottom: 10px;
|
|
letter-spacing: -0.2px;
|
|
}
|
|
|
|
.form-group input {
|
|
width: 100%;
|
|
padding: 16px 18px;
|
|
border: 2px solid #e9ecef;
|
|
border-radius: 14px;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
transition: all 0.2s ease;
|
|
letter-spacing: -0.3px;
|
|
background: #f8f9fa;
|
|
}
|
|
|
|
.form-group input:focus {
|
|
outline: none;
|
|
border-color: #6366f1;
|
|
background: #ffffff;
|
|
box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.08);
|
|
}
|
|
|
|
.form-group 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-back {
|
|
display: block;
|
|
text-align: center;
|
|
margin-top: 20px;
|
|
color: #6366f1;
|
|
text-decoration: none;
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
letter-spacing: -0.2px;
|
|
}
|
|
|
|
.btn-back:active {
|
|
color: #8b5cf6;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="login-container">
|
|
<div class="header">
|
|
<div class="logo">📱</div>
|
|
<div class="header-title">마이페이지</div>
|
|
<div class="header-subtitle">전화번호로 포인트 조회</div>
|
|
</div>
|
|
|
|
<form method="GET" action="/my-page">
|
|
<div class="form-group">
|
|
<label for="phone">전화번호</label>
|
|
<div 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="phoneInput"
|
|
placeholder="0000-0000"
|
|
inputmode="numeric"
|
|
maxlength="9"
|
|
autocomplete="tel"
|
|
required
|
|
style="flex: 1;">
|
|
<input type="hidden" id="phone" name="phone">
|
|
</div>
|
|
</div>
|
|
|
|
<button type="submit" class="btn-submit">
|
|
조회하기
|
|
</button>
|
|
</form>
|
|
|
|
<!-- 또는 구분선 -->
|
|
<div style="text-align: center; margin: 24px 0 20px 0; position: relative;">
|
|
<span style="background: #fff; padding: 0 16px; color: #adb5bd; font-size: 13px; font-weight: 500; position: relative; z-index: 1;">또는</span>
|
|
<div style="position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: #e9ecef; z-index: 0;"></div>
|
|
</div>
|
|
|
|
<!-- 카카오 로그인 버튼 (JS SDK) -->
|
|
<button type="button" onclick="kakaoLogin()" style="display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 18px; background: #FEE500; color: #191919; border: none; border-radius: 14px; font-size: 17px; font-weight: 700; cursor: pointer; letter-spacing: -0.3px; transition: all 0.2s ease;">
|
|
<svg width="20" height="20" 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>
|
|
카카오로 조회하기
|
|
</button>
|
|
|
|
<a href="/" class="btn-back">← 홈으로</a>
|
|
</div>
|
|
|
|
<script>
|
|
// 뒷번호 자동 하이픈 (010 고정)
|
|
const phoneInput = document.getElementById('phoneInput');
|
|
const phoneHidden = document.getElementById('phone');
|
|
|
|
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);
|
|
}
|
|
});
|
|
|
|
// 제출 시 010 합쳐서 hidden 필드에 전달
|
|
phoneInput.closest('form').addEventListener('submit', function() {
|
|
const raw = phoneInput.value.replace(/[^0-9]/g, '');
|
|
phoneHidden.value = '010' + raw;
|
|
});
|
|
|
|
phoneInput.focus();
|
|
</script>
|
|
<script src="https://t1.kakaocdn.net/kakao_js_sdk/2.7.4/kakao.min.js"
|
|
integrity="sha384-DKYJZ8NLiK8MN4/C5P2dtSmLQ4KwPaoqAfyA/DfmOGfnSNqoARCbb2xl4Kh1v6Q"
|
|
crossorigin="anonymous"></script>
|
|
<script>
|
|
if (typeof Kakao !== 'undefined') Kakao.init('3d1e098107157c5021b73bd5ab48600f');
|
|
|
|
function kakaoLogin() {
|
|
if (typeof Kakao !== 'undefined' && Kakao.isInitialized()) {
|
|
Kakao.Auth.authorize({
|
|
redirectUri: 'https://mile.0bin.in/claim/kakao/callback',
|
|
scope: 'profile_nickname,profile_image,account_email,name,phone_number,birthday',
|
|
state: '{{ kakao_state }}'
|
|
});
|
|
} else {
|
|
window.location.href = '/my-page/kakao/start';
|
|
}
|
|
}
|
|
</script>
|
|
<script>if('serviceWorker' in navigator){navigator.serviceWorker.register('/sw.js').catch(()=>{});}</script>
|
|
</body>
|
|
</html>
|