style: text overflow 적용

prgrms-web-devcourse · Feb 26, 2024 · 996e6d8 · 996e6d8
1 parent a5f71dd
commit 996e6d8
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 deletions.
diff --git a/src/app/book/[bookId]/page.tsx b/src/app/book/[bookId]/page.tsx
@@ -56,7 +56,7 @@ const BookTopNavigation = ({ bookId }: { bookId: APIBook['bookId'] }) => (
 
 const BookTitle = ({ bookId }: { bookId: APIBook['bookId'] }) => {
   const { data: title } = useBookTitle(bookId);
-  return <p>{title}</p>;
+  return <p className="w-full truncate">{title}</p>;
 };
 
 const Heading = ({ text }: { text: string }) => (

diff --git a/src/v1/book/detail/BookInfo.tsx b/src/v1/book/detail/BookInfo.tsx
@@ -16,7 +16,7 @@ const BookInfo = ({ bookId }: { bookId: APIBook['bookId'] }) => {
       <div className="flex items-end gap-[2rem]">
         <BookCover size="2xlarge" src={imageUrl} />
 
-        <div className="flex flex-col gap-[0.5rem]">
+        <div className="flex min-w-0 flex-col gap-[0.5rem]">
           <BookmarkButton />
           <BookTitle title={title} />
           <BookAuthor author={author} />
@@ -107,8 +107,10 @@ export const BookInfoSkeleton = () => (
   <Skeleton>
     <div className="flex flex-col gap-[2rem] rounded-l-[1.5rem] bg-white p-[2rem] shadow-bookcard">
       <div className="flex items-end gap-[2rem]">
-        <Skeleton.Rect width="14rem" height="19.6rem" rounded="medium" />
-        <div className="flex flex-col gap-[1rem]">
+        <div className="flex-shrink-0">
+          <Skeleton.Rect width="14rem" height="19.6rem" rounded="medium" />
+        </div>
+        <div className="flex flex-col gap-[1rem] overflow-x-clip">
           <Skeleton.Text fontSize="xlarge" width="16rem" />
           <Skeleton.Text fontSize="small" width="7rem" />
         </div>