fix: 사용자 프로필, 책장 페이지 닉네임 없으면 '익명'으로 노출

- 직업 정보 있는 경우만 노출
prgrms-web-devcourse · Jul 24, 2024 · 0f6a180 · 0f6a180
1 parent e7bf74b
commit 0f6a180
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 11 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/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/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 '익명';
+  }
+};