개발 서적 읽기 섹션 UI 오류 수정

shinwonse · Sep 30, 2024 · cba6558 · cba6558
1 parent 23f2d89
commit cba6558
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 8 deletions.
diff --git a/src/app/components/BookSection/BookSection.tsx b/src/app/components/BookSection/BookSection.tsx
@@ -6,9 +6,9 @@ async function BookSection() {
   const books = await Promise.resolve(getBooks());
 
   return (
-    <section className={cn('size-full px-6 content-visibility-auto')}>
+    <section className={cn('size-full h-full px-6 content-visibility-auto')}>
       <h2 className={cn('mb-4 w-full font-bold')}>개발 서적 읽기</h2>
-      <div className={cn('grid h-full grid-cols-1 gap-10 sm:gap-3')}>
+      <div className={cn('grid h-full grid-cols-1 gap-3')}>
         {books.map((book) => (
           <PostPreview
             key={book.title}

diff --git a/src/app/components/PostPreview/PostPreview.tsx b/src/app/components/PostPreview/PostPreview.tsx
@@ -1,4 +1,3 @@
-import { AspectRatio } from '@/components/ui/aspect-ratio';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { cn } from '@/utils/cn';
 
@@ -10,10 +9,7 @@ type Props = {
 
 function PostPreview({ author, coverImage, title }: Props) {
   return (
-    <AspectRatio
-      className={cn('flex h-16 flex-row items-center gap-4 rounded')}
-      ratio={10}
-    >
+    <div className={cn('flex h-16 flex-row items-center gap-4 rounded')}>
       <Avatar className={cn('size-16 bg-white')}>
         <AvatarImage alt="Random image" src={coverImage} />
         <AvatarFallback>👋</AvatarFallback>
@@ -22,7 +18,7 @@ function PostPreview({ author, coverImage, title }: Props) {
         <h3>{title}</h3>
         <span className={cn('text-xs text-gray-400')}>{author}</span>
       </div>
-    </AspectRatio>
+    </div>
   );
 }