From 796ac44ab9c67735ad165883982698053915788b Mon Sep 17 00:00:00 2001
From: scarf <greenscarf005@gmail.com>
Date: Fri, 18 Aug 2023 15:48:04 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=8F=84=EC=84=9C=20=EC=83=81=ED=83=9C?=
 =?UTF-8?q?=20=EC=A0=95=EB=B3=B4=EB=A5=BC=20=EC=B2=AD=EA=B5=AC=EA=B8=B0?=
 =?UTF-8?q?=ED=98=B8=20=EC=88=9C=EC=9C=BC=EB=A1=9C=20=EC=A0=95=EB=A0=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/component/book/BookDetail.tsx | 26 +++++++++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/component/book/BookDetail.tsx b/src/component/book/BookDetail.tsx
index aa5f0502..fb38a243 100644
--- a/src/component/book/BookDetail.tsx
+++ b/src/component/book/BookDetail.tsx
@@ -9,6 +9,20 @@ import Image from "~/component/utils/Image";
 import Like from "~/component/book/like/Like";
 import TagWrapper from "~/component/book/tag/TagWrapper";
 import "~/asset/css/BookDetail.css";
+import { Book } from "~/type";
+
+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>