feat: 카카오 JS SDK 전환 - 앱 직접 실행으로 로그인 UX 개선

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

backend/templates/claim_form.html

@@ -569,17 +569,17 @@
                     <div style="position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: #e9ecef; z-index: 0;"></div>
                 </div>
 
-                <a href="/claim/kakao/start?t={{ request.args.get('t') }}"
+                <button type="button" onclick="kakaoLogin()"
                    style="display: flex; align-items: center; justify-content: center; gap: 8px;
                           width: 100%; padding: 16px; background: #FEE500; color: #191919;
                           border: none; border-radius: 14px; font-size: 16px; font-weight: 600;
-                          text-decoration: none; letter-spacing: -0.3px; transition: all 0.2s ease;
+                          letter-spacing: -0.3px; transition: all 0.2s ease; cursor: pointer;
                           box-shadow: 0 2px 8px rgba(0,0,0,0.06);">
                     <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>
+                </button>
 
                 <div class="alert error" id="alertMsg"></div>
 
@@ -732,6 +732,28 @@
             successScreen.style.display = 'block';
         }
     </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>
+    // 카카오 JS SDK 초기화
+    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 {
+            // JS SDK 로드 실패 시 서버 리다이렉트 폴백
+            window.location.href = '/claim/kakao/start?t={{ request.args.get("t") }}';
+        }
+    }
+    </script>
     <script>
     if('serviceWorker' in navigator){navigator.serviceWorker.register('/sw.js').catch(()=>{});}
 

backend/templates/my_page_login.html

@@ -180,13 +180,13 @@
             <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;">
+        <!-- 카카오 로그인 버튼 (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>
             카카오로 조회하기
-        </a>
+        </button>
 
         <a href="/" class="btn-back">← 홈으로</a>
     </div>
@@ -213,6 +213,24 @@
 
         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>