From c32eddb8a6c7852d1aa3674df60943a24321df62 Mon Sep 17 00:00:00 2001
From: gwansikk <seorit98@gmail.com>
Date: Mon, 13 May 2024 03:31:40 +0900
Subject: [PATCH] fix(member): component overflow (#133)

---
 .../src/components/common/Avatar/Avatar.tsx   |  1 +
 .../CommunityPostsSection.tsx                 |  2 +-
 .../BookDetailSection/BookDetailSection.tsx   | 21 +++++++------------
 .../LibraryNewBooksSection.tsx                |  1 +
 4 files changed, 11 insertions(+), 14 deletions(-)

diff --git a/apps/member/src/components/common/Avatar/Avatar.tsx b/apps/member/src/components/common/Avatar/Avatar.tsx
index b0c51c4d..10033c95 100644
--- a/apps/member/src/components/common/Avatar/Avatar.tsx
+++ b/apps/member/src/components/common/Avatar/Avatar.tsx
@@ -41,6 +41,7 @@ const Avatar = ({ className, src, size = 'md', roleLevel }: AvatarProps) => {
       <Image
         src={createImageUrl(src)}
         alt="avatar"
+        width={sizeStyled}
         className="rounded-full object-cover"
       />
     </div>
diff --git a/apps/member/src/components/community/CommunityPostsSection/CommunityPostsSection.tsx b/apps/member/src/components/community/CommunityPostsSection/CommunityPostsSection.tsx
index 80b9ada4..463fa820 100644
--- a/apps/member/src/components/community/CommunityPostsSection/CommunityPostsSection.tsx
+++ b/apps/member/src/components/community/CommunityPostsSection/CommunityPostsSection.tsx
@@ -44,7 +44,7 @@ const CommunityPostsSection = ({
   return (
     <Section className="space-y-2">
       {title && <Section.Header title={title} />}
-      <Section.Body>
+      <Section.Body className="overflow-auto">
         <Table head={TABLE_HEAD.COMMUNITY_DETAIL}>
           {data.totalItems === 0 ? (
             <Table.Row>
diff --git a/apps/member/src/components/library/BookDetailSection/BookDetailSection.tsx b/apps/member/src/components/library/BookDetailSection/BookDetailSection.tsx
index 81b8dce1..f3151d7b 100644
--- a/apps/member/src/components/library/BookDetailSection/BookDetailSection.tsx
+++ b/apps/member/src/components/library/BookDetailSection/BookDetailSection.tsx
@@ -1,5 +1,3 @@
-import { useCallback } from 'react';
-
 import { Badge, Button, DetailsList, Grid, Tabs } from '@clab/design-system';
 
 import Image from '@components/common/Image/Image';
@@ -51,15 +49,12 @@ const BookDetailSection = ({ data }: BookDetailSectionProps) => {
     reviewLinks,
   } = data;
 
-  const handleBorrowClick = useCallback(
-    (bookId: number) => {
-      bookBorrowMutate({
-        bookId: bookId,
-        borrowerId: myInfo.id,
-      });
-    },
-    [bookBorrowMutate, myInfo.id],
-  );
+  const handleBorrowClick = (bookId: number) => {
+    bookBorrowMutate({
+      bookId: bookId,
+      borrowerId: myInfo.id,
+    });
+  };
   /**
    * 온라인 서점에서 책의 정보를 검색하는 함수입니다.
    * 서버에 저장된 온라인 서점 URL이 존재할 경우 해당 URL로 이동합니다.
@@ -78,8 +73,8 @@ const BookDetailSection = ({ data }: BookDetailSectionProps) => {
         <Image
           src={createImageUrl(imageUrl)}
           alt={title}
-          width="w-[420px]"
-          height="h-[520px]"
+          width="max-w-[420px] w-full"
+          height="max-h-[520px] h-full"
           className="object-cover p-4 drop-shadow-lg"
         />
         <div className="flex flex-col justify-between gap-4">
diff --git a/apps/member/src/components/library/LibraryNewBooksSection/LibraryNewBooksSection.tsx b/apps/member/src/components/library/LibraryNewBooksSection/LibraryNewBooksSection.tsx
index 0862bbf5..db5d60b4 100644
--- a/apps/member/src/components/library/LibraryNewBooksSection/LibraryNewBooksSection.tsx
+++ b/apps/member/src/components/library/LibraryNewBooksSection/LibraryNewBooksSection.tsx
@@ -25,6 +25,7 @@ const LibraryNewBooksSection = () => {
             <Image
               src={imageUrl}
               alt={title}
+              height="h-[310px]"
               className="rounded-lg object-cover transition-transform group-hover:scale-105"
             />
             <div className="pointer-events-none absolute inset-0 rounded-lg bg-gradient-to-t from-black/60 via-black/30 opacity-0 group-hover:opacity-100" />