feat: integrate Firebase for authentication and data management, add GameItem type, and enhance UI with tooltips

src/services/api/api.ts

@@ -3,6 +3,7 @@ import { InvItemInteraction, Pet, Resources } from '../../types/Pet';
 import { PetCreationRequest } from '../../types/PetCreationRequest';
 import { PetActionGathered, PetUpdateActionRequest } from '../../types/PetAction';
 import { PetSkill, Skill } from '../../types/Skills';
+import { GameItem } from '../../types/GameItem';
 
 // Get API service instance
 const api = ApiService.getInstance();
@@ -52,8 +53,13 @@ export async function putPetItemInteract(petId: string, itemId: number, inter: I
   return response.data;
 }
 
+export async function getItemInfo(itemId: number): Promise<GameItem> {
+  const response = await api.get<GameItem>(`/api/v1/gamedata/item/${itemId}`);
+  return response.data;
+}
+
 export async function getItemIcon(itemId: number): Promise<Blob> {
-  const response = await api.get<Blob>(`/api/v1/gamedata/item/icon/${itemId}`, {
+  const response = await api.get<Blob>(`/api/v1/gamedata/item/${itemId}/icon`, {
     responseType: 'blob',
     headers: {
       Accept: 'image/png'

src/services/api/index.ts

@@ -6,14 +6,28 @@ import { ApiResponse, RequestOptions, ApiError } from './types';
 
 class ApiService {
   private static instance: ApiService;
-  private axios: AxiosInstance;
+  private axiosInstance: AxiosInstance;
 
   private constructor() {
     // Create axios instance with base configuration
-    this.axios = axios.create(apiConfig);
-    
+    this.axiosInstance = axios.create(apiConfig);
+
     // Setup interceptors
-    setupInterceptors(this.axios);
+    setupInterceptors(this.axiosInstance);
+
+    // Add request interceptor
+    this.axiosInstance.interceptors.request.use(
+      (config) => {
+        const token = localStorage.getItem('TOKEN');
+        if (token) {
+          config.headers.Authorization = `Bearer ${token}`;
+        }
+        return config;
+      },
+      (error) => {
+        return Promise.reject(error);
+      }
+    );
   }
 
   public static getInstance(): ApiService {
@@ -40,7 +54,7 @@ class ApiService {
         config.data = data;
       }
 
-      const response = await this.axios.request<T>(config);
+      const response = await this.axiosInstance.request<T>(config);
 
       return {
         data: response.data,

src/services/api/userApi.ts

@@ -0,0 +1,10 @@
+import { Pet } from '../../types/Pet';
+import { ApiService } from './index';
+
+// Get API service instance
+const api = ApiService.getInstance();
+
+export async function fetchPets(): Promise<Pet[]> {
+  const response = await api.get<Pet[]>('/api/v1/pet');
+  return response.data;
+}

src/services/auth/auth.ts

@@ -0,0 +1,40 @@
+import {
+  signInWithEmailAndPassword,
+  createUserWithEmailAndPassword,
+  signOut as firebaseSignOut,
+  User,
+  GoogleAuthProvider,
+  signInWithPopup
+} from 'firebase/auth';
+import { auth } from '../../config/firebase';
+
+export async function login(email: string, password: string): Promise<string> {
+  const userCredential = await signInWithEmailAndPassword(auth, email, password);
+  const token = await userCredential.user.getIdToken();
+  localStorage.setItem('TOKEN', token);
+  return token;
+}
+
+export async function register(email: string, password: string): Promise<string> {
+  const userCredential = await createUserWithEmailAndPassword(auth, email, password);
+  const token = await userCredential.user.getIdToken();
+  localStorage.setItem('TOKEN', token);
+  return token;
+}
+
+export async function signOut(): Promise<void> {
+  await firebaseSignOut(auth);
+  localStorage.removeItem('TOKEN');
+}
+
+export function getCurrentUser(): User | null {
+  return auth.currentUser;
+}
+
+export async function signInWithGoogle(): Promise<string> {
+  const provider = new GoogleAuthProvider();
+  const userCredential = await signInWithPopup(auth, provider);
+  const token = await userCredential.user.getIdToken();
+  localStorage.setItem('TOKEN', token);
+  return token;
+}