n시간전 구현 성공

src/pages/ProductDetail/CommentList.js

@@ -5,7 +5,7 @@ import "./CommentList.css";
 
 function CommentList() {
   const { productId } = useParams();
-  const [comment, setComment] = useState(null);
+  const [comment, setComment] = useState([]);
   const [error, setError] = useState(null);
 
   const fetchComment = useCallback(async () => {
@@ -29,22 +29,51 @@ function CommentList() {
     return <div>Loading...</div>;
   }
 
+  function formatRelativeTime(dateString) {
+    const dateObject = new Date(dateString);
+    const targetDate = dateObject.getTime();
+
+    const liveDateObject = new Date();
+    const now = liveDateObject.getTime();
+
+    const diff = now - targetDate;
+
+    const minutes = Math.floor(diff / (1000 * 60));
+    const hours = Math.floor(diff / (1000 * 60 * 60));
+    const days = Math.floor(diff / (1000 * 60 * 60 * 24));
+    const months = Math.floor(diff / (1000 * 60 * 60 * 24 * 30));
+
+    if (minutes < 60) {
+      return `${minutes}분 전`;
+    } else if (hours < 24) {
+      return `${hours}시간 전`;
+    } else if (days < 31) {
+      return `${days}일 전`;
+    } else {
+      return `${months}개월 전`;
+    }
+  }
+
   return (
     <div>
       {error && <p>Error: {error}</p>}
       <section className="commment-section">
         <ul>
-          {comment.map(({ id, content, updateAt, writer }) => (
+          {comment.map(({ id, content, updatedAt, writer }) => (
             <li key={id} className="comment-list-item">
-              <img
-                className="commment-writer-img"
-                src={writer.image}
-                alt="프로필 이미지"
-              />
-              <div className="detail-container">
+              <p className="commment-content">{content}</p>
+              <div className="commment-info-container">
+                <img
+                  className="commment-writer-img"
+                  src={writer.image}
+                  alt="프로필 이미지"
+                />
+
                 <h1 className="commment-writer">{writer.nickname}</h1>
-                <p className="commment-content">{content}</p>
-                <p className="commment-updateAt">{updateAt}</p>
+
+                <p className="commment-updateAt">
+                  {formatRelativeTime(updatedAt)}
+                </p>
               </div>
             </li>
           ))}