From d823ed8626d773d7fe337eea211dd26d7b3db853 Mon Sep 17 00:00:00 2001 From: Choongman Kim Date: Thu, 6 Mar 2025 22:08:33 +0900 Subject: [PATCH 1/3] =?UTF-8?q?Refact:=20=EA=B0=80=EB=8F=85=EC=84=B1?= =?UTF-8?q?=EC=9D=84=20=EC=9C=84=ED=95=B4=20=EC=BD=94=EB=93=9C=20=EB=B6=84?= =?UTF-8?q?=EB=A6=AC=20&=20=EC=A4=91=EB=B3=B5=20=EC=BD=94=EB=93=9C=20?= =?UTF-8?q?=EA=B5=AC=EC=A1=B0=20=EB=B0=B0=EC=97=B4=EB=A1=9C=20=EA=B5=AC?= =?UTF-8?q?=EC=84=B1=ED=95=9C=20=ED=9B=84=20map=20=EC=88=9C=ED=9A=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../_components/presentation/BookItem.tsx | 82 ++++++++++++++++++ .../_components/presentation/SearchResult.tsx | 86 +------------------ 2 files changed, 86 insertions(+), 82 deletions(-) create mode 100644 src/app/search/_components/presentation/BookItem.tsx diff --git a/src/app/search/_components/presentation/BookItem.tsx b/src/app/search/_components/presentation/BookItem.tsx new file mode 100644 index 0000000..06fc994 --- /dev/null +++ b/src/app/search/_components/presentation/BookItem.tsx @@ -0,0 +1,82 @@ +import React from "react"; +import Image from "next/image"; +import noImage from "/public/NoBookImage.jpeg"; +import Bookmark from "@/app/components/Bookmark"; +import { Book } from "@/types/common"; + +interface BookItemProps { + book: Book; +} + +function extractISBN(isbn: string) { + const [isbn10, isbn13] = isbn.split(" "); + return { isbn10, isbn13 }; +} + +function formatDate(dateTime?: string) { + if (!dateTime) return "표시할 날짜가 없습니다."; + return dateTime.split("T")[0]; +} + +function BookItem({ book }: BookItemProps) { + const { isbn10, isbn13 } = extractISBN(book.isbn); + const publishedDate = formatDate(book.datetime); + + const hasTranslators = book.translators && book.translators.length > 0; + + const detailList = [ + { label: "작가", value: book.authors }, + hasTranslators ? { label: "번역", value: book.translators } : null, + { label: "출판사", value: book.publisher }, + { label: "출판 날짜", value: publishedDate }, + { label: "ISBN-10", value: isbn10 }, + { label: "ISBN-13", value: isbn13 }, + ].filter(Boolean); + + return ( +
  • +
    + + {`${book.title} + + +
    + +
    +
    +

    + {book.title} +

    + +

    + {book.contents} +

    +
    + +
    + {detailList.map((detail) => ( +
    +
    {detail?.label}
    +
    {detail?.value}
    +
    + ))} +
    +
    + + +
    +
    • + ); +} + +export default React.memo(BookItem); diff --git a/src/app/search/_components/presentation/SearchResult.tsx b/src/app/search/_components/presentation/SearchResult.tsx index 10d6a3a..045853f 100644 --- a/src/app/search/_components/presentation/SearchResult.tsx +++ b/src/app/search/_components/presentation/SearchResult.tsx @@ -1,9 +1,6 @@ -import Image from "next/image"; -import noImage from "/public/NoBookImage.jpeg"; - +import BookItem from "./BookItem"; import SortSearch from "../SortSelect"; import Pagination from "../Pagination"; -import Bookmark from "@/app/components/Bookmark"; import { Book, BookResponse } from "@/types/common"; @@ -26,86 +23,11 @@ export default function SearchResult({ currentPageNum, }: SearchResultProps) { return ( -
    +
    -
      +
        {allDocs.map((book) => { - return ( -
      • -
        - - {`${book.title} - - -
        - -
        -
        -

        - {book.title} -

        - -

        - {book.contents} -

        -
        - -
        -
        -
        작가
        -
        {book.authors}
        -
        - - {book.translators && book.translators.length > 0 ? ( -
        -
        번역
        -
        {book.translators}
        -
        - ) : null} - -
        -
        출판사
        -
        {book.publisher}
        -
        - -
        -
        출판 날짜
        -
        - {book.datetime ? book.datetime.split("T")[0] : "x"} -
        -
        - - {book.isbn.split(" ")[0] && ( -
        -
        ISBN-10
        -
        - {book.isbn.split(" ")[0]} -
        -
        - )} - -
        -
        ISBN-13
        -
        - {book.isbn.split(" ")[1]} -
        -
        -
        -
        - - -
        -
        • - ); + return ; })}
      From 33d92194128a01f79b8908e104579089442ebfe4 Mon Sep 17 00:00:00 2001 From: Choongman Kim Date: Thu, 6 Mar 2025 22:09:04 +0900 Subject: [PATCH 2/3] =?UTF-8?q?Design:=20=EB=B0=98=EC=9D=91=ED=98=95=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/components/Bookmark.tsx | 4 +- src/app/components/Dropdown.tsx | 2 +- src/app/components/Navbar.tsx | 54 ++++++++++++----------- src/app/components/SearchBar.tsx | 6 +-- src/app/globals.css | 10 +++-- src/app/search/_components/Pagination.tsx | 6 +-- src/app/search/_components/SortSelect.tsx | 2 +- src/app/search/page.tsx | 2 +- 8 files changed, 47 insertions(+), 39 deletions(-) diff --git a/src/app/components/Bookmark.tsx b/src/app/components/Bookmark.tsx index 79b0030..cd9d35a 100644 --- a/src/app/components/Bookmark.tsx +++ b/src/app/components/Bookmark.tsx @@ -56,8 +56,8 @@ export default function Bookmark({ buttonClassName={`${btnPosition} group absolute top-4 z-10 cursor-pointer`} onClick={(e) => handleClickBookmark(e, book.isbn)} src={bookmarkIcon} - width={30} - height={30} + width={25} + height={25} alt="북마크 추가" imgClassName='transition-transform duration-100 ease-in group-hover:scale-110"' /> diff --git a/src/app/components/Dropdown.tsx b/src/app/components/Dropdown.tsx index ca0fa76..c572915 100644 --- a/src/app/components/Dropdown.tsx +++ b/src/app/components/Dropdown.tsx @@ -58,7 +58,7 @@ export default function Dropdown({ return (
      e.stopPropagation()} >