각종 오류수정

🐛 각종 오류수정
pknu-wap · Nov 29, 2023 · 8f4e831 · 8f4e831
2 parents ef36917 + 5e504c7
commit 8f4e831
Show file tree

Hide file tree

Showing 12 changed files with 136 additions and 67 deletions.
diff --git a/client/src/api/blog-api.ts b/client/src/api/blog-api.ts
@@ -58,3 +58,14 @@ export const useGetIsNewBlogQuery = (token?: string | null) => {
   const { isLoading, error, data } = useQuery([`isNewBlog`], () => getIsNewBlogApi(token), {});
   return { data, isLoading, error };
 };
+
+// 카테고리 아이디로 블로그url 불러오기
+export const getBlogUrl = async (params: IBlogUrlParams) => {
+  const { data } = await defaultInstance.get('blog/url', { params });
+  return data;
+};
+
+export const useGetBlogUrlQuery = (params: IBlogUrlParams) => {
+  const { isLoading, error, data } = useQuery([`blogUrl`, params], () => getBlogUrl(params), {});
+  return { data, isLoading, error };
+};
diff --git a/client/src/api/reply-api.ts b/client/src/api/reply-api.ts
@@ -1,4 +1,4 @@
-import { IPatchReplyLike, IReply, IReplyParams } from '@/types/dto';
+import { IPatchReplyLike, IPutReply, IReply, IReplyParams } from '@/types/dto';
 import { defaultInstance } from '.';
 import { useQuery } from '@tanstack/react-query';
 
@@ -23,3 +23,8 @@ export const PatchReplyLikeApi = async (params: IPatchReplyLike) => {
   const { data } = await defaultInstance.patch(`/replies/like/${params.replyId}`, params);
   return data;
 };
+
+export const putReplyApi = async (body: IPutReply) => {
+  const { data } = await defaultInstance.put('/replies', body);
+  return data;
+};
diff --git a/client/src/app/[blogName]/home/[categoryId]/[postId]/page.tsx b/client/src/app/[blogName]/home/[categoryId]/[postId]/page.tsx
@@ -59,7 +59,6 @@ const page = ({ params }: { params: { blogName: string; categoryId: string; post
   const router = useRouter();
   const theme = useTheme();
 
-  //[FIXME: repliese get할 때 body말고 parameter로 바뀌어졌을 때 useState() 바꿔주기]
   const [page, setPage] = useState(0);
   const [order, setOrder] = useState('like');
   const orderList = ['like', 'recent', 'oldest'];

diff --git a/client/src/app/[blogName]/home/[categoryId]/[postId]/postId.style.tsx b/client/src/app/[blogName]/home/[categoryId]/[postId]/postId.style.tsx
@@ -1,5 +1,5 @@
 import IconButton from '@/components/Button/IconButton';
-import { Pagination, Tooltip } from '@mui/material';
+import { Pagination, TextField, Tooltip } from '@mui/material';
 import { Stack } from '@mui/material';
 import { styled, useTheme } from '@mui/material/styles';
 import ThumbUpOffAltIcon from '@mui/icons-material/ThumbUpOffAlt';
@@ -9,13 +9,13 @@ import { IIntroduce } from '@/types/dto';
 import { useGetIntroduceQuery } from '@/api/introduce-api';
 import { useInsertionEffect, useState } from 'react';
 import Modal from '@/components/Modal/Modal';
-import { ModalContent } from '@/components/Modal/Modal.style';
+import { ModalContent, ModalTitle } from '@/components/Modal/Modal.style';
 import PageLink from '@/components/PageLink/PageLink';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { PutFriendAllowApi, PutFriendRequestApi } from '@/api/friend-api';
 import CheckIcon from '@mui/icons-material/Check';
 import CloseIcon from '@mui/icons-material/Close';
-import { PatchReplyLikeApi } from '@/api/reply-api';
+import { PatchReplyLikeApi, putReplyApi } from '@/api/reply-api';
 
 export const ThumbnailArea = styled(Stack)({
   width: '100%',
@@ -47,7 +47,7 @@ export const ProfileImg = styled(Stack)(({ imageSrc }: { imageSrc: string }) =>
 }));
 
 export const PostReply = styled(Stack)({
-  marginTop: '60px',
+  marginTop: '50px',
   height: '100%',
   flexDirection: 'column',
 });
@@ -108,6 +108,7 @@ function RepliesComponent({
 }) {
   const theme = useTheme();
   const queryClient = useQueryClient();
+  const [putReplyOpen, setPutReplyOpen] = useState<boolean>(false);
 
   const [IntroduceOpen, setIntroduceOpen] = useState<boolean>(false);
   const { data: introduceData } = useGetIntroduceQuery({
@@ -142,6 +143,20 @@ function RepliesComponent({
     PutFriendRequestQuery.mutate(newRequestBody);
   };
 
+  const [newReply, setNewReply] = useState('');
+  const PutReplyQuery = useMutation(putReplyApi, {
+    onSuccess: () => {
+      queryClient.invalidateQueries(['replies']);
+    },
+  });
+  const PutReplyOnClick = () => {
+    const newReplyBody = {
+      repyId: replyId,
+      message: newReply,
+    };
+    PutReplyQuery.mutate(newReplyBody);
+  };
+
   const PatchReplyLikeQuery = useMutation(PatchReplyLikeApi, {
     onSuccess: () => {
       queryClient.invalidateQueries(['replies']);
@@ -191,11 +206,31 @@ function RepliesComponent({
               <ThumbUpOffAltIcon></ThumbUpOffAltIcon>
             </IconButton>
           )}
-          <ChangeReply>{isEdit ? <Button>수정하기</Button> : <></>}</ChangeReply>
           {likesCount}
+          <ChangeReply>
+            {isEdit ? <Button onClick={() => setPutReplyOpen(true)}>수정하기</Button> : <></>}
+          </ChangeReply>
         </ReplyLike>
       </ReplySubInfo>
 
+      <Modal open={putReplyOpen} onClose={() => setPutReplyOpen(false)}>
+        <ModalTitle>수정하기</ModalTitle>
+        <ModalContent>
+          <TextField
+            fullWidth
+            defaultValue={message}
+            onChange={(e) => {
+              setNewReply(e.target.value);
+            }}></TextField>
+          <Button
+            onClick={() => {
+              PutReplyOnClick();
+            }}>
+            게시하기
+          </Button>
+        </ModalContent>
+      </Modal>
+
       {/* 댓글 상대방 introduction */}
       <Modal open={IntroduceOpen} maxWidth="md" onClose={() => setIntroduceOpen(false)}>
         <ModalContent>

diff --git a/client/src/app/[blogName]/page.tsx b/client/src/app/[blogName]/page.tsx
@@ -9,6 +9,7 @@ import { ISidebarContent } from '@/types/dto';
 import { Stack, TextField } from '@mui/material';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import MDEditor from '@uiw/react-md-editor';
+import { enqueueSnackbar } from 'notistack';
 import { useEffect, useState } from 'react';
 
 const Home = ({ params }: { params: { blogName: string } }) => {
@@ -27,8 +28,13 @@ const Home = ({ params }: { params: { blogName: string } }) => {
   const putReadMeCreateQuery = useMutation(PutReadMeApi, {
     onSuccess: () => {
       queryClient.invalidateQueries(['readMe']);
+      enqueueSnackbar({ message: '리드미 페이지가 수정되었습니다.', variant: 'success' });
     },
-  });
+    onError: () => {
+      enqueueSnackbar({ message: '리드미 페이지가 수정되지 않았습니다.', variant: 'error' });
+    },
+    }
+  );
 
   const ReadMeOnClick = () => {
     const newReadMeBody = {
@@ -52,8 +58,7 @@ const Home = ({ params }: { params: { blogName: string } }) => {
         rightContainer={
           <Stack width="80%" margin="auto" overflow={'scroll'}>
             <TextField
-              id="standard-basic"
-              label="Standard"
+              label="수정할 리드미를 입력해주세요"
               variant="standard"
               onChange={(e) => {
                 setContent(e.target.value);

diff --git a/client/src/app/write/Modal/SaveModal.tsx b/client/src/app/write/Modal/SaveModal.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import React, { useRef, useState } from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 import Modal from '@/components/Modal/Modal';
 import { Dialog } from '@/components/Dialog/Dialog';
 import { ModalType, PrivateMapType } from '@/types/common';
@@ -22,6 +22,8 @@ import { PostTemplateApi, PostTemporaryApi, PostWriteApi, UpdateWriteApi } from
 import { usePathname, useRouter } from 'next/navigation';
 import { WriteModalType, WriteProps } from '@/util/useWriteProps';
 import { enqueueSnackbar } from 'notistack';
+import { useGetBlogUrlQuery } from '@/api/blog-api';
+import { IBlogUrl } from '@/types/dto';
 
 function SaveModal({
   open,
@@ -47,11 +49,16 @@ function SaveModal({
   const queryClient = useQueryClient();
   // const isPrUpdate = pathname.startsWith('/write/pr/update');
   const isPr = pathname.startsWith('/write/pr');
+  const {data: blogUrlData} = useGetBlogUrlQuery({
+    categoryId: categoryId,
+  });
+  const [blogUrl, setBlogUrl] = useState<IBlogUrl>();
 
   const postWriteCreateQuery = useMutation(PostWriteApi, {
     onSuccess: () => {
+
       queryClient.invalidateQueries(['post']);
-      router.push('/home');
+      router.push(`/${blogUrl}`);
       enqueueSnackbar({ message: '글 작성이 완료되었습니다.', variant: 'success' });
     },
     onError: (e: Error) => {
@@ -95,7 +102,7 @@ function SaveModal({
   };
 
   // FormData 생성 함수
-  // [FIXME : 템플릿 수정하면서 같이한 거라 나중에 수정 예정]
+
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const createFormData = (postData: any) => {
     const formData = new FormData();
@@ -212,6 +219,10 @@ function SaveModal({
     fileInput.current?.click();
   };
 
+  useEffect(() => {
+    setBlogUrl(blogUrlData);
+  }, [blogUrlData]);
+
   const privateMap: PrivateMapType = {
     publicButton: {
       private: {

diff --git a/client/src/components/DND/CategorySettingModal.tsx b/client/src/components/DND/CategorySettingModal.tsx
@@ -8,15 +8,20 @@ import Button from '../Button/Button';
 import { Dialog } from '../Dialog/Dialog';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { DeleteCategoryApi, PutCategoryApi } from '@/api/category-api';
+import { enqueueSnackbar } from 'notistack';
 
 function CategorySettingModal({ open, categoryId, onClose }: CategorySettingModalType) {
   const queryClient = useQueryClient();
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const deleteCategoryQuery = useMutation(DeleteCategoryApi, {
     onSuccess() {
-      queryClient.invalidateQueries(['category']);
+      queryClient.invalidateQueries(['sidebar']);
+      enqueueSnackbar({ message: '카테고리가 삭제되었습니다', variant: 'success' });
     },
-  });
+    onError() {
+      enqueueSnackbar({ message: '카테고리가 삭제되지 않았습니다', variant: 'error' });
+    }
+    });
   const deleteClick = () => {
     deleteCategoryQuery.mutate({ categoryId: categoryId });
     onClose();

diff --git a/client/src/components/DND/CreateCategoryModal.tsx b/client/src/components/DND/CreateCategoryModal.tsx
@@ -4,20 +4,20 @@ import { ModalActions, ModalContent, ModalTitle } from '../Modal/Modal.style';
 import { Stack, TextField } from '@mui/material';
 import ModalButton from '../Modal/ModalButton';
 import { ModalType } from '@/types/common';
-import Button from '../Button/Button';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { PostCategoryApi } from '@/api/category-api';
-import CheckIcon from '@mui/icons-material/Check';
-import CloseIcon from '@mui/icons-material/Close';
+import { enqueueSnackbar } from 'notistack';
 
 function CreateCategoryModal({ open, onClose }: ModalType) {
   const queryClient = useQueryClient();
   const [categoryName, setCategoryName] = useState('');
-  const [, setRepositoryUrl] = useState('');
-  const [, setIsPrCategory] = useState<boolean>(Boolean);
   const postCategoryQuery = useMutation(PostCategoryApi, {
     onSuccess() {
-      queryClient.invalidateQueries(['guestbook']);
+      queryClient.invalidateQueries(['sidebar']);
+      enqueueSnackbar({ message: '카테고리가 생성되었습니다.', variant: 'success' });
+    },
+    onError() {
+      enqueueSnackbar({ message: '카테고리가 생성되지 않았습니다.', variant: 'error' });
     },
   });
   const postCategoryClick = () => {
@@ -48,39 +48,6 @@ function CreateCategoryModal({ open, onClose }: ModalType) {
               }}
             />
           </Stack>
-          <Stack flexDirection="row" fontSize="18px" fontWeight="bold">
-            깃허브 연동 여부 :
-            <Stack flexDirection="row" marginLeft="10px">
-              <Button
-                sx={{ minWidth: '36px', height: '36px', padding: '0' }}
-                onClick={() => {
-                  setIsPrCategory(true);
-                }}
-                color="success">
-                <CheckIcon />
-              </Button>
-
-              <Button
-                sx={{ minWidth: '36px', height: '36px', padding: '0' }}
-                onClick={() => {
-                  setIsPrCategory(false);
-                }}
-                color="error">
-                <CloseIcon />
-              </Button>
-            </Stack>
-          </Stack>
-          <Stack direction="row" alignItems="center" spacing={3}>
-            <Stack fontSize="18px" fontWeight="bold">
-              레포지토리 URL :
-            </Stack>
-            <TextField
-              variant="standard"
-              onChange={(e) => {
-                setRepositoryUrl(e.target.value);
-              }}
-            />
-          </Stack>
         </Stack>
       </ModalContent>
       <ModalActions>

diff --git a/client/src/components/GuestBook/GuestBookModal.tsx b/client/src/components/GuestBook/GuestBookModal.tsx
@@ -22,6 +22,7 @@ function GuestBookModal({ open, blogId, onClose }: GuestbookType) {
   const postGuestbookQuery = useMutation(PostGuestbookApi, {
     onSuccess() {
       queryClient.invalidateQueries(['guestbook']);
+      setMessage('');
     },
   });
   const postGuestbookClick = () => {
@@ -39,11 +40,13 @@ function GuestBookModal({ open, blogId, onClose }: GuestbookType) {
     setGuestBook(guestbookData);
   }, [guestbookData]);
 
+
+
   return (
     <Modal maxWidth="lg" open={open} onClose={onClose}>
       <ModalTitle>방명록 📮</ModalTitle>
       <ModalContent>
-        <Stack width="600px" maxHeight="300px" overflow="scroll" spacing={6}>
+        <Stack width="600px" height="275px" overflow="scroll" spacing={6}>
           {guestbook?.messageDto.map((message) => {
             return (
               <Comment
@@ -67,6 +70,7 @@ function GuestBookModal({ open, blogId, onClose }: GuestbookType) {
             variant="outlined"
             placeholder="방명록을 남겨보세요"
             sx={{ marginRight: '20px' }}
+            value={message}
             onChange={(e) => {
               setMessage(e.target.value);
             }}

diff --git a/client/src/components/Layout/HeaderFriendModal/FriendModal.style.tsx b/client/src/components/Layout/HeaderFriendModal/FriendModal.style.tsx
@@ -83,6 +83,8 @@ function FriendListComponent({
   const [IntroduceOpen, setIntroduceOpen] = useState<boolean>(false);
   const [deleteConfirmOpen, setDeleteConFirmOpen] = useState<boolean>(false);
   const [isAccept, setIsAccept] = useState<number>(Number);
+  const [acceptConfirmOpen, setAcceptConfirmOpen] = useState<boolean>(false);
+  const [refuseConfirmOpen, setRefuseConfirmOpen] = useState<boolean>(false);
   const putAllowFriendIdCreateQuery = useMutation(PutFriendAllowApi, {
     onSuccess: () => {
       queryClient.invalidateQueries(['friend'])
@@ -159,10 +161,7 @@ function FriendListComponent({
               <Tooltip title="수락" arrow>
                 <Button
                   sx={{minWidth: '36px', height: '36px', padding: '0'}}
-                  onClick={() => {
-                    setIsAccept(0);
-                    AllowFriendOnClick();
-                  }}
+                  onClick={() => {setIsAccept(0); setAcceptConfirmOpen(true);}}
                   color="success">
                   <CheckIcon />
                 </Button>
@@ -171,10 +170,7 @@ function FriendListComponent({
               <Tooltip title="거절" arrow>
                 <Button
                   sx={{minWidth: '36px', height: '36px', padding: '0'}}
-                  onClick={() => {
-                    setIsAccept(1);
-                    AllowFriendOnClick();
-                  }}
+                  onClick={() => {setIsAccept(1); setRefuseConfirmOpen(true)}}
                   color="error">
                   <CloseIcon />
                 </Button>
@@ -207,6 +203,24 @@ function FriendListComponent({
           action: deleteClick,
         }}
       />
+      <Dialog
+        open={acceptConfirmOpen}
+        onClose={() => setAcceptConfirmOpen(false)}
+        message="친구 추가하시겠습니까?"
+        action={{
+          content: '확인',
+          action: AllowFriendOnClick,
+        }}
+      />
+      <Dialog
+        open={refuseConfirmOpen}
+        onClose={() => setAcceptConfirmOpen(false)}
+        message="친구 거절하시겠습니까?"
+        action={{
+          content: '확인',
+          action: AllowFriendOnClick,
+        }}
+      />
 
       <Modal open={IntroduceOpen} maxWidth="md" onClose={() => setIntroduceOpen(false)}>
         <ModalContent>