#247 feat: 표 차트 구현

CheckMate-sookmyung · Sep 18, 2024 · 0b503c2 · 0b503c2
1 parent 37b3add
commit 0b503c2
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 11 deletions.
diff --git a/src/pages/TotalStatisticsPage/GraphChart.jsx b/src/pages/TotalStatisticsPage/GraphChart.jsx
@@ -108,7 +108,6 @@ const GraphChart = () => {
     return <div>Loading...</div>;
   }
 
-  // 데이터를 직접 계산
   const sortedStudents = [...studentData].sort(
     (a, b) => b.attendanceRate - a.attendanceRate,
   );

diff --git a/src/pages/TotalStatisticsPage/TableChart.jsx b/src/pages/TotalStatisticsPage/TableChart.jsx
@@ -1,10 +1,16 @@
-import { AttendeeTable } from '@/components';
-import React from 'react';
+import TotalStatisticTable from '@/components/Table/TotalStatisticsTable';
+import React, { useContext } from 'react';
+import { SortedStudent } from './TotalStatisticsPage';
+import * as S from './TotalStatisticsPage.style';
 
 const TableChart = () => {
+  const studentData = useContext(SortedStudent);
+  const top10 = studentData.slice(0, 10);
+
   return (
     <div>
-      <AttendeeTable />
+      <S.ChartTitle>참석률 좋은 학생 TOP 10</S.ChartTitle>
+      <TotalStatisticTable studentData={top10} />
     </div>
   );
 };

diff --git a/src/pages/TotalStatisticsPage/TotalStatisticsPage.jsx b/src/pages/TotalStatisticsPage/TotalStatisticsPage.jsx
@@ -5,6 +5,8 @@ import { DaterangePicker, Dropdown, TopNavigation } from '@/components';
 import { createContext, useEffect, useState } from 'react';
 import GraphChart from './GraphChart';
 import TableChart from './TableChart';
+import BlueButton from '../RegisterPage/RegisterComponents/Button/BlueButton';
+import { BsFillFileBarGraphFill } from 'react-icons/bs';
 
 export const SortedStudent = createContext();
 
@@ -35,14 +37,18 @@ const TotalStatisticsPage = () => {
     <PageLayout topNavigation={<TopNavigation />}>
       <S.Container>
         <S.TotalStatisticsPage>
-          <S.FlexBox>
-            <Dropdown
-              items={['그래프', '표']}
-              defaultItem={'그래프'}
-              onSelect={setViewMode}
-            />
+          <S.FlexBox style={{ justifyContent: 'space-between' }}>
+            <S.FlexBox style={{ gap: '20px' }}>
+              <S.CategoryText>통계</S.CategoryText>
+              <Dropdown
+                items={['그래프', '표']}
+                defaultItem={'그래프'}
+                onSelect={setViewMode}
+              />
+            </S.FlexBox>
             <DaterangePicker />
           </S.FlexBox>
+
           <SortedStudent.Provider value={studentGraph}>
             {viewMode === '그래프' && <GraphChart />}
             {viewMode === '표' && <TableChart />}

diff --git a/src/pages/TotalStatisticsPage/TotalStatisticsPage.style.jsx b/src/pages/TotalStatisticsPage/TotalStatisticsPage.style.jsx
@@ -18,5 +18,17 @@ export const TotalStatisticsPage = styled.div`
 
 export const FlexBox = styled.div`
   display: flex;
-  justify-content: space-between;
+  align-items: center;
+`;
+
+export const CategoryText = styled.p`
+  color: #6b6b6b;
+  font-size: 18px;
+  font-weight: 600;
+`;
+
+export const ChartTitle = styled.h2`
+  font-size: 18px;
+  font-weight: 600;
+  margin: 20px 0;
 `;