Merge pull request #114 from kc3hack/feature/issue-112-github-ai-integration

feat: #112 GitHub連携とAI解析によるランク判定機能

Author: kdix-23-071

frontend/src/app/login/page.tsx

@@ -3,7 +3,6 @@
 import { useState } from "react";
 import { useRouter } from "next/navigation";
 import { login, register } from "@/lib/api/auth";
-import { RankMeasurement } from "@/features/dashboard/components/RankMeasurement";
 
 export default function LoginPage() {
   const router = useRouter();
@@ -12,7 +11,6 @@ export default function LoginPage() {
   const [isRegister, setIsRegister] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [loading, setLoading] = useState(false);
-  const [showRankMeasurement, setShowRankMeasurement] = useState(false);
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
@@ -35,12 +33,7 @@ export default function LoginPage() {
   };
 
   const handleGitHubLogin = () => {
-    // ランク測定UIを表示
-    setShowRankMeasurement(true);
-  };
-
-  const handleRankMeasurementComplete = () => {
-    // ランク測定完了後、GitHub OAuth フローを開始
+    // GitHub OAuth フローを直接開始（ADR 018に基づく）
     const apiBaseUrl =
       process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000";
     window.location.href = `${apiBaseUrl}/api/v1/auth/github/login`;
@@ -191,17 +184,6 @@ export default function LoginPage() {
           }
         }
       `}</style>
-
-      {/* ランク測定モーダル */}
-      {showRankMeasurement && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm animate-fadeIn">
-          <div className="w-full h-full overflow-auto">
-            <RankMeasurement 
-              onComplete={handleRankMeasurementComplete}
-            />
-          </div>
-        </div>
-      )}
     </div>
   );
 }

frontend/src/features/dashboard/components/DashboardContainer.tsx

@@ -9,8 +9,10 @@ import { useEffect, useState, useCallback } from "react";
 import dynamic from "next/dynamic";
 import type { UserStatus } from "../types";
 import { fetchUserDashboard } from "../api/mock";
+import { getCurrentUser } from "@/lib/api/auth";
 import { AcquiredBadges } from "./AcquiredBadges";
 import { CategorySelector } from "./CategorySelector";
+import { RankMeasurement } from "./RankMeasurement";
 import { SkillNodePanel } from "../../skill-tree/components/SkillNodePanel";
 import { RankBar } from "../../skill-tree/components/RankBar";
 import { SkillLegend } from "../../skill-tree/components/SkillLegend";
@@ -56,6 +58,9 @@ export function DashboardContainer() {
   const [streamProgress, setStreamProgress] = useState(0);
   const [error, setError] = useState<string | null>(null);
 
+  // ランク測定モーダル表示フラグ
+  const [showRankMeasurement, setShowRankMeasurement] = useState(false);
+
   // Skill Tree States
   const [selectedNode, setSelectedNode] = useState<TreeSkillNode | null>(null);
   const [zoomAction, setZoomAction] = useState<{
@@ -84,6 +89,22 @@ export function DashboardContainer() {
         if (!isMounted) return; // アンマウント済みなら中断
 
         setUserStatus(statusData);
+        
+        // 初回アクセス判定（localStorageを使用）
+        // ユーザーIDを取得してユーザーごとに判定
+        try {
+          const userInfo = await getCurrentUser();
+          const storageKey = `rank_animation_viewed_${userInfo.id}`;
+          const hasViewed = localStorage.getItem(storageKey);
+          
+          if (!hasViewed) {
+            // 初回アクセスの場合、ランク測定モーダルを表示
+            setShowRankMeasurement(true);
+          }
+        } catch (err) {
+          console.error("ユーザー情報取得エラー:", err);
+        }
+
         setLoading(false);
 
         // スキルツリーはストリーミングで取得
@@ -183,6 +204,19 @@ export function DashboardContainer() {
     };
   }, [category]);
 
+  // ランク測定完了時のハンドラー
+  const handleRankMeasurementComplete = async () => {
+    try {
+      const userInfo = await getCurrentUser();
+      const storageKey = `rank_animation_viewed_${userInfo.id}`;
+      localStorage.setItem(storageKey, "true");
+      setShowRankMeasurement(false);
+    } catch (err) {
+      console.error("ランク測定完了処理エラー:", err);
+      setShowRankMeasurement(false);
+    }
+  };
+
   if (loading) {
     return (
       <div className="flex min-h-screen items-center justify-center bg-[#FDFEF0]">
@@ -325,6 +359,15 @@ export function DashboardContainer() {
           </div>
         </section>
       </div>
+
+      {/* ランク測定モーダル（初回アクセス時のみ表示） */}
+      {showRankMeasurement && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm animate-fadeIn">
+          <div className="w-full h-full overflow-auto">
+            <RankMeasurement onComplete={handleRankMeasurementComplete} />
+          </div>
+        </div>
+      )}
     </main>
   );
 }

frontend/src/features/dashboard/components/RankMeasurement.tsx

@@ -1,9 +1,39 @@
 'use client';
 
 import { useState, useRef, useEffect } from 'react';
-import { analyzeRank, RankAnalysisResponse } from '../api/rankApi';
+import { getCurrentUser } from '@/lib/api/auth';
 import { generateSkillTree } from '@/lib/api/skillTree';
 
+// ランク名マッピング（rank番号からランク名を取得）
+const RANK_NAMES = [
+  '種子', // rank 0
+  '芽', // rank 1
+  '若木', // rank 2
+  '樹', // rank 3
+  '母樹', // rank 4
+  '賢樹', // rank 5
+  '神樹', // rank 6
+  '世界樹', // rank 7
+];
+
+// UserInfo型定義（getCurrentUserの戻り値に合わせる）
+interface UserInfo {
+  id: number;
+  username: string;
+  rank: number;
+  exp: number;
+  created_at: string;
+  updated_at: string;
+}
+
+// RankAnalysisResponse互換の型（既存コードとの互換性のため）
+export interface RankAnalysisResponse {
+  percentile: number;
+  rank: number;
+  rank_name: string;
+  reasoning: string;
+}
+
 type MeasurementState = 
   | 'idle' 
   | 'charging' 
@@ -16,11 +46,10 @@ type MeasurementState =
   | 'error';
 
 interface RankMeasurementProps {
-  githubUsername?: string;
   onComplete?: (rank: RankAnalysisResponse) => void;
 }
 
-export function RankMeasurement({ githubUsername, onComplete }: RankMeasurementProps) {
+export function RankMeasurement({ onComplete }: RankMeasurementProps) {
   const [state, setState] = useState<MeasurementState>('idle');
   const [chargeProgress, setChargeProgress] = useState(0);
   const [rankResult, setRankResult] = useState<RankAnalysisResponse | null>(null);
@@ -162,13 +191,16 @@ export function RankMeasurement({ githubUsername, onComplete }: RankMeasurementP
     await new Promise(resolve => setTimeout(resolve, FINALIZING_DURATION));
 
     try {
-      // 実際のランク判定API呼び出し
-      const result = await analyzeRank({
-        github_username: githubUsername || 'default-user',
-        portfolio_text: 'ポートフォリオ情報',
-        qiita_id: '',
-        other_info: 'コミュニティ活動',
-      });
+      // OAuth完了時にバックエンドで既に判定されたランク情報を取得
+      const userInfo = await getCurrentUser();
+
+      // RankAnalysisResponse形式に変換
+      const result: RankAnalysisResponse = {
+        rank: userInfo.rank,
+        rank_name: RANK_NAMES[userInfo.rank] || '不明',
+        percentile: (userInfo.rank / 7) * 100, // 暫定: rank0-7を0-100%に変換
+        reasoning: `GitHub統計情報に基づいて自動判定されました。あなたのランクは「${RANK_NAMES[userInfo.rank] || '不明'}」です。`,
+      };
 
       setRankResult(result);
       setState('revealing');

frontend/src/lib/api/auth.ts

@@ -98,3 +98,35 @@ export async function logout(): Promise<{ message: string }> {
 
   return response.json();
 }
+
+/**
+ * 現在のユーザー情報を取得
+ *
+ * @returns ユーザー情報（id, username, rank, exp等）
+ * @throws 認証失敗時のエラー
+ */
+export async function getCurrentUser(): Promise<{
+  id: number;
+  username: string;
+  rank: number;
+  exp: number;
+  created_at: string;
+  updated_at: string;
+}> {
+  const baseUrl = getApiBaseUrl();
+  const url = `${baseUrl}/api/v1/users/me`;
+
+  const response = await fetch(url, {
+    method: "GET",
+    credentials: "include",
+  });
+
+  if (!response.ok) {
+    const errorText = await response.text();
+    throw new Error(
+      `ユーザー情報の取得に失敗しました: ${response.status} ${errorText}`,
+    );
+  }
+
+  return response.json();
+}