feat: 사서 대출권수 변경

src/asset/css/BookInformationWithCover.css

@@ -1,6 +1,10 @@
 .book-info__wrapper {
   display: flex;
   min-width: 3rem;
+  border: 0.1rem solid #a4a4a4;
+  border-radius: 1rem;
+  padding: 1rem;
+  margin: 1rem;
 }
 
 .book-info__cover {
@@ -33,4 +37,4 @@
     width: 100%;
     height: auto;
   }
-}
+}

src/asset/css/RentInquireBoxBook.css

@@ -80,6 +80,16 @@
   text-overflow: ellipsis;
 }
 
+.rent__inquire-box-user__role {
+  align-items: center;
+  justify-content: center;
+  border: 0.3rem solid #545454;
+  border-radius: 1rem;
+  padding: 0.2rem 0.5rem;
+  background-color: #545454;
+  margin-right: 0.6rem;
+}
+
 .book__info__factor {
   margin-right: 4rem;
   overflow: hidden;
@@ -185,4 +195,4 @@
   .rent__inquire-box-book__add-button {
     height: 8rem;
   }
-}
+}

src/asset/css/TextareaWithLabel.css

@@ -11,16 +11,21 @@
   box-sizing: border-box;
   height: 10rem;
   display: block;
+  background-color: #f2f2f2;
+  padding: 1rem;
+  border-radius: 1rem;
 }
 
 @media screen and (max-width: 767px) {
   .textarea__wrapper {
     font-size: 1.4rem;
   }
+
   .textarea__label {
     margin: 0.4rem 0;
   }
+
   .textarea__textarea {
     height: 5rem;
   }
-}
+}

src/component/rent/Rent.tsx

@@ -12,12 +12,17 @@ import RentModalConfirm from "./RentModalConfirm";
 import LoginIcon from "../../asset/img/login_icon_white.svg";
 import BookIcon from "../../asset/img/admin_icon.svg";
 import "../../asset/css/Rent.css";
+import { useRecoilValue } from "recoil";
+import { userAtom } from "~/atom/userAtom";
 
 const Rent = () => {
   const [selectedUser, setSelectedUser] = useState<User | null>(null);
   const [selectedBooks, setSelectedBooks] = useState<Book[]>([]);
 
   const { Modal, setOpen: openModal, setClose: closeModal } = useModal();
+  const user = useRecoilValue(userAtom);
+  // 사서의 대출권수 4권으로 설정. 사서 본인의 대출건만 4권으로 적용
+  const lendingLimit = (user.isAdmin && user.id === selectedUser?.id) ? 4 : 2;
 
   return (
     <main>
@@ -42,18 +47,18 @@ const Rent = () => {
         />
         {selectedBooks.length > 0
           ? selectedBooks.map((book, index) => (
-              <RentInquireBoxBook
-                key={book.bookId}
-                book={book}
-                shape={
-                  selectedBooks.length === 2 && index === 0 ? "none" : "two"
-                }
-                selectedBooks={selectedBooks}
-                setSelectedBooks={setSelectedBooks}
-              />
-            ))
+            <RentInquireBoxBook
+              key={book.bookId}
+              book={book}
+              shape={
+                (selectedBooks.length - index) === 1 ? "two" : "none"
+              }
+              selectedBooks={selectedBooks}
+              setSelectedBooks={setSelectedBooks}
+            />
+          ))
           : null}
-        {selectedBooks.length < 2 ? (
+        {selectedBooks.length < lendingLimit ? (
           <RentInquireBoxBook
             book={null}
             shape={selectedBooks.length === 0 ? "two" : "four"}

src/component/rent/RentConfirm.tsx

@@ -1,4 +1,6 @@
 import { Book, User } from "../../type";
+import { useRecoilValue } from "recoil";
+import { userAtom } from "~/atom/userAtom";
 import "../../asset/css/RentConfirm.css";
 
 type Props = {
@@ -8,21 +10,30 @@ type Props = {
 };
 
 const RentConfirm = ({ selectedUser, selectedBooks, openModal }: Props) => {
+  const librarian = useRecoilValue(userAtom);
+
+  const lendingLimit = (librarian && librarian.id === selectedUser?.id ? 4 : 2) - (selectedUser?.lendings.length || 0);
+
   const isLendable =
     selectedUser &&
     !selectedUser.isPenalty &&
     selectedBooks.length > 0 &&
-    2 - selectedUser.lendings.length >= selectedBooks.length;
+    lendingLimit >= selectedBooks.length;
   return (
     <section className="rent__confirm-button">
       <div className="rent__confirm-button__text font-16 color-a4">
         {selectedUser && selectedBooks.length > 0
-          ? `${
+          ? (
+          `${
               selectedUser.nickname ? selectedUser.nickname : selectedUser.email
-            }님에게 ${selectedBooks[0].title}${
-              selectedBooks[1] ? `, ${selectedBooks[1].title}` : ``
-            }를 대출합니다.`
-          : "정보를 입력해주세요."}
+            }님에게 ${selectedBooks.map((book, idx) => {
+              if (idx !== 0)
+                return (' ' + book.title)
+              else
+                return (book.title)
+            })}
+            를 대출합니다.`
+          ): "정보를 입력해주세요."}
       </div>
       <button
         className={`rent__confirm-button__button ${

src/component/rent/RentInquireBoxBook.tsx

@@ -23,7 +23,7 @@ const InquireBoxBook = ({
   const deleteBook = () => {
     if (setSelectedBooks && book) {
       setSelectedBooks(
-        selectedBooks.splice(1 - selectedBooks.indexOf(book), 1),
+        selectedBooks.filter(selectedBook => selectedBook !== book),
       );
     }
   };

src/component/rent/RentInquireBoxUser.tsx

@@ -1,6 +1,8 @@
 import { useModal } from "../../hook/useModal";
 import { dateFormat } from "../../util/date";
 import { User } from "../../type";
+import { useRecoilValue } from "recoil";
+import { userAtom } from "~/atom/userAtom";
 import RentModalUser from "./RentModalUser";
 import Image from "../utils/Image";
 import DeleteButton from "../../asset/img/x_button.svg";
@@ -14,6 +16,8 @@ type Props = {
 const InquireBoxUser = ({ selectedUser, setSelectedUser }: Props) => {
   const { setOpen, setClose, Modal } = useModal();
 
+  const librarian = useRecoilValue(userAtom);
+
   const deleteUser = () => {
     if (setSelectedUser) {
       setSelectedUser(null);
@@ -22,18 +26,19 @@ const InquireBoxUser = ({ selectedUser, setSelectedUser }: Props) => {
 
   const displayPenalty = () => {
     if (!selectedUser) return "";
+
     let penalty = "";
-    if (
-      new Date(selectedUser.penaltyEndDate).setHours(0, 0, 0, 0) >=
-        new Date().setHours(0, 0, 0, 0) ||
-      selectedUser.overDueDay > 0
-    )
-      penalty += "대출제한 (연체";
-    if (selectedUser.lendings.length >= 2) {
-      if (penalty !== "") penalty += ", 2권 이상 대출";
-      else penalty += "대출제한 (2권 이상 대출";
+    selectedUser.isPenalty && (penalty += "대출제한 (연체");
+
+    // 제한 권수 판단
+    const lendingLimit = librarian && librarian.id === selectedUser.id ? 4 : 2;
+
+    if (selectedUser.lendings.length >= lendingLimit) {
+      if (selectedUser.isPenalty)penalty += `, ${lendingLimit}권 이상 대출`;
+      else penalty += `대출제한 (${lendingLimit}권 이상 대출`;
     }
-    if (penalty !== "") penalty += ")";
+    if (selectedUser.isPenalty || selectedUser.lendings.length >= lendingLimit)
+      penalty += ")";
     return penalty;
   };
 
@@ -47,7 +52,8 @@ const InquireBoxUser = ({ selectedUser, setSelectedUser }: Props) => {
                 ? selectedUser.nickname
                 : selectedUser.email}
             </div>
-            <div className="font-16 color-red"> {displayPenalty()} </div>
+            {selectedUser.role === 2 ? <div className="rent__inquire-box-user__role color-ff font-16-bold">사서</div> : null}
+            <div className="font-16 color-red">{displayPenalty()}</div>
             <button
               className="rent__inquire-box-user__undo-button color-a4"
               type="button"
@@ -84,9 +90,8 @@ const InquireBoxUser = ({ selectedUser, setSelectedUser }: Props) => {
                     {`${index + 1}. ${item.title}`}
                   </div>
                   <div className="user__book-info__description color-54">
-                    <span>{`예약순위 : ${
-                      item.ranking ? `${item.ranking}순위` : "-"
-                    }`}</span>
+                    <span>{`예약순위 : ${item.ranking ? `${item.ranking}순위` : "-"
+                      }`}</span>
                     {item.endAt ? (
                       <span className="user__reservations-info">
                         예약 혜택 종료일 : {item.endAt}

src/component/rent/RentModalConfirm.tsx

@@ -22,8 +22,7 @@ const RentModalConfirm = ({
   setSelectedBooks,
   closeModal,
 }: Props) => {
-  const [first, setFirst] = useState("");
-  const [second, setSecond] = useState("");
+  const [remarks, setRemarks] = useState<string[]>([]);
 
   const { requestLending } = usePostLendingsMultiple({
     selectedBooks,
@@ -35,12 +34,19 @@ const RentModalConfirm = ({
 
   const postData: FormEventHandler = e => {
     e.preventDefault();
-    requestLending([first, second]);
+    requestLending(remarks);
   };
+
   const isRentable =
     selectedBooks.length > 1
-      ? first.length > 0 && second.length > 0
-      : first.length > 0;
+      ? remarks.slice(0, selectedBooks.length).every(remark => remark.length > 0)
+      : remarks[0]?.length > 0;
+
+  const handleRemarkChange = (index: number, value: string) => {
+    const updatedRemarks = [...remarks];
+    updatedRemarks[index] = value;
+    setRemarks(updatedRemarks);
+  };
 
   return (
     <form className="rent-modal">
@@ -53,7 +59,7 @@ const RentModalConfirm = ({
                 ? selectedUser.nickname
                 : selectedUser.email}
             </p>
-            <p className="font-16 color-54">{`현재 대출권수 ( ${selectedUser.lendings.length} / 2 )`}</p>
+            <p className="font-16 color-54">{`현재 대출권수 ( ${selectedUser.lendings.length} / ${selectedUser.role === 2 ? '4' : '2'} )`}</p>
           </div>
         )}
       </div>
@@ -64,7 +70,7 @@ const RentModalConfirm = ({
           return (
             <div
               key={selectBook.bookId}
-              className={`rent-modal__book-info ${isFirst && "second-book"}`}
+              className={`rent-modal__book-info ${index}`}
             >
               <BookInformationWithCover
                 bookCoverAlt={selectBook.title}
@@ -80,12 +86,10 @@ const RentModalConfirm = ({
                   wrapperClassName="rent-modal__remark"
                   topLabelText="비고"
                   textareaPlaceHolder="비고를 입력해주세요. (책 상태 등)"
-                  textareaValue={isFirst ? first : second}
-                  setTextareaValue={isFirst ? setFirst : setSecond}
-                  isTextareaFocusedOnMount={isFirst}
-                  isVisibleBottomMessage={
-                    isFirst ? !first.length : !second.length
-                  }
+                  textareaValue={remarks[index]}
+                  setTextareaValue={(value:string)=>handleRemarkChange(index, value)}
+                  isTextareaFocusedOnMount={index===0}
+                  isVisibleBottomMessage={!remarks[index]?.length}
                   bottomMessageText="비고를 입력해주세요"
                   bottomMessageColor="red"
                 />

src/component/rent/RentModalUserList.tsx

@@ -1,5 +1,7 @@
 import { User } from "../../type";
 import "../../asset/css/RentModalUserList.css";
+import { useRecoilValue } from "recoil";
+import { userAtom } from "~/atom/userAtom";
 
 type Props = {
   setSelectedUser: (user: User) => void;
@@ -8,24 +10,38 @@ type Props = {
 };
 
 const UserList = ({ user, setSelectedUser, closeModal }: Props) => {
+
+  const librarian = useRecoilValue(userAtom);
+
+  const isOverDue = (selectedUser: User) => {
+    if (
+      new Date(selectedUser.penaltyEndDate).setHours(0, 0, 0, 0) >=
+        new Date().setHours(0, 0, 0, 0) ||
+      selectedUser.overDueDay > 0
+    )  return true;
+    else return false;
+  }
+
   const seletUser = () => {
+    user.isPenalty = isOverDue(user) ? true : false;
     setSelectedUser(user);
     closeModal();
   };
 
   const displayPenalty = () => {
     let penalty = "";
-    if (
-      new Date(user.penaltyEndDate).setHours(0, 0, 0, 0) >=
-        new Date().setHours(0, 0, 0, 0) ||
-      user.overDueDay > 0
-    )
-      penalty += "대출 불가 (연체";
-    if (user.lendings.length >= 2) {
-      if (penalty !== "") penalty += ", 2권 이상 대출";
-      else penalty += "대출 불가 (2권 이상 대출";
+    user.isPenalty && (penalty += "대출 불가 (연체");
+
+    const lendingLimit = librarian.id === user.id ? 4 : 2;
+
+    if (user.lendings.length >= lendingLimit) {
+      if (user.isPenalty) penalty += `, ${lendingLimit}권 이상 대출`;
+      else penalty += `대출 불가 (${lendingLimit}권 이상 대출`;
     }
-    if (penalty !== "") penalty += ")";
+
+    if (user.isPenalty || user.lendings.length >= lendingLimit)
+      penalty += ")";
+
     return penalty;
   };