[FRONTEND] layered 패턴 적용 (#86)

layered 패턴 적용

api 패턴 최적화 (최종)

가이드 api 연결 예정

Author: yuhoyeong

frontend/.vscode/settings.json

@@ -5,6 +5,7 @@
     "kakao",
     "lineheigh",
     "lineheight",
+    "mainboard",
     "VITE"
   ],
   "cSpell.customDictionaries": {

frontend/src/App.tsx

@@ -1,4 +1,4 @@
-import { BrowserRouter, Route, Routes, Navigate } from "react-router";
+import { BrowserRouter, Route, Routes } from "react-router";
 import { QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import "./App.css";
@@ -14,6 +14,7 @@ import SecondSetting from "./pages/secondSetting";
 import RedirectPage from "./pages/oauth/kakao/RedirectPage";
 import ExpertVerifyLayout from "./components/layout/expertVerifyLayout";
 import { ProtectedRoute } from "./routes/ProtectedRoute";
+import RootRedirect from "./routes/RootRedirect";
 import {
   ErrorBoundary,
   GlobalLoader,
@@ -25,7 +26,7 @@ const Router = () => {
   return (
     <BrowserRouter>
       <Routes>
-        <Route path={"/"} element={<Navigate to="/signIn" replace />} />
+        <Route path={"/"} element={<RootRedirect />} />
         <Route
           path={"/home"}
           element={

frontend/src/api/core/types.ts

@@ -134,7 +134,7 @@ export const API_ENDPOINTS = {
 
   // 사용자 관련
   USERS: {
-    PROFILE: '/users/profile',
+    PROFILE: '/users/me',
     INITIALIZE: '/users/initialize',
     DELETE: '/users',
     EXPERT_VERIFY: '/users/expert-verify',

frontend/src/api/guide/useGuideData.ts

@@ -39,39 +39,30 @@ const transformApiGuideData = (apiData: ApiGuideData, id: number): GuideData =>
  * 가이드 데이터 조회 훅 옵션
  */
 interface UseGuideDataOptions {
-  category?: string;
   enabled?: boolean;
-  useDummy?: boolean;
 }
 
+/**
+ * 모든 가이드 카테고리의 데이터를 한 번에 조회
+ */
 export const useGuideData = (
   options: UseGuideDataOptions = {}
 ) => {
-  const { category, enabled = true } = options;
+  const { enabled = true } = options;
 
   return useQuery({
-    queryKey: category 
-      ? QUERY_KEYS.GUIDE.BY_CATEGORY(category)
-      : QUERY_KEYS.GUIDE.ALL,
+    queryKey: QUERY_KEYS.GUIDE.ALL,
 
     queryFn: async () => {
-      // 실제 API 호출
-      if (category) {
-        // 카테고리를 소문자로 변환하여 API 호출
-        const apiData = await guideService.getGuideByCategory(category.toLowerCase());
-        // API 응답을 GuideData 형식으로 변환
-        return transformApiGuideData(apiData, 1);
-      }
-      
-      // 모든 카테고리 데이터를 가져오기
-      // 백엔드가 모든 카테고리를 반환하는 API가 없으므로 각 카테고리별로 호출
+      // 카테고리 목록 하드코딩
       const categories = ['cpu', 'mainboard', 'ram', 'gpu', 'storage', 'power', 'case', 'cooler'];
 
       const allGuides = await Promise.all(
         categories.map(async (cat, index) => {
           try {
             const apiData = await guideService.getGuideByCategory(cat);
-            return transformApiGuideData(apiData, index + 1);
+            const transformed = transformApiGuideData(apiData, index + 1);
+            return transformed;
           } catch (error) {
             console.warn(`카테고리 ${cat} 데이터를 불러오는데 실패했습니다:`, error);
             return null;
@@ -80,12 +71,14 @@ export const useGuideData = (
       );
 
       // null이 아닌 데이터만 필터링하여 반환
-      return allGuides.filter((guide): guide is GuideData => guide !== null);
+      const validGuides = allGuides.filter((guide): guide is GuideData => guide !== null);
+      
+      return validGuides;
     },
 
     enabled,
     staleTime: 1000 * 60 * 5, // 5분
-    gcTime: 1000 * 60 * 30, // 30분 (cacheTime에서 변경됨)
+    gcTime: 1000 * 60 * 30, // 30분
   });
 };
 

frontend/src/api/services/guideService.ts

@@ -22,13 +22,16 @@ class GuideService {
 
   /**
    * 카테고리별 가이드 데이터 조회
-   * @param category - 가이드 카테고리 (CPU, 메인보드, RAM 등)
+   * @param category - 가이드 카테고리 (cpu, mainboard, ram 등)
    */
   async getGuideByCategory(category: string): Promise<ApiGuideData> {
-    const response = await apiClient.get<ApiResponse<ApiGuideData>>(
-      API_ENDPOINTS.GUIDE.BY_CATEGORY(category)
+    const response = await apiClient.get<ApiGuideData>(
+      API_ENDPOINTS.GUIDE.BASE,
+      { 
+        params: { category } 
+      }
     );
-    return response.data.data;
+    return response.data;
   }
 
   /**

frontend/src/api/services/useDeleteUser.ts

@@ -0,0 +1,24 @@
+import { useMutation } from '@tanstack/react-query';
+import { useAuthStore } from '../../stores/useAuthStore';
+import { apiClient } from '../core/client';
+import type { CommonMutationOptions } from '../core/query-config';
+import { API_ENDPOINTS } from '../core/types';
+
+// 계정 삭제
+export function useDeleteUser(
+  options?: CommonMutationOptions<void, void>
+) {
+  const { clearAuthState } = useAuthStore();
+
+  return useMutation({
+    mutationFn: async () => {
+      const response = await apiClient.delete<void>(API_ENDPOINTS.USERS.DELETE);
+      return response;
+    },
+    onSuccess: () => {
+      clearAuthState();
+      window.location.href = '/signIn';
+    },
+    ...options,
+  });
+}

frontend/src/api/services/useExpertVerify.ts

@@ -0,0 +1,48 @@
+import { useMutation } from '@tanstack/react-query';
+import { apiClient } from '../core/client';
+import { 
+  invalidateQueries 
+} from '../core/query-config';
+import type { CommonMutationOptions } from '../core/query-config';
+import { API_ENDPOINTS } from '../core/types';
+
+// 전문가 인증
+interface ExpertVerifyRequest {
+  certification?: string;
+  portfolio_url?: string;
+  certification_file?: File;
+}
+
+export function useExpertVerify(
+  options?: CommonMutationOptions<void, ExpertVerifyRequest>
+) {
+  return useMutation({
+    mutationFn: async (data: ExpertVerifyRequest) => {
+      if (data.certification_file) {
+        // 파일이 있는 경우 FormData 사용
+        const formData = new FormData();
+        formData.append('certification_file', data.certification_file);
+        
+        if (data.certification) {
+          formData.append('certification', data.certification);
+        }
+        if (data.portfolio_url) {
+          formData.append('portfolio_url', data.portfolio_url);
+        }
+
+        return apiClient.uploadFile<void>(API_ENDPOINTS.USERS.EXPERT_VERIFY, formData);
+      } else {
+        // 파일이 없는 경우 JSON 사용
+        return apiClient.post<void>(API_ENDPOINTS.USERS.EXPERT_VERIFY, {
+          certification: data.certification,
+          portfolio_url: data.portfolio_url,
+        });
+      }
+    },
+    onSuccess: () => {
+      // 프로필 정보 갱신
+      invalidateQueries.userProfile();
+    },
+    ...options,
+  });
+}

frontend/src/api/services/useInitializeUser.ts

@@ -0,0 +1,42 @@
+import { useMutation } from '@tanstack/react-query';
+import { useAuthStore } from '../../stores/useAuthStore';
+import { apiClient } from '../core/client';
+import { 
+  invalidateQueries 
+} from '../core/query-config';
+import type { CommonMutationOptions } from '../core/query-config';
+import { API_ENDPOINTS } from '../core/types';
+import type { UserData } from '../../types/user';
+
+// 사용자 초기화
+interface InitializeUserRequest {
+  role: string;
+  interest_ids: number[];
+  custom_interests?: string[];
+}
+
+export function useInitializeUser(
+  options?: CommonMutationOptions<UserData, InitializeUserRequest>
+) {
+  const { setUser } = useAuthStore();
+
+  return useMutation({
+    mutationFn: async (data: InitializeUserRequest) => {
+      const response = await apiClient.put<UserData>(
+        API_ENDPOINTS.USERS.INITIALIZE, 
+        data
+      );
+      return response;
+    },
+    onSuccess: (response) => {
+      if (response.success && response.data) {
+        setUser(response.data);
+        invalidateQueries.user();
+        
+        // 홈으로 이동
+        window.location.href = '/home';
+      }
+    },
+    ...options,
+  });
+}

frontend/src/api/services/useKakaoLogin.ts

@@ -0,0 +1,84 @@
+import { useMutation } from '@tanstack/react-query';
+import { useAuthStore } from '../../stores/useAuthStore';
+import { useTokenStore } from '../../stores/useTokenStore';
+import { apiClient } from '../core/client';
+import { API_ENDPOINTS } from '../core/types';
+import { getRedirectUri } from '../../config/api';
+import type { UserData } from '../../types/user';
+
+// 카카오 로그인
+interface KakaoLoginRequest {
+  code: string;
+  redirect_uri: string;
+}
+
+interface KakaoLoginResponse {
+  access_token: string;
+  refresh_token: string;
+  user?: UserData;
+}
+
+export function useKakaoLogin() {
+  const { setTokens } = useTokenStore();
+  const { setAuthenticated, setUser, clearAuthState } = useAuthStore();
+  const { clearTokens } = useTokenStore();
+
+  // 카카오 로그인 페이지로 이동하는 함수
+  const initiateKakaoLogin = () => {
+    // 로그인 시작 전 기존 인증 정보 완전 제거
+    clearTokens();
+    clearAuthState();
+    localStorage.removeItem("token-store");
+    localStorage.removeItem("auth-store");
+
+    const KAKAO_AUTH_URL = "https://kauth.kakao.com/oauth/authorize";
+    const KAKAO_CLIENT_ID = import.meta.env.VITE_KAKAO_CLIENT_ID;
+    const REDIRECT_URI = getRedirectUri();
+
+    if (!KAKAO_CLIENT_ID) {
+      console.error("KAKAO_CLIENT_ID가 설정되지 않았습니다.");
+      alert("카카오 클라이언트 ID가 설정되지 않았습니다. 환경 변수를 확인해주세요.");
+      return;
+    }
+
+    const kakaoAuthUrl = `${KAKAO_AUTH_URL}?client_id=${KAKAO_CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=code&prompt=login`;
+
+    // 카카오 로그인 페이지로 이동
+    window.location.href = kakaoAuthUrl;
+  };
+
+  const mutation = useMutation({
+    mutationFn: async (data: KakaoLoginRequest) => {
+      const response = await apiClient.post<KakaoLoginResponse>(
+        API_ENDPOINTS.AUTH.KAKAO_LOGIN,
+        data
+      );
+      
+      return response;
+    },
+    onSuccess: (response) => {
+      if (response.success && response.data) {
+        const { access_token, refresh_token, user } = response.data;
+
+        // 토큰 저장
+        setTokens(access_token, refresh_token);
+        
+        // 사용자 정보가 있으면 저장
+        if (user) {
+          setUser(user);
+        }
+        
+        // 인증 상태 업데이트
+        setAuthenticated(true);
+      }
+    },
+    onError: (error: Error) => {
+      console.error("카카오 로그인 실패:", error);
+    },
+  });
+
+  return {
+    ...mutation,
+    initiateKakaoLogin, // 카카오 로그인 시작 함수 추가
+  };
+}

frontend/src/api/services/useLogout.ts

@@ -0,0 +1,43 @@
+import { useMutation } from '@tanstack/react-query';
+import { useAuthStore } from '../../stores/useAuthStore';
+import { useTokenStore } from '../../stores/useTokenStore';
+import { apiClient } from '../core/client';
+import { API_ENDPOINTS } from '../core/types';
+
+// 로그아웃
+export function useLogout() {
+  const { clearAuthState } = useAuthStore();
+  const { clearTokens } = useTokenStore();
+
+  return useMutation({
+    mutationFn: async () => {
+      try {
+        // 서버에 로그아웃 요청
+        await apiClient.post<void>(API_ENDPOINTS.AUTH.LOGOUT);
+      } catch (error) {
+        // 서버 요청 실패해도 로컬 정리는 진행
+        console.error('서버 로그아웃 실패:', error);
+      }
+    },
+    onMutate: () => {
+      // mutation 시작 전에 먼저 정리 (가장 빠른 시점)
+      clearTokens();
+      clearAuthState();
+    },
+    onSettled: () => {
+      // 한 번 더 확실하게 정리
+      clearTokens();
+      clearAuthState();
+      
+      // localStorage 인증 관련만 삭제
+      localStorage.removeItem('token-store');
+      localStorage.removeItem('auth-store');
+      sessionStorage.clear();
+      
+      // 즉시 리로드 (모든 메모리 상태 초기화)
+      setTimeout(() => {
+        window.location.href = '/signIn';
+      }, 0);
+    },
+  });
+}