[FRONTEND] 임시 api 연결 (#91)

임시 api 연결

Author: yuhoyeong

frontend/.env

@@ -1,4 +1,6 @@
 VITE_KAKAO_CLIENT_ID=e84faf4e473047e82fd05e50e9b0c0ce
 VITE_KAKAO_AUTH_URL=https://kauth.kakao.com/oauth/authorize
 VITE_KAKAO_REDIRECT_URI=http://localhost:3000/oauth/kakao/redirect
-VITE_API_URL=https://api.com-together.org
+# VITE_API_URL=https://api.com-together.org
+
+VITE_API_URL=http://13.211.131.16:8080/

frontend/src/api/core/query-config.ts

@@ -61,6 +61,8 @@ export const queryKeys = {
     AUTO_COMPLETE: (query: string) =>
       ['glossary', 'autocomplete', query] as const,
     DETAIL: (query: string) => ['glossary', 'detail', query] as const,
+    HISTORY: (size?: number) => 
+      size ? ['glossary', 'history', size] : ['glossary', 'history'] as const,
   },
 
   PRODUCTS: {

frontend/src/api/glossary/useGlossaryHistory.ts

@@ -0,0 +1,31 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { queryKeys } from '../core/query-config';
+import { glossaryService } from '@/api/services/glossaryService';
+
+/**
+ * 검색 기록을 가져오는 React Query 훅
+ * @param size 조회할 검색 기록 개수 (기본값: 30)
+ */
+export const useGlossaryHistory = (size: number = 30) => {
+  return useQuery({
+    queryKey: queryKeys.GLOSSARY.HISTORY(size),
+    queryFn: () => glossaryService.getGlossaryHistory(size),
+    staleTime: 1000 * 60 * 5, // 5분
+    gcTime: 1000 * 60 * 10, // 10분
+  });
+};
+
+/**
+ * 검색 기록을 삭제하는 React Query 훅
+ */
+export const useDeleteGlossaryHistory = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (historyId: number) => glossaryService.deleteGlossaryHistory(historyId),
+    onSuccess: () => {
+      // 삭제 성공 시 검색 기록 목록을 다시 불러옴
+      queryClient.invalidateQueries({ queryKey: queryKeys.GLOSSARY.HISTORY() });
+    },
+  });
+};

frontend/src/api/services/glossaryService.ts

@@ -1,5 +1,5 @@
 import { client as apiClient } from '@/api/core';
-import type { GlossaryAutoCompleteResponse, GlossaryDetail } from '@/types';
+import type { GlossaryAutoCompleteResponse, GlossaryDetail, SearchHistoryResponseDto } from '@/types';
 
 export const glossaryService = {
   /**
@@ -8,7 +8,6 @@ export const glossaryService = {
    * @param size 반환할 결과의 최대 개수 (기본값 5)
    */
   getAutoComplete: async (query: string, size: number = 5) => {
-    console.log('🔍 [Glossary] 자동완성 요청:', { query, size });
     try {
       const response = await apiClient.get<GlossaryAutoCompleteResponse>(
         '/glossary/autocomplete',
@@ -19,18 +18,11 @@ export const glossaryService = {
           },
         },
       );
-      console.log('✅ [Glossary] 자동완성 성공:', response);
-      console.log('   - response.data:', response.data);
-      console.log('   - response.data type:', typeof response.data);
-      
-      // response는 ApiResponse 형태: { success, message, data }
-      // response.data는 실제 데이터: { suggestions: string[] }
+
       const suggestions = (response.data as GlossaryAutoCompleteResponse)?.suggestions || [];
-      console.log('   - suggestions:', suggestions);
 
       return suggestions;
     } catch (error) {
-      console.error('❌ [Glossary] 자동완성 실패:', error);
       // 에러 정보 출력
       const axiosError = error as { 
         response?: { 
@@ -65,4 +57,43 @@ export const glossaryService = {
       throw error;
     }
   },
+
+  /**
+   * 검색 기록 조회
+   * @param size 조회할 검색 기록 개수 (기본값 30)
+   */
+  getGlossaryHistory: async (size: number = 30) => {
+    console.log('🔍 [Glossary] 검색 기록 조회 요청:', { size });
+    try {
+      const response = await apiClient.get<SearchHistoryResponseDto>(
+        '/glossary/history',
+        {
+          params: { size },
+        }
+      );
+      console.log('✅ [Glossary] 검색 기록 조회 성공:', response);
+      return response.data;
+    } catch (error) {
+      console.error('❌ [Glossary] 검색 기록 조회 실패:', error);
+      throw error;
+    }
+  },
+
+  /**
+   * 검색 기록 삭제
+   * @param historyId 삭제할 검색 기록 ID
+   */
+  deleteGlossaryHistory: async (historyId: number) => {
+    console.log('🗑️ [Glossary] 검색 기록 삭제 요청:', { historyId });
+    try {
+      const response = await apiClient.delete<void>(
+        `/glossary/history/${historyId}`
+      );
+      console.log('✅ [Glossary] 검색 기록 삭제 성공:', response);
+      return response.data;
+    } catch (error) {
+      console.error('❌ [Glossary] 검색 기록 삭제 실패:', error);
+      throw error;
+    }
+  },
 };

frontend/src/components/common/header/header.tsx

@@ -26,7 +26,7 @@ export default function Header() {
           }}
         />
         <NavButton
-          text="호환성 체크"
+          text="견적 짜기"
           onClick={() => {
             navigate("/compatibility-check");
           }}

frontend/src/types/glossary.ts

@@ -12,4 +12,14 @@ export interface GlossaryDetail {
 export interface GlossaryDetailResponse {
   name: string;
   description: string;
+}
+
+// 검색 기록 타입
+export interface SearchHistoryDto {
+  historyId: number;
+  keyword: string;
+}
+
+export interface SearchHistoryResponseDto {
+  histories: SearchHistoryDto[];
 }