Merge pull request #195 from ssu-student-union/feat/#174_add_acl_data

Feat/#195 자료집 QA 수정
ssu-student-union · Oct 9, 2024 · 32e9b8e · 32e9b8e
2 parents 22a00ad + 65a28fa
commit 32e9b8e
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 30 deletions.
diff --git a/src/apis/getBoardDataPosts.ts b/src/apis/getBoardDataPosts.ts
@@ -11,11 +11,16 @@ interface GetBoardDataPostsParams {
 
 export const getBoardDataPosts = ({ filters = {}, page }: GetBoardDataPostsParams) => {
   const accessToken = localStorage.getItem('accessToken');
+  const headers: { [key: string]: any } = {
+    'Content-Type': 'multipart/form-data',
+  };
+
+  if (accessToken) {
+    headers['Authorization'] = `Bearer ${accessToken}`;
+  }
+
   return client.get('/board/data/posts', {
-    headers: {
-      Authorization: `Bearer ${accessToken}`,
-      'Content-Type': 'multipart/form-data', // FormData를 보내는 경우 Content-Type은 자동으로 설정됨
-    },
+    headers,
     params: {
       take: 5,
       page: page - 1,

diff --git a/src/pages/data/containers/dataBoxSection.tsx b/src/pages/data/containers/dataBoxSection.tsx
@@ -194,7 +194,7 @@ export default function DataBoxSection({ userId, authority }: DataBoxSectionProp
           createdAt: new Date(post.date).setHours(0, 0, 0, 0),
           uploadName: post.title || 'Unnamed Upload',
           uploadDate: post.date || 'Unknown Date',
-          fileData: post.files ? post.files.map((file: File) => file.fileName) : [],
+          fileData: post.files ? post.files.map((file: File) => file) : [],
           fileNames: post.files ? post.files.map((file: File) => file.fileName) : [],
           fileUrl: post.files ? post.files.map((file: File) => file.fileUrl) : [],
           fileType: post.files ? post.files.map((file: File) => file.fileType) : [],
@@ -238,6 +238,10 @@ export default function DataBoxSection({ userId, authority }: DataBoxSectionProp
     }
   }, [currentPage, filters]);
 
+  useEffect(() => {
+    fetchData();
+  }, []);
+
   const handleDownload = (fileUrl: string, fileName: string) => {
     const link = document.createElement('a');
     link.href = fileUrl;
@@ -300,15 +304,15 @@ export default function DataBoxSection({ userId, authority }: DataBoxSectionProp
       </div>
 
       <div className="flex justify-center">
-        <div className="mt-8 grid place-items-center border-t border-black sm:w-[364px] md:w-[630px] lg:w-[963px] xl:w-[1040px] xxl:w-[1533px]">
+        <div className="place-item-center mt-8 grid border-t border-black xs:w-[344px] sm:w-[364px] md:w-[630px] lg:w-[963px] xl:w-[1040px] xxl:w-[1533px]">
           {displayedData.length > 0 ? (
             displayedData.map((data, index) => (
               <div
                 key={data.postId || index}
                 onClick={() => handleSendData(data)}
-                className="h-[100px] border-b border-[#C2C2C2] py-4 sm:w-[344px] md:w-[630px] lg:w-[963px] xl:w-[1040px] xxl:w-[1533px]"
+                className="h-[100px] border-b border-[#C2C2C2] py-4 xs:w-[341px] sm:w-[344px] md:w-[630px] lg:w-[963px] xl:w-[1040px] xxl:w-[1533px]"
               >
-                <div className="flex justify-between">
+                <div className="flex justify-between xs:justify-between">
                   <div
                     className={`flex ${latestData && index === 0 ? '' : 'pl-16 xs:pl-8 sm:pl-2'} text-lg font-medium text-black xs:text-sm sm:text-sm`}
                   >
@@ -345,12 +349,14 @@ export default function DataBoxSection({ userId, authority }: DataBoxSectionProp
             <div className="text-center text-lg font-medium text-gray-500">데이터가 없습니다.</div>
           )}
 
-          <div className="mt-[34px] hidden xs:block sm:block md:block">{isAuthor ? <DataEditBtn /> : null}</div>
+          <div className="mt-[34px] xs:flex xs:justify-center sm:flex sm:justify-center md:flex md:justify-center lg:hidden xl:hidden xxl:hidden">
+            {isAuthor ? <DataEditBtn /> : null}
+          </div>
 
-          <div className="mt-[109px] flex w-full justify-between sm:mt-[34px] md:mt-[34px] lg:mt-[49px] xl:mt-[49px]">
+          <div className="mt-[109px] flex w-full justify-between text-lg xs:mt-[34px] sm:mt-[34px] md:mt-[34px] lg:mt-[49px] lg:pl-[123px] xl:mt-[49px] xl:pl-[123px]">
             <Pagination totalPages={totalPage} currentPage={currentPage} onPageChange={handlePageChange} />
             {isAuthor && (
-              <div className="hidden lg:block xl:block xxl:block">
+              <div className="hidden  lg:block xl:block xxl:block">
                 <DataEditBtn />
               </div>
             )}

diff --git a/src/pages/data/containers/edit/UploadSection.tsx b/src/pages/data/containers/edit/UploadSection.tsx
@@ -52,7 +52,7 @@ export default function UploadSection({ userId }: { userId: string }) {
   const [categories, setCategories] = useState<string[]>([]);
   const [fileCategories, setFileCategories] = useState<string[]>([]);
   const [fileInputSelecType, setfileInputSelecType] = useState<string>('');
-  const [selectType, setSelectType] = useState<string | string[]>([]);
+  const [selectType, setSelectType] = useState<string>();
 
   const [fileInputs, setFileInputs] = useState(() => [
     {
@@ -106,10 +106,15 @@ export default function UploadSection({ userId }: { userId: string }) {
   }, [fileInputs, categories, trigger]);
 
   const isFormValid = () => {
+    /*
     const category = getValues('category');
+    console.log('isFormValid category', category);
+    */
+
     const fileInputsArray = getValues('fileInputs');
+    console.log('isFormValid fileInputsArray', fileInputsArray);
 
-    return category && fileInputsArray;
+    return /*category && */ fileInputsArray;
   };
 
   useEffect(() => {
@@ -146,6 +151,8 @@ export default function UploadSection({ userId }: { userId: string }) {
 
     // type이 배열일 경우, 문자열로 변환하여 accept 속성에 적용
     const selectedType = Array.isArray(selectedInput?.type) ? selectedInput.type.join(',') : selectedInput?.type;
+    console.log('selectedType', selectedType);
+    setSelectType(selectedType);
 
     if (fileInputRef.current && selectedType) {
       fileInputRef.current.accept = selectedType; // 선택된 파일 타입 설정
@@ -171,7 +178,9 @@ export default function UploadSection({ userId }: { userId: string }) {
       console.log('fileInputsArray', fileInputsArray);
       const currentFileInput = fileInputsArray[fileInputsArray.length - 1];
       console.log('currentFileInput', currentFileInput);
+      console.log('selectType', selectType);
       const fileType = selectType;
+      console.log('fileType', fileType);
       const isNew = currentFileInput && 'isNew' in currentFileInput ? currentFileInput.isNew : false;
 
       if (isNew && !fileType) {
@@ -189,12 +198,14 @@ export default function UploadSection({ userId }: { userId: string }) {
         fileUrl: undefined,
       };
 
+      console.log('newFile', newFile);
+
       setTempFiles((prevFiles) => [...prevFiles, newFile]);
 
       // Update fileInputs to include new file information
       setFileInputs((prevInputs) => [
         ...prevInputs.slice(0, -1), // Remove the last input that was pending
-        { ...currentFileInput, fileName: file.name, type: fileType, isNew: false }, // Update last input
+        { ...currentFileInput, fileName: file.name, type: fileType || 'hi', isNew: false }, // Update last input
         { id: prevInputs.length + 1, type: '', fileName: '', isNew: true }, // Add new input
       ]);
 
@@ -210,14 +221,15 @@ export default function UploadSection({ userId }: { userId: string }) {
     }
 
     const existingFiles = JSON.parse(localStorage.getItem('fileData') ?? '[]');
+    console.log('tempFiles', tempFiles);
     const newFileData = {
       uploadName: formValues.uploadName,
       uploadDate: new Date().toLocaleDateString('en-GB'),
-      fileData: tempFiles.map((file) => file.fileData),
-      fileName: tempFiles.map((file) => file.fileName),
-      category: tempFiles.map((file) => file.category),
-      fileType: tempFiles.map((file) => file.fileType),
-      postFileId: tempFiles.map((file) => file.postFileId),
+      fileData: fileInputs.map((file) => file.fileData), // Assuming fileData is to be fetched from somewhere else as fileInputs doesn't have it
+      fileName: fileInputs.map((file) => file.fileName),
+      category: fileInputs.map((file) => file.fileType), // Mapping fileType to category
+      fileType: fileInputs.map((file) => file.fileType),
+      postFileId: fileInputs.map((file) => file.postFileId),
     };
 
     existingFiles.push(newFileData);
@@ -227,9 +239,9 @@ export default function UploadSection({ userId }: { userId: string }) {
     try {
       const uploadName = newFileData.uploadName.length > 0 ? newFileData.uploadName : null;
       const userName = userId || 'Unknown';
-      const fileCategory = newFileData.category.length > 0 ? newFileData.category[0] : '중앙운영위원회'; // 'defaultCategory'를 기본값으로 설정
+      const fileCategory = newFileData.category.length > 0 ? newFileData.category[1] : '중앙운영위원회'; // 'defaultCategory'를 기본값으로 설정
       const fileType = String(newFileData.fileType.length > 0 ? newFileData.fileType : null);
-      const postFileId = newFileData.postFileId.length > 0 ? newFileData.postFileId : null;
+      const postFileId = newFileData.postFileId.length > 0 ? newFileData.postFileId[0] : null;
 
       const accessToken = localStorage.getItem('accessToken');
 
@@ -244,7 +256,7 @@ export default function UploadSection({ userId }: { userId: string }) {
           const patchFileResponse = await postBoardBoardCodeFiles(
             boardCode,
             accessToken,
-            tempFiles.map((file) => file.file),
+            fileInputs.map((file) => file.file),
             []
           );
 
@@ -270,6 +282,7 @@ export default function UploadSection({ userId }: { userId: string }) {
             content: fileCategory,
             categoryCode: userName,
             thumbnailImage: null,
+            isNotice: true,
             postFileList: [patchFileUrls[0]],
           };
 
@@ -352,10 +365,13 @@ export default function UploadSection({ userId }: { userId: string }) {
           fileInputs.find((input) => input.id === index)
         );
         console.log('index', index);
+
+        /*
         console.log(
           'input.id',
           fileInputs.find((input) => input.id[index])
         );
+        */
 
         const inputToDelete = fileInputs.find((input) => input.id === index);
         if (!inputToDelete) {
@@ -369,11 +385,18 @@ export default function UploadSection({ userId }: { userId: string }) {
         // 삭제하려는 파일이 기존 파일인지 확인 (isNew가 false인 경우에만 postFileId가 있음)
         if (post) {
           // tempFiles에서 삭제하려는 파일의 postFileId를 기준으로 일치하는 파일을 찾음
+
+          console.log('post.fileData', post);
+          console.log('inputToDelete.postFileId', inputToDelete.postFileId);
+
           const fileToDelete = post.fileData.find(
             (file: { postFileId: any }) => file.postFileId === inputToDelete.postFileId
           );
+          // 파일을 찾지 못했을 경우
           if (!fileToDelete) {
-            alert('삭제할 파일을 찾을 수 없습니다.');
+            // fileInputs에서 해당 항목을 삭제
+            setFileInputs((prevInputs) => prevInputs.filter((input) => input.id !== inputToDelete.id));
+            console.log('삭제할 파일을 찾지 못해 fileInputs에서 해당 항목을 삭제했습니다.');
             return;
           }
 
@@ -503,7 +526,7 @@ export default function UploadSection({ userId }: { userId: string }) {
 
         setFileInputs(updatedFileInputs);
         setTempFiles(updatedTempFiles);
-        trigger(); // 폼 검증 트리거
+        trigger();
 
         try {
           console.log('fileToDelete', fileToDelete);
@@ -582,13 +605,13 @@ export default function UploadSection({ userId }: { userId: string }) {
 
       <div>
         {fileInputs.map((input, index) => (
-          <div key={input.id || index} className="mb-4">
-            <div className="flex items-center">
+          <div key={input.id || index}>
+            <div className="flex items-center align-middle">
               {input.isNew ? (
                 <></>
               ) : (
                 <>
-                  <div className="relative flex items-center">
+                  <div className="relative mb-4 flex items-center">
                     <FileText className="top-20% absolute left-3 text-gray-600" />
                     <Controller
                       name={`fileInputs.${input.id}.fileName`}
@@ -624,12 +647,12 @@ export default function UploadSection({ userId }: { userId: string }) {
                           trigger();
                         }}
                         value={field.value ? field.value : input.type}
-                        className="ml-[16px] border-gray-500 pl-9 text-sm text-gray-500 xs:h-[31px] xs:w-[105px] sm:h-[43px] sm:w-[141px] sm:text-xs md:h-[43px] md:w-[167px] lg:h-[62px] lg:w-[224px] lg:text-lg xl:h-[62px] xl:w-[224px] xl:text-xl xxl:h-[62px] xxl:w-[354px]"
+                        className="mb-4  ml-[16px] border-gray-500 pl-9 text-sm text-gray-500 xs:h-[31px] xs:w-[105px] sm:h-[43px] sm:w-[141px] sm:text-xs md:h-[43px] md:w-[167px] lg:h-[62px] lg:w-[224px] lg:text-lg xl:h-[62px] xl:w-[224px] xl:text-xl xxl:h-[62px] xxl:w-[354px]"
                       />
                     )}
                   />
 
-                  <button type="button" onClick={() => handleRemoveInput(input.id, index)} className="ml-2">
+                  <button type="button" onClick={() => handleRemoveInput(input.id, index)} className="mb-4 ml-2 ">
                     <Trash2 />
                   </button>
                 </>
@@ -679,6 +702,7 @@ export default function UploadSection({ userId }: { userId: string }) {
             <Button
               type="submit"
               disabled={!isFormValid()}
+              onClick={onSubmit}
               className="mt-[60px] px-9 py-2 xs:h-[32px] xs:w-[186px] sm:h-[44px] sm:w-[315px] md:h-[46px] md:w-[128px] lg:h-[46px] lg:w-[123px] xl:h-[46px] xl:w-[123px] xxl:h-[46px] xxl:w-[123px]"
             >
               등록

diff --git a/src/pages/data/page.tsx b/src/pages/data/page.tsx
@@ -42,7 +42,7 @@ export function Data() {
           <DataNavSection />
 
           <DataBoxSection authority={postDetail?.allowedAuthorities} userId={userId ?? ''} />
-          <div className="flex justify-center sm:mt-[16px] md:mt-[62px] lg:hidden xl:hidden xxl:hidden">
+          <div className="flex justify-center xs:mt-[16px] sm:mt-[16px] md:mt-[62px] lg:hidden xl:hidden xxl:hidden">
             <Search />
           </div>
           <div className="mb-6"></div>