diff --git a/frontend/src/components/Review/ReviewItem/ReviewItem.tsx b/frontend/src/components/Review/ReviewItem/ReviewItem.tsx index 12b7dca6..7b231d58 100644 --- a/frontend/src/components/Review/ReviewItem/ReviewItem.tsx +++ b/frontend/src/components/Review/ReviewItem/ReviewItem.tsx @@ -7,6 +7,7 @@ import ReactedIcon from '@/assets/svg/reacted_icon.svg'; import UnReactedIcon from '@/assets/svg/un_reacted_icon.svg'; import StarRatingDisplay from '@/components/@common/StarRating/StarRatingDisplay/StartRatingDisplay'; import SuspendedImg from '@/components/@common/SuspendedImg/SuspendedImg'; +import { getPetAge } from '@/components/PetProfile/PetItem'; import { COMMENT_VISIBLE_LINE_LIMIT, REACTIONS } from '@/constants/review'; import { useValidParams } from '@/hooks/@common/useValidParams'; import { useCheckAuth } from '@/hooks/auth'; @@ -79,7 +80,7 @@ const ReviewItem = (reviewItemProps: ReviewItemProps) => { {petName} - {breedName} / {writtenAge}살 + {breedName} / {getPetAge(writtenAge)} {sizeName} / {writtenWeight}kg @@ -280,8 +281,9 @@ const Comment = styled.p>` ${({ $isExpanded }) => { if ($isExpanded) { return css` - overflow: 'visible'; display: block; + + word-break: break-word; `; } diff --git a/frontend/src/components/Review/ReviewListAndChart/ReviewList/ReviewList.tsx b/frontend/src/components/Review/ReviewListAndChart/ReviewList/ReviewList.tsx index 6aebc941..1617d628 100644 --- a/frontend/src/components/Review/ReviewListAndChart/ReviewList/ReviewList.tsx +++ b/frontend/src/components/Review/ReviewListAndChart/ReviewList/ReviewList.tsx @@ -76,6 +76,8 @@ ReviewList.Skeleton = Skeleton; export default ReviewList; const Layout = styled.ul` + margin-bottom: 10rem; + & > li { border-bottom: 1px solid ${({ theme }) => theme.color.grey200}; } diff --git a/frontend/src/pages/FoodDetail/FoodDetail.tsx b/frontend/src/pages/FoodDetail/FoodDetail.tsx index ebcc8639..06a8f3c5 100644 --- a/frontend/src/pages/FoodDetail/FoodDetail.tsx +++ b/frontend/src/pages/FoodDetail/FoodDetail.tsx @@ -123,7 +123,7 @@ const FoodDetail = () => { export default FoodDetail; const FoodDetailWrapper = styled.div` - padding: 4rem 0 12rem; + padding: 4rem 0 16rem; `; const FoodProfileContainer = styled.div`