[Refactor/bookshelf] 폴더구조 변경 및 컴포넌트화 재진행

src/app/bookshelf/_components/BookShelfCard.tsx

@@ -0,0 +1,40 @@
+import Image from "next/image";
+import React from "react";
+import noImage from "/public/NoBookImage.jpeg";
+import { likedBook } from "@/types/common";
+
+interface BookShelfCardProps {
+  isDragging: boolean;
+  book: likedBook;
+  onCardClick: () => void;
+}
+
+export default function BookShelfCard({
+  isDragging,
+  book,
+  onCardClick,
+}: BookShelfCardProps) {
+  return (
+    <figure
+      className={`relative h-[180px] w-[120px] ${
+        isDragging ? "opacity-50" : "opacity-100"
+      }`}
+      key={book.isbn}
+      onClick={() => onCardClick()}
+    >
+      <Image
+        src={book.thumbnail || noImage}
+        fill
+        alt={book.title}
+        sizes="120"
+        className="object-cover"
+      />
+      {/* 책에 제목이 없을 시 Hover 떄 나타남 */}
+      {!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>
+  );
+}

src/app/bookshelf/_components/Container.tsx

@@ -9,6 +9,7 @@ import {
 
 import SortableItem from "./SortableItm";
 import { likedBook } from "@/types/common";
+import { bookShelfLabel } from "@/utils/bookShelfLabel";
 
 interface ContainerProps {
   id: string;
@@ -21,14 +22,7 @@ export default function Container({ id, items }: ContainerProps) {
     id,
   });
 
-  function titleConverter(id: string) {
-    if (id === "toRead") {
-      return "읽을 책";
-    } else if (id === "reading") {
-      return "읽고 있는 책";
-    }
-    return "다 읽은 책";
-  }
+  const labelName = bookShelfLabel(id);
 
   return (
     <SortableContext
@@ -37,12 +31,10 @@ export default function Container({ id, items }: ContainerProps) {
       items={items.map((item) => item.isbn)}
       strategy={horizontalListSortingStrategy}
     >
-      <label className="font-styled text-2xl font-extrabold text-font-textPrimary">
-        {titleConverter(id)}
-      </label>
+      <label className="text-xl font-semibold">{labelName}</label>
       <section
         ref={setNodeRef}
-        className="flex min-h-[180px] flex-1 flex-row space-x-3 overflow-x-scroll border border-brown-2 bg-white"
+        className="no-scrollbar flex h-[180px] flex-row space-x-3 overflow-x-scroll bg-white"
       >
         {items.map((item) => (
           <SortableItem key={item.isbn} id={item.isbn} book={item} />

src/app/bookshelf/_components/DraggedItem.tsx

@@ -0,0 +1,25 @@
+import { DragOverlay } from "@dnd-kit/core";
+import Image from "next/image";
+import React from "react";
+import SortableItem from "./SortableItm";
+import Delete from "/public/icons/Delete.png";
+import { likedBook } from "@/types/common";
+
+export default function DraggedItem({
+  isOutside,
+  activeItem,
+}: {
+  isOutside: boolean;
+  activeItem: likedBook;
+}) {
+  return (
+    <DragOverlay>
+      {isOutside && (
+        <div className="flexCenter absolute z-10 h-[180px] w-[121px] bg-red-200 opacity-50">
+          <Image src={Delete} sizes="8" alt="삭제하기" />
+        </div>
+      )}
+      <SortableItem id={activeItem.isbn} book={activeItem} />
+    </DragOverlay>
+  );
+}

src/app/bookshelf/_components/SortableItm.tsx

@@ -4,10 +4,8 @@ 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";
+import BookShelfCard from "./BookShelfCard";
 
 interface SortableItemProps {
   id: string;
@@ -31,27 +29,11 @@ function SortableItem({ id, book }: SortableItemProps) {
       }}
       {...listeners}
     >
-      <figure
-        className={`relative h-[180px] w-[121px] ${
-          isDragging ? "opacity-50" : "opacity-100"
-        }`}
-        key={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>
+      <BookShelfCard
+        book={book}
+        isDragging={isDragging}
+        onCardClick={() => openModalWithIsbn(book.isbn)}
+      />
     </div>
   );
 }

src/app/bookshelf/page.tsx

@@ -1,29 +1,21 @@
 "use client";
 
 import React, { useState } from "react";
-import {
-  DndContext,
-  DragOverlay,
-  PointerSensor,
-  useSensor,
-  useSensors,
-  rectIntersection,
-} from "@dnd-kit/core";
+import { DndContext, rectIntersection } from "@dnd-kit/core";
 
 import Container from "./_components/Container";
-import SortableItem from "./_components/SortableItm";
 import { useLikedBookStore } from "@/stores/likedBooks";
 import {
   handleDragStart,
   handleDragOver,
   handleDragEnd,
   handleDragMove,
-} from "@/libs/dnd/dragHelper";
+} from "@/utils/bookDragHelper";
 import { likedBook } from "@/types/common";
 import Modal from "../components/modal/Modal";
 import { useModalStore } from "@/stores/modal";
-import Delete from "/public/icons/Delete.png";
-import Image from "next/image";
+import DraggedItem from "./_components/DraggedItem";
+import { useDndSensors } from "@/hooks/useDndSensors";
 
 export default function Dnd() {
   const { toRead, reading, done, setItems } = useLikedBookStore();
@@ -38,13 +30,7 @@ export default function Dnd() {
   const allItems = [...toRead, ...reading, ...done];
 
   // DnD 센서
-  const sensors = useSensors(
-    useSensor(PointerSensor, {
-      activationConstraint: {
-        distance: 1,
-      },
-    }),
-  );
+  const sensors = useDndSensors();
 
   // 컨테이너 업데이트 함수
   const updateContainers = (updated: Partial<typeof items>) => {
@@ -58,7 +44,8 @@ export default function Dnd() {
   const activeItem = allItems.find((book) => book.isbn === activeId);
 
   return (
-    <article className="min-h-minu-nav flex flex-col space-y-5 p-[5%]">
+    <article className="min-h-minu-nav flex flex-col space-y-5 px-[10%] pb-[12%] pt-[8%]">
+      <h1 className="pb-2 text-3xl font-bold">내 서재</h1>
       <DndContext
         sensors={sensors}
         collisionDetection={rectIntersection}
@@ -76,23 +63,11 @@ export default function Dnd() {
           <Container key={id} id={id} items={bookList} />
         ))}
 
-        {/* 드래그 중인 아이템 */}
-        <DragOverlay>
-          {activeId && activeItem ? (
-            <div>
-              {isOutside && (
-                <div className="flexCenter absolute z-10 h-[180px] w-[121px] bg-red-200 opacity-50">
-                  <Image src={Delete} sizes="8" alt="삭제하기" />
-                </div>
-              )}
-
-              <SortableItem id={activeItem.isbn} book={activeItem} />
-            </div>
-          ) : null}
-        </DragOverlay>
-
-        {isOpen && <Modal />}
+        {activeId && activeItem && (
+          <DraggedItem isOutside={isOutside} activeItem={activeItem} />
+        )}
       </DndContext>
+      {isOpen && <Modal />}
     </article>
   );
 }

src/app/components/modal/Modal.tsx

@@ -4,7 +4,7 @@ import { createPortal } from "react-dom";
 import { useEffect } from "react";
 
 import { useModalStore } from "@/stores/modal";
-import useScrollLock from "@/libs/scrollLock/scrollLock";
+import useScrollLock from "@/utils/scrollLock";
 import ModalContent from "./ModalContent";
 
 import CloseIcon from "/public/icons/Cancel.png";

src/app/layout.tsx

@@ -13,10 +13,7 @@ export const metadata: Metadata = {
 };
 
 const myFont = localFont({
-  src: [
-    { path: "../../public/fonts/NanumMyeongjo.woff" },
-    { path: "../../public/fonts/PretendardVariable.woff2" },
-  ],
+  src: [{ path: "../../public/fonts/PretendardVariable.woff2" }],
 });
 
 export default function RootLayout({

src/app/page.tsx

@@ -2,9 +2,9 @@ import Carousel from "./components/home/Carousel";
 
 import topics from "@/data/topics";
 import authors from "@/data/authors";
-import { todayTopic } from "@/libs/apis/todayTopic";
-import { todayAuthors } from "@/libs/apis/todayAuthors";
-import GetIndex from "@/libs/isr/GetIndex";
+import { todayTopic } from "@/services/todayTopic";
+import { todayAuthors } from "@/services/todayAuthors";
+import GetIndex from "@/utils/GetIndex";
 
 export default async function Home() {
   const index = GetIndex();

src/app/search/page.tsx

@@ -1,5 +1,5 @@
 import { BookResponse } from "@/types/common";
-import { getBookSearch } from "@/libs/apis/searchApi";
+import { getBookSearch } from "@/services/searchApi";
 import SearchResultContainer from "./_components/container/SearchResultContainer";
 
 interface SearchProps {

src/hooks/useDndSensors.ts

@@ -0,0 +1,11 @@
+import { PointerSensor, useSensor, useSensors } from "@dnd-kit/core";
+
+export function useDndSensors() {
+  return useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 1,
+      },
+    }),
+  );
+}

src/stores/modal.ts

@@ -1,6 +1,6 @@
 import { create } from "zustand";
 import { Book } from "@/types/common";
-import getDetailByIsbn from "@/libs/apis/getDetailByIsbn";
+import getDetailByIsbn from "@/services/getDetailByIsbn";
 
 interface States {
   isOpen: boolean;

src/utils/bookShelfLabel.ts

@@ -0,0 +1,8 @@
+export function bookShelfLabel(id: string) {
+  if (id === "toRead") {
+    return "읽을 책";
+  } else if (id === "reading") {
+    return "읽고 있는 책";
+  }
+  return "다 읽은 책";
+}