feat: 도서 상태 정보를 청구기호 순으로 정렬

src/component/book/BookDetail.tsx

@@ -1,14 +1,28 @@
 import { useEffect, useRef } from "react";
 import { useLocation, useParams } from "react-router-dom";
 import { useGetBooksInfoId } from "../../api/books/useGetBooksInfoId";
-import BookReservation from "./BookReservation";
-import BookStatus from "./BookStatus";
-import Review from "./review/Review";
+import "../../asset/css/BookDetail.css";
+import type { Book } from "../../type";
 import Banner from "../utils/Banner";
 import Image from "../utils/Image";
+import BookReservation from "./BookReservation";
+import BookStatus from "./BookStatus";
 import Like from "./like/Like";
+import Review from "./review/Review";
 import TagWrapper from "./tag/TagWrapper";
-import "../../asset/css/BookDetail.css";
+
+const callsignToNumbers = (callSign: string) =>
+  callSign
+    .replace(/[^0-9\.]/g, "")
+    .split(".")
+    .map(Number);
+
+const compareCallsign = (a: Book, b: Book) => {
+  const xs = callsignToNumbers(a.callSign);
+  const ys = callsignToNumbers(b.callSign);
+
+  return xs.reduce((sum, x, i) => sum + (x - ys[i]), 0);
+};
 
 const BookDetail = () => {
   const id = useParams().id || "";
@@ -104,9 +118,15 @@ const BookDetail = () => {
               </span>
               <div className="book-state__list">
                 <div>
-                  {bookDetailInfo.books?.map((book, index) => (
-                    <BookStatus key={book.id} book={book} index={index} />
-                  ))}
+                  {bookDetailInfo.books
+                    ?.toSorted((a, b) => compareCallsign(a, b))
+                    .map((book, index) => (
+                      <BookStatus
+                        key={book.callSign}
+                        book={book}
+                        index={index}
+                      />
+                    ))}
                 </div>
               </div>
             </div>