From a61d7f50138077d25169223111e746f32111dc40 Mon Sep 17 00:00:00 2001 From: SeanKim05 Date: Wed, 2 Apr 2025 11:16:40 +0900 Subject: [PATCH 1/3] =?UTF-8?q?Design:=20=EC=84=9C=EC=9E=AC=20=EC=BB=A8?= =?UTF-8?q?=ED=85=8C=EC=9D=B4=EB=84=88=20=EB=86=92=EC=9D=B4=EC=88=98?= =?UTF-8?q?=EC=A0=95=20=EB=B0=8F=20=ED=8F=B0=ED=8A=B8=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/bookshelf/_components/Container.tsx | 6 ++---- src/app/bookshelf/page.tsx | 3 ++- src/app/layout.tsx | 5 +---- 3 files changed, 5 insertions(+), 9 deletions(-) diff --git a/src/app/bookshelf/_components/Container.tsx b/src/app/bookshelf/_components/Container.tsx index 033fd18..67fd6d5 100644 --- a/src/app/bookshelf/_components/Container.tsx +++ b/src/app/bookshelf/_components/Container.tsx @@ -37,12 +37,10 @@ export default function Container({ id, items }: ContainerProps) { items={items.map((item) => item.isbn)} strategy={horizontalListSortingStrategy} > - +
{items.map((item) => ( diff --git a/src/app/bookshelf/page.tsx b/src/app/bookshelf/page.tsx index 46526d9..3e2ce6e 100644 --- a/src/app/bookshelf/page.tsx +++ b/src/app/bookshelf/page.tsx @@ -58,7 +58,8 @@ export default function Dnd() { const activeItem = allItems.find((book) => book.isbn === activeId); return ( -
+
+

내 서재

Date: Wed, 2 Apr 2025 14:32:24 +0900 Subject: [PATCH 2/3] =?UTF-8?q?Refactor:=20=EC=84=9C=EC=9E=AC=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8?= =?UTF-8?q?=ED=99=94=20&=20=ED=8F=B4=EB=8D=94=EA=B5=AC=EC=A1=B0=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../bookshelf/_components/BookShelfCard.tsx | 40 +++++++++++++++++++ src/app/bookshelf/_components/Container.tsx | 12 ++---- src/app/bookshelf/_components/DraggedItem.tsx | 25 ++++++++++++ src/app/bookshelf/_components/SortableItm.tsx | 30 +++----------- src/app/bookshelf/page.tsx | 29 ++++---------- src/app/components/modal/Modal.tsx | 2 +- .../dragHelper.ts => utils/bookDragHelper.ts} | 0 src/utils/bookShelfLabel.ts | 8 ++++ src/{libs/scrollLock => utils}/scrollLock.ts | 0 9 files changed, 90 insertions(+), 56 deletions(-) create mode 100644 src/app/bookshelf/_components/BookShelfCard.tsx create mode 100644 src/app/bookshelf/_components/DraggedItem.tsx rename src/{libs/dnd/dragHelper.ts => utils/bookDragHelper.ts} (100%) create mode 100644 src/utils/bookShelfLabel.ts rename src/{libs/scrollLock => utils}/scrollLock.ts (100%) 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 67fd6d5..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} > - +
+ {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 3e2ce6e..94a35b4 100644 --- a/src/app/bookshelf/page.tsx +++ b/src/app/bookshelf/page.tsx @@ -3,7 +3,6 @@ import React, { useState } from "react"; import { DndContext, - DragOverlay, PointerSensor, useSensor, useSensors, @@ -11,19 +10,17 @@ import { } 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"; export default function Dnd() { const { toRead, reading, done, setItems } = useLikedBookStore(); @@ -59,7 +56,7 @@ export default function Dnd() { 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/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 From 8e293f8f852a56c4111b590596a407f8127d6763 Mon Sep 17 00:00:00 2001 From: SeanKim05 Date: Wed, 2 Apr 2025 15:25:59 +0900 Subject: [PATCH 3/3] =?UTF-8?q?Refactor:=20libs=ED=8F=B4=EB=8D=94=20?= =?UTF-8?q?=EC=A0=9C=EA=B1=B0=20->=20services=20&=20utils=EB=A1=9C=20?= =?UTF-8?q?=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/bookshelf/page.tsx | 17 +++-------------- src/app/page.tsx | 6 +++--- src/app/search/page.tsx | 2 +- src/hooks/useDndSensors.ts | 11 +++++++++++ src/{libs/apis => services}/axiosInstance.ts | 0 src/{libs/apis => services}/getDetailByIsbn.ts | 0 src/{libs/apis => services}/searchApi.ts | 0 src/{libs/apis => services}/todayAuthors.ts | 0 src/{libs/apis => services}/todayTopic.ts | 0 src/stores/modal.ts | 2 +- src/{libs/isr => utils}/GetIndex.ts | 0 11 files changed, 19 insertions(+), 19 deletions(-) create mode 100644 src/hooks/useDndSensors.ts rename src/{libs/apis => services}/axiosInstance.ts (100%) rename src/{libs/apis => services}/getDetailByIsbn.ts (100%) rename src/{libs/apis => services}/searchApi.ts (100%) rename src/{libs/apis => services}/todayAuthors.ts (100%) rename src/{libs/apis => services}/todayTopic.ts (100%) rename src/{libs/isr => utils}/GetIndex.ts (100%) diff --git a/src/app/bookshelf/page.tsx b/src/app/bookshelf/page.tsx index 94a35b4..f24d1fc 100644 --- a/src/app/bookshelf/page.tsx +++ b/src/app/bookshelf/page.tsx @@ -1,13 +1,7 @@ "use client"; import React, { useState } from "react"; -import { - DndContext, - PointerSensor, - useSensor, - useSensors, - rectIntersection, -} from "@dnd-kit/core"; +import { DndContext, rectIntersection } from "@dnd-kit/core"; import Container from "./_components/Container"; import { useLikedBookStore } from "@/stores/likedBooks"; @@ -21,6 +15,7 @@ import { likedBook } from "@/types/common"; import Modal from "../components/modal/Modal"; import { useModalStore } from "@/stores/modal"; import DraggedItem from "./_components/DraggedItem"; +import { useDndSensors } from "@/hooks/useDndSensors"; export default function Dnd() { const { toRead, reading, done, setItems } = useLikedBookStore(); @@ -35,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) => { 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