Merge pull request #475 from KEEPER31337/feature/도서_신청_버튼_클릭시_모달창_생성_…

…#446

Feature/도서 신청 버튼 클릭시 모달창 생성 #446

src/pages/Library/Card/BookCard.tsx

@@ -1,9 +1,12 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Typography } from '@mui/material';
 import OutlinedButton from '@components/Button/OutlinedButton';
 import { ReactComponent as Logo } from '@assets/logo/logo_neon.svg';
+import RequestBookModal from '@pages/Library/Modal/RequestBookModal';
 
 const BookCard = () => {
+  const [requestBookModalOpen, setRequestBookModalOpen] = useState(false);
+
   return (
     <div className="flex h-fit bg-mainBlack p-2">
       <div className="mr-2 flex h-[120px] w-[85px] bg-middleBlack">
@@ -20,9 +23,10 @@ const BookCard = () => {
         </div>
 
         <div className="absolute bottom-0 right-0">
-          <OutlinedButton>대출 신청</OutlinedButton>
+          <OutlinedButton onClick={() => setRequestBookModalOpen(true)}>대출 신청</OutlinedButton>
         </div>
       </div>
+      <RequestBookModal open={requestBookModalOpen} onClose={() => setRequestBookModalOpen(false)} />
     </div>
   );
 };

src/pages/Library/Modal/RequestBookModal.tsx

@@ -0,0 +1,23 @@
+import React, { useState } from 'react';
+
+import { Typography } from '@mui/material';
+import ConfirmModal from '@components/Modal/ConfirmModal';
+
+interface RequestBookModalProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+const RequestBookModal = ({ open, onClose }: RequestBookModalProps) => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [librarian, setLibrarian] = useState<string>('박소현');
+
+  return (
+    <ConfirmModal open={open} onClose={onClose} title="신청완료">
+      <Typography>신청이 완료되었습니다.</Typography>
+      <Typography>사서({librarian})에게 승인 요청 해주세요.</Typography>
+    </ConfirmModal>
+  );
+};
+
+export default RequestBookModal;