Fix: 리뷰/댓글 디자인 개선

WePlanPlans · Jan 11, 2024 · 6dbb7f6 · 6dbb7f6
1 parent f4b510d
commit 6dbb7f6
Show file tree

Hide file tree

Showing 4 changed files with 101 additions and 102 deletions.
diff --git a/src/components/DetailSectionBottom/ReviewItem.tsx b/src/components/DetailSectionBottom/ReviewItem.tsx
@@ -111,25 +111,25 @@ const Item: React.FC<ItemProps> = (props: ItemProps) => {
   };
 
   return (
-    <>
-      <div className="cursor-pointer pb-4" onClick={onClick}>
-        <div className=" mb-5 flex items-center">
-          <div className="mr-2">
-            {!(
-              authorProfileImageUrl === 'http://asiduheimage.jpg' ||
-              authorProfileImageUrl === null
-            ) ? (
-              <img
-                src={authorProfileImageUrl}
-                alt="유저 프로필"
-                className="w-12 rounded-full"
-              />
-            ) : (
-              <NullUser className="" />
-            )}
-          </div>
-          <div className=" mr-2 flex flex-col gap-1">
-            <div className="font-bold">{authorNickname}</div>
+    <div className="cursor-pointer pb-6" onClick={onClick}>
+      <div className=" mb-5 flex items-center">
+        <div className="mr-2">
+          {!(
+            authorProfileImageUrl === 'http://asiduheimage.jpg' ||
+            authorProfileImageUrl === null
+          ) ? (
+            <img
+              src={authorProfileImageUrl}
+              alt="유저 프로필"
+              className="h-[60px] w-[60px] rounded-full"
+            />
+          ) : (
+            <NullUser />
+          )}
+        </div>
+        <div className=" mr-2 flex flex-col gap-1">
+          <div className="font-bold">{authorNickname}</div>
+          <div className="flex gap-2">
             <div className="flex">
               {Array.from({ length: 5 }, (_, index) => (
                 <StarIcon
@@ -141,78 +141,79 @@ const Item: React.FC<ItemProps> = (props: ItemProps) => {
                 />
               ))}
             </div>
+            <div className="text-sm text-gray4">
+              {formatCreatedTime(createdTime)}
+            </div>
           </div>
-          <div className="mb-0.5 mt-auto text-sm text-gray4">
-            {formatCreatedTime(createdTime)}
+        </div>
+
+        {isAuthor && (
+          <div
+            className="ml-auto cursor-pointer"
+            onClick={(e) => openModal('내 리뷰', reviewId, e)}>
+            <MoreIcon fill="#888888" color="none" />
           </div>
-          {isAuthor && (
+        )}
+      </div>
+      {canTextOverflow ? (
+        <div className="mb-4 ml-1 max-h-12 text-gray7">
+          {content.length > 55 ? `${content.slice(0, 55)}...` : content}
+        </div>
+      ) : (
+        <div className="mb-4 text-gray7">{content}</div>
+      )}
+
+      <div className="flex items-center ">
+        <div className="flex gap-2">
+          {!showMoreKeywords &&
+            keywords.slice(0, 2).map((keyword, idx) => (
+              <div
+                key={idx}
+                className="rounded-md bg-gray1 px-2 py-1 text-xs text-gray6">
+                {getEmoji(keyword.content)} {keyword.content}
+              </div>
+            ))}
+          {keywords.length > 2 && !showMoreKeywords && (
             <div
-              className="ml-auto cursor-pointer"
-              onClick={(e) => openModal('내 리뷰', reviewId, e)}>
-              <MoreIcon fill="#888888" color="none" />
+              className="rounded-md bg-gray1 px-2 py-1 text-xs text-gray6"
+              onClick={(e) => {
+                handleClickPlusButton(e);
+              }}>
+              +{keywords.length - 2}
             </div>
           )}
         </div>
-        {canTextOverflow ? (
-          <div className="mb-4 max-h-12 overflow-hidden text-gray7">
-            {content.length > 75 ? `${content.slice(0, 75)}...` : content}
-          </div>
-        ) : (
-          <div className="mb-4 text-gray7">{content}</div>
-        )}
-
-        <div className="flex items-center ">
-          <div className="flex gap-2">
-            {!showMoreKeywords &&
-              keywords.slice(0, 2).map((keyword, idx) => (
+        <div>
+          {showMoreKeywords &&
+            Array.from({ length: Math.ceil(keywords.length / 2) }).map(
+              (_, lineIdx) => (
                 <div
-                  key={idx}
-                  className="rounded-md bg-gray1 px-2 py-1 text-xs text-gray6">
-                  {getEmoji(keyword.content)} {keyword.content}
+                  key={lineIdx}
+                  className={`flex gap-2 ${
+                    lineIdx === Math.ceil(keywords.length / 2) - 1
+                      ? ''
+                      : ' mb-3'
+                  }`}>
+                  {keywords
+                    .slice(lineIdx * 2, lineIdx * 2 + 2)
+                    .map((keyword, idx) => (
+                      <div
+                        key={idx}
+                        className="rounded-md bg-gray1 px-2 py-1 text-xs text-gray6">
+                        {getEmoji(keyword.content)} {keyword.content}
+                      </div>
+                    ))}
                 </div>
-              ))}
-            {keywords.length > 2 && !showMoreKeywords && (
-              <div
-                className="rounded-md bg-gray1 px-2 py-1 text-xs text-gray6"
-                onClick={(e) => {
-                  handleClickPlusButton(e);
-                }}>
-                +{keywords.length - 2}
-              </div>
+              ),
             )}
-          </div>
-          <div>
-            {showMoreKeywords &&
-              Array.from({ length: Math.ceil(keywords.length / 2) }).map(
-                (_, lineIdx) => (
-                  <div
-                    key={lineIdx}
-                    className={`flex gap-2 ${
-                      lineIdx === Math.ceil(keywords.length / 2) - 1
-                        ? ''
-                        : ' mb-3'
-                    }`}>
-                    {keywords
-                      .slice(lineIdx * 2, lineIdx * 2 + 2)
-                      .map((keyword, idx) => (
-                        <div
-                          key={idx}
-                          className="rounded-md bg-gray1 px-2 py-1 text-xs text-gray6">
-                          {getEmoji(keyword.content)} {keyword.content}
-                        </div>
-                      ))}
-                  </div>
-                ),
-              )}
-          </div>
+        </div>
 
-          <div className="ml-auto mr-2 flex ">
-            <ChatIcon size={20} color="#5E5E5E" />
-            <div className="ml-1 text-gray5">{commentCount}</div>
-          </div>
+        <div className="ml-auto mr-2 flex ">
+          <ChatIcon size={20} color="#5E5E5E" />
+          <div className="ml-1 text-gray5">{commentCount}</div>
         </div>
       </div>
-    </>
+    </div>
   );
 };
 

diff --git a/src/components/Review/CommentItem.tsx b/src/components/Review/CommentItem.tsx
@@ -56,7 +56,7 @@ const CommentItem: React.FC<ItemProps> = (props: ItemProps) => {
 
   return (
     <div className="mb-4 border-t border-solid border-gray-300 pt-4">
-      <div className=" mb-2 flex items-center">
+      <div className=" flex items-center">
         <div className="mr-2">
           {!(
             authorProfileImageUrl === 'http://asiduheimage.jpg' ||
@@ -65,15 +65,15 @@ const CommentItem: React.FC<ItemProps> = (props: ItemProps) => {
             <img
               src={authorProfileImageUrl}
               alt="유저 프로필"
-              className="w-12 rounded-full"
+              className="w-[60px]rounded-full h-[60px]"
             />
           ) : (
-            <NullUser className="" />
+            <NullUser />
           )}
         </div>
         <div className=" flex flex-col justify-center gap-1">
           <div className="text-sm font-bold">{authorNickname}</div>
-          <div className="text-xs text-gray4">
+          <div className="text-sm text-gray4">
             {formatCreatedTime(createdTime)}
           </div>
         </div>
@@ -85,7 +85,7 @@ const CommentItem: React.FC<ItemProps> = (props: ItemProps) => {
           </div>
         )}
       </div>
-      <div className="mb-4 ml-11 w-60 text-sm text-gray7">{content}</div>
+      <div className="ml-14 w-[275px] pl-3 text-sm text-gray7">{content}</div>
     </div>
   );
 };

diff --git a/src/components/Review/DetailReview.tsx b/src/components/Review/DetailReview.tsx
@@ -8,21 +8,19 @@ export default function DetailReview() {
   const { item, tourItemId } = state;
 
   return (
-    <div className="mb-6 ">
-      <ReviewItem
-        key={item.reviewId}
-        reviewId={item.reviewId}
-        authorNickname={item.authorNickname}
-        authorProfileImageUrl={item.authorProfileImageUrl}
-        rating={item.rating}
-        createdTime={item.createdTime}
-        content={item.content}
-        keywords={item.keywords} // keywordId, content, type
-        commentCount={item.commentCount}
-        tourItemId={tourItemId}
-        canTextOverflow={false}
-        isAuthor={item.isAuthor}
-      />
-    </div>
+    <ReviewItem
+      key={item.reviewId}
+      reviewId={item.reviewId}
+      authorNickname={item.authorNickname}
+      authorProfileImageUrl={item.authorProfileImageUrl}
+      rating={item.rating}
+      createdTime={item.createdTime}
+      content={item.content}
+      keywords={item.keywords} // keywordId, content, type
+      commentCount={item.commentCount}
+      tourItemId={tourItemId}
+      canTextOverflow={false}
+      isAuthor={item.isAuthor}
+    />
   );
 }
diff --git a/src/components/Review/ReviewComments.tsx b/src/components/Review/ReviewComments.tsx
@@ -63,9 +63,9 @@ export default function ReviewComments() {
 
   return (
     <>
-      <div className="mb-4 text-xs">
+      <div className="mb-4 text-sm">
         댓글
-        <span className="pl-0.5 font-bold">{commentDataLength}</span>
+        <span className="pl-1 font-bold">{commentDataLength}</span>
       </div>
       <div className="flex flex-col">
         {commentDataLength == 0 && (