Merge pull request #107 from kc3hack/feature/issue-102-rank-charge-animation

feat: ランク測定の長押しチャージUI (#102)

Author: kdix-23-071

frontend/src/app/globals.css

@@ -45,4 +45,72 @@ body {
   80% { transform: translateY(-8px); }
   90% { transform: translateY(-4px); }
   100% { transform: translateY(0px); }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes scaleIn {
+  0% {
+    transform: scale(0);
+  }
+  50% {
+    transform: scale(1.1);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes glow {
+  0%, 100% {
+    filter: drop-shadow(0 0 10px rgba(252, 211, 77, 0.5));
+  }
+  50% {
+    filter: drop-shadow(0 0 20px rgba(252, 211, 77, 0.9));
+  }
+}
+
+@keyframes sparkle {
+  0%, 100% {
+    opacity: 0;
+    transform: scale(0) rotate(0deg);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.5) rotate(180deg);
+  }
+}
+
+@keyframes shimmer {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+.animate-fadeIn {
+  animation: fadeIn 1s ease-out forwards;
+}
+
+.animate-scaleIn {
+  animation: scaleIn 0.8s ease-out forwards;
+}
+
+.animate-glow {
+  animation: glow 2s ease-in-out infinite;
+}
+
+.animate-sparkle {
+  animation: sparkle 1.5s ease-in-out infinite;
 }

frontend/src/app/login/page.tsx

@@ -3,6 +3,7 @@
 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();
@@ -11,6 +12,7 @@ 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();
@@ -33,14 +35,19 @@ export default function LoginPage() {
   };
 
   const handleGitHubLogin = () => {
-    // GitHub OAuth フローを開始（バックエンドへリダイレクト）
+    // ランク測定UIを表示
+    setShowRankMeasurement(true);
+  };
+
+  const handleRankMeasurementComplete = () => {
+    // ランク測定完了後、GitHub OAuth フローを開始
     const apiBaseUrl =
       process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000";
     window.location.href = `${apiBaseUrl}/api/v1/auth/github/login`;
   };
 
   return (
-    <div className="flex min-h-screen items-center justify-center bg-gradient-to-br from-[#97C88C] via-[#A8D5A1] to-[#8BC880] p-4">
+    <div className="flex min-h-screen items-center justify-center bg-linear-to-br from-[#97C88C] via-[#A8D5A1] to-[#8BC880] p-4">
       <div className="w-full max-w-md rounded-lg border-4 border-[#2C5F2D] bg-[#F5F5DC] p-8 shadow-[8px_8px_0_0_#2C5F2D] animate-[slideUp_0.3s_ease-out]">
         {/* Header with Icon */}
         <div className="mb-6 text-center">
@@ -65,12 +72,12 @@ export default function LoginPage() {
             type="button"
             onClick={handleGitHubLogin}
             disabled={loading}
-            className="group relative w-full overflow-hidden rounded border-2 border-[#2C5F2D] bg-[#2C5F2D] p-4 font-mono font-bold tracking-widest text-white shadow-[4px_4px_0_0_#1F4521] transition-all hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[2px_2px_0_0_#1F4521] active:translate-x-[4px] active:translate-y-[4px] active:shadow-none disabled:opacity-50 disabled:cursor-not-allowed"
+            className="group relative w-full overflow-hidden rounded border-2 border-[#2C5F2D] bg-[#2C5F2D] p-4 font-mono font-bold tracking-widest text-white shadow-[4px_4px_0_0_#1F4521] transition-all hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-[2px_2px_0_0_#1F4521] active:translate-x-1 active:translate-y-1 active:shadow-none disabled:opacity-50 disabled:cursor-not-allowed"
           >
             <span className="relative z-10 flex items-center justify-center gap-2">
               🚀 GitHub でログイン（推奨）
             </span>
-            <div className="absolute inset-0 -translate-x-full bg-gradient-to-r from-transparent via-white/20 to-transparent group-hover:translate-x-full transition-transform duration-700" />
+            <div className="absolute inset-0 -translate-x-full bg-linear-to-r from-transparent via-white/20 to-transparent group-hover:translate-x-full transition-transform duration-700" />
           </button>
           <p className="mt-3 text-center text-xs text-gray-600 leading-relaxed">
             💡 GitHubリポジトリを分析して
@@ -184,6 +191,17 @@ 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/app/rank-measurement/page.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+/**
+ * Rank Measurement Page
+ * ランク測定専用ページ
+ */
+
+import { withAuth } from "@/lib/auth/withAuth";
+import { RankMeasurement } from "@/features/dashboard/components/RankMeasurement";
+import { useRouter } from "next/navigation";
+
+function RankMeasurementPage() {
+  const router = useRouter();
+
+  const handleComplete = () => {
+    // ランク測定完了後、ダッシュボードに戻る
+    router.push('/dashboard');
+  };
+
+  return (
+    <div className="min-h-screen bg-linear-to-b from-[#FDFEF0] to-[#E8F5E9] flex flex-col">
+      {/* ヘッダー */}
+      <header className="sticky top-0 z-50 flex h-16 w-full items-center justify-between bg-[#14532D] px-6 text-white border-b-4 border-black shadow-[0_4px_0_rgba(0,0,0,0.2)]">
+        <div className="flex items-center gap-2">
+          <div className="h-8 w-8 bg-[#FCD34D] border-2 border-black animate-pulse"></div>
+          <span className="font-sans font-bold text-xl tracking-widest text-[#FCD34D] [text-shadow:2px_2px_0_black]">
+            KC3 HACK
+          </span>
+        </div>
+        <button
+          onClick={() => router.push('/dashboard')}
+          className="px-4 py-2 text-sm font-bold bg-[#4ADE80] text-[#14532D] border-2 border-black hover:translate-y-1 transition-all"
+        >
+          ダッシュボードに戻る
+        </button>
+      </header>
+
+      {/* メインコンテンツ */}
+      <main className="flex-1 flex items-center justify-center">
+        <RankMeasurement onComplete={handleComplete} />
+      </main>
+    </div>
+  );
+}
+
+export default withAuth(RankMeasurementPage);

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

@@ -64,6 +64,17 @@ export function AppSidebar() {
               <span className="text-lg">STATS</span>
             </Link>
           </li>
+          
+          {/* Rank Measurement */}
+          <li>
+            <Link
+              href="/rank-measurement"
+              className={getLinkClass('/rank-measurement')}
+            >
+              <div className="flex h-8 w-8 items-center justify-center text-xl mr-3 bg-white border-2 border-black text-black">🎯</div>
+              <span className="text-lg">RANK</span>
+            </Link>
+          </li>
         </ul>
 
         {/* System Info Box */}