@@ -1,11 +1,11 @@
 import DeleteIcon from '@/components/DeleteIcon';
 import { textEllipsis } from '@/styles/GlobalStyles';
 import { Review } from '@/types/reviewType';
-import { dateToString } from '@/utils/dataToString';
 
 import { css } from '@emotion/react';
 import Rating from '@/components/Rating';
 import Profile from '../Profile';
+import { formatDate } from '@/utils/format';
 
 interface ReviewCardProps {
   review: Review;
@@ -24,41 +24,51 @@ const ReviewCard = ({
   showDate,
   showDelete,
 }: ReviewCardProps) => {
+  // console.log(review.imgSrc.map((src, index) => src);
   return (
     <div css={reviewStyle}>
       <div className="titleStyle">
         <div className="titleText">
           {showUser && review.user && (
             <div css={userProfileStyles}>
               <div className="profile-container">
-                {review.imgSrc && <Profile url={review.imgSrc} size="40px" />}
+                <Profile url={review.user.userProfileImage} size="30px" />
                 <div className="user-info">
                   <div className="name-rating">
                     <div className="name">{review.user.socialName}</div>
                   </div>
                   <p className="createAt">
-                    {review?.createdAt instanceof Date ? dateToString(review.createdAt) : ''}
+                    {review?.createdAt ? formatDate(review.createdAt) : ''}
                   </p>
                 </div>
               </div>
             </div>
           )}
           {showTitle && review?.title && <h2>{review.title}</h2>}
           {showDate && (
-            <p className="createAt">
-              {review?.createdAt instanceof Date ? dateToString(review.createdAt) : ''}
-            </p>
+            <p className="createAt">{review?.createdAt ? formatDate(review.createdAt) : ''}</p>
           )}
           <div className="ratingContainer">
             <Rating rating={Number(review.rating)} />
           </div>
         </div>
         {showDelete && <DeleteIcon onDelete={onDelete || (() => {})} />}
       </div>
-      <div className="imgContainer">
-        <img src={review.imgSrc} alt="review" />
+      <div
+        css={css`
+          display: flex;
+          gap: 10px;
+        `}
+      >
+        {Array.isArray(review.imgSrc) &&
+          review.imgSrc.length > 0 &&
+          review.imgSrc.map((src, index) => (
+            <div key={index + src} className="imgContainer">
+              <img src={src} alt="리뷰 이미지" />
+            </div>
+          ))}
       </div>
-      <p css={textEllipsis(3)}>{review.content}</p>
+      <p css={textEllipsis(4)}>{review.content}</p>
     </div>
   );
 };
@@ -98,6 +108,7 @@ const userProfileStyles = css`
 const reviewStyle = css`
   border-radius: 10px;
   width: 100%;
+  min-width: 530px;
   background-color: #f8f8f8;
   padding: 10px 15px 15px 15px;
   margin-bottom: 20px;
@@ -129,12 +140,13 @@ const reviewStyle = css`
     border-radius: 5px;
     overflow: hidden;
   }
+
   img {
     width: 100%;
   }
 
   .ratingContainer {
-    transform: translateY(-0.8px);
+    transform: translateY(-0.36vh);
   }
 
   .createAt {

리뷰: _:warning: Potential issue_

**이미지 렌더링 시 key prop이 잘못된 위치에 있습니다.**

현재 `key` prop이 `img` 태그에 있지만, map 함수의 최상위 요소인 `div`로 이동해야 합니다. 또한, 이미지 URL을 key로 사용하는 것이 index보다 더 안정적입니다.


```diff
  {Array.isArray(review.imgSrc) &&
    review.imgSrc.length > 0 &&
    review.imgSrc.map((src, index) => (
-     <div className="imgContainer">
-       <img key={index} src={src} alt="리뷰 이미지" />
+     <div key={src} className="imgContainer">
+       <img src={src} alt="리뷰 이미지" />
      </div>
    ))}
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
        {Array.isArray(review.imgSrc) &&
          review.imgSrc.length > 0 &&
          review.imgSrc.map((src, index) => (
            <div key={src} className="imgContainer">
              <img src={src} alt="리뷰 이미지" />
            </div>
          ))}
`````

</details>

<!-- suggestion_end -->

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 66-66: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation. 

(lint/correctness/useJsxKeyInIterable)

</details>

</details>

<!-- This is an auto-generated comment by CodeRabbit -->