Skip to content

Commit fbe50da

Browse files
gxxrxngxxrxn
authored
[#616] 책장 좋아요 뱃지 UI 수정 (#620)
* refactor: Badge style 수정 - 모임 목록 페이지 카드 badge size medium으로 통일 * feat: svgo removeViewBox 속성 off * refactor: like button style 수정, heart svg 수정 * refactor: 북카이브 책장, 프로필 페이지 책장/모임 영역 ui(좋아요 개수 위치, 더보기 화살표) 수정
1 parent 722cd50 commit fbe50da

File tree

8 files changed

+53
-45
lines changed

8 files changed

+53
-45
lines changed

‎next.config.js‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,25 @@ const nextConfig = {
77
webpack: config => {
88
config.module.rules.push({
99
test: /\.svg$/,
10-
use: ['@svgr/webpack'],
10+
use: [
11+
{
12+
loader: '@svgr/webpack',
13+
options: {
14+
svgoConfig: {
15+
plugins: [
16+
{
17+
name: 'preset-default',
18+
params: {
19+
overrides: {
20+
removeViewBox: false,
21+
},
22+
},
23+
},
24+
],
25+
},
26+
},
27+
},
28+
],
1129
});
1230
return config;
1331
},

‎public/icons/heart.svg‎

Lines changed: 2 additions & 2 deletions
Loading

‎src/v1/base/Badge.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ const Badge = ({
8282

8383
return (
8484
<div
85-
className={`m-0 flex w-fit items-center justify-center gap-[0.4rem] rounded-[0.5rem] border-[0.05rem] px-[0.8rem] py-[0.25rem] ${computedClasses}`}
85+
className={`m-0 flex w-fit items-center justify-center gap-[0.4rem] rounded-[0.5rem] border-[0.1rem] px-[0.6rem] py-[0.25rem] ${computedClasses}`}
8686
{...props}
8787
>
8888
{children}

‎src/v1/base/LikeButton.tsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,11 @@ const LikeButton = ({ isLiked, likeCount, onClick }: LikeButtonProps) => {
1515
return (
1616
<button
1717
onClick={onClick}
18-
className={`${BG_COLOR_CLASS} flex h-[2.4rem] min-w-[5.6rem] items-center gap-[0.4rem] rounded-full border-[0.1rem] border-warning-800 bg-warning-800 px-[1rem]`}
18+
className={`${BG_COLOR_CLASS} flex h-[2.4rem] items-center gap-[0.4rem] rounded-full border-[0.1rem] border-warning-800 bg-warning-800`}
1919
>
20-
<IconHeart
21-
className={`${ICON_COLOR_CLASS} h-[1.5rem] w-[1.5rem] fill-white stroke-[0.15rem]`}
22-
/>
20+
<IconHeart className={`${ICON_COLOR_CLASS} ml-[1rem]`} />
2321
<p
24-
className={`${TEXT_COLOR_CLASS} min-w-[1.5rem] text-center font-caption1-bold`}
22+
className={`${TEXT_COLOR_CLASS} mr-[1.1rem] min-w-[1.2rem] text-end font-caption1-bold`}
2523
>
2624
{likeCount}
2725
</p>

‎src/v1/bookGroup/DetailBookGroupCard.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -61,9 +61,7 @@ const DetailBookGroupCard = ({
6161
export default DetailBookGroupCard;
6262

6363
const Public = ({ isPublic }: { isPublic: boolean }) => (
64-
<Badge size="large" colorScheme="grey">
65-
{isPublic ? '공개' : '비공개'}
66-
</Badge>
64+
<Badge colorScheme="grey">{isPublic ? '공개' : '비공개'}</Badge>
6765
);
6866

6967
const Title = ({ title }: { title: string }) => {

‎src/v1/bookShelf/BookShelf.tsx‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,6 @@ import { APIBook } from '@/types/book';
1010
import { APIBookshelf } from '@/types/bookshelf';
1111
import { IconArrowRight, IconHeart } from '@public/icons';
1212

13-
import Badge from '@/v1/base/Badge';
14-
1513
const BookShelf = ({ children }: { children: ReactNode }) => {
1614
return <>{children}</>;
1715
};
@@ -31,17 +29,18 @@ const Info = ({ bookshelfName, bookshelfId, likeCount }: InfoProps) => {
3129
return (
3230
<div className="flex flex-col gap-[1rem] px-[2rem]">
3331
<div className="flex items-center justify-between">
34-
<div className="font-body2-bold">{bookshelfName}</div>
35-
<Link href={`/bookshelf/${bookshelfId}`}>
36-
<IconArrowRight width="1.8rem" height="1.8rem" />
32+
<Link
33+
href={`/bookshelf/${bookshelfId}`}
34+
className="flex select-none items-center gap-[0.5rem]"
35+
>
36+
<div className="font-body2-bold">{bookshelfName}</div>
37+
<IconArrowRight width="1.2rem" height="1.2rem" />
3738
</Link>
38-
</div>
39-
<Badge colorScheme="red" fontWeight="bold" size="small">
40-
<div className="flex items-center gap-[0.4rem]">
41-
<IconHeart className="h-[1.3rem] w-[1.3rem] fill-warning-800 stroke-white stroke-[0.15rem]" />
42-
<div className="font-caption1-bold">{likeCount}</div>
39+
<div className="flex items-center gap-[0.3rem] px-[0.6rem] py-[0.2rem]">
40+
<IconHeart className=" fill-warning-800 stroke-warning-800" />
41+
<p className=" text-black-600 font-caption2-bold">{likeCount}</p>
4342
</div>
44-
</Badge>
43+
</div>
4544
</div>
4645
);
4746
};

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

Lines changed: 11 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { APIBookshelf } from '@/types/bookshelf';
22

3-
import Badge from '@/v1/base/Badge';
43
import BookShelf from '@/v1/bookShelf/BookShelf';
54

65
import { IconArrowRight, IconHeart } from '@public/icons';
@@ -14,24 +13,19 @@ const ProfileBookshelfPresenter = ({
1413
return (
1514
<div className="flex flex-col gap-[1rem]">
1615
<div className="flex items-center justify-between">
17-
<h3 className="font-body1-bold">책장</h3>
18-
<div className="flex gap-[2rem]">
19-
<Badge
20-
colorScheme="red"
21-
fontWeight="bold"
22-
size="medium"
23-
isFilled={false}
24-
>
25-
<div className="flex items-center gap-[0.4rem]">
26-
<IconHeart className="h-[1.4rem] w-[1.4rem] fill-[#F56565]" />
27-
<div className="font-caption1-bold">{likeCount}</div>
28-
</div>
29-
</Badge>
30-
<Link href={`/bookshelf/${bookshelfId}`}>
31-
<IconArrowRight height="1.8rem" width="1.8rem" />
32-
</Link>
16+
<Link
17+
href={`/bookshelf/${bookshelfId}`}
18+
className="flex items-center gap-[0.5rem]"
19+
>
20+
<h3 className="font-body1-bold">책장</h3>
21+
<IconArrowRight height="1.3rem" width="1.3rem" />
22+
</Link>
23+
<div className="flex items-center gap-[0.3rem] px-[0.6rem] py-[0.2rem]">
24+
<IconHeart className=" fill-warning-800 stroke-warning-800" />
25+
<p className=" text-black-600 font-caption2-bold">{likeCount}</p>
3326
</div>
3427
</div>
28+
3529
<BookShelf>
3630
<div className="w-app pb-[2.5rem] pt-[2rem] shadow-[0px_20px_20px_-16px_#D1D1D1]">
3731
<BookShelf.Background />

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

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,12 +17,13 @@ const ProfileGroupPresenter = ({
1717
}: ProfileGroupPresenterProps) => {
1818
return (
1919
<div className="mt-[0.5rem] flex flex-col gap-[1.5rem]">
20-
<div className="flex items-center justify-between">
20+
<Link
21+
href={`/profile/${userId}/group`}
22+
className="flex w-fit items-center gap-[0.5rem]"
23+
>
2124
<h3 className="font-body1-bold">참여한 모임</h3>
22-
<Link href={`/profile/${userId}/group`}>
23-
<IconArrowRight height="1.8rem" width="1.8rem" />
24-
</Link>
25-
</div>
25+
<IconArrowRight height="1.3rem" width="1.3rem" />
26+
</Link>
2627

2728
<ul className="relative left-0 flex w-[calc(100%+2rem)] gap-[1rem] overflow-y-hidden overflow-x-scroll pb-[1.5rem] pr-[2rem]">
2829
{bookGroups.map(({ bookGroupId, title, owner, book: { imageUrl } }) => (

0 commit comments

Comments
 (0)