From 5654a7cedfdf3c9554e558d141dd078591f2d89a Mon Sep 17 00:00:00 2001
From: SeanKim05 <dbgus20609@gmail.com>
Date: Mon, 3 Feb 2025 12:43:35 +0900
Subject: [PATCH 1/2] =?UTF-8?q?Fix:=20=EC=84=9C=EC=9E=AC=20=EC=B1=85=20?=
 =?UTF-8?q?=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EC=97=86=EC=9D=84=20=EB=95=8C=20?=
 =?UTF-8?q?=EB=A1=9C=EC=A7=81=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/bookshelf/_components/SortableItm.tsx | 10 ++--------
 src/stores/modal.ts                           |  1 +
 2 files changed, 3 insertions(+), 8 deletions(-)

diff --git a/src/app/bookshelf/_components/SortableItm.tsx b/src/app/bookshelf/_components/SortableItm.tsx
index a402826..bc26900 100644
--- a/src/app/bookshelf/_components/SortableItm.tsx
+++ b/src/app/bookshelf/_components/SortableItm.tsx
@@ -4,6 +4,7 @@ import React from "react";
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { likedBook } from "@/types/common";
+import noImage from "/public/NoBookImage.jpeg";
 import Image from "next/image";
 
 import { useModalStore } from "@/stores/modal";
@@ -22,13 +23,6 @@ function SortableItem({ id, book }: SortableItemProps) {
     });
   const { openModalWithIsbn } = useModalStore();
 
-  if (!book.thumbnail)
-    return (
-      <div className="flexCenter h-full w-full border border-black">
-        {book.title}
-      </div>
-    );
-
   return (
     <div
       ref={setNodeRef}
@@ -48,7 +42,7 @@ function SortableItem({ id, book }: SortableItemProps) {
         }}
       >
         <Image
-          src={book.thumbnail}
+          src={book.thumbnail || noImage}
           fill
           alt={book.title}
           sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw"
diff --git a/src/stores/modal.ts b/src/stores/modal.ts
index a0d94f5..085e4f3 100644
--- a/src/stores/modal.ts
+++ b/src/stores/modal.ts
@@ -22,6 +22,7 @@ export const useModalStore = create<States & Actions>((set) => ({
     set(() => ({ isOpen: true, data: data }));
   },
   openModalWithIsbn: async (isbn: string) => {
+    console.log("aaaa");
     const data = await getDetailByIsbn(isbn.split(" ")[0]);
 
     set(() => ({ isOpen: true, data: data, isBookMark: false }));

From bdf7a3b6bdd06eb5e2095184a9adb0cfb12b79e8 Mon Sep 17 00:00:00 2001
From: SeanKim05 <dbgus20609@gmail.com>
Date: Mon, 3 Feb 2025 14:53:42 +0900
Subject: [PATCH 2/2] =?UTF-8?q?Feat:=20=EC=B1=85=20=EC=9D=B4=EB=AF=B8?=
 =?UTF-8?q?=EC=A7=80=20=EC=97=86=EC=9D=84=20=EB=95=8C=20=EC=A0=9C=EB=AA=A9?=
 =?UTF-8?q?=20=ED=91=9C=EC=8B=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/bookshelf/_components/SortableItm.tsx | 12 ++++++++----
 src/stores/modal.ts                           |  1 -
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/app/bookshelf/_components/SortableItm.tsx b/src/app/bookshelf/_components/SortableItm.tsx
index bc26900..261d3bb 100644
--- a/src/app/bookshelf/_components/SortableItm.tsx
+++ b/src/app/bookshelf/_components/SortableItm.tsx
@@ -12,7 +12,6 @@ import { useModalStore } from "@/stores/modal";
 interface SortableItemProps {
   id: string;
   book: likedBook;
-  // 드래그 & 드롭 컨테이너 영역 밖에 있는지 여부
   isOutside?: boolean;
 }
 
@@ -37,16 +36,21 @@ function SortableItem({ id, book }: SortableItemProps) {
           isDragging ? "opacity-50" : "opacity-100"
         }`}
         key={book.isbn}
-        onClick={() => {
-          openModalWithIsbn(book.isbn);
-        }}
+        onClick={() => openModalWithIsbn(book.isbn)}
       >
         <Image
           src={book.thumbnail || noImage}
           fill
           alt={book.title}
           sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw"
+          className="object-cover"
         />
+        {/* 제목 오버레이 */}
+        {!book.thumbnail && (
+          <figcaption className="absolute inset-0 flex items-center justify-center bg-black/70 p-2 text-center text-sm font-semibold text-white opacity-0 transition-opacity duration-200 hover:opacity-100">
+            {book.title}
+          </figcaption>
+        )}
       </figure>
     </div>
   );
diff --git a/src/stores/modal.ts b/src/stores/modal.ts
index 085e4f3..a0d94f5 100644
--- a/src/stores/modal.ts
+++ b/src/stores/modal.ts
@@ -22,7 +22,6 @@ export const useModalStore = create<States & Actions>((set) => ({
     set(() => ({ isOpen: true, data: data }));
   },
   openModalWithIsbn: async (isbn: string) => {
-    console.log("aaaa");
     const data = await getDetailByIsbn(isbn.split(" ")[0]);
 
     set(() => ({ isOpen: true, data: data, isBookMark: false }));