API_INTEGRATION.md

API Integration Guide

Environment Variables

Create a .env file in the project root:

# API Configuration
VITE_API_BASE_URL=/api

# MSW (Mock Service Worker) - set to "true" to use mock data
VITE_ENABLE_MSW=false

Toggle Mock Data

To switch between real API and mock data:

1. Use Real API (default):

   VITE_ENABLE_MSW=false

2. Use Mock Data (for development without backend):

   VITE_ENABLE_MSW=true

Available API Hooks

All API hooks are located in src/hooks/api/:

Authentication

• useLogin() - Login with credentials
• useLogout() - Logout

Channels

• useChannels() - Get all channels
• useRoomList(channelId) - Get rooms in a channel
• useActivateChannel() - Activate a channel
• useSetLesson() - Set lesson configuration
• useFinishLesson() - Finish a lesson

Students

• useStudents() - Get all students
• useAddStudent() - Add a new student
• useDeleteStudent() - Delete a student

Rooms

• useJoinRoom() - Join a room as a student

Matches

• useMatchHistory() - Get match history
• useDownloadHistory() - Download match history as Excel

API Integration Status

✅ Completed Components

The following components have been fully integrated with the API:

1. TeacherLogin.tsx ✅

   • Uses useLogin() for authentication
   • Stores JWT token in localStorage

2. ChannelList.tsx ✅

   • Uses useChannels() for channel list
   • Uses useActivateChannel() for activating channels

3. StudentManagement.tsx ✅

   • Uses useStudents() for student list
   • Uses useAddStudent() for adding students
   • Uses useDeleteStudent() for deleting students

4. GameRecords.tsx ✅

   • Uses useMatchHistory() for match history with date filtering
   • Uses useDownloadMatchHistory() for Excel download

5. GameSetup.tsx ✅

   • Uses useStudents() for student list
   • Uses useSetLesson() for lesson configuration

6. ClassForm.tsx ✅

   • Uses useStudents() for student list in game setup

7. RoomManagement.tsx ✅

   • Uses useStudents() for student list in new game dialog
   • Uses useRoomList(channel.id) for room data
   • Uses useFinishLesson() for deactivating channel

🎉 All Main Components Integrated!

All teacher-facing components have been successfully integrated with the real API. The application can now:

• Authenticate teachers
• Manage channels and lessons
• Manage students
• View and manage game rooms
• Track match history
• Download Excel reports

🔄 Remaining Components

The following components may still use mock data:

1. StudentView.tsx / RoomList.tsx
   • May need useRoomList(channelId) for getting rooms
   • Student-facing components for joining rooms

Example: Converting Mock Data to API

Before (with mock data):

const students = [
  "김민수",
  "이지은",
  // ... more students
];

const rooms: Room[] = [
  {
    id: "1",
    roomNumber: 1,
    blackPlayer: "김민수",
    whitePlayer: "이지은",
    status: "waiting",
  },
  // ... more rooms
];

After (with API):

import { useStudents } from "@/hooks/api/useStudents";
import { useRoomList } from "@/hooks/api/useChannels";

function RoomManagement({ channel }) {
  // Fetch students from API
  const { data: studentsData, isLoading: studentsLoading } = useStudents();
  const students = studentsData?.map(s => s.name) || [];

  // Fetch rooms from API
  const { data: roomsData, isLoading: roomsLoading } = useRoomList(channel.id);
  const rooms = roomsData || [];

  if (studentsLoading || roomsLoading) {
    return <div>Loading...</div>;
  }

  // ... rest of component
}

Testing

1. Start backend server:

   cd go-chess-timer-be
   npm run start:dev

2. Start frontend with real API:

   cd timer-fe
   # Make sure VITE_ENABLE_MSW=false in .env
   npm run dev

3. Or start frontend with mock data:

   cd timer-fe
   # Set VITE_ENABLE_MSW=true in .env
   npm run dev