From c30c5c347ae83afd4d43968eb00f938ba745a8b2 Mon Sep 17 00:00:00 2001
From: LMS10 <ggb7410@naver.com>
Date: Sun, 8 Dec 2024 21:39:33 +0900
Subject: [PATCH] =?UTF-8?q?feat(component):=20=EB=8C=93=EA=B8=80=20?=
 =?UTF-8?q?=EC=9E=91=EC=84=B1=EC=9E=90=EC=9D=98=20=ED=94=84=EB=A1=9C?=
 =?UTF-8?q?=ED=95=84=20=EC=A0=95=EB=B3=B4,=20=EB=8C=93=EA=B8=80=20?=
 =?UTF-8?q?=EB=82=B4=EC=9A=A9,=20=EC=9E=91=EC=84=B1=20=EC=8B=9C=EA=B0=84?=
 =?UTF-8?q?=20=EB=A0=8C=EB=8D=94=EB=A7=81=ED=95=98=EB=8A=94=20CommentItem?=
 =?UTF-8?q?=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/ItemPage/components/CommentItem.jsx | 96 +++++++++++++++++++
 1 file changed, 96 insertions(+)
 create mode 100644 src/pages/ItemPage/components/CommentItem.jsx

diff --git a/src/pages/ItemPage/components/CommentItem.jsx b/src/pages/ItemPage/components/CommentItem.jsx
new file mode 100644
index 000000000..d208768af
--- /dev/null
+++ b/src/pages/ItemPage/components/CommentItem.jsx
@@ -0,0 +1,96 @@
+import styled from "styled-components";
+import { ReactComponent as KebabIcon } from "../../../assets/images/icons/ic_kebab.svg";
+import DefaultProfileImage from "../../../assets/images/icons/ic_profile.svg";
+import formatUpdatedAt from "../../../utils/dateUtils";
+import { LineDivider } from "../../../styles/CommonStyles";
+
+const CommentContainer = styled.section`
+  padding: 2.4rem 0;
+  position: relative;
+`;
+
+const KebabButton = styled.button`
+  position: absolute;
+  right: 0;
+`;
+
+const CommentContent = styled.p`
+  font-size: 16px;
+  line-height: 140%;
+  margin-bottom: 24px;
+`;
+
+const AuthorProfile = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+
+  @media (max-width: 767px) {
+    gap: 1.6rem;
+  }
+`;
+
+const UserProfileImage = styled.img`
+  width: 4rem;
+  height: 4rem;
+  border-radius: 50%;
+  object-fit: cover;
+`;
+
+const AuthorName = styled.p`
+  font-weight: 500;
+  font-size: 1.2rem;
+  line-height: 1.8rem;
+  color: var(--secondary-600);
+  margin-bottom: 0.4rem;
+
+  @media (max-width: 767px) {
+    font-size: 1.4rem;
+    line-height: 2.4rem;
+    margin-bottom: 0.2rem;
+  }
+`;
+
+const Timestamp = styled.p`
+  font-size: 1.2rem;
+  line-height: 1.8rem;
+  color: var(--secondary-400);
+
+  @media (max-width: 767px) {
+    font-size: 1.4rem;
+    line-height: 2.4rem;
+  }
+`;
+
+function CommentItem({ item }) {
+  console.log("Received item:", item);
+  const authorInfo = item.writer;
+  const formattedTimestamp = formatUpdatedAt(item.updatedAt);
+
+  return (
+    <>
+      <CommentContainer>
+        <KebabButton>
+          <KebabIcon />
+        </KebabButton>
+
+        <CommentContent>{item.content}</CommentContent>
+
+        <AuthorProfile>
+          <UserProfileImage
+            src={authorInfo.image || DefaultProfileImage}
+            alt={`&{authorInfo.nickname}님의 프로필 사진`}
+          />
+          <div>
+            <AuthorName>{authorInfo.nickname}</AuthorName>
+            <Timestamp>{formattedTimestamp}</Timestamp>
+          </div>
+        </AuthorProfile>
+      </CommentContainer>
+
+      <LineDivider $margin="0" />
+    </>
+  );
+}
+
+export default CommentItem;