Merge pull request #476 from KEEPER31337/feature/대출가능여부에_따른_텍스트_및_too…

…ltip_구현_#458

Feature/대출가능여부에 따른 텍스트 및 tooltip 구현 #458

src/pages/Library/Library.tsx

@@ -2,16 +2,16 @@ import React from 'react';
 import PageTitle from '@components/Typography/PageTitle';
 import SearchSection from '@components/Section/SearchSection';
 import StandardTablePagination from '@components/Pagination/StandardTablePagination';
-import { Typography } from '@mui/material';
 import BookCard from './Card/BookCard';
+import BorrowStatus from './Status/BorrowStatus';
 
 const Library = () => {
   return (
     <div>
       <PageTitle>도서검색</PageTitle>
       <div className="mb-5 flex w-full items-center justify-between">
         <SearchSection />
-        <Typography className="text-pointBlue">신청 가능 권수 : 1/5</Typography>
+        <BorrowStatus canBorrow={false} />
       </div>
       <div className="grid grid-cols-2">
         <BookCard />

src/pages/Library/Status/BorrowStatus.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Typography } from '@mui/material';
+import Tooltip from '@mui/material/Tooltip';
+
+interface BorrowStatusProps {
+  canBorrow: boolean;
+}
+
+const BorrowStatus = ({ canBorrow }: BorrowStatusProps) => {
+  return canBorrow ? (
+    <Typography className="text-pointBlue">신청 가능 권수 : 1/5</Typography>
+  ) : (
+    <Tooltip
+      title="사서(박소현)에게 반납해주세요."
+      componentsProps={{
+        tooltip: {
+          sx: {
+            bgcolor: 'rgba(76, 238, 249, 0.15)',
+            fontSize: '14px',
+          },
+        },
+      }}
+      placement="top"
+    >
+      <Typography className="text-subRed">신청 가능 권 수(5권)을 초과했습니다.</Typography>
+    </Tooltip>
+  );
+};
+
+export default BorrowStatus;