feat: 도서검색 결과 UI 수정

prgrms-web-devcourse · Apr 16, 2024 · ba61c14 · ba61c14
1 parent e936f56
commit ba61c14
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 35 deletions.
diff --git a/src/app/book/search/page.tsx b/src/app/book/search/page.tsx
@@ -38,7 +38,7 @@ const BookSearchPage = () => {
   return (
     <>
       <TopHeader text={'Discover'} />
-      <article className="flex max-h-[calc(100%-6rem)] w-full flex-col gap-[3.8rem]">
+      <article className="flex max-h-[calc(100%-6rem)] w-full flex-col gap-[2.4rem]">
         <div className="flex w-full items-center gap-[2rem] border-b-[0.05rem] border-black-900 p-[1rem] focus-within:border-main-900 [&>div]:w-full">
           <IconSearch className="fill-black h-[2.1rem] w-[2.1rem]" />
           <Input

diff --git a/src/v1/bookSearch/SearchResult.tsx b/src/v1/bookSearch/SearchResult.tsx
@@ -1,13 +1,11 @@
-import Image from 'next/image';
 import { useRouter } from 'next/navigation';
 
 import bookAPI from '@/apis/book';
 import type { APISearchedBook } from '@/types/book';
 
 import useToast from '@/v1/base/Toast/useToast';
-import { DATA_URL } from '@/constants/url';
 
-import { LogoWithText } from '@public/icons';
+import BookCover from '../book/BookCover';
 
 type BookSearchResultsProps = {
   searchedBooks: APISearchedBook[];
@@ -42,22 +40,28 @@ const BookSearchResults = ({ searchedBooks }: BookSearchResultsProps) => {
   }
 
   return (
-    <ul className="grid grid-cols-3 gap-[0.6rem]">
-      {searchedBooks.map((searchedBook, idx) => (
-        <SearchedBook
-          key={`${searchedBook.isbn}-${idx}`}
-          imageUrl={searchedBook.imageUrl}
-          title={searchedBook.title}
-          onClick={() => handleClickBook(searchedBook)}
-        />
-      ))}
-    </ul>
+    <>
+      <h3 className="mb-[1rem] font-bold">
+        <span className="">검색 결과 </span>
+        <span className="text-black-500">{300}</span>
+      </h3>
+      <ul className="grid w-full grid-cols-3 gap-[1.6rem]">
+        {searchedBooks.map((searchedBook, idx) => (
+          <BookSearchItem
+            key={`${searchedBook.isbn}-${idx}`}
+            imageUrl={searchedBook.imageUrl}
+            title={searchedBook.title}
+            onClick={() => handleClickBook(searchedBook)}
+          />
+        ))}
+      </ul>
+    </>
   );
 };
 
 export default BookSearchResults;
 
-const SearchedBook = ({
+const BookSearchItem = ({
   imageUrl,
   title,
   onClick,
@@ -69,27 +73,10 @@ const SearchedBook = ({
   return (
     <li
       onClick={onClick}
-      className="flex max-h-[17.2rem] w-full min-w-[10.26rem] max-w-[11.5rem] cursor-pointer flex-col justify-center gap-[0.5rem] rounded-[0.4rem] bg-white px-[1.25rem] py-[1rem] shadow-searchResultItem"
+      className="flex min-h-0 w-full cursor-pointer flex-col gap-[0.8rem] bg-white p-[0.2rem]"
     >
-      <div className="max-h-[12.6rem] max-w-[9rem]">
-        {imageUrl ? (
-          <Image
-            src={imageUrl}
-            alt={title}
-            blurDataURL={DATA_URL['placeholder']}
-            className={
-              'object-fit h-full w-full rounded-[0.5rem] shadow-bookcover'
-            }
-            width={90}
-            height={126}
-          />
-        ) : (
-          <div className="flex h-full max-h-[12.6rem] max-w-[9rem] justify-center">
-            <LogoWithText />
-          </div>
-        )}
-      </div>
-      <p className="max-w-[9rem] truncate text-center text-sm font-normal text-black-900">
+      <BookCover size="fill" src={imageUrl} title={title} />
+      <p className="line-clamp-2 text-sm font-normal leading-tight text-black-900">
         {title}
       </p>
     </li>