Merge pull request #86 from six-goguma/Feat/issue-#45

issue#45 게시글 상세페이지 기능 구현

Author: gogumalatte

src/pages/post-detail/apis/post-comments.api.ts

@@ -1,44 +1,47 @@
 import { fetchInstance } from '@shared/service';
-import { RequestPostParams, RequestPosts } from '@shared/types';
+import { RequestPosts } from '@shared/types';
 
 import { RequestPostComments, ResponsePostComments } from './post-comments.type';
 
-export const PostsCommentsPath = ({ postId }: RequestPostParams, params?: RequestPosts) => {
-  if (params) {
-    return `/posts/${postId}/comments?page=${params.page}&size=${params.size}&sort=${params.sort.key},${params.sort.order}`;
-  }
-  return `/posts/${postId}/comments`;
-};
-
 export const getPostsComments = async ({
   postId,
   page,
   size,
   sort,
-}: RequestPostParams & RequestPosts): Promise<ResponsePostComments> => {
+}: { postId: number } & RequestPosts): Promise<ResponsePostComments> => {
   const response = await fetchInstance.get<ResponsePostComments>(
-    PostsCommentsPath({ postId }, { page, size, sort }),
+    `/posts/${postId}/comments?page=${page}&size=${size}&sort=${sort.key},${sort.order}`,
   );
   return response.data;
 };
 
 export const editPostsComments = async ({
-  postId,
-  content,
-}: RequestPostParams & RequestPostComments) => {
-  const response = await fetchInstance.put(PostsCommentsPath({ postId }), { body: content });
+  commentId,
+  contents,
+}: { commentId: number } & RequestPostComments) => {
+  const response = await fetchInstance.put(`/posts/comments/${commentId}`, {
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({ contents }),
+  });
   return response.data;
 };
 
 export const savePostsComments = async ({
   postId,
-  content,
-}: RequestPostParams & RequestPostComments) => {
-  const response = await fetchInstance.post(PostsCommentsPath({ postId }), { body: content });
+  contents,
+}: { postId: number } & RequestPostComments) => {
+  const response = await fetchInstance.post(`/posts/${postId}/comments`, {
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({ contents }),
+  });
   return response.data;
 };
 
-export const deletePostsComments = async ({ postId }: RequestPostParams) => {
-  const response = await fetchInstance.delete(PostsCommentsPath({ postId }));
+export const deletePostsComments = async ({ commentId }: { commentId: number }) => {
+  const response = await fetchInstance.delete(`/posts/comments/${commentId}`);
   return response.data;
 };

src/pages/post-detail/apis/post-comments.type.ts

@@ -2,7 +2,7 @@ import { PostResponse } from '@shared/types';
 
 export type PostCommentsContent = {
   id: number;
-  content: string;
+  contents: string;
   createdAt: string;
   updatedAt: number;
   author: string;
@@ -11,5 +11,5 @@ export type PostCommentsContent = {
 export type ResponsePostComments = PostResponse<PostCommentsContent>;
 
 export type RequestPostComments = {
-  content: string;
+  contents: string;
 };

src/pages/post-detail/apis/post-detail.api.ts

@@ -3,16 +3,22 @@ import { RequestPostParams } from '@shared/types';
 
 import { ResponsePostDetail, ResponsePostTags } from './';
 
-export const PostsDetailPath = ({ postId }: RequestPostParams) => `/posts/${postId}`;
+export const getPostDetail = async ({ postId }: RequestPostParams) => {
+  const response = await fetchInstance.get<ResponsePostDetail>(`/posts/${postId}`);
+  return response.data;
+};
 
-export const getPostDetail = async ({ postId }: RequestPostParams): Promise<ResponsePostDetail> => {
-  const response = await fetchInstance.get<ResponsePostDetail>(PostsDetailPath({ postId }));
+export const getPostTags = async ({ postId }: RequestPostParams) => {
+  const response = await fetchInstance.get<ResponsePostTags>(`/posts/${postId}/tags`);
   return response.data;
 };
 
-export const PostsTagsPath = ({ postId }: RequestPostParams) => `/posts/${postId}/tags`;
+export const getLikeStatus = async ({ postId }: RequestPostParams) => {
+  const response = await fetchInstance.get<{ liked: boolean }>(`/posts/${postId}/likes/status`);
+  return response.data.liked;
+};
 
-export const getPostTags = async ({ postId }: RequestPostParams): Promise<ResponsePostTags> => {
-  const response = await fetchInstance.get<ResponsePostTags>(PostsTagsPath({ postId }));
-  return response.data;
+export const putLikeStatus = async ({ postId }: RequestPostParams) => {
+  const response = await fetchInstance.put<{ liked: boolean }>(`/posts/${postId}/likes/status`);
+  return response.data.liked;
 };

src/pages/post-detail/components/post-comments/CommentList.tsx

@@ -1,33 +1,132 @@
-import { Avatar, Flex, HStack, Text, VStack } from '@chakra-ui/react';
+import { useState } from 'react';
+
+import { Avatar, Flex, HStack, Text, VStack, Textarea, Button } from '@chakra-ui/react';
+
+import { useCustomToast } from '@shared/hooks';
+
+import { deletePostsComments, editPostsComments } from '../../apis';
+import { PostCommentsContent } from '../../apis';
+import { useMutation } from '@tanstack/react-query';
 
 type CommentListProps = {
+  comment: PostCommentsContent;
   isLast?: boolean;
+  onRefetch: () => void;
+  currentUser: string | null;
 };
 
-export const CommentList = ({ isLast }: CommentListProps) => {
+export const CommentList = ({ comment, isLast, onRefetch, currentUser }: CommentListProps) => {
+  const [isEditing, setIsEditing] = useState(false);
+  const [editContent, setEditContent] = useState(comment.contents);
+  const customToast = useCustomToast();
+  const isAuthor = currentUser === comment.author;
+
+  const { mutate: deleteComment, isPending: isDeleting } = useMutation({
+    mutationFn: () => deletePostsComments({ commentId: comment.id }),
+    onSuccess: () => {
+      customToast({
+        toastStatus: 'success',
+        toastTitle: '댓글 삭제',
+        toastDescription: '댓글이 삭제되었습니다.',
+      });
+      onRefetch();
+    },
+    onError: () => {
+      customToast({
+        toastStatus: 'error',
+        toastTitle: '댓글 삭제 오류',
+        toastDescription: '댓글 삭제 중 오류가 발생했습니다.',
+      });
+    },
+  });
+
+  const { mutate: editComment, isPending: isEditingPending } = useMutation({
+    mutationFn: () => editPostsComments({ commentId: comment.id, contents: editContent }),
+    onSuccess: () => {
+      customToast({
+        toastStatus: 'success',
+        toastTitle: '댓글 수정',
+        toastDescription: '댓글이 수정되었습니다.',
+      });
+      setIsEditing(false);
+      onRefetch();
+    },
+    onError: () => {
+      customToast({
+        toastStatus: 'error',
+        toastTitle: '댓글 수정 오류',
+        toastDescription: '댓글 수정 중 오류가 발생했습니다.',
+      });
+    },
+  });
+
   return (
     <Flex w='full' py={3} borderBottom={isLast ? 'none' : '1px solid'} borderColor='customGray.300'>
-      <VStack w='full'>
+      <VStack w='full' align='start' textAlign='start'>
         <HStack w='full' justify='space-between'>
           <HStack spacing={4}>
             <Avatar size='md' />
             <Flex w='full' flexDir='column' align='flex-start'>
-              <Text as='b'>Kiyoung</Text>
+              <Text as='b'>{comment.author}</Text>
               <Text fontSize='sm' color='customGray.400'>
-                2025년 1월 14일
+                {new Date(comment.createdAt).toLocaleDateString()}
               </Text>
             </Flex>
           </HStack>
-          <Text as='button' fontWeight='700' color='customGray.400'>
-            삭제
-          </Text>
+          {isAuthor && (
+            <HStack spacing={2}>
+              <Text
+                as='button'
+                fontWeight='700'
+                color='blue.500'
+                onClick={() => setIsEditing(true)}
+                style={{
+                  cursor: isDeleting ? 'not-allowed' : 'pointer',
+                  opacity: isDeleting ? 0.5 : 1,
+                }}
+              >
+                수정
+              </Text>
+              <Text
+                as='button'
+                fontWeight='700'
+                color='red.500'
+                onClick={() => deleteComment()}
+                style={{
+                  cursor: isDeleting ? 'not-allowed' : 'pointer',
+                  opacity: isDeleting ? 0.5 : 1,
+                }}
+              >
+                {isDeleting ? '삭제 중...' : '삭제'}
+              </Text>
+            </HStack>
+          )}
         </HStack>
-        <Flex w='full' my={3} textAlign='start'>
-          <Text>
-            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
-            has been the industry&apos;s standard dummy text ever since the 1500s...
-          </Text>
-        </Flex>
+
+        {isEditing ? (
+          <>
+            <Textarea
+              resize='none'
+              value={editContent}
+              onChange={(e) => setEditContent(e.target.value)}
+              isDisabled={isEditingPending}
+            />
+            <Flex w='full' justify='flex-end'>
+              <Button
+                onClick={() => editComment()}
+                isDisabled={isEditingPending}
+                style={{
+                  cursor: isEditingPending ? 'not-allowed' : 'pointer',
+                  opacity: isEditingPending ? 0.5 : 1,
+                }}
+              >
+                {isEditingPending ? '수정 중...' : '수정 완료'}
+              </Button>
+            </Flex>
+          </>
+        ) : (
+          <Text>{comment.contents}</Text>
+        )}
       </VStack>
     </Flex>
   );

src/pages/post-detail/components/post-comments/PostComments.tsx

@@ -1,32 +1,98 @@
-import { Button, Flex, Text, Textarea, VStack } from '@chakra-ui/react';
+import { useState } from 'react';
 
+import { Button, Flex, Text, Textarea, VStack, HStack } from '@chakra-ui/react';
+
+import { useCustomToast } from '@shared/hooks';
+import { authStorage } from '@shared/utils';
+
+import { ResponsePostComments } from '../../apis';
+import { useSubmitComment } from '../../hooks';
 import { CommentList } from './CommentList';
 
-export const PostComments = () => {
-  const comments = [1, 2];
+type PostCommentsProps = {
+  postId: number;
+  comments: ResponsePostComments;
+  refetch: () => void;
+};
+
+export const PostComments = ({ postId, comments, refetch }: PostCommentsProps) => {
+  const [commentContent, setCommentContent] = useState('');
+  const [page, setPage] = useState(0);
+  const customToast = useCustomToast();
+
+  const nickName = authStorage.nickName.get();
+  const isLogin = !!nickName;
+
+  const { mutate: submitComment, isPending } = useSubmitComment(postId);
+
+  const onSubmit = async () => {
+    if (!postId || !commentContent.trim()) return;
+
+    submitComment(commentContent, {
+      onSuccess: () => {
+        setCommentContent('');
+        refetch();
+      },
+      onError: () => {
+        customToast({
+          toastStatus: 'error',
+          toastTitle: '게시글 상세 페이지',
+          toastDescription: '댓글 작성 과정에서 오류가 발생했습니다.',
+        });
+      },
+    });
+  };
+
   return (
     <VStack w='full' mb={20}>
       <Flex w='full'>
-        <Text as='b'>{comments.length}개의 댓글</Text>
+        <Text as='b'>{comments?.totalElements || 0}개의 댓글</Text>
       </Flex>
+
       <Flex w='full'>
         <Textarea
           bg='white'
           w='full'
           h='100px'
           size='sm'
-          placeholder='댓글을 입력해주세요.'
+          placeholder={isLogin ? '댓글을 입력해주세요.' : '로그인하여 댓글을 입력해보세요'}
           resize='none'
+          value={commentContent}
+          onChange={(e) => setCommentContent(e.target.value)}
+          isDisabled={!isLogin || isPending}
         />
       </Flex>
       <Flex w='full' justify='right'>
-        <Button borderRadius='3px'>댓글 작성</Button>
+        <Button borderRadius='3px' onClick={onSubmit} isDisabled={!isLogin || isPending}>
+          {isPending ? '등록 중...' : '댓글 작성'}
+        </Button>
       </Flex>
-      <Flex w='full' flexDir='column' mt={20} gap={5}>
-        {comments.map((_, index) => (
-          <CommentList key={index} isLast={index === comments.length - 1} />
-        ))}
+
+      <Flex w='full' flexDir='column' mt={5} gap={5}>
+        {comments?.content?.length ? (
+          comments.content.map((comment, index) => (
+            <CommentList
+              key={comment.id}
+              comment={comment}
+              isLast={index === comments.content.length - 1}
+              onRefetch={refetch}
+              currentUser={nickName}
+            />
+          ))
+        ) : (
+          <Text color='gray.500'>댓글이 없습니다.</Text>
+        )}
       </Flex>
+
+      <HStack spacing={3} mt={5}>
+        <Button onClick={() => setPage((prev) => Math.max(prev - 1, 0))} isDisabled={page === 0}>
+          이전
+        </Button>
+        <Text>{page + 1}</Text>
+        <Button onClick={() => setPage((prev) => prev + 1)} isDisabled={comments?.last}>
+          다음
+        </Button>
+      </HStack>
     </VStack>
   );
 };