Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

#233 feat: 참석자 관리 페이지 내 검색 기능 구현 #237

Merged
merged 1 commit into from
Sep 4, 2024
Merged

#233 feat: 참석자 관리 페이지 내 검색 기능 구현 #237

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 26 additions & 2 deletions src/pages/DashboardPage/DashboardAttendeePage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@ export default function DashboardAttendeePage() {
const [activeTab, setActiveTab] = useState(1);
const [editMode, setEditMode] = useState(false);
const [attendees, setAttendees] = useState([]);
const [filteredAttendees, setFilteredAttendees] = useState([]);
const [searchQuery, setSearchQuery] = useState('');
const [sessions, setSessions] = useState([]);
const [sortConfig, setSortConfig] = useState({
key: 'name',
Expand Down Expand Up @@ -101,13 +103,30 @@ export default function DashboardAttendeePage() {
if (parsedSessions.length > 0) {
const initialAttendees = attendeesData[1];
setAttendees(initialAttendees);
setFilteredAttendees(initialAttendees); // 초기 필터된 참석자 리스트 설정
setSessionAttendees((prev) => ({
...prev,
[1]: initialAttendees,
}));
}
}, [eventDetail]);

// 참석자 검색
useEffect(() => {
const filtered = attendees.filter((attendee) => {
const searchLower = searchQuery.toLowerCase();
return (
attendee.name.toLowerCase().includes(searchLower) ||
(attendee.number
? String(attendee.number).toLowerCase().includes(searchLower)
: false) ||
attendee.email.toLowerCase().includes(searchLower) ||
attendee.phoneNumber.toLowerCase().includes(searchLower)
);
});
setFilteredAttendees(filtered);
}, [searchQuery, attendees]);

const handleAttendanceChange = (index, value) => {
const updatedAttendees = [...attendees];
updatedAttendees[index].attendance = value === '출석';
Expand Down Expand Up @@ -226,6 +245,7 @@ export default function DashboardAttendeePage() {
...sessionAttendees[session.tab],
].sort((a, b) => a.name.localeCompare(b.name));
setAttendees(sortedAttendees);
setFilteredAttendees(sortedAttendees); // 필터된 리스트도 업데이트
}}
/>
))}
Expand All @@ -250,12 +270,16 @@ export default function DashboardAttendeePage() {
</S.RateWrapper>
<S.SearchBoxWrapper>
<FaMagnifyingGlass />
<S.SearchBox placeholder="이름, 학번, 이메일, 전화번호로 검색" />
<S.SearchBox
placeholder="이름, 학번, 이메일, 전화번호로 검색"
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)} // 검색어 업데이트
/>
</S.SearchBoxWrapper>
</S.SearchRageContainer>

<AttendeeTable
attendees={attendees}
attendees={filteredAttendees} // 필터된 참석자 리스트를 전달
editMode={editMode}
sortData={sortData}
handleAttendanceChange={handleAttendanceChange}
Expand Down