[#662] [내 프로필] 책장, 참여 중인 모임이 비어있을 때 문구 노출 (#663)

* fix: 내 프로필 책장, 참여 중인 모임이 없는 경우 문구 노출 - BookShelf에 EmptyText 컴포넌트 추가 * fix: 직군/직업 정보가 있는 경우만 뱃지 노출되도록 수정 * fix: 사용자 프로필, 책장 페이지 닉네임 없으면 '익명'으로 노출 - 직업 정보 있는 경우만 노출
prgrms-web-devcourse · Jul 24, 2024 · bbabb1d · bbabb1d
1 parent ecc1840
commit bbabb1d
Show file tree

Hide file tree

Showing 10 changed files with 99 additions and 52 deletions.
diff --git a/src/app/bookshelf/[bookshelfId]/page.tsx b/src/app/bookshelf/[bookshelfId]/page.tsx
@@ -14,7 +14,9 @@ import { IconKakao } from '@public/icons';
 
 import useToast from '@/components/common/Toast/useToast';
 import TopNavigation from '@/components/common/TopNavigation';
-import BookShelfRow from '@/components/bookShelf/BookShelfRow';
+import BookShelfRow, {
+  EmptyBookShelfRow,
+} from '@/components/bookShelf/BookShelfRow';
 import Button from '@/components/common/Button';
 import LikeButton from '@/components/common/LikeButton';
 import BackButton from '@/components/common/BackButton';
@@ -51,6 +53,7 @@ const BookShelfInfo = ({ bookshelfId }: { bookshelfId: number }) => {
 
   const { data } = useBookShelfInfoQuery(bookshelfId);
   const { isLiked, likeCount, userId, userNickname, job } = data;
+  const hasJobInfo = job.jobGroupKoreanName && job.jobNameKoreanName;
 
   const { mutate: mutateBookshelfLike } =
     useMutateBookshelfLikeQuery(bookshelfId);
@@ -81,7 +84,7 @@ const BookShelfInfo = ({ bookshelfId }: { bookshelfId: number }) => {
       </h1>
       <div className="flex items-center justify-between">
         <span className="text-black-600 font-body2-regular">
-          {`${job.jobGroupKoreanName} • ${job.jobNameKoreanName}`}
+          {hasJobInfo && `${job.jobGroupKoreanName} • ${job.jobNameKoreanName}`}
         </span>
         <LikeButton
           isLiked={isLiked}
@@ -120,10 +123,14 @@ const BookShelfContent = ({
 
   return isAuthenticated ? (
     <>
-      {booksData.pages.map(page =>
-        page.books.map((rowBooks, idx) => (
-          <BookShelfRow key={idx} books={rowBooks} />
-        ))
+      {booksData.pages.map((page, pageIdx) =>
+        page.books.length > 0 ? (
+          page.books.map((rowBooks, idx) => (
+            <BookShelfRow key={idx} books={rowBooks} />
+          ))
+        ) : (
+          <EmptyBookShelfRow key={pageIdx} />
+        )
       )}
       {!isFetchingNextPage && <div ref={ref} />}
     </>

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/bookShelf/BookShelfRow.tsx b/src/components/bookShelf/BookShelfRow.tsx
@@ -14,3 +14,12 @@ const BookShelfRow = ({ books }: Pick<APIBookshelf, 'books'>) => {
 };
 
 export default BookShelfRow;
+
+export const EmptyBookShelfRow = () => (
+  <BookShelf>
+    <div className="relative left-[-2rem] w-[calc(100%+4rem)] pb-[2.5rem] pt-[2rem] shadow-[0px_28px_20px_-16px_#D1D1D1]">
+      <BookShelf.Background />
+      <BookShelf.EmptyText />
+    </div>
+  </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>
   );
 };

diff --git a/src/components/profile/info/ProfileInfoPresenter.tsx b/src/components/profile/info/ProfileInfoPresenter.tsx
@@ -11,24 +11,27 @@ const ProfileInfoPresenter = ({
 }: ProfileInfoProps) => {
   return (
     <div className="mb-[2rem] flex flex-col gap-[2rem]">
-      <div className="flex gap-[0.8rem]">
-        <Badge
-          colorScheme="main"
-          isFilled={false}
-          size="large"
-          fontWeight="bold"
-        >
-          {jobGroupKoreanName}
-        </Badge>
-        <Badge
-          colorScheme="main"
-          isFilled={false}
-          size="large"
-          fontWeight="bold"
-        >
-          {jobNameKoreanName}
-        </Badge>
-      </div>
+      {jobGroupKoreanName && jobNameKoreanName && (
+        <div className="flex gap-[0.8rem]">
+          <Badge
+            colorScheme="main"
+            isFilled={false}
+            size="large"
+            fontWeight="bold"
+          >
+            {jobGroupKoreanName}
+          </Badge>
+          <Badge
+            colorScheme="main"
+            isFilled={false}
+            size="large"
+            fontWeight="bold"
+          >
+            {jobNameKoreanName}
+          </Badge>
+        </div>
+      )}
+
       <div className="flex items-center gap-[1rem]">
         <Avatar src={profileImage} size="large" />
         <h2 className="font-subheading-regular">

diff --git a/src/queries/bookshelf/useBookShelfInfoQuery.ts b/src/queries/bookshelf/useBookShelfInfoQuery.ts
@@ -3,6 +3,7 @@ import { APIBookshelfInfo } from '@/types/bookshelf';
 import useQueryWithSuspense from '@/hooks/useQueryWithSuspense';
 import bookshelfAPI from '@/apis/bookshelf';
 import bookShelfKeys from './key';
+import { getSafeNickname } from '@/utils/converter';
 
 const useBookShelfInfoQuery = <TData = APIBookshelfInfo>(
   bookshelfId: APIBookshelfInfo['bookshelfId'],
@@ -11,9 +12,10 @@ const useBookShelfInfoQuery = <TData = APIBookshelfInfo>(
   useQueryWithSuspense(
     bookShelfKeys.info(bookshelfId),
     () =>
-      bookshelfAPI
-        .getBookshelfInfo(bookshelfId)
-        .then(response => response.data),
+      bookshelfAPI.getBookshelfInfo(bookshelfId).then(({ data }) => ({
+        ...data,
+        userNickname: getSafeNickname(data.userId, data.userNickname),
+      })),
     options
   );
 

diff --git a/src/queries/user/useUserProfileQuery.ts b/src/queries/user/useUserProfileQuery.ts
@@ -2,7 +2,7 @@ import type { APIUser, APIUserProfile } from '@/types/user';
 import useQueryWithSuspense, {
   UseQueryOptionWithoutSuspense,
 } from '@/hooks/useQueryWithSuspense';
-
+import { getSafeNickname } from '@/utils/converter';
 import userAPI from '@/apis/user';
 import userKeys from './key';
 
@@ -12,7 +12,11 @@ const useUserProfileQuery = (
 ) =>
   useQueryWithSuspense(
     userKeys.detail(userId),
-    () => userAPI.getUserProfile({ userId }).then(({ data }) => data),
+    () =>
+      userAPI.getUserProfile({ userId }).then(({ data }) => ({
+        ...data,
+        nickname: getSafeNickname(data.userId, data.nickname),
+      })),
     options
   );
 

diff --git a/src/utils/converter.ts b/src/utils/converter.ts
@@ -0,0 +1,9 @@
+export const getSafeNickname = (userId: number, nickname: string) => {
+  if (nickname) {
+    return nickname;
+  } else if (userId) {
+    return `익명${userId}`;
+  } else {
+    return '익명';
+  }
+};