feat: BookCover 컴포넌트 fill size 추가

prgrms-web-devcourse · Apr 16, 2024 · e936f56 · e936f56
1 parent d0492db
commit e936f56
Showing 1 changed file with 25 additions and 11 deletions.
diff --git a/src/v1/book/BookCover.tsx b/src/v1/book/BookCover.tsx
@@ -9,9 +9,10 @@ type BookCoverSize =
   | 'medium'
   | 'large'
   | 'xlarge'
-  | '2xlarge';
+  | '2xlarge'
+  | 'fill';
 
-type BookCoverProps = Required<
+type BookCoverProps = Partial<
   Pick<ComponentPropsWithoutRef<typeof Image>, 'src'>
 > & {
   title?: string;
@@ -56,22 +57,35 @@ const getCoverSize = (size: BookCoverSize) => {
         sizeProps: { width: 140, height: 196 },
       } as const;
     }
+    case 'fill':
+      return {
+        sizeClasses: 'w-full aspect-[5/7]',
+        sizeProps: { fill: true },
+      };
   }
 };
 
 const BookCover = ({ src, title, size = 'medium' }: BookCoverProps) => {
   const { sizeClasses, sizeProps } = getCoverSize(size);
+  const defaultCoverClass = src ? '' : 'shadow-bookcover';
 
   return (
-    <div className={`relative flex-shrink-0 ${sizeClasses}`}>
-      <Image
-        src={src}
-        alt={title || 'book-cover'}
-        placeholder="blur"
-        blurDataURL={DATA_URL['placeholder']}
-        className={`object-fit h-full w-full rounded-[0.5rem] shadow-bookcover`}
-        {...sizeProps}
-      />
+    <div
+      className={`relative flex-shrink-0 ${sizeClasses} rounded-[0.5rem] bg-black-300 ${defaultCoverClass}`}
+    >
+      {src ? (
+        <Image
+          src={src}
+          alt={title || 'book-cover'}
+          placeholder="blur"
+          blurDataURL={DATA_URL['placeholder']}
+          className={`object-fit h-full w-full rounded-[0.5rem] shadow-bookcover`}
+          {...sizeProps}
+        />
+      ) : (
+        /** default cover line */
+        <div className="absolute left-[5%] h-full w-[0.3rem] bg-black-400"></div>
+      )}
     </div>
   );
 };