Skip to content

Commit 8f6acdf

Browse files
devyejindevyejin
authored
[EC-221 FE/style: 관리자 프론트 페이지 CSS 수정 (#230)
* [EC-221] style: 학생 목록 리스트간 간격 * [EC-221] feat: FiltefButton 다중 선택 가능하도록 수정 - 기본값 false -> 기존에 사용한 곳 영향 없음 - 리스트간 gap 부여 * [EC-221] style: container 좌우 여백 조정 * [EC-221] style: 관리자 세부 출결 현황, 유고 결석 관리 페이지 css - 관리자 세부 출결 현황 페이지 -> 리스트간 gap 부여, container 너비 조절 - 유고 결석 관리 페이지 -> container 너비 조절 * [EC-221] style: 회의실 예약 페이지 컨테이너 폭 조절
1 parent 6ce6fa3 commit 8f6acdf

File tree

7 files changed

+105
-63
lines changed

7 files changed

+105
-63
lines changed

‎client/src/components/buttons/filterButton/FilterButton.jsx‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,23 @@
11
import React, { useEffect, useState } from 'react';
22
import styles from './FilterButton.module.css';
33

4-
export default function FilterButton({ index, isActiveIndex, title, content, handleActiveFilter }) {
4+
export default function FilterButton({
5+
index,
6+
isActiveIndex,
7+
title,
8+
content,
9+
handleActiveFilter,
10+
isMultiSelect = false,
11+
}) {
512
const [isActive, setIsActive] = useState(false);
613

714
useEffect(() => {
8-
if (index === isActiveIndex) {
9-
setIsActive(true);
15+
if (isMultiSelect) {
16+
setIsActive(Array.isArray(isActiveIndex) && isActiveIndex.includes(index));
1017
} else {
11-
setIsActive(false);
18+
setIsActive(index === isActiveIndex);
1219
}
13-
}, [isActiveIndex]);
20+
}, [isActiveIndex, isMultiSelect]);
1421

1522
return (
1623
<button

‎client/src/pages/roomReservation/RoomReservation.module.css‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
.reservationContainer {
2-
width: 100%;
2+
/* width: 100%; */
3+
margin: 0 10em;
4+
35
box-sizing: border-box;
46
}
57

‎client/src/pages/staffAttendance/StaffAttendance.jsx‎

Lines changed: 54 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,24 @@ import { useNavigate } from 'react-router-dom';
1212
import { URL_PATHS } from '../../constants/urlPaths';
1313
export default function StaffAttendance() {
1414
const navigate = useNavigate();
15-
const [isActiveIndex, setIsActiveIndex] = useState(false);
1615
const [dataList, setDataList] = useState([]);
16+
const isMultiSelect = true;
17+
const [isActiveIndex, setIsActiveIndex] = useState(
18+
isMultiSelect ? dataList.map((_, index) => index) : false,
19+
);
1720
const [students, setStudents] = useState([]);
1821
const { courseId } = useSelector((state) => state.auth.user);
1922
const [isModalOpen, setIsModalOpen] = useState(false);
2023
const [modalData, setModalData] = useState({
2124
content: '페이지를 확인할 수 없습니다.',
2225
});
2326

27+
useEffect(() => {
28+
if (isMultiSelect && dataList.length > 0) {
29+
setIsActiveIndex(dataList.map((_, index) => index));
30+
}
31+
}, [dataList, isMultiSelect]);
32+
2433
const getAttendances = async () => {
2534
try {
2635
const response = await attendanceApi.getTodayAttendances(courseId);
@@ -49,11 +58,13 @@ export default function StaffAttendance() {
4958
}, [courseId]);
5059

5160
const handleActiveFilter = (index) => {
52-
if (index === isActiveIndex) {
53-
setIsActiveIndex(false);
54-
} else {
55-
setIsActiveIndex(index);
56-
}
61+
setIsActiveIndex((prev) => {
62+
if (isMultiSelect) {
63+
return prev.includes(index) ? prev.filter((i) => i !== index) : [...prev, index];
64+
} else {
65+
return prev === index ? false : index;
66+
}
67+
});
5768
};
5869
const handleStudentClick = (studentId) => {
5970
navigate(URL_PATHS.MIDDLE_ADMIN.ATTENDANCE.DETAIL(courseId, studentId));
@@ -65,47 +76,54 @@ export default function StaffAttendance() {
6576
key={index}
6677
index={index}
6778
isActiveIndex={isActiveIndex}
79+
isMultiSelect={true}
6880
title={item.label}
6981
content={item.value}
7082
handleActiveFilter={handleActiveFilter}
7183
></FilterButton>
7284
);
7385
});
7486

75-
const studentsList = students.map((item, index) => {
76-
const tag = {
77-
ATTENDANCE: '출석',
78-
EARLY_LEAVE: '조퇴',
79-
LATE: '지각',
80-
ABSENT: '결석',
81-
};
87+
const studentsList = students
88+
.map((item, index) => {
89+
const tag = {
90+
ATTENDANCE: '출석',
91+
EARLY_LEAVE: '조퇴',
92+
LATE: '지각',
93+
ABSENT: '결석',
94+
};
8295

83-
if (
84-
(typeof isActiveIndex === 'number' && dataList[isActiveIndex].label === tag[item.status]) ||
85-
isActiveIndex === false
86-
) {
87-
return (
88-
<div className={styles.baseListItems}>
89-
<BaseListItem
90-
key={index}
91-
content={item.studentName}
92-
tagTitle={tag[item.status]}
93-
onClick={() => handleStudentClick(item.studentId)}
94-
></BaseListItem>
95-
</div>
96-
);
97-
}
98-
});
96+
const isFiltered =
97+
(Array.isArray(isActiveIndex) &&
98+
isActiveIndex.some((idx) => dataList[idx]?.label === tag[item.status])) ||
99+
isActiveIndex === false;
100+
101+
if (isFiltered) {
102+
return (
103+
<div key={index} className={styles.baseListItems}>
104+
<BaseListItem
105+
content={item.studentName}
106+
tagTitle={tag[item.status]}
107+
onClick={() => handleStudentClick(item.studentId)}
108+
/>
109+
</div>
110+
);
111+
}
112+
return null;
113+
})
114+
.filter(Boolean);
99115

100116
return (
101-
<div>
117+
<div className={styles.container}>
102118
<Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)} {...modalData}></Modal>
103-
<DashBoardItem width="100%">
104-
<>
105-
<h2 className="subTitle">출결 현황</h2>
106-
<div className={styles.filterButtonBox}>{filterButtons}</div>
107-
</>
108-
</DashBoardItem>
119+
<div className={styles.dashBoardItemBox}>
120+
<DashBoardItem width="100%">
121+
<>
122+
<h2 className="subTitle">출결 현황</h2>
123+
<div className={styles.filterButtonBox}>{filterButtons}</div>
124+
</>
125+
</DashBoardItem>
126+
</div>
109127

110128
<div className={styles.studentsBox}>{studentsList}</div>
111129
</div>

‎client/src/pages/staffAttendance/StaffAttendance.module.css‎

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,25 @@
1+
.container {
2+
margin: 0 10em;
3+
padding-top: var(--padding-large);
4+
}
5+
16
.filterButtonBox {
27
display: flex;
38
width: 100%;
49
gap: 1rem;
10+
margin-bottom: var(--margin-basic);
511
}
612

7-
.studentsBox > div:hover {
8-
box-shadow: var(--box-shadow-medium);
13+
.dashBoardItemBox {
14+
margin-bottom: var(--margin-basic);
15+
}
16+
17+
.studentsBox {
18+
display: flex;
19+
flex-direction: column;
20+
gap: 1rem;
921
}
1022

11-
.baseListItem {
12-
margin: 10px;
23+
.studentsBox > div:hover {
24+
box-shadow: var(--box-shadow-medium);
1325
}

‎client/src/pages/staffAttendanceAbsence/StaffAttendanceAbsence.module.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,6 @@
66
}
77

88
.absenceContainer {
9-
margin: var(--margin-medium) 0;
9+
/* margin: var(--margin-medium) 0; */
10+
margin: 0 10em;
1011
}

‎client/src/pages/staffAttendanceDetail/StaffAttendanceDetail.jsx‎

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,17 @@ export default function StaffAttendanceDetail() {
1717
statistics: {},
1818
});
1919

20+
// 출석 상태 텍스트 변환 함수
21+
function getAttendanceStatusText(status) {
22+
const statusMap = {
23+
ATTENDANCE: '출석',
24+
LATE: '지각',
25+
EARLY_LEAVE: '조퇴',
26+
ABSENT: '결석',
27+
};
28+
return statusMap[status] || status;
29+
}
30+
2031
useEffect(() => {
2132
const studentAttendanceById = async () => {
2233
console.log(accessToken);
@@ -65,25 +76,15 @@ export default function StaffAttendanceDetail() {
6576
<div className={styles.listContainer}>
6677
{studentAttendance.attendanceRecordList &&
6778
studentAttendance.attendanceRecordList.map((item, index) => (
68-
<BaseListItem
69-
key={index}
70-
content={item.lectureDateTime}
71-
tagTitle={getAttendanceStatusText(item.attendanceStatus)}
72-
/>
79+
<div key={index} >
80+
<BaseListItem
81+
content={item.lectureDateTime}
82+
tagTitle={getAttendanceStatusText(item.attendanceStatus)}
83+
/>
84+
</div>
7385
))}
7486
</div>
7587
</div>
7688
</div>
7789
);
7890
}
79-
80-
// 출석 상태 텍스트 변환 함수
81-
function getAttendanceStatusText(status) {
82-
const statusMap = {
83-
ATTENDANCE: '출석',
84-
LATE: '지각',
85-
EARLY_LEAVE: '조퇴',
86-
ABSENT: '결석',
87-
};
88-
return statusMap[status] || status;
89-
}

‎client/src/pages/staffAttendanceDetail/StaffAttendanceDetail.module.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@
6565
.listContainer {
6666
display: flex;
6767
flex-direction: column;
68+
gap: 1rem;
6869
}
6970

7071
.listContainer > div:first-child {

0 commit comments

Comments
 (0)