[FE] Feat #133: 댓글(Comment) 및 댓글리스트(CommentList) 컴포넌트 제작

Change-Id: Ia3c9da2afb69bf26847e757bcb27f200d5edf780

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

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

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>
 		</>
 	)