Merge pull request #159 from KEEPER31337/feature/게시글_파일_수정_문제_fix

Feature/게시글 파일 수정 문제 fix
KEEPER31337 · May 31, 2022 · 8fd63a7 · 8fd63a7
2 parents ba0a08d + 9199859
commit 8fd63a7
Show file tree

Hide file tree

Showing 7 changed files with 292 additions and 365 deletions.
diff --git a/src/API/v1/comment.js b/src/API/v1/comment.js
@@ -2,11 +2,10 @@ import axios from 'axios';
 
 const API_URL = process.env.REACT_APP_API_URL;
 
-async function create({ boardId, content, ipAddress, parentId, token }) {
+async function create({ boardId, content, parentId, token }) {
   const url = API_URL + '/v1/comment/' + boardId;
   const data = {
     content,
-    ipAddress,
     parentId,
   };
   const options = {

diff --git a/src/API/v1/post.js b/src/API/v1/post.js
@@ -6,7 +6,6 @@ async function create({
   title,
   content,
   categoryId,
-  ipAddress,
   allowComment,
   isNotice,
   isSecret,
@@ -20,7 +19,6 @@ async function create({
   formData.append('title', title);
   formData.append('content', content);
   formData.append('categoryId', categoryId);
-  formData.append('ipAddress', ipAddress);
   formData.append('allowComment', allowComment);
   formData.append('isNotice', isNotice);
   formData.append('isSecret', isSecret);
@@ -129,7 +127,6 @@ async function modify({
   title,
   content,
   categoryId,
-  ipAddress,
   allowComment,
   isNotice,
   isSecret,
@@ -143,7 +140,6 @@ async function modify({
   formData.append('title', title);
   formData.append('content', content);
   formData.append('categoryId', categoryId);
-  formData.append('ipAddress', ipAddress);
   formData.append('allowComment', allowComment);
   formData.append('isNotice', isNotice);
   formData.append('isSecret', isSecret);
@@ -167,10 +163,25 @@ async function modify({
     );
     return response.data;
   } catch (error) {
-    return error.response.data;
+    return error.response?.data;
+  }
+}
+async function deleteFiles({ fileIdList, token }) {
+  const options = {
+    method: 'DELETE',
+    url: API_URL + '/v1/post/files',
+    params: { fileIdList: fileIdList.join(',') },
+    headers: {
+      Authorization: `${token}`,
+    },
+  };
+  try {
+    const response = await axios(options);
+    return response.data;
+  } catch (error) {
+    return error.response?.data;
   }
 }
-
 async function remove({ boardId, token }) {
   const options = {
     method: 'DELETE',
@@ -259,6 +270,7 @@ export default {
   getNoticeList,
   downloadFile,
   modify,
+  deleteFiles,
   remove,
   search,
   like,

diff --git a/src/page/Board/Components/FilesUploadForm.jsx b/src/page/Board/Components/FilesUploadForm.jsx
@@ -7,7 +7,6 @@ import { formatFileSize } from '../BoardUtil';
 
 const getFileIcon = (filename) => {
   const extension = filename?.split('.')[1];
-
   try {
     return (
       <img
@@ -25,15 +24,42 @@ const getFileIcon = (filename) => {
   }
 };
 
-const FilesUploadForm = (props) => {
-  const [files, setFiles] = useState([]);
-
+const FilesUploadForm = ({
+  files,
+  setFiles,
+  modifyFlag,
+  deleteFileIdList,
+  setDeleteFileIdList,
+  originFiles,
+  setOriginFile,
+}) => {
+  const deleteOriginClickHandler = (id) => {
+    setOriginFile(originFiles.filter((file) => file.id !== id));
+    setDeleteFileIdList([...deleteFileIdList, id]); //지울 파일 리스트에 아이디 추가
+  };
+  const getFileInfoOrigin = (file) => {
+    //기존에 첨부되어 있던 파일의 상세 정보 display
+    return (
+      <tr className="border-b" key={file.fileName}>
+        <td>
+          {getFileIcon(file.fileName)}
+          {file.fileName}
+        </td>
+        <td className="text-center">{formatFileSize(file.fileSize)}</td>
+        <td className="text-red-500 text-center">
+          <button onClick={() => deleteOriginClickHandler(file.id)}>
+            <TrashIcon className=" h-5 w-5 inline-block " aria-hidden="true" />
+            삭제
+          </button>
+        </td>
+      </tr>
+    );
+  };
   const deleteClickHandler = (fileName) => {
-    props.setFiles(files.filter((file) => file.name !== fileName));
     setFiles(files.filter((file) => file.name !== fileName));
   };
-
   const getFileInfo = (file) => {
+    //새로 첨부한 파일의 상세 정보 display
     return (
       <tr className="border-b" key={file.name}>
         <td>
@@ -52,21 +78,26 @@ const FilesUploadForm = (props) => {
   };
 
   useEffect(() => {
-    console.log(files);
-  }, [files]);
+    console.log('origin:', originFiles);
+    console.log('new:', files);
+  }, [files, originFiles]);
   useEffect(() => {
-    if (props.modifyFlag) {
-      console.log(props.board.files);
-      //setFiles(props.board.files);
+    if (modifyFlag) {
+      //console.log('origin:', props.board.files);
+      //props.setOriginFiles(props.board.files);
     }
   }, []);
   const onDrop = useCallback(
     (acceptedFiles) => {
-      var temp = [...files];
+      var temp = [...originFiles, ...files];
+      console.log(originFiles);
+      console.log(temp);
       var realAddFiles = []; //최종적으로 추가될 파일
       var notAddFiles = []; //중복된 파일
       acceptedFiles.forEach((newFile) => {
-        const isRepeat = temp.filter((file) => file.name == newFile.name);
+        const isRepeat = temp.filter(
+          (file) => file.name == newFile.name || file.fileName == newFile.name
+        );
         if (isRepeat.length != 0) {
           //console.log('중복');
           notAddFiles = [...notAddFiles, newFile];
@@ -106,7 +137,6 @@ const FilesUploadForm = (props) => {
             ') 기존 파일을 삭제하고 새로 업로드 해주십시오.'
         );
       }
-      props.setFiles([...files, ...realAddFiles]);
       setFiles([...files, ...realAddFiles]);
     },
     [files]
@@ -121,13 +151,15 @@ const FilesUploadForm = (props) => {
     <>
       <div
         className={
-          (files.length === 0 ? 'h-[200px]' : 'h-[400px]') +
+          (files.length === 0 && originFiles.length === 0
+            ? 'h-[200px]'
+            : 'h-[400px]') +
           ' flex-column w-full border-4 border-dashed rounded-xl hidden sm:block dark:border-slate-500'
         }
       >
         <div
           className={
-            files.length === 0
+            files.length === 0 && originFiles.length === 0
               ? 'hidden'
               : '' +
                 ' w-full h-[200px] overflow-y-scroll rounded-t-lg border-b-4 border-dashed dark:border-slate-500 '
@@ -141,7 +173,10 @@ const FilesUploadForm = (props) => {
                 <th className="min-w-[4em] w-1/5">삭제</th>
               </tr>
             </thead>
-            <tbody>{files.map((file) => getFileInfo(file))}</tbody>
+            <tbody>
+              {originFiles.map((file) => getFileInfoOrigin(file))}
+              {files.map((file) => getFileInfo(file))}
+            </tbody>
           </table>
         </div>
 
@@ -151,7 +186,7 @@ const FilesUploadForm = (props) => {
             (isDragActive
               ? 'bg-blue-300 bg-opacity-50'
               : 'bg-slate-100 bg-opacity-50') +
-            (files.length === 0
+            (files.length === 0 && originFiles.length === 0
               ? ' h-full rounded-lg'
               : ' h-[192px] rounded-b-lg ') +
             ' flex items-center justify-center '
@@ -193,7 +228,7 @@ const FilesUploadForm = (props) => {
           />
           파일 추가
         </button>
-        {files.length !== 0 ? (
+        {files.length !== 0 || originFiles.length !== 0 ? ( //첨부된 파일이 있을 경우
           <table className="w-full dark:text-mainWhite">
             {/*console.log(files.length)*/}
             <thead className="bg-mainYellow bg-opacity-100 ">
@@ -203,7 +238,10 @@ const FilesUploadForm = (props) => {
                 <th className="min-w-[4em] w-1/5 rounded-tr-lg">삭제</th>
               </tr>
             </thead>
-            <tbody>{files.map((file) => getFileInfo(file))}</tbody>
+            <tbody>
+              {originFiles?.map((file) => getFileInfoOrigin(file))}
+              {files?.map((file) => getFileInfo(file))}
+            </tbody>
           </table>
         ) : (
           ''