diff --git a/src/app/bookshelf/_components/BookShelfCard.tsx b/src/app/bookshelf/_components/BookShelfCard.tsx new file mode 100644 index 0000000..e6d7e33 --- /dev/null +++ b/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 ( +
onCardClick()} + > + {book.title} + {/* 책에 제목이 없을 시 Hover 떄 나타남 */} + {!book.thumbnail && ( +
+ {book.title} +
+ )} +
+ ); +} diff --git a/src/app/bookshelf/_components/Container.tsx b/src/app/bookshelf/_components/Container.tsx index 033fd18..44db33a 100644 --- a/src/app/bookshelf/_components/Container.tsx +++ b/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 ( item.isbn)} strategy={horizontalListSortingStrategy} > - +
{items.map((item) => ( diff --git a/src/app/bookshelf/_components/DraggedItem.tsx b/src/app/bookshelf/_components/DraggedItem.tsx new file mode 100644 index 0000000..7d67e73 --- /dev/null +++ b/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 ( + + {isOutside && ( +
+ 삭제하기 +
+ )} + + + ); +} diff --git a/src/app/bookshelf/_components/SortableItm.tsx b/src/app/bookshelf/_components/SortableItm.tsx index 261d3bb..c9e9c92 100644 --- a/src/app/bookshelf/_components/SortableItm.tsx +++ b/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} > -
openModalWithIsbn(book.isbn)} - > - {book.title} - {/* 제목 오버레이 */} - {!book.thumbnail && ( -
- {book.title} -
- )} -
+ openModalWithIsbn(book.isbn)} + /> ); } diff --git a/src/app/bookshelf/page.tsx b/src/app/bookshelf/page.tsx index 46526d9..f24d1fc 100644 --- a/src/app/bookshelf/page.tsx +++ b/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) => { @@ -58,7 +44,8 @@ export default function Dnd() { const activeItem = allItems.find((book) => book.isbn === activeId); return ( -
+
+

내 서재

))} - {/* 드래그 중인 아이템 */} - - {activeId && activeItem ? ( -
- {isOutside && ( -
- 삭제하기 -
- )} - - -
- ) : null} - - - {isOpen && } + {activeId && activeItem && ( + + )} + {isOpen && }
); } diff --git a/src/app/components/modal/Modal.tsx b/src/app/components/modal/Modal.tsx index 18b8429..56614fb 100644 --- a/src/app/components/modal/Modal.tsx +++ b/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"; diff --git a/src/app/layout.tsx b/src/app/layout.tsx index d00e2a9..7d82310 100644 --- a/src/app/layout.tsx +++ b/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({ diff --git a/src/app/page.tsx b/src/app/page.tsx index 0d8a1e6..48508e6 100644 --- a/src/app/page.tsx +++ b/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(); diff --git a/src/app/search/page.tsx b/src/app/search/page.tsx index 2603fa2..ff1d265 100644 --- a/src/app/search/page.tsx +++ b/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 { diff --git a/src/hooks/useDndSensors.ts b/src/hooks/useDndSensors.ts new file mode 100644 index 0000000..f3b4c93 --- /dev/null +++ b/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, + }, + }), + ); +} diff --git a/src/libs/apis/axiosInstance.ts b/src/services/axiosInstance.ts similarity index 100% rename from src/libs/apis/axiosInstance.ts rename to src/services/axiosInstance.ts diff --git a/src/libs/apis/getDetailByIsbn.ts b/src/services/getDetailByIsbn.ts similarity index 100% rename from src/libs/apis/getDetailByIsbn.ts rename to src/services/getDetailByIsbn.ts diff --git a/src/libs/apis/searchApi.ts b/src/services/searchApi.ts similarity index 100% rename from src/libs/apis/searchApi.ts rename to src/services/searchApi.ts diff --git a/src/libs/apis/todayAuthors.ts b/src/services/todayAuthors.ts similarity index 100% rename from src/libs/apis/todayAuthors.ts rename to src/services/todayAuthors.ts diff --git a/src/libs/apis/todayTopic.ts b/src/services/todayTopic.ts similarity index 100% rename from src/libs/apis/todayTopic.ts rename to src/services/todayTopic.ts diff --git a/src/stores/modal.ts b/src/stores/modal.ts index a0d94f5..cb9e1b1 100644 --- a/src/stores/modal.ts +++ b/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; diff --git a/src/libs/isr/GetIndex.ts b/src/utils/GetIndex.ts similarity index 100% rename from src/libs/isr/GetIndex.ts rename to src/utils/GetIndex.ts diff --git a/src/libs/dnd/dragHelper.ts b/src/utils/bookDragHelper.ts similarity index 100% rename from src/libs/dnd/dragHelper.ts rename to src/utils/bookDragHelper.ts diff --git a/src/utils/bookShelfLabel.ts b/src/utils/bookShelfLabel.ts new file mode 100644 index 0000000..acf057b --- /dev/null +++ b/src/utils/bookShelfLabel.ts @@ -0,0 +1,8 @@ +export function bookShelfLabel(id: string) { + if (id === "toRead") { + return "읽을 책"; + } else if (id === "reading") { + return "읽고 있는 책"; + } + return "다 읽은 책"; +} diff --git a/src/libs/scrollLock/scrollLock.ts b/src/utils/scrollLock.ts similarity index 100% rename from src/libs/scrollLock/scrollLock.ts rename to src/utils/scrollLock.ts