Merge pull request #125 from keemsebin/feature#124

Hotfix: 동아리원 엑셀 수정
COW-dev · Mar 5, 2024 · 3a19fe5 · 3a19fe5
2 parents ddf0326 + 95e62e6
commit 3a19fe5
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 28 deletions.
diff --git 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
@@ -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<React.SetStateAction<File | null>>;
   closeModal: () => void;
 };
 
-export default function MemberUpload({ closeModal }: Props) {
-  const [file, setFile] = useState<File | null>(null);
+export default function MemberUpload({ closeModal, file, setFile }: Props) {
   const [cookies] = useCookies(['token']);
-
-  const mutation = useUploadMembers();
+  const mutation = useUpdateMembers();
 
   function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
     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
@@ -1,3 +1,4 @@
+import { useRouter } from 'next/router';
 import {
   type UseMutationResult,
   useMutation,
@@ -6,21 +7,22 @@ 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() {
       queryClient.invalidateQueries({
         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
@@ -21,14 +21,18 @@ export default function Index() {
   const [keyword, setKeyword] = useState<string>('');
   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<File | null>(null);
+
   const {
     data: { data },
   } = useMyClub(token);
   const mutation = useUpdateMembers();
 
   const [members, setMembers] = useState<Member[]>([]);
   const [filteredMembers, setFilteredMembers] = useState<Member[]>([]);
-
+  console.log(members);
   const [isEditing, setIsEditing] = useState<boolean>(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() {
           입니다.
         </div>
         <div>
-          {isEditing && (
+          {/* {isEditing && (
             <button
               onClick={handleEditting}
               className="mr-2 rounded-lg bg-gray-100 px-4 py-2 text-sm font-bold text-gray-500 transition-colors hover:bg-gray-200 md:w-auto md:py-2.5"
             >
               취소
             </button>
-          )}
+          )} */}
+          <a
+            href={url}
+            download
+            target="_blank"
+            className="mr-3 mt-2 cursor-pointer rounded-lg bg-green-100 px-4 py-2.5 text-sm font-bold text-green-500 transition-colors hover:bg-blue-200 md:w-auto md:py-3"
+          >
+            Excel 양식 다운로드
+          </a>
           <button
-            onClick={isEditing ? handleSubmit : handleEditting}
-            className="rounded-lg  bg-blue-100 px-4 py-2 text-sm font-bold text-blue-500 transition-colors hover:bg-blue-200 md:w-auto md:py-2.5"
+            // onClick={isEditing ? handleSubmit : handleEditting}
+            onClick={openModal}
+            className="mt-2 cursor-pointer rounded-lg bg-green-100 px-4 py-2 text-sm font-bold text-green-500 transition-colors hover:bg-blue-200 md:w-auto md:py-2.5"
           >
-            {isEditing ? `변경사항 저장` : `명단 수정하기`}
+            Excel로 업로드
           </button>
         </div>
       </div>
       <div className=" rounded-xl border-[1.5px] border-gray-100 p-5  ">
-        {isEditing && (
+        {/* {isEditing && (
           <div className="flex justify-end ">
             <span
               onClick={() => handleOpenModal()}
@@ -112,14 +136,15 @@ export default function Index() {
               Excel로 업로드
             </span>
           </div>
-        )}
+        )} */}
         {!isEditing && <SearchBar value={keyword} onChange={setKeyword} />}
         <div className="mb-3 mt-5 text-sm font-semibold text-gray-500 md:text-base">
           <span className="text-blue-500 opacity-70">
             {filteredMembers.length}명
           </span>
           의 동아리원이 검색돼요.
         </div>
+
         <ul className="grid w-full grid-cols-1 sm:grid-cols-2  lg:grid-cols-3">
           {isEditing && (
             <MemberInfo
@@ -147,7 +172,7 @@ export default function Index() {
         title={'동아리원 엑셀 업로드'}
         closeModal={closeModal}
       >
-        <MemberUpload closeModal={closeModal} />
+        <MemberUpload closeModal={closeModal} file={file} setFile={setFile} />
       </Modal>
     </div>
   );

diff --git 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;
 };