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

- 카카오 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

View File

@@ -28,20 +28,20 @@
margin: 0 auto;
}
.header {
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
padding: 48px 24px 32px 24px;
color: #ffffff;
}
.header-top {
position: sticky;
top: 0;
z-index: 100;
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
padding: 0 24px;
height: 56px;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
}
.header-title {
color: #ffffff;
font-size: 20px;
font-weight: 700;
letter-spacing: -0.3px;
@@ -55,6 +55,12 @@
letter-spacing: -0.2px;
}
.header-profile {
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
padding: 28px 24px 32px 24px;
color: #ffffff;
}
.user-info {
text-align: center;
padding: 20px 0;
@@ -254,20 +260,21 @@
/* 모바일 최적화 */
@media (max-width: 480px) {
.header {
padding-top: 60px;
.header-top {
padding-top: env(safe-area-inset-top, 0px);
height: calc(56px + env(safe-area-inset-top, 0px));
}
}
</style>
</head>
<body>
<div class="app-container">
<div class="header">
<div class="header-top">
<div class="header-title">마이페이지</div>
<a href="/my-page" class="btn-logout">다른 번호로 조회</a>
</div>
<div class="header-top">
<div class="header-title">마이페이지</div>
<a href="/my-page" class="btn-logout">다른 번호로 조회</a>
</div>
<div class="header-profile">
<div class="user-info">
<div class="user-name">{{ user.nickname }}님</div>
<div class="user-phone">{{ user.phone[:3] }}-{{ user.phone[3:7] }}-{{ user.phone[7:] if user.phone|length > 7 else '' }}</div>