Merge pull request #284 from WePlanPlans/FE-100--feat/DesignQA

디자인 2차 QA
WePlanPlans · Jan 27, 2024 · c69676a · c69676a
2 parents 4697648 + dec57c5
commit c69676a
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 58 deletions.
diff --git a/src/components/DetailSectionBottom/ReviewItem.tsx b/src/components/DetailSectionBottom/ReviewItem.tsx
@@ -151,51 +151,41 @@ const Item: React.FC<ReviewInfoItemProps> = (props: ReviewInfoItemProps) => {
       <div className="flex items-center ">
         <div className="flex gap-2">
           {!showMoreKeywords &&
-            keywords.slice(0, 2).map((keyword, idx) => (
+            keywords.slice(0, 1).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 && (
+          {keywords.length > 1 && !showMoreKeywords && (
             <div
               className="rounded-md bg-gray1 px-2 py-1 text-xs text-gray6"
               onClick={(e) => {
                 handleClickPlusButton(e);
               }}>
-              +{keywords.length - 2}
+              +{keywords.length - 1}
             </div>
           )}
         </div>
+
         <div>
-          {showMoreKeywords &&
-            Array.from({ length: Math.ceil(keywords.length / 2) }).map(
-              (_, lineIdx) => (
+          {showMoreKeywords && (
+            <div className="flex flex-wrap gap-2">
+              {keywords.map((keyword, idx) => (
                 <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>
-                    ))}
+                  key={idx}
+                  className="rounded-md bg-gray1 px-2 py-1 text-xs text-gray6">
+                  {getEmoji(keyword.content)} {keyword.content}
                 </div>
-              ),
-            )}
+              ))}
+            </div>
+          )}
         </div>
 
-        <div className="ml-auto mr-2 flex ">
+        <div className="ml-auto mr-2 flex flex items-center ">
           <ChatIcon size={20} color="#5E5E5E" />
-          <div className="ml-1 text-gray5">{commentCount}</div>
+          <div className="ml-1.5 text-gray5">{commentCount}</div>
         </div>
       </div>
     </div>

diff --git a/src/components/Review/CommentItem.tsx b/src/components/Review/CommentItem.tsx
@@ -44,7 +44,7 @@ const CommentItem: React.FC<CommentItemProps> = (props: CommentItemProps) => {
   };
 
   return (
-    <div className="border-b border-solid border-gray-300 py-[13px]">
+    <div className="border-b border-solid border-gray2 py-[13px]">
       <div className=" flex items-center">
         <div className="mr-4">
           {!(

diff --git a/src/components/Review/ReviewComments.tsx b/src/components/Review/ReviewComments.tsx
@@ -85,7 +85,7 @@ export default function ReviewComments() {
         댓글
         <span className="pl-1 font-bold">{commentDataLength}</span>
       </div>
-      <div className="h-[8px] bg-gray1"></div>
+      <div className="ml-[-20px] mr-[-20px] h-[8px] bg-gray1"></div>
       <div className="flex flex-col">
         {commentDataLength == 0 && (
           <div className="mt-10 flex flex-col items-center justify-center text-sm text-gray4">

diff --git a/src/components/Review/ReviewKeyword.tsx b/src/components/Review/ReviewKeyword.tsx
@@ -45,38 +45,29 @@ export default function ReviewKeyword() {
     }
   };
 
-  // 5x2 형태로 배치하기 위해 행(row)과 열(column)을 계산
-  // const rows = 5;
-  const columns = 2;
-
   return (
     <>
       <div className="mb-5 text-lg font-bold">어떤 점이 좋았나요? </div>
-      <div className="text-md mb-10 grid grid-cols-2 gap-2 font-bold">
-        {reviewKeywords?.data?.data?.keywords?.map(
-          (keyword: Keyword, index: number) => {
-            const row = Math.floor(index / columns) + 1;
-            const col = (index % columns) + 1;
-
-            const isSelected = selectedKeywords.some(
-              (selectedKeyword) =>
-                selectedKeyword.keywordId === keyword.keywordId,
-            );
+      <div className="mb-10  flex  flex-wrap gap-2 text-[14px] font-bold">
+        {reviewKeywords?.data?.data?.keywords?.map((keyword: Keyword) => {
+          const isSelected = selectedKeywords.some(
+            (selectedKeyword) =>
+              selectedKeyword.keywordId === keyword.keywordId,
+          );
 
-            return (
-              <button
-                className={`flex items-center justify-center row-${row} col-${col} h-[40px] cursor-pointer rounded-md ${
-                  isSelected
-                    ? 'bg-[#062139] text-white'
-                    : 'bg-gray-100 text-gray-500'
-                } px-2 py-1`}
-                key={keyword.keywordId}
-                onClick={() => handleKeywordClick(keyword)}>
-                {keyword.content}
-              </button>
-            );
-          },
-        )}
+          return (
+            <button
+              className={`h-[40px] cursor-pointer items-center justify-center rounded-[30px] ${
+                isSelected
+                  ? 'bg-[#062139] text-white'
+                  : 'bg-gray-100 text-gray-500'
+              } px-[14px] py-[8px]`}
+              key={keyword.keywordId}
+              onClick={() => handleKeywordClick(keyword)}>
+              {keyword.content}
+            </button>
+          );
+        })}
       </div>
     </>
   );

diff --git a/src/components/common/nav/InputComment.tsx b/src/components/common/nav/InputComment.tsx
@@ -106,12 +106,11 @@ export const InputComment: React.FC<InputCommentProps> = () => {
   };
 
   return (
-    <div className="fixed bottom-0 mt-auto flex flex h-[64px] w-full items-center justify-center border  border-solid border-[#EDEDED] bg-white ">
-      <div className="ml-4 mr-4 flex h-[40px] w-[375px] items-center  rounded-md border border-solid border-[#EDEDED]">
+    <div className="fixed bottom-0 flex h-[64px] w-full  max-w-[412px] items-center justify-center border border-solid border-[#EDEDED] bg-white">
+      <div className="ml-4 mr-4 flex h-[40px] w-full items-center  rounded-md border border-solid border-[#EDEDED]">
         <div className="pl-1 pr-0.5 text-sm font-bold text-[#29ddf6]">ㅣ</div>
         <div className="flex  w-full ">
           <input
-            // ref={inputRef}
             type="text"
             placeholder="댓글을 입력하세요"
             className=" w-full max-w-full text-sm placeholder-[#d7d7d7]  outline-none"