diff --git a/src/apis/index.ts b/src/apis/index.ts index d4c11e64..a6717ee4 100644 --- a/src/apis/index.ts +++ b/src/apis/index.ts @@ -188,16 +188,14 @@ export async function uploadMembers(formdata: FormData) { }, }); } -export async function updateMembers({ members, token }: UpdateMembers) { - return await api.put( - `/club/my/club-members`, - { clubMemberList: members }, - { - headers: { - Authorization: 'Bearer ' + token, - }, +export async function updateMembers(formdata: FormData) { + const token = formdata.get('token'); + return await api.put('/club/my/club-members', formdata, { + headers: { + Authorization: 'Bearer ' + token, + // 'Content-Type': 'multipart/form-data', }, - ); + }); } export async function deleteNotice({ noticeId, token }: DeleteNotice) { return await api.delete(`/admin/notices/${noticeId}`, { diff --git a/src/components/member/MemberUpload.tsx b/src/components/member/MemberUpload.tsx index ebc7d7fa..a1f0e441 100644 --- a/src/components/member/MemberUpload.tsx +++ b/src/components/member/MemberUpload.tsx @@ -1,23 +1,27 @@ -import { useState } from 'react'; +import { redirect } from 'next/dist/server/api-utils'; +import router from 'next/router'; import { useCookies } from 'react-cookie'; import UploadExcel from '@/components/common/UploadExcel'; -import { useUploadMembers } from '@/hooks/api/member/useUploadMembers'; +import { useUpdateMembers } from '@/hooks/api/member/useMembers'; +import { parseImgUrl } from '@/utils/parse'; type Props = { + file: File | null; + setFile: React.Dispatch>; closeModal: () => void; }; -export default function MemberUpload({ closeModal }: Props) { - const [file, setFile] = useState(null); +export default function MemberUpload({ closeModal, file, setFile }: Props) { const [cookies] = useCookies(['token']); - - const mutation = useUploadMembers(); + const mutation = useUpdateMembers(); function handleSubmit(event: React.FormEvent) { event.preventDefault(); const formData = new FormData(); - file && formData.append('clubMemberListFile', file); + file && formData.append('file', file); formData.append('token', cookies.token); + closeModal(); + router.push('/'); return mutation.mutate(formData); } diff --git a/src/hooks/api/member/useMembers.ts b/src/hooks/api/member/useMembers.ts index 27d3721b..9bb62417 100644 --- a/src/hooks/api/member/useMembers.ts +++ b/src/hooks/api/member/useMembers.ts @@ -1,3 +1,4 @@ +import { useRouter } from 'next/router'; import { type UseMutationResult, useMutation, @@ -6,14 +7,14 @@ import { import { AxiosError } from 'axios'; import toast from 'react-hot-toast'; import { updateMembers } from '@/apis'; -import { UpdateMembers } from '@/types/club'; export function useUpdateMembers(): UseMutationResult< unknown, AxiosError, - UpdateMembers + FormData > { const queryClient = useQueryClient(); + const router = useRouter(); return useMutation(updateMembers, { onSuccess() { @@ -21,6 +22,7 @@ export function useUpdateMembers(): UseMutationResult< queryKey: ['/club/my/club-members'], }); toast.success('동아리원 정보를 수정했어요.'); + router.push('/'); }, onError() { toast.error('동아리원 정보 수정을 실패했어요'); diff --git a/src/pages/admin/member/index.tsx b/src/pages/admin/member/index.tsx index 455df4de..82b7d033 100644 --- a/src/pages/admin/member/index.tsx +++ b/src/pages/admin/member/index.tsx @@ -21,6 +21,10 @@ export default function Index() { const [keyword, setKeyword] = useState(''); const { openModal, visible, closeModal, modalRef } = useModal(); const [{ token }] = useCookies(['token']); + const url = + 'https://ddingdong-file.s3.ap-northeast-2.amazonaws.com/files/excel/동아리원_명단_수정_양식.xlsx'; + const [file, setFile] = useState(null); + const { data: { data }, } = useMyClub(token); @@ -28,7 +32,7 @@ export default function Index() { const [members, setMembers] = useState([]); const [filteredMembers, setFilteredMembers] = useState([]); - + console.log(members); const [isEditing, setIsEditing] = useState(false); function handleOpenModal() { @@ -39,8 +43,19 @@ export default function Index() { } function handleSubmit() { const parsedMember = parsePosition(); - mutation.mutate({ members: parsedMember, token }); + const formData = new FormData(); + const member = { + clubMemberList: parsedMember, + }; + formData.append( + 'data', + new Blob([JSON.stringify(member)], { type: 'application/json' }), + ); + // formData.append('data', JSON.stringify(member)); + file && formData.append('file', file); + formData.append('token', token); setIsEditing(!isEditing); + return mutation.mutate(formData); } function parsePosition() { const parsedMember: Member[] = []; @@ -85,24 +100,33 @@ export default function Index() { 입니다.
- {isEditing && ( + {/* {isEditing && ( - )} + )} */} + + Excel 양식 다운로드 +
- {isEditing && ( + {/* {isEditing && (
handleOpenModal()} @@ -112,7 +136,7 @@ export default function Index() { Excel로 업로드
- )} + )} */} {!isEditing && }
@@ -120,6 +144,7 @@ export default function Index() { 의 동아리원이 검색돼요.
+
    {isEditing && ( - +
); diff --git a/src/types/club.ts b/src/types/club.ts index f45680cb..e943e30a 100644 --- a/src/types/club.ts +++ b/src/types/club.ts @@ -91,5 +91,6 @@ export type DeleteClub = { export type UpdateMembers = { members: Member[]; + file: FormData; token: string; };