Skip to content

[Feat/#192]: 책정보 없는경우 대체 ui 적용 #193

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
SebellKo merged 10 commits into from
Aug 4, 2025
Merged

[Feat/#192]: 책정보 없는경우 대체 ui 적용 #193

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
693c411
[Feat/#192]: 프로필 피드 아이템 적용
SebellKo Aug 4, 2025
3f8ba47
[Feat/#192]: BookInfo 대체 ui 적용
SebellKo Aug 4, 2025
2e6e6d8
[Feat/#192]: 우물 아이템 대체 ui 적용
SebellKo Aug 4, 2025
bed0903
[Feat/#192]: 피드 > 책정보 대체 ui 적용
SebellKo Aug 4, 2025
f5a61e3
[Fix/#192]: 분기 추가
SebellKo Aug 4, 2025
1632a45
[Chore/#192]: 이미지 로직 수정
SebellKo Aug 4, 2025
6bfc25f
[Chore/#192]: 대체 텍스트 변경
SebellKo Aug 4, 2025
ee2ad8a
[Chore/#192]: empty 로직 변경
SebellKo Aug 4, 2025
fb9776d
[Fix/#192]: 린트에러 해결
SebellKo Aug 4, 2025
a99c6bd
Merge branch 'dev' into feat/#192
SebellKo Aug 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 25 additions & 5 deletions src/components/Book/BookInfo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ interface Props {
/** 도서 상세 페이지, 리뷰/메모 리스트 내 도서 정보 컴포넌트 (도서 커버, 배경 포함) */
function BookInfo({ bookId, bookData, canClick = false }: Props) {
const isInFeed = useIsInFeed();
const isEmpty = !bookData.title;
Copy link
Contributor Author

@SebellKo SebellKo Aug 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

author가 unknown으로 렌더링 되는 경우도 있어서 title이 없는 경우를 empty 상태로 판단했습니다.


return (
<CustomLink
Expand All @@ -41,12 +42,31 @@ function BookInfo({ bookId, bookData, canClick = false }: Props) {
/>
</div>

<Book imageUrl={bookData?.image} canClick={canClick} />
<Book
imageUrl={bookData.image || IMAGES.book.cover}
canClick={canClick}
/>
<div className='flex-col-center w-[80%] gap-[4px]'>
<h3 className='text-center text-title-lg-bold'>{bookData?.title}</h3>
<span className='flex text-body-sm text-gray-600'>
{bookData?.author} | {bookData?.publisher}
</span>
{isEmpty && (
<>
<span className='rounded-[12px] bg-gray-900 px-[12px] py-[4px] text-caption-bold text-white'>
...
</span>
<h1 className='text-title-lg-bold text-gray-800'>
책 정보 불러오는 중...
</h1>
</>
)}
{!isEmpty && (
<>
<h3 className='text-center text-title-lg-bold'>
{bookData?.title}
</h3>
<span className='flex text-body-sm text-gray-600'>
{bookData?.author} | {bookData?.publisher}
</span>
</>
)}
</div>
</CustomLink>
);
Expand Down
35 changes: 22 additions & 13 deletions src/features/Feed/components/FeedList/BookInfo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,17 +25,22 @@ function BookInfo({
hasToolTip = true,
}: Props) {
const { bookData } = useBook(feedData.isbn);

if (!bookData) return null;

const fallbackCategory = 'cartoon';
Copy link
Contributor Author

@SebellKo SebellKo Aug 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

디자인 시안상 fallback ui 색상이 cartoon이라 이걸로 적용했습니다.


const { title, author, publisher, category, image } = bookData;

return (
<div className='pt-[30px]'>
<div
className={`relative flex h-fit w-full gap-[16px] rounded-t-[20px] bg-category-bg-${category} px-page pt-[24px]`}
className={`relative flex h-fit w-full gap-[16px] rounded-t-[20px] bg-category-bg-${category || fallbackCategory} px-page pt-[24px]`}
>
{hasToolTip && (
<div className={`tooltip-feed border-b-category-bg-${category}`} />
<div
className={`tooltip-feed border-b-category-bg-${category || fallbackCategory}`}
/>
)}
<div className='flex'>
<Image
Expand All @@ -54,19 +59,23 @@ function BookInfo({
>
<div className='flex w-full flex-col gap-[4px]'>
<h5
className={`line-clamp-1 w-full text-body-lg-bold text-category-text-${category}`}
className={`line-clamp-1 w-full text-body-lg-bold text-category-text-${category || fallbackCategory}`}
>
{title}
{title || '책 정보 불러오는 중...'}
</h5>
<ul
className={`line-clamp-1 flex text-caption-bold text-category-text-${category}`}
className={`line-clamp-1 flex text-caption-bold text-category-text-${category || fallbackCategory}`}
>
<li className="after:content-['|']">
<span className='pr-[6px]'>{author}</span>
</li>
<li>
<span className='pl-[6px]'>{publisher}</span>
</li>
{title && (
<>
<li className='after:content-["|"]'>
<span className='pr-[6px]'>{author}</span>
</li>
<li>
<span className='pl-[6px]'>{publisher}</span>
</li>
</>
)}
</ul>
</div>
<div className='w-full'>
Expand All @@ -86,8 +95,8 @@ function BookInfo({
) : (
<Rating
rating={!isGetMemoRes(feedData) ? feedData.rating : null}
textClass={`text-heading-lg-bold text-category-text-${category}`}
categoryId={category}
textClass={`text-heading-lg-bold text-category-text-${category || fallbackCategory}`}
categoryId={category || fallbackCategory}
/>
)}
</div>
Expand Down
11 changes: 6 additions & 5 deletions src/features/Profile/components/Feed/ProfileFeedItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import React from 'react';
import { getPath } from '@/utils/getPath';
import { useUserId } from '@/store/sessionStore';
import { useCustomRouter } from '@/hooks/useCustomRouter';
import { IMAGES } from '@/constants/images';

interface Props {
feedData: GetProfileFeedItem;
Expand All @@ -23,16 +24,16 @@ function ProfileFeedItem({ feedData }: Props) {
<div className='flex w-[calc(50%-10px)] flex-col overflow-hidden rounded-[12px]'>
<div
className='absolute rounded-br-[12px] rounded-tl-[12px] bg-gray-900 px-[12px] py-[4px]'
style={{ color: CATEGORY[category].band }}
style={{ color: category ? CATEGORY[category].band : '#fff' }}
>
{CATEGORY[category].name}
{category ? CATEGORY[category].name : '...'}
</div>
<Image
src={image!}
src={image || IMAGES.book.cover}
alt='book cover'
width={191}
height={272}
className='flex-[8] cursor-pointer'
height={244}
className='flex-[8] cursor-pointer object-cover'
onClick={() =>
navigate(getPath.rootUserMemo(userId!, wellId!, isbn), {
from: 'profile',
Expand Down
20 changes: 13 additions & 7 deletions src/features/Well/components/Well/WellItem/WellItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ function WellItem({
const height = page > 400 ? page * 0.15 : 55;
const isReading = status === 'reading';
const hasMemo = memo_cnt > 0;
const fallbackCategory = 'economic_business';
Copy link
Contributor Author

@SebellKo SebellKo Aug 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

여기도 마찬가지로 디자인 시안상 fallback ui 카테고리가 이거여서 이걸로 설정했습니다.


useEffect(() => {
let timeoutId: NodeJS.Timeout;
Expand Down Expand Up @@ -89,7 +90,7 @@ function WellItem({
newItemId === id && isTopItem ? staggerItemVariants : undefined
}
style={{ zIndex, height }}
className={`flex h-fit w-full bg-category-bg-${category} relative z-auto box-border justify-center pt-[12px]`}
className={`flex h-fit w-full bg-category-bg-${category || fallbackCategory} relative z-auto box-border justify-center pt-[12px]`}
>
{isLastItem && (
<div
Expand All @@ -99,7 +100,9 @@ function WellItem({
/>
)}
<Image
src={CATEGORY[category].wave}
src={
category ? CATEGORY[category].wave : CATEGORY[fallbackCategory].wave
}
alt='wave'
width={392}
height={12}
Expand All @@ -108,21 +111,24 @@ function WellItem({
/>
{isReading && (
<WellBubble
fill={CATEGORY[category].band}
fill={CATEGORY[category || fallbackCategory].band}
className='absolute left-[24px] top-[8px]'
/>
)}
{hasMemo && (
<MemoLeaf bg={CATEGORY[category].text} line={CATEGORY[category].bg} />
<MemoLeaf
bg={CATEGORY[category || fallbackCategory].text}
line={CATEGORY[category || fallbackCategory].bg}
/>
)}
<span
className={`text-category-text-${category} truncate text-center text-body-sm-bold ${isReading || hasMemo ? 'w-[65%]' : 'w-[90%]'}`}
className={`text-category-text-${category || fallbackCategory} truncate text-center text-body-sm-bold ${isReading || hasMemo ? 'w-[65%]' : 'w-[90%]'}`}
>
{title}
{title || '책 정보 불러오는 중...'}
</span>
</motion.div>
<div
className={`absolute h-[20px] w-full bg-category-bg-${category} bottom-0 left-0 z-0`}
className={`absolute h-[20px] w-full bg-category-bg-${category || fallbackCategory} bottom-0 left-0 z-0`}
/>
<AnimatePresence>
{isFirstMemo && (
Expand Down