Merge pull request #889 from KEEPER31337/feature/게시글_수정하기_버튼_활성화_안_됨_…

…#880

Feature/게시글 수정하기 버튼 활성화 안 됨 #880

src/api/postApi.ts

@@ -199,8 +199,10 @@ const useGetEachPostQuery = (
 
 const useGetPostFilesQuery = (postId: number, fileOpen: boolean, password?: string) => {
   const queryClient = useQueryClient();
-
-  const fetcher = () => axios.get(`/posts/${postId}/files`).then(({ data }) => data);
+  const fetcher = () =>
+    axios.get(`/posts/${postId}/files`).then(({ data }) => {
+      return data;
+    });
 
   return useQuery<FileInfo[]>(['files', postId], fetcher, {
     enabled: fileOpen,

src/pages/board/BoardView/BoardView.tsx

@@ -58,7 +58,7 @@ const BoardView = () => {
       {postInfo && (
         <>
           <div className="space-y-2">
-            <BannerSection postId={postId} post={postInfo} />
+            <BannerSection postId={postId} post={postInfo} password={password} />
             <PostSection postId={postId} post={postInfo} password={password} />
           </div>
           <AdjacentPostNavSection previousPost={postInfo.previousPost} nextPost={postInfo.nextPost} />

src/pages/board/BoardView/Section/BannerSection.tsx

@@ -13,17 +13,18 @@ import ActionModal from '@components/Modal/ActionModal';
 interface BannerSectionProps {
   postId: number;
   post: PostInfo;
+  password?: string;
 }
 
-const BannerSection = ({ postId, post }: BannerSectionProps) => {
+const BannerSection = ({ postId, post, password }: BannerSectionProps) => {
   const [warningDeleteModalopen, setWarningDeleteModalopen] = useState(false);
 
   const { mutate: deletePost } = useDeletePostMutation();
   const navigate = useNavigate();
   const { checkIsMyId } = useCheckAuth();
 
   const handleEditPostClick = () => {
-    navigate(`/board/write/${post.categoryName}`, { state: { postId, post } });
+    navigate(`/board/write/${post.categoryName}`, { state: { postId, post, password } });
   };
 
   const handleDeletePostClick = () => {

src/pages/board/BoardView/Section/PostSection.tsx

@@ -1,4 +1,4 @@
-import React, { useReducer, useState } from 'react';
+import React, { useEffect, useReducer, useState } from 'react';
 import { Button, Typography } from '@mui/material';
 import { VscArrowDown, VscArrowUp, VscFolder, VscFolderOpened } from 'react-icons/vsc';
 import { PostInfo } from '@api/dto';
@@ -21,15 +21,14 @@ interface PostSectionProps {
 }
 
 const PostSection = ({ postId, post, password }: PostSectionProps) => {
-  const [fileOpen, toggleFileOpen] = useReducer((prev) => !prev, false);
+  const [fileOpen, toggleFileOpen] = useReducer((prev) => !prev, true);
   const [warningModalOpen, setWarningModalOpen] = useState(false);
   const hasWarningModal = post.categoryName === '시험게시판' && post.isRead === false && !fileOpen;
 
   const { data: files } = useGetPostFilesQuery(postId, fileOpen, password);
   const { mutate: controlLikes } = useControlPostLikesMutation();
   const { mutate: controlDislikes } = useControlPostDislikesMutation();
   const { mutate: downloadFile } = useDownloadFileMutation();
-
   const handleFileOpenButtonClick = () => {
     if (hasWarningModal) {
       setWarningModalOpen(true);
@@ -56,6 +55,11 @@ const PostSection = ({ postId, post, password }: PostSectionProps) => {
     controlDislikes(postId);
   };
 
+  useEffect(() => {
+    handleFileOpenButtonClick();
+    // toggleFileOpen();
+  }, []);
+
   return (
     <div className="min-h-[500px] bg-middleBlack px-6 pb-8 pt-3 sm:px-14 sm:py-10">
       <StandardViewer className="mb-4 min-h-[380px]" content={post.content} />

src/pages/board/BoardWrite/BoardWrite.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
-import { useQueryClient } from 'react-query';
 import { useLocation, useNavigate, useParams } from 'react-router-dom';
 import { Stack, Typography } from '@mui/material';
 import { Editor } from '@toast-ui/react-editor';
@@ -11,6 +10,7 @@ import {
   useDeleteFilesMutation,
   useEditPostMutation,
   useEditPostThumbnailMutation,
+  useGetPostFilesQuery,
   useUploadPostMutation,
 } from '@api/postApi';
 import { COMMON } from '@constants/helperText';
@@ -33,6 +33,7 @@ const BoardWrite = () => {
     state: {
       postId: number;
       post: PostInfo;
+      password: string;
     } | null;
   } = useLocation();
 
@@ -67,7 +68,14 @@ const BoardWrite = () => {
     getValues,
     formState: { isValid },
   } = useForm({ mode: 'onBlur' });
-  const queryClient = useQueryClient();
+
+  if (editMode) {
+    const { data: filesInfo } = useGetPostFilesQuery(editMode?.postId, true, editMode?.password);
+    useEffect(() => {
+      if (!filesInfo) return;
+      setExistingFiles(filesInfo as any);
+    }, [filesInfo]);
+  }
 
   const handleEditorBlur = () => {
     const content = editorRef.current?.getInstance().getMarkdown();
@@ -148,8 +156,6 @@ const BoardWrite = () => {
       isTemp: editMode.post.isTemp,
       allowComment: editMode.post.allowComment,
     });
-    const serverFiles: (File & { fileId: number })[] | undefined = queryClient.getQueryData(['files', editMode.postId]);
-    if (serverFiles) setExistingFiles(serverFiles);
   }, []);
 
   return (
@@ -197,7 +203,7 @@ const BoardWrite = () => {
           height="470px"
           initialValue={editMode?.post.content}
           forwardedRef={editorRef as React.MutableRefObject<Editor>}
-          onBlur={handleEditorBlur}
+          onChange={handleEditorBlur}
         />
         <Typography variant="small" className="text-subRed">
           {!hasContent && contentErrMsg}