feat: 피드 글 상세보기 페이지

src/components/feed/PostBody.tsx → src/components/common/Post/PostBody.tsx

@@ -1,13 +1,13 @@
 import styled from '@emotion/styled';
 import { useNavigate } from 'react-router-dom';
-import BookInfoCard from './BookInfoCard';
+import BookInfoCard from '../../feed/BookInfoCard';
+import type { PostBodyProps } from '@/types/post';
 
 const Container = styled.div`
   display: flex;
   flex-direction: column;
   width: 100%;
   gap: 16px;
-  cursor: pointer;
 `;
 
 const PostContent = styled.div<{ hasImage: boolean }>`
@@ -76,17 +76,9 @@ const TagContainer = styled.div`
   }
 `;
 
-interface PostBodyProps {
-  bookTitle: string;
-  bookAuthor: string;
-  postContent: string;
-  postId: string;
-  images?: string[];
-  tags?: string[];
-}
-
 const PostBody = ({
   bookTitle,
+  isbn,
   bookAuthor,
   postContent,
   postId,
@@ -98,13 +90,14 @@ const PostBody = ({
   const hasTag = tags.length > 0;
 
   const handlePostContent = () => {
+    // if (!isClickable) return;
     navigate(`/feed/${postId}`);
     // API 연동시 경로 수정 필요
   };
 
   return (
     <Container>
-      <BookInfoCard bookTitle={bookTitle} bookAuthor={bookAuthor} />
+      <BookInfoCard bookTitle={bookTitle} bookAuthor={bookAuthor} isbn={isbn} />
       <PostContent hasImage={hasImage} onClick={handlePostContent}>
         <div className="content">{postContent}</div>
         {hasImage && (

src/components/feed/PostFooter.tsx → src/components/common/Post/PostFooter.tsx

@@ -1,12 +1,12 @@
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import styled from '@emotion/styled';
-import like from '../../assets/feed/like.svg';
-import activeLike from '../../assets/feed/activeLike.svg';
-import comment from '../../assets/feed/comment.svg';
-import save from '../../assets/feed/save.svg';
-import activeSave from '../../assets/feed/activeSave.svg';
-import lockIcon from '../../assets/feed/lockIcon.svg';
+import like from '../../../assets/feed/like.svg';
+import activeLike from '../../../assets/feed/activeLike.svg';
+import comment from '../../../assets/feed/comment.svg';
+import save from '../../../assets/feed/save.svg';
+import activeSave from '../../../assets/feed/activeSave.svg';
+import lockIcon from '../../../assets/feed/lockIcon.svg';
 
 const Container = styled.div`
   width: 100%;

src/components/feed/PostHeader.tsx → src/components/common/Post/PostHeader.tsx

@@ -1,8 +1,49 @@
+import { useNavigate } from 'react-router-dom';
 import styled from '@emotion/styled';
 
-const Container = styled.div`
+interface PostHeaderProps {
+  profileImgUrl: string;
+  userName: string;
+  userTitle: string;
+  titleColor: string;
+  createdAt: string;
+  userId: number;
+  type?: 'post' | 'reply';
+}
+
+const PostHeader = ({
+  profileImgUrl,
+  userName,
+  userTitle,
+  titleColor,
+  createdAt,
+  userId,
+  type = 'post',
+}: PostHeaderProps) => {
+  const navigate = useNavigate();
+
+  const handleClick = () => {
+    navigate(`/otherfeed/${userId}`);
+  };
+  return (
+    <Container type={type} onClick={handleClick}>
+      <div className="headerInfo">
+        <img src={profileImgUrl} alt="칭호 이미지" />
+        <div className="infoBox">
+          <div className="username">{userName}</div>
+          <div className="usertitle" style={{ color: titleColor }}>
+            {userTitle}
+          </div>
+        </div>
+      </div>
+      <div className="timestamp">{createdAt}</div>
+    </Container>
+  );
+};
+
+const Container = styled.div<{ type?: 'post' | 'reply' }>`
   width: 100%;
-  height: 36px;
+  height: ${({ type }) => (type === 'reply' ? '29px' : '36px')};
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -12,12 +53,12 @@ const Container = styled.div`
   .headerInfo {
     display: flex;
     flex-direction: row;
-    gap: 8px;
-
+    align-items: center;
+    gap: ${({ type }) => (type === 'reply' ? '4px' : '8px')};
     img {
-      width: 36px;
-      height: 36px;
-      border-radius: 36px;
+      width: ${({ type }) => (type === 'reply' ? '24px' : '36px')};
+      height: ${({ type }) => (type === 'reply' ? '24px' : '36px')};
+      border-radius: ${({ type }) => (type === 'reply' ? '24px' : '36px')};
       border: 0.5px solid var(--color-grey-300);
     }
 
@@ -28,13 +69,13 @@ const Container = styled.div`
       gap: 4px;
       .username {
         color: var(--color-white);
-        font-size: var(--font-size-sm);
-        font-weight: 500;
+        font-size: ${({ type }) => (type === 'reply' ? '12px' : 'var(--font-size-sm)')};
+        font-weight: var(--font-weight-medium);
         line-height: normal;
       }
       .usertitle {
         color: var(--color-character-pink);
-        font-size: var(--font-size-xs);
+        font-size: ${({ type }) => (type === 'reply' ? '11px' : 'var(--font-size-xs)')};
         font-weight: var(--font-weight-regular);
         line-height: normal;
       }
@@ -49,35 +90,4 @@ const Container = styled.div`
   }
 `;
 
-interface PostHeaderProps {
-  profileImgUrl: string;
-  userName: string;
-  userTitle: string;
-  titleColor: string;
-  createdAt: string;
-}
-
-const PostHeader = ({
-  profileImgUrl,
-  userName,
-  userTitle,
-  titleColor,
-  createdAt,
-}: PostHeaderProps) => {
-  return (
-    <Container>
-      <div className="headerInfo">
-        <img src={profileImgUrl} alt="칭호 이미지" />
-        <div className="infoBox">
-          <div className="username">{userName}</div>
-          <div className="usertitle" style={{ color: titleColor }}>
-            {userTitle}
-          </div>
-        </div>
-      </div>
-      <div className="timestamp">{createdAt}</div>
-    </Container>
-  );
-};
-
 export default PostHeader;

src/components/common/Post/Reply.tsx

@@ -0,0 +1,99 @@
+import { useState } from 'react';
+import styled from '@emotion/styled';
+import { typography, colors } from '@/styles/global/global';
+import PostHeader from './PostHeader';
+import type { ReplyDataProps } from '@/types/post';
+import like from '../../../assets/feed/like.svg';
+import activeLike from '../../../assets/feed/activeLike.svg';
+
+const Reply = ({
+  profileImgUrl,
+  userName,
+  userId,
+  userTitle,
+  titleColor,
+  createdAt,
+  initialLikeCount,
+  replyContent,
+}: ReplyDataProps) => {
+  const [liked, setLiked] = useState(false);
+  const [likeCount, setLikeCount] = useState<number>(initialLikeCount);
+  const handleLike = () => {
+    setLiked(!liked);
+    setLikeCount(prev => (liked ? prev - 1 : prev + 1));
+  };
+
+  return (
+    <Container>
+      <PostHeader
+        profileImgUrl={profileImgUrl}
+        userName={userName}
+        userTitle={userTitle}
+        titleColor={titleColor}
+        createdAt={createdAt}
+        userId={userId}
+        type="reply"
+      />
+      <ReplySection>
+        <div className="left">
+          <div className="reply">{replyContent}</div>
+          <div className="sub-reply">답글작성</div>
+        </div>
+        <div className="right">
+          <img src={liked ? activeLike : like} onClick={handleLike} />
+          <div className="count">{likeCount}</div>
+        </div>
+      </ReplySection>
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: 12px;
+`;
+
+const ReplySection = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: 20px;
+
+  .left {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+
+    .reply {
+      color: ${colors.grey[100]};
+      font-size: ${typography.fontSize.sm};
+      font-weight: ${typography.fontWeight.regular};
+      line-height: 20px;
+    }
+    .sub-reply {
+      color: ${colors.grey[300]};
+      font-size: ${typography.fontSize.xs};
+      font-weight: ${typography.fontWeight.semibold};
+      line-height: normal;
+      cursor: pointer;
+    }
+  }
+
+  .right {
+    display: flex;
+    flex-direction: column;
+    cursor: pointer;
+
+    .count {
+      text-align: center;
+      color: ${colors.grey[100]};
+      font-size: 10px;
+      font-weight: ${typography.fontWeight.medium};
+      line-height: normal;
+    }
+  }
+`;
+
+export default Reply;

src/components/common/Post/ReplyList.tsx

@@ -0,0 +1,81 @@
+import styled from '@emotion/styled';
+import { typography, colors } from '@/styles/global/global';
+import Reply from './Reply';
+import SubReply from './SubReply';
+import type { ReplyListProps } from '@/types/post';
+
+const ReplyList = ({ commentList }: ReplyListProps) => {
+  const hasComments = commentList.length > 0;
+
+  return (
+    <Container>
+      {hasComments ? (
+        commentList.map(comment => (
+          <div className="comment-group" key={comment.commentId}>
+            <Reply {...comment} />
+            {comment.replyCommentList.map(sub => (
+              <SubReply key={sub.replyCommentId} {...sub} />
+            ))}
+          </div>
+        ))
+      ) : (
+        <EmptyState>
+          <div className="title">아직 댓글이 없어요</div>
+          <div className="sub-title">첫번째 댓글을 남겨보세요</div>
+        </EmptyState>
+      )}
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-width: 360px;
+  max-width: 540px;
+  padding: 40px 20px;
+  margin: 0 auto;
+  margin-bottom: 56px;
+  gap: 24px;
+  flex: 1;
+
+  .comment-group {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+  }
+`;
+
+const EmptyState = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-width: 360px;
+  max-width: 540px;
+  padding: 40px 20px;
+  margin: 0 auto;
+  margin-bottom: 56px;
+  gap: 8px;
+  flex: 1;
+
+  .title {
+    color: ${colors.white};
+    text-align: center;
+    font-size: ${typography.fontSize.lg};
+    font-weight: ${typography.fontWeight.semibold};
+    line-height: 24px;
+  }
+
+  .sub-title {
+    color: ${colors.grey[100]};
+    text-align: center;
+    font-size: ${typography.fontSize.sm};
+    font-weight: ${typography.fontWeight.regular};
+    line-height: normal;
+  }
+`;
+
+export default ReplyList;