feat:#345 api 연결 및 데이터변수명 수정

Leets-Official · Feb 8, 2025 · f61a021 · f61a021
1 parent 2992595
commit f61a021
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 106 deletions.
diff --git a/src/api/getAdminUser.tsx b/src/api/getAdminUser.tsx
@@ -3,11 +3,11 @@ import axios from 'axios';
 
 const BASE_URL = import.meta.env.VITE_API_URL;
 
-export const getAllUsers = async () => {
+export const getAllUsers = async (orderBy = 'NAME_ASCENDING') => {
   const accessToken = localStorage.getItem('accessToken');
   const refreshToken = localStorage.getItem('refreshToken');
 
-  return axios.get(`${BASE_URL}/api/v1/admin/users/all`, {
+  return axios.get(`${BASE_URL}/api/v1/admin/users/all?orderBy=${orderBy}`, {
     headers: {
       Authorization: `Bearer ${accessToken}`,
       Authorization_refresh: `Bearer ${refreshToken}`,

diff --git a/src/components/Admin/SortButton.tsx b/src/components/Admin/SortButton.tsx
@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import styled from 'styled-components';
 import SortIcon from '@/assets/images/ic_admin_change.svg';
+import { useMemberContext } from './context/MemberContext';
 
 const SortButtonWrapper = styled.div`
   display: flex;
@@ -13,13 +14,15 @@ const SortButtonWrapper = styled.div`
 `;
 const SortButton: React.FC = () => {
   const [isAscending, setIsAscending] = useState(false);
+  const { sortingOrder, setSortingOrder } = useMemberContext();
 
   const onClickSort = () => {
     setIsAscending(!isAscending);
+    setSortingOrder(isAscending ? 'CARDINAL_DESCENDING' : 'NAME_ASCENDING');
   };
   return (
     <SortButtonWrapper onClick={onClickSort}>
-      {isAscending ? '오름차순' : '기수 순'}
+      {sortingOrder === 'NAME_ASCENDING' ? '오름차순' : '기수 순'}
       <img src={SortIcon} alt="sorting" />
     </SortButtonWrapper>
   );

diff --git a/src/components/Admin/context/MemberContext.tsx b/src/components/Admin/context/MemberContext.tsx
@@ -1,19 +1,21 @@
-import { createContext, useContext, useMemo, useState } from 'react';
+import { createContext, useContext, useEffect, useMemo, useState } from 'react';
+import { getAllUsers } from '@/api/getAdminUser';
 
 export type MemberData = {
+  id: number;
   status: '승인 완료' | '대기 중' | '추방';
   name: string;
   role: string;
-  major: string;
-  cardinal: string;
-  phone: string;
+  department: string;
+  cardinals: string;
+  tel: string;
   studentId: string;
   position: string;
-  attendance: number;
-  absence: number;
-  penalty: number;
+  attendanceCount: number;
+  absenceCount: number;
+  penaltyCount: number;
   LatestPenalty?: string;
-  joinDate: string;
+  createAt: string;
   email?: string;
   membershipType?: string;
 };
@@ -25,6 +27,10 @@ interface MemberContextProps {
   filteredMembers: MemberData[];
   setSelectedMembers: React.Dispatch<React.SetStateAction<string[]>>;
   setFilteredMembers: React.Dispatch<React.SetStateAction<MemberData[]>>;
+  sortingOrder: 'NAME_ASCENDING' | 'CARDINAL_DESCENDING';
+  setSortingOrder: React.Dispatch<
+    React.SetStateAction<'NAME_ASCENDING' | 'CARDINAL_DESCENDING'>
+  >;
 }
 
 // context 생성
@@ -34,96 +40,33 @@ const MemberContext = createContext<MemberContextProps | undefined>(undefined);
 export const MemberProvider: React.FC<{ children: React.ReactNode }> = ({
   children,
 }) => {
-  const [members, setMembers] = useState<MemberData[]>([
-    // mock data
-    {
-      status: '승인 완료',
-      name: '김위드니',
-      role: '프론트엔드',
-      major: '소프트웨어전공',
-      cardinal: '4.3.2.1',
-      phone: '01000009999',
-      studentId: '202236123',
-      position: '사용자',
-      attendance: 12,
-      absence: 0,
-      penalty: 12,
-      joinDate: '2024.08.27',
-      email: '[email protected]',
-      membershipType: '알럼나이',
-      LatestPenalty: '2024.08.27',
-    },
-    {
-      status: '대기 중',
-      name: '박위드니',
-      role: '프론트엔드',
-      major: '미디어커뮤니케이션학과',
-      cardinal: '4',
-      phone: '01000009999',
-      studentId: '202136123',
-      position: '사용자',
-      attendance: 12,
-      absence: 0,
-      penalty: 12,
-      joinDate: '2024.08.27',
-      email: '[email protected]',
-      membershipType: '활동중',
-      LatestPenalty: '2024.08.27',
-    },
-    {
-      status: '승인 완료',
-      name: '송위드니',
-      role: '백엔드',
-      major: '컴퓨터공학과',
-      cardinal: '4.3',
-      phone: '01000009999',
-      studentId: '202334423',
-      position: '사용자',
-      attendance: 12,
-      absence: 0,
-      penalty: 12,
-      joinDate: '2024.08.27',
-      email: '[email protected]',
-      membershipType: '활동중',
-      LatestPenalty: '2024.08.27',
-    },
-    {
-      status: '승인 완료',
-      name: '홍위드니',
-      role: '백엔드',
-      major: '컴퓨터공학과',
-      cardinal: '3.2',
-      phone: '01000009999',
-      studentId: '202331423',
-      position: '사용자',
-      attendance: 12,
-      absence: 0,
-      penalty: 12,
-      joinDate: '2024.08.27',
-      email: '[email protected]',
-      membershipType: '활동중',
-      LatestPenalty: '2024.08.27',
-    },
-    {
-      status: '추방',
-      name: '최위드니',
-      role: '백엔드',
-      major: '컴퓨터공학과',
-      cardinal: '2.1',
-      phone: '01000009999',
-      studentId: '202436123',
-      position: '사용자',
-      attendance: 12,
-      absence: 0,
-      penalty: 12,
-      joinDate: '2024.08.27',
-    },
-  ]);
+  const [error, setError] = useState<string | null>(null);
+
+  const [members, setMembers] = useState<MemberData[]>([]);
 
   const [selectedMembers, setSelectedMembers] = useState<string[]>([]);
 
   const [filteredMembers, setFilteredMembers] = useState<MemberData[]>(members);
+  const [sortingOrder, setSortingOrder] = useState<
+    'NAME_ASCENDING' | 'CARDINAL_DESCENDING'
+  >('NAME_ASCENDING');
+
+  useEffect(() => {
+    const fetchMembers = async () => {
+      try {
+        const response = await getAllUsers(sortingOrder);
+        const fetchedMembers = response.data.data || [];
+        console.log('API응답: ', response.data);
+        setMembers(fetchedMembers);
+        setFilteredMembers(fetchedMembers);
+        setError(null);
+      } catch (err: any) {
+        setError(err.response?.data?.message || '데이터 불러오기 실패');
+      }
+    };
 
+    fetchMembers();
+  }, [sortingOrder]);
   const value = useMemo(
     () => ({
       members,
@@ -133,7 +76,7 @@ export const MemberProvider: React.FC<{ children: React.ReactNode }> = ({
       filteredMembers,
       setFilteredMembers,
     }),
-    [members, selectedMembers, filteredMembers],
+    [members, selectedMembers, filteredMembers, error],
   );
 
   return (

diff --git a/src/pages/admin/AdminMember.tsx b/src/pages/admin/AdminMember.tsx
@@ -16,16 +16,16 @@ import {
 
 const columns: Column[] = [
   { key: 'name', header: '이름' },
-  { key: 'role', header: '역할' },
-  { key: 'major', header: '학과' },
-  { key: 'cardinal', header: '기수' },
-  { key: 'phone', header: '전화번호' },
+  { key: 'position', header: '역할' },
+  { key: 'department', header: '학과' },
+  { key: 'cardinals', header: '기수' },
+  { key: 'tel', header: '전화번호' },
   { key: 'studentId', header: '학번' },
-  { key: 'position', header: '직급' },
-  { key: 'attendance', header: '출석' },
-  { key: 'absence', header: '결석' },
-  { key: 'penalty', header: '페널티' },
-  { key: 'joinDate', header: '가입일' },
+  { key: 'role', header: '직급' },
+  { key: 'attendanceCount', header: '출석' },
+  { key: 'absenceCount', header: '결석' },
+  { key: 'penaltyCount', header: '페널티' },
+  { key: 'createdAt', header: '가입일' },
 ];
 
 const DynamicTopBar: React.FC = () => {