diff --git a/src/App.tsx b/src/App.tsx index 030880f3..c3e90c27 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -18,7 +18,7 @@ const App = () => { - + {/* */} ); }; diff --git a/src/components/DetailSectionBottom/ReviewItem.tsx b/src/components/DetailSectionBottom/ReviewItem.tsx index c11e040e..2ff1c349 100644 --- a/src/components/DetailSectionBottom/ReviewItem.tsx +++ b/src/components/DetailSectionBottom/ReviewItem.tsx @@ -151,51 +151,41 @@ const Item: React.FC = (props: ReviewInfoItemProps) => {
{!showMoreKeywords && - keywords.slice(0, 2).map((keyword, idx) => ( + keywords.slice(0, 1).map((keyword, idx) => (
{getEmoji(keyword.content)} {keyword.content}
))} - {keywords.length > 2 && !showMoreKeywords && ( + {keywords.length > 1 && !showMoreKeywords && (
{ handleClickPlusButton(e); }}> - +{keywords.length - 2} + +{keywords.length - 1}
)}
+
- {showMoreKeywords && - Array.from({ length: Math.ceil(keywords.length / 2) }).map( - (_, lineIdx) => ( + {showMoreKeywords && ( +
+ {keywords.map((keyword, idx) => (
- {keywords - .slice(lineIdx * 2, lineIdx * 2 + 2) - .map((keyword, idx) => ( -
- {getEmoji(keyword.content)} {keyword.content} -
- ))} + key={idx} + className="rounded-md bg-gray1 px-2 py-1 text-xs text-gray6"> + {getEmoji(keyword.content)} {keyword.content}
- ), - )} + ))} +
+ )}
-
+
-
{commentCount}
+
{commentCount}
diff --git a/src/components/Review/CommentItem.tsx b/src/components/Review/CommentItem.tsx index c74ff1c5..929621b9 100644 --- a/src/components/Review/CommentItem.tsx +++ b/src/components/Review/CommentItem.tsx @@ -44,7 +44,7 @@ const CommentItem: React.FC = (props: CommentItemProps) => { }; return ( -
+
{!( diff --git a/src/components/Review/ReviewComments.tsx b/src/components/Review/ReviewComments.tsx index 05dd0244..fbf4858b 100644 --- a/src/components/Review/ReviewComments.tsx +++ b/src/components/Review/ReviewComments.tsx @@ -85,7 +85,7 @@ export default function ReviewComments() { 댓글 {commentDataLength}
-
+
{commentDataLength == 0 && (
diff --git a/src/components/Review/ReviewKeyword.tsx b/src/components/Review/ReviewKeyword.tsx index d6c24780..c33d7323 100644 --- 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 ( <>
어떤 점이 좋았나요?
-
- {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, - ); +
+ {reviewKeywords?.data?.data?.keywords?.map((keyword: Keyword) => { + const isSelected = selectedKeywords.some( + (selectedKeyword) => + selectedKeyword.keywordId === keyword.keywordId, + ); - return ( - - ); - }, - )} + return ( + + ); + })}
); diff --git a/src/components/common/nav/InputComment.tsx b/src/components/common/nav/InputComment.tsx index 00a343dc..ebaad8f5 100644 --- a/src/components/common/nav/InputComment.tsx +++ b/src/components/common/nav/InputComment.tsx @@ -106,12 +106,11 @@ export const InputComment: React.FC = () => { }; return ( -
-
+
+