@@ -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 {

리뷰: _:hammer_and_wrench: Refactor suggestion_

**모바일 환경을 고려한 반응형 디자인이 필요합니다.**

`min-width: 530px`는 모바일 기기에서 가로 스크롤을 발생시킬 수 있습니다. 미디어 쿼리를 사용하여 모바일 환경에서는 다른 값을 적용하는 것이 좋겠습니다.


```diff
const reviewStyle = css`
-  min-width: 530px;
+  width: 100%;
+  @media (min-width: 530px) {
+    min-width: 530px;
+  }
```


<!-- 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
  width: 100%;
  @media (min-width: 530px) {
    min-width: 530px;
  }
`````

</details>

<!-- suggestion_end -->

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