Merge pull request #304 from CheckMate-sookmyung/feat/stat

#247 feat: 전체 통계 표 차트 구현
CheckMate-sookmyung · Sep 18, 2024 · 18190af · 18190af
2 parents 0315e22 + 81d1378
commit 18190af
Show file tree

Hide file tree

Showing 8 changed files with 82 additions and 46 deletions.
diff --git a/src/components/DaterangePicker/DaterangePicker.style.js b/src/components/DaterangePicker/DaterangePicker.style.js
@@ -19,7 +19,8 @@ export const Container = styled.div`
 export const Label = styled.div`
   display: flex;
   color: #6b6b6b;
-  font-size: 20px;
+  font-size: 18px;
+  font-weight: 600;
 
   @media (max-width: ${BREAKPOINTS[1]}px) {
     display: none;

diff --git a/src/components/Table/Table.style.jsx b/src/components/Table/Table.style.jsx
@@ -61,3 +61,9 @@ export const TelAnchor = styled.a`
   margin-left: auto;
   padding: 6px;
 `;
+
+export const AttendedCount = styled.p`
+  color: #2f7cef;
+  text-decoration: underline;
+  cursor: pointer;
+`;
diff --git a/src/components/Table/TotalStatisticsTable.jsx b/src/components/Table/TotalStatisticsTable.jsx
@@ -1,36 +1,42 @@
 import * as S from './Table.style';
 
-return (
-  <S.TableContainer>
-    <S.Table>
-      <thead>
-        <tr>
-          <S.TableHeader>순위</S.TableHeader>
-          <S.TableHeader>이름</S.TableHeader>
-          <S.TableHeader>학과</S.TableHeader>
-          <S.TableHeader>학번</S.TableHeader>
-          <S.TableHeader>학년</S.TableHeader>
-          <S.TableHeader>휴대폰번호</S.TableHeader>
-          <S.TableHeader>이메일 주소</S.TableHeader>
-          <S.TableHeader>참석행사</S.TableHeader>
-          <S.TableHeader>참석률</S.TableHeader>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <S.TableData>1</S.TableData>
-          <S.TableData>강동훈</S.TableData>
-          <S.TableData>야놀자</S.TableData>
-          <S.TableData>0</S.TableData>
-          <S.TableData>-</S.TableData>
-          <S.TableData>010-1234-5678</S.TableData>
-          <S.TableData>checkmate이메일</S.TableData>
-          <S.TableData>11</S.TableData>
-          <S.TableData>90%</S.TableData>
-        </tr>
-      </tbody>
-    </S.Table>
-  </S.TableContainer>
-);
+const TotalStatisticTable = ({ studentData }) => {
+  return (
+    <S.TableContainer>
+      <S.Table>
+        <thead>
+          <tr>
+            <S.TableHeader>순위</S.TableHeader>
+            <S.TableHeader>이름</S.TableHeader>
+            <S.TableHeader>학과</S.TableHeader>
+            <S.TableHeader>학번</S.TableHeader>
+            <S.TableHeader>학년</S.TableHeader>
+            <S.TableHeader>휴대폰번호</S.TableHeader>
+            <S.TableHeader>이메일 주소</S.TableHeader>
+            <S.TableHeader>참석행사</S.TableHeader>
+            <S.TableHeader>참석률</S.TableHeader>
+          </tr>
+        </thead>
+        <tbody>
+          {studentData.map((student, index) => (
+            <tr key={student.studentNumber}>
+              <S.TableData>{index + 1}</S.TableData>
+              <S.TableData>{student.studentName}</S.TableData>
+              <S.TableData>{student.studentMajor}</S.TableData>
+              <S.TableData>{student.studentNumber}</S.TableData>
+              <S.TableData>{student.grade || '-'}</S.TableData>
+              <S.TableData>{student.phoneNumber || '-'}</S.TableData>
+              <S.TableData>{student.studentEmail}</S.TableData>
+              <S.TableData>
+                <S.AttendedCount>{student.attendanceCount}</S.AttendedCount>
+              </S.TableData>
+              <S.TableData>{student.attendanceRate}%</S.TableData>
+            </tr>
+          ))}
+        </tbody>
+      </S.Table>
+    </S.TableContainer>
+  );
+};
 
-export default AttendeeTable;
+export default TotalStatisticTable;
diff --git a/src/components/Table/index.js b/src/components/Table/index.js
@@ -1,3 +1,3 @@
 export { default as AttendeeTable } from './AttendeeTable';
 
-export { default as TotalStatisticsPage } from './AttendeeTable';
+export { default as TotalStatisticsTable } from './TotalStatisticsTable';
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;
 `;