Merge pull request #443 from KEEPER31337/feature/도서검색_ui_구현_#369

Feature/도서검색 UI 구현 #369

src/pages/Library/Card/BookCard.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Typography } from '@mui/material';
+import OutlinedButton from '@components/Button/OutlinedButton';
+import { ReactComponent as Logo } from '@assets/logo/logo_neon.svg';
+
+const BookCard = () => {
+  return (
+    <div className="flex h-fit bg-mainBlack p-2">
+      <div className="mr-2 flex h-[120px] w-[85px] bg-middleBlack">
+        <Logo className="m-2 w-full" />
+      </div>
+      <div className="relative grow p-2">
+        <div>
+          <Typography className="!mb-2 font-semibold">Beginning Linux programming 4th Edition</Typography>
+          <div className="flex space-x-2">
+            <Typography>저자 : 페트릭 엔게브렛슨</Typography>
+            <span className="text-pointBlue"> | </span>
+            <Typography>권수 : 2/3</Typography>
+          </div>
+        </div>
+
+        <div className="absolute bottom-0 right-0">
+          <OutlinedButton>대출 신청</OutlinedButton>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BookCard;

src/pages/Library/Library.tsx

@@ -0,0 +1,29 @@
+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';
+
+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>
+      </div>
+      <div className="grid grid-cols-2">
+        <BookCard />
+        <BookCard />
+        <BookCard />
+        <BookCard />
+        <BookCard />
+        <BookCard />
+      </div>
+      <StandardTablePagination />
+    </div>
+  );
+};
+
+export default Library;

src/router/useMainRouter.tsx

@@ -13,6 +13,7 @@ import BoardList from '@pages/board/BoardList';
 import SignUp from '@pages/SignUp/SignUp';
 import Login from '@pages/login/Login';
 import Game from '@pages/Game/Game';
+import Library from '@pages/Library/Library';
 import BoardWrite from '@pages/BoardWrite/BoardWrite';
 import BoardView from '@pages/board/BoardView/BoardView';
 
@@ -80,6 +81,10 @@ const useMainRouter = () =>
               path: 'game',
               element: <Game />,
             },
+            {
+              path: 'library',
+              element: <Library />,
+            },
           ],
         },
         {