SKRR-29 feat: club post etc

src/apis/club/postCreateClubPost.ts

@@ -8,6 +8,7 @@ const postCreateClubPost = async ({ clubId, title, content, image }: PostCreateC
     title,
     content,
   };
+
   const formData = new FormData();
   if (title || content) {
     const blobRequest = new Blob([JSON.stringify(dataTransform)], { type: 'application/json' });

src/components/ClubComment/ClubComment.style.ts

@@ -13,6 +13,7 @@ const AuthorInfoWrapper = styled.div`
   display: flex;
   align-items: center;
   gap: 0.5rem;
+  min-width: 5rem;
   font-size: ${Theme.fontSize.smallContent};
   font-weight: 600;
 `;
@@ -52,6 +53,7 @@ const DeleteButtonAreaStyled = styled.div`
   align-items: center;
   width: 1rem;
   height: 1rem;
+  cursor: pointer;
 `;
 
 export {

src/components/ClubComments/ClubComments.tsx

@@ -1,32 +1,58 @@
 import useGetClubCommentsQuery from '@/hooks/query/club/useGetClubCommentsQuery';
+import { CommonEmptyEventsWrapper } from '@/styles/common';
+
+import { useState } from 'react';
 
 import ClubComment from '../ClubComment/ClubComment';
+import Pagination from '../common/Pagination/Pagination';
 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;
+  const [currentPage, setCurrentPage] = useState(0);
+  const { clubPostComments, pageData } = useGetClubCommentsQuery({
+    postId,
+    pageNumber: currentPage,
+  });
+  if (!pageData) {
+    return null;
+  }
+  const { totalPages, size, totalElements } = pageData;
+
+  const handleChangePage = (page: number) => {
+    setCurrentPage(page);
+  };
 
   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>
+    <>
+      <CommentsContainer>
+        <CommentCountWrapper>{`댓글 ${totalElements}`}</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}
+          />
+        ))}
+        {totalElements === 0 && (
+          <CommonEmptyEventsWrapper>댓글이 없습니다.</CommonEmptyEventsWrapper>
+        )}
+      </CommentsContainer>
+      <Pagination
+        totalPages={totalPages}
+        size={size}
+        onChangePage={handleChangePage}
+        currentPage={currentPage}
+      />
+    </>
   );
 };
 

src/components/ClubPost/ClubPost.style.ts

@@ -1,17 +1,18 @@
 import Theme from '@/styles/Theme';
+import { ellipsisText } from '@/styles/common';
 import styled from '@emotion/styled';
 
 const BoardContainer = styled.div`
   display: flex;
-  flex-wrap: wrap;
   justify-content: space-between;
+  gap: 2rem;
   width: 90%;
   height: 6.2rem;
   padding: 0.5rem;
+  border-bottom: 1px solid ${Theme.color.tSemiWhite};
 
-  &:not(:last-of-type)::after {
-    width: 100%;
-    border-bottom: 1px solid ${Theme.color.tSeparator};
+  &:last-child {
+    border-bottom: none;
   }
 `;
 
@@ -53,7 +54,7 @@ const TitleStyled = styled.h1`
   font-weight: 800;
 `;
 
-const ContentStyled = styled.p`
+const ContentStyled = styled(ellipsisText)`
   font-size: ${Theme.fontSize.mediumContent};
 `;
 

src/components/ClubPost/ClubPost.tsx

@@ -1,6 +1,8 @@
 import { PATH } from '@/constants/path';
+import Theme from '@/styles/Theme';
 import { getDateStamp } from '@/utils/getTimeStamp';
 
+import { IoMdImage } from 'react-icons/io';
 import { useNavigate } from 'react-router-dom';
 
 import Avatar from '../common/Avatar/Avatar';
@@ -38,21 +40,22 @@ const ClubPost = ({
   const navigate = useNavigate();
   const hasImage = Boolean(postImageUrl);
   const postedDate = getDateStamp(createdDate.split('T')[0]);
-  const postedTime = createdDate.split('T')[1];
 
   return (
     <BoardContainer>
       <BoardContentWrapper onClick={() => navigate(PATH.CLUB.POST(clubId, postId))}>
-        <TitleStyled>{title}</TitleStyled>
-        {hasImage && <div>image</div>}
+        <TitleStyled>
+          {title}
+          {hasImage && <IoMdImage fill={Theme.color.tSeparator} />}
+        </TitleStyled>
         <ContentStyled>{content}</ContentStyled>
       </BoardContentWrapper>
       <BoardInfoWrapper>
-        <PostDateWrapper>
-          {postedDate} {postedTime}
-        </PostDateWrapper>
-        <Avatar avatarSize="small" profileImageSrc={authorImageUrl} />
-        <AuthorWrapper>{author}</AuthorWrapper>
+        <PostDateWrapper>{postedDate}</PostDateWrapper>
+        <AuthorWrapper>
+          <Avatar avatarSize="small" profileImageSrc={authorImageUrl} />
+          {author}
+        </AuthorWrapper>
       </BoardInfoWrapper>
     </BoardContainer>
   );

src/components/ClubPostDetail/ClubPostDetail.style.ts

@@ -6,6 +6,7 @@ const ClubPostDetailContainer = styled.div`
   flex-direction: column;
   gap: 1.5rem;
   width: 100%;
+  padding: 1.5rem;
 `;
 
 const PostAuthorWrapper = styled.div`
@@ -23,6 +24,7 @@ const PostTitleStyled = styled.h1`
 const PostContentStyled = styled.p`
   font-size: ${Theme.fontSize.largeContent};
   word-break: break-all;
+  white-space: pre-wrap;
 `;
 
 const PostedDateStyled = styled.div`
@@ -35,6 +37,10 @@ const PostSeparatorStyled = styled.div`
   border-bottom: 1px solid ${Theme.color.tSeparator};
 `;
 
+const ImageStyled = styled.img`
+  max-width: 40rem;
+`;
+
 const ButtonWrapper = styled.div`
   display: flex;
   justify-content: end;
@@ -50,4 +56,5 @@ export {
   PostedDateStyled,
   PostSeparatorStyled,
   ButtonWrapper,
+  ImageStyled,
 };

src/components/ClubPostDetail/ClubPostDetail.tsx

@@ -13,6 +13,7 @@ import Button from '../common/Button/Button';
 import {
   ButtonWrapper,
   ClubPostDetailContainer,
+  ImageStyled,
   PostAuthorWrapper,
   PostContentStyled,
   PostSeparatorStyled,
@@ -84,13 +85,13 @@ const ClubPostDetail = ({ clubId, postId }: ClubPostDetailProps) => {
           {author}
         </PostAuthorWrapper>
         <PostTitleStyled>{title}</PostTitleStyled>
-        {postImageUrl && <img src={postImageUrl} />}
+        {postImageUrl && <ImageStyled src={postImageUrl} />}
         <PostContentStyled>{content}</PostContentStyled>
         <PostedDateStyled>
           {postedDate} {postedTime} {isEdited && <span>(편집됨)</span>}
         </PostedDateStyled>
-        <PostSeparatorStyled />
       </ClubPostDetailContainer>
+      <PostSeparatorStyled />
     </>
   );
 };

src/components/WriteClubComment/WriteClubComment.style.ts

@@ -8,7 +8,7 @@ const WriteCommentContainer = styled.div`
   gap: 1rem;
   width: 100%;
   min-width: 20rem;
-  padding: 1rem 1rem 0 1rem;
+  padding: 1rem 1rem 5rem 1rem;
 `;
 
 const UserInfoWrapper = styled.div`
@@ -54,8 +54,9 @@ const CommentButtonStyled = styled.button`
   outline: none;
   border: 0;
   color: white;
-  background-color: ${Theme.color.tSeparator};
+  background-color: ${Theme.color.tSemiPurple};
   border-radius: 0.5rem;
+  cursor: pointer;
 `;
 
 const PrivateWrapper = styled.div`

src/components/WriteClubComment/WriteClubComment.tsx

@@ -29,6 +29,7 @@ const WriteClubComment = ({ postId }: WriteClubCommentProps) => {
   const {
     register,
     handleSubmit,
+    reset,
     formState: { errors },
   } = useForm<WriteClubCommentValue>({
     defaultValues: {
@@ -45,9 +46,9 @@ const WriteClubComment = ({ postId }: WriteClubCommentProps) => {
 
   const { username, profileImageUrl } = data;
 
-  const onSubmit: SubmitHandler<WriteClubCommentValue> = (data, event) => {
+  const onSubmit: SubmitHandler<WriteClubCommentValue> = (data) => {
     postComment({ postId, content: data.content, isPrivate: data.isPrivate });
-    event?.target.reset();
+    reset();
   };
 
   return (

src/hooks/query/club/useGetClubCommentsQuery.ts

@@ -11,9 +11,9 @@ const useGetClubCommentsQuery = ({ postId, pageNumber }: GetClubCommentsRequest)
     queryFn: () => getClubComments({ postId, pageNumber }),
   });
 
-  const { data, sliceData } = comments ?? {};
+  const { data, pageData } = comments ?? {};
 
-  return { clubPostComments: data, pageData: sliceData };
+  return { clubPostComments: data, pageData };
 };
 
 export default useGetClubCommentsQuery;

src/pages/club/ClubBoardPage/ClubBoardPage.style.ts

@@ -19,32 +19,8 @@ const ClubBoardContentWrapper = styled.div`
 
 const ButtonWrapper = styled.div`
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-start;
   width: 100%;
 `;
 
-const MyPostsCommentsButtonStyled = styled.button`
-  border: 0;
-  background-color: transparent;
-  cursor: pointer;
-`;
-
-const MyButtonsWrapper = styled.div`
-  display: flex;
-  width: fit-content;
-  gap: 0.5rem;
-
-  & > *:not(:last-of-type)::after {
-    content: '|';
-    margin-left: 0.5rem;
-  }
-`;
-
-export {
-  ClubBoardPageContainer,
-  ClubBoardTopWrapper,
-  ClubBoardContentWrapper,
-  ButtonWrapper,
-  MyPostsCommentsButtonStyled,
-  MyButtonsWrapper,
-};
+export { ClubBoardPageContainer, ClubBoardTopWrapper, ClubBoardContentWrapper, ButtonWrapper };

src/pages/club/ClubBoardPage/ClubBoardPage.tsx

@@ -12,8 +12,6 @@ import {
   ClubBoardContentWrapper,
   ClubBoardPageContainer,
   ClubBoardTopWrapper,
-  MyButtonsWrapper,
-  MyPostsCommentsButtonStyled,
 } from './ClubBoardPage.style';
 
 const ClubBoardPage = () => {
@@ -34,10 +32,6 @@ const ClubBoardPage = () => {
               buttonText="글 작성하기"
               onClick={() => navigate(PATH.CLUB.WRITE_POST(clubId))}
             />
-            <MyButtonsWrapper>
-              <MyPostsCommentsButtonStyled>내가 쓴 글</MyPostsCommentsButtonStyled>
-              <MyPostsCommentsButtonStyled>내가 쓴 댓글</MyPostsCommentsButtonStyled>
-            </MyButtonsWrapper>
           </ButtonWrapper>
           <ClubPosts clubId={clubId} />
         </ClubBoardContentWrapper>

src/pages/club/ClubPostDetailPage/ClubPostDetailPage.tsx

@@ -18,7 +18,7 @@ const ClubPostDetailPage = () => {
   if (!clubId) {
     throw new Error('클럽 ID를 찾을 수 없습니다');
   } else if (!postId) {
-    return null; //#TODO: 게시물 찾을 수 없다는 모달창 띄우고 전 페이지로 이동
+    return null;
   }
 
   return (

src/pages/club/ClubPostWritePage/ClubPostWritePage.style.ts

@@ -41,7 +41,27 @@ const FileInputWrapper = styled.div`
   display: flex;
   justify-content: start;
   width: 100%;
-  padding: 0.5rem;
+`;
+
+const FileInputLabelStyled = styled.label`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 3rem;
+  height: 3rem;
+  background-color: ${Theme.color.tSeparator};
+  color: white;
+  cursor: pointer;
+`;
+
+const InputStyled = styled.input`
+  display: none;
+`;
+
+const PreviewImageStyled = styled.img`
+  width: 3rem;
+  height: 3rem;
+  object-fit: cover;
 `;
 
 const ErrorMessageStyled = styled.div`
@@ -61,4 +81,7 @@ export {
   ContentStyled,
   FileInputWrapper,
   ErrorMessageStyled,
+  FileInputLabelStyled,
+  InputStyled,
+  PreviewImageStyled,
 };