Merge pull request #68 from kc3hack/feature/issue-67-rank-integration

feat: #67 ランク判定APIとダッシュボードの統合(繋ぎこみ)

Author: Neon-straySheep

frontend/src/features/dashboard/api/mock.ts

@@ -84,6 +84,7 @@ export async function fetchUserDashboard(userId: string): Promise<UserStatus> {
     userId,
     displayName: 'Sample User',
     avatar: '👨‍💻',
+    githubUsername: 'sampleuser',
     totalExp: 12300,
     currentRank: mockRank,
     badges: mockBadges,

frontend/src/features/dashboard/api/rankApi.ts

@@ -0,0 +1,31 @@
+const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000";
+
+export interface RankAnalysisRequest {
+  github_username: string;
+  portfolio_text?: string;
+  qiita_id?: string;
+  other_info?: string;
+}
+
+export interface RankAnalysisResponse {
+  percentile: number;
+  rank: number;
+  rank_name: string;
+  reasoning: string;
+}
+
+export async function analyzeRank(
+  request: RankAnalysisRequest
+): Promise<RankAnalysisResponse> {
+  const response = await fetch(`${API_BASE_URL}/api/v1/analyze/rank`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(request),
+  });
+
+  if (!response.ok) {
+    throw new Error(`Rank analysis failed: ${response.statusText}`);
+  }
+
+  return response.json();
+}

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

@@ -0,0 +1,40 @@
+'use client';
+
+import { RANK_COLORS, RankLevel } from "../constants/rankColors";
+
+interface RankBadgeProps {
+  rank: number;
+  label?: string;
+  size?: "sm" | "md" | "lg";
+  showStar?: boolean;
+}
+
+export function RankBadge({
+  rank,
+  label,
+  size = "md",
+  showStar = true,
+}: RankBadgeProps) {
+  const colors =
+    RANK_COLORS[rank as RankLevel] || RANK_COLORS[0];
+
+  const sizeClasses = {
+    sm: "px-2 py-1 text-xs",
+    md: "px-3 py-1.5 text-sm",
+    lg: "px-4 py-2 text-base",
+  };
+
+  return (
+    <span
+      className={`inline-flex items-center gap-2 rounded-full font-semibold ${sizeClasses[size]}`}
+      style={{
+        backgroundColor: colors.bg,
+        color: colors.text,
+      }}
+    >
+      {showStar && <span className="text-xl">★</span>}
+      <span>Rank {rank}</span>
+      {label && <span>- {label}</span>}
+    </span>
+  );
+}

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

@@ -7,6 +7,8 @@
 
 import Image from 'next/image';
 import type { UserStatus } from '../types';
+import { useRankAnalysis } from '../hooks/useRankAnalysis';
+import { RankBadge } from './RankBadge';
 
 interface StatusCardProps {
   userStatus: UserStatus;
@@ -21,6 +23,7 @@ const getRankImage = (rankTitle: string) => {
 };
 
 export function StatusCard({ userStatus }: StatusCardProps) {
+  const { rank, loading } = useRankAnalysis(userStatus.githubUsername);
   const progressPercentage = userStatus.currentRank.progress;
 
   return (
@@ -46,6 +49,20 @@ export function StatusCard({ userStatus }: StatusCardProps) {
         </div>
       </div>
 
+      {/* ランクバッジ（新規追加） */}
+      {loading ? (
+        <div className="mb-4 animate-pulse">
+          <div className="h-8 w-48 rounded-full bg-gray-200"></div>
+        </div>
+      ) : rank ? (
+        <div className="mb-4 space-y-2">
+          <RankBadge rank={rank.rank} label={rank.rank_name} size="lg" />
+          <p className="text-sm text-gray-600 dark:text-gray-400">
+            {rank.reasoning}
+          </p>
+        </div>
+      ) : null}
+
       {/* ランク情報 */}
       <div className="mb-6 space-y-2">
         <div className="flex items-center justify-between">

frontend/src/features/dashboard/constants/rankColors.ts

@@ -0,0 +1,14 @@
+export const RANK_COLORS = {
+  0: { bg: "#e5e7eb", text: "#6b7280", label: "初心者" },
+  1: { bg: "#dbeafe", text: "#3b82f6", label: "見習い" },
+  2: { bg: "#d1fae5", text: "#10b981", label: "駆け出し" },
+  3: { bg: "#fef3c7", text: "#f59e0b", label: "中級者" },
+  4: { bg: "#fed7aa", text: "#ea580c", label: "実践者" },
+  5: { bg: "#fecaca", text: "#dc2626", label: "熟練者" },
+  6: { bg: "#e9d5ff", text: "#9333ea", label: "エキスパート" },
+  7: { bg: "#fbcfe8", text: "#db2777", label: "マスター" },
+  8: { bg: "#c7d2fe", text: "#4f46e5", label: "レジェンド" },
+  9: { bg: "#fde68a", text: "#ca8a04", label: "グランドマスター" },
+} as const;
+
+export type RankLevel = keyof typeof RANK_COLORS;

frontend/src/features/dashboard/hooks/useRankAnalysis.ts

@@ -0,0 +1,43 @@
+'use client';
+
+import { useState, useEffect } from "react";
+import { analyzeRank, RankAnalysisResponse } from "../api/rankApi";
+
+export function useRankAnalysis(githubUsername?: string) {
+  const [rank, setRank] = useState<RankAnalysisResponse | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    if (!githubUsername) return;
+
+    const fetchRank = async () => {
+      setLoading(true);
+      try {
+        const mockData = {
+          github_username: githubUsername,
+          portfolio_text: "個人サイト: https://example.com",
+          qiita_id: "",
+          other_info: "エンジニアコミュニティ活動",
+        };
+
+        const result = await analyzeRank(mockData);
+        setRank(result);
+      } catch (err) {
+        setError(err as Error);
+        setRank({
+          percentile: 0,
+          rank: 0,
+          rank_name: "種子",
+          reasoning: "ランク判定に失敗しました",
+        });
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchRank();
+  }, [githubUsername]);
+
+  return { rank, loading, error };
+}

frontend/src/features/dashboard/types/index.ts

@@ -32,6 +32,7 @@ export interface UserStatus {
   userId: string;
   displayName: string;
   avatar?: string;
+  githubUsername?: string;
   totalExp: number;
   currentRank: Rank;
   badges: Badge[];