Skip to content

Commit bbabb1d

Browse files
gxxrxngxxrxn
authored
[#662] [내 프로필] 책장, 참여 중인 모임이 비어있을 때 문구 노출 (#663)
* fix: 내 프로필 책장, 참여 중인 모임이 없는 경우 문구 노출 - BookShelf에 EmptyText 컴포넌트 추가 * fix: 직군/직업 정보가 있는 경우만 뱃지 노출되도록 수정 * fix: 사용자 프로필, 책장 페이지 닉네임 없으면 '익명'으로 노출 - 직업 정보 있는 경우만 노출
1 parent ecc1840 commit bbabb1d

File tree

10 files changed

+99
-52
lines changed

10 files changed

+99
-52
lines changed

‎src/app/bookshelf/[bookshelfId]/page.tsx‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,9 @@ import { IconKakao } from '@public/icons';
1414

1515
import useToast from '@/components/common/Toast/useToast';
1616
import TopNavigation from '@/components/common/TopNavigation';
17-
import BookShelfRow from '@/components/bookShelf/BookShelfRow';
17+
import BookShelfRow, {
18+
EmptyBookShelfRow,
19+
} from '@/components/bookShelf/BookShelfRow';
1820
import Button from '@/components/common/Button';
1921
import LikeButton from '@/components/common/LikeButton';
2022
import BackButton from '@/components/common/BackButton';
@@ -51,6 +53,7 @@ const BookShelfInfo = ({ bookshelfId }: { bookshelfId: number }) => {
5153

5254
const { data } = useBookShelfInfoQuery(bookshelfId);
5355
const { isLiked, likeCount, userId, userNickname, job } = data;
56+
const hasJobInfo = job.jobGroupKoreanName && job.jobNameKoreanName;
5457

5558
const { mutate: mutateBookshelfLike } =
5659
useMutateBookshelfLikeQuery(bookshelfId);
@@ -81,7 +84,7 @@ const BookShelfInfo = ({ bookshelfId }: { bookshelfId: number }) => {
8184
</h1>
8285
<div className="flex items-center justify-between">
8386
<span className="text-black-600 font-body2-regular">
84-
{`${job.jobGroupKoreanName} • ${job.jobNameKoreanName}`}
87+
{hasJobInfo && `${job.jobGroupKoreanName} • ${job.jobNameKoreanName}`}
8588
</span>
8689
<LikeButton
8790
isLiked={isLiked}
@@ -120,10 +123,14 @@ const BookShelfContent = ({
120123

121124
return isAuthenticated ? (
122125
<>
123-
{booksData.pages.map(page =>
124-
page.books.map((rowBooks, idx) => (
125-
<BookShelfRow key={idx} books={rowBooks} />
126-
))
126+
{booksData.pages.map((page, pageIdx) =>
127+
page.books.length > 0 ? (
128+
page.books.map((rowBooks, idx) => (
129+
<BookShelfRow key={idx} books={rowBooks} />
130+
))
131+
) : (
132+
<EmptyBookShelfRow key={pageIdx} />
133+
)
127134
)}
128135
{!isFetchingNextPage && <div ref={ref} />}
129136
</>

‎src/app/profile/me/page.tsx‎

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -63,21 +63,15 @@ const MyProfileForUnAuth = () => {
6363
<BookShelf>
6464
<div className="w-app pb-[2.5rem] pt-[2rem] shadow-[0px_20px_20px_-16px_#D1D1D1]">
6565
<BookShelf.Background />
66-
<div className="pb-[5.5rem] pt-[3rem] text-center">
67-
<p className="text-placeholder font-body2-regular">
68-
책장이 비었어요.
69-
</p>
70-
</div>
66+
<BookShelf.EmptyText />
7167
</div>
7268
</BookShelf>
7369
</div>
7470
<div className="flex flex-col gap-[0.6rem]">
7571
<h3 className="font-body1-bold">참여한 모임</h3>
76-
<div className="pb-[5.5rem] pt-[5.5rem] text-center">
77-
<p className="text-placeholder font-body2-regular">
78-
참여 중인 모임이 없어요.
79-
</p>
80-
</div>
72+
<p className="py-[4rem] text-center text-placeholder font-body2-regular">
73+
참여 중인 모임이 없어요.
74+
</p>
8175
</div>
8276
</div>
8377
</>

‎src/components/bookShelf/BookShelf.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -129,8 +129,15 @@ const Book = ({
129129
);
130130
};
131131

132+
const EmptyText = () => (
133+
<p className="pb-[5.5rem] pt-[3rem] text-center text-placeholder font-body2-regular">
134+
책장이 비었어요.
135+
</p>
136+
);
137+
132138
BookShelf.Background = Background;
133139
BookShelf.Info = Info;
134140
BookShelf.Books = Books;
141+
BookShelf.EmptyText = EmptyText;
135142

136143
export default BookShelf;

‎src/components/bookShelf/BookShelfRow.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,3 +14,12 @@ const BookShelfRow = ({ books }: Pick<APIBookshelf, 'books'>) => {
1414
};
1515

1616
export default BookShelfRow;
17+
18+
export const EmptyBookShelfRow = () => (
19+
<BookShelf>
20+
<div className="relative left-[-2rem] w-[calc(100%+4rem)] pb-[2.5rem] pt-[2rem] shadow-[0px_28px_20px_-16px_#D1D1D1]">
21+
<BookShelf.Background />
22+
<BookShelf.EmptyText />
23+
</div>
24+
</BookShelf>
25+
);

‎src/components/profile/bookShelf/ProfileBookshelfPresenter.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,11 @@ const ProfileBookshelfPresenter = ({
2929
<BookShelf>
3030
<div className="w-app pb-[2.5rem] pt-[2rem] shadow-[0px_20px_20px_-16px_#D1D1D1]">
3131
<BookShelf.Background />
32-
<BookShelf.Books books={books} />
32+
{books.length > 0 ? (
33+
<BookShelf.Books books={books} />
34+
) : (
35+
<BookShelf.EmptyText />
36+
)}
3337
</div>
3438
</BookShelf>
3539
</div>

‎src/components/profile/group/ProfileGroupPresenter.tsx‎

Lines changed: 20 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -25,18 +25,26 @@ const ProfileGroupPresenter = ({
2525
<IconArrowRight height="1.3rem" width="1.3rem" />
2626
</Link>
2727

28-
<ul className="relative left-0 flex w-[calc(100%+2rem)] gap-[1rem] overflow-y-hidden overflow-x-scroll pb-[1.5rem] pr-[2rem]">
29-
{bookGroups.map(({ bookGroupId, title, owner, book: { imageUrl } }) => (
30-
<li key={bookGroupId}>
31-
<SimpleBookGroupCard
32-
title={title}
33-
imageSource={imageUrl}
34-
isOwner={!!isGroupOwner && isGroupOwner(owner.id)}
35-
bookGroupId={bookGroupId}
36-
/>
37-
</li>
38-
))}
39-
</ul>
28+
{bookGroups.length > 0 ? (
29+
<ul className="relative left-0 flex w-[calc(100%+2rem)] gap-[1rem] overflow-y-hidden overflow-x-scroll pb-[1.5rem] pr-[2rem]">
30+
{bookGroups.map(
31+
({ bookGroupId, title, owner, book: { imageUrl } }) => (
32+
<li key={bookGroupId}>
33+
<SimpleBookGroupCard
34+
title={title}
35+
imageSource={imageUrl}
36+
isOwner={!!isGroupOwner && isGroupOwner(owner.id)}
37+
bookGroupId={bookGroupId}
38+
/>
39+
</li>
40+
)
41+
)}
42+
</ul>
43+
) : (
44+
<p className="py-[4rem] text-center text-placeholder font-body2-regular">
45+
참여 중인 모임이 없어요.
46+
</p>
47+
)}
4048
</div>
4149
);
4250
};

‎src/components/profile/info/ProfileInfoPresenter.tsx‎

Lines changed: 21 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -11,24 +11,27 @@ const ProfileInfoPresenter = ({
1111
}: ProfileInfoProps) => {
1212
return (
1313
<div className="mb-[2rem] flex flex-col gap-[2rem]">
14-
<div className="flex gap-[0.8rem]">
15-
<Badge
16-
colorScheme="main"
17-
isFilled={false}
18-
size="large"
19-
fontWeight="bold"
20-
>
21-
{jobGroupKoreanName}
22-
</Badge>
23-
<Badge
24-
colorScheme="main"
25-
isFilled={false}
26-
size="large"
27-
fontWeight="bold"
28-
>
29-
{jobNameKoreanName}
30-
</Badge>
31-
</div>
14+
{jobGroupKoreanName && jobNameKoreanName && (
15+
<div className="flex gap-[0.8rem]">
16+
<Badge
17+
colorScheme="main"
18+
isFilled={false}
19+
size="large"
20+
fontWeight="bold"
21+
>
22+
{jobGroupKoreanName}
23+
</Badge>
24+
<Badge
25+
colorScheme="main"
26+
isFilled={false}
27+
size="large"
28+
fontWeight="bold"
29+
>
30+
{jobNameKoreanName}
31+
</Badge>
32+
</div>
33+
)}
34+
3235
<div className="flex items-center gap-[1rem]">
3336
<Avatar src={profileImage} size="large" />
3437
<h2 className="font-subheading-regular">

‎src/queries/bookshelf/useBookShelfInfoQuery.ts‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { APIBookshelfInfo } from '@/types/bookshelf';
33
import useQueryWithSuspense from '@/hooks/useQueryWithSuspense';
44
import bookshelfAPI from '@/apis/bookshelf';
55
import bookShelfKeys from './key';
6+
import { getSafeNickname } from '@/utils/converter';
67

78
const useBookShelfInfoQuery = <TData = APIBookshelfInfo>(
89
bookshelfId: APIBookshelfInfo['bookshelfId'],
@@ -11,9 +12,10 @@ const useBookShelfInfoQuery = <TData = APIBookshelfInfo>(
1112
useQueryWithSuspense(
1213
bookShelfKeys.info(bookshelfId),
1314
() =>
14-
bookshelfAPI
15-
.getBookshelfInfo(bookshelfId)
16-
.then(response => response.data),
15+
bookshelfAPI.getBookshelfInfo(bookshelfId).then(({ data }) => ({
16+
...data,
17+
userNickname: getSafeNickname(data.userId, data.userNickname),
18+
})),
1719
options
1820
);
1921

‎src/queries/user/useUserProfileQuery.ts‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import type { APIUser, APIUserProfile } from '@/types/user';
22
import useQueryWithSuspense, {
33
UseQueryOptionWithoutSuspense,
44
} from '@/hooks/useQueryWithSuspense';
5-
5+
import { getSafeNickname } from '@/utils/converter';
66
import userAPI from '@/apis/user';
77
import userKeys from './key';
88

@@ -12,7 +12,11 @@ const useUserProfileQuery = (
1212
) =>
1313
useQueryWithSuspense(
1414
userKeys.detail(userId),
15-
() => userAPI.getUserProfile({ userId }).then(({ data }) => data),
15+
() =>
16+
userAPI.getUserProfile({ userId }).then(({ data }) => ({
17+
...data,
18+
nickname: getSafeNickname(data.userId, data.nickname),
19+
})),
1620
options
1721
);
1822

‎src/utils/converter.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
export const getSafeNickname = (userId: number, nickname: string) => {
2+
if (nickname) {
3+
return nickname;
4+
} else if (userId) {
5+
return `익명${userId}`;
6+
} else {
7+
return '익명';
8+
}
9+
};

0 commit comments

Comments
 (0)