fix: 0살이면 1살 미만으로 뜨도록 수정, 리뷰 더보기 클릭이 안되는 문제 해결 (#512)

* fix/#511: 리뷰 목록 하단 margin 추가

- 리뷰 더보기 클릭이 안되는 문제 해결

* feat/#511: 0살이면 1살 미만으로 뜨도록 수정

* feat/#511: 상품상세 하단 margin 추가

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) => {
           <InfoContainer>
             <ReviewerName>{petName}</ReviewerName>
             <InfoDetail>
-              {breedName} / {writtenAge}살
+              {breedName} / {getPetAge(writtenAge)}
             </InfoDetail>
             <InfoDetail>
               {sizeName} / {writtenWeight}kg
@@ -280,8 +281,9 @@ const Comment = styled.p<StyledProps<{ isExpanded: boolean }>>`
   ${({ $isExpanded }) => {
     if ($isExpanded) {
       return css`
-        overflow: 'visible';
         display: block;
+
+        word-break: break-word;
       `;
     }
 

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};
   }

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`