diff --git a/packages/admin/src/features/QR-code-scanner/ui/QRCodeScannerPage.tsx b/packages/admin/src/features/QR-code-scanner/ui/QRCodeScannerPage.tsx index c6315f7..0ed3a75 100644 --- a/packages/admin/src/features/QR-code-scanner/ui/QRCodeScannerPage.tsx +++ b/packages/admin/src/features/QR-code-scanner/ui/QRCodeScannerPage.tsx @@ -19,10 +19,8 @@ export const QRCodeScannerPage = () => { alert("QR Code가 정상적으로 스캔되었습니다."); try { - // JSON 파싱 const parsedData = JSON.parse(result.text); - // studentId 추출 const studentId = parsedData.studentId; setScannedStudentId(studentId); } catch (error) { @@ -33,9 +31,6 @@ export const QRCodeScannerPage = () => { } }; - console.log(scannedData); - console.log(typeof scannedStudentId); - return (

QR Code Scanner

diff --git a/packages/admin/src/features/people-management/api/hook/useDeleteInfo.ts b/packages/admin/src/features/people-management/api/hook/useDeleteInfo.ts index bb25f67..a384c0c 100644 --- a/packages/admin/src/features/people-management/api/hook/useDeleteInfo.ts +++ b/packages/admin/src/features/people-management/api/hook/useDeleteInfo.ts @@ -4,6 +4,9 @@ import { useMutation } from "@tanstack/react-query"; export const useDeleteInfo = (id: number) => { return useMutation({ mutationFn: () => deleteInfo(id), + onSuccess: () => { + alert("참가자 정보가 삭제되었습니다."); + }, onError: (error) => { console.error(error); alert("참가자 정보 삭제에 실패했습니다."); diff --git a/packages/admin/src/features/people-management/api/hook/usePutDepositCheck.ts b/packages/admin/src/features/people-management/api/hook/usePutDepositCheck.ts index 5ba9533..d033e06 100644 --- a/packages/admin/src/features/people-management/api/hook/usePutDepositCheck.ts +++ b/packages/admin/src/features/people-management/api/hook/usePutDepositCheck.ts @@ -1,20 +1,16 @@ -import { putDepositCheck, putDepositCheckPath } from "../deposit-check"; +import { putDepositCheck } from "../deposit-check"; import { DepositCheckResponse } from "../types"; -import { queryClient } from "@/shared"; import { useMutation, UseMutationResult } from "@tanstack/react-query"; -const putDepositCheckQueryKey = [putDepositCheckPath]; - export const usePutDepositCheck = (id: number): UseMutationResult => { return useMutation({ mutationFn: () => putDepositCheck(id), onSuccess: () => { - queryClient.invalidateQueries({ queryKey: [putDepositCheckQueryKey, id] }); - alert("승인 상태로 변경되었습니다."); + alert("입금 완료로 상태가 변경되었습니다."); }, onError: (error) => { - console.error("승인 상태 변경에 실패했습니다.", error); - alert("승인 상태 변경에 실패했습니다."); + console.error("입금 완료 상태 변경에 실패했습니다.", error); + alert("입금 완료 상태 변경에 실패했습니다."); }, }); }; diff --git a/packages/admin/src/features/people-management/components/common/MainContents.tsx b/packages/admin/src/features/people-management/components/common/MainContents.tsx index 5840479..dde315a 100644 --- a/packages/admin/src/features/people-management/components/common/MainContents.tsx +++ b/packages/admin/src/features/people-management/components/common/MainContents.tsx @@ -1,13 +1,6 @@ import { useState, useEffect } from "react"; -import { - InputField, - PeopleTable, - useUpdatePersonStatus, - useFilteredPeople, - useGetApplicantList, - ApplyPeople, -} from "@/features"; +import { InputField, PeopleTable, useFilteredPeople, useGetApplicantList, ApplyPeople } from "@/features"; export const MainContents = () => { const [searchTerm, setSearchTerm] = useState(""); @@ -21,8 +14,6 @@ export const MainContents = () => { } }, [data]); - const updatePersonStatus = useUpdatePersonStatus(people, setPeople); - const filteredPeople = useFilteredPeople(people, searchTerm); return ( @@ -31,7 +22,6 @@ export const MainContents = () => { ( + + {checkined ? "체크인됨" : "미체크인"} + +); diff --git a/packages/admin/src/features/people-management/components/features/DeleteButton.tsx b/packages/admin/src/features/people-management/components/features/DeleteButton.tsx new file mode 100644 index 0000000..60197ea --- /dev/null +++ b/packages/admin/src/features/people-management/components/features/DeleteButton.tsx @@ -0,0 +1,26 @@ +import { X } from "lucide-react"; + +import { useDeleteInfo } from "../../api"; + +type Props = { + id: number; + name: string; +}; + +export const DeleteButton = ({ id, name }: Props) => { + const { mutate: deleteInfo } = useDeleteInfo(id); + + const deletePerson = () => { + const isConfirmed = window.confirm(`${name}님을 정말 삭제하시겠습니까?`); + + if (isConfirmed) { + deleteInfo(); + } + }; + + return ( + + ); +}; diff --git a/packages/admin/src/features/people-management/components/features/PeopleTable.tsx b/packages/admin/src/features/people-management/components/features/PeopleTable.tsx index 3fb255f..dc03243 100644 --- a/packages/admin/src/features/people-management/components/features/PeopleTable.tsx +++ b/packages/admin/src/features/people-management/components/features/PeopleTable.tsx @@ -1,19 +1,17 @@ import { useState, useRef, useEffect, useCallback } from "react"; -import { ChevronDown } from "lucide-react"; - -import { ApplyPeople } from "@/features"; +import { ApplyPeople, CheckInStatus, DeleteButton, StatusButton, TABLE_HEADERS } from "@/features"; type Props = { people?: ApplyPeople[]; isLoading: boolean; hasNextPage: boolean; fetchNextPage: () => void; - updatePersonStatus: (id: number, status: "accepted" | "rejected" | "checkedIn" | "checkedOut") => void; }; -export const PeopleTable = ({ people, updatePersonStatus, isLoading, hasNextPage, fetchNextPage }: Props) => { +export const PeopleTable = ({ people, isLoading, hasNextPage, fetchNextPage }: Props) => { const [applyPeople, setApplyPeople] = useState([]); + const observer = useRef(null); useEffect(() => { @@ -41,27 +39,14 @@ export const PeopleTable = ({ people, updatePersonStatus, isLoading, hasNextPage - - - - - - - + {TABLE_HEADERS.map((header) => ( + + ))} @@ -102,38 +87,17 @@ export const PeopleTable = ({ people, updatePersonStatus, isLoading, hasNextPage + ))} diff --git a/packages/admin/src/features/people-management/components/features/StatusButton.tsx b/packages/admin/src/features/people-management/components/features/StatusButton.tsx new file mode 100644 index 0000000..efda4e0 --- /dev/null +++ b/packages/admin/src/features/people-management/components/features/StatusButton.tsx @@ -0,0 +1,27 @@ +import { ChevronDown } from "lucide-react"; + +import { usePutDepositCheck } from "../../api"; + +type Props = { + accepted: boolean; + id: number; +}; + +export const StatusButton = ({ accepted, id }: Props) => { + const { mutate: updatePersonStatus } = usePutDepositCheck(id); + const handleChangeStatus = () => { + updatePersonStatus(); + }; + + return ( + + ); +}; diff --git a/packages/admin/src/features/people-management/components/features/index.ts b/packages/admin/src/features/people-management/components/features/index.ts index c403bc2..eea56fe 100644 --- a/packages/admin/src/features/people-management/components/features/index.ts +++ b/packages/admin/src/features/people-management/components/features/index.ts @@ -1,2 +1,5 @@ export { InputField } from "./InputField"; export { PeopleTable } from "./PeopleTable"; +export { StatusButton } from "./StatusButton"; +export { CheckInStatus } from "./CheckInStatus"; +export { DeleteButton } from "./DeleteButton"; diff --git a/packages/admin/src/features/people-management/data/index.ts b/packages/admin/src/features/people-management/data/index.ts new file mode 100644 index 0000000..6e88f02 --- /dev/null +++ b/packages/admin/src/features/people-management/data/index.ts @@ -0,0 +1 @@ +export * from "./table-header"; diff --git a/packages/admin/src/features/people-management/data/table-header/TableHeader.ts b/packages/admin/src/features/people-management/data/table-header/TableHeader.ts new file mode 100644 index 0000000..d214122 --- /dev/null +++ b/packages/admin/src/features/people-management/data/table-header/TableHeader.ts @@ -0,0 +1,10 @@ +export const TABLE_HEADERS = [ + { label: "이름", key: "name" }, + { label: "학번", key: "studentId" }, + { label: "전화번호", key: "phoneNumber" }, + { label: "팀 이름", key: "teamName" }, + { label: "전공", key: "major" }, + { label: "입금 확인", key: "accepted" }, + { label: "체크인 상태", key: "checkined" }, + { label: "삭제", key: "delete" }, +]; diff --git a/packages/admin/src/features/people-management/data/table-header/index.ts b/packages/admin/src/features/people-management/data/table-header/index.ts new file mode 100644 index 0000000..3b89d0d --- /dev/null +++ b/packages/admin/src/features/people-management/data/table-header/index.ts @@ -0,0 +1 @@ +export { TABLE_HEADERS } from "./TableHeader"; diff --git a/packages/admin/src/features/people-management/hook/index.ts b/packages/admin/src/features/people-management/hook/index.ts index 34704a9..c29c4f9 100644 --- a/packages/admin/src/features/people-management/hook/index.ts +++ b/packages/admin/src/features/people-management/hook/index.ts @@ -1,2 +1 @@ export { useFilteredPeople } from "./useFilteredPeople"; -export { useUpdatePersonStatus } from "./useUpdatePersonStatus"; diff --git a/packages/admin/src/features/people-management/hook/useUpdatePersonStatus.ts b/packages/admin/src/features/people-management/hook/useUpdatePersonStatus.ts deleted file mode 100644 index b33334e..0000000 --- a/packages/admin/src/features/people-management/hook/useUpdatePersonStatus.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { ApplyPeople } from "../api"; - -export const useUpdatePersonStatus = (people: ApplyPeople[], setPeople: (people: ApplyPeople[]) => void) => { - const updatePersonStatus = (id: number, status: "accepted" | "rejected" | "checkedIn" | "checkedOut") => { - setPeople( - people.map((person) => { - if (person.id === id) { - switch (status) { - case "accepted": - return { ...person, accepted: true }; - case "rejected": - return { ...person, accepted: false }; - case "checkedIn": - return { ...person, checkedIn: true }; - case "checkedOut": - return { ...person, checkedIn: false }; - default: - return person; - } - } - return person; - }), - ); - }; - - return updatePersonStatus; -}; diff --git a/packages/admin/src/features/people-management/index.ts b/packages/admin/src/features/people-management/index.ts index 56a314f..a5ecb08 100644 --- a/packages/admin/src/features/people-management/index.ts +++ b/packages/admin/src/features/people-management/index.ts @@ -1,4 +1,5 @@ export * from "./api"; +export * from "./data"; export * from "./hook"; export * from "./components"; export * from "./ui";
- 이름 - - 학번 - - 전화번호 - - 팀 이름 - - 전공 - - 승인 - - 체크인/아웃 - + {header.label} +
{person.teamName} {person.major} - + handleStatusChange(person.studentId, person.accepted)} + /> + + - +