fix: 도서 목록 이미지 사이즈 일관되게 수정, 대출 데이터가 없는 도서 정보 처리 (#71)

src/app/book/[isbn]/_components/BookDetails/components/BookCover/index.module.scss

@@ -42,9 +42,9 @@ $backdrop-filter-brightness: 110%;
   -webkit-box-shadow: 0px 0px 40px 6px rgba(9, 9, 9, 0.3);
   box-shadow: 0px 0px 40px 6px rgba(109, 108, 108, 0.3);
   border-radius: $img-border-radius;
+  aspect-ratio: 2/3;
 
   width: 20rem;
-  height: 32rem;
   img {
     border-radius: inherit;
   }

src/app/book/[isbn]/_components/BookDetails/components/BookCover/index.tsx

@@ -24,6 +24,7 @@ const BookCoverLayout = ({ bookDetailData }: BookCoverLayoutProps) => {
             fill
             placeholder="blur"
             blurDataURL={gray200BlurDataURL}
+            quality={100}
           />
         ) : (
           <div className={styles.coverImageSkeleton}></div>

src/app/book/[isbn]/_components/BookDetails/components/BookOverview/index.tsx

@@ -11,11 +11,11 @@ interface BookOverviewLoadedProps {
 const BookOverviewLoaded = ({ bookDetailData }: BookOverviewLoadedProps) => {
   const { author, publisher, publicationYear, loans, title } = bookDetailData;
 
-  const bookSummary = [
-    `${author} 저자(글)`,
-    `${publisher}﹒${publicationYear}년`,
-    `대출 ${loans.rank}위 (${loans.count}건)`,
-  ];
+  const bookSummary = [`${author} 저자(글)`, `${publisher}﹒${publicationYear}년`];
+
+  if (loans.count && loans.rank) {
+    bookSummary.push(`대출 ${loans.rank}위 (${loans.count}건)`);
+  }
 
   return (
     <div className={styles.bookOverview}>

src/components/ScrollObserver/index.tsx

@@ -7,7 +7,7 @@ const ScrollObserver = (props: UseFetchBooksActionProps) => {
   const { fetchMoreBooksAction, isPending, isLastPage } = useFetchBooksAction(props);
   const { observerTargetRef } = useObserver({ isLastPage, isPending, fetchMoreBooksAction });
 
-  return <>{!isLastPage && <div ref={observerTargetRef} style={{ height: '1px' }} />}</>;
+  return <>{!isLastPage && <div ref={observerTargetRef} style={{ minHeight: '1px' }} />}</>;
 };
 
 export default ScrollObserver;

src/components/book/BookCover/index.module.scss

@@ -4,9 +4,10 @@
 .imgWrapper {
   position: relative;
   aspect-ratio: 2/3;
-
   & > img {
     border-radius: var(--book-cover-border-radius);
+    width: inherit;
+    height: auto;
   }
 }
 

src/components/book/BookCover/index.tsx

@@ -6,21 +6,23 @@ import NoCoverImg from '@/images/noCover.svg';
 import { BookItemData } from '@/types';
 
 import styles from './index.module.scss';
-
 interface BookCoverLoadedProps {
+  imgWidth?: number;
   classNameForWidth: string;
   bookItemData: BookItemData;
 }
 
-const BookCoverLoaded = ({ bookItemData, classNameForWidth }: BookCoverLoadedProps) => {
+const BookCoverLoaded = ({ bookItemData, classNameForWidth, imgWidth = 100 }: BookCoverLoadedProps) => {
   return (
     <div className={classNames(styles.imgWrapper, classNameForWidth)}>
       <Image
         src={bookItemData.coverImageUrl !== '' ? bookItemData.coverImageUrl : NoCoverImg}
         placeholder="blur"
         blurDataURL={gray200BlurDataURL}
         alt=""
-        fill
+        width={imgWidth}
+        height={(imgWidth * 3) / 2}
+        quality={100}
       />
     </div>
   );

src/components/book/BookItem/_variables.scss

@@ -1,2 +1,2 @@
 $img__width-basic: 8rem;
-$img__width-small: 7rem;
+$img__width-small: 6rem;

src/components/carousel/SwipeableCarousel/components/SwipeableBookCard/index.module.scss

@@ -1,17 +1,26 @@
 @use '@/styles/mixins' as mixins;
 
 $img__width-basic: 10rem;
+$img__width-small: 7rem;
 
 .container {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 1rem;
   width: $img__width-basic;
+
+  @media screen and (max-width: 425px) {
+    width: $img__width-small;
+  }
 }
 
 .cover {
   width: $img__width-basic;
+
+  @media screen and (max-width: 425px) {
+    width: $img__width-small;
+  }
 }
 
 .bookInfo {

src/styles/reset.scss

@@ -77,7 +77,6 @@ a:not([class]) {
 img,
 picture {
   display: block;
-  max-width: 100%;
 }
 
 /* Inherit fonts for inputs and buttons */