fix: 내 프로필 책장, 참여 중인 모임이 없는 경우 문구 노출

- BookShelf에 EmptyText 컴포넌트 추가
prgrms-web-devcourse · Jul 17, 2024 · 5621891 · 5621891
1 parent ecc1840
commit 5621891
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 23 deletions.
diff --git a/src/app/profile/me/page.tsx b/src/app/profile/me/page.tsx
@@ -63,21 +63,15 @@ const MyProfileForUnAuth = () => {
           <BookShelf>
             <div className="w-app pb-[2.5rem] pt-[2rem] shadow-[0px_20px_20px_-16px_#D1D1D1]">
               <BookShelf.Background />
-              <div className="pb-[5.5rem] pt-[3rem] text-center">
-                <p className="text-placeholder font-body2-regular">
-                  책장이 비었어요.
-                </p>
-              </div>
+              <BookShelf.EmptyText />
             </div>
           </BookShelf>
         </div>
         <div className="flex flex-col gap-[0.6rem]">
           <h3 className="font-body1-bold">참여한 모임</h3>
-          <div className="pb-[5.5rem] pt-[5.5rem] text-center">
-            <p className="text-placeholder font-body2-regular">
-              참여 중인 모임이 없어요.
-            </p>
-          </div>
+          <p className="py-[4rem] text-center text-placeholder font-body2-regular">
+            참여 중인 모임이 없어요.
+          </p>
         </div>
       </div>
     </>

diff --git a/src/components/bookShelf/BookShelf.tsx b/src/components/bookShelf/BookShelf.tsx
@@ -129,8 +129,15 @@ const Book = ({
   );
 };
 
+const EmptyText = () => (
+  <p className="pb-[5.5rem] pt-[3rem] text-center text-placeholder font-body2-regular">
+    책장이 비었어요.
+  </p>
+);
+
 BookShelf.Background = Background;
 BookShelf.Info = Info;
 BookShelf.Books = Books;
+BookShelf.EmptyText = EmptyText;
 
 export default BookShelf;
diff --git a/src/components/profile/bookShelf/ProfileBookshelfPresenter.tsx b/src/components/profile/bookShelf/ProfileBookshelfPresenter.tsx
@@ -29,7 +29,11 @@ const ProfileBookshelfPresenter = ({
       <BookShelf>
         <div className="w-app pb-[2.5rem] pt-[2rem] shadow-[0px_20px_20px_-16px_#D1D1D1]">
           <BookShelf.Background />
-          <BookShelf.Books books={books} />
+          {books.length > 0 ? (
+            <BookShelf.Books books={books} />
+          ) : (
+            <BookShelf.EmptyText />
+          )}
         </div>
       </BookShelf>
     </div>

diff --git a/src/components/profile/group/ProfileGroupPresenter.tsx b/src/components/profile/group/ProfileGroupPresenter.tsx
@@ -25,18 +25,26 @@ const ProfileGroupPresenter = ({
         <IconArrowRight height="1.3rem" width="1.3rem" />
       </Link>
 
-      <ul className="relative left-0 flex w-[calc(100%+2rem)] gap-[1rem] overflow-y-hidden overflow-x-scroll pb-[1.5rem] pr-[2rem]">
-        {bookGroups.map(({ bookGroupId, title, owner, book: { imageUrl } }) => (
-          <li key={bookGroupId}>
-            <SimpleBookGroupCard
-              title={title}
-              imageSource={imageUrl}
-              isOwner={!!isGroupOwner && isGroupOwner(owner.id)}
-              bookGroupId={bookGroupId}
-            />
-          </li>
-        ))}
-      </ul>
+      {bookGroups.length > 0 ? (
+        <ul className="relative left-0 flex w-[calc(100%+2rem)] gap-[1rem] overflow-y-hidden overflow-x-scroll pb-[1.5rem] pr-[2rem]">
+          {bookGroups.map(
+            ({ bookGroupId, title, owner, book: { imageUrl } }) => (
+              <li key={bookGroupId}>
+                <SimpleBookGroupCard
+                  title={title}
+                  imageSource={imageUrl}
+                  isOwner={!!isGroupOwner && isGroupOwner(owner.id)}
+                  bookGroupId={bookGroupId}
+                />
+              </li>
+            )
+          )}
+        </ul>
+      ) : (
+        <p className="py-[4rem] text-center text-placeholder font-body2-regular">
+          참여 중인 모임이 없어요.
+        </p>
+      )}
     </div>
   );
 };