[Feature/#50] detail community api

src/App.tsx

@@ -39,7 +39,7 @@ const router = createBrowserRouter([
     element: <CommunityPage />,
   },
   {
-    path: '/detail/community/:id',
+    path: '/community/post/:id',
     element: <DetailCommunityPage />,
   },
   {

src/features/community/CommunityPage.tsx

@@ -4,7 +4,7 @@ import { BeatLoader } from 'react-spinners';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import axios from 'axios';
 import { useInfiniteQuery } from '@tanstack/react-query';
-import { useSearchParams } from 'react-router-dom';
+import { useNavigate, useSearchParams } from 'react-router-dom';
 import { SortKey, PostTypes } from './types';
 
 const CommunityPage = () => {
@@ -42,7 +42,7 @@ const CommunityPage = () => {
     },
     initialPageParam: 1,
   });
-
+  const navigate = useNavigate();
   const loadMoreRef = useRef<HTMLDivElement | null>(null);
 
   const handleObserver = useCallback(
@@ -79,7 +79,13 @@ const CommunityPage = () => {
         <DropDown isSorted={isSorted} setIsSorted={handleSortChange} />
       </DropDownLayout>
       {data?.pages.flatMap((page) =>
-        page.map((post: PostTypes) => <Post key={post.id} {...post} />)
+        page.map((post: PostTypes) => (
+          <Post
+            key={post.id}
+            {...post}
+            onClick={() => navigate(`/community/post/${post.id}`)}
+          />
+        ))
       )}
       {isFetchingNextPage && (
         <LoaderWrapper>

src/features/community/components/CommentInput.tsx

@@ -1,11 +1,49 @@
 import styled from 'styled-components';
 import commentUpdate from '../../../assets/comment-update.svg';
+import axios from 'axios';
+import { useState } from 'react';
+
+interface CommentInputPropTypes {
+  postId: number | undefined;
+  userId: number | undefined;
+  refetchComments: () => void;
+}
+
+const CommentInput = ({
+  postId,
+  userId,
+  refetchComments,
+}: CommentInputPropTypes) => {
+  const [commentData, setCommentData] = useState('');
+
+  const PostComment = async () => {
+    const trimmedComment = commentData.trim();
+
+    if (trimmedComment.length < 1 || trimmedComment.length > 500) {
+      alert('댓글은 공백이 아닌 1자 이상 500자 이하로 작성해주세요');
+      return;
+    }
+
+    try {
+      await axios.post(`/api/community/post/${postId}/comment`, {
+        content: commentData,
+        user_id: userId,
+      });
+      setCommentData('');
+      refetchComments();
+    } catch (e) {
+      console.error('댓글 작성에 실패했습니다');
+    }
+  };
 
-const CommentInput = () => {
   return (
     <Wrapper>
-      <InputLayout placeholder="댓글을 입력하세요" />
-      <img src={commentUpdate} alt="updateBtn" />
+      <InputLayout
+        placeholder="댓글을 입력하세요"
+        value={commentData}
+        onChange={(e) => setCommentData(e.target.value)}
+      />
+      <img src={commentUpdate} alt="updateBtn" onClick={PostComment} />
     </Wrapper>
   );
 };
@@ -19,13 +57,19 @@ const Wrapper = styled.div`
   width: 100%;
   height: 64px;
   background-color: ${({ theme }) => theme.colors.write_purple200};
+
+  img {
+    cursor: pointer;
+  }
 `;
 
 const InputLayout = styled.textarea`
   border: none;
   background-color: transparent;
   width: 100%;
   margin-right: 4px;
+  color: #ffffff;
+  resize: none;
 
   ::placeholder {
     font-size: 1rem;

src/features/community/components/Comments.tsx

@@ -1,11 +1,16 @@
 import styled from 'styled-components';
-import { mockPosts } from '../../../features/community/components/mockData';
 
-const Comments = () => {
+const Comments = ({
+  nickname,
+  content,
+}: {
+  nickname: string;
+  content?: string;
+}) => {
   return (
     <Wrapper>
-      <p className="nickname">{mockPosts[0].author.nickname}</p>
-      <p className="comment">{mockPosts[0].comment}</p>
+      <p className="nickname">{nickname}</p>
+      <p className="comment">{content}</p>
     </Wrapper>
   );
 };

src/features/community/components/CommentsContent.tsx

@@ -1,13 +1,29 @@
 import styled from 'styled-components';
-import { mockPosts } from '../../../features/community/components/mockData';
 import { Comments, CommentInput } from './index';
+import { CommentsContentPropTypes } from '../types';
 
-const CommentsContent = () => {
+const CommentsContent = ({
+  comment,
+  postId,
+  userId,
+  refetchComments,
+}: CommentsContentPropTypes) => {
   return (
     <Wrapper>
       <h2>댓글</h2>
-      {mockPosts[0].comment && <Comments />}
-      <CommentInput />
+      {comment &&
+        comment.map((comment) => (
+          <Comments
+            key={comment.comment_id}
+            nickname={comment.nickname}
+            content={comment.content}
+          />
+        ))}
+      <CommentInput
+        postId={postId}
+        userId={userId}
+        refetchComments={refetchComments}
+      />
     </Wrapper>
   );
 };

src/features/community/components/DetailPostContent.tsx

@@ -1,16 +1,86 @@
 import styled from 'styled-components';
 import { UserInfo } from './index';
+import { UserDataType } from '../types';
 import { Icon } from '../../../components/ui/Icon';
-import { mockPosts } from '../../../features/community/components/mockData';
+import { useMutation } from '@tanstack/react-query';
+import { useEffect, useState } from 'react';
+import axios from 'axios';
+import { useParams } from 'react-router-dom';
+import { queryClient } from '../../../network/react-query/queryClient';
+
+const DetailPostContent = ({
+  content,
+  likesCount,
+  userInfo,
+  user_id,
+}: {
+  content?: string;
+  likesCount?: number;
+  userInfo?: UserDataType;
+  user_id?: number;
+}) => {
+  const [isLiked, setIsLiked] = useState(false);
+  const [currentLikes, setCurrentLikes] = useState(
+    likesCount === 0 ? 0 : likesCount
+  );
+  const { id } = useParams<{ id: string }>();
+  const post_id = Number(id);
+
+  const empathyMutation = useMutation({
+    mutationFn: async () => {
+      const response = await axios.patch(
+        `/api/community/post/${post_id}/like`,
+        {},
+        {
+          params: {
+            user_id,
+          },
+        }
+      );
+
+      const previousEmpathy = queryClient.getQueryData(['empathy']);
+      return { ...response.data, previousEmpathy };
+    },
+    onSuccess: (data) => {
+      if (data.is_cancled) {
+        setIsLiked(false);
+        setCurrentLikes((prev) => (prev ?? 0) - 1);
+      } else {
+        setIsLiked(true);
+        setCurrentLikes((prev) => (prev ?? 0) + 1);
+      }
+    },
+    onError: () => {
+      queryClient.invalidateQueries({ queryKey: ['empathy'] });
+    },
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: ['empathy'] });
+    },
+  });
+
+  const handleLikeToggle = () => {
+    if (!isLiked) {
+      empathyMutation.mutate();
+    } else {
+      setIsLiked(false);
+      setCurrentLikes((prev) => Math.max(0, (prev ?? 0) - 1));
+    }
+  };
+
+  useEffect(() => {
+    setCurrentLikes(likesCount === 0 ? 0 : likesCount);
+  }, [likesCount]);
 
-const DetailPostContent = () => {
   return (
     <Wrapper>
-      <UserInfo />
-      <Content>{mockPosts[0].content}</Content>
-      <EmpathyLayout>
-        <Icon type="community_filed_heart" alt="filledHeart" />
-        <p>{mockPosts[0].likes}</p>
+      <UserInfo user_info={userInfo} />
+      <Content>{content}</Content>
+      <EmpathyLayout onClick={handleLikeToggle}>
+        <Icon
+          type={isLiked ? 'community_filed_heart' : 'community_empty_heart'}
+          alt={isLiked ? 'filledHeart' : 'emptyHeart'}
+        />
+        <p>{currentLikes}</p>
       </EmpathyLayout>
     </Wrapper>
   );

src/features/community/components/Post.tsx

@@ -1,10 +1,12 @@
 import styled from 'styled-components';
 import { PostContent, PostReaction, UserInfo } from './index';
-import { PostTypes } from '../types';
+import { PostProps } from '../types';
+
+const Post = (postProps: PostProps) => {
+  const { onClick, ...props } = postProps;
 
-const Post = (props: Partial<PostTypes>) => {
   return (
-    <Wrapper>
+    <Wrapper onClick={onClick}>
       {props.user_info && props.created_at ? (
         <UserInfo user_info={props.user_info} created_at={props.created_at} />
       ) : (
@@ -29,6 +31,7 @@ const Wrapper = styled.div`
   background-color: rgba(231, 225, 255, 0.4);
   margin-bottom: 36px;
   padding: 20px 26px;
+  cursor: pointer;
 `;
 
 export default Post;

src/features/community/components/UserInfo.tsx

@@ -1,5 +1,6 @@
 import styled from 'styled-components';
 import { UserDataType } from '../types';
+import default_profile_image from '../../../assets/default_profile_image.svg';
 
 const UserInfo = ({
   user_info,
@@ -13,7 +14,10 @@ const UserInfo = ({
       <UserLayout>
         {user_info && (
           <>
-            <img src={user_info.profile_image} alt="userImg" />
+            <img
+              src={user_info.profile_image || default_profile_image}
+              alt="userImg"
+            />
             <p>{user_info.nickname}</p>
           </>
         )}

src/features/community/components/WorryContent.tsx

@@ -1,11 +1,27 @@
 import styled from 'styled-components';
+import { UserDataType } from '../types';
 import { DetailPostContent } from './index';
 
-const WorryContent = () => {
+const WorryContent = ({
+  userInfo,
+  content,
+  likesCount,
+  userId,
+}: {
+  userInfo?: UserDataType;
+  content?: string;
+  likesCount?: number;
+  userId?: number;
+}) => {
   return (
     <Wrapper>
       <h2>고민</h2>
-      <DetailPostContent />
+      <DetailPostContent
+        userInfo={userInfo}
+        content={content}
+        likesCount={likesCount}
+        user_id={userId}
+      />
     </Wrapper>
   );
 };
@@ -14,6 +30,7 @@ const Wrapper = styled.div`
   display: flex;
   flex-direction: column;
   gap: 16px;
+
   h2 {
     font-size: 20px;
     font-weight: 600;