Merge pull request #159 from pknu-wap/#150/feature-방명록_연동

✨ 방명록 연동 / 카테고리 연동

client/src/api/category-api.ts

@@ -0,0 +1,36 @@
+import { ICategoryParams, IDeleteCategory, IPostCategory, IPutCategory } from "@/types/dto";
+import { defaultInstance } from ".";
+import { useQuery } from "@tanstack/react-query";
+
+//카테고리 이름/pr연동여부 가져오기
+export const GetCategoryApi = async (params: ICategoryParams) => {
+    const { data } = await defaultInstance.get('/category', { params });
+
+    return data;
+};
+
+  export const useGetCategoryQuery = (params: ICategoryParams) => {
+    const { isLoading, error, data } = useQuery(['category', params], () => GetCategoryApi(params));
+
+    return { isLoading, error, data };
+};
+
+//카테고리 생성
+export const PostCategoryApi = async (body: IPostCategory) => {
+    const { data } = await defaultInstance.post('/category', body);
+    return data;
+};
+
+//카테고리 이름 수정
+export const PutCategoryApi = async (body: IPutCategory) => {
+    const { data } = await defaultInstance.put('/category', body);
+    return data;
+};
+
+//카테고리 삭제
+export const DeleteCategoryApi = async (params: IDeleteCategory) => {
+    const { data } = await defaultInstance.delete('/category', {
+      params,
+    });
+    return data;
+};

client/src/api/guestbook-api.ts

@@ -0,0 +1,36 @@
+import { useQuery } from '@tanstack/react-query';
+import { defaultInstance } from '.';
+import { IDeleteGuestbook, IGuestbookParams, IPostGuestbook, IPutGuestbook } from '@/types/dto';
+
+//방명록 메시지 불러오기
+export const GetGuestbookApi = async (params: IGuestbookParams) => {
+  const { data } = await defaultInstance.get('/guestbook', { params });
+
+  return data;
+};
+
+export const useGetGuestbookQuery = (params: IGuestbookParams) => {
+  const { isLoading, error, data } = useQuery(['guestbook', params], () => GetGuestbookApi(params));
+
+  return { isLoading, error, data };
+};
+
+//방명록 작성
+export const PostGuestbookApi = async (body: IPostGuestbook) => {
+  const { data } = await defaultInstance.post('/guestbook', body);
+  return data;
+};
+
+//방명록 수정
+export const PutGuestbookApi = async (body: IPutGuestbook) => {
+  const { data } = await defaultInstance.put('/guestbook', body);
+  return data;
+};
+
+//방명록 삭제
+export const DeleteGuestbookApi = async (params: IDeleteGuestbook) => {
+  const { data } = await defaultInstance.delete('/guestbook', {
+    params,
+  });
+  return data;
+};

client/src/api/index.ts

@@ -8,7 +8,7 @@ const axiosApi = (url: string, data?: any) => {
   if (typeof window !== 'undefined') {
     token = localStorage.getItem('token');
   }
-
+  console.log(token);
   const instance = axios.create({
     baseURL: url,
     withCredentials: true,

client/src/api/makeAccount-api.ts

@@ -2,9 +2,7 @@ import { IMakeAccount } from '@/types/dto';
 import { defaultInstance } from '.';
 
 export const PostMakeAccountApi = async (body: IMakeAccount) => {
-  const { data } = await defaultInstance.post('/blog', {
-    body,
-  });
+  const { data } = await defaultInstance.post('/blog', body);
 
   return data;
 };

client/src/api/reply-api.ts

@@ -1,9 +1,9 @@
-import { IReply, IReplyParams } from '@/types/dto';
+import { IPatchReplyLike, IReply, IReplyParams } from '@/types/dto';
 import { defaultInstance } from '.';
 import { useQuery } from '@tanstack/react-query';
 
 export const getReplyApi = async (params: IReplyParams) => {
-  const { data } = await defaultInstance.get('/replies', { params });
+  const { data } = await defaultInstance.get(`/replies`, { params });
 
   return data;
 };
@@ -18,3 +18,8 @@ export const PostReplyApi = async (body: IReply) => {
 
   return data;
 };
+
+export const PatchReplyLikeApi = async (params: IPatchReplyLike) => {
+  const {data} = await defaultInstance.patch(`/replies/like/${params.replyId}`, params)
+  return data;
+}

client/src/api/userDetail-api.ts

@@ -0,0 +1,14 @@
+import { useQuery } from "@tanstack/react-query";
+import { defaultInstance } from ".";
+
+export const GetUserDetailApi = async () => {
+    const {data} = await defaultInstance.get('/user/detail');
+
+    return data;
+  };
+
+  export const useGetUserDetailQuery = () => {
+    const {isLoading, error, data } = useQuery(['userDetail'], () => GetUserDetailApi());
+
+    return {isLoading, error, data };
+  };

client/src/app/[blogName]/home/[categoryId]/[postId]/page.tsx

@@ -23,7 +23,7 @@ import RepliesComponent, {
 } from './postId.style';
 import DragAndDrop from '@/components/DND/DragAndDrop';
 import { useGetSidebarQuery, useGetPostQuery } from '@/api/blog-api';
-import { IIntroduce, IPostContent, IReplyContent, ISidebarContent } from '@/types/dto';
+import { IBlogId, IIntroduce, IPostContent, IReplyContent, ISidebarContent } from '@/types/dto';
 import CenterContent from '@/components/Layout/CenterContent';
 import { Home, KeyboardArrowRight } from '@mui/icons-material';
 import MDEditor from '@uiw/react-md-editor';
@@ -42,15 +42,21 @@ import { PutFriendAllowApi, PutFriendRequestApi } from '@/api/friend-api';
 import CheckIcon from '@mui/icons-material/Check';
 import CloseIcon from '@mui/icons-material/Close';
 import Image from 'next/image';
+import FootPrintAnimation from '@/components/FootPrint/FootPrintAnimation';
+import { usegetblogIdQuery } from '@/api/readme-api';
 
 const page = ({ params }: { params: { blogName: string; categoryId: string; postId: string } }) => {
-  const { data: sidebarData } = useGetSidebarQuery({ blogId: 3 });
+  const { data: blogIdData } = usegetblogIdQuery({ blogUrl: params.blogName });
+  const [blogId, setBlogId] = useState<IBlogId>();
+  const { data: sidebarData } = useGetSidebarQuery({ blogId: blogIdData });
   const { data: postData } = useGetPostQuery({ postId: Number(params.postId) });
   const [IntroduceOpen, setIntroduceOpen] = useState<boolean>(false);
   const [userTheme] = useUserThemeSSR();
   const router = useRouter();
   const theme = useTheme();
 
+  console.log(`useState blogId : ${blogId}`);
+
   //[FIXME: repliese get할 때 body말고 parameter로 바뀌어졌을 때 useState() 바꿔주기]
   const [page, setPage] = useState(0);
   const [order, setOrder] = useState('like');
@@ -122,7 +128,8 @@ const page = ({ params }: { params: { blogName: string; categoryId: string; post
     setPost(postData);
     setIntroduce(introduceData);
     setReply(replyData);
-  }, [sidebarData, postData, introduceData, replyData]);
+    setBlogId(blogIdData);
+  }, [sidebarData, postData, introduceData, replyData, blogIdData]);
 
   //댓글 정렬기준
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
@@ -132,6 +139,7 @@ const page = ({ params }: { params: { blogName: string; categoryId: string; post
   const handleClose = () => {
     setAnchorEl(null);
   };
+
 
   return (
     <Stack>
@@ -253,6 +261,7 @@ const page = ({ params }: { params: { blogName: string; categoryId: string; post
                 return (
                   <RepliesComponent
                     key={replyInfo.replyId}
+                    replyId={replyInfo.replyId}
                     userId={replyInfo.userDto.userId}
                     nickname={replyInfo.userDto.nickname}
                     profileImage={replyInfo.userDto.profileImage}
@@ -354,6 +363,7 @@ const page = ({ params }: { params: { blogName: string; categoryId: string; post
           </Stack>
         </ModalContent>
       </Modal>
+      <FootPrintAnimation blogId={Number(blogIdData)} />
     </Stack>
   );
 };

client/src/app/[blogName]/home/[categoryId]/[postId]/postId.style.tsx

@@ -15,6 +15,7 @@ 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';
 
 export const ThumbnailArea = styled(Stack)({
   width: '100%',
@@ -87,6 +88,7 @@ const ChangeReply = styled(Stack)({});
 
 function RepliesComponent({
   userId,
+  replyId,
   profileImage,
   nickname,
   message,
@@ -95,6 +97,7 @@ function RepliesComponent({
   isEdit,
 }: {
   userId: number,
+  replyId: number,
   profileImage: string;
   nickname: string;
   message: string;
@@ -138,6 +141,18 @@ function RepliesComponent({
     PutFriendRequestQuery.mutate(newRequestBody);
   };
 
+  const PatchReplyLikeQuery = useMutation(PatchReplyLikeApi, {
+    onSuccess: () => {
+      queryClient.invalidateQueries(['replies'])
+    },
+  });
+  const ReplyLikeOnClick = () => {
+    const newReplyLikeBody = {
+      replyId: replyId
+    };
+    PatchReplyLikeQuery.mutate(newReplyLikeBody);
+  };
+
   useInsertionEffect(() => {
     setIntroduce(introduceData);
   }, [introduceData])
@@ -164,11 +179,16 @@ function RepliesComponent({
       </ReplyMainInfo>
       <ReplySubInfo>
         <ReplyLike>
-          <IconButton>
-            {isLiked ? <ThumbUpAltIcon></ThumbUpAltIcon> : <ThumbUpOffAltIcon></ThumbUpOffAltIcon>}
+          {isLiked ? 
+          (<IconButton onClick={ReplyLikeOnClick}>
+            <ThumbUpAltIcon></ThumbUpAltIcon>
+          </IconButton>) : (
+            <IconButton onClick={ReplyLikeOnClick}>
+              <ThumbUpOffAltIcon></ThumbUpOffAltIcon>
           </IconButton>
+          )}
           <ChangeReply>
-            {isEdit ? <Button>수정하기</Button> : <Button>신고하기</Button>}
+            {isEdit ? <Button>수정하기</Button> : <></>}
           </ChangeReply>
           {likesCount}
         </ReplyLike>

client/src/app/[blogName]/home/[categoryId]/page.tsx

@@ -12,16 +12,20 @@ import { useGetSidebarQuery } from '@/api/blog-api';
 import { ISidebarContent } from '@/types/dto';
 import DragAndDrop from '@/components/DND/DragAndDrop';
 import { Stack } from '@mui/material';
+import { usegetblogIdQuery } from '@/api/readme-api';
 
 function page({ params }: { params: { blogName: string; categoryId: string } }) {
   const [page, setPage] = useState(0);
-  const { data: sidebarData } = useGetSidebarQuery({ blogId: 3 });
+  const [, setBlogId] = useState();
+  const { data: blogIdData } = usegetblogIdQuery({ blogUrl: params.blogName });
+  const { data: sidebarData } = useGetSidebarQuery({ blogId: blogIdData });
   const [writeList, setWriteList] = useState<ISidebarContent[]>();
 
 
   useEffect(() => {
+    setBlogId(blogIdData)
     setWriteList(sidebarData?.sidebarDtos);
-  }, [sidebarData]);
+  }, [blogIdData, sidebarData]);
 
   const backend = [
     {

client/src/app/[blogName]/page.tsx

@@ -4,6 +4,7 @@ import { useGetSidebarQuery } from '@/api/blog-api';
 import { PutReadMeApi, useGetReadMeQuery, usegetblogIdQuery } from '@/api/readme-api';
 import Button from '@/components/Button/Button';
 import DragAndDrop from '@/components/DND/DragAndDrop';
+import FootPrintAnimation from '@/components/FootPrint/FootPrintAnimation';
 import { ISidebarContent } from '@/types/dto';
 import { Stack, TextField } from '@mui/material';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
@@ -65,6 +66,7 @@ const Home = ({ params }: { params: { blogName: string } }) => {
           </Stack>
         }
       />
+      <FootPrintAnimation blogId={blogIdData} />
     </Stack>
   );
 };

client/src/components/DND/CategorySettingModal.tsx

@@ -3,12 +3,41 @@ import Modal from '../Modal/Modal';
 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 { CategorySettingModalType } from '@/types/common';
 import Button from '../Button/Button';
 import { Dialog } from '../Dialog/Dialog';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { DeleteCategoryApi, PutCategoryApi } from '@/api/category-api';
 
-function CategorySettingModal({ open, onClose }: ModalType) {
+function CategorySettingModal({ open, categoryId, onClose }: CategorySettingModalType) {
+  const queryClient = useQueryClient();
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const deleteCategoryQuery = useMutation(DeleteCategoryApi, {
+    onSuccess() {
+      queryClient.invalidateQueries(['category']);
+    },
+  });
+  const deleteClick = () => {
+    deleteCategoryQuery.mutate({ categoryId : categoryId });
+    onClose();
+  };
+
+  const [newCategoryName, setNewCategoryName] = useState('');
+  const putCategoryQuery = useMutation(PutCategoryApi, {
+    onSuccess() {
+      queryClient.invalidateQueries(['category']);
+    },
+  });
+  const putCategoryNameClick = () => {
+    const newCategoryNameBody = {
+      categoryId: categoryId,
+      newCategoryName: newCategoryName,
+    };
+    putCategoryQuery.mutate(newCategoryNameBody);
+    onClose();
+  }
+  console.log(`카테고리 ID : ${categoryId}`);
+
   return (
     <Modal open={open} onClose={onClose}>
       <ModalTitle fontSize="24px" fontWeight="bold">
@@ -31,21 +60,23 @@ function CategorySettingModal({ open, onClose }: ModalType) {
             <Stack fontSize="18px" fontWeight="bold">
               카테고리 이름 :
             </Stack>
-            <TextField variant="standard" />
+            <TextField variant="standard" onChange={(e) => {
+              setNewCategoryName(e.target.value);
+            }} />
           </Stack>
         </Stack>
       </ModalContent>
       <ModalActions>
         <ModalButton
           onClose={onClose}
-          action={{ content: '변경', action: () => console.log('asdf') }}
+          action={{ content: '변경', action: putCategoryNameClick }}
         />
       </ModalActions>
       <Dialog
         open={deleteDialogOpen}
         onClose={() => setDeleteDialogOpen(false)}
         message="카테고리를 삭제하시겠습니까?"
-        action={{ content: '샥제', action: onClose }}
+        action={{ content: '샥제', action: deleteClick }}
       />
     </Modal>
   );