[FRONTEND] 전문가 인증 (#106)

## 📝작업 내용

> 전문가 인증 및 사용자 설정 라우팅 최적화

Author: yuhoyeong

frontend/package-lock.json

@@ -12,6 +12,8 @@
   "dependencies": {
     "@tanstack/react-query": "^5.90.1",
     "@tanstack/react-query-devtools": "^5.90.2",
+    "@types/react": "^19.1.10",
+    "@types/react-dom": "^19.1.7",
     "axios": "^1.12.2",
     "framer-motion": "^12.23.24",
     "gsap": "^3.13.0",
@@ -24,22 +26,19 @@
     "react-router-dom": "^7.9.1",
     "rehype-highlight": "^7.0.2",
     "remark-gfm": "^4.0.1",
-    "vercel": "^48.10.10",
     "zustand": "^5.0.8"
   },
   "devDependencies": {
     "@eslint/js": "^9.33.0",
     "@types/node": "^24.6.2",
-    "@types/react": "^19.1.10",
-    "@types/react-dom": "^19.1.7",
     "@vitejs/plugin-react": "^5.0.0",
     "baseline-browser-mapping": "^2.8.28",
     "eslint": "^9.33.0",
     "eslint-plugin-check-file": "^3.3.1",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
     "globals": "^16.3.0",
-    "typescript": "~5.8.3",
+    "typescript": "^5.9.3",
     "typescript-eslint": "^8.39.1",
     "vite": "^7.2.2"
   }

frontend/package.json

@@ -12,8 +12,10 @@ import SignIn from "./pages/SignIn";
 import Setting from "./pages/Setting";
 import SecondSetting from "./pages/SecondSetting";
 import RedirectPage from "./pages/RedirectPage";
+import Admin from "./pages/Admin";
 import ExpertVerifyLayout from "./components/layout/ExpertVerifyLayout";
 import { ProtectedRoute } from "./routes/ProtectedRoute";
+import { AdminProtectedRoute } from "./routes/AdminProtectedRoute";
 import RootRedirect from "./routes/RootRedirect";
 import {
   ErrorBoundary,
@@ -87,6 +89,14 @@ const Router = () => {
         <Route path="/setting" element={<Setting />} />
         <Route path="/second-setting" element={<SecondSetting />} />
         <Route path={"/oauth/kakao/redirect"} element={<RedirectPage />} />
+        <Route
+          path={"/admin"}
+          element={
+            <AdminProtectedRoute>
+              <Admin />
+            </AdminProtectedRoute>
+          }
+        />
       </Routes>
     </BrowserRouter>
   );

frontend/src/App.tsx

@@ -1,12 +1,11 @@
 import { useQuery } from '@tanstack/react-query';
 import { useAuthStore } from '../../stores/useAuthStore';
-import client from '../core';
+import { userService } from '../services/userService';
 import { 
   queryKeys,
   extractData,
 } from '../core/queryConfig';
 import type { CommonQueryOptions } from '../core/queryConfig';
-import { API_ENDPOINTS } from '../core/types';
 import type { UserData } from '../../types/user';
 
 // 사용자 프로필 조회
@@ -16,9 +15,7 @@ export function useUserProfile(options?: CommonQueryOptions<UserData>) {
   return useQuery({
     queryKey: queryKeys.USER.PROFILE,
     queryFn: async () => {
-      const response = await client.get<UserData>(API_ENDPOINTS.USERS.PROFILE);
-      
-      // 성공 시 스토어에 자동 저장
+      const response = await userService.getUserProfile();
       if (response.success) {
         updateUserFromApi(response);
       }

…ntend/src/api/services/useUserProfile.ts frontend/src/api/Auth/useUserProfile.tsfrontend/src/api/services/useUserProfile.ts renamed to frontend/src/api/Auth/useUserProfile.ts frontend/src/api/services/useUserProfile.ts renamed to frontend/src/api/Auth/useUserProfile.ts

@@ -0,0 +1,19 @@
+import { useQuery } from '@tanstack/react-query';
+import client from '../../core';
+import { API_ENDPOINTS } from '../../core/types';
+import type { Certification } from '../../../types/api';
+import type { CommonQueryOptions } from '../../core/queryConfig';
+
+// 전문가 인증 목록 전체 조회 (관리자용)
+export function useCertificationGetAll(
+  options?: CommonQueryOptions<Certification[]>
+) {
+  return useQuery({
+    queryKey: ['certification', 'all'],
+    queryFn: async () => {
+      const response = await client.get<Certification[]>(API_ENDPOINTS.CERTIFICATION.ALL);
+      return response.data;
+    },
+    ...options,
+  });
+}

frontend/src/api/Certification/ManagerCeritification/useCertificationGetAll.ts

@@ -0,0 +1,23 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import client from '../../core';
+import { API_ENDPOINTS } from '../../core/types';
+import type { CertificationApproveRequest } from '../../../types/api';
+import type { CommonMutationOptions } from '../../core/queryConfig';
+
+// 전문가 인증 승인 (관리자용)
+export function useCertificationApprove(
+  options?: CommonMutationOptions<void, CertificationApproveRequest>
+) {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({ certId }: CertificationApproveRequest) => {
+      const response = await client.patch<void>(API_ENDPOINTS.CERTIFICATION.APPROVE(certId));
+      return response;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['certification'] });
+    },
+    ...options,
+  });
+}

frontend/src/api/Certification/ManagerCeritification/useCertificationGetApproval.ts

@@ -0,0 +1,25 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import client from '../../core';
+import { API_ENDPOINTS } from '../../core/types';
+import type { CertificationRejectRequest } from '../../../types/api';
+import type { CommonMutationOptions } from '../../core/queryConfig';
+
+// 전문가 인증 거절 (관리자용)
+export function useCertificationReject(
+  options?: CommonMutationOptions<void, CertificationRejectRequest>
+) {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({ certId, reason }: CertificationRejectRequest) => {
+      const response = await client.patch<void>(
+        `${API_ENDPOINTS.CERTIFICATION.REJECT(certId)}?reason=${encodeURIComponent(reason)}`
+      );
+      return response;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['certification'] });
+    },
+    ...options,
+  });
+}

frontend/src/api/Certification/ManagerCeritification/useCertificationGetRefusal.ts

@@ -0,0 +1,9 @@
+// 전문가 인증 관련 API export
+export { useCertificationGet } from './useCertificationGet';
+export { useCertificationGenerate } from './useCertificationGenerate';
+export { useCertificationDelete } from './useCertificationDelete';
+
+// 관리자용 API
+export { useCertificationGetAll } from './ManagerCeritification/useCertificationGetAll';
+export { useCertificationApprove } from './ManagerCeritification/useCertificationGetApproval';
+export { useCertificationReject } from './ManagerCeritification/useCertificationGetRefusal';

frontend/src/api/Certification/index.ts

@@ -1,4 +1,22 @@
-// 전문가 인증 삭제 훅
-export const useCertificationDelete = () => {
-  // 향후 구현을 위한 자리 표시자
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import client from '../core';
+import { API_ENDPOINTS } from '../core/types';
+import type { CommonMutationOptions } from '../core/queryConfig';
+
+// 전문가 인증 삭제
+export function useCertificationDelete(
+  options?: CommonMutationOptions<void, number>
+) {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (certId: number) => {
+      const response = await client.delete<void>(API_ENDPOINTS.CERTIFICATION.DELETE(certId));
+      return response;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['certification'] });
+    },
+    ...options,
+  });
 }

frontend/src/api/Certification/useCertificationDelete.ts

@@ -1,5 +1,23 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import client from '../core';
+import { API_ENDPOINTS } from '../core/types';
+import type { CertificationGenerateRequest } from '../../types/api';
+import type { CommonMutationOptions } from '../core/queryConfig';
+
 // 전문가 인증 생성
+export function useCertificationGenerate(
+  options?: CommonMutationOptions<void, CertificationGenerateRequest>
+) {
+  const queryClient = useQueryClient();
 
-export const useCertificationGenerate = () => {
-  // Placeholder for future implementation
+  return useMutation({
+    mutationFn: async (data: CertificationGenerateRequest) => {
+      const response = await client.post<void>(API_ENDPOINTS.CERTIFICATION.BASE, data);
+      return response;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['certification'] });
+    },
+    ...options,
+  });
 }