Refactor: Admin 페이지에서 API 호출 및 데이터 처리 로직 개선, 검색 기능 활성화 #6

Author: ThinkMuk

src/app/admin/page.jsx

@@ -9,12 +9,12 @@ import AdminTableCell from '@/components/admin/AdminTableCell';
 import AdminTableTopContent from '@/components/admin/AdminTableTopContent';
 import AdminTableBottomContent from '@/components/admin/AdminTableBottomContent';
 
-import { users } from '@/mock/users';
+import { useAuthenticatedApi } from '@/hooks/useAuthenticatedApi';
 
 const columns = [
   { name: 'NAME', uid: 'name' },
   { name: 'MAJOR / ID', uid: 'major' },
-  { name: 'PAYMENT', uid: 'status' },
+  { name: 'PAYMENT', uid: 'isPayed' },
 ];
 
 const statusColorMap = {
@@ -24,31 +24,63 @@ const statusColorMap = {
 
 export default function Page() {
   const router = useRouter();
+  const { apiClient } = useAuthenticatedApi();
 
-  // 추후 users 를 사용해 데이터를 받아오고, totalUsers를 사용해 페이지네이션 만들 예정
-  const [page, setPage] = React.useState(1); // 현재 페이지 상태 (추후 페이지 상태에 따라 api 통신으로 데이터 불러오기)
+  const [page, setPage] = React.useState(1);
 
   const [modalOpen, setModalOpen] = React.useState(false); // 모달 열림 상태
   const modalClosing = useRef(false); // 모달이 닫히는 상태를 추적
 
   const [selectedUser, setSelectedUser] = React.useState(null); // 선택된 사용자 데이터
   const [searchValue, setSearchValue] = React.useState(''); // 검색 입력 상태
+  const [query, setQuery] = React.useState(''); // API 호출시 검색 내용
+  const [loading, setLoading] = React.useState(false);
+  const [error, setError] = React.useState('');
+  const [currentUsers, setCurrentUsers] = React.useState([]);
+  const [totalUsers, setTotalUsers] = React.useState(0);
+  const [totalPages, setTotalPages] = React.useState(0);
 
   const rowsPerPage = 10; //한 페이지당 표시될 유저 수
-  const totalUsers = 110; //총 유저 수 (총 페이지 표시를 위함)
 
-  // 현재 페이지 데이터 계산 (임시)
-  const currentUsers = React.useMemo(() => {
-    const startIndex = (page - 1) * rowsPerPage;
-    const endIndex = startIndex + rowsPerPage;
-    return users.slice(startIndex, endIndex);
-  }, [page, rowsPerPage]);
-
-  const totalPages = React.useMemo(() => Math.ceil(totalUsers / rowsPerPage), [totalUsers, rowsPerPage]);
-
-  const renderCell = useCallback((user, columnKey) => 
-    <AdminTableCell user={user} columnKey={columnKey} />
-  , []);
+  const fetchUsers = useCallback(async () => {
+    setLoading(true);
+    setError('');
+    try {
+      const params = {
+        page: page - 1,
+        size: rowsPerPage,
+        sort: 'createdAt',
+        dir: 'DESC',
+        question: query || undefined,
+      };
+      const res = await apiClient.get('/recruit/members', { params });
+      const list = Array.isArray(res?.data?.data) ? res.data.data : [];
+      const total = res?.data?.meta?.totalElements ?? list.length;
+      const computedTotalPages = Math.max(1, Math.ceil(total / rowsPerPage));
+
+      setCurrentUsers(list);
+      setTotalUsers(total);
+      setTotalPages(computedTotalPages);
+    } catch (err) {
+      setError(String(err?.message || 'failed to load users'));
+      setCurrentUsers([]);
+      setTotalUsers(0);
+    } finally {
+      setLoading(false);
+    }
+  }, [apiClient, page, rowsPerPage, query]);
+
+  const renderCell = useCallback((user, columnKey) => {
+    const normalizedUser = {
+      ...user,
+      name: user?.name ?? '',
+      major: user?.major ?? '',
+      studentId: user?.studentId ?? '',
+      isPayed: typeof user?.isPayed === 'boolean' ? user.isPayed : '',
+      phoneNumber: user?.phoneNumber ?? '',
+    };
+    return <AdminTableCell user={normalizedUser} columnKey={columnKey} />;
+  }, []);
 
   const handleRowClick = (user) => {
     if (modalClosing.current) return; // 모달이 닫히는 중에는 클릭 무시
@@ -57,8 +89,8 @@ export default function Page() {
   };
 
   const handleSearch = () => {
-    //추후 api 연결 함수로 변경 예정
-    console.log(searchValue); //임시
+    setPage(1);
+    setQuery((searchValue || '').trim());
   };
 
   const handleCloseModal = () => {
@@ -69,6 +101,17 @@ export default function Page() {
     }, 300);
   };
 
+  useEffect(() => {
+    if (searchValue === '' && query !== '') {
+      setPage(1);
+      setQuery('');
+    }
+  }, [searchValue, query]);
+
+  useEffect(() => {
+    fetchUsers();
+  }, [fetchUsers]);
+
   return (
     <>
       <div>
@@ -89,11 +132,15 @@ export default function Page() {
               </TableColumn>
             )}
           </TableHeader>
-          <TableBody items={currentUsers}>
+          <TableBody
+            items={currentUsers}
+            isLoading={loading}
+            emptyContent={loading ? '불러오는 중...' : '데이터가 없습니다.'}
+          >
             {(item) => (
               <TableRow
                 className='hover:bg-[#35353b99] cursor-pointer'
-                key={item.member.id}
+                key={item.member?.id ?? item.id}
                 onClick={() => handleRowClick(item)}
               >
                 {(columnKey) => <TableCell>{renderCell(item, columnKey)}</TableCell>}

src/components/admin/AdminTableCell.jsx

@@ -9,7 +9,8 @@ const statusColorMap = {
 };
 
 export default function AdminTableCell({ user, columnKey }) {
-  const cellValue = user.member[columnKey];
+
+  const cellValue = user[columnKey];
 
   switch (columnKey) {
     case 'name':
@@ -19,23 +20,23 @@ export default function AdminTableCell({ user, columnKey }) {
           avatarProps={{
             className: 'w-0 h-0 overflow-hidden',
           }}
-          description={user.member.email}
+          description={user.phoneNumber}
           name={cellValue}
         >
-          {user.member.email}
+          {user.phoneNumber}
         </User>
       );
     case 'major':
       return (
         <div className='flex flex-col'>
-          <p className='text-white text-bold text-sm capitalize'>{user.member.majors.main}</p>
-          <p className='text-bold text-sm capitalize text-default-400'>{user.member.studentId}</p>
+          <p className='text-white text-bold text-sm capitalize'>{user.major}</p>
+          <p className='text-bold text-sm capitalize text-default-400'>{user.studentId}</p>
         </div>
       );
-    case 'status':
+    case 'isPayed':
       return (
-        <Chip className='capitalize' color={statusColorMap[user.member.isPayed]} size='sm' variant='flat'>
-          {user.member.isPayed ? '입금' : '미입금'}
+        <Chip className='capitalize' color={statusColorMap[user.isPayed]} size='sm' variant='flat'>
+          {user.isPayed ? '입금' : '미입금'}
         </Chip>
       );
     default:

src/components/admin/UserDetailsModal.jsx

@@ -19,6 +19,8 @@ export default function UserDetailsModal({ user, isOpen, onClose, preventClose }
 
   if (!isOpen) return null;
 
+  const member = user?.member ?? user ?? {};
+
   const rowStyle = 'border border-[#5b5b6699]';
   const cellStyle = 'p-3 font-bold text-gray-300';
   const valueStyle = 'p-3';
@@ -28,7 +30,7 @@ export default function UserDetailsModal({ user, isOpen, onClose, preventClose }
     <div className='fixed inset-0 flex items-center justify-center p-4 z-50 bg-black/50'>
       <div className='max-w-[600px] w-full max-h-[90vh] mobile:max-h-[80vh] bg-[#27272A] rounded-lg shadow-md p-6 overflow-y-auto'>
         <div className='text-lg font-bold text-center text-white mb-4'>User Details</div>
-        
+
         {/* User Basic Info */}
         <table className='w-full border-collapse border text-white mb-6'>
           <tbody>