From 5d6285f0563f60e158850a268ee8749d3ee6860d Mon Sep 17 00:00:00 2001
From: Minseo Jwa <137873062+min8282@users.noreply.github.com>
Date: Thu, 30 May 2024 02:13:43 +0900
Subject: [PATCH] feat: Comment Component

Add Comment Component
---
 src/App.tsx               | 11 +++++++
 src/component/Comment.css | 66 +++++++++++++++++++++++++++++++++++++++
 src/component/Comment.tsx | 40 ++++++++++++++++++++++++
 3 files changed, 117 insertions(+)
 mode change 100644 => 100755 src/App.tsx
 create mode 100755 src/component/Comment.css
 create mode 100755 src/component/Comment.tsx

diff --git a/src/App.tsx b/src/App.tsx
old mode 100644
new mode 100755
index a660f2d..c99dbb9
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,6 +1,10 @@
 import { useEffect, useState } from "react";
 import "./index.css";
 import BookList from "./BookList/BookList";
+
+import Comment from './component/Comment'; // Adjust the import path if necessary
+
+
 function App() {
   const [books, setBooks] = useState<IBook[]>([]);
 
@@ -57,6 +61,13 @@ function App() {
       <BookList books={books} title={"인기 북 순위"} />
       <BookList books={books} title={"신간 책"} />
       <BookList books={books} title={"연간 책 순위"} />
+      <Comment
+        rating={4.5}
+        author="좌민서"
+        text="여기는 댓글 내용이 채워질 공간입니다. 댓글댓글댓글댓글댓글"
+        likes={407}
+        replies={16}
+      />
     </div>
   );
 }
diff --git a/src/component/Comment.css b/src/component/Comment.css
new file mode 100755
index 0000000..e94367f
--- /dev/null
+++ b/src/component/Comment.css
@@ -0,0 +1,66 @@
+.comment {
+    border: 1px solid #e1e1e1;
+    border-radius: 8px;
+    padding: 16px;
+    margin: 16px 0;
+    background-color: #fff;
+  }
+  
+  .comment-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  
+  .comment-rating {
+    display: flex;
+  }
+  
+  .star {
+    color: #ccc;
+    font-size: 24px;
+  }
+  
+  .star.filled {
+    color: #ffc107;
+  }
+  
+  .comment-author {
+    display: flex;
+    align-items: center;
+  }
+  
+  .author-image {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    margin-right: 8px;
+  }
+  
+  .author-name {
+    font-weight: bold;
+  }
+  
+  .comment-body {
+    margin: 16px 0;
+  }
+  
+  .comment-text {
+    font-size: 16px;
+    color: #333;
+  }
+  
+  .comment-footer {
+    display: flex;
+    justify-content: space-between;
+  }
+  
+  .comment-actions {
+    display: flex;
+    gap: 16px;
+  }
+  
+  .likes, .replies {
+    font-size: 14px;
+    color: #888;
+  }
\ No newline at end of file
diff --git a/src/component/Comment.tsx b/src/component/Comment.tsx
new file mode 100755
index 0000000..8c5756d
--- /dev/null
+++ b/src/component/Comment.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import './Comment.css';
+
+interface CommentProps {
+  rating: number;   // raing(Rate) -> 도서 평점에만 사용됨. 삭제?
+  author: string;   // user_id(User)
+  text: string;     // comment(Comment)
+  likes: number;    // like
+  replies: number;  // 대댓글은 erd에 없음.
+}
+
+const Comment: React.FC<CommentProps> = ({ rating, author, text, likes, replies }) => {
+  const stars = Array(5).fill(0).map((_, i) => i < rating ? '★' : '☆');
+  
+  return (
+    <div className="comment top-44 right-2">
+      <div className="comment-header">
+        <div className="comment-rating">
+          {stars.map((star, index) => (
+            <span key={index} className={`star ${star === '★' ? 'filled' : ''}`}>{star}</span>
+          ))}
+        </div>
+        <div className="comment-author">
+          <span className="author-name">{author}</span>
+        </div>
+      </div>
+      <div className="comment-body">
+        <p className="comment-text">{text}</p>
+      </div>
+      <div className="comment-footer">
+        <div className="comment-actions">
+          <span className="likes">👍 {likes}</span>
+          <span className="replies">💬 {replies}</span> 
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Comment;
\ No newline at end of file