Feat: 정적배포용 api client 구현

Author: pwc2002

src/app/admin/layout.js

@@ -2,6 +2,7 @@
 
 
 import MenuHeader from '@/components/ui/common/MenuHeader';
+import ApiCodeGuard from '@/components/auth/ApiCodeGuard.jsx';
 
 export const metadata = {
     title: "Admin",
@@ -10,9 +11,11 @@ export const metadata = {
 
 export default function AdminLayout({ children }) {
     return (
-        <>
-            <MenuHeader />
-            {children}
-        </>
+        <ApiCodeGuard>
+            <>
+                <MenuHeader />
+                {children}
+            </>
+        </ApiCodeGuard>
     );
 }

src/app/admin/page.jsx

@@ -33,16 +33,16 @@ const statusColorMap = {
 };
 
 export default function Page() {
-  const [isLoading, setIsLoading] = useState(true);
+  const [isLoading, setIsLoading] = useState(false);
   const router = useRouter();
 
-  useEffect(() => {
-    if(!document.referrer) {
-      router.push('/')
-    } else {
-      setIsLoading(false);
-    }
-  }, []);
+  // useEffect(() => {
+  //   if(!document.referrer) {
+  //     router.push('/')
+  //   } else {
+  //     setIsLoading(false);
+  //   }
+  // }, []);
   // 추후 users 를 사용해 데이터를 받아오고, totalUsers를 사용해 페이지네이션 만들 예정
   const [page, setPage] = React.useState(1); // 현재 페이지 상태 (추후 페이지 상태에 따라 api 통신으로 데이터 불러오기)
 

src/app/main/layout.js

@@ -1,5 +1,6 @@
 //import { Suspense } from "react";
 import MenuHeader from "@/components/ui/common/MenuHeader";
+import ApiCodeGuard from '@/components/auth/ApiCodeGuard.jsx';
 
 export const metadata = {
     title: "Home",
@@ -8,9 +9,11 @@ export const metadata = {
 
 export default function HomeLayout({ children }) {
     return (
-        <>
-            <MenuHeader />
-            {children}
-        </>
+        <ApiCodeGuard>
+            <>
+                <MenuHeader />
+                {children}
+            </>
+        </ApiCodeGuard>
     );
 }

src/app/test/page.jsx

@@ -0,0 +1,79 @@
+'use client'
+
+import { useState, useMemo } from 'react';
+import { useAuthenticatedApi } from '@/hooks/useAuthenticatedApi';
+import { useAuth } from '@/hooks/useAuth';
+
+export default function TestAuthPage() {
+  const { apiClient } = useAuthenticatedApi();
+  const { accessToken } = useAuth();
+
+  const isLoggedIn = Boolean(accessToken);
+  const maskedToken = useMemo(() => {
+    if (!accessToken) return '-';
+    const head = String(accessToken).slice(0, 8);
+    const tail = String(accessToken).slice(-6);
+    return `${head}...${tail}`;
+  }, [accessToken]);
+
+  const [loading, setLoading] = useState(false);
+  const [httpStatus, setHttpStatus] = useState(null);
+  const [payload, setPayload] = useState(null);
+  const [errorText, setErrorText] = useState('');
+
+  const handleCallAuthApi = async () => {
+    setLoading(true);
+    setErrorText('');
+    setPayload(null);
+    setHttpStatus(null);
+    try {
+      const res = await apiClient.get('/recruit/members', {
+        params: { page: 0, size: 20, sort: 'createdAt', dir: 'DESC' },
+      });
+      setHttpStatus(res.status);
+      setPayload(res.data);
+    } catch (err) {
+      const status = err?.response?.status ?? 'NETWORK_ERROR';
+      setHttpStatus(status);
+      if (err?.response?.data) setPayload(err.response.data);
+      setErrorText(String(err?.message || 'request failed'));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className='min-h-screen w-full px-6 py-10 text-white'>
+      <h1 className='text-2xl font-bold mb-6'>로그인 테스트</h1>
+
+      <section className='mb-6'>
+        <div className='mb-1'>현재 로그인 상태</div>
+        <div className={`inline-block rounded px-3 py-1 ${isLoggedIn ? 'bg-green-600' : 'bg-red-600'}`}>
+          {isLoggedIn ? '로그인됨' : '미로그인'}
+        </div>
+        <div className='mt-2 text-sm text-gray-300'>액세스 토큰: {maskedToken}</div>
+      </section>
+
+      <section className='mb-6'>
+        <button
+          onClick={handleCallAuthApi}
+          disabled={loading}
+          className={`rounded px-4 py-2 ${loading ? 'bg-gray-500' : 'bg-blue-600 hover:bg-blue-500'}`}
+        >
+          {loading ? '요청 중...' : '인증 API 호출 (/api/v1/recruit/members)'}
+        </button>
+      </section>
+
+      <section>
+        <div className='mb-2 font-semibold'>응답</div>
+        <div className='mb-1 text-sm'>HTTP Status: {httpStatus ?? '-'}</div>
+        {errorText && (
+          <div className='mb-2 text-red-400 text-sm'>에러: {errorText}</div>
+        )}
+        <pre className='bg-black/40 rounded p-3 overflow-auto max-h-[50vh] text-sm'>
+{JSON.stringify(payload, null, 2) || '-'}
+        </pre>
+      </section>
+    </div>
+  );
+} 

src/components/auth/ApiCodeGuard.jsx

@@ -0,0 +1,55 @@
+'use client'
+
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+
+import { useAuthenticatedApi } from '@/hooks/useAuthenticatedApi';
+import Loader from '@/components/ui/common/Loader';
+
+export default function ApiCodeGuard({ children }) {
+  const router = useRouter();
+  const { apiClient } = useAuthenticatedApi();
+
+  const [checking, setChecking] = useState(true);
+  const [allowed, setAllowed] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    const verifyAccess = async () => {
+      try {
+        const res = await apiClient.get('/recruit/members', {
+          params: { page: 0, size: 20, sort: 'createdAt', dir: 'DESC' },
+        });
+
+        const code = res?.data?.code;
+        if (!cancelled) {
+          if (code === 200) {
+            setAllowed(true);
+          } else {
+            router.replace('/unauthorized');
+          }
+        }
+      } catch (error) {
+        if (!cancelled) {
+          // 인터셉터에서 401/403 처리로 리다이렉트가 발생할 수 있으므로, 보조적으로 차단
+          router.replace('/unauthorized');
+        }
+      } finally {
+        if (!cancelled) {
+          setChecking(false);
+        }
+      }
+    };
+
+    verifyAccess();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [apiClient, router]);
+
+  if (checking) return <Loader isLoading={true} />;
+  if (!allowed) return null;
+  return children;
+}