eb44701410
- 마이페이지에 카카오 로그인 조회 기능 추가 (/my-page/kakao/start) - 콜백 핸들러에 purpose=mypage 분기 추가 (동일 콜백 URL 재사용) - my_page_login.html에 "카카오로 조회하기" 버튼 추가 - my_page.html 헤더에 카카오 조회 버튼 추가 - OAuth scope에서 name, phone_number 제거 (비즈앱 심사 미완료) - KOE101/KOE205/KOE320 등 에러별 트러블슈팅 문서 작성 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
211 lines
6.9 KiB
HTML
211 lines
6.9 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">
|
|
<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>
|
|
|
|
<!-- 카카오 로그인 버튼 -->
|
|
<a href="/my-page/kakao/start" 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; text-decoration: none; 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>
|
|
카카오로 조회하기
|
|
</a>
|
|
|
|
<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>
|
|
</body>
|
|
</html>
|