From 04aa02d62928156329e35e3b204dad89c67ac08d Mon Sep 17 00:00:00 2001 From: munkyeong Date: Mon, 11 Mar 2024 21:04:34 +0900 Subject: [PATCH 1/2] =?UTF-8?q?feat=20:=20=EC=9D=B4=EC=8A=88=202=EB=B2=88?= =?UTF-8?q?=20=ED=95=B4=EA=B2=B0=20-=20react=20query=20=EC=BD=94=EB=93=9C?= =?UTF-8?q?=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/postApi.ts | 6 ++++-- src/pages/board/BoardView/BoardView.tsx | 2 +- .../board/BoardView/Section/BannerSection.tsx | 5 +++-- .../board/BoardView/Section/PostSection.tsx | 10 +++++++--- src/pages/board/BoardWrite/BoardWrite.tsx | 17 ++++++++++++----- 5 files changed, 27 insertions(+), 13 deletions(-) diff --git a/src/api/postApi.ts b/src/api/postApi.ts index 905c5737..f1180c20 100644 --- a/src/api/postApi.ts +++ b/src/api/postApi.ts @@ -183,8 +183,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(['files', postId], fetcher, { enabled: fileOpen, diff --git a/src/pages/board/BoardView/BoardView.tsx b/src/pages/board/BoardView/BoardView.tsx index 433dba60..50841d0c 100644 --- a/src/pages/board/BoardView/BoardView.tsx +++ b/src/pages/board/BoardView/BoardView.tsx @@ -58,7 +58,7 @@ const BoardView = () => { {postInfo && ( <>
- +
diff --git a/src/pages/board/BoardView/Section/BannerSection.tsx b/src/pages/board/BoardView/Section/BannerSection.tsx index ba5fe3f7..bcb52ac3 100644 --- a/src/pages/board/BoardView/Section/BannerSection.tsx +++ b/src/pages/board/BoardView/Section/BannerSection.tsx @@ -13,9 +13,10 @@ 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(); @@ -23,7 +24,7 @@ const BannerSection = ({ postId, post }: BannerSectionProps) => { const { checkIsMyId } = useCheckAuth(); const handleEditPostClick = () => { - navigate(`/board/write/${post.categoryName}`, { state: { postId, post } }); + navigate(`/board/write/${post.categoryName}`, { state: { postId, post, password } }); }; const handleDeletePostClick = () => { diff --git a/src/pages/board/BoardView/Section/PostSection.tsx b/src/pages/board/BoardView/Section/PostSection.tsx index 445cd8d9..1d3addcd 100644 --- a/src/pages/board/BoardView/Section/PostSection.tsx +++ b/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,7 +21,7 @@ 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; @@ -29,7 +29,6 @@ const PostSection = ({ postId, post, password }: PostSectionProps) => { 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 (
diff --git a/src/pages/board/BoardWrite/BoardWrite.tsx b/src/pages/board/BoardWrite/BoardWrite.tsx index c03a112d..fd52f8b7 100644 --- a/src/pages/board/BoardWrite/BoardWrite.tsx +++ b/src/pages/board/BoardWrite/BoardWrite.tsx @@ -5,12 +5,13 @@ import { useLocation, useNavigate, useParams } from 'react-router-dom'; import { Stack, Typography } from '@mui/material'; import { Editor } from '@toast-ui/react-editor'; import { useRecoilValue } from 'recoil'; -import { PostInfo, UploadPostSettings } from '@api/dto'; +import { FileInfo, PostInfo, UploadPostSettings } from '@api/dto'; import { useAddFilesMutation, useDeleteFilesMutation, useEditPostMutation, useEditPostThumbnailMutation, + useGetPostFilesQuery, useUploadPostMutation, } from '@api/postApi'; import { COMMON } from '@constants/helperText'; @@ -33,6 +34,7 @@ const BoardWrite = () => { state: { postId: number; post: PostInfo; + password: string; } | null; } = useLocation(); @@ -67,7 +69,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 +157,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 +204,7 @@ const BoardWrite = () => { height="470px" initialValue={editMode?.post.content} forwardedRef={editorRef as React.MutableRefObject} - onBlur={handleEditorBlur} + onChange={handleEditorBlur} /> {!hasContent && contentErrMsg} From 893e5c054bac9f086b09e460ac704e23e5d85256 Mon Sep 17 00:00:00 2001 From: redzzzi Date: Mon, 3 Jun 2024 15:23:42 +0900 Subject: [PATCH 2/2] =?UTF-8?q?refactor=20:=20=EC=82=AC=EC=9A=A9=EB=90=98?= =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EC=9D=80=20=EB=B3=80=EC=88=98=20=EC=82=AD?= =?UTF-8?q?=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - merge conflict 해결 #880 --- src/pages/board/BoardWrite/BoardWrite.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/pages/board/BoardWrite/BoardWrite.tsx b/src/pages/board/BoardWrite/BoardWrite.tsx index fd52f8b7..4908f209 100644 --- a/src/pages/board/BoardWrite/BoardWrite.tsx +++ b/src/pages/board/BoardWrite/BoardWrite.tsx @@ -1,11 +1,10 @@ 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'; import { useRecoilValue } from 'recoil'; -import { FileInfo, PostInfo, UploadPostSettings } from '@api/dto'; +import { PostInfo, UploadPostSettings } from '@api/dto'; import { useAddFilesMutation, useDeleteFilesMutation,