Merge pull request #828 from KEEPER31337/feature/세미나_관리_테이블_관련_처리_#786

Feature/세미나 관리 테이블 관련 처리 #786
KEEPER31337 · Oct 15, 2023 · d49aadf · d49aadf
2 parents 97e7b3f + e860850
commit d49aadf
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 20 deletions.
diff --git a/src/api/dto.ts b/src/api/dto.ts
@@ -280,6 +280,11 @@ export interface AttendSeminarInfo {
   generation: number;
   attendances: MemberSeminarAttendance[];
   [key: `date${number}`]: MemberSeminarAttendance;
+  totalCount: string;
+  totalAttendance: number;
+  totalLateness: number;
+  totalAbsence: number;
+  totalPersonal: number;
 }
 
 export interface AttendSeminarListInfo extends Page {

diff --git a/src/api/seminarApi.ts b/src/api/seminarApi.ts
@@ -124,6 +124,7 @@ const useGetAttendSeminarListMutation = ({ page, size }: { page?: number; size?:
 
         return {
           ...membersSeminarAttendInfo,
+          totalCount: `${membersSeminarAttendInfo.totalAttendance} / ${membersSeminarAttendInfo.totalLateness} / ${membersSeminarAttendInfo.totalAbsence} / ${membersSeminarAttendInfo.totalPersonal}`,
           ...seminarDateInfo,
         };
       });

diff --git a/src/components/Table/StandardTable.interface.ts b/src/components/Table/StandardTable.interface.ts
@@ -1,7 +1,7 @@
 export interface Column<T> {
   key: keyof T | 'checkbox';
   headerName: string;
-  width?: string | number;
+  width?: string | number /* NOTE fixed 있을 때 width number 타입 및 필수 값 */;
   fixed?: 'left' | 'right';
 }
 

diff --git a/src/components/Table/StandardTable.tsx b/src/components/Table/StandardTable.tsx
@@ -37,22 +37,28 @@ const StandardTable = <T extends Record<string, any>>({
         <Table size={size} sx={{ '.MuiTableCell-sizeSmall': { paddingY: '14px' } }}>
           <TableHead className="bg-middleBlack">
             <TableRow>
-              {columns.map((column, index) => (
-                <TableCell
-                  padding={isCheckboxColumn(column.key) ? 'checkbox' : undefined}
-                  className="!truncate !border-subBlack !text-white"
-                  width={column.width}
-                  sx={{
-                    minWidth: column.width,
-                    position: column.fixed && 'sticky',
-                    left: column.fixed === 'left' ? index * 100 : undefined,
-                    backgroundColor: KEEPER_COLOR.middleBlack,
-                  }}
-                  key={column.key as string}
-                >
-                  {isCheckboxColumn(column.key) ? <Checkbox /> : column.headerName}
-                </TableCell>
-              ))}
+              {columns.map((column, index) => {
+                return (
+                  <TableCell
+                    padding={isCheckboxColumn(column.key) ? 'checkbox' : undefined}
+                    className="!truncate !border-subBlack !text-white"
+                    width={column.width}
+                    sx={{
+                      minWidth: column.width,
+                      position: column.fixed && 'sticky',
+                      left: column.fixed === 'left' ? index * ((column.width as number) || 0) : undefined,
+                      right:
+                        column.fixed === 'right'
+                          ? (columns.length - 1 - index) * ((column.width as number) || 0)
+                          : undefined,
+                      backgroundColor: KEEPER_COLOR.middleBlack,
+                    }}
+                    key={column.key as string}
+                  >
+                    {isCheckboxColumn(column.key) ? <Checkbox /> : column.headerName}
+                  </TableCell>
+                );
+              })}
             </TableRow>
           </TableHead>
           <TableBody className="bg-mainBlack">
@@ -89,8 +95,12 @@ const StandardTable = <T extends Record<string, any>>({
                             } !border-subBlack bg-mainBlack !text-white`}
                             sx={{
                               position: column.fixed && 'sticky',
-                              left: column.fixed === 'left' ? index * 100 : undefined,
                               backgroundColor: column.fixed && KEEPER_COLOR.middleBlack,
+                              left: column.fixed === 'left' ? index * ((column.width as number) || 0) : undefined,
+                              right:
+                                column.fixed === 'right'
+                                  ? (columns.length - 1 - index) * ((column.width as number) || 0)
+                                  : undefined,
                             }}
                             key={column.key as string}
                           >
@@ -132,8 +142,12 @@ const StandardTable = <T extends Record<string, any>>({
                           } overflow-hidden !border-subBlack bg-mainBlack !text-white`}
                           sx={{
                             position: column.fixed && 'sticky',
-                            left: column.fixed === 'left' ? index * 100 : undefined,
                             backgroundColor: column.fixed && KEEPER_COLOR.middleBlack,
+                            left: column.fixed === 'left' ? index * ((column.width as number) || 0) : undefined,
+                            right:
+                              column.fixed === 'right'
+                                ? (columns.length - 1 - index) * ((column.width as number) || 0)
+                                : undefined,
                           }}
                           key={column.key as string}
                         >

diff --git a/src/pages/admin/SeminarManage/SeminarManage.tsx b/src/pages/admin/SeminarManage/SeminarManage.tsx
@@ -17,6 +17,7 @@ import EditSeminarAttendanceModal from './Modal/EditSeminarAttendanceModal';
 const seminarManageColumn: Column<AttendSeminarInfo>[] = [
   { key: 'generation', headerName: '기수', fixed: 'left', width: 100 },
   { key: 'memberName', headerName: '이름', fixed: 'left', width: 100 },
+  { key: 'totalCount', headerName: '출석 / 지각 / 결석 / 개인사정', fixed: 'right', width: 100 },
 ];
 
 const SeminarManage = () => {
@@ -48,6 +49,9 @@ const SeminarManage = () => {
     if (key.slice(0, 4) === 'date' && value) {
       return <SeminarAttendStatus status={(value as MemberSeminarAttendance).attendanceStatus} hasIcon={false} />;
     }
+    if (key === 'totalCount') {
+      return <p className="text-center">{value}</p>;
+    }
     return value;
   };
 
@@ -68,7 +72,7 @@ const SeminarManage = () => {
         </ActionButton>
       </div>
       <StandardTable<AttendSeminarInfo>
-        columns={[...seminarManageColumn, ...dynamicColumn]}
+        columns={[...seminarManageColumn.slice(0, 2), ...dynamicColumn, ...seminarManageColumn.slice(2)]}
         childComponent={childComponent}
         onCellClick={onCellClick}
         rows={