Merge pull request #178 from pknu-wap/#174/feature-로그인_카테고리별_미리보기

#174/feature 로그인 카테고리별 미리보기
pknu-wap · Nov 30, 2023 · a5d7e06 · a5d7e06
2 parents f01c6a4 + b523e56
commit a5d7e06
Show file tree

Hide file tree

Showing 8 changed files with 180 additions and 181 deletions.
diff --git a/client/src/api/category-api.ts b/client/src/api/category-api.ts
@@ -1,4 +1,10 @@
-import { ICategoryParams, IDeleteCategory, IPostCategory, IPutCategory } from '@/types/dto';
+import {
+  ICategoryParams,
+  IDeleteCategory,
+  IPostCategory,
+  IPutCategory,
+  ISearchCategoryParams,
+} from '@/types/dto';
 import { defaultInstance } from '.';
 import { useQuery } from '@tanstack/react-query';
 
@@ -34,3 +40,18 @@ export const DeleteCategoryApi = async (params: IDeleteCategory) => {
   });
   return data;
 };
+
+//카테고리별 미리보기
+export const GetSearchCategoryApi = async (params: ISearchCategoryParams) => {
+  const { data } = await defaultInstance.get('/search/category', { params });
+
+  return data;
+};
+
+export const useGetSearchCategoryQuery = (params: ISearchCategoryParams) => {
+  const { isLoading, error, data } = useQuery(['searchCategory', params], () =>
+    GetSearchCategoryApi(params),
+  );
+
+  return { isLoading, error, data };
+};
diff --git a/client/src/api/reply-api.ts b/client/src/api/reply-api.ts
@@ -1,4 +1,4 @@
-import { IPatchReplyLike, IPutReply, IReply, IReplyParams } from '@/types/dto';
+import { IDeleteReply, IPatchReplyLike, IPutReply, IReply, IReplyParams } from '@/types/dto';
 import { defaultInstance } from '.';
 import { useQuery } from '@tanstack/react-query';
 
@@ -28,3 +28,11 @@ export const putReplyApi = async (body: IPutReply) => {
   const { data } = await defaultInstance.put('/replies', body);
   return data;
 };
+
+export const DeleteReplyApi = async (params: IDeleteReply) => {
+  const { data } = await defaultInstance.delete('/replies', {
+    params,
+  });
+
+  return data;
+};
diff --git a/client/src/app/[blogName]/home/[categoryId]/[postId]/page.tsx b/client/src/app/[blogName]/home/[categoryId]/[postId]/page.tsx
@@ -61,8 +61,8 @@ const page = ({ params }: { params: { blogName: string; categoryId: string; post
   const theme = useTheme();
 
   const [page, setPage] = useState(0);
-  const [order, setOrder] = useState('like');
-  const orderList = ['like', 'recent', 'oldest'];
+  const [order, setOrder] = useState('likesCount');
+  const orderList = ['likesCount', 'createdAt'];
   const { data: replyData } = useGetReplyQuery({
     postId: Number(params.postId),
     page: page,
@@ -81,6 +81,7 @@ const page = ({ params }: { params: { blogName: string; categoryId: string; post
   const postReplyCreateQuery = useMutation(PostReplyApi, {
     onSuccess: () => {
       queryClient.invalidateQueries(['replies']);
+      setMessage('');
     },
   });
 
@@ -288,13 +289,6 @@ const page = ({ params }: { params: { blogName: string; categoryId: string; post
                         }}>
                         최신순
                       </MenuItem>
-                      <MenuItem
-                        onClick={() => {
-                          handleClose();
-                          setOrder(orderList[2]);
-                        }}>
-                        오래된순
-                      </MenuItem>
                     </Menu>
                   </Stack>
                   <Stack>정렬기준</Stack>
@@ -307,6 +301,7 @@ const page = ({ params }: { params: { blogName: string; categoryId: string; post
                   variant="standard"
                   label={'댓글 추가'}
                   sx={{ margin: '0 30px' }}
+                  value={message}
                   onChange={(e) => {
                     setMessage(e.target.value);
                   }}
@@ -329,7 +324,7 @@ const page = ({ params }: { params: { blogName: string; categoryId: string; post
                     message={replyInfo.message}
                     likesCount={replyInfo.likesCount}
                     isLiked={replyInfo.isLiked}
-                    isEdit={replyInfo.isEdit}></RepliesComponent>
+                    who={replyInfo.who}></RepliesComponent>
                 );
               })}
               <ReplyPagenation

diff --git a/client/src/app/[blogName]/home/[categoryId]/[postId]/postId.style.tsx b/client/src/app/[blogName]/home/[categoryId]/[postId]/postId.style.tsx
@@ -15,7 +15,8 @@ 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, putReplyApi } from '@/api/reply-api';
+import { DeleteReplyApi, PatchReplyLikeApi, putReplyApi } from '@/api/reply-api';
+import { Dialog } from '@/components/Dialog/Dialog';
 
 export const ThumbnailArea = styled(Stack)({
   width: '100%',
@@ -68,13 +69,13 @@ export const GetReplies = styled(Stack)({
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
-  maring: '30px 0',
+  margin: '60px 0',
 });
 
 export const ReplyPagenation = styled(Pagination)({});
 
 const ReplyMainInfo = styled(Stack)({
-  flexDirection: 'row',
+  flexDirection: 'column',
 });
 
 const ReplySubInfo = styled(Stack)({
@@ -83,6 +84,7 @@ const ReplySubInfo = styled(Stack)({
 
 const ReplyLike = styled(Stack)({
   flexDirection: 'row',
+  marginLeft: '20px',
 });
 
 const ChangeReply = styled(Stack)({});
@@ -95,7 +97,7 @@ function RepliesComponent({
   message,
   likesCount,
   isLiked,
-  isEdit,
+  who,
 }: {
   userId: number;
   replyId: number;
@@ -104,18 +106,32 @@ function RepliesComponent({
   message: string;
   likesCount: number;
   isLiked: boolean;
-  isEdit: boolean;
+  who: string;
 }) {
+  console.log(who);
+
   const theme = useTheme();
   const queryClient = useQueryClient();
   const [putReplyOpen, setPutReplyOpen] = useState<boolean>(false);
+  const [deleteReplyOpen, setDeleteReplyOpen] = useState<boolean>(false);
 
   const [IntroduceOpen, setIntroduceOpen] = useState<boolean>(false);
   const { data: introduceData } = useGetIntroduceQuery({
     userId: userId,
   });
   const [introduce, setIntroduce] = useState<IIntroduce>();
 
+  const deleteReplyQuery = useMutation(DeleteReplyApi, {
+    onSuccess() {
+      queryClient.invalidateQueries(['reply']);
+    },
+  });
+
+
+  const deleteClick = () => {
+    deleteReplyQuery.mutate({ replyId: replyId});
+  };
+
   const [isAccept, setIsAccept] = useState<number>(Number);
   const putAllowFriendIdCreateQuery = useMutation(PutFriendAllowApi, {
     onSuccess: () => {
@@ -174,44 +190,54 @@ function RepliesComponent({
   }, [introduceData]);
 
   return (
-    <Stack flexDirection={'column'}>
+    <Stack flexDirection={'column'} padding='15px' width='100%' margin='20px 0 10px 0' border='3px solid rgb(189,189,189)' borderRadius='15px'>
       <ReplyMainInfo>
-        <Button
-          sx={{ minWidth: '30px', width: '30px', height: '30px', borderRadius: '50%' }}
-          onClick={() => setIntroduceOpen(true)}>
-          <img
-            style={{
-              width: '35px',
-              height: '35px',
-              borderRadius: '50%',
-            }}
-            src={profileImage}
-            alt="profileImage"
-          />
-        </Button>
+        <Stack flexDirection='row' alignItems='center' marginBottom='10px'>
+          <Button
+            sx={{ minWidth: '35px', width: '35px', height: '35px', borderRadius: '50%' }}
+            onClick={() => setIntroduceOpen(true)}>
+            <img
+              style={{
+                width: '35px',
+                height: '35px',
+                borderRadius: '50%',
+              }}
+              src={profileImage}
+              alt="profileImage"
+            />
+          </Button>
+          <Stack margin='0 10px'>{nickname}</Stack>
+          <ReplyLike>
+            <Stack marginTop='5px'>
+              {likesCount}
+            </Stack>
+              {isLiked ? (
+                <IconButton sx={{padding: '0px', marginLeft: '10px'}} onClick={ReplyLikeOnClick}>
+                  <ThumbUpAltIcon></ThumbUpAltIcon>
+                </IconButton>
+              ) : (
+                <IconButton sx={{padding: '0px' ,marginLeft: '10px'}} onClick={ReplyLikeOnClick}>
+                  <ThumbUpOffAltIcon></ThumbUpOffAltIcon>
+                </IconButton>
+              )}
+              <ChangeReply>
+                {who === 'me(author)' || who === 'me' ? <Button onClick={() => setPutReplyOpen(true)}>수정하기</Button> : <></>}
+              </ChangeReply>
+              <Stack>
+                {who === 'me(author)' || who === 'me' ? <Button onClick={() => setDeleteReplyOpen(true)}>삭제하기</Button> : <></>}
+              </Stack>
+            </ReplyLike>
+        </Stack>
 
         <Stack>
-          <Stack>{nickname}</Stack>
-          <Stack>{message}</Stack>
+
+          <ReplySubInfo>
+
+          </ReplySubInfo>
         </Stack>
+        <Stack>{message}</Stack>
       </ReplyMainInfo>
-      <ReplySubInfo>
-        <ReplyLike>
-          {isLiked ? (
-            <IconButton onClick={ReplyLikeOnClick}>
-              <ThumbUpAltIcon></ThumbUpAltIcon>
-            </IconButton>
-          ) : (
-            <IconButton onClick={ReplyLikeOnClick}>
-              <ThumbUpOffAltIcon></ThumbUpOffAltIcon>
-            </IconButton>
-          )}
-          {likesCount}
-          <ChangeReply>
-            {isEdit ? <Button onClick={() => setPutReplyOpen(true)}>수정하기</Button> : <></>}
-          </ChangeReply>
-        </ReplyLike>
-      </ReplySubInfo>
+
 
       <Modal open={putReplyOpen} onClose={() => setPutReplyOpen(false)}>
         <ModalTitle>수정하기</ModalTitle>
@@ -229,7 +255,17 @@ function RepliesComponent({
             게시하기
           </Button>
         </ModalContent>
+        <Dialog
+          open={deleteReplyOpen}
+          onClose={() => setDeleteReplyOpen(false)}
+          message="친구 삭제하시겠습니까?"
+          action={{
+            content: '확인',
+            action: deleteClick,
+          }}
+        />
       </Modal>
+
 
       {/* 댓글 상대방 introduction */}
       <Modal open={IntroduceOpen} maxWidth="md" onClose={() => setIntroduceOpen(false)}>