Skip to content

Commit

Permalink
feat: 도서검색 결과 UI 수정
Browse files Browse the repository at this point in the history
  • Loading branch information
gxxrxn committed Apr 16, 2024
1 parent e936f56 commit ba61c14
Show file tree
Hide file tree
Showing 2 changed files with 22 additions and 35 deletions.
2 changes: 1 addition & 1 deletion src/app/book/search/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
55 changes: 21 additions & 34 deletions src/v1/bookSearch/SearchResult.tsx
Original file line number Diff line number Diff line change
@@ -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[];
Expand Down Expand Up @@ -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,
Expand All @@ -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>
Expand Down

0 comments on commit ba61c14

Please sign in to comment.