From 834c5bf1cb95a49a5923dc812500ad85aee18639 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=B5=9C=ED=98=9C=EB=A0=B9?= <chex1004@gmail.com>
Date: Thu, 19 Oct 2023 21:49:43 +0900
Subject: [PATCH] =?UTF-8?q?fix:=200=EC=82=B4=EC=9D=B4=EB=A9=B4=201?=
 =?UTF-8?q?=EC=82=B4=20=EB=AF=B8=EB=A7=8C=EC=9C=BC=EB=A1=9C=20=EB=9C=A8?=
 =?UTF-8?q?=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95,=20=EB=A6=AC=EB=B7=B0?=
 =?UTF-8?q?=20=EB=8D=94=EB=B3=B4=EA=B8=B0=20=ED=81=B4=EB=A6=AD=EC=9D=B4=20?=
 =?UTF-8?q?=EC=95=88=EB=90=98=EB=8A=94=20=EB=AC=B8=EC=A0=9C=20=ED=95=B4?=
 =?UTF-8?q?=EA=B2=B0=20(#512)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

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

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

* feat/#511: 상품상세 하단 margin 추가
---
 frontend/src/components/Review/ReviewItem/ReviewItem.tsx    | 6 ++++--
 .../Review/ReviewListAndChart/ReviewList/ReviewList.tsx     | 2 ++
 frontend/src/pages/FoodDetail/FoodDetail.tsx                | 2 +-
 3 files changed, 7 insertions(+), 3 deletions(-)

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) => {
           <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;
       `;
     }
 
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`