From 769942192a6c2013e8b5f2bf69157456e2c234b0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=9A=B0=EC=84=B1?= <sitpo96@naver.com>
Date: Wed, 7 Feb 2024 13:50:26 +0900
Subject: [PATCH] =?UTF-8?q?[FE]=20Feat=20#133:=20=EB=8C=93=EA=B8=80(Commen?=
 =?UTF-8?q?t)=20=EB=B0=8F=20=EB=8C=93=EA=B8=80=EB=A6=AC=EC=8A=A4=ED=8A=B8(?=
 =?UTF-8?q?CommentList)=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=A0=9C?=
 =?UTF-8?q?=EC=9E=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Change-Id: Ia3c9da2afb69bf26847e757bcb27f200d5edf780
---
 .../Bucket/BucketDetail/Comment/Comment.tsx   |  36 +++++++
 .../BucketDetail/Comment/CommentList.tsx      | 102 ++++++++++++++++++
 .../src/pages/Bucket/BucketDetail/index.tsx   |   2 +
 3 files changed, 140 insertions(+)
 create mode 100644 frontend/src/pages/Bucket/BucketDetail/Comment/Comment.tsx
 create mode 100644 frontend/src/pages/Bucket/BucketDetail/Comment/CommentList.tsx

diff --git a/frontend/src/pages/Bucket/BucketDetail/Comment/Comment.tsx b/frontend/src/pages/Bucket/BucketDetail/Comment/Comment.tsx
new file mode 100644
index 00000000..ee4fc7b8
--- /dev/null
+++ b/frontend/src/pages/Bucket/BucketDetail/Comment/Comment.tsx
@@ -0,0 +1,36 @@
+import UserProfile from '../../../../components/UserProfile'
+import { ICommentItem, TimeUnitType } from '../../../../interfaces'
+
+const getTime = (time: number, timeUnit: TimeUnitType): string => {
+	switch (timeUnit) {
+		case 'min':
+			return time > 0 ? `${time}분 전` : '방금 전'
+		case 'hour':
+			return time + '시간 전'
+		case 'day':
+			return time + '일 전'
+		case 'month':
+			return time + '달 전'
+		case 'year':
+			return time + '년 전'
+		default:
+			return '방금 전'
+	}
+}
+
+interface ICommentProps {
+	commentInfo: ICommentItem
+}
+
+const Comment = ({ commentInfo }: ICommentProps) => {
+	return (
+		<div className="flex flex-col">
+			{/* //Todo: comment 유저로 정보 변경 필요 */}
+			<UserProfile type="comment" userInfo={commentInfo.writer} />
+			<p className="text-[10px] ml-11">{getTime(commentInfo.time, commentInfo.timeUnit)}</p>
+			<p className="text-xs ml-11">{commentInfo.context}</p>
+		</div>
+	)
+}
+
+export default Comment
diff --git a/frontend/src/pages/Bucket/BucketDetail/Comment/CommentList.tsx b/frontend/src/pages/Bucket/BucketDetail/Comment/CommentList.tsx
new file mode 100644
index 00000000..a2164b05
--- /dev/null
+++ b/frontend/src/pages/Bucket/BucketDetail/Comment/CommentList.tsx
@@ -0,0 +1,102 @@
+import Comment from './Comment'
+import { ICommentItem } from '../../../../interfaces'
+
+const commentInfo = {
+	totalPages: 0,
+	totalElements: 0,
+	size: 0,
+	content: [
+		{
+			id: 1,
+			context: '10만이 엊그제 같은데... 벌써 20만이라니...',
+			writer: {
+				userId: 1,
+				userProfileImage: 'url',
+				userNickname: '서준호',
+				bucketId: 2,
+				bucketTitle: '구독자 100만명 달성하기',
+				color: 'mint',
+				isAchieved: false,
+				isFollowing: false,
+			},
+			numberOfLikes: 1,
+			timeUnit: 'min',
+			time: 3,
+			createdDate: '2023-12-29 10:34',
+			updatedDate: '2023-12-29 10:34',
+		},
+		{
+			id: 1,
+			context: '10만이 엊그제 같은데... 벌써 20만이라니...',
+			writer: {
+				userId: 1,
+				userProfileImage: 'url',
+				userNickname: '서준호',
+				bucketId: 2,
+				bucketTitle: '구독자 100만명 달성하기',
+				color: 'mint',
+				isAchieved: false,
+				isFollowing: false,
+			},
+			numberOfLikes: 1,
+			timeUnit: 'min',
+			time: 3,
+			createdDate: '2023-12-29 10:34',
+			updatedDate: '2023-12-29 10:34',
+		},
+		{
+			id: 1,
+			context: '10만이 엊그제 같은데... 벌써 20만이라니...',
+			writer: {
+				userId: 1,
+				userProfileImage: 'url',
+				userNickname: '서준호',
+				bucketId: 2,
+				bucketTitle: '구독자 100만명 달성하기',
+				color: 'mint',
+				isAchieved: false,
+				isFollowing: false,
+			},
+			numberOfLikes: 1,
+			timeUnit: 'min',
+			time: 3,
+			createdDate: '2023-12-29 10:34',
+			updatedDate: '2023-12-29 10:34',
+		},
+	],
+	number: 0,
+	sort: {
+		empty: true,
+		unsorted: true,
+		sorted: true,
+	},
+	pageable: {
+		offset: 0,
+		sort: {
+			empty: true,
+			unsorted: true,
+			sorted: true,
+		},
+		paged: true,
+		unpaged: true,
+		pageNumber: 0,
+		pageSize: 0,
+	},
+	numberOfElements: 0,
+	first: true,
+	last: true,
+	empty: true,
+}
+
+// Todo : Api 데이터 타입 지정 후 as 삭제 예정
+const CommentList = () => {
+	return (
+		<ul>
+			{commentInfo.content.map((comment) => (
+				<Comment commentInfo={comment as ICommentItem} />
+			))}
+		</ul>
+	)
+}
+
+export default CommentList
diff --git a/frontend/src/pages/Bucket/BucketDetail/index.tsx b/frontend/src/pages/Bucket/BucketDetail/index.tsx
index b22d909c..fc9bf6a3 100644
--- a/frontend/src/pages/Bucket/BucketDetail/index.tsx
+++ b/frontend/src/pages/Bucket/BucketDetail/index.tsx
@@ -11,6 +11,7 @@ import AchieveDreamButton from './AcheiveDreamButton'
 import WriteReviewButton from './WriteReviewButton'
 import { useParams } from 'react-router-dom'
 import Reaction from './Reaction'
+import CommentList from './Comment/CommentList'
 
 const userInfo: UserInfoType = {
 	userId: 1,
@@ -95,6 +96,7 @@ const BucketDetail = () => {
 						: bucketId && <WriteReviewButton id={bucketId} />}
 				</div>
 				<Reaction />
+				<CommentList />
 			</WithHeaderLayout>
 		</>
 	)