SKRR-13 feat: 클럽 게시글 댓글 생성/삭제 기능 구현

src/apis/club/deleteClubComment.ts

@@ -0,0 +1,10 @@
+import { END_POINTS } from '@/constants/api';
+import { DeleteClubCommentRequest } from '@/types/api/deleteClubComment';
+
+import { axiosClientWithAuth } from '../axiosClient';
+
+const deleteClubComment = async ({ commentId }: DeleteClubCommentRequest) => {
+  await axiosClientWithAuth.delete(END_POINTS.DELETE_CLUB_COMMENT(commentId));
+};
+
+export default deleteClubComment;

src/apis/club/getClubComments.ts

@@ -0,0 +1,14 @@
+import { END_POINTS } from '@/constants/api';
+import { GetClubCommentsRequest, GetClubCommentsResponse } from '@/types/api/getClubComments';
+
+import { axiosClientWithAuth } from '../axiosClient';
+
+const getClubComments = async ({ postId, pageNumber }: GetClubCommentsRequest) => {
+  const { data } = await axiosClientWithAuth.get<GetClubCommentsResponse>(
+    END_POINTS.CLUB_COMMENTS(postId, pageNumber),
+  );
+
+  return data;
+};
+
+export default getClubComments;

src/apis/club/postClubComment.ts

@@ -0,0 +1,13 @@
+import { END_POINTS } from '@/constants/api';
+import { PostClubCommentRequest } from '@/types/api/postClubComment';
+
+import { axiosClientWithAuth } from '../axiosClient';
+
+const postClubComment = async ({ postId, content, isPrivate }: PostClubCommentRequest) => {
+  await axiosClientWithAuth.post(END_POINTS.CLUB_COMMENT(postId), {
+    content,
+    isPrivate,
+  });
+};
+
+export default postClubComment;

src/components/ClubComment/ClubComment.style.ts

@@ -0,0 +1,65 @@
+import Theme from '@/styles/Theme';
+import styled from '@emotion/styled';
+
+const CommentContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.5rem;
+  width: 90%;
+`;
+
+const AuthorInfoWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: ${Theme.fontSize.smallContent};
+  font-weight: 600;
+`;
+
+const LockIconWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-width: 1rem;
+`;
+
+const CommentContentStyled = styled.div`
+  display: flex;
+  gap: 0.5rem;
+  width: 70%;
+  font-size: ${Theme.fontSize.smallContent};
+  word-break: break-all;
+`;
+
+const PrivateContentWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 70%;
+  color: ${Theme.color.tSeparator};
+  font-size: ${Theme.fontSize.smallContent};
+`;
+
+const CreatedDateStyled = styled.div`
+  font-size: ${Theme.fontSize.tagText};
+  color: ${Theme.color.tSeparator};
+`;
+
+const DeleteButtonAreaStyled = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 1rem;
+  height: 1rem;
+`;
+
+export {
+  CommentContainer,
+  AuthorInfoWrapper,
+  CommentContentStyled,
+  CreatedDateStyled,
+  DeleteButtonAreaStyled,
+  PrivateContentWrapper,
+  LockIconWrapper,
+};

src/components/ClubComment/ClubComment.tsx

@@ -0,0 +1,77 @@
+import useDeleteClubCommentMutation from '@/hooks/query/club/useDeleteClubCommentMutation';
+import Theme from '@/styles/Theme';
+import { getDateStamp } from '@/utils/getTimeStamp';
+import { getStorage } from '@/utils/localStorage';
+
+import { IoIosClose } from 'react-icons/io';
+import { MdLock } from 'react-icons/md';
+
+import Avatar from '../common/Avatar/Avatar';
+import {
+  AuthorInfoWrapper,
+  CommentContainer,
+  CommentContentStyled,
+  CreatedDateStyled,
+  DeleteButtonAreaStyled,
+  LockIconWrapper,
+  PrivateContentWrapper,
+} from './ClubComment.style';
+
+interface ClubCommentProps {
+  commentId: string;
+  content: string;
+  authorId: string;
+  author: string;
+  authorImageUrl: string;
+  createdDate: string;
+  isPrivate: boolean;
+}
+
+const ClubComment = ({
+  commentId,
+  content,
+  authorId,
+  author,
+  authorImageUrl,
+  createdDate,
+  isPrivate,
+}: ClubCommentProps) => {
+  const isAuthor = authorId === getStorage('userId');
+  const { deleteComment } = useDeleteClubCommentMutation();
+  const postedDate = getDateStamp(createdDate.split('T')[0]);
+  const postedTime = createdDate.split('T')[1];
+
+  return (
+    <CommentContainer>
+      <AuthorInfoWrapper>
+        <Avatar avatarSize="small" profileImageSrc={authorImageUrl} />
+        <span>{author}</span>
+      </AuthorInfoWrapper>
+      {isPrivate ? (
+        isAuthor ? (
+          <CommentContentStyled>
+            <LockIconWrapper>
+              <MdLock size={'1rem'} fill={Theme.color.tSeparator} />
+            </LockIconWrapper>
+            <div>{content}</div>
+          </CommentContentStyled>
+        ) : (
+          <PrivateContentWrapper>
+            <MdLock size={'1rem'} fill={Theme.color.tSeparator} />
+            <span>'비밀댓글입니다.'</span>
+          </PrivateContentWrapper>
+        )
+      ) : (
+        <CommentContentStyled>{content}</CommentContentStyled>
+      )}
+      <CreatedDateStyled>
+        {postedDate} {postedTime}
+      </CreatedDateStyled>
+      <DeleteButtonAreaStyled>
+        {isAuthor && <IoIosClose size={'1rem'} onClick={() => deleteComment({ commentId })} />}
+      </DeleteButtonAreaStyled>
+    </CommentContainer>
+  );
+};
+
+export default ClubComment;

src/components/ClubComments/ClubComments.style.ts

@@ -0,0 +1,19 @@
+import Theme from '@/styles/Theme';
+import styled from '@emotion/styled';
+
+const CommentsContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2rem;
+  width: 100%;
+  padding-bottom: 1rem;
+`;
+
+const CommentCountWrapper = styled.div`
+  width: 90%;
+  font-size: ${Theme.fontSize.tagText};
+  color: ${Theme.color.semiBlack};
+`;
+
+export { CommentsContainer, CommentCountWrapper };

src/components/ClubComments/ClubComments.tsx

@@ -0,0 +1,33 @@
+import useGetClubCommentsQuery from '@/hooks/query/club/useGetClubCommentsQuery';
+
+import ClubComment from '../ClubComment/ClubComment';
+import { CommentCountWrapper, CommentsContainer } from './ClubComments.style';
+
+interface ClubCommentsProps {
+  postId: string;
+}
+
+const ClubComments = ({ postId }: ClubCommentsProps) => {
+  const { clubPostComments, pageData } = useGetClubCommentsQuery({ postId, pageNumber: 0 });
+  const totalComment = pageData?.numberOfElements;
+
+  return (
+    <CommentsContainer>
+      <CommentCountWrapper>{`댓글 ${totalComment}`}</CommentCountWrapper>
+      {clubPostComments?.map((comment) => (
+        <ClubComment
+          key={comment.commentId}
+          commentId={comment.commentId}
+          authorImageUrl={comment.authorImageUrl}
+          authorId={comment.authorId}
+          author={comment.author}
+          content={comment.content}
+          createdDate={comment.createdDate}
+          isPrivate={comment.isPrivate}
+        />
+      ))}
+    </CommentsContainer>
+  );
+};
+
+export default ClubComments;

src/components/ClubPost/ClubPost.style.ts

@@ -8,6 +8,11 @@ const BoardContainer = styled.div`
   width: 90%;
   height: 6.2rem;
   padding: 0.5rem;
+
+  &:not(:last-of-type)::after {
+    width: 100%;
+    border-bottom: 1px solid ${Theme.color.tSeparator};
+  }
 `;
 
 const BoardContentWrapper = styled.div`
@@ -17,6 +22,7 @@ const BoardContentWrapper = styled.div`
   justify-content: center;
   min-width: 20rem;
   width: 70%;
+  cursor: pointer;
 `;
 
 const BoardInfoWrapper = styled.div`

src/components/ClubPostDetail/ClubPostDetail.style.ts

@@ -4,7 +4,7 @@ import styled from '@emotion/styled';
 const ClubPostDetailContainer = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: 1.5rem;
   width: 100%;
 `;
 
@@ -26,13 +26,13 @@ const PostContentStyled = styled.p`
 `;
 
 const PostedDateStyled = styled.div`
-  font-size: ${Theme.fontSize.largeContent};
+  font-size: ${Theme.fontSize.smallContent};
   color: ${Theme.color.textGrey};
 `;
 
 const PostSeparatorStyled = styled.div`
   width: 100%;
-  border: 1px solid ${Theme.color.tSeparator};
+  border-bottom: 1px solid ${Theme.color.tSeparator};
 `;
 
 const ButtonWrapper = styled.div`

src/components/ClubPostDetail/ClubPostDetail.tsx

@@ -8,6 +8,7 @@ import {
   ClubPostDetailContainer,
   PostAuthorWrapper,
   PostContentStyled,
+  PostSeparatorStyled,
   PostTitleStyled,
   PostedDateStyled,
 } from './ClubPostDetail.style';
@@ -31,11 +32,14 @@ const ClubPostDetail = ({ clubId, postId }: ClubPostDetailProps) => {
     author,
     authorImageUrl,
     postImageUrl,
-    createDate,
+    createdDate,
     lastModifiedDate,
   } = clubPostDetail;
 
   const isAuthor = authorId === getStorage('userId');
+  const isEdited = createdDate !== lastModifiedDate;
+  const postedDate = createdDate.split('T')[0].replaceAll('-', '/');
+  const postedTime = createdDate.split('T')[1];
 
   return (
     <ClubPostDetailContainer>
@@ -52,8 +56,10 @@ const ClubPostDetail = ({ clubId, postId }: ClubPostDetailProps) => {
       <PostTitleStyled>{title}</PostTitleStyled>
       {postImageUrl && <img src={postImageUrl} />}
       <PostContentStyled>{content}</PostContentStyled>
-      {lastModifiedDate && <div>편집됨</div>}
-      <PostedDateStyled>{createDate}</PostedDateStyled>
+      <PostedDateStyled>
+        {postedDate} {postedTime} {isEdited && <span>(편집됨)</span>}
+      </PostedDateStyled>
+      <PostSeparatorStyled />
     </ClubPostDetailContainer>
   );
 };

src/components/ClubPosts/ClubPosts.style.ts

@@ -1,11 +1,8 @@
-import Theme from '@/styles/Theme';
 import styled from '@emotion/styled';
 
 const PostsContainer = styled.div`
-  &:not(:last-of-type)::after {
-    width: 100%;
-    border: 1px solid ${Theme.color.tSeparator};
-  }
+  width: 100%;
+  max-width: 70rem;
 `;
 
 export { PostsContainer };