From cba6558caf32c92a6653121d4988a487700e03a6 Mon Sep 17 00:00:00 2001
From: Shin Wonse <62709718+shinwonse@users.noreply.github.com>
Date: Mon, 30 Sep 2024 22:21:59 +0900
Subject: [PATCH] =?UTF-8?q?=EA=B0=9C=EB=B0=9C=20=EC=84=9C=EC=A0=81=20?=
 =?UTF-8?q?=EC=9D=BD=EA=B8=B0=20=EC=84=B9=EC=85=98=20UI=20=EC=98=A4?=
 =?UTF-8?q?=EB=A5=98=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/components/BookSection/BookSection.tsx | 4 ++--
 src/app/components/PostPreview/PostPreview.tsx | 8 ++------
 2 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/src/app/components/BookSection/BookSection.tsx b/src/app/components/BookSection/BookSection.tsx
index 0c73dbb..7f9dd93 100644
--- 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
index 4cb12a8..1a17029 100644
--- 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>
   );
 }