feat: 음식점 카드에서 좋아요 갯수 보여주기 (#516)

woowacourse-teams · Sep 25, 2023 · aac27d1 · aac27d1
1 parent 0661113
commit aac27d1
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 4 deletions.
diff --git a/frontend/src/components/RestaurantCard/RestaurantCard.tsx b/frontend/src/components/RestaurantCard/RestaurantCard.tsx
@@ -20,7 +20,7 @@ interface RestaurantCardProps {
 }
 
 function RestaurantCard({ restaurant, celebs, size, type = 'list', setHoveredId = () => {} }: RestaurantCardProps) {
-  const { id, images, name, roadAddress, category, phoneNumber } = restaurant;
+  const { id, images, name, roadAddress, category, phoneNumber, likeCount } = restaurant;
   const { isModalOpen, closeModal, toggleRestaurantLike, isLiked } = useToggleLikeNotUpdate(restaurant);
 
   const navigate = useNavigate();
@@ -59,6 +59,7 @@ function RestaurantCard({ restaurant, celebs, size, type = 'list', setHoveredId
             <StyledAddress>{phoneNumber}</StyledAddress>
           </StyledInfo>
           <StyledProfileImageSection>
+            <span>좋아요 {likeCount.toLocaleString()}개</span>
             {celebs && <ProfileImageList celebs={celebs} size={size} />}
           </StyledProfileImageSection>
         </StyledInfoSection>
@@ -123,12 +124,26 @@ const StyledAddress = styled.span`
 `;
 
 const StyledCategory = styled.span`
+  display: flex;
+  justify-content: space-between;
+
   color: var(--gray-3);
   font-size: ${FONT_SIZE.sm};
 `;
 
 const StyledProfileImageSection = styled.div`
-  align-self: flex-end;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-end;
+
+  min-width: fit-content;
+
+  & > span {
+    font-size: ${FONT_SIZE.sm};
+    font-weight: 700;
+    padding-top: 0.4rem;
+  }
 `;
 
 const LikeButton = styled.button`

diff --git a/frontend/src/components/RestaurantWishItem/RestaurantWishItem.tsx b/frontend/src/components/RestaurantWishItem/RestaurantWishItem.tsx
@@ -18,7 +18,7 @@ interface RestaurantWishItemProps {
 }
 
 function RestaurantWishItem({ restaurant, celebs }: RestaurantWishItemProps) {
-  const { id, images, name, roadAddress, category, phoneNumber } = restaurant;
+  const { id, images, name, roadAddress, category, phoneNumber, likeCount } = restaurant;
   const { isModalOpen, closeModal, isLiked, toggleRestaurantLike } = useToggleLikeNotUpdate(restaurant);
   const navigate = useNavigate();
 
@@ -47,6 +47,7 @@ function RestaurantWishItem({ restaurant, celebs }: RestaurantWishItemProps) {
             <StyledAddress>{phoneNumber}</StyledAddress>
           </StyledInfo>
           <StyledProfileImageSection>
+            <span>좋아요 {likeCount.toLocaleString()}개</span>
             {celebs && <ProfileImageList celebs={celebs} size="42px" />}
           </StyledProfileImageSection>
         </section>
@@ -109,7 +110,18 @@ const StyledCategory = styled.span`
 `;
 
 const StyledProfileImageSection = styled.div`
-  align-self: flex-end;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-end;
+
+  min-width: fit-content;
+
+  & > span {
+    font-size: ${FONT_SIZE.sm};
+    font-weight: 700;
+    padding-top: 0.4rem;
+  }
 `;
 
 const LikeButton = styled.button`