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

This reverts commit 70af27a.
prgrms-web-devcourse · Aug 20, 2024 · cf01065 · cf01065
1 parent b066606
commit cf01065
Show file tree

Hide file tree

Showing 8 changed files with 45 additions and 53 deletions.
diff --git a/next.config.js b/next.config.js
@@ -7,25 +7,7 @@ const nextConfig = {
   webpack: config => {
     config.module.rules.push({
       test: /\.svg$/,
-      use: [
-        {
-          loader: '@svgr/webpack',
-          options: {
-            svgoConfig: {
-              plugins: [
-                {
-                  name: 'preset-default',
-                  params: {
-                    overrides: {
-                      removeViewBox: false,
-                    },
-                  },
-                },
-              ],
-            },
-          },
-        },
-      ],
+      use: ['@svgr/webpack'],
     });
     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.1rem] px-[0.6rem] py-[0.25rem] ${computedClasses}`}
+      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}`}
       {...props}
     >
       {children}

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

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

diff --git a/src/v1/bookShelf/BookShelf.tsx b/src/v1/bookShelf/BookShelf.tsx
@@ -10,6 +10,8 @@ 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}</>;
 };
@@ -29,18 +31,17 @@ const Info = ({ bookshelfName, bookshelfId, likeCount }: InfoProps) => {
   return (
     <div className="flex flex-col gap-[1rem] px-[2rem]">
       <div className="flex items-center justify-between">
-        <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" />
+        <div className="font-body2-bold">{bookshelfName}</div>
+        <Link href={`/bookshelf/${bookshelfId}`}>
+          <IconArrowRight width="1.8rem" height="1.8rem" />
         </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>
+      <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>
+      </Badge>
     </div>
   );
 };

diff --git a/src/v1/profile/bookShelf/ProfileBookshelfPresenter.tsx b/src/v1/profile/bookShelf/ProfileBookshelfPresenter.tsx
@@ -1,5 +1,6 @@
 import { APIBookshelf } from '@/types/bookshelf';
 
+import Badge from '@/v1/base/Badge';
 import BookShelf from '@/v1/bookShelf/BookShelf';
 
 import { IconArrowRight, IconHeart } from '@public/icons';
@@ -13,19 +14,24 @@ const ProfileBookshelfPresenter = ({
   return (
     <div className="flex flex-col gap-[1rem]">
       <div className="flex items-center justify-between">
-        <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>
+        <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>
         </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,13 +17,12 @@ const ProfileGroupPresenter = ({
 }: ProfileGroupPresenterProps) => {
   return (
     <div className="mt-[0.5rem] flex flex-col gap-[1.5rem]">
-      <Link
-        href={`/profile/${userId}/group`}
-        className="flex w-fit items-center gap-[0.5rem]"
-      >
+      <div className="flex items-center justify-between">
         <h3 className="font-body1-bold">참여한 모임</h3>
-        <IconArrowRight height="1.3rem" width="1.3rem" />
-      </Link>
+        <Link href={`/profile/${userId}/group`}>
+          <IconArrowRight height="1.8rem" width="1.8rem" />
+        </Link>
+      </div>
 
       <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 } }) => (