[#616] 책장 좋아요 뱃지 UI 수정 (#620)

* refactor: Badge style 수정 - 모임 목록 페이지 카드 badge size medium으로 통일 * feat: svgo removeViewBox 속성 off * refactor: like button style 수정, heart svg 수정 * refactor: 북카이브 책장, 프로필 페이지 책장/모임 영역 ui(좋아요 개수 위치, 더보기 화살표) 수정
prgrms-web-devcourse · Jun 17, 2024 · 70af27a · 70af27a
1 parent 209ba3e
commit 70af27a
Show file tree

Hide file tree

Showing 8 changed files with 53 additions and 45 deletions.
diff --git a/next.config.js b/next.config.js
@@ -7,7 +7,25 @@ const nextConfig = {
   webpack: config => {
     config.module.rules.push({
       test: /\.svg$/,
-      use: ['@svgr/webpack'],
+      use: [
+        {
+          loader: '@svgr/webpack',
+          options: {
+            svgoConfig: {
+              plugins: [
+                {
+                  name: 'preset-default',
+                  params: {
+                    overrides: {
+                      removeViewBox: false,
+                    },
+                  },
+                },
+              ],
+            },
+          },
+        },
+      ],
     });
     return config;
   },

diff --git a/public/icons/heart.svg b/public/icons/heart.svg
diff --git a/src/v1/base/Badge.tsx b/src/v1/base/Badge.tsx
@@ -82,7 +82,7 @@ const Badge = ({
 
   return (
     <div
-      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}`}
+      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}`}
       {...props}
     >
       {children}

diff --git a/src/v1/base/LikeButton.tsx b/src/v1/base/LikeButton.tsx
@@ -15,13 +15,11 @@ const LikeButton = ({ isLiked, likeCount, onClick }: LikeButtonProps) => {
   return (
     <button
       onClick={onClick}
-      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]`}
+      className={`${BG_COLOR_CLASS} flex h-[2.4rem] items-center gap-[0.4rem] rounded-full border-[0.1rem] border-warning-800 bg-warning-800`}
     >
-      <IconHeart
-        className={`${ICON_COLOR_CLASS} h-[1.5rem] w-[1.5rem] fill-white stroke-[0.15rem]`}
-      />
+      <IconHeart className={`${ICON_COLOR_CLASS} ml-[1rem]`} />
       <p
-        className={`${TEXT_COLOR_CLASS} min-w-[1.5rem] text-center font-caption1-bold`}
+        className={`${TEXT_COLOR_CLASS} mr-[1.1rem] min-w-[1.2rem] text-end font-caption1-bold`}
       >
         {likeCount}
       </p>

diff --git a/src/v1/bookGroup/DetailBookGroupCard.tsx b/src/v1/bookGroup/DetailBookGroupCard.tsx
@@ -61,9 +61,7 @@ const DetailBookGroupCard = ({
 export default DetailBookGroupCard;
 
 const Public = ({ isPublic }: { isPublic: boolean }) => (
-  <Badge size="large" colorScheme="grey">
-    {isPublic ? '공개' : '비공개'}
-  </Badge>
+  <Badge colorScheme="grey">{isPublic ? '공개' : '비공개'}</Badge>
 );
 
 const Title = ({ title }: { title: string }) => {

diff --git a/src/v1/bookShelf/BookShelf.tsx b/src/v1/bookShelf/BookShelf.tsx
@@ -10,8 +10,6 @@ import { APIBook } from '@/types/book';
 import { APIBookshelf } from '@/types/bookshelf';
 import { IconArrowRight, IconHeart } from '@public/icons';
 
-import Badge from '@/v1/base/Badge';
-
 const BookShelf = ({ children }: { children: ReactNode }) => {
   return <>{children}</>;
 };
@@ -31,17 +29,18 @@ const Info = ({ bookshelfName, bookshelfId, likeCount }: InfoProps) => {
   return (
     <div className="flex flex-col gap-[1rem] px-[2rem]">
       <div className="flex items-center justify-between">
-        <div className="font-body2-bold">{bookshelfName}</div>
-        <Link href={`/bookshelf/${bookshelfId}`}>
-          <IconArrowRight width="1.8rem" height="1.8rem" />
+        <Link
+          href={`/bookshelf/${bookshelfId}`}
+          className="flex select-none items-center gap-[0.5rem]"
+        >
+          <div className="font-body2-bold">{bookshelfName}</div>
+          <IconArrowRight width="1.2rem" height="1.2rem" />
         </Link>
-      </div>
-      <Badge colorScheme="red" fontWeight="bold" size="small">
-        <div className="flex items-center gap-[0.4rem]">
-          <IconHeart className="h-[1.3rem] w-[1.3rem] fill-warning-800 stroke-white stroke-[0.15rem]" />
-          <div className="font-caption1-bold">{likeCount}</div>
+        <div className="flex items-center gap-[0.3rem] px-[0.6rem] py-[0.2rem]">
+          <IconHeart className=" fill-warning-800 stroke-warning-800" />
+          <p className=" text-black-600 font-caption2-bold">{likeCount}</p>
         </div>
-      </Badge>
+      </div>
     </div>
   );
 };

diff --git a/src/v1/profile/bookShelf/ProfileBookshelfPresenter.tsx b/src/v1/profile/bookShelf/ProfileBookshelfPresenter.tsx
@@ -1,6 +1,5 @@
 import { APIBookshelf } from '@/types/bookshelf';
 
-import Badge from '@/v1/base/Badge';
 import BookShelf from '@/v1/bookShelf/BookShelf';
 
 import { IconArrowRight, IconHeart } from '@public/icons';
@@ -14,24 +13,19 @@ const ProfileBookshelfPresenter = ({
   return (
     <div className="flex flex-col gap-[1rem]">
       <div className="flex items-center justify-between">
-        <h3 className="font-body1-bold">책장</h3>
-        <div className="flex gap-[2rem]">
-          <Badge
-            colorScheme="red"
-            fontWeight="bold"
-            size="medium"
-            isFilled={false}
-          >
-            <div className="flex items-center gap-[0.4rem]">
-              <IconHeart className="h-[1.4rem] w-[1.4rem] fill-[#F56565]" />
-              <div className="font-caption1-bold">{likeCount}</div>
-            </div>
-          </Badge>
-          <Link href={`/bookshelf/${bookshelfId}`}>
-            <IconArrowRight height="1.8rem" width="1.8rem" />
-          </Link>
+        <Link
+          href={`/bookshelf/${bookshelfId}`}
+          className="flex items-center gap-[0.5rem]"
+        >
+          <h3 className="font-body1-bold">책장</h3>
+          <IconArrowRight height="1.3rem" width="1.3rem" />
+        </Link>
+        <div className="flex items-center gap-[0.3rem] px-[0.6rem] py-[0.2rem]">
+          <IconHeart className=" fill-warning-800 stroke-warning-800" />
+          <p className=" text-black-600 font-caption2-bold">{likeCount}</p>
         </div>
       </div>
+
       <BookShelf>
         <div className="w-app pb-[2.5rem] pt-[2rem] shadow-[0px_20px_20px_-16px_#D1D1D1]">
           <BookShelf.Background />

diff --git a/src/v1/profile/group/ProfileGroupPresenter.tsx b/src/v1/profile/group/ProfileGroupPresenter.tsx
@@ -17,12 +17,13 @@ const ProfileGroupPresenter = ({
 }: ProfileGroupPresenterProps) => {
   return (
     <div className="mt-[0.5rem] flex flex-col gap-[1.5rem]">
-      <div className="flex items-center justify-between">
+      <Link
+        href={`/profile/${userId}/group`}
+        className="flex w-fit items-center gap-[0.5rem]"
+      >
         <h3 className="font-body1-bold">참여한 모임</h3>
-        <Link href={`/profile/${userId}/group`}>
-          <IconArrowRight height="1.8rem" width="1.8rem" />
-        </Link>
-      </div>
+        <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 } }) => (