Merge pull request #89 from kc3hack/feature/issue-86-exercise-selection

feat: #86 演習選択画面を実装

Author: kdix-23-071

frontend/src/app/exercises/[category]/page.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import { use } from 'react';
+import Link from 'next/link';
+import { ExerciseList } from '@/features/exercise/components/ExerciseList';
+
+interface PageProps {
+  params: Promise<{
+    category: string;
+  }>;
+}
+
+export default function ExerciseCategoryPage({ params }: PageProps) {
+  const resolvedParams = use(params);
+  const category = resolvedParams.category;
+
+  // カテゴリー名を表示用に変換
+  const getCategoryDisplayName = (cat: string) => {
+    const names: Record<string, string> = {
+      web: 'Web',
+      ai: 'AI',
+      security: 'Security',
+      mobile: 'Mobile',
+      game: 'Game',
+      design: 'Design',
+      infrastructure: 'Infrastructure',
+      network: 'Network',
+    };
+    return names[cat.toLowerCase()] || cat;
+  };
+
+  return (
+    <div className="flex h-full flex-col bg-[#FDFEF0]">
+      {/* Header */}
+      <div className="bg-[#14532D] border-b-4 border-black px-6 py-4">
+        <div className="flex items-center gap-4">
+          <Link
+            href="/exercises"
+            className="flex items-center justify-center w-10 h-10 bg-[#4ADE80] border-4 border-black hover:bg-[#86EFAC] transition-colors shadow-[4px_4px_0_black] active:shadow-none active:translate-x-[4px] active:translate-y-[4px] font-bold"
+          >
+            <span className="text-xl">←</span>
+          </Link>
+          <h1 className="text-2xl font-bold text-[#4ADE80] flex items-center gap-2 tracking-widest drop-shadow-[2px_2px_0_black]">
+            <span className="text-3xl">🎓</span>
+            {getCategoryDisplayName(category)} 演習
+          </h1>
+        </div>
+      </div>
+
+      {/* Main Content */}
+      <div className="flex-1 px-6 py-6 overflow-auto">
+        <ExerciseList category={category} />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,137 @@
+import { Exercise } from '../types';
+
+export const getExercisesByCategory = async (category: string): Promise<Exercise[]> => {
+  // TODO: Replace with actual API call
+  await new Promise((resolve) => setTimeout(resolve, 300));
+
+  const exercises: Record<string, Exercise[]> = {
+    web: [
+      {
+        id: 'web-1',
+        title: 'HTML/CSSの基礎',
+        category: 'web',
+        difficulty: 'beginner',
+        status: 'completed',
+        estimatedTime: 30,
+        description: 'HTMLとCSSの基本的な使い方を学びます',
+        completionRate: 100,
+      },
+      {
+        id: 'web-2',
+        title: 'レスポンシブデザイン入門',
+        category: 'web',
+        difficulty: 'beginner',
+        status: 'in-progress',
+        estimatedTime: 45,
+        description: 'モバイルフレンドリーなWebサイトの作り方',
+        completionRate: 60,
+      },
+      {
+        id: 'web-3',
+        title: 'JavaScript基礎',
+        category: 'web',
+        difficulty: 'intermediate',
+        status: 'not-started',
+        estimatedTime: 60,
+        description: 'JavaScriptの基本文法とDOM操作',
+      },
+      {
+        id: 'web-4',
+        title: 'React入門',
+        category: 'web',
+        difficulty: 'intermediate',
+        status: 'not-started',
+        estimatedTime: 90,
+        description: 'Reactコンポーネントの作成方法',
+      },
+      {
+        id: 'web-5',
+        title: 'Next.jsでアプリ開発',
+        category: 'web',
+        difficulty: 'advanced',
+        status: 'not-started',
+        estimatedTime: 120,
+        description: 'Next.jsを使ったフルスタックアプリケーション',
+      },
+      {
+        id: 'web-6',
+        title: 'パフォーマンス最適化',
+        category: 'web',
+        difficulty: 'expert',
+        status: 'not-started',
+        estimatedTime: 90,
+        description: 'Webアプリケーションのパフォーマンス改善手法',
+      },
+    ],
+    ai: [
+      {
+        id: 'ai-1',
+        title: '機械学習の基礎',
+        category: 'ai',
+        difficulty: 'beginner',
+        status: 'not-started',
+        estimatedTime: 60,
+        description: '機械学習の基本概念を学びます',
+      },
+      {
+        id: 'ai-2',
+        title: 'Python for AI',
+        category: 'ai',
+        difficulty: 'beginner',
+        status: 'not-started',
+        estimatedTime: 45,
+        description: 'AI開発に必要なPythonの基礎',
+      },
+      {
+        id: 'ai-3',
+        title: 'ニューラルネットワーク入門',
+        category: 'ai',
+        difficulty: 'intermediate',
+        status: 'not-started',
+        estimatedTime: 90,
+        description: 'ニューラルネットワークの仕組み',
+      },
+      {
+        id: 'ai-4',
+        title: 'ディープラーニング実践',
+        category: 'ai',
+        difficulty: 'advanced',
+        status: 'not-started',
+        estimatedTime: 120,
+        description: 'CNNやRNNを使った実装',
+      },
+    ],
+    security: [
+      {
+        id: 'security-1',
+        title: 'セキュリティ基礎',
+        category: 'security',
+        difficulty: 'beginner',
+        status: 'not-started',
+        estimatedTime: 30,
+        description: '情報セキュリティの基本',
+      },
+      {
+        id: 'security-2',
+        title: 'Webセキュリティ',
+        category: 'security',
+        difficulty: 'intermediate',
+        status: 'not-started',
+        estimatedTime: 60,
+        description: 'XSSやCSRFなどの脆弱性対策',
+      },
+      {
+        id: 'security-3',
+        title: 'ペネトレーションテスト',
+        category: 'security',
+        difficulty: 'advanced',
+        status: 'not-started',
+        estimatedTime: 120,
+        description: 'セキュリティテストの実践',
+      },
+    ],
+  };
+
+  const categoryKey = category.toLowerCase();
+  return exercises[categoryKey] || [];
+};

frontend/src/features/exercise/components/ExerciseList.tsx

@@ -0,0 +1,97 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { Exercise, DifficultyLevel, DIFFICULTY_LABELS } from '../types';
+import { ExerciseListItem } from './ExerciseListItem';
+import { getExercisesByCategory } from '../api/mock';
+
+interface ExerciseListProps {
+  category: string;
+}
+
+const DIFFICULTY_TABS: DifficultyLevel[] = ['beginner', 'intermediate', 'advanced', 'expert'];
+
+export function ExerciseList({ category }: ExerciseListProps) {
+  const [exercises, setExercises] = useState<Exercise[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [activeDifficulty, setActiveDifficulty] = useState<DifficultyLevel>('beginner');
+
+  useEffect(() => {
+    const fetchExercises = async () => {
+      setLoading(true);
+      try {
+        const data = await getExercisesByCategory(category);
+        setExercises(data);
+      } catch (error) {
+        console.error('Failed to fetch exercises:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchExercises();
+  }, [category]);
+
+  const filteredExercises = exercises.filter((ex) => ex.difficulty === activeDifficulty);
+
+  const handleExerciseClick = (exerciseId: string) => {
+    // TODO: Navigate to exercise detail page
+    console.log(`Navigate to exercise: ${exerciseId}`);
+    // router.push(`/exercise/${category}/${exerciseId}`);
+  };
+
+  if (loading) {
+    return (
+      <div className="flex justify-center items-center h-64">
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[#3A7E56]"></div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Difficulty Tabs */}
+      <div className="flex gap-2 mb-6 border-b-2 border-[#3A7E56] pb-2">
+        {DIFFICULTY_TABS.map((difficulty) => {
+          const isActive = activeDifficulty === difficulty;
+          const count = exercises.filter((ex) => ex.difficulty === difficulty).length;
+          
+          return (
+            <button
+              key={difficulty}
+              onClick={() => setActiveDifficulty(difficulty)}
+              className={`px-6 py-2 font-bold text-lg transition-all ${
+                isActive
+                  ? 'text-[#2C5F2D] border-b-4 border-[#2C5F2D] -mb-[10px]'
+                  : 'text-[#6B7280] hover:text-[#3A7E56]'
+              }`}
+            >
+              {DIFFICULTY_LABELS[difficulty]}
+              {count > 0 && (
+                <span className="ml-2 text-sm opacity-70">({count})</span>
+              )}
+            </button>
+          );
+        })}
+      </div>
+
+      {/* Exercise List */}
+      <div className="flex-1 space-y-3">
+        {filteredExercises.length > 0 ? (
+          filteredExercises.map((exercise) => (
+            <ExerciseListItem
+              key={exercise.id}
+              exercise={exercise}
+              onClick={() => handleExerciseClick(exercise.id)}
+            />
+          ))
+        ) : (
+          <div className="flex flex-col items-center justify-center h-48 text-[#6B7280]">
+            <div className="text-6xl mb-4">📝</div>
+            <p className="text-lg">この難易度の演習はまだありません</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/src/features/exercise/components/ExerciseListItem.tsx

@@ -0,0 +1,68 @@
+'use client';
+
+import React from 'react';
+import { Exercise } from '../types';
+
+interface ExerciseListItemProps {
+  exercise: Exercise;
+  onClick: () => void;
+}
+
+export function ExerciseListItem({ exercise, onClick }: ExerciseListItemProps) {
+  const getStatusIcon = (status: Exercise['status']) => {
+    switch (status) {
+      case 'completed':
+        return '✓';
+      case 'in-progress':
+        return '▶';
+      case 'not-started':
+        return '○';
+    }
+  };
+
+  const getStatusColor = (status: Exercise['status']) => {
+    switch (status) {
+      case 'completed':
+        return 'text-[#4ADE80]';
+      case 'in-progress':
+        return 'text-[#FCD34D]';
+      case 'not-started':
+        return 'text-[#94A3B8]';
+    }
+  };
+
+  return (
+    <button
+      onClick={onClick}
+      className="w-full bg-[#FDFEF0] border-2 border-[#3A7E56] px-6 py-4 text-left transition-all hover:bg-[#F0F7F0] hover:border-[#2C5F2D] hover:shadow-md group"
+    >
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-4 flex-1">
+          <span className={`text-2xl font-bold ${getStatusColor(exercise.status)}`}>
+            {getStatusIcon(exercise.status)}
+          </span>
+          <div className="flex-1">
+            <h3 className="text-lg font-bold text-[#2C5F2D] group-hover:text-[#1a4023]">
+              {exercise.title}
+            </h3>
+            {exercise.completionRate !== undefined && exercise.status === 'in-progress' && (
+              <div className="mt-1 flex items-center gap-2">
+                <div className="w-32 h-2 bg-[#D1D5DB] rounded-full overflow-hidden">
+                  <div
+                    className="h-full bg-[#4ADE80] transition-all"
+                    style={{ width: `${exercise.completionRate}%` }}
+                  />
+                </div>
+                <span className="text-xs text-[#6B7280]">{exercise.completionRate}%</span>
+              </div>
+            )}
+          </div>
+        </div>
+        <div className="flex items-center gap-4 text-sm text-[#6B7280]">
+          <span className="font-medium">{exercise.estimatedTime}分</span>
+          <span className="text-2xl text-[#3A7E56] group-hover:translate-x-1 transition-transform">›</span>
+        </div>
+      </div>
+    </button>
+  );
+}