Merge pull request #755 from KEEPER31337/feature/도서검색에서_프로필페이지_네비게이션_…

…기능_추가_#754

Feature/도서검색에서 프로필페이지 네비게이션 기능 추가 #754

src/pages/Library/Button/NavigateProfileButton.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useRecoilValue } from 'recoil';
+import memberState from '@recoil/member.recoil';
+import OutlinedButton from '@components/Button/OutlinedButton';
+
+const NavigateProfileButton = () => {
+  const userInfo = useRecoilValue(memberState);
+  const navigate = useNavigate();
+
+  return (
+    <OutlinedButton
+      small
+      onClick={() => {
+        navigate(`/profile/${userInfo?.memberId}/book`);
+      }}
+    >
+      내 서재 가기
+    </OutlinedButton>
+  );
+};
+
+export default NavigateProfileButton;

src/pages/Library/Library.tsx

@@ -7,6 +7,7 @@ import { useGetBookListQuery, useRequestBorrowBookMutation, useGetBookBorrowsQue
 import usePagination from '@hooks/usePagination';
 import StandardTablePagination from '@components/Pagination/StandardTablePagination';
 import PageTitle from '@components/Typography/PageTitle';
+import NavigateProfileButton from './Button/NavigateProfileButton';
 import BookCard from './Card/BookCard';
 import RequestBookModal from './Modal/RequestBookModal';
 import LibrarySearchSection from './SearchSection/LibrarySearchSection';
@@ -42,12 +43,13 @@ const Library = () => {
       <PageTitle>도서검색</PageTitle>
       <div className="mb-2 flex w-full flex-col items-start justify-between md:mb-5 md:flex-row md:items-center">
         <LibrarySearchSection />
-        <div className="mt-2 flex w-full justify-end md:mt-0">
+        <div className="items-ends mt-2 flex w-full justify-end space-x-4 md:mt-0">
           <BorrowStatus
             librarian={librarian}
             borrowedBookCount={borrowedBookListData?.totalElement || 0}
             maxBorrowableBooks={MAX_BORROWABLE_BOOKS}
           />
+          <NavigateProfileButton />
         </div>
       </div>
       <div className="h-[804px] bg-middleBlack md:h-[402px]">

src/pages/Library/Status/BorrowStatus.tsx

@@ -10,7 +10,7 @@ interface BorrowStatusProps {
 
 const BorrowStatus = ({ librarian, borrowedBookCount, maxBorrowableBooks }: BorrowStatusProps) => {
   return borrowedBookCount !== maxBorrowableBooks ? (
-    <Typography className="text-pointBlue">
+    <Typography className="!flex !items-end text-pointBlue">
       신청 가능 권수 : {maxBorrowableBooks - borrowedBookCount}/{maxBorrowableBooks}
     </Typography>
   ) : (
@@ -26,7 +26,9 @@ const BorrowStatus = ({ librarian, borrowedBookCount, maxBorrowableBooks }: Borr
       }}
       placement="bottom"
     >
-      <Typography className="text-subRed">신청 가능 권 수({maxBorrowableBooks}권)을 초과했습니다.</Typography>
+      <Typography className="!flex !items-end !text-small text-subRed md:!text-paragraph">
+        신청 가능 권 수({maxBorrowableBooks}권)을 초과했습니다.
+      </Typography>
     </Tooltip>
   );
 };