feat: 댓글 시간 포매팅 구현

codeit-bootcamp-frontend · Jul 7, 2024 · 4062c4b · 4062c4b
1 parent 8f0e149
commit 4062c4b
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 13 deletions.
diff --git a/src/components/ItemComments.js b/src/components/ItemComments.js
@@ -6,6 +6,7 @@ import { ReactComponent as GoBackIcon } from '../assets/ic_back.svg';
 import emptyCommentPanda from "../assets/Img_inquiry_empty.png"
 import { useNavigate } from "react-router-dom";
 import LoadingErrorHandler from "./LoadingErrorHandler";
+import formatComparedTime from "../utils/formatComparedTime";
 
 const COMMENTS_LIMIT = 5;
 
@@ -60,18 +61,21 @@ function Comments({ comments }) {
 
     return (
         <ul className={styles.commentsList}>
-                {comments.map((comment) => 
-                    <li className={styles.comment} key={comment.id}>
-                        <span className={styles.commentContent}>{comment.content}</span>
-                        <div className={styles.commentInfo}>
-                            <img src={comment.writer.image} alt={comment.writer.nickname} className={styles.commentInfoImage} />
-                            <div className={styles.commentInfoTexts}>
-                                <span className={styles.commentInfoNickname}>{comment.writer.nickname}</span>
-                                <span className={styles.commentInfoUpdatedAt}>{comment.updatedAt}</span>
+                {comments.map((comment) => {
+                    const dateFormat = formatComparedTime(comment.updatedAt);
+
+                    return (
+                        <li className={styles.comment} key={comment.id}>
+                            <span className={styles.commentContent}>{comment.content}</span>
+                            <div className={styles.commentInfo}>
+                                <img src={comment.writer.image} alt={comment.writer.nickname} className={styles.commentInfoImage} />
+                                <div className={styles.commentInfoTexts}>
+                                    <span className={styles.commentInfoNickname}>{comment.writer.nickname}</span>
+                                    <span className={styles.commentInfoUpdatedAt}>{dateFormat}</span>
+                                </div>
                             </div>
-                        </div>
-                    </li>
-                )}
+                        </li>
+                    )})}
             </ul>
     )
 }

diff --git a/src/components/ItemInfo.js b/src/components/ItemInfo.js
@@ -3,8 +3,6 @@ import { ReactComponent as HeartIcon } from '../assets/ic_heart.svg';
 
 function ItemInfo({ item }) {
 
-    console.log(item.images);
-
     return (
         <section className={styles.itemInfo}>
             <div className={styles.itemImageContainer}>

diff --git a/src/utils/compareTime.js b/src/utils/compareTime.js
@@ -0,0 +1,8 @@
+function compareTime(targetTime) {
+    const target = Date.parse(targetTime);
+    const now = Date.now();
+
+    return now - target;
+}
+
+export default compareTime;
diff --git a/src/utils/formatComparedTime.js b/src/utils/formatComparedTime.js
@@ -0,0 +1,36 @@
+import compareTime from "./compareTime";
+
+const SEC = 1000;
+const MIN = 60 * SEC;
+const HOUR = 60 * MIN;
+const DAY = 24 * HOUR;
+
+function fitDigits(num) {
+    if (num < 10) return `0${num}`;
+    else return num;
+}
+
+function formatComparedTime(targetTime) {
+    const comparedTime = compareTime(targetTime);
+
+    if(comparedTime > 7 * DAY) {
+        const date = new Date(targetTime);
+        const hour = fitDigits(date.getHours());
+        const min = fitDigits(date.getMinutes());
+        const dateFormat = `${date.getFullYear()}년 ${date.getMonth() + 1}월 ${date.getDate()}일 ${hour}:${min}`;
+
+        return dateFormat;
+    }
+
+    else if(comparedTime > 2 * DAY) return `${comparedTime / DAY}일 전`;
+
+    else if(comparedTime > DAY) return "어제";
+
+    else if(comparedTime > HOUR) return `${comparedTime / HOUR}시간 전`;
+
+    else if(comparedTime > MIN) return `${compareTime / MIN}분 전`;
+
+    else return "방금 전";
+}
+
+export default formatComparedTime;